Skip to content

Commit

Permalink
docs: cleanup storybook examples and clear warnings (#736)
Browse files Browse the repository at this point in the history 
* Remove mobile stories - no longer needed since we have viewport plugin
* Remove deprecated props from storybook examples
* Address storybook warning about deprecated addParameters
  • Loading branch information
@haworku
haworku authored Jan 6, 2021
1 parent 17fb77a commit 4b0f7aa
Show file tree
Hide file tree
Showing 7 changed files with 15 additions and 154 deletions.
4 changes: 2 additions & 2 deletions .storybook/preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
})
}
126 changes: 6 additions & 120 deletions src/components/Footer/Footer/Footer.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -84,7 +84,7 @@ export const SlimFooter = (): React.ReactElement => (
}
secondary={
<Logo
slim
size="slim"
image={
<img
className="usa-footer__logo-img"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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:info@agency.gov">
info@agency.gov
</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"
Expand Down Expand Up @@ -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
Expand Down
25 changes: 0 additions & 25 deletions src/components/Footer/FooterNav/FooterNav.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={<></>}
/>
)
2 changes: 1 addition & 1 deletion src/components/Search/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions src/components/header/Header/Header.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
</>
Expand Down Expand Up @@ -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>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/stories/templates/documentation.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/stories/templates/landing.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit 4b0f7aa

Please sign in to comment.