docs: cleanup storybook examples and clear warnings (trussworks#736)

* Remove mobile stories - no longer needed since we have viewport plugin * Remove deprecated props from storybook examples * Address storybook warning about deprecated addParameters
dzwillia · Jan 6, 2021 · 4b0f7aa · 4b0f7aa
1 parent 17fb77a
commit 4b0f7aa
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 154 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -7,8 +7,8 @@ import './custom-styles.scss'
 import { addParameters } from '@storybook/client-api'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
-addParameters({
+export const parameters = {
   viewport: {
     viewports: INITIAL_VIEWPORTS,
   },
-})
+}
diff --git a/src/components/Footer/Footer/Footer.stories.tsx b/src/components/Footer/Footer/Footer.stories.tsx
@@ -69,7 +69,7 @@ export const SlimFooter = (): React.ReactElement => (
         </div>
         <div className="tablet:grid-col-4">
           <Address
-            slim
+            size="slim"
             items={[
               <a key="telephone" href="tel:1-800-555-5555">
                 (800) CALL-GOVT
@@ -84,7 +84,7 @@ export const SlimFooter = (): React.ReactElement => (
     }
     secondary={
       <Logo
-        slim
+        size="slim"
         image={
           <img
             className="usa-footer__logo-img"
@@ -115,7 +115,7 @@ export const MediumFooter = (): React.ReactElement => (
     secondary={
       <div className="grid-row grid-gap">
         <Logo
-          medium
+          size="medium"
           image={
             <img
               className="usa-footer__logo-img"
@@ -156,7 +156,7 @@ export const MediumFooter = (): React.ReactElement => (
           />
           <h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
           <Address
-            medium
+            size="medium"
             items={[
               <a key="telephone" href="tel:1-800-555-5555">
                 (800) CALL-GOVT
@@ -228,121 +228,7 @@ export const BigFooter = (): React.ReactElement => (
     secondary={
       <div className="grid-row grid-gap">
         <Logo
-          big
-          image={
-            <img
-              className="usa-footer__logo-img"
-              alt="img alt text"
-              src={logoImg}
-            />
-          }
-          heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
-        />
-        <div className="usa-footer__contact-links mobile-lg:grid-col-6">
-          <SocialLinks
-            links={[
-              <a
-                key="facebook"
-                className="usa-social-link usa-social-link--facebook"
-                href="#">
-                <span>Facebook</span>
-              </a>,
-              <a
-                key="twitter"
-                className="usa-social-link usa-social-link--twitter"
-                href="#">
-                <span>Twitter</span>
-              </a>,
-              <a
-                key="youtube"
-                className="usa-social-link usa-social-link--youtube"
-                href="#">
-                <span>YouTube</span>
-              </a>,
-              <a
-                key="rss"
-                className="usa-social-link usa-social-link--rss"
-                href="#">
-                <span>RSS</span>
-              </a>,
-            ]}
-          />
-          <h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
-          <Address
-            big
-            items={[
-              <a key="telephone" href="tel:1-800-555-5555">
-                (800) CALL-GOVT
-              </a>,
-              <a key="email" href="mailto:[email protected]">
-                [email protected]
-              </a>,
-            ]}
-          />
-        </div>
-      </div>
-    }
-  />
-)
-
-export const MobileBigFooter = (): React.ReactElement => (
-  <Footer
-    size="big"
-    returnToTop={returnToTop}
-    primary={
-      <div className="grid-container">
-        <div className="grid-row grid-gap">
-          <div className="tablet:grid-col-8">
-            <FooterNav
-              isMobile
-              size="big"
-              links={[
-                [
-                  'Topic',
-                  ...Array(2).fill(<a href="#">Secondary link</a>),
-                  <a key="4" href="#">
-                    Secondary link that is a bit longer than most of the others
-                  </a>,
-                  <a key="5" href="#">
-                    Secondary link
-                  </a>,
-                ],
-                [
-                  'Topic',
-                  <a key="2" href="#">
-                    Secondary link that is pretty long
-                  </a>,
-                  ...Array(3).fill(<a href="#">Secondary link</a>),
-                ],
-                [
-                  'Topic',
-                  ...Array(4).fill(
-                    <a className="usa-footer__secondary-link" href="#">
-                      Secondary link
-                    </a>
-                  ),
-                ],
-                [
-                  'Topic',
-                  ...Array(4).fill(
-                    <a className="usa-footer__secondary-link" href="#">
-                      Secondary link
-                    </a>
-                  ),
-                ],
-              ]}
-            />
-          </div>
-          <div className="tablet:grid-col-4">
-            <SignUpForm />
-          </div>
-        </div>
-      </div>
-    }
-    secondary={
-      <div className="grid-row grid-gap">
-        <Logo
-          big
+          size="big"
           image={
             <img
               className="usa-footer__logo-img"
@@ -383,7 +269,7 @@ export const MobileBigFooter = (): React.ReactElement => (
           />
           <h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
           <Address
-            big
+            size="big"
             items={[
               <a key="telephone" href="tel:1-800-555-5555">
                 (800) CALL-GOVT

diff --git a/src/components/Footer/FooterNav/FooterNav.stories.tsx b/src/components/Footer/FooterNav/FooterNav.stories.tsx
@@ -63,28 +63,3 @@ export const BigFooterNav = (): React.ReactElement => (
     secondary={<></>}
   />
 )
-
-export const MobileBigFooterNav = (): React.ReactElement => (
-  <Footer
-    size="big"
-    primary={
-      <FooterNav
-        aria-label="Footer navigation"
-        size="big"
-        isMobile
-        links={[
-          ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
-          [
-            'Topic',
-            <a key="2" href="#">
-              Secondary link that is pretty long
-            </a>,
-            ...Array(2).fill(<a href="#">Secondary link</a>),
-          ],
-          ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
-        ]}
-      />
-    }
-    secondary={<></>}
-  />
-)
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -44,7 +44,7 @@ export const Search = (
     deprecationWarning('Search property big is deprecated.  Use size')
   }
   if (small) {
-    deprecationWarning('Search property big is deprecated.  Use size')
+    deprecationWarning('Search property small is deprecated.  Use size')
   }
 
   const isBig = size ? size === 'big' : big

diff --git a/src/components/header/Header/Header.stories.tsx b/src/components/header/Header/Header.stories.tsx
@@ -91,7 +91,7 @@ export const BasicHeader = (): React.ReactElement => {
             items={testItemsMenu}
             mobileExpanded={expanded}
             onToggleMobileNav={onClick}>
-            <Search small onSubmit={mockSubmit} />
+            <Search size="small" onSubmit={mockSubmit} />
           </PrimaryNav>
         </div>
       </Header>
@@ -198,7 +198,7 @@ export const BasicHeaderWithMegaMenu = (): React.ReactElement => {
             items={testItemsMegaMenu}
             mobileExpanded={expanded}
             onToggleMobileNav={onClick}>
-            <Search small onSubmit={mockSubmit} />
+            <Search size="small" onSubmit={mockSubmit} />
           </PrimaryNav>
         </div>
       </Header>
@@ -258,7 +258,7 @@ export const extendedHeader = (): React.ReactElement => {
           secondaryItems={testMenuItems}
           mobileExpanded={expanded}
           onToggleMobileNav={onClick}>
-          <Search small onSubmit={mockSubmit} />
+          <Search size="small" onSubmit={mockSubmit} />
         </ExtendedNav>
       </Header>
     </>
@@ -337,7 +337,7 @@ export const extendedHeaderWithMegaMenu = (): React.ReactElement => {
           secondaryItems={testMenuItems}
           mobileExpanded={expanded}
           onToggleMobileNav={onClick}>
-          <Search small onSubmit={mockSubmit} />
+          <Search size="small" onSubmit={mockSubmit} />
         </ExtendedNav>
       </Header>
     </>

diff --git a/src/stories/templates/documentation.stories.tsx b/src/stories/templates/documentation.stories.tsx
@@ -225,7 +225,7 @@ export const DocumentationPage = (): React.ReactElement => {
             items={primaryNavItems}
             onToggleMobileNav={toggleMobileNav}
             mobileExpanded={mobileNavOpen}>
-            <Search small onSubmit={handleSearch} />
+            <Search size="small" onSubmit={handleSearch} />
           </PrimaryNav>
         </div>
       </Header>

diff --git a/src/stories/templates/landing.stories.tsx b/src/stories/templates/landing.stories.tsx
@@ -196,7 +196,7 @@ export const LandingPage = (): React.ReactElement => {
           secondaryItems={secondaryNavItems}
           onToggleMobileNav={toggleMobileNav}
           mobileExpanded={mobileNavOpen}>
-          <Search small onSubmit={handleSearch} />
+          <Search size="small" onSubmit={handleSearch} />
         </ExtendedNav>
       </Header>