-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add extended nav behavior inside FooterNav * Add SignupForm * Organize stories in subdirectories and add info
- Loading branch information
Showing
11 changed files
with
442 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,95 @@ | ||
| import React from 'react' | ||
| import classnames from 'classnames' | ||
|
|
||
| type ExtendedNavLinks = [React.ReactNode[]] | ||
|
|
||
| type FooterNavProps = { | ||
| big?: boolean | ||
| medium?: boolean | ||
| slim?: boolean | ||
| links: React.ReactNode[] | ||
| /* | ||
| Union type. Array of navigation links or multidimensional array of ExtendedNavLinks. | ||
| ExtendedNavLinks are ordered sub arrays that will be displayed as columns, with the first element used as the section heading. | ||
| ExtendedNavLinks can only be used with "big" prop size | ||
| */ | ||
| links: React.ReactNode[] | ExtendedNavLinks | ||
| } | ||
|
|
||
| function isExtendedNavLinks( | ||
| links: React.ReactNode[] | ExtendedNavLinks | ||
| ): links is ExtendedNavLinks { | ||
| return (links as ExtendedNavLinks)[0].constructor === Array | ||
| } | ||
|
|
||
| export const FooterNav = ( | ||
| props: FooterNavProps & React.HTMLAttributes<HTMLElement> | ||
| ): React.ReactElement => { | ||
| const { medium, slim, links, ...elementAttributes } = props | ||
| const { big, medium, slim, links, ...elementAttributes } = props | ||
|
|
||
| const navClasses = classnames(`usa-footer__nav`, elementAttributes.className) | ||
| const listItemClasses = classnames( | ||
| 'desktop:grid-col-auto usa-footer__primary-content', | ||
| { | ||
| 'mobile-lg:grid-col-4': medium, | ||
| 'mobile-lg:grid-col-4': big || medium, | ||
| 'mobile-lg:grid-col-6': slim, | ||
| } | ||
| ) | ||
|
|
||
| return ( | ||
| <nav className={navClasses} aria-label="Footer navigation"> | ||
| <ul className="grid-row grid-gap"> | ||
| {links.map((link, i) => ( | ||
| <li key={`navLink-${i}`} className={listItemClasses}> | ||
| <nav | ||
| {...elementAttributes} | ||
| className="usa-footer__nav" | ||
| aria-label="Footer navigation"> | ||
| {big && isExtendedNavLinks(links) && <ExtendedNav nestedLinks={links} />} | ||
|
|
||
| {!isExtendedNavLinks(links) && ( | ||
| <ul className="grid-row grid-gap"> | ||
| {links.map((link, i) => ( | ||
| <li key={`navLink-${i}`} className={listItemClasses}> | ||
| {link} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| )} | ||
| </nav> | ||
| ) | ||
| } | ||
|
|
||
| const Section = ({ | ||
| links, | ||
| }: { | ||
| links: React.ReactNode[] | ||
| }): React.ReactElement => { | ||
| const primaryLinkOrHeading = links[0] | ||
| const secondaryLinks = links.slice(1) | ||
|
|
||
| return ( | ||
| <section className="usa-footer__primary-content usa-footer__primary-content--collapsible"> | ||
| <h4 className="usa-footer__primary-link">{primaryLinkOrHeading}</h4> | ||
| <ul className="usa-list usa-list--unstyled"> | ||
| {secondaryLinks.map((link, i) => ( | ||
| <li key={`navLink-${i}`} className="usa-footer__secondary-link"> | ||
| {link} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </nav> | ||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| const ExtendedNav = ({ | ||
| nestedLinks, | ||
| }: { | ||
| nestedLinks: ExtendedNavLinks | ||
| }): React.ReactElement => { | ||
| return ( | ||
| <div className="grid-row grid-gap-4"> | ||
| {nestedLinks.map((links, i) => ( | ||
| <div | ||
| key={`linkSection-${i}`} | ||
| className="mobile-lg:grid-col-6 desktop:grid-col-3"> | ||
| <Section links={links} /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.