diff --git a/packages/blade/src/components/Breadcrumb/_KitchenSink.Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/_KitchenSink.Breadcrumb.stories.tsx new file mode 100644 index 00000000000..9d4a4bbddc5 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/_KitchenSink.Breadcrumb.stories.tsx @@ -0,0 +1,31 @@ +import { composeStories } from '@storybook/react'; +import * as BreadcrumbStories from './Breadcrumb.stories'; +import { Box } from '~components/Box'; +import { Heading } from '~components/Typography'; + +const allStories = Object.values(composeStories(BreadcrumbStories)); + +export const Breadcrumb = (): JSX.Element => { + return ( + + {allStories.map((Story) => { + return ( + <> + {Story.storyName} + + + ); + })} + + ); +}; + +export default { + title: 'Components/KitchenSink/Breadcrumb', + component: Breadcrumb, + parameters: { + // enable Chromatic's snapshotting only for kitchensink + chromatic: { disableSnapshot: false }, + options: { showPanel: false }, + }, +}; diff --git a/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.ssr.test.tsx b/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.ssr.test.tsx new file mode 100644 index 00000000000..5712f9871c7 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.ssr.test.tsx @@ -0,0 +1,20 @@ +import { Breadcrumb, BreadcrumbItem } from '../'; +import { HomeIcon } from '~components/Icons'; +import renderWithSSR from '~utils/testing/renderWithSSR.web'; + +describe('', () => { + it('should render breadcrumb', () => { + const { container } = renderWithSSR( + + + Home + + About + + Contact + + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.web.test.tsx b/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.web.test.tsx new file mode 100644 index 00000000000..6c1e270c08e --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.web.test.tsx @@ -0,0 +1,71 @@ +import userEvent from '@testing-library/user-event'; +import { Breadcrumb, BreadcrumbItem } from '../'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; +import assertAccessible from '~utils/testing/assertAccessible.web'; + +describe('', () => { + it('should render', () => { + const { container } = renderWithTheme( + + Home + About + Contact + , + ); + + expect(container).toMatchSnapshot(); + }); + + test('current item should have aria-current', () => { + const { container, getByText } = renderWithTheme( + + Home + About + + Contact + + , + ); + + expect(container).toMatchSnapshot(); + expect(getByText('Contact').closest('li')).toHaveAttribute('aria-current', 'page'); + }); + + test('should work with showLastSeparator', () => { + const { container } = renderWithTheme( + + Home + About + Contact + , + ); + + expect(container).toMatchSnapshot(); + }); + + test('should work with onClick', async () => { + const onClick = jest.fn(); + const { getByText } = renderWithTheme( + + + Home + + , + ); + const link = getByText('Home'); + await userEvent.click(link); + expect(onClick).toHaveBeenCalledTimes(1); + }); + + it('should pass a11y render', async () => { + const { container } = renderWithTheme( + + Home + About + Contact + , + ); + + await assertAccessible(container); + }); +}); diff --git a/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.ssr.test.tsx.snap b/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.ssr.test.tsx.snap new file mode 100644 index 00000000000..b9896bdeaa2 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.ssr.test.tsx.snap @@ -0,0 +1,293 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render breadcrumb 1`] = `"
"`; + +exports[` should render breadcrumb 2`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px; + margin: 0px; + gap: 4px; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} + +.c3.c3.c3.c3.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 1; +} + +.c4.c4.c4.c4.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-right: 4px; +} + +.c5.c5.c5.c5.c5 { + color: hsla(227,71%,51%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 1rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.5rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + text-align: center; + margin: 0; + padding: 0; +} + +.c6.c6.c6.c6.c6 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 1rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.5rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c7.c7.c7.c7.c7 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 1rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.5rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c2.c2.c2.c2.c2 { + padding: 0; + background-color: transparent; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + border: none; + cursor: pointer; + display: inline-block; + border-radius: 2px; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +.c2.c2.c2.c2.c2 .content-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 2px; +} + +.c2.c2.c2.c2.c2:focus-visible .content-container { + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); +} + +.c2.c2.c2.c2.c2 * { + -webkit-transition-property: color,fill; + transition-property: color,fill; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +
+ +
+`; diff --git a/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.web.test.tsx.snap b/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.web.test.tsx.snap new file mode 100644 index 00000000000..982404e49b6 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.web.test.tsx.snap @@ -0,0 +1,731 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` current item should have aria-current 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px; + margin: 0px; + gap: 4px; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} + +.c3.c3.c3.c3.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 1; +} + +.c4.c4.c4.c4.c4 { + color: hsla(227,71%,51%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + text-align: center; + margin: 0; + padding: 0; +} + +.c5.c5.c5.c5.c5 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c6.c6.c6.c6.c6 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c2.c2.c2.c2.c2 { + padding: 0; + background-color: transparent; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + border: none; + cursor: pointer; + display: inline-block; + border-radius: 2px; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +.c2.c2.c2.c2.c2 .content-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 2px; +} + +.c2.c2.c2.c2.c2:focus-visible .content-container { + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); +} + +.c2.c2.c2.c2.c2 * { + -webkit-transition-property: color,fill; + transition-property: color,fill; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +
+ +
+`; + +exports[` should render 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px; + margin: 0px; + gap: 4px; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} + +.c3.c3.c3.c3.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 1; +} + +.c4.c4.c4.c4.c4 { + color: hsla(227,71%,51%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + text-align: center; + margin: 0; + padding: 0; +} + +.c5.c5.c5.c5.c5 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c2.c2.c2.c2.c2 { + padding: 0; + background-color: transparent; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + border: none; + cursor: pointer; + display: inline-block; + border-radius: 2px; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +.c2.c2.c2.c2.c2 .content-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 2px; +} + +.c2.c2.c2.c2.c2:focus-visible .content-container { + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); +} + +.c2.c2.c2.c2.c2 * { + -webkit-transition-property: color,fill; + transition-property: color,fill; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +
+ +
+`; + +exports[` should work with showLastSeparator 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px; + margin: 0px; + gap: 4px; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} + +.c3.c3.c3.c3.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 1; +} + +.c4.c4.c4.c4.c4 { + color: hsla(227,71%,51%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + text-align: center; + margin: 0; + padding: 0; +} + +.c5.c5.c5.c5.c5 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c2.c2.c2.c2.c2 { + padding: 0; + background-color: transparent; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + border: none; + cursor: pointer; + display: inline-block; + border-radius: 2px; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +.c2.c2.c2.c2.c2 .content-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 2px; +} + +.c2.c2.c2.c2.c2:focus-visible .content-container { + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); +} + +.c2.c2.c2.c2.c2 * { + -webkit-transition-property: color,fill; + transition-property: color,fill; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +
+ +
+`;