diff --git a/.gitignore b/.gitignore index 40447b4b4c..c77fbb40b0 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ coverage/ .directory .DS_Store .idea/ +mistica-web.iml *.js.map *.orig *.rej @@ -32,3 +33,4 @@ community.d.ts .scannerwork *storybook.log .env*.local + diff --git a/doc/fonts.md b/doc/fonts.md index 784e019e32..d4ffc17bb4 100644 --- a/doc/fonts.md +++ b/doc/fonts.md @@ -8,15 +8,15 @@ default serif font (Times New Roman on desktop). You must declare `@font-face` r Each skin has a designated font family. Use the correct one for the skin your app is using: -| Skin | Getter function | Font family | -| --------------------- | ------------------------ | ------------------- | -| `movistar` _(legacy)_ | `getMovistarSkin()` | `'On Air'` | -| `o2` | `getO2Skin()` | `'On Air'` | -| `vivo` | `getVivoSkin()` | `'Vivo Type'` | -| `vivo-evolution` | `getVivoEvolutionSkin()` | `'Vivo Type'` | -| `telefonica` | `getTelefonicaSkin()` | `'Telefonica Sans'` | -| `blau` | `getBlauSkin()` | `'Roboto'` | -| `esimflag` | `getEsimflagSkin()` | `'On Air'` | +| Skin | Getter function | Font family | +| ---------------- | ------------------------ | ------------------- | +| `movistar` | `getMovistarSkin()` | `'Movistar Sans'` | +| `o2` | `getO2Skin()` | `'On Air'` | +| `vivo` | `getVivoSkin()` | `'Vivo Type'` | +| `vivo-evolution` | `getVivoEvolutionSkin()` | `'Vivo Type'` | +| `telefonica` | `getTelefonicaSkin()` | `'Telefonica Sans'` | +| `blau` | `getBlauSkin()` | `'Roboto'` | +| `esimflag` | `getEsimflagSkin()` | `'On Air'` | ## Setting font-family diff --git a/doc/llms/agents/figma-verifier.md b/doc/llms/agents/figma-verifier.md index 1f122b1028..0e2d69b8b1 100644 --- a/doc/llms/agents/figma-verifier.md +++ b/doc/llms/agents/figma-verifier.md @@ -37,10 +37,10 @@ rules before starting. `font-family`, composite props that don't match the non-CodeConnect DOM, spacing values absent from the DOM, mismatched semantic structure (`Stack` vs `Inline`, flat vs nested), native HTML where a Mistica primitive exists, wrong/missing skin/font/body-background for the file's brand. - - **Layout primitives.** When the DOM shows `grid grid-cols-[repeat(12,…)]` with `col-[…/span_N]` - children, flag any implementation that used a raw `
`, a fixed-width flex - row, `Grid`, or manual spacer columns instead of a `GridLayout` whose `template` matches the child - spans. Flag a `GridLayout` that is not wrapped in a `ResponsiveLayout`, and a full-width padded section + - **Layout primitives.** When the DOM shows `grid grid-cols-[repeat(12,…)]` with `col-[…/span_N]` children, + flag any implementation that used a raw `
`, a fixed-width flex row, `Grid`, + or manual spacer columns instead of a `GridLayout` whose `template` matches the child spans. Flag a + `GridLayout` that is not wrapped in a `ResponsiveLayout`, and a full-width padded section (`px-[48/32/16px]`) implemented without a `ResponsiveLayout`. Conversely, flag double-wrapping a component that embeds its own `ResponsiveLayout` (`MainNavigationBar`, `NavigationBar`, `Tabs`). diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js index 708de23e86..f7cec6ab6f 100644 --- a/packages/generate-design-tokens/index.js +++ b/packages/generate-design-tokens/index.js @@ -25,7 +25,7 @@ console.log('Using design tokens from:', DESIGN_TOKENS_FOLDER); const SKINS_FOLDER = path.join(import.meta.dirname, '..', '..', 'src', 'skins'); const CSS_FOLDER = path.join(import.meta.dirname, '..', '..', 'css'); -const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'o2-new', 'telefonica', 'vivo', 'vivo-new', 'tu', 'esimflag']; +const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'telefonica', 'vivo', 'vivo-evolution', 'esimflag']; const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); const toCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); diff --git a/src/__type_tests__/data-attributes-type-test.tsx b/src/__type_tests__/data-attributes-type-test.tsx new file mode 100644 index 0000000000..6b3f7cb17f --- /dev/null +++ b/src/__type_tests__/data-attributes-type-test.tsx @@ -0,0 +1,16 @@ +import type {DataAttributes} from '../utils/types'; + +const validAttrs: DataAttributes = { + testid: 'MyComponent', + custom: 'value', + count: 42, + enabled: true, + // eslint-disable-next-line object-shorthand + undefined: undefined, +}; + +// component-name is allowed +const validAttrsWithComponentName: DataAttributes = { + 'component-name': 'MyComponent', + testid: 'MyComponent', +}; diff --git a/src/accordion.tsx b/src/accordion.tsx index 17b1a16b9c..97c8edd941 100644 --- a/src/accordion.tsx +++ b/src/accordion.tsx @@ -248,7 +248,7 @@ export const AccordionItem = React.forwardRef
) @@ -297,7 +297,7 @@ export const Accordion = ({
{childrenContent.map((child, index) => ( @@ -329,7 +329,7 @@ export const BoxedAccordionItem = React.forwardRef @@ -357,7 +357,7 @@ export const BoxedAccordion = ({ {children} diff --git a/src/align.tsx b/src/align.tsx index 21579180db..95b7901345 100644 --- a/src/align.tsx +++ b/src/align.tsx @@ -16,7 +16,7 @@ type Props = { const Align = ({x = 'start', y = 'start', width, height, children, dataAttributes}: Props): JSX.Element => { return (
{shouldRenderImage ? ( +
{children} {value ? (
{(primaryButton || secondaryButton) && (
1, })} - {...getPrefixedDataAttributes(dataAttributes, 'ButtonLayout')} + {...getPrefixedDataAttributes({testid: 'ButtonLayout', ...dataAttributes})} > {align !== 'right' || numberOfButtons > 1 ? ( <> diff --git a/src/button.tsx b/src/button.tsx index e4fda3157f..009a516857 100644 --- a/src/button.tsx +++ b/src/button.tsx @@ -566,7 +566,7 @@ export const ButtonLink = React.forwardRef< >(({dataAttributes, className, ...props}, ref) => { return ( ( return ( ( return ( ( ({dataAttributes, ...props}, ref) => { return ( {asset && ( diff --git a/src/card-cover.tsx b/src/card-cover.tsx index e8ee49c1ee..c370eb0529 100644 --- a/src/card-cover.tsx +++ b/src/card-cover.tsx @@ -72,7 +72,6 @@ export const CoverCard = React.forwardRef styles.VISIBLE_BULLETS, })} @@ -810,7 +810,6 @@ const BaseCarousel = ({ return (
{items.length > 1 && (withControls ? ( diff --git a/src/checkbox.tsx b/src/checkbox.tsx index 189aeaf5e4..e52b648690 100644 --- a/src/checkbox.tsx +++ b/src/checkbox.tsx @@ -158,7 +158,7 @@ const Checkbox = React.forwardRef(( aria-label={ariaLabel} aria-labelledby={ariaLabel ? undefined : labelId} aria-disabled={disabled} - {...getPrefixedDataAttributes(props.dataAttributes, 'Checkbox')} + {...getPrefixedDataAttributes({testid: 'Checkbox', ...props.dataAttributes})} > {props.render ? ( props.render({ diff --git a/src/chip.tsx b/src/chip.tsx index dc859a093d..3388c673f6 100644 --- a/src/chip.tsx +++ b/src/chip.tsx @@ -84,7 +84,7 @@ const Chip = (props: ChipProps): JSX.Element => { ); - const chipDataAttributes = {'component-name': 'Chip', testid: 'Chip', ...dataAttributes}; + const chipDataAttributes = {testid: 'Chip', ...dataAttributes}; if (onClose) { return ( diff --git a/src/circle.tsx b/src/circle.tsx index 56c3166f32..4871e34c77 100644 --- a/src/circle.tsx +++ b/src/circle.tsx @@ -42,7 +42,7 @@ const Circle = ({ : `center / cover no-repeat ${imageStyle} ${backgroundColor || ''}`, border: borderProp, }} - {...getPrefixedDataAttributes(dataAttributes, 'Circle')} + {...getPrefixedDataAttributes({testid: 'Circle', ...dataAttributes})} > {children}
diff --git a/src/community/advanced-data-card.tsx b/src/community/advanced-data-card.tsx index 5e1ce71e2d..7d51b1c85a 100644 --- a/src/community/advanced-data-card.tsx +++ b/src/community/advanced-data-card.tsx @@ -350,7 +350,7 @@ export const AdvancedDataCard = React.forwardRef diff --git a/src/community/ai-card.tsx b/src/community/ai-card.tsx index 454146f9aa..7a2e62d18d 100644 --- a/src/community/ai-card.tsx +++ b/src/community/ai-card.tsx @@ -191,7 +191,7 @@ const AiCard = ({ }) : undefined } - dataAttributes={{'component-name': 'AiCard', testid: 'AiCard', ...dataAttributes}} + dataAttributes={{testid: 'AiCard', ...dataAttributes}} {...(touchableProps as any)} aria-label={ariaLabel ?? autoAriaLabel} > diff --git a/src/counter.tsx b/src/counter.tsx index a4a983bef9..9e9416c5fc 100644 --- a/src/counter.tsx +++ b/src/counter.tsx @@ -121,7 +121,7 @@ const Counter = ({ return (
( return (
} dataAttributes={{ - 'component-name': 'CreditCardNumberField', testid: 'CreditCardNumberField', ...dataAttributes, }} diff --git a/src/cvv-field.tsx b/src/cvv-field.tsx index 424024314d..9e03d2202d 100644 --- a/src/cvv-field.tsx +++ b/src/cvv-field.tsx @@ -161,7 +161,7 @@ const CvvField = ({ } autoComplete={autoComplete} inputComponent={IntegerInput} - dataAttributes={{'component-name': 'CvvField', testid: 'CvvField', ...dataAttributes}} + dataAttributes={{testid: 'CvvField', ...dataAttributes}} /> ); }; diff --git a/src/date-field.tsx b/src/date-field.tsx index 9b982a57ef..1e9b2a4710 100644 --- a/src/date-field.tsx +++ b/src/date-field.tsx @@ -106,7 +106,7 @@ const DateField = ({
} - dataAttributes={{'component-name': 'DateField', testid: 'DateField', ...dataAttributes}} + dataAttributes={{testid: 'DateField', ...dataAttributes}} /> ); @@ -121,7 +121,7 @@ const DateField = ({ {...fieldProps} optional={optional} isValidDate={(currentDate) => isInRange(getLocalDateString(currentDate.toDate()))} - dataAttributes={{'component-name': 'DateField', testid: 'DateField', ...dataAttributes}} + dataAttributes={{testid: 'DateField', ...dataAttributes}} /> ); diff --git a/src/date-time-field.tsx b/src/date-time-field.tsx index 21040d9444..994bf1fe2b 100644 --- a/src/date-time-field.tsx +++ b/src/date-time-field.tsx @@ -112,7 +112,7 @@ const FormDateField = ({
} - dataAttributes={{'component-name': 'DateTimeField', testid: 'DateTimeField', ...dataAttributes}} + dataAttributes={{testid: 'DateTimeField', ...dataAttributes}} /> ); @@ -129,7 +129,6 @@ const FormDateField = ({ withTime isValidDate={(currentDate) => isInRange(getLocalDateTimeString(currentDate.toDate()))} dataAttributes={{ - 'component-name': 'DateTimeField', testid: 'DateTimeField', ...dataAttributes, }} diff --git a/src/decimal-field.tsx b/src/decimal-field.tsx index 7467647a83..926b220007 100644 --- a/src/decimal-field.tsx +++ b/src/decimal-field.tsx @@ -152,7 +152,7 @@ const DecimalField = ({ {...fieldProps} inputComponent={DecimalInput} inputProps={{maxDecimals}} - dataAttributes={{'component-name': 'DecimalField', testid: 'DecimalField', ...dataAttributes}} + dataAttributes={{testid: 'DecimalField', ...dataAttributes}} /> ); }; diff --git a/src/dialog.tsx b/src/dialog.tsx index 5349c70027..e994dc20fb 100644 --- a/src/dialog.tsx +++ b/src/dialog.tsx @@ -366,7 +366,7 @@ const ModalDialog = (props: ModalDialogProps): JSX.Element => { aria-hidden={isClosing || !isReady} > {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */} -
e.stopPropagation()} data-component-name="Dialog"> +
e.stopPropagation()} data-testid="Dialog">
{ diff --git a/src/drawer.tsx b/src/drawer.tsx index 3a83a57332..5c32b60246 100644 --- a/src/drawer.tsx +++ b/src/drawer.tsx @@ -188,7 +188,7 @@ const Drawer = ({ aria-modal="true" className={styles.drawer} ref={setScrollableParentElement} - {...getPrefixedDataAttributes(dataAttributes, 'Drawer')} + {...getPrefixedDataAttributes({testid: 'Drawer', ...dataAttributes})} > {onDismiss && (
diff --git a/src/email-field.tsx b/src/email-field.tsx index f9560dcde2..0027429658 100644 --- a/src/email-field.tsx +++ b/src/email-field.tsx @@ -68,7 +68,7 @@ const EmailField = ({ type="email" inputMode="email" autoComplete={autoComplete} - dataAttributes={{'component-name': 'EmailField', testid: 'EmailField', ...dataAttributes}} + dataAttributes={{testid: 'EmailField', ...dataAttributes}} /> ); }; diff --git a/src/empty-state.tsx b/src/empty-state.tsx index 616ad2abe4..098769cde5 100644 --- a/src/empty-state.tsx +++ b/src/empty-state.tsx @@ -87,7 +87,7 @@ const EmptyState = ({ })} aria-label={ariaLabel} role="region" - {...getPrefixedDataAttributes(dataAttributes, 'EmptyState')} + {...getPrefixedDataAttributes({testid: 'EmptyState', ...dataAttributes})} >
{ return (
} animateText dataAttributes={{ - 'component-name': 'ErrorFeedbackScreen', testid: 'ErrorFeedbackScreen', ...dataAttributes, }} @@ -368,7 +366,6 @@ export const InfoFeedbackScreen = ({ return ( { return (
{ const assetClassName = withDropZone && isDragActive ? styles.assetScaleActive : ''; return ( - +
{withDropZone && !disabled && ( diff --git a/src/fixed-footer-layout.tsx b/src/fixed-footer-layout.tsx index df91ed3038..d6f81369ba 100644 --- a/src/fixed-footer-layout.tsx +++ b/src/fixed-footer-layout.tsx @@ -209,7 +209,6 @@ const FixedFooterLayout = ({
{hasMultipleFormErrors ? ( diff --git a/src/grid-layout.tsx b/src/grid-layout.tsx index 68d85dfb86..bdb1ce734b 100644 --- a/src/grid-layout.tsx +++ b/src/grid-layout.tsx @@ -81,7 +81,7 @@ const GridLayout = ({ collapseBreakpoint = 'tablet', children, }: Props): JSX.Element => { - const prefixedDataAttributes = getPrefixedDataAttributes(dataAttributes, 'GridLayout'); + const prefixedDataAttributes = getPrefixedDataAttributes({testid: 'GridLayout', ...dataAttributes}); const spanStyles = (n: number) => ({ className: classnames(styles.span, { diff --git a/src/header.tsx b/src/header.tsx index 6c35904f39..867c9f5077 100644 --- a/src/header.tsx +++ b/src/header.tsx @@ -234,7 +234,7 @@ export const HeaderLayout = ({ useSetOverscrollColor(isBrandVariant ? {topColor: vars.colors.backgroundBrandTop} : {}); return ( -
+
(
( return (
); }; diff --git a/src/icon-button.tsx b/src/icon-button.tsx index f97de7198c..c65f92c441 100644 --- a/src/icon-button.tsx +++ b/src/icon-button.tsx @@ -92,7 +92,7 @@ export const RawIconButton = React.forwardRef< ref, trackingEvent, role, - dataAttributes: {'component-name': 'IconButton', testid: 'IconButton', ...dataAttributes}, + dataAttributes: {testid: 'IconButton', ...dataAttributes}, className: classNames( styles.button, styles.iconButtonTokens[buttonTokensKey], @@ -207,7 +207,6 @@ export const InternalToggleIconButton = React.forwardRef< {...props} {...(checked ?? checkedState ? checkedProps : uncheckedProps)} dataAttributes={{ - 'component-name': 'ToggleIconButton', testid: 'ToggleIconButton', ...dataAttributes, }} diff --git a/src/image.tsx b/src/image.tsx index 67fea195fb..9799031fac 100644 --- a/src/image.tsx +++ b/src/image.tsx @@ -322,7 +322,7 @@ const Image = React.forwardRef((props, ref) => { aspectRatio={ratio} width={props.width} height={props.height} - dataAttributes={getPrefixedDataAttributes(props.dataAttributes, 'Image')} + dataAttributes={getPrefixedDataAttributes({testid: 'Image', ...props.dataAttributes})} // @ts-expect-error forceNonCssAspectRatio is intentionally not included in the props type and should only be used for testing purposes forceNonCssAspectRatio={(props as any).forceNonCssAspectRatio} > diff --git a/src/inline.tsx b/src/inline.tsx index f9b01282f1..530d1b6272 100644 --- a/src/inline.tsx +++ b/src/inline.tsx @@ -135,7 +135,7 @@ const Inline = ({ role={role} aria-label={ariaLabel} aria-labelledby={ariaLabel ? undefined : ariaLabelledBy} - {...getPrefixedDataAttributes(dataAttributes, 'Inline')} + {...getPrefixedDataAttributes({testid: 'Inline', ...dataAttributes})} > {React.Children.map(childrenArray, (child, index) => { return ( diff --git a/src/integer-field.tsx b/src/integer-field.tsx index 817a0f4be7..91758d0060 100644 --- a/src/integer-field.tsx +++ b/src/integer-field.tsx @@ -85,7 +85,7 @@ const IntegerField = ({ {...rest} {...fieldProps} inputComponent={IntegerInput} - dataAttributes={{'component-name': 'IntegerField', testid: 'IntegerField', ...dataAttributes}} + dataAttributes={{testid: 'IntegerField', ...dataAttributes}} /> ); }; diff --git a/src/list.tsx b/src/list.tsx index bb741972fe..e6816e1906 100644 --- a/src/list.tsx +++ b/src/list.tsx @@ -754,11 +754,7 @@ const RowContent = React.forwardRef((props, r export const Row = React.forwardRef( ({dataAttributes, role = 'listitem', ...props}, ref) => (
- +
) ); @@ -800,7 +796,7 @@ export const RowList = ({ aria-label={ariaLabel} aria-live={ariaLive} aria-atomic={ariaAtomic} - {...getPrefixedDataAttributes(dataAttributes, 'RowList')} + {...getPrefixedDataAttributes({testid: 'RowList', ...dataAttributes})} > {childrenContent.map((child, index) => ( @@ -861,7 +857,7 @@ export const BoxedRow = React.forwardRef(({dataAt className={styles.boxed} variant={props.variant ?? (props.isInverse ? 'brand' : 'default')} ref={ref} - dataAttributes={{'component-name': 'BoxedRow', testid: 'BoxedRow', ...dataAttributes}} + dataAttributes={{testid: 'BoxedRow', ...dataAttributes}} > @@ -896,7 +892,7 @@ export const BoxedRowList = ({ aria-labelledby={ariaLabelledBy} aria-live={ariaLive} aria-atomic={ariaAtomic} - dataAttributes={{'component-name': 'BoxedRowList', testid: 'BoxedRowList', ...dataAttributes}} + dataAttributes={{testid: 'BoxedRowList', ...dataAttributes}} > {children} diff --git a/src/loading-bar.tsx b/src/loading-bar.tsx index 7eb331b4c7..25abb75c0d 100644 --- a/src/loading-bar.tsx +++ b/src/loading-bar.tsx @@ -14,7 +14,7 @@ const LoadingBar = ({visible, dataAttributes}: Props): JSX.Element => {
diff --git a/src/loading-screen.tsx b/src/loading-screen.tsx index 1d0485504a..e5aa391f1b 100644 --- a/src/loading-screen.tsx +++ b/src/loading-screen.tsx @@ -263,7 +263,7 @@ export const LoadingScreen = React.forwardRef ); @@ -360,7 +360,7 @@ export const BrandLoadingScreen = React.forwardRef & {size: ByBreakpoint} ): JSX.Element => { - const dataAttributes = getPrefixedDataAttributes(props.dataAttributes, 'Logo'); + const dataAttributes = getPrefixedDataAttributes({testid: 'Logo', ...props.dataAttributes}); if (props.to || props.href || props.onPress) { return ; diff --git a/src/menu.tsx b/src/menu.tsx index 13eff215e4..87e4e0d3d6 100644 --- a/src/menu.tsx +++ b/src/menu.tsx @@ -465,7 +465,7 @@ export const Menu = ({ }, [target, isMenuOpen]); return ( -
+
{renderTarget({...targetProps, isMenuOpen})} diff --git a/src/meter.tsx b/src/meter.tsx index db74b3ef38..654101af40 100644 --- a/src/meter.tsx +++ b/src/meter.tsx @@ -315,7 +315,7 @@ const MeterComponent = ({ aria-live="polite" aria-valuetext={valueText} aria-hidden={ariaHidden} - {...getPrefixedDataAttributes(dataAttributes, 'Meter')} + {...getPrefixedDataAttributes({testid: 'Meter', ...dataAttributes})} >
} - dataAttributes={{'component-name': 'MonthField', testid: 'MonthField', ...dataAttributes}} + dataAttributes={{testid: 'MonthField', ...dataAttributes}} /> ); @@ -115,7 +115,7 @@ const DateField = ({ optional={optional} isValidDate={(currentDate) => isInRange(getLocalYearMonthString(currentDate.toDate()))} mode="year-month" - dataAttributes={{'component-name': 'MonthField', testid: 'MonthField', ...dataAttributes}} + dataAttributes={{testid: 'MonthField', ...dataAttributes}} /> ); diff --git a/src/mosaic.tsx b/src/mosaic.tsx index e953650032..07ed5c79d6 100644 --- a/src/mosaic.tsx +++ b/src/mosaic.tsx @@ -83,7 +83,7 @@ export const HorizontalMosaic = ({ ( @@ -195,7 +195,7 @@ export const VerticalMosaic = ({ gap={GRID_GAP} aria-label={ariaLabel} aria-labelledby={ariaLabelledby} - dataAttributes={{'component-name': 'VerticalMosaic', testid: 'VerticalMosaic', ...dataAttributes}} + dataAttributes={{testid: 'vertical-mosaic', ...dataAttributes}} > {pages.map((items, index) => ( diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx index 78b75748f8..9c8318c66f 100644 --- a/src/navigation-bar.tsx +++ b/src/navigation-bar.tsx @@ -53,7 +53,7 @@ const MenuSectionArrow = ({size = 24, color = vars.colors.neutralHigh, style, cl const BurgerMenuIcon = ({isOpen}: {isOpen: boolean}) => { return ( -
+
@@ -254,7 +254,7 @@ export const NavigationBar = ({ topFixed={topFixed} withBorder={withBorder} variant={normalizedVariant} - dataAttributes={{'component-name': 'NavigationBar'}} + dataAttributes={{testid: 'NavigationBar'}} > {topFixed ? ( {content} @@ -1469,7 +1469,7 @@ export const MainNavigationBar = ({ withBorder={withBorder} isBurgerMenuOpen={isBurgerMenuOpen} variant={normalizedVariant} - dataAttributes={{'component-name': 'MainNavigationBar'}} + dataAttributes={{testid: 'MainNavigationBar'}} > {desktopLargeMenu && ( @@ -1599,7 +1599,7 @@ type NavigationBarActionGroupProps = { export const NavigationBarActionGroup = ({children}: NavigationBarActionGroupProps): JSX.Element => { return ( -
+
{children} @@ -1619,7 +1619,7 @@ export const NavigationBarAction = ({children, ...touchableProps}: NavigationBar styles.lineHeightFix, styles.textWrapperVariants[themeVariant] )} - dataAttributes={{'component-name': 'NavigationBarAction'}} + dataAttributes={{testid: 'NavigationBarAction'}} > {React.Children.map(children, (child) => diff --git a/src/navigation-breadcrumbs.tsx b/src/navigation-breadcrumbs.tsx index 9752ae1abd..aadf4bb76c 100644 --- a/src/navigation-breadcrumbs.tsx +++ b/src/navigation-breadcrumbs.tsx @@ -34,7 +34,10 @@ const NavigationBreadcrumbs = ({ 'aria-label': ariaLabel = 'Breadcrumb', }: NavigationBreadcrumbsProps): JSX.Element => { return ( -