From 0a17f2e5651cc070b8f545ddd797545a1b12fa94 Mon Sep 17 00:00:00 2001 From: Dylan Kilgore Date: Thu, 1 Jun 2023 15:17:28 -0700 Subject: [PATCH] feat: breadcrumb: add breadcrumb component --- .../Breadcrumb/Breadcrumb.stories.tsx | 293 ++++++++++ src/components/Breadcrumb/Breadcrumb.test.tsx | 208 +++++++ src/components/Breadcrumb/Breadcrumb.tsx | 290 ++++++++++ .../Breadcrumb/Breadcrumb.types.tsx | 116 ++++ src/components/Breadcrumb/Locale/cs_CZ.tsx | 11 + src/components/Breadcrumb/Locale/da_DK.tsx | 11 + src/components/Breadcrumb/Locale/de_DE.tsx | 11 + src/components/Breadcrumb/Locale/el_GR.tsx | 11 + src/components/Breadcrumb/Locale/en_GB.tsx | 11 + src/components/Breadcrumb/Locale/en_US.tsx | 11 + src/components/Breadcrumb/Locale/es_DO.tsx | 11 + src/components/Breadcrumb/Locale/es_ES.tsx | 11 + src/components/Breadcrumb/Locale/es_MX.tsx | 11 + src/components/Breadcrumb/Locale/fi_FI.tsx | 11 + src/components/Breadcrumb/Locale/fr_BE.tsx | 11 + src/components/Breadcrumb/Locale/fr_CA.tsx | 11 + src/components/Breadcrumb/Locale/fr_FR.tsx | 11 + src/components/Breadcrumb/Locale/he_IL.tsx | 11 + src/components/Breadcrumb/Locale/hi_IN.tsx | 11 + src/components/Breadcrumb/Locale/hr_HR.tsx | 11 + src/components/Breadcrumb/Locale/ht_HT.tsx | 11 + src/components/Breadcrumb/Locale/hu_HU.tsx | 11 + src/components/Breadcrumb/Locale/it_IT.tsx | 11 + src/components/Breadcrumb/Locale/ja_JP.tsx | 11 + src/components/Breadcrumb/Locale/ko_KR.tsx | 11 + src/components/Breadcrumb/Locale/ms_MY.tsx | 11 + src/components/Breadcrumb/Locale/nb_NO.tsx | 11 + src/components/Breadcrumb/Locale/nl_BE.tsx | 11 + src/components/Breadcrumb/Locale/nl_NL.tsx | 11 + src/components/Breadcrumb/Locale/pl_PL.tsx | 11 + src/components/Breadcrumb/Locale/pt_BR.tsx | 11 + src/components/Breadcrumb/Locale/pt_PT.tsx | 11 + src/components/Breadcrumb/Locale/ru_RU.tsx | 11 + src/components/Breadcrumb/Locale/sv_SE.tsx | 11 + src/components/Breadcrumb/Locale/th_TH.tsx | 11 + src/components/Breadcrumb/Locale/tr_TR.tsx | 11 + src/components/Breadcrumb/Locale/uk_UA.tsx | 11 + src/components/Breadcrumb/Locale/zh_CN.tsx | 11 + src/components/Breadcrumb/Locale/zh_TW.tsx | 11 + .../Breadcrumb/Styles/breadcrumb.module.scss | 67 +++ src/components/Breadcrumb/Styles/rtl.scss | 5 + .../__snapshots__/Breadcrumb.test.tsx.snap | 527 ++++++++++++++++++ src/components/Breadcrumb/index.ts | 2 + src/components/Icon/mdi.ts | 1 + src/components/Link/Link.tsx | 2 + src/components/Link/Link.types.ts | 8 +- .../Link/__snapshots__/Link.test.tsx.snap | 6 + src/components/Locale/Default.tsx | 2 + src/components/Locale/cs_CZ.tsx | 2 + src/components/Locale/da_DK.tsx | 2 + src/components/Locale/de_DE.tsx | 2 + src/components/Locale/el_GR.tsx | 2 + src/components/Locale/en_GB.tsx | 2 + src/components/Locale/es_DO.tsx | 2 + src/components/Locale/es_ES.tsx | 2 + src/components/Locale/es_MX.tsx | 2 + src/components/Locale/fi_FI.tsx | 2 + src/components/Locale/fr_BE.tsx | 2 + src/components/Locale/fr_CA.tsx | 2 + src/components/Locale/fr_FR.tsx | 2 + src/components/Locale/he_IL.tsx | 2 + src/components/Locale/hi_IN.tsx | 2 + src/components/Locale/hr_HR.tsx | 2 + src/components/Locale/ht_HT.tsx | 2 + src/components/Locale/hu_HU.tsx | 2 + src/components/Locale/it_IT.tsx | 2 + src/components/Locale/ja_JP.tsx | 2 + src/components/Locale/ko_KR.tsx | 2 + src/components/Locale/ms_MY.tsx | 2 + src/components/Locale/nb_NO.tsx | 2 + src/components/Locale/nl_BE.tsx | 2 + src/components/Locale/nl_NL.tsx | 2 + src/components/Locale/pl_PL.tsx | 2 + src/components/Locale/pt_BR.tsx | 2 + src/components/Locale/pt_PT.tsx | 2 + src/components/Locale/ru_RU.tsx | 2 + src/components/Locale/sv_SE.tsx | 2 + src/components/Locale/th_TH.tsx | 2 + src/components/Locale/tr_TR.tsx | 2 + src/components/Locale/uk_UA.tsx | 2 + src/components/Locale/zh_CN.tsx | 2 + src/components/Locale/zh_TW.tsx | 2 + src/components/LocaleProvider/index.tsx | 2 + .../MenuItemCustom/MenuItemCustom.tsx | 2 + .../Menu/__snapshots__/Menu.test.tsx.snap | 9 +- src/octuple.ts | 3 + src/styles/themes/_definitions.scss | 1 - 87 files changed, 1991 insertions(+), 6 deletions(-) create mode 100644 src/components/Breadcrumb/Breadcrumb.stories.tsx create mode 100644 src/components/Breadcrumb/Breadcrumb.test.tsx create mode 100644 src/components/Breadcrumb/Breadcrumb.tsx create mode 100644 src/components/Breadcrumb/Breadcrumb.types.tsx create mode 100644 src/components/Breadcrumb/Locale/cs_CZ.tsx create mode 100644 src/components/Breadcrumb/Locale/da_DK.tsx create mode 100644 src/components/Breadcrumb/Locale/de_DE.tsx create mode 100644 src/components/Breadcrumb/Locale/el_GR.tsx create mode 100644 src/components/Breadcrumb/Locale/en_GB.tsx create mode 100644 src/components/Breadcrumb/Locale/en_US.tsx create mode 100644 src/components/Breadcrumb/Locale/es_DO.tsx create mode 100644 src/components/Breadcrumb/Locale/es_ES.tsx create mode 100644 src/components/Breadcrumb/Locale/es_MX.tsx create mode 100644 src/components/Breadcrumb/Locale/fi_FI.tsx create mode 100644 src/components/Breadcrumb/Locale/fr_BE.tsx create mode 100644 src/components/Breadcrumb/Locale/fr_CA.tsx create mode 100644 src/components/Breadcrumb/Locale/fr_FR.tsx create mode 100644 src/components/Breadcrumb/Locale/he_IL.tsx create mode 100644 src/components/Breadcrumb/Locale/hi_IN.tsx create mode 100644 src/components/Breadcrumb/Locale/hr_HR.tsx create mode 100644 src/components/Breadcrumb/Locale/ht_HT.tsx create mode 100644 src/components/Breadcrumb/Locale/hu_HU.tsx create mode 100644 src/components/Breadcrumb/Locale/it_IT.tsx create mode 100644 src/components/Breadcrumb/Locale/ja_JP.tsx create mode 100644 src/components/Breadcrumb/Locale/ko_KR.tsx create mode 100644 src/components/Breadcrumb/Locale/ms_MY.tsx create mode 100644 src/components/Breadcrumb/Locale/nb_NO.tsx create mode 100644 src/components/Breadcrumb/Locale/nl_BE.tsx create mode 100644 src/components/Breadcrumb/Locale/nl_NL.tsx create mode 100644 src/components/Breadcrumb/Locale/pl_PL.tsx create mode 100644 src/components/Breadcrumb/Locale/pt_BR.tsx create mode 100644 src/components/Breadcrumb/Locale/pt_PT.tsx create mode 100644 src/components/Breadcrumb/Locale/ru_RU.tsx create mode 100644 src/components/Breadcrumb/Locale/sv_SE.tsx create mode 100644 src/components/Breadcrumb/Locale/th_TH.tsx create mode 100644 src/components/Breadcrumb/Locale/tr_TR.tsx create mode 100644 src/components/Breadcrumb/Locale/uk_UA.tsx create mode 100644 src/components/Breadcrumb/Locale/zh_CN.tsx create mode 100644 src/components/Breadcrumb/Locale/zh_TW.tsx create mode 100644 src/components/Breadcrumb/Styles/breadcrumb.module.scss create mode 100644 src/components/Breadcrumb/Styles/rtl.scss create mode 100644 src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap create mode 100644 src/components/Breadcrumb/index.ts diff --git a/src/components/Breadcrumb/Breadcrumb.stories.tsx b/src/components/Breadcrumb/Breadcrumb.stories.tsx new file mode 100644 index 000000000..51b0248b2 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -0,0 +1,293 @@ +import React from 'react'; +import { Stories } from '@storybook/addon-docs'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Breadcrumb } from './'; +import { IconName } from '../Icon'; +import { Link } from '../Link'; +import { + LinkButton, + LinkButtonSize, + LinkButtonTextAlign, + LinkButtonVariant, + LinkButtonWidth, +} from '../LinkButton'; + +export default { + title: 'Breadcrumb', + parameters: { + docs: { + page: (): JSX.Element => ( +
+
+
+

Breadcrumb

+

+ A breadcrumb displays the current location within a hierarchy. + It allows going back to states higher up in the hierarchy. +

+
+
+ +
+
+
+ ), + }, + }, + argTypes: {}, +} as ComponentMeta; + +const Breadcrumb_Story: ComponentStory = (args) => ( + +); + +const myLinks = [ + { + title: 'Home', + url: '#', + }, + { + title: 'Page 1', + url: '#', + }, + { + title: 'Page 2', + url: '#', + }, + { + title: 'Page 3', + url: '#', + }, + { + title: 'Page 4', + url: '#', + }, + { + title: 'Page 5', + url: '#', + }, + { + ariaCurrent: true, + readonly: true, + title: 'Page 6', + url: '#', + }, +]; + +export const Basic_Many = Breadcrumb_Story.bind({}); +export const Basic_Few = Breadcrumb_Story.bind({}); +export const No_Max = Breadcrumb_Story.bind({}); +export const Hide_Current = Breadcrumb_Story.bind({}); +export const With_Link_Tooltip = Breadcrumb_Story.bind({}); +export const With_Custom_Links = Breadcrumb_Story.bind({}); + +const breadcrumbArgs: Object = { + ariaLabel: 'Breadcrumbs', + classNames: 'my-breadcrumb-root-class', + 'data-testid': 'my-breadcrumb-testid', + displayCurrent: true, + divider: { + path: IconName.mdiChevronRight, + ariaHidden: true, + classNames: 'my-breadcrumb-icon', + id: 'myBreadcrumbIcon', + role: 'presentation', + rotate: 0, + spin: false, + vertical: false, + 'data-testid': 'myBreadcrumbIconTestId', + }, + id: 'myBreadcrumb', + links: myLinks, + linkClassNames: 'my-breadcrumb-links-class', + maxDisplayedLinks: 3, + overflowAriaLabel: 'More links', + style: {}, +}; + +Basic_Many.args = { + ...breadcrumbArgs, +}; + +Basic_Few.args = { + ...breadcrumbArgs, + links: [ + { + title: 'Home', + url: '#', + }, + { + title: 'Page 1', + url: '#', + }, + { + ariaCurrent: true, + readonly: true, + title: 'Page 2', + url: '#', + }, + ], +}; + +No_Max.args = { + ...breadcrumbArgs, + maxDisplayedLinks: false, +}; + +Hide_Current.args = { + ...breadcrumbArgs, + displayCurrent: false, + maxDisplayedLinks: false, +}; + +With_Link_Tooltip.args = { + ...breadcrumbArgs, + links: [ + { + title: 'Home', + url: '#', + }, + { + title: 'Page 1', + url: '#', + tooltipprops: { + content: 'A tooltip', + }, + }, + { + ariaCurrent: true, + readonly: true, + title: 'Page 2', + url: '#', + }, + ], +}; + +With_Custom_Links.args = { + ...breadcrumbArgs, + links: [ + { + title: 'Custom Home', + children: ( + + Custom home + + ), + dropdownChildren: ( + + ), + }, + { + title: 'Custom page 1', + children: ( + + Custom page 1 + + ), + dropdownChildren: ( + + ), + tooltipprops: { + content: 'A tooltip', + }, + }, + { + title: 'Custom page 2', + children: ( + + Custom page 2 + + ), + dropdownChildren: ( + + ), + }, + { + title: 'Custom page 3', + children: ( + + Custom page 3 + + ), + dropdownChildren: ( + + ), + }, + { + title: 'Custom page 4', + children: ( + + Custom page 4 + + ), + dropdownChildren: ( + + ), + }, + { + title: 'Custom page 5', + children: ( + + Custom page 5 + + ), + dropdownChildren: ( + + ), + }, + { + ariaCurrent: true, + dropdownChildren: ( + + ), + readonly: true, + title: 'Custom page 6', + url: '#', + }, + ], +}; diff --git a/src/components/Breadcrumb/Breadcrumb.test.tsx b/src/components/Breadcrumb/Breadcrumb.test.tsx new file mode 100644 index 000000000..10115915f --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -0,0 +1,208 @@ +import React from 'react'; +import Enzyme from 'enzyme'; +import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; +import MatchMediaMock from 'jest-matchmedia-mock'; +import { Breadcrumb } from './'; +import { IconName } from '../Icon'; +import { Link } from '../Link'; +import { render, screen } from '@testing-library/react'; + +Enzyme.configure({ adapter: new Adapter() }); + +let matchMedia: any; + +class ResizeObserver { + observe() { + // do nothing + } + unobserve() { + // do nothing + } + disconnect() { + // do nothing + } +} + +window.ResizeObserver = ResizeObserver; + +const myLinks = [ + { + title: 'Home', + url: '#', + }, + { + title: 'Page 1', + url: '#', + }, + { + title: 'Page 2', + url: '#', + }, + { + title: 'Page 3', + url: '#', + }, + { + title: 'Page 4', + url: '#', + }, + { + title: 'Page 5', + url: '#', + }, + { + title: 'Page 6', + url: '#', + }, +]; + +const breadcrumbArgs = { + ariaLabel: 'Breadcrumbs', + classNames: 'my-breadcrumb-root-class', + 'data-testid': 'my-breadcrumb-testid', + divider: { + path: IconName.mdiChevronRight, + ariaHidden: true, + classNames: 'my-breadcrumb-icon', + id: 'myBreadcrumbIcon', + role: 'presentation', + rotate: 0, + spin: false, + vertical: false, + 'data-testid': 'myBreadcrumbIconTestId', + }, + id: 'myBreadcrumb', + links: myLinks, + linkClassNames: 'my-breadcrumb-links-class', + maxDisplayedLinks: 3, + overflowAriaLabel: 'More links', + style: {}, +}; + +describe('Breadcrumb', () => { + beforeAll(() => { + matchMedia = new MatchMediaMock(); + }); + + afterEach(() => { + matchMedia.clear(); + }); + + test('Renders without crashing', () => { + const { container } = render(); + expect(() => container).not.toThrowError(); + expect(container.querySelector('.breadcrumb')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); + + test('should accept undefined links', () => { + const { asFragment } = render( + + ); + expect(asFragment().firstChild).toMatchSnapshot(); + }); + + test('should support custom attribute', () => { + const { asFragment } = render( + ( + + ) as React.ReactElement> + ); + expect(asFragment().firstChild).toMatchSnapshot(); + }); + + test('Crumb should support string `0` and number `0`', () => { + const { container } = render( + + ); + expect(container.querySelectorAll('.breadcrumb-link')[0].textContent).toBe( + '0' + ); + expect(container.querySelectorAll('.breadcrumb-link')[1].textContent).toBe( + '0' + ); + expect(container.firstChild).toMatchSnapshot(); + }); + + test('Crumb should use `onClick`', async () => { + const onClick = jest.fn(); + const { container } = render( + + ); + const crumb = await screen.findByText('test'); + crumb.click(); + expect(onClick).toHaveBeenCalledTimes(1); + }); + + test('Crumb should use `classNames`', async () => { + const { container } = render( + + ); + const crumb = await screen.findByText('test'); + expect(crumb.classList.contains('my-breadcrumb-links-class')).toBe(true); + expect(crumb.classList.contains('my-breadcrumb-link-class')).toBe(true); + }); + + test('Crumb should use custom links', async () => { + const { container } = render( + + Custom home + + ), + }, + { + title: 'Page 1', + children: ( + + Custom Page 1 + + ), + tooltipprops: { + content: 'A tooltip', + }, + }, + { + ariaCurrent: true, + readonly: true, + title: 'Page 2', + url: '#', + }, + ]} + /> + ); + expect(container.querySelector('.breadcrumb')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 000000000..d37916d72 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,290 @@ +import React, { FC, Ref, useEffect, useRef, useState } from 'react'; +import { + BreadcrumbLinkProps, + BreadcrumbLocale, + BreadcrumbProps, +} from './Breadcrumb.types'; +import { Dropdown } from '../Dropdown'; +import { Icon, IconName, IconSize } from '../Icon'; +import { Link } from '../Link'; +import { + Menu, + MenuItemCustomProps, + MenuItemLinkProps, + MenuItemType, + MenuSize, +} from '../Menu'; +import { Stack } from '../Stack'; +import { Tooltip, TooltipTheme } from '../Tooltip'; +import LocaleReceiver, { + useLocaleReceiver, +} from '../LocaleProvider/LocaleReceiver'; +import { useCanvasDirection } from '../../hooks/useCanvasDirection'; +import { useMaxVisibleSections } from '../../hooks/useMaxVisibleSections'; +import { useMergedRefs } from '../../hooks/useMergedRefs'; +import { mergeClasses } from '../../shared/utilities'; +import enUS from './Locale/en_US'; + +import styles from './Styles/breadcrumb.module.scss'; + +export const Breadcrumb: FC = React.forwardRef( + (props: BreadcrumbProps, ref: Ref) => { + const { + ariaLabel: defaultAriaLabel, + classNames, + displayCurrent = true, + divider, + id, + linkClassNames, + links, + locale = enUS, + maxDisplayedLinks: defaultMaxDisplayedLinks, + overflowAriaLabel: defaultOverflowAriaLabel, + style, + 'data-testid': dataTestId, + ...rest + } = props; + const internalRef: React.MutableRefObject = + useRef(null); + const crumbRefs: React.MutableRefObject = useRef< + HTMLElement[] + >([]); + const mergedRef: (node: HTMLDivElement) => void = useMergedRefs( + internalRef, + ref + ); + const htmlDir: string = useCanvasDirection(); + const maxSections = useMaxVisibleSections(internalRef, crumbRefs); + const [maxDisplayedLinks, setMaxDisplayedLinks] = useState< + number | boolean + >(defaultMaxDisplayedLinks); + + useEffect(() => { + setMaxDisplayedLinks( + props.maxDisplayedLinks !== null ? props.maxDisplayedLinks : 3 + ); + }, [maxSections.count]); + + useEffect(() => { + if (maxSections.count !== maxDisplayedLinks) { + setMaxDisplayedLinks(maxSections.count); + } + }, [maxSections.count]); + + // ============================ Strings =========================== + const [breadcrumbLocale] = useLocaleReceiver('Breadcrumb'); + let mergedLocale: BreadcrumbLocale; + + if (props.locale) { + mergedLocale = props.locale; + } else { + mergedLocale = breadcrumbLocale || props.locale; + } + + const [ariaLabel, setAriaLabel] = useState(defaultAriaLabel); + const [overflowAriaLabel, setOverflowAriaLabel] = useState( + defaultOverflowAriaLabel + ); + + // Locs: if the prop isn't provided use the loc defaults. + // If the mergedLocale is changed, update. + useEffect(() => { + setAriaLabel( + props.ariaLabel ? props.ariaLabel : mergedLocale.lang!.ariaLabelText + ); + setOverflowAriaLabel( + props.overflowAriaLabel + ? props.overflowAriaLabel + : mergedLocale.lang!.overflowAriaLabelText + ); + }, [mergedLocale]); + + const breadCrumbClassNames: string = mergeClasses([ + styles.breadcrumb, + classNames, + { [styles.breadcrumbRtl]: htmlDir === 'rtl' }, + ]); + + const linkClasses: string = mergeClasses([ + styles.breadcrumbLink, + linkClassNames, + ]); + + const getDivider = (item?: BreadcrumbLinkProps): JSX.Element => ( + + ); + + const getLinkMenu = (items: BreadcrumbLinkProps[]): JSX.Element => { + const getItems = (): MenuItemLinkProps[] | MenuItemCustomProps[] => { + return items.map((item?: BreadcrumbLinkProps, idx?: number) => + !!item.dropdownChildren + ? { + key: idx, + render: () => item.dropdownChildren, + text: `${item.title}`, + title: `${item.title}`, + type: MenuItemType.custom, + value: item, + } + : { + href: item.url, + key: idx, + text: `${item.title}`, + title: `${item.title}`, + type: MenuItemType.link, + value: item, + } + ); + }; + return ( +
  • + + + } + portal + > + + ... + + + {getDivider()} + +
    • + ); + }; + + const getCrumbs = (): React.ReactNode[] => { + const crumbs: React.ReactNode[] = []; + const deleteCount: number = !displayCurrent ? 1 : 0; + const visibleLinks: BreadcrumbLinkProps[] = links?.slice( + 0, + links?.length - deleteCount + ); + + visibleLinks?.forEach( + ( + item: BreadcrumbLinkProps, + idx: number, + items: BreadcrumbLinkProps[] + ) => { + let crumb: React.ReactNode; + + if (item.readonly) { + crumb = ( +
  • (crumbRefs.current[idx] = ref)} + > + + + + {item.title} + + + {idx < items.length - 1 && getDivider(item)} + +
    • + ); + } else { + crumb = ( +
  • (crumbRefs.current[idx] = ref)} + > + + + {!!item.children ? ( + item.children + ) : ( + + {item.title} + + )} + + {idx < items.length - 1 && getDivider(item)} + +
    • + ); + } + + crumbs.push(crumb); + } + ); + + if (maxDisplayedLinks && crumbs.length > Number(maxDisplayedLinks)) { + const deleteCount: number = crumbs.length - Number(maxDisplayedLinks); + const linkMenuItems: BreadcrumbLinkProps[] = visibleLinks.slice( + 1, + deleteCount + 1 + ); + const linkMenu: JSX.Element = getLinkMenu(linkMenuItems); + + crumbs.splice(1, deleteCount, linkMenu); + } + + return crumbs; + }; + + return ( + + {(_contextLocale: BreadcrumbLocale) => { + return ( + + ); + }} + + ); + } +); diff --git a/src/components/Breadcrumb/Breadcrumb.types.tsx b/src/components/Breadcrumb/Breadcrumb.types.tsx new file mode 100644 index 000000000..ba07b28a9 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.types.tsx @@ -0,0 +1,116 @@ +import { IconProps } from '../Icon'; +import { LinkProps } from '../Link'; +import { OcBaseProps } from '../OcBase'; +import { TooltipProps } from '../Tooltip'; + +type Locale = { + /** + * The Breadcrumb locale. + */ + locale: string; + /** + * The Breadcrumb `Breadcrumbs` aria label string. + */ + ariaLabelText?: string; + /** + * The Breadcrumb `More links` Button aria label string. + */ + overflowAriaLabelText?: string; +}; + +export type BreadcrumbLocale = { + lang: Locale; +}; + +export interface BreadcrumbLinkProps + extends Omit { + /** + * Use this on the current page Breadcrumb if included. + */ + ariaCurrent?: boolean; + /** + * Custom breadcrumb link renderer. + * Use with React Router. + */ + children?: React.ReactNode; + /** + * Custom divider of the Breadcrumb Link list item. + */ + divider?: IconProps; + /** + * Custom breadcrumb dropdown item renderer. + * Use with React Router. + */ + dropdownChildren?: React.ReactNode; + /** + * The Link is readonly (text) + */ + readonly?: boolean; + /** + * The Breadcrumb Link title. + */ + title?: number | string; + /** + * The Breadcrumb Tooltip. + */ + tooltipprops?: TooltipProps; + /** + * The Breadcrumb Link src url. + */ + url?: string; +} + +export interface BreadcrumbProps extends OcBaseProps { + /** + * The Breadcrumb Links. + */ + links: BreadcrumbLinkProps[]; + /** + * Aria label of the root element of Breadcrumb. + * @default 'Breadcrumbs' + */ + ariaLabel?: string; + /** + * Custom class names of the root Breadcrumb element. + */ + classNames?: string; + /** + * Shared custom divider of the Breadcrumb list items. + * Cutom dividers of individual Links will take priority. + */ + divider?: IconProps; + /** + * id of the root Breadcrumb element. + */ + id?: string; + /** + * Shared custom class names of the Breadcrumb Links. + */ + linkClassNames?: string; + /** + * The Breadcrumb locale. + * @default 'enUS' + */ + locale?: BreadcrumbLocale; + /** + * Specify when to begin truncating to overflow Dropdown Link Menu. + * if set to false the Breadcrumbs will not truncate. + * @default 3 + */ + maxDisplayedLinks?: boolean | number; + /** + * Aria label for the overflow button. + * @default 'More links' + */ + overflowAriaLabel?: string; + /** + * Whether to display the current page in the Breadcrumb. + * To be used if your links array includes the current page. + * @default true + */ + displayCurrent?: boolean; + /** + * Custom style of the root Breadcrumb element. + */ + style?: React.CSSProperties; +} diff --git a/src/components/Breadcrumb/Locale/cs_CZ.tsx b/src/components/Breadcrumb/Locale/cs_CZ.tsx new file mode 100644 index 000000000..ec4c72930 --- /dev/null +++ b/src/components/Breadcrumb/Locale/cs_CZ.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'cs_CZ', + ariaLabelText: 'Strouhanka', + overflowAriaLabelText: 'Více odkazy', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/da_DK.tsx b/src/components/Breadcrumb/Locale/da_DK.tsx new file mode 100644 index 000000000..17bfdde14 --- /dev/null +++ b/src/components/Breadcrumb/Locale/da_DK.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'da_DK', + ariaLabelText: 'Brødkrummer', + overflowAriaLabelText: 'Mere links', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/de_DE.tsx b/src/components/Breadcrumb/Locale/de_DE.tsx new file mode 100644 index 000000000..04d6ba38e --- /dev/null +++ b/src/components/Breadcrumb/Locale/de_DE.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'de_DE', + ariaLabelText: 'Paniermehl', + overflowAriaLabelText: 'Mehr links', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/el_GR.tsx b/src/components/Breadcrumb/Locale/el_GR.tsx new file mode 100644 index 000000000..ad3295daf --- /dev/null +++ b/src/components/Breadcrumb/Locale/el_GR.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'el_GR', + ariaLabelText: 'Τριμμένη φρυγανιά', + overflowAriaLabelText: 'Περισσότεροι σύνδεσμοι', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/en_GB.tsx b/src/components/Breadcrumb/Locale/en_GB.tsx new file mode 100644 index 000000000..5b526e4c7 --- /dev/null +++ b/src/components/Breadcrumb/Locale/en_GB.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'en_GB', + ariaLabelText: 'Breadcrumbs', + overflowAriaLabelText: 'More links', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/en_US.tsx b/src/components/Breadcrumb/Locale/en_US.tsx new file mode 100644 index 000000000..20ed88281 --- /dev/null +++ b/src/components/Breadcrumb/Locale/en_US.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'en_US', + ariaLabelText: 'Breadcrumbs', + overflowAriaLabelText: 'More links', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/es_DO.tsx b/src/components/Breadcrumb/Locale/es_DO.tsx new file mode 100644 index 000000000..2a18b4d99 --- /dev/null +++ b/src/components/Breadcrumb/Locale/es_DO.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'es_DO', + ariaLabelText: 'Pan rallado', + overflowAriaLabelText: 'Más enlaces', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/es_ES.tsx b/src/components/Breadcrumb/Locale/es_ES.tsx new file mode 100644 index 000000000..137af63c8 --- /dev/null +++ b/src/components/Breadcrumb/Locale/es_ES.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'es_ES', + ariaLabelText: 'Pan rallado', + overflowAriaLabelText: 'Más enlaces', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/es_MX.tsx b/src/components/Breadcrumb/Locale/es_MX.tsx new file mode 100644 index 000000000..f3530ef52 --- /dev/null +++ b/src/components/Breadcrumb/Locale/es_MX.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'es_MX', + ariaLabelText: 'Pan rallado', + overflowAriaLabelText: 'Más enlaces', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/fi_FI.tsx b/src/components/Breadcrumb/Locale/fi_FI.tsx new file mode 100644 index 000000000..2eda5fd3f --- /dev/null +++ b/src/components/Breadcrumb/Locale/fi_FI.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'fi_FI', + ariaLabelText: 'Leivänmurut', + overflowAriaLabelText: 'Lisää linkkejä', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/fr_BE.tsx b/src/components/Breadcrumb/Locale/fr_BE.tsx new file mode 100644 index 000000000..20443d8fb --- /dev/null +++ b/src/components/Breadcrumb/Locale/fr_BE.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'fr_BE', + ariaLabelText: 'Chapelure', + overflowAriaLabelText: 'Plus de liens', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/fr_CA.tsx b/src/components/Breadcrumb/Locale/fr_CA.tsx new file mode 100644 index 000000000..5f1d88510 --- /dev/null +++ b/src/components/Breadcrumb/Locale/fr_CA.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'fr_CA', + ariaLabelText: 'Chapelure', + overflowAriaLabelText: 'Plus de liens', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/fr_FR.tsx b/src/components/Breadcrumb/Locale/fr_FR.tsx new file mode 100644 index 000000000..c43bd0e0f --- /dev/null +++ b/src/components/Breadcrumb/Locale/fr_FR.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'fr_FR', + ariaLabelText: 'Chapelure', + overflowAriaLabelText: 'Plus de liens', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/he_IL.tsx b/src/components/Breadcrumb/Locale/he_IL.tsx new file mode 100644 index 000000000..74876c716 --- /dev/null +++ b/src/components/Breadcrumb/Locale/he_IL.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'he_IL', + ariaLabelText: 'פירורי לחם', + overflowAriaLabelText: 'קישורים נוספים', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/hi_IN.tsx b/src/components/Breadcrumb/Locale/hi_IN.tsx new file mode 100644 index 000000000..671475ff5 --- /dev/null +++ b/src/components/Breadcrumb/Locale/hi_IN.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'hi_IN', + ariaLabelText: 'ब्रेडक्रम्ब्स', + overflowAriaLabelText: 'अधिक लिंक', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/hr_HR.tsx b/src/components/Breadcrumb/Locale/hr_HR.tsx new file mode 100644 index 000000000..436a8b619 --- /dev/null +++ b/src/components/Breadcrumb/Locale/hr_HR.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'hr_HR', + ariaLabelText: 'Krušne mrvice', + overflowAriaLabelText: 'Više veza', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/ht_HT.tsx b/src/components/Breadcrumb/Locale/ht_HT.tsx new file mode 100644 index 000000000..fa485c92e --- /dev/null +++ b/src/components/Breadcrumb/Locale/ht_HT.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'ht_HT', + ariaLabelText: 'Tikal pen', + overflowAriaLabelText: 'Plis lyen', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/hu_HU.tsx b/src/components/Breadcrumb/Locale/hu_HU.tsx new file mode 100644 index 000000000..4901efd20 --- /dev/null +++ b/src/components/Breadcrumb/Locale/hu_HU.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'hu_HU', + ariaLabelText: 'Zsemlemorzsa', + overflowAriaLabelText: 'További linkek', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/it_IT.tsx b/src/components/Breadcrumb/Locale/it_IT.tsx new file mode 100644 index 000000000..0b5eab8d7 --- /dev/null +++ b/src/components/Breadcrumb/Locale/it_IT.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'it_IT', + ariaLabelText: 'Pangrattato', + overflowAriaLabelText: 'Altri link', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/ja_JP.tsx b/src/components/Breadcrumb/Locale/ja_JP.tsx new file mode 100644 index 000000000..0f863b9aa --- /dev/null +++ b/src/components/Breadcrumb/Locale/ja_JP.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'ja_JP', + ariaLabelText: 'ブレッドク', + overflowAriaLabelText: 'その他のリンク', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/ko_KR.tsx b/src/components/Breadcrumb/Locale/ko_KR.tsx new file mode 100644 index 000000000..4133116a7 --- /dev/null +++ b/src/components/Breadcrumb/Locale/ko_KR.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'ko_KR', + ariaLabelText: '빵 부스러기', + overflowAriaLabelText: '더 많은 링크', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/ms_MY.tsx b/src/components/Breadcrumb/Locale/ms_MY.tsx new file mode 100644 index 000000000..5d941588a --- /dev/null +++ b/src/components/Breadcrumb/Locale/ms_MY.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'ms_MY', + ariaLabelText: 'Serbuk', + overflowAriaLabelText: 'Lebih banyak pautan', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/nb_NO.tsx b/src/components/Breadcrumb/Locale/nb_NO.tsx new file mode 100644 index 000000000..c080724a4 --- /dev/null +++ b/src/components/Breadcrumb/Locale/nb_NO.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'nb_NO', + ariaLabelText: 'Brødsmuler', + overflowAriaLabelText: 'Flere linker', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/nl_BE.tsx b/src/components/Breadcrumb/Locale/nl_BE.tsx new file mode 100644 index 000000000..4e60a2238 --- /dev/null +++ b/src/components/Breadcrumb/Locale/nl_BE.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'nl_BE', + ariaLabelText: 'Paneermeel', + overflowAriaLabelText: 'Meer links', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/nl_NL.tsx b/src/components/Breadcrumb/Locale/nl_NL.tsx new file mode 100644 index 000000000..d1dbc06c2 --- /dev/null +++ b/src/components/Breadcrumb/Locale/nl_NL.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'nl_NL', + ariaLabelText: 'Paneermeel', + overflowAriaLabelText: 'Meer links', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/pl_PL.tsx b/src/components/Breadcrumb/Locale/pl_PL.tsx new file mode 100644 index 000000000..d7fd85ec4 --- /dev/null +++ b/src/components/Breadcrumb/Locale/pl_PL.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'pl_PL', + ariaLabelText: 'Bułka tarta', + overflowAriaLabelText: 'Więcej linków', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/pt_BR.tsx b/src/components/Breadcrumb/Locale/pt_BR.tsx new file mode 100644 index 000000000..41be42d65 --- /dev/null +++ b/src/components/Breadcrumb/Locale/pt_BR.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'pt_BR', + ariaLabelText: 'Farinha de rosca', + overflowAriaLabelText: 'Mais links', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/pt_PT.tsx b/src/components/Breadcrumb/Locale/pt_PT.tsx new file mode 100644 index 000000000..3a76c2129 --- /dev/null +++ b/src/components/Breadcrumb/Locale/pt_PT.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'pt_PT', + ariaLabelText: 'Pão ralado', + overflowAriaLabelText: 'Mais ligações', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/ru_RU.tsx b/src/components/Breadcrumb/Locale/ru_RU.tsx new file mode 100644 index 000000000..743330fee --- /dev/null +++ b/src/components/Breadcrumb/Locale/ru_RU.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'ru_RU', + ariaLabelText: 'Панировочные сухари', + overflowAriaLabelText: 'Больше ссылок', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/sv_SE.tsx b/src/components/Breadcrumb/Locale/sv_SE.tsx new file mode 100644 index 000000000..8d1b925eb --- /dev/null +++ b/src/components/Breadcrumb/Locale/sv_SE.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'sv_SE', + ariaLabelText: 'Ströbröd', + overflowAriaLabelText: 'Fler länkar', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/th_TH.tsx b/src/components/Breadcrumb/Locale/th_TH.tsx new file mode 100644 index 000000000..60b44083e --- /dev/null +++ b/src/components/Breadcrumb/Locale/th_TH.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'th_TH', + ariaLabelText: 'เบรดครัมบ์', + overflowAriaLabelText: 'ลิงก์เพิ่มเติม', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/tr_TR.tsx b/src/components/Breadcrumb/Locale/tr_TR.tsx new file mode 100644 index 000000000..eca93149e --- /dev/null +++ b/src/components/Breadcrumb/Locale/tr_TR.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'tr_TR', + ariaLabelText: 'Ekmek kırıntıları', + overflowAriaLabelText: 'Daha fazla bağlantı', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/uk_UA.tsx b/src/components/Breadcrumb/Locale/uk_UA.tsx new file mode 100644 index 000000000..463055250 --- /dev/null +++ b/src/components/Breadcrumb/Locale/uk_UA.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'uk_UA', + ariaLabelText: 'Панірувальні сухарі', + overflowAriaLabelText: 'Більше посилань', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/zh_CN.tsx b/src/components/Breadcrumb/Locale/zh_CN.tsx new file mode 100644 index 000000000..bed1f123e --- /dev/null +++ b/src/components/Breadcrumb/Locale/zh_CN.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'zh_CN', + ariaLabelText: '面包屑', + overflowAriaLabelText: '更多链接', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Locale/zh_TW.tsx b/src/components/Breadcrumb/Locale/zh_TW.tsx new file mode 100644 index 000000000..7d187b0e7 --- /dev/null +++ b/src/components/Breadcrumb/Locale/zh_TW.tsx @@ -0,0 +1,11 @@ +import type { BreadcrumbLocale } from '../Breadcrumb.types'; + +const locale: BreadcrumbLocale = { + lang: { + locale: 'zh_TW', + ariaLabelText: '麵包屑', + overflowAriaLabelText: '更多連結', + }, +}; + +export default locale; diff --git a/src/components/Breadcrumb/Styles/breadcrumb.module.scss b/src/components/Breadcrumb/Styles/breadcrumb.module.scss new file mode 100644 index 000000000..818fdc28d --- /dev/null +++ b/src/components/Breadcrumb/Styles/breadcrumb.module.scss @@ -0,0 +1,67 @@ +.breadcrumb { + display: block; + + a { + white-space: nowrap; + } + + &-dropdown-link { + margin: 0; + padding: 0; + } + + &-list { + display: flex; + font-family: var(--font-stack-full); + list-style: none; + margin: 0; + padding: 0; + + &-item { + list-style-type: none; + } + + &-overflow-menu { + color: var(--anchor-primary-color); + margin: -$space-xs; + + &:active { + color: var(--anchor-primary-active-color); + } + + &:hover { + color: var(--anchor-primary-hover-color); + text-decoration: underline; + } + } + } + + &-link { + white-space: nowrap; + + &-read-only { + color: var(--text-primary-color); + font-family: var(--font-stack-full); + font-weight: $text-font-weight-semibold; + font-size: $text-font-size-2; + } + } + + &-dropdown-link-menu { + padding: $space-s 0; + + ul { + gap: $space-xxs; + + li { + &:first-child, + &:last-child { + margin-bottom: 0; + margin-top: 0; + } + } + } + } +} + +@import './rtl'; diff --git a/src/components/Breadcrumb/Styles/rtl.scss b/src/components/Breadcrumb/Styles/rtl.scss new file mode 100644 index 000000000..b7b9d204e --- /dev/null +++ b/src/components/Breadcrumb/Styles/rtl.scss @@ -0,0 +1,5 @@ +.breadcrumb { + &-rtl { + direction: rtl; + } +} diff --git a/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap new file mode 100644 index 000000000..3e302a1d0 --- /dev/null +++ b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -0,0 +1,527 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumb Crumb should support string \`0\` and number \`0\` 1`] = ` + +`; + +exports[`Breadcrumb Crumb should use custom links 1`] = ` +
    + +
    +`; + +exports[`Breadcrumb Renders without crashing 1`] = ` +
    + +
    +`; + +exports[`Breadcrumb should accept undefined links 1`] = ` + +`; + +exports[`Breadcrumb should support custom attribute 1`] = ` + +`; diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts new file mode 100644 index 000000000..62df25d2d --- /dev/null +++ b/src/components/Breadcrumb/index.ts @@ -0,0 +1,2 @@ +export * from './Breadcrumb.types'; +export * from './Breadcrumb'; diff --git a/src/components/Icon/mdi.ts b/src/components/Icon/mdi.ts index aae9c0975..bd8a00ec5 100644 --- a/src/components/Icon/mdi.ts +++ b/src/components/Icon/mdi.ts @@ -449,6 +449,7 @@ export enum IconName { mdiSilverwareVariant = 'M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z', mdiSitemap = 'M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z', mdiSitemapOutline = 'M21 16V13C21 11.89 20.11 11 19 11H13V8H15V2H9V8H11V11H5C3.89 11 3 11.89 3 13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21M11 4H13V6H11V4M5 20H3V18H5V20M13 20H11V18H13V20M21 20H19V18H21V20Z', + mdiSlashForward = 'M7 21L14.9 3H17L9.1 21H7Z', mdiSort = 'M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z', mdiSortAscending = 'M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z', mdiSortDescending = 'M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z', diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 440f84b1a..8fc349f4e 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -16,6 +16,7 @@ export const Link: FC = React.forwardRef( onClick, role = 'link', target = '_self', + title, underline, variant = 'default', style, @@ -57,6 +58,7 @@ export const Link: FC = React.forwardRef( onClick={handleOnClick} style={style} target={target} + title={`${title}`} data-test-id={dataTestId} > {children} diff --git a/src/components/Link/Link.types.ts b/src/components/Link/Link.types.ts index 3b0725d21..4ab48a386 100644 --- a/src/components/Link/Link.types.ts +++ b/src/components/Link/Link.types.ts @@ -9,8 +9,8 @@ export type LinkType = | 'secondary'; export interface LinkProps - extends OcBaseProps, - AnchorHTMLAttributes { + extends Omit, 'title'>, + Omit, 'title'> { /** * Whether the Link is disabled. * @default false @@ -29,6 +29,10 @@ export interface LinkProps * The Link role. */ role?: string; + /** + * The Link title. + */ + title?: number | string; /** * Whether to show the Link underline. */ diff --git a/src/components/Link/__snapshots__/Link.test.tsx.snap b/src/components/Link/__snapshots__/Link.test.tsx.snap index a27674915..c3d0b8d53 100644 --- a/src/components/Link/__snapshots__/Link.test.tsx.snap +++ b/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -8,6 +8,7 @@ exports[`Link Link is default 1`] = ` href="https://eightfold.ai" role="link" target="_self" + title="undefined" > Test default @@ -22,6 +23,7 @@ exports[`Link Link is disabled 1`] = ` href="https://eightfold.ai" role="link" target="_self" + title="undefined" > Test @@ -36,6 +38,7 @@ exports[`Link Link is neutral 1`] = ` href="https://eightfold.ai" role="link" target="_self" + title="undefined" > Test neutral @@ -50,6 +53,7 @@ exports[`Link Link is primary 1`] = ` href="https://eightfold.ai" role="link" target="_self" + title="undefined" /> `; @@ -62,6 +66,7 @@ exports[`Link Link is secondary 1`] = ` href="https://eightfold.ai" role="link" target="_self" + title="undefined" > Test secondary @@ -76,6 +81,7 @@ exports[`Link Link is underline when variant is primary 1`] = ` href="https://eightfold.ai" role="link" target="_self" + title="undefined" > Test underline diff --git a/src/components/Locale/Default.tsx b/src/components/Locale/Default.tsx index a1a9cab58..c1bc927a3 100644 --- a/src/components/Locale/Default.tsx +++ b/src/components/Locale/Default.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/en_US'; import DatePicker from '../DateTimePicker/DatePicker/Locale/en_US'; import Dialog from '../Dialog/BaseDialog/Locale/en_US'; import InfoBar from '../InfoBar/Locale/en_US'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Select', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/cs_CZ.tsx b/src/components/Locale/cs_CZ.tsx index c6cae7b2a..cd0692f28 100644 --- a/src/components/Locale/cs_CZ.tsx +++ b/src/components/Locale/cs_CZ.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/cs_CZ'; import DatePicker from '../DateTimePicker/DatePicker/Locale/cs_CZ'; import Dialog from '../Dialog/BaseDialog/Locale/cs_CZ'; import InfoBar from '../InfoBar/Locale/cs_CZ'; @@ -14,6 +15,7 @@ const localeValues: Locale = { global: { placeholder: 'Prosím vyber', }, + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/da_DK.tsx b/src/components/Locale/da_DK.tsx index 26dd3f874..e9eed17cb 100644 --- a/src/components/Locale/da_DK.tsx +++ b/src/components/Locale/da_DK.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/da_DK'; import DatePicker from '../DateTimePicker/DatePicker/Locale/da_DK'; import Dialog from '../Dialog/BaseDialog/Locale/da_DK'; import InfoBar from '../InfoBar/Locale/da_DK'; @@ -11,6 +12,7 @@ import Upload from '../Upload/Locale/da_DK'; const localeValues: Locale = { locale: 'da', + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/de_DE.tsx b/src/components/Locale/de_DE.tsx index 8f79a7983..565491ecc 100644 --- a/src/components/Locale/de_DE.tsx +++ b/src/components/Locale/de_DE.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/de_DE'; import DatePicker from '../DateTimePicker/DatePicker/Locale/de_DE'; import Dialog from '../Dialog/BaseDialog/Locale/de_DE'; import InfoBar from '../InfoBar/Locale/de_DE'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Bitte auswählen', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/el_GR.tsx b/src/components/Locale/el_GR.tsx index 6f2c16580..2715d3605 100644 --- a/src/components/Locale/el_GR.tsx +++ b/src/components/Locale/el_GR.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/el_GR'; import DatePicker from '../DateTimePicker/DatePicker/Locale/el_GR'; import Dialog from '../Dialog/BaseDialog/Locale/el_GR'; import InfoBar from '../InfoBar/Locale/el_GR'; @@ -11,6 +12,7 @@ import Upload from '../Upload/Locale/el_GR'; const localeValues: Locale = { locale: 'el', + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/en_GB.tsx b/src/components/Locale/en_GB.tsx index bf971e508..48c5b0dde 100644 --- a/src/components/Locale/en_GB.tsx +++ b/src/components/Locale/en_GB.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/en_GB'; import DatePicker from '../DateTimePicker/DatePicker/Locale/en_GB'; import Dialog from '../Dialog/BaseDialog/Locale/en_GB'; import InfoBar from '../InfoBar/Locale/en_GB'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Select', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/es_DO.tsx b/src/components/Locale/es_DO.tsx index b966f87e9..dcadf67b4 100644 --- a/src/components/Locale/es_DO.tsx +++ b/src/components/Locale/es_DO.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/es_DO'; import DatePicker from '../DateTimePicker/DatePicker/Locale/es_DO'; import Dialog from '../Dialog/BaseDialog/Locale/es_DO'; import InfoBar from '../InfoBar/Locale/es_DO'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Seleccione', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/es_ES.tsx b/src/components/Locale/es_ES.tsx index 4d94c6713..8fe76a90c 100644 --- a/src/components/Locale/es_ES.tsx +++ b/src/components/Locale/es_ES.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/es_ES'; import DatePicker from '../DateTimePicker/DatePicker/Locale/es_ES'; import Dialog from '../Dialog/BaseDialog/Locale/es_ES'; import InfoBar from '../InfoBar/Locale/es_ES'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Seleccione', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/es_MX.tsx b/src/components/Locale/es_MX.tsx index a5c7309e7..274615c83 100644 --- a/src/components/Locale/es_MX.tsx +++ b/src/components/Locale/es_MX.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/es_MX'; import DatePicker from '../DateTimePicker/DatePicker/Locale/es_MX'; import Dialog from '../Dialog/BaseDialog/Locale/es_MX'; import InfoBar from '../InfoBar/Locale/es_MX'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Seleccione', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/fi_FI.tsx b/src/components/Locale/fi_FI.tsx index 5ad6856ba..7958cc297 100644 --- a/src/components/Locale/fi_FI.tsx +++ b/src/components/Locale/fi_FI.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/fi_FI'; import DatePicker from '../DateTimePicker/DatePicker/Locale/fi_FI'; import Dialog from '../Dialog/BaseDialog/Locale/fi_FI'; import InfoBar from '../InfoBar/Locale/fi_FI'; @@ -11,6 +12,7 @@ import Upload from '../Upload/Locale/fi_FI'; const localeValues: Locale = { locale: 'fi', + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/fr_BE.tsx b/src/components/Locale/fr_BE.tsx index 91b7de4cc..1d319ce90 100644 --- a/src/components/Locale/fr_BE.tsx +++ b/src/components/Locale/fr_BE.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/fr_BE'; import DatePicker from '../DateTimePicker/DatePicker/Locale/fr_BE'; import Dialog from '../Dialog/BaseDialog/Locale/fr_BE'; import InfoBar from '../InfoBar/Locale/fr_BE'; @@ -11,6 +12,7 @@ import Upload from '../Upload/Locale/fr_BE'; const localeValues: Locale = { locale: 'fr', + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/fr_CA.tsx b/src/components/Locale/fr_CA.tsx index c94cf7458..1c4a1ade5 100644 --- a/src/components/Locale/fr_CA.tsx +++ b/src/components/Locale/fr_CA.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/fr_CA'; import DatePicker from '../DateTimePicker/DatePicker/Locale/fr_CA'; import Dialog from '../Dialog/BaseDialog/Locale/fr_CA'; import InfoBar from '../InfoBar/Locale/fr_CA'; @@ -11,6 +12,7 @@ import Upload from '../Upload/Locale/fr_CA'; const localeValues: Locale = { locale: 'fr', + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/fr_FR.tsx b/src/components/Locale/fr_FR.tsx index c45b740b0..b3db7f775 100644 --- a/src/components/Locale/fr_FR.tsx +++ b/src/components/Locale/fr_FR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/fr_FR'; import DatePicker from '../DateTimePicker/DatePicker/Locale/fr_FR'; import Dialog from '../Dialog/BaseDialog/Locale/fr_FR'; import InfoBar from '../InfoBar/Locale/fr_FR'; @@ -15,6 +16,7 @@ const typeTemplate = const localeValues: Locale = { locale: 'fr', + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/he_IL.tsx b/src/components/Locale/he_IL.tsx index 37de2276d..dc29579c4 100644 --- a/src/components/Locale/he_IL.tsx +++ b/src/components/Locale/he_IL.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/he_IL'; import DatePicker from '../DateTimePicker/DatePicker/Locale/he_IL'; import Dialog from '../Dialog/BaseDialog/Locale/he_IL'; import InfoBar from '../InfoBar/Locale/he_IL'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'אנא בחר', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/hi_IN.tsx b/src/components/Locale/hi_IN.tsx index 70efb7135..062bf8035 100644 --- a/src/components/Locale/hi_IN.tsx +++ b/src/components/Locale/hi_IN.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/hi_IN'; import DatePicker from '../DateTimePicker/DatePicker/Locale/hi_IN'; import Dialog from '../Dialog/BaseDialog/Locale/hi_IN'; import InfoBar from '../InfoBar/Locale/hi_IN'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'चुनना', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/hr_HR.tsx b/src/components/Locale/hr_HR.tsx index ff3ba299a..7080c90f4 100644 --- a/src/components/Locale/hr_HR.tsx +++ b/src/components/Locale/hr_HR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/hr_HR'; import DatePicker from '../DateTimePicker/DatePicker/Locale/hr_HR'; import Dialog from '../Dialog/BaseDialog/Locale/hr_HR'; import InfoBar from '../InfoBar/Locale/hr_HR'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Molimo označite', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/ht_HT.tsx b/src/components/Locale/ht_HT.tsx index 4a9578084..686520837 100644 --- a/src/components/Locale/ht_HT.tsx +++ b/src/components/Locale/ht_HT.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/ht_HT'; import DatePicker from '../DateTimePicker/DatePicker/Locale/ht_HT'; import Dialog from '../Dialog/BaseDialog/Locale/ht_HT'; import InfoBar from '../InfoBar/Locale/ht_HT'; @@ -15,6 +16,7 @@ const typeTemplate = const localeValues: Locale = { locale: 'fr', + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/hu_HU.tsx b/src/components/Locale/hu_HU.tsx index 8e1b32478..ad30aefd4 100644 --- a/src/components/Locale/hu_HU.tsx +++ b/src/components/Locale/hu_HU.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/hu_HU'; import DatePicker from '../DateTimePicker/DatePicker/Locale/hu_HU'; import Dialog from '../Dialog/BaseDialog/Locale/hu_HU'; import InfoBar from '../InfoBar/Locale/hu_HU'; @@ -11,6 +12,7 @@ import Upload from '../Upload/Locale/hu_HU'; const localeValues: Locale = { locale: 'hu', + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/it_IT.tsx b/src/components/Locale/it_IT.tsx index 248045f10..f9b9ed41e 100644 --- a/src/components/Locale/it_IT.tsx +++ b/src/components/Locale/it_IT.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/it_IT'; import DatePicker from '../DateTimePicker/DatePicker/Locale/it_IT'; import Dialog from '../Dialog/BaseDialog/Locale/it_IT'; import InfoBar from '../InfoBar/Locale/it_IT'; @@ -11,6 +12,7 @@ import Upload from '../Upload/Locale/it_IT'; const localeValues: Locale = { locale: 'it', + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/ja_JP.tsx b/src/components/Locale/ja_JP.tsx index ea3fda74c..9deb74165 100644 --- a/src/components/Locale/ja_JP.tsx +++ b/src/components/Locale/ja_JP.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/ja_JP'; import DatePicker from '../DateTimePicker/DatePicker/Locale/ja_JP'; import Dialog from '../Dialog/BaseDialog/Locale/ja_JP'; import InfoBar from '../InfoBar/Locale/ja_JP'; @@ -14,6 +15,7 @@ const typeTemplate = '${label}は有効な${type}ではありません'; const localeValues: Locale = { locale: 'ja', + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/ko_KR.tsx b/src/components/Locale/ko_KR.tsx index bdf76061e..930f7fa52 100644 --- a/src/components/Locale/ko_KR.tsx +++ b/src/components/Locale/ko_KR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/ko_KR'; import DatePicker from '../DateTimePicker/DatePicker/Locale/ko_KR'; import Dialog from '../Dialog/BaseDialog/Locale/ko_KR'; import InfoBar from '../InfoBar/Locale/ko_KR'; @@ -14,6 +15,7 @@ const typeTemplate = '${label} 유효하지 않은 ${type}'; const localeValues: Locale = { locale: 'ko', + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/ms_MY.tsx b/src/components/Locale/ms_MY.tsx index b1ae8085f..f54dfa1fb 100644 --- a/src/components/Locale/ms_MY.tsx +++ b/src/components/Locale/ms_MY.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/ms_MY'; import DatePicker from '../DateTimePicker/DatePicker/Locale/ms_MY'; import Dialog from '../Dialog/BaseDialog/Locale/ms_MY'; import InfoBar from '../InfoBar/Locale/ms_MY'; @@ -14,6 +15,7 @@ const localeValues: Locale = { global: { placeholder: 'Sila pilih', }, + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/nb_NO.tsx b/src/components/Locale/nb_NO.tsx index 2f0f3defc..bfbf3286d 100644 --- a/src/components/Locale/nb_NO.tsx +++ b/src/components/Locale/nb_NO.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/nb_NO'; import DatePicker from '../DateTimePicker/DatePicker/Locale/nb_NO'; import Dialog from '../Dialog/BaseDialog/Locale/nb_NO'; import InfoBar from '../InfoBar/Locale/nb_NO'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Vennligst velg', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/nl_BE.tsx b/src/components/Locale/nl_BE.tsx index cf3f88d48..1759d89f8 100644 --- a/src/components/Locale/nl_BE.tsx +++ b/src/components/Locale/nl_BE.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/nl_BE'; import DatePicker from '../DateTimePicker/DatePicker/Locale/nl_BE'; import Dialog from '../Dialog/BaseDialog/Locale/nl_BE'; import InfoBar from '../InfoBar/Locale/nl_BE'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Maak een selectie', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/nl_NL.tsx b/src/components/Locale/nl_NL.tsx index 614007f49..57546bc69 100644 --- a/src/components/Locale/nl_NL.tsx +++ b/src/components/Locale/nl_NL.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/nl_NL'; import DatePicker from '../DateTimePicker/DatePicker/Locale/nl_NL'; import Dialog from '../Dialog/BaseDialog/Locale/nl_NL'; import InfoBar from '../InfoBar/Locale/nl_NL'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Maak een selectie', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/pl_PL.tsx b/src/components/Locale/pl_PL.tsx index 069d4b843..13ec7ee24 100644 --- a/src/components/Locale/pl_PL.tsx +++ b/src/components/Locale/pl_PL.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/pl_PL'; import DatePicker from '../DateTimePicker/DatePicker/Locale/pl_PL'; import Dialog from '../Dialog/BaseDialog/Locale/pl_PL'; import InfoBar from '../InfoBar/Locale/pl_PL'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Wybierz', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/pt_BR.tsx b/src/components/Locale/pt_BR.tsx index b911d44bd..4dde95b12 100644 --- a/src/components/Locale/pt_BR.tsx +++ b/src/components/Locale/pt_BR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/pt_BR'; import DatePicker from '../DateTimePicker/DatePicker/Locale/pt_BR'; import Dialog from '../Dialog/BaseDialog/Locale/pt_BR'; import InfoBar from '../InfoBar/Locale/pt_BR'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Por favor escolha', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/pt_PT.tsx b/src/components/Locale/pt_PT.tsx index 9083b5503..ad5fadff7 100644 --- a/src/components/Locale/pt_PT.tsx +++ b/src/components/Locale/pt_PT.tsx @@ -1,4 +1,5 @@ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/pt_PT'; import DatePicker from '../DateTimePicker/DatePicker/Locale/pt_PT'; import Dialog from '../Dialog/BaseDialog/Locale/pt_PT'; import InfoBar from '../InfoBar/Locale/pt_PT'; @@ -11,6 +12,7 @@ import Upload from '../Upload/Locale/pt_PT'; const localeValues: Locale = { locale: 'pt', + Breadcrumb, DatePicker, Dialog, InfoBar, diff --git a/src/components/Locale/ru_RU.tsx b/src/components/Locale/ru_RU.tsx index fe21b8cb6..8718bd157 100644 --- a/src/components/Locale/ru_RU.tsx +++ b/src/components/Locale/ru_RU.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/ru_RU'; import DatePicker from '../DateTimePicker/DatePicker/Locale/ru_RU'; import Dialog from '../Dialog/BaseDialog/Locale/ru_RU'; import InfoBar from '../InfoBar/Locale/ru_RU'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Пожалуйста выберите', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/sv_SE.tsx b/src/components/Locale/sv_SE.tsx index d7818f203..d7dcf1b4b 100644 --- a/src/components/Locale/sv_SE.tsx +++ b/src/components/Locale/sv_SE.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/sv_SE'; import DatePicker from '../DateTimePicker/DatePicker/Locale/sv_SE'; import Dialog from '../Dialog/BaseDialog/Locale/sv_SE'; import InfoBar from '../InfoBar/Locale/sv_SE'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Vänligen välj', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/th_TH.tsx b/src/components/Locale/th_TH.tsx index dd98aed30..81c764310 100644 --- a/src/components/Locale/th_TH.tsx +++ b/src/components/Locale/th_TH.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/th_TH'; import DatePicker from '../DateTimePicker/DatePicker/Locale/th_TH'; import Dialog from '../Dialog/BaseDialog/Locale/th_TH'; import InfoBar from '../InfoBar/Locale/th_TH'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'กรุณาเลือก', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/tr_TR.tsx b/src/components/Locale/tr_TR.tsx index c15ee67ef..a184011b1 100644 --- a/src/components/Locale/tr_TR.tsx +++ b/src/components/Locale/tr_TR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/tr_TR'; import DatePicker from '../DateTimePicker/DatePicker/Locale/tr_TR'; import Dialog from '../Dialog/BaseDialog/Locale/tr_TR'; import InfoBar from '../InfoBar/Locale/tr_TR'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Lütfen seçiniz', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/uk_UA.tsx b/src/components/Locale/uk_UA.tsx index de56a8a6e..f3822b074 100644 --- a/src/components/Locale/uk_UA.tsx +++ b/src/components/Locale/uk_UA.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/uk_UA'; import DatePicker from '../DateTimePicker/DatePicker/Locale/uk_UA'; import Dialog from '../Dialog/BaseDialog/Locale/uk_UA'; import InfoBar from '../InfoBar/Locale/uk_UA'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: 'Будь ласка, оберіть', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/zh_CN.tsx b/src/components/Locale/zh_CN.tsx index 33f6cfe0a..f3e04c525 100644 --- a/src/components/Locale/zh_CN.tsx +++ b/src/components/Locale/zh_CN.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/zh_CN'; import DatePicker from '../DateTimePicker/DatePicker/Locale/zh_CN'; import Dialog from '../Dialog/BaseDialog/Locale/zh_CN'; import InfoBar from '../InfoBar/Locale/zh_CN'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: '请选择', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/Locale/zh_TW.tsx b/src/components/Locale/zh_TW.tsx index 059a63cc4..76a4b6aa0 100644 --- a/src/components/Locale/zh_TW.tsx +++ b/src/components/Locale/zh_TW.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Breadcrumb from '../Breadcrumb/Locale/zh_TW'; import DatePicker from '../DateTimePicker/DatePicker/Locale/zh_TW'; import Dialog from '../Dialog/BaseDialog/Locale/zh_TW'; import InfoBar from '../InfoBar/Locale/zh_TW'; @@ -17,6 +18,7 @@ const localeValues: Locale = { global: { placeholder: '請選擇', }, + Breadcrumb, DatePicker, Dialog, Form: { diff --git a/src/components/LocaleProvider/index.tsx b/src/components/LocaleProvider/index.tsx index 135a477e8..99978dfe6 100644 --- a/src/components/LocaleProvider/index.tsx +++ b/src/components/LocaleProvider/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import memoizeOne from 'memoize-one'; +import type { BreadcrumbLocale } from '../Breadcrumb/Breadcrumb.types'; import type { DialogLocale } from '../Dialog/BaseDialog/BaseDialog.types'; import type { PaginationLocale } from '../Pagination'; import type { PanelLocale } from '../Panel'; @@ -14,6 +15,7 @@ import LocaleContext from './Context'; export interface Locale { locale: string; global?: Record; + Breadcrumb?: BreadcrumbLocale; DatePicker?: DatePickerLocale; Dialog?: DialogLocale; Form?: { diff --git a/src/components/Menu/MenuItem/MenuItemCustom/MenuItemCustom.tsx b/src/components/Menu/MenuItem/MenuItemCustom/MenuItemCustom.tsx index 685bb5135..eab8f716f 100644 --- a/src/components/Menu/MenuItem/MenuItemCustom/MenuItemCustom.tsx +++ b/src/components/Menu/MenuItem/MenuItemCustom/MenuItemCustom.tsx @@ -6,6 +6,7 @@ import { MenuSize } from '../../Menu.types'; import styles from '../menuItem.module.scss'; export const MenuItemCustom: FC = ({ + classNames, index, onChange, size = MenuSize.medium, @@ -18,6 +19,7 @@ export const MenuItemCustom: FC = ({ [styles.medium]: size === MenuSize.medium, [styles.small]: size === MenuSize.small, }, + classNames, ]); return ( diff --git a/src/components/Menu/__snapshots__/Menu.test.tsx.snap b/src/components/Menu/__snapshots__/Menu.test.tsx.snap index 43df6f911..8a5cade5b 100644 --- a/src/components/Menu/__snapshots__/Menu.test.tsx.snap +++ b/src/components/Menu/__snapshots__/Menu.test.tsx.snap @@ -117,6 +117,7 @@ exports[`Menu Menu is large 1`] = ` role="menuitem" tabindex="0" target="_blank" + title="undefined" >