Merge pull request #1002 from international-labour-organization/feat/…

…react/972

React: Align Breadcrumb with Twig

.changeset/dull-coats-turn.md

@@ -0,0 +1,5 @@
+---
+"@ilo-org/react": minor
+---
+
+Aligns the Breadcrumb component with the Twig implementation which also fixes several accessibility issues.

packages/react/src/components/Breadcrumb/Breadcrumb.args.ts

@@ -1,11 +1,7 @@
 import { BreadcrumbProps } from "./Breadcrumb.props";
 
 const basic: BreadcrumbProps = {
-  home: {
-    indented: false,
-    label: "Home",
-    url: "/",
-  },
+  buttonLabel: "More Links",
   links: [
     {
       label: "Link One",
@@ -27,11 +23,7 @@ const basic: BreadcrumbProps = {
 };
 
 const fiveLinks: BreadcrumbProps = {
-  home: {
-    indented: false,
-    label: "Home",
-    url: "/",
-  },
+  buttonLabel: "More Links",
   links: [
     {
       label: "Link One",

packages/react/src/components/Breadcrumb/Breadcrumb.props.ts

@@ -1,13 +1,38 @@
-import { LinkProps } from "../LinkList/LinkList.props";
+export interface BreadcrumbItemProps {
+  /**
+   * Optional additional className of the BreadcrumbLink
+   */
+  className?: string;
+
+  /**
+   * Specify the label for this link
+   */
+  label: string;
+
+  /**
+   * Should the label appear as readable text on the screen or an aria-label
+   */
+  labelShown?: boolean;
+
+  /**
+   * Specify the url for this link
+   */
+  url: string;
+}
 
 export interface BreadcrumbProps {
   /**
-   * Specify the HOME link in the Breadcrumb
+   * An additional classname to add to the outer most element of the component
+   */
+  className?: string;
+
+  /**
+   * The accessible label to apply to the ellipsis button that appears when the Breadcrumb is collapsed
    */
-  home: Required<LinkProps>;
+  buttonLabel: string;
 
   /**
    * Specify the links to be displayed in the Breadcrumb
    */
-  links: Required<Array<LinkProps>>;
+  links: BreadcrumbItemProps[];
 }