From d44b382d46bfb66e4c2e3c785aa3aca206cb41d2 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Fri, 15 Jan 2021 19:26:16 -0500 Subject: [PATCH 01/21] Add Breadcrumb nav component --- .../breadcrumb/Breadcrumb/Breadcrumb.tsx | 38 ++++++++++++++ .../BreadcrumbNav/BreadcrumbNav.stories.tsx | 51 +++++++++++++++++++ .../BreadcrumbNav/BreadcrumbNav.tsx | 33 ++++++++++++ 3 files changed, 122 insertions(+) create mode 100644 src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx create mode 100644 src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx create mode 100644 src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 0000000000..ab20238c6c --- /dev/null +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import classnames from 'classnames' + +export interface BreadcrumbProps { + label: string + href?: string + current?: boolean +} + +export const Breadcrumb = ( + props: BreadcrumbProps & JSX.IntrinsicElements['li'] +): React.ReactElement => { + const { label, href, current = false, className, ...listItemProps } = props + + if (current) { + return ( +
  • + {label} +
    • + ) + } + + return ( +
  • + + {label} + +
    • + ) +} diff --git a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx new file mode 100644 index 0000000000..4b3214927a --- /dev/null +++ b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx @@ -0,0 +1,51 @@ +import React from 'react' +import { Breadcrumb } from '../Breadcrumb/Breadcrumb' +import { BreadcrumbNav } from './BreadcrumbNav' + +export default { + title: 'Breadcrumb', + component: BreadcrumbNav, + parameters: { + info: ` + Provide secondary navigation to help users understand where they are in a website. + + Source: https://designsystem.digital.gov/components/breadcrumb/ + `, + }, +} + +export const DefaultBreadcrumb = (): React.ReactElement => ( + + + + + + +) + +export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => ( + + + + + + +) + +export const WrappingBreadcrumb = (): React.ReactElement => ( + + + + + + +) diff --git a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx new file mode 100644 index 0000000000..8790abfb43 --- /dev/null +++ b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx @@ -0,0 +1,33 @@ +import React, { ReactElement } from 'react' +import classnames from 'classnames' + +import { BreadcrumbProps } from '../Breadcrumb/Breadcrumb' + +interface BreadcrumbNavProps { + variant?: 'default' | 'wrap' + withMetaData?: boolean + children: ReactElement | ReactElement[] +} + +export const BreadcrumbNav = ( + props: BreadcrumbNavProps & JSX.IntrinsicElements['nav'] +): React.ReactElement => { + const { + variant = 'default', + withMetaData = false, + children, + className, + ...navProps + } = props + const uswdsClassName = + variant === 'wrap' + ? 'usa-breadcrumb usa-breadcrumb--wrap' + : 'usa-breadcrumb' + const classes = classnames(uswdsClassName, className) + + return ( + + ) +} From 5e58d3ad6c30e06338de3d0424ca4dcef6656b25 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Tue, 19 Jan 2021 10:41:31 -0500 Subject: [PATCH 02/21] WIP commit: add metadata --- .../breadcrumb/Breadcrumb/Breadcrumb.tsx | 48 +++++++++++++++++-- .../BreadcrumbNav/BreadcrumbNav.tsx | 15 +++++- 2 files changed, 57 insertions(+), 6 deletions(-) diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx index ab20238c6c..1c3dccd5dc 100644 --- a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx @@ -5,33 +5,73 @@ export interface BreadcrumbProps { label: string href?: string current?: boolean + withMetaData?: boolean } export const Breadcrumb = ( props: BreadcrumbProps & JSX.IntrinsicElements['li'] ): React.ReactElement => { - const { label, href, current = false, className, ...listItemProps } = props + const { + label, + href, + current = false, + withMetaData = false, + className, + ...listItemProps + } = props + + const assignMetaDataValue = (value: string): string | undefined => { + return withMetaData ? value : undefined + } + + const metaData = { + li: { + property: assignMetaDataValue('itemListElement'), + typeof: assignMetaDataValue('ListItem'), + }, + a: { + property: assignMetaDataValue('item'), + typeof: assignMetaDataValue('WebPage'), + }, + span: { + property: assignMetaDataValue('name'), + }, + } if (current) { return (
  • - {label} + + {label} + {/*TODO: Meta Position Prop*/} +
    • ) } return (
  • - - {label} + + + {label} + {/*TODO: Meta Position Prop*/} +
    • ) diff --git a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx index 8790abfb43..9a1e511da1 100644 --- a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx +++ b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx @@ -6,7 +6,7 @@ import { BreadcrumbProps } from '../Breadcrumb/Breadcrumb' interface BreadcrumbNavProps { variant?: 'default' | 'wrap' withMetaData?: boolean - children: ReactElement | ReactElement[] + children: ReactElement[] } export const BreadcrumbNav = ( @@ -25,9 +25,20 @@ export const BreadcrumbNav = ( : 'usa-breadcrumb' const classes = classnames(uswdsClassName, className) + let breadcrumbs = children + if (withMetaData) { + breadcrumbs = children.map((child) => + React.cloneElement(child, { withMetaData: true }) + ) + } + return ( ) } From fd4aac985c39f2d0d3f72da5cbe3fa5d1fc22666 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Tue, 19 Jan 2021 11:04:17 -0500 Subject: [PATCH 03/21] Add breadcrumb position meta data --- .../breadcrumb/Breadcrumb/Breadcrumb.tsx | 18 ++++++++++-------- .../breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx | 7 +++++-- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx index 1c3dccd5dc..2995fabd0c 100644 --- a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx @@ -6,6 +6,7 @@ export interface BreadcrumbProps { href?: string current?: boolean withMetaData?: boolean + position?: number } export const Breadcrumb = ( @@ -16,6 +17,7 @@ export const Breadcrumb = ( href, current = false, withMetaData = false, + position = undefined, className, ...listItemProps } = props @@ -38,6 +40,10 @@ export const Breadcrumb = ( }, } + const metaPositionTag = position ? ( + + ) : undefined + if (current) { return (
  • - - {label} - {/*TODO: Meta Position Prop*/} - + {label} + {withMetaData && metaPositionTag}
    • ) } @@ -68,10 +72,8 @@ export const Breadcrumb = ( typeof={metaData.a.typeof} href={href} className="usa-breadcrumb__link"> - - {label} - {/*TODO: Meta Position Prop*/} - + {label} + {withMetaData && metaPositionTag} ) diff --git a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx index 9a1e511da1..316397d43a 100644 --- a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx +++ b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx @@ -27,8 +27,11 @@ export const BreadcrumbNav = ( let breadcrumbs = children if (withMetaData) { - breadcrumbs = children.map((child) => - React.cloneElement(child, { withMetaData: true }) + breadcrumbs = children.map((child, index) => + React.cloneElement(child, { + withMetaData: true, + position: index + 1, + }) ) } From 9e0f5ff79d5d4acb7267aa8b34487ef6dfee64df Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Tue, 19 Jan 2021 14:41:59 -0500 Subject: [PATCH 04/21] Add exports for new components --- src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.ts b/src/index.ts index bd13af4a9d..daf70aa374 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,6 +11,8 @@ export { Link } from './components/Link/Link' export { Table } from './components/Table/Table' export { Tag } from './components/Tag/Tag' export { SideNav } from './components/SideNav/SideNav' +export { BreadcrumbNav } from './components/breadcrumb/BreadcrumbNav/BreadcrumbNav' +export { Breadcrumb } from './components/breadcrumb/Breadcrumb/Breadcrumb' /** Grid components */ export { GridContainer } from './components/grid/GridContainer/GridContainer' From d5305b24cadd8a959a688e3191c6747a5d7ce290 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Tue, 19 Jan 2021 21:48:50 -0500 Subject: [PATCH 05/21] Simplify structure and rename to match docs --- .../BreadcrumbBar/BreadcrumbBar.stories.tsx | 46 ++++++++++ .../BreadcrumbBar/BreadcrumbBar.tsx | 92 +++++++++++++++++++ .../breadcrumb/Breadcrumb/Breadcrumb.tsx | 80 ---------------- .../BreadcrumbNav/BreadcrumbNav.stories.tsx | 51 ---------- .../BreadcrumbNav/BreadcrumbNav.tsx | 47 ---------- src/index.ts | 3 +- 6 files changed, 139 insertions(+), 180 deletions(-) create mode 100644 src/components/BreadcrumbBar/BreadcrumbBar.stories.tsx create mode 100644 src/components/BreadcrumbBar/BreadcrumbBar.tsx delete mode 100644 src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx delete mode 100644 src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx delete mode 100644 src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx diff --git a/src/components/BreadcrumbBar/BreadcrumbBar.stories.tsx b/src/components/BreadcrumbBar/BreadcrumbBar.stories.tsx new file mode 100644 index 0000000000..ebf5974430 --- /dev/null +++ b/src/components/BreadcrumbBar/BreadcrumbBar.stories.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { BreadcrumbBar } from './BreadcrumbBar' + +export default { + title: 'Breadcrumb', + component: BreadcrumbBar, + parameters: { + info: ` + Provide secondary navigation to help users understand where they are in a website. + + Source: https://designsystem.digital.gov/components/breadcrumb/ + `, + }, +} + +const sampleBreadcrumbs = [ + { pageName: 'Home', href: '#' }, + { pageName: 'Federal Contracting', href: '#' }, + { pageName: 'Contacting assistance programs', href: '#' }, +] + +const sampleCurrentPageName = + 'Women-owned small business federal contracting program' + +export const DefaultBreadcrumb = (): React.ReactElement => ( + +) + +export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => ( + +) + +export const WrappingBreadcrumb = (): React.ReactElement => ( + +) diff --git a/src/components/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/BreadcrumbBar/BreadcrumbBar.tsx new file mode 100644 index 0000000000..4f227be8b3 --- /dev/null +++ b/src/components/BreadcrumbBar/BreadcrumbBar.tsx @@ -0,0 +1,92 @@ +import React, { ReactElement } from 'react' +import classnames from 'classnames' + +const metaData = { + li: { + property: 'itemListElement', + typeof: 'ListItem', + }, + a: { + property: 'item', + typeof: 'WebPage', + }, + span: { + property: 'name', + }, +} + +const getMetaPositionTag = ( + position: number | undefined +): JSX.Element | undefined => + position ? ( + + ) : undefined + +type PageInfo = { + pageName: string + href: string +} + +interface BreadcrumbBarProps { + variant?: 'default' | 'wrap' + withMetaData?: boolean + pageName: string + pageHierarchy: PageInfo[] +} + +export const BreadcrumbBar = ( + props: BreadcrumbBarProps & JSX.IntrinsicElements['nav'] +): React.ReactElement => { + const { + variant = 'default', + withMetaData = false, + pageName, + pageHierarchy, + className, + ...navProps + } = props + const uswdsClassName = + variant === 'wrap' + ? 'usa-breadcrumb usa-breadcrumb--wrap' + : 'usa-breadcrumb' + const classes = classnames(uswdsClassName, className) + + const breadcrumbs = pageHierarchy.map((pageInfo, i) => ( +
  • + + {pageInfo.pageName} + {withMetaData && getMetaPositionTag(i + 1)} + +
    • + )) + + const current = ( +
  • + {pageName} + {withMetaData && getMetaPositionTag(breadcrumbs.length + 1)} +
    • + ) + + return ( + + ) +} diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx deleted file mode 100644 index 2995fabd0c..0000000000 --- a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react' -import classnames from 'classnames' - -export interface BreadcrumbProps { - label: string - href?: string - current?: boolean - withMetaData?: boolean - position?: number -} - -export const Breadcrumb = ( - props: BreadcrumbProps & JSX.IntrinsicElements['li'] -): React.ReactElement => { - const { - label, - href, - current = false, - withMetaData = false, - position = undefined, - className, - ...listItemProps - } = props - - const assignMetaDataValue = (value: string): string | undefined => { - return withMetaData ? value : undefined - } - - const metaData = { - li: { - property: assignMetaDataValue('itemListElement'), - typeof: assignMetaDataValue('ListItem'), - }, - a: { - property: assignMetaDataValue('item'), - typeof: assignMetaDataValue('WebPage'), - }, - span: { - property: assignMetaDataValue('name'), - }, - } - - const metaPositionTag = position ? ( - - ) : undefined - - if (current) { - return ( -
  • - {label} - {withMetaData && metaPositionTag} -
    • - ) - } - - return ( -
  • - - {label} - {withMetaData && metaPositionTag} - -
    • - ) -} diff --git a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx deleted file mode 100644 index 4b3214927a..0000000000 --- a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react' -import { Breadcrumb } from '../Breadcrumb/Breadcrumb' -import { BreadcrumbNav } from './BreadcrumbNav' - -export default { - title: 'Breadcrumb', - component: BreadcrumbNav, - parameters: { - info: ` - Provide secondary navigation to help users understand where they are in a website. - - Source: https://designsystem.digital.gov/components/breadcrumb/ - `, - }, -} - -export const DefaultBreadcrumb = (): React.ReactElement => ( - - - - - - -) - -export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => ( - - - - - - -) - -export const WrappingBreadcrumb = (): React.ReactElement => ( - - - - - - -) diff --git a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx b/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx deleted file mode 100644 index 316397d43a..0000000000 --- a/src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { ReactElement } from 'react' -import classnames from 'classnames' - -import { BreadcrumbProps } from '../Breadcrumb/Breadcrumb' - -interface BreadcrumbNavProps { - variant?: 'default' | 'wrap' - withMetaData?: boolean - children: ReactElement[] -} - -export const BreadcrumbNav = ( - props: BreadcrumbNavProps & JSX.IntrinsicElements['nav'] -): React.ReactElement => { - const { - variant = 'default', - withMetaData = false, - children, - className, - ...navProps - } = props - const uswdsClassName = - variant === 'wrap' - ? 'usa-breadcrumb usa-breadcrumb--wrap' - : 'usa-breadcrumb' - const classes = classnames(uswdsClassName, className) - - let breadcrumbs = children - if (withMetaData) { - breadcrumbs = children.map((child, index) => - React.cloneElement(child, { - withMetaData: true, - position: index + 1, - }) - ) - } - - return ( - - ) -} diff --git a/src/index.ts b/src/index.ts index daf70aa374..faa252e0cf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,8 +11,7 @@ export { Link } from './components/Link/Link' export { Table } from './components/Table/Table' export { Tag } from './components/Tag/Tag' export { SideNav } from './components/SideNav/SideNav' -export { BreadcrumbNav } from './components/breadcrumb/BreadcrumbNav/BreadcrumbNav' -export { Breadcrumb } from './components/breadcrumb/Breadcrumb/Breadcrumb' +export { BreadcrumbBar } from './components/BreadcrumbBar/BreadcrumbBar' /** Grid components */ export { GridContainer } from './components/grid/GridContainer/GridContainer' From bc29bfafcff4185ef5fd26f21435cd944a5cc025 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Wed, 20 Jan 2021 10:52:52 -0500 Subject: [PATCH 06/21] Refactor Breadcrumbs for modularity and simplicity --- .../BreadcrumbBar/BreadcrumbBar.tsx | 92 ------------------- .../breadcrumb/Breadcrumb/Breadcrumb.tsx | 86 +++++++++++++++++ .../BreadcrumbBar/BreadcrumbBar.stories.tsx | 2 +- .../BreadcrumbBar/BreadcrumbBar.tsx | 62 +++++++++++++ src/index.ts | 2 +- 5 files changed, 150 insertions(+), 94 deletions(-) delete mode 100644 src/components/BreadcrumbBar/BreadcrumbBar.tsx create mode 100644 src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx rename src/components/{ => breadcrumb}/BreadcrumbBar/BreadcrumbBar.stories.tsx (98%) create mode 100644 src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx diff --git a/src/components/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/BreadcrumbBar/BreadcrumbBar.tsx deleted file mode 100644 index 4f227be8b3..0000000000 --- a/src/components/BreadcrumbBar/BreadcrumbBar.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React, { ReactElement } from 'react' -import classnames from 'classnames' - -const metaData = { - li: { - property: 'itemListElement', - typeof: 'ListItem', - }, - a: { - property: 'item', - typeof: 'WebPage', - }, - span: { - property: 'name', - }, -} - -const getMetaPositionTag = ( - position: number | undefined -): JSX.Element | undefined => - position ? ( - - ) : undefined - -type PageInfo = { - pageName: string - href: string -} - -interface BreadcrumbBarProps { - variant?: 'default' | 'wrap' - withMetaData?: boolean - pageName: string - pageHierarchy: PageInfo[] -} - -export const BreadcrumbBar = ( - props: BreadcrumbBarProps & JSX.IntrinsicElements['nav'] -): React.ReactElement => { - const { - variant = 'default', - withMetaData = false, - pageName, - pageHierarchy, - className, - ...navProps - } = props - const uswdsClassName = - variant === 'wrap' - ? 'usa-breadcrumb usa-breadcrumb--wrap' - : 'usa-breadcrumb' - const classes = classnames(uswdsClassName, className) - - const breadcrumbs = pageHierarchy.map((pageInfo, i) => ( -
  • - - {pageInfo.pageName} - {withMetaData && getMetaPositionTag(i + 1)} - -
    • - )) - - const current = ( -
  • - {pageName} - {withMetaData && getMetaPositionTag(breadcrumbs.length + 1)} -
    • - ) - - return ( - - ) -} diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 0000000000..44448f18ab --- /dev/null +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,86 @@ +import classnames from 'classnames' +import React from 'react' + +const rdfaMetaData = { + li: { + property: 'itemListElement', + typeof: 'ListItem', + }, + a: { + property: 'item', + typeof: 'WebPage', + }, + span: { + property: 'name', + }, +} + +const getMetaPositionTag = (position: number): JSX.Element => ( + +) + +interface BreadcrumbProps { + pageName: string + position: number + withRdfaMetaData?: boolean +} + +export const Breadcrumb = ( + props: BreadcrumbProps & JSX.IntrinsicElements['li'] +): JSX.Element => { + const { + pageName, + position, + withRdfaMetaData = false, + className, + ...listItemProps + } = props + const classes = classnames('usa-breadcrumb__list-item usa-current', className) + + return ( +
  • + {pageName} + {withRdfaMetaData && getMetaPositionTag(position)} +
    • + ) +} + +interface LinkingBreadcrumbProps extends BreadcrumbProps { + href: string +} + +export const LinkingBreadcrumb = ( + props: LinkingBreadcrumbProps & JSX.IntrinsicElements['li'] +): JSX.Element => { + const { + pageName, + href, + position, + withRdfaMetaData = false, + className, + ...listItemProps + } = props + const classes = classnames('usa-breadcrumb__list-item', className) + + return ( +
  • + + {pageName} + {withRdfaMetaData && getMetaPositionTag(position)} + +
    • + ) +} diff --git a/src/components/BreadcrumbBar/BreadcrumbBar.stories.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx similarity index 98% rename from src/components/BreadcrumbBar/BreadcrumbBar.stories.tsx rename to src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx index ebf5974430..e945608d2e 100644 --- a/src/components/BreadcrumbBar/BreadcrumbBar.stories.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx @@ -31,7 +31,7 @@ export const DefaultBreadcrumb = (): React.ReactElement => ( export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => ( diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx new file mode 100644 index 0000000000..b0decdbd90 --- /dev/null +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx @@ -0,0 +1,62 @@ +import React, { ReactElement } from 'react' +import classnames from 'classnames' +import { Breadcrumb, LinkingBreadcrumb } from '../Breadcrumb/Breadcrumb' + +type PageInfo = { + pageName: string + href: string +} + +interface BreadcrumbBarProps { + variant?: 'default' | 'wrap' + withRdfaMetaData?: boolean + pageName: string + pageHierarchy: PageInfo[] +} + +export const BreadcrumbBar = ( + props: BreadcrumbBarProps & JSX.IntrinsicElements['nav'] +): React.ReactElement => { + const { + variant = 'default', + withRdfaMetaData = false, + pageName, + pageHierarchy, + className, + ...navProps + } = props + const uswdsClassName = + variant === 'wrap' + ? 'usa-breadcrumb usa-breadcrumb--wrap' + : 'usa-breadcrumb' + const classes = classnames(uswdsClassName, className) + + const linkingBreadcrumbs = pageHierarchy.map((pageInfo, i) => ( + + )) + + const currentPageBreadcrumb = ( + + ) + + return ( + + ) +} diff --git a/src/index.ts b/src/index.ts index faa252e0cf..4ff190bc5c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,7 +11,7 @@ export { Link } from './components/Link/Link' export { Table } from './components/Table/Table' export { Tag } from './components/Tag/Tag' export { SideNav } from './components/SideNav/SideNav' -export { BreadcrumbBar } from './components/BreadcrumbBar/BreadcrumbBar' +export { BreadcrumbBar } from './components/breadcrumb/BreadcrumbBar/BreadcrumbBar' /** Grid components */ export { GridContainer } from './components/grid/GridContainer/GridContainer' From f1e52f3f11644e3495930fe389033cee54974764 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Wed, 20 Jan 2021 17:02:59 -0500 Subject: [PATCH 07/21] Update BreadcrumbBar for compositional flexiblity --- .../breadcrumb/Breadcrumb/Breadcrumb.tsx | 88 +++------------ .../BreadcrumbBar/BreadcrumbBar.stories.tsx | 105 +++++++++++++----- .../BreadcrumbBar/BreadcrumbBar.tsx | 50 +++------ .../BreadcrumbLink/BreadcrumbLink.tsx | 17 +++ .../LinkingBreadcrumb/LinkingBreadcrumb.tsx | 23 ++++ src/index.ts | 7 +- 6 files changed, 155 insertions(+), 135 deletions(-) create mode 100644 src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx create mode 100644 src/components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb.tsx diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx index 44448f18ab..8aa8a0bdc0 100644 --- a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx @@ -1,86 +1,30 @@ -import classnames from 'classnames' import React from 'react' +import classnames from 'classnames' -const rdfaMetaData = { - li: { - property: 'itemListElement', - typeof: 'ListItem', - }, - a: { - property: 'item', - typeof: 'WebPage', - }, - span: { - property: 'name', - }, +export interface BaseBreadcrumbProps { + children: React.ReactNode + className?: string + listItemProps?: JSX.IntrinsicElements['li'] } - -const getMetaPositionTag = (position: number): JSX.Element => ( - -) - -interface BreadcrumbProps { - pageName: string - position: number - withRdfaMetaData?: boolean +interface BreadcrumbProps extends BaseBreadcrumbProps { + current?: boolean } -export const Breadcrumb = ( - props: BreadcrumbProps & JSX.IntrinsicElements['li'] -): JSX.Element => { - const { - pageName, - position, - withRdfaMetaData = false, - className, - ...listItemProps - } = props - const classes = classnames('usa-breadcrumb__list-item usa-current', className) - - return ( -
  • - {pageName} - {withRdfaMetaData && getMetaPositionTag(position)} -
    • +export const Breadcrumb = (props: BreadcrumbProps): JSX.Element => { + const { children, current = false, className, listItemProps } = props + const classes = classnames( + current + ? 'usa-breadcrumb__list-item usa-current' + : 'usa-breadcrumb__list-item', + className ) -} - -interface LinkingBreadcrumbProps extends BreadcrumbProps { - href: string -} - -export const LinkingBreadcrumb = ( - props: LinkingBreadcrumbProps & JSX.IntrinsicElements['li'] -): JSX.Element => { - const { - pageName, - href, - position, - withRdfaMetaData = false, - className, - ...listItemProps - } = props - const classes = classnames('usa-breadcrumb__list-item', className) return (
  • - - {pageName} - {withRdfaMetaData && getMetaPositionTag(position)} - + {children}
    • ) } diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx index e945608d2e..e32cc47e21 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx @@ -1,4 +1,7 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react' +import { Breadcrumb } from '../Breadcrumb/Breadcrumb' +import { LinkingBreadcrumb } from '../LinkingBreadcrumb/LinkingBreadcrumb' import { BreadcrumbBar } from './BreadcrumbBar' export default { @@ -13,34 +16,86 @@ export default { }, } -const sampleBreadcrumbs = [ - { pageName: 'Home', href: '#' }, - { pageName: 'Federal Contracting', href: '#' }, - { pageName: 'Contacting assistance programs', href: '#' }, -] - -const sampleCurrentPageName = - 'Women-owned small business federal contracting program' - export const DefaultBreadcrumb = (): React.ReactElement => ( - + + Home + Federal Contracting + + Contacting assistance programs + + + Women-owned small business federal contracting program + + ) -export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => ( - -) +export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => { + const rdfaMetaData = { + ol: { + vocab: 'http://schema.org/', + typeof: 'BreadcrumbList', + }, + li: { + property: 'itemListElement', + typeof: 'ListItem', + }, + a: { + property: 'item', + typeof: 'WebPage', + }, + } + + return ( + + + Home + + + + Federal Contracting + + + + Contacting assistance programs + + + + + Women-owned small business federal contracting program + + + + + ) +} export const WrappingBreadcrumb = (): React.ReactElement => ( - + + Home + Federal Contracting + + Contacting assistance programs + + + Women-owned small business federal contracting program + + +) + +export const CustomBreadcrumbLinks = (): React.ReactElement => ( + + + A custom link + + The current page + ) diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx index b0decdbd90..c492962d24 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx @@ -1,29 +1,26 @@ import React, { ReactElement } from 'react' import classnames from 'classnames' -import { Breadcrumb, LinkingBreadcrumb } from '../Breadcrumb/Breadcrumb' - -type PageInfo = { - pageName: string - href: string -} +import { BaseBreadcrumbProps } from '../Breadcrumb/Breadcrumb' interface BreadcrumbBarProps { + children: + | ReactElement + | ReactElement[] variant?: 'default' | 'wrap' - withRdfaMetaData?: boolean - pageName: string - pageHierarchy: PageInfo[] + className?: string + navProps?: JSX.IntrinsicElements['nav'] + listProps?: JSX.IntrinsicElements['ol'] } export const BreadcrumbBar = ( - props: BreadcrumbBarProps & JSX.IntrinsicElements['nav'] + props: BreadcrumbBarProps ): React.ReactElement => { const { variant = 'default', - withRdfaMetaData = false, - pageName, - pageHierarchy, + children, className, - ...navProps + navProps, + listProps, } = props const uswdsClassName = variant === 'wrap' @@ -31,31 +28,10 @@ export const BreadcrumbBar = ( : 'usa-breadcrumb' const classes = classnames(uswdsClassName, className) - const linkingBreadcrumbs = pageHierarchy.map((pageInfo, i) => ( - - )) - - const currentPageBreadcrumb = ( - - ) - return ( ) diff --git a/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx b/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx new file mode 100644 index 0000000000..655466b8f0 --- /dev/null +++ b/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx @@ -0,0 +1,17 @@ +import React from 'react' + +interface BreadcrumbLinkProps { + children: React.ReactNode + href: string + anchorProps?: JSX.IntrinsicElements['a'] + spanProps?: JSX.IntrinsicElements['span'] +} + +export const BreadcrumbLink = (props: BreadcrumbLinkProps): JSX.Element => { + const { children, href, anchorProps } = props + return ( + + {children} + + ) +} diff --git a/src/components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb.tsx b/src/components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb.tsx new file mode 100644 index 0000000000..0a4cdf26c4 --- /dev/null +++ b/src/components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { BaseBreadcrumbProps, Breadcrumb } from '../Breadcrumb/Breadcrumb' +import { BreadcrumbLink } from '../BreadcrumbLink/BreadcrumbLink' + +interface LinkingBreadcrumbProps extends BaseBreadcrumbProps { + href: string + anchorProps?: JSX.IntrinsicElements['a'] + spanProps?: JSX.IntrinsicElements['span'] +} + +export const LinkingBreadcrumb = ( + props: LinkingBreadcrumbProps +): JSX.Element => { + const { children, href, className, listItemProps, anchorProps } = props + + return ( + + + {children} + + + ) +} diff --git a/src/index.ts b/src/index.ts index 4ff190bc5c..320870f187 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,7 +11,6 @@ export { Link } from './components/Link/Link' export { Table } from './components/Table/Table' export { Tag } from './components/Tag/Tag' export { SideNav } from './components/SideNav/SideNav' -export { BreadcrumbBar } from './components/breadcrumb/BreadcrumbBar/BreadcrumbBar' /** Grid components */ export { GridContainer } from './components/grid/GridContainer/GridContainer' @@ -64,6 +63,12 @@ export { CardMedia } from './components/card/CardMedia/CardMedia' export { CardBody } from './components/card/CardBody/CardBody' export { CardFooter } from './components/card/CardFooter/CardFooter' +/** Breadcrumb components */ +export { BreadcrumbBar } from './components/breadcrumb/BreadcrumbBar/BreadcrumbBar' +export { Breadcrumb } from './components/breadcrumb/Breadcrumb/Breadcrumb' +export { LinkingBreadcrumb } from './components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb' +export { BreadcrumbLink } from './components/breadcrumb/BreadcrumbLink/BreadcrumbLink' + export { Search } from './components/Search/Search' /** Truss-designed components */ From 28bf629f80b2ce24c47d40a9a3e19fd5d67b248b Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Wed, 20 Jan 2021 19:19:58 -0500 Subject: [PATCH 08/21] Add unit tests --- .../breadcrumb/Breadcrumb/Breadcrumb.test.tsx | 34 ++++++++++++++ .../BreadcrumbBar/BreadcrumbBar.test.tsx | 47 +++++++++++++++++++ .../BreadcrumbLink/BreadcrumbLink.test.tsx | 15 ++++++ .../LinkingBreadcrumb.test.tsx | 16 +++++++ 4 files changed, 112 insertions(+) create mode 100644 src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx create mode 100644 src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx create mode 100644 src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.test.tsx create mode 100644 src/components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb.test.tsx diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx new file mode 100644 index 0000000000..bede0c8f26 --- /dev/null +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx @@ -0,0 +1,34 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import React from 'react' +import { render } from '@testing-library/react' +import { Breadcrumb } from './Breadcrumb' + +const testPageName = 'Test Page' + +describe('Breadcrumb component', () => { + it('renders without errors', () => { + const { getByRole, queryByText } = render( + {testPageName} + ) + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('listitem')).toHaveClass('usa-breadcrumb__list-item') + }), + it('renders properly with custom elements passesd in', () => { + const { getByRole, queryByText } = render( + + {testPageName} + + ) + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('listitem')).toHaveClass('usa-breadcrumb__list-item') + }), + it("renders the appropriate class when defined as 'current'", () => { + const { getByRole, queryByText } = render( + {testPageName} + ) + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('listitem')).toHaveClass( + 'usa-breadcrumb__list-item usa-current' + ) + }) +}) diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx new file mode 100644 index 0000000000..9261cabfca --- /dev/null +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx @@ -0,0 +1,47 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import React from 'react' +import { render } from '@testing-library/react' +import { Breadcrumb } from '../Breadcrumb/Breadcrumb' +import { BreadcrumbBar } from './BreadcrumbBar' +import { LinkingBreadcrumb } from '../LinkingBreadcrumb/LinkingBreadcrumb' + +const testPageName = 'Test Page' +const testParentPageName = 'Test Parent Page' + +describe('BreadcrumbBar component', () => { + it('renders without errors', () => { + const { getByRole, queryByText } = render( + + {testParentPageName} + {testPageName} + + ) + expect(queryByText(testParentPageName)).toBeInTheDocument() + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('list')).toHaveClass('usa-breadcrumb__list') + }), + it('renders properly using the built-in LinkingBreadcrumb', () => { + const { getByRole, queryByText } = render( + + {testParentPageName} + {testPageName} + + ) + expect(queryByText(testParentPageName)).toBeInTheDocument() + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('list')).toHaveClass('usa-breadcrumb__list') + }), + it('renders properly with Breadcrumbs using custom elements', () => { + const { getByRole, queryByText } = render( + + + {testParentPageName} + + {testPageName} + + ) + expect(queryByText(testParentPageName)).toBeInTheDocument() + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('list')).toHaveClass('usa-breadcrumb__list') + }) +}) diff --git a/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.test.tsx b/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.test.tsx new file mode 100644 index 0000000000..6c6878b9cb --- /dev/null +++ b/src/components/breadcrumb/BreadcrumbLink/BreadcrumbLink.test.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { render } from '@testing-library/react' +import { BreadcrumbLink } from './BreadcrumbLink' + +const testPageName = 'Test Page' + +describe('BreadcrumbLink component', () => { + it('renders without errors', () => { + const { getByRole, queryByText } = render( + {testPageName} + ) + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('link')).toHaveClass('usa-breadcrumb__link') + }) +}) diff --git a/src/components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb.test.tsx b/src/components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb.test.tsx new file mode 100644 index 0000000000..194e2bd09f --- /dev/null +++ b/src/components/breadcrumb/LinkingBreadcrumb/LinkingBreadcrumb.test.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { render } from '@testing-library/react' +import { LinkingBreadcrumb } from './LinkingBreadcrumb' + +const testPageName = 'Test Page' + +describe('LinkingBreadcrumb component', () => { + it('renders without errors', () => { + const { getByRole, queryByText } = render( + {testPageName} + ) + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('listitem')).toHaveClass('usa-breadcrumb__list-item') + expect(getByRole('link')).toHaveClass('usa-breadcrumb__link') + }) +}) From 645822989128a6322aac25f70da712135dde8400 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Wed, 20 Jan 2021 19:22:11 -0500 Subject: [PATCH 09/21] Fix indentation --- .../breadcrumb/Breadcrumb/Breadcrumb.test.tsx | 40 +++++++------- .../BreadcrumbBar/BreadcrumbBar.test.tsx | 52 ++++++++++--------- 2 files changed, 48 insertions(+), 44 deletions(-) diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx index bede0c8f26..09981b1836 100644 --- a/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx @@ -12,23 +12,25 @@ describe('Breadcrumb component', () => { ) expect(queryByText(testPageName)).toBeInTheDocument() expect(getByRole('listitem')).toHaveClass('usa-breadcrumb__list-item') - }), - it('renders properly with custom elements passesd in', () => { - const { getByRole, queryByText } = render( - - {testPageName} - - ) - expect(queryByText(testPageName)).toBeInTheDocument() - expect(getByRole('listitem')).toHaveClass('usa-breadcrumb__list-item') - }), - it("renders the appropriate class when defined as 'current'", () => { - const { getByRole, queryByText } = render( - {testPageName} - ) - expect(queryByText(testPageName)).toBeInTheDocument() - expect(getByRole('listitem')).toHaveClass( - 'usa-breadcrumb__list-item usa-current' - ) - }) + }) + + it('renders properly with custom elements passesd in', () => { + const { getByRole, queryByText } = render( + + {testPageName} + + ) + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('listitem')).toHaveClass('usa-breadcrumb__list-item') + }) + + it("renders the appropriate class when defined as 'current'", () => { + const { getByRole, queryByText } = render( + {testPageName} + ) + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('listitem')).toHaveClass( + 'usa-breadcrumb__list-item usa-current' + ) + }) }) diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx index 9261cabfca..bcb70c501a 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx @@ -19,29 +19,31 @@ describe('BreadcrumbBar component', () => { expect(queryByText(testParentPageName)).toBeInTheDocument() expect(queryByText(testPageName)).toBeInTheDocument() expect(getByRole('list')).toHaveClass('usa-breadcrumb__list') - }), - it('renders properly using the built-in LinkingBreadcrumb', () => { - const { getByRole, queryByText } = render( - - {testParentPageName} - {testPageName} - - ) - expect(queryByText(testParentPageName)).toBeInTheDocument() - expect(queryByText(testPageName)).toBeInTheDocument() - expect(getByRole('list')).toHaveClass('usa-breadcrumb__list') - }), - it('renders properly with Breadcrumbs using custom elements', () => { - const { getByRole, queryByText } = render( - - - {testParentPageName} - - {testPageName} - - ) - expect(queryByText(testParentPageName)).toBeInTheDocument() - expect(queryByText(testPageName)).toBeInTheDocument() - expect(getByRole('list')).toHaveClass('usa-breadcrumb__list') - }) + }) + + it('renders properly using the built-in LinkingBreadcrumb', () => { + const { getByRole, queryByText } = render( + + {testParentPageName} + {testPageName} + + ) + expect(queryByText(testParentPageName)).toBeInTheDocument() + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('list')).toHaveClass('usa-breadcrumb__list') + }) + + it('renders properly with Breadcrumbs using custom elements', () => { + const { getByRole, queryByText } = render( + + + {testParentPageName} + + {testPageName} + + ) + expect(queryByText(testParentPageName)).toBeInTheDocument() + expect(queryByText(testPageName)).toBeInTheDocument() + expect(getByRole('list')).toHaveClass('usa-breadcrumb__list') + }) }) From 18db9f43d77768ce82f57c0924720ac8fec53b5a Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Thu, 21 Jan 2021 10:15:32 -0500 Subject: [PATCH 10/21] Use existing custom link for storybook example --- .../breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx index e32cc47e21..0af9bf91bc 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx @@ -3,6 +3,7 @@ import React from 'react' import { Breadcrumb } from '../Breadcrumb/Breadcrumb' import { LinkingBreadcrumb } from '../LinkingBreadcrumb/LinkingBreadcrumb' import { BreadcrumbBar } from './BreadcrumbBar' +import { Link } from '../../Link/Link' export default { title: 'Breadcrumb', @@ -94,7 +95,9 @@ export const WrappingBreadcrumb = (): React.ReactElement => ( export const CustomBreadcrumbLinks = (): React.ReactElement => ( - A custom link + + Custom link component + The current page From 7cca03116f3b85c10712f19e1c56390dc6b0edf6 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Thu, 21 Jan 2021 10:27:46 -0500 Subject: [PATCH 11/21] Fix typo --- .../BreadcrumbBar/BreadcrumbBar.stories.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx index 0af9bf91bc..271666050a 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx @@ -30,8 +30,8 @@ export const DefaultBreadcrumb = (): React.ReactElement => ( ) -export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => { - const rdfaMetaData = { +export const BreadcrumbWithRdfaMetadata = (): React.ReactElement => { + const rdfaMetadata = { ol: { vocab: 'http://schema.org/', typeof: 'BreadcrumbList', @@ -47,29 +47,29 @@ export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => { } return ( - + + listItemProps={{ ...rdfaMetadata.li }} + anchorProps={{ ...rdfaMetadata.a }}> Home + listItemProps={{ ...rdfaMetadata.li }} + anchorProps={{ ...rdfaMetadata.a }}> Federal Contracting + listItemProps={{ ...rdfaMetadata.li }} + anchorProps={{ ...rdfaMetadata.a }}> Contacting assistance programs - + Women-owned small business federal contracting program From cac9ae31c5fa17ed161d3479ce4f3d02641bfc17 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Thu, 21 Jan 2021 10:35:11 -0500 Subject: [PATCH 12/21] Update custom link stories and test --- .../BreadcrumbBar/BreadcrumbBar.stories.tsx | 18 +++++++++++++++--- .../BreadcrumbBar/BreadcrumbBar.test.tsx | 3 ++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx index 271666050a..d9b33d6166 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx @@ -93,12 +93,24 @@ export const WrappingBreadcrumb = (): React.ReactElement => ( ) export const CustomBreadcrumbLinks = (): React.ReactElement => ( - + - Custom link component + Home - The current page + + + Federal Contracting + + + + + Contacting assistance programs + + + + Women-owned small business federal contracting program + ) diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx index bcb70c501a..be0ae79e38 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.test.tsx @@ -4,6 +4,7 @@ import { render } from '@testing-library/react' import { Breadcrumb } from '../Breadcrumb/Breadcrumb' import { BreadcrumbBar } from './BreadcrumbBar' import { LinkingBreadcrumb } from '../LinkingBreadcrumb/LinkingBreadcrumb' +import { Link } from '../../Link/Link' const testPageName = 'Test Page' const testParentPageName = 'Test Parent Page' @@ -37,7 +38,7 @@ describe('BreadcrumbBar component', () => { const { getByRole, queryByText } = render( - {testParentPageName} + {testParentPageName} {testPageName} From 2a102dffc1d1f892fbf0513c6d07b20732edb911 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Thu, 21 Jan 2021 10:42:52 -0500 Subject: [PATCH 13/21] Update custom element test to use Link --- src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx index 09981b1836..cc4b5537ce 100644 --- a/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.test.tsx @@ -2,6 +2,7 @@ import React from 'react' import { render } from '@testing-library/react' import { Breadcrumb } from './Breadcrumb' +import { Link } from '../../Link/Link' const testPageName = 'Test Page' @@ -17,7 +18,7 @@ describe('Breadcrumb component', () => { it('renders properly with custom elements passesd in', () => { const { getByRole, queryByText } = render( - {testPageName} + {testPageName} ) expect(queryByText(testPageName)).toBeInTheDocument() From 8abb76f731d22e7a13bebad6b0739191f15fe229 Mon Sep 17 00:00:00 2001 From: Brandon Lenz Date: Wed, 27 Jan 2021 10:01:06 -0500 Subject: [PATCH 14/21] Use classnames object-syntax for conditional class --- src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx | 7 ++++--- .../breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx | 12 +++++++----- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx index 8aa8a0bdc0..aac65e8b7e 100644 --- a/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx +++ b/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx @@ -13,9 +13,10 @@ interface BreadcrumbProps extends BaseBreadcrumbProps { export const Breadcrumb = (props: BreadcrumbProps): JSX.Element => { const { children, current = false, className, listItemProps } = props const classes = classnames( - current - ? 'usa-breadcrumb__list-item usa-current' - : 'usa-breadcrumb__list-item', + 'usa-breadcrumb__list-item', + { + 'usa-current': current, + }, className ) diff --git a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx index c492962d24..5665b984c0 100644 --- a/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx +++ b/src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.tsx @@ -22,11 +22,13 @@ export const BreadcrumbBar = ( navProps, listProps, } = props - const uswdsClassName = - variant === 'wrap' - ? 'usa-breadcrumb usa-breadcrumb--wrap' - : 'usa-breadcrumb' - const classes = classnames(uswdsClassName, className) + const classes = classnames( + 'usa-breadcrumb', + { + 'usa-breadcrumb--wrap': variant === 'wrap', + }, + className + ) return (