feat(breadcrumbs): align with Fusion DS

Aligns Breadcrumbs component to Fusion DS. Updates styles using fusion-tokens and adds new `inverse`
prop. Deprecates `isDarkBackground` prop from Breadcrumbs and `hasFocus`, `underline`, `linkSize`
and `bold` props from Crumb.

Author: nuria1110

playwright/components/link/index.ts

@@ -1,6 +1,6 @@
 import type { Page } from "@playwright/test";
 import { link } from "..";
-import { SKIP_LINK } from "./locators";
+import { SKIP_LINK, LINK } from "./locators";
 
 // component preview locators
 export const linkChildren = (page: Page) => {
@@ -12,3 +12,5 @@ export const skipLink = (page: Page) => {
 };
 
 export const relLink = (page: Page) => link(page).locator("a");
+
+export const linkComponent = (page: Page) => page.locator(LINK);

playwright/components/link/locators.ts

@@ -1,3 +1,3 @@
 // component preview locators
-/* eslint-disable import/prefer-default-export */
 export const SKIP_LINK = '[data-element="skip-link"]';
+export const LINK = '[data-component="link"]';

src/components/breadcrumbs/__internal__/breadcrumbs.context.tsx

@@ -1,7 +1,7 @@
 import createStrictContext from "../../../__internal__/utils/createStrictContext";
 
 export type BreadcrumbsContextType = {
-  isDarkBackground: boolean;
+  inverse?: boolean;
 };
 
 const [BreadcrumbsProvider, useBreadcrumbsContext] =
@@ -10,7 +10,7 @@ const [BreadcrumbsProvider, useBreadcrumbsContext] =
     errorMessage:
       "Carbon Breadcrumbs: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
     defaultValue: {
-      isDarkBackground: false,
+      inverse: false,
     },
   });
 

src/components/breadcrumbs/breadcrumbs-interaction.stories.tsx

@@ -1,64 +1,34 @@
 import React from "react";
-import { Breadcrumbs, BreadcrumbsProps } from ".";
-import { Crumb, CrumbProps } from "./crumb";
+import { Meta, StoryObj } from "@storybook/react";
 
-export default {
+import { Breadcrumbs, Crumb } from ".";
+import generateStyledSystemProps from "../../../.storybook/utils/styled-system-props";
+
+const styledSystemProps = generateStyledSystemProps({
+  spacing: true,
+});
+
+const meta: Meta<typeof Breadcrumbs> = {
   title: "Breadcrumbs/Test",
-  includeStories: ["DefaultCrumb", "WhenFocusedCrumbBecomesCurrent"],
-  parameters: {
-    info: { disable: true },
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
+  component: Breadcrumbs,
+  subcomponents: { Crumb },
   argTypes: {
-    isCurrent: {
-      control: {
-        type: "boolean",
-      },
-    },
-    href: {
-      control: {
-        type: "text",
-      },
-    },
-    isDarkBackground: {
-      control: {
-        type: "boolean",
-      },
-    },
+    ...styledSystemProps,
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
   },
 };
 
-export const Default = (props: Partial<BreadcrumbsProps>) => {
-  return (
-    <Breadcrumbs {...props}>
-      <Crumb href="#">Breadcrumb 1</Crumb>
-      <Crumb href="#">Breadcrumb 2</Crumb>
-      <Crumb href="#">Breadcrumb 3</Crumb>
-      <Crumb href="#" isCurrent>
-        Current Page
-      </Crumb>
-    </Breadcrumbs>
-  );
-};
-
-export const DefaultCrumb = (props: Partial<CrumbProps>) => {
-  return (
-    <Breadcrumbs>
-      <Crumb href="#" {...props}>
-        Breadcrumb 1
-      </Crumb>
-    </Breadcrumbs>
-  );
-};
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
 
-export const WhenFocusedCrumbBecomesCurrent = () => {
+export const WhenFocusedCrumbBecomesCurrent: Story = ({ ...args }) => {
   const [current, setCurrent] = React.useState(false);
 
   return (
     <>
-      <Breadcrumbs>
+      <Breadcrumbs {...args}>
         <Crumb href="#bar" onClick={() => setCurrent(true)} isCurrent={current}>
           Crumb{current ? "" : " not"} current
         </Crumb>
@@ -68,7 +38,4 @@ export const WhenFocusedCrumbBecomesCurrent = () => {
     </>
   );
 };
-
-Default.storyName = "default";
-DefaultCrumb.storyName = "single crumb";
 WhenFocusedCrumbBecomesCurrent.storyName = "when focused crumb becomes current";

src/components/breadcrumbs/breadcrumbs-test.stories.tsx

@@ -4,23 +4,42 @@ import tagComponent, { TagProps } from "../../__internal__/utils/helpers/tags";
 import StyledBreadcrumbs from "./breadcrumbs.style";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { BreadcrumbsProvider } from "./__internal__/breadcrumbs.context";
+import Logger from "../../__internal__/utils/logger";
+
+let deprecatedIsDarkBackgroundWarn = false;
 
 export interface BreadcrumbsProps extends TagProps, SpaceProps {
   /** Child crumbs to display */
   children: React.ReactNode;
-  /** Sets the colour styling when component is rendered on a dark background */
+  /**
+   * Sets the colour styling when component is rendered on a dark background
+   * @deprecated The 'isDarkBackground' prop in Breadcrumbs is deprecated and will soon be removed. Please use the 'inverse' prop instead.
+   */
   isDarkBackground?: boolean;
+  /** Sets the colour styling when component is to be rendered with inverse styles */
+  inverse?: boolean;
 }
 
 export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
-  ({ children, isDarkBackground = false, ...rest }: BreadcrumbsProps, ref) => {
-    const l = useLocale();
+  (
+    { children, isDarkBackground = false, inverse, ...rest }: BreadcrumbsProps,
+    ref,
+  ) => {
+    const locale = useLocale();
+
+    if (isDarkBackground && !deprecatedIsDarkBackgroundWarn) {
+      Logger.deprecate(
+        "The 'isDarkBackground' prop in Breadcrumbs is deprecated and will soon be removed. Please use the 'inverse' prop instead.",
+      );
+      deprecatedIsDarkBackgroundWarn = true;
+    }
+
     return (
-      <BreadcrumbsProvider value={{ isDarkBackground }}>
+      <BreadcrumbsProvider value={{ inverse: inverse ?? isDarkBackground }}>
         <StyledBreadcrumbs
           ref={ref}
           role="navigation"
-          aria-label={l.breadcrumbs.ariaLabel()}
+          aria-label={locale.breadcrumbs.ariaLabel()}
           {...rest}
           {...tagComponent("breadcrumbs", rest)}
         >

src/components/breadcrumbs/breadcrumbs.component.tsx

@@ -1,7 +1,6 @@
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import TranslationKeysTable from "../../../.storybook/utils/translation-keys-table";
 
-import * as CrumbStories from "./crumb/crumb.stories.tsx";
 import * as BreadcrumbsStories from "./breadcrumbs.stories.tsx";
 
 <Meta of={BreadcrumbsStories} />
@@ -10,7 +9,7 @@ import * as BreadcrumbsStories from "./breadcrumbs.stories.tsx";
 
 <a
   target="_blank"
-  href="https://zeroheight.com/2ccf2b601/p/32c1b6-breadcrumbs/b/87b2c7"
+  href="https://zeroheight.com/35ee2cc26/v/latest/p/081839-breadcrumbs"
   style={{ color: "#007E45", fontWeight: "bold", textDecoration: "underline" }}
   rel="noreferrer"
 >
@@ -40,22 +39,16 @@ import { Breadcrumbs, Crumb } from "carbon-react/lib/components/breadcrumbs";
 
 <Canvas of={BreadcrumbsStories.Default} />
 
-### On Dark Background
+### Inverse
 
-You can use the `isDarkBackground` prop to change the colour of the breadcrumbs when they are on a dark background.
+You can use the `inverse` prop to render the Breadcrumbs with inverse styling.
 
-<Canvas of={BreadcrumbsStories.OnDarkBackground} />
+<Canvas of={BreadcrumbsStories.Inverse} />
 
 ## Props
 
-### Breadcrumbs
-
 <ArgTypes of={BreadcrumbsStories} />
 
-### Crumb
-
-<ArgTypes of={CrumbStories} />
-
 ## Translation keys
 
 The following keys are available to override the translations for this component by passing in a custom locale object to the