dxc-technology · raquelarrojo · Jun 21, 2024 · Jun 17, 2024 · Jun 17, 2024 · Jun 18, 2024
diff --git a/website/pages/components/breadcrumbs/specifications.tsx b/website/pages/components/breadcrumbs/specifications.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import BreadcrumbsPageLayout from "../../../screens/components/breadcrumbs/BreadcrumbsPageLayout";
+import BreadcrumbsSpecsPage from "../../../screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage";
+
+const Specifications = () => {
+  return (
+    <>
+      <Head>
+        <title>Breadcrumbs Specs — Halstack Design System</title>
+      </Head>
+      <BreadcrumbsSpecsPage></BreadcrumbsSpecsPage>
+    </>
+  );
+};
+
+Specifications.getLayout = function getLayout(page: ReactElement) {
+  return <BreadcrumbsPageLayout>{page}</BreadcrumbsPageLayout>;
+};
+
+export default Specifications;
diff --git a/website/pages/components/breadcrumbs/usage.tsx b/website/pages/components/breadcrumbs/usage.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import BreadcrumbsPageLayout from "../../../screens/components/breadcrumbs/BreadcrumbsPageLayout";
+import BreadcrumbsUsagePage from "../../../screens/components/breadcrumbs/usage/BreadcrumbsUsagePage";
+
+const Usage = () => {
+  return (
+    <>
+      <Head>
+        <title>Breadcrumbs Usage — Halstack Design System</title>
+      </Head>
+      <BreadcrumbsUsagePage></BreadcrumbsUsagePage>
+    </>
+  );
+};
+
+Usage.getLayout = function getLayout(page: ReactElement) {
+  return <BreadcrumbsPageLayout>{page}</BreadcrumbsPageLayout>;
+};
+
+export default Usage;
diff --git a/website/screens/common/componentsList.json b/website/screens/common/componentsList.json
@@ -21,7 +21,7 @@
   {
     "label": "Breadcrumbs",
     "path": "/components/breadcrumbs",
-    "status": "experimental"
+    "status": "new"
   },
   {
     "label": "Bulleted List",

diff --git a/website/screens/components/accordion/specs/AccordionSpecsPage.tsx b/website/screens/components/accordion/specs/AccordionSpecsPage.tsx
@@ -54,7 +54,7 @@ const sections = [
               </DxcBulletedList.Item>
               <DxcBulletedList.Item>Title</DxcBulletedList.Item>
               <DxcBulletedList.Item>
-                Helper text<em>(Optional)</em>
+                Helper text <em>(Optional)</em>
               </DxcBulletedList.Item>
               <DxcBulletedList.Item>
                 Caret icon <em>(Expand/collapse)</em>
@@ -233,7 +233,7 @@ const sections = [
                 <td>
                   <Code>font-family-sans</Code>
                 </td>
-                <td>&#39;Open Sans&#39;, sans-serif;</td>
+                <td>&#39;Open Sans&#39;, sans-serif</td>
               </tr>
               <tr>
                 <td>
@@ -273,7 +273,7 @@ const sections = [
                 <td>
                   <Code>font-sans</Code>
                 </td>
-                <td>&#39;Open Sans&#39;, sans-serif;</td>
+                <td>&#39;Open Sans&#39;, sans-serif</td>
               </tr>
               <tr>
                 <td>

diff --git a/website/screens/components/alert/specs/AlertSpecsPage.tsx b/website/screens/components/alert/specs/AlertSpecsPage.tsx
@@ -278,7 +278,7 @@ const sections = [
                 <td>
                   <Code>font-family-sans</Code>
                 </td>
-                <td>&#39;Open Sans&#39;, sans-serif;</td>
+                <td>&#39;Open Sans&#39;, sans-serif</td>
               </tr>
               <tr>
                 <td>
@@ -308,7 +308,7 @@ const sections = [
                 <td>
                   <Code>font-family-sans</Code>
                 </td>
-                <td>&#39;Open Sans&#39;, sans-serif;</td>
+                <td>&#39;Open Sans&#39;, sans-serif</td>
               </tr>
               <tr>
                 <td>

diff --git a/website/screens/components/badge/specs/BadgeSpecsPage.tsx b/website/screens/components/badge/specs/BadgeSpecsPage.tsx
@@ -1,4 +1,8 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import {
+  DxcBulletedList,
+  DxcFlex,
+  DxcParagraph,
+} from "@dxc-technology/halstack-react";
 import Image from "@/common/Image";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
@@ -33,7 +37,7 @@ const sections = [
     title: "Design tokens",
     content: (
       <DxcParagraph>
-        This component does not currently have design tokens.
+        This component currently has no design tokens.
       </DxcParagraph>
     ),
   },

diff --git a/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx b/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx
@@ -8,7 +8,12 @@ const BreadcrumbsPageHeading = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const tabs = [{ label: "Code", path: "/components/breadcrumbs" }];
+  const tabs = [
+    { label: "Code", path: "/components/breadcrumbs" },
+    { label: "Usage", path: "/components/breadcrumbs/usage" },
+    { label: "Specifications", path: "/components/breadcrumbs/specifications" },
+  ];
+
   return (
     <DxcFlex direction="column" gap="3rem">
       <PageHeading>

diff --git a/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx b/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx
@@ -0,0 +1,59 @@
+import {
+  DxcBulletedList,
+  DxcFlex,
+  DxcParagraph,
+} from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Figure from "@/common/Figure";
+import specs from "./images/breadcrumbs_specs.png";
+import anatomy from "./images/breadcrumbs_anatomy.png";
+
+const sections = [
+  {
+    title: "Specifications",
+    content: (
+      <Figure caption="Breadcrumbs design specifications">
+        <Image src={specs} alt="Breadcrumbs design specifications" />
+      </Figure>
+    ),
+  },
+  {
+    title: "Anatomy",
+    content: (
+      <>
+        <Image src={anatomy} alt="Breadcrumbs anatomy" />
+        <DxcBulletedList type="number">
+          <DxcBulletedList.Item>Breadcrumbs item</DxcBulletedList.Item>
+          <DxcBulletedList.Item>Divider</DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
+  {
+    title: "Design tokens",
+    content: (
+      <DxcParagraph>
+        This component currently has no design tokens.
+      </DxcParagraph>
+    ),
+  },
+];
+
+const BreadcrumbsSpecsPage = () => {
+  return (
+    <DxcFlex direction="column" gap="4rem">
+      <QuickNavContainerLayout>
+        <QuickNavContainer
+          sections={sections}
+          startHeadingLevel={2}
+        ></QuickNavContainer>
+      </QuickNavContainerLayout>
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx" />
+    </DxcFlex>
+  );
+};
+
+export default BreadcrumbsSpecsPage;
diff --git a/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png b/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png
diff --git a/website/screens/components/breadcrumbs/specs/images/breadcrumbs_specs.png b/website/screens/components/breadcrumbs/specs/images/breadcrumbs_specs.png
diff --git a/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx b/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx
@@ -0,0 +1,117 @@
+import {
+  DxcBulletedList,
+  DxcFlex,
+  DxcParagraph,
+} from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import collapsed from "./examples/collapsed";
+import noRoot from "./examples/noRoot";
+
+const sections = [
+  {
+    title: "Usage",
+    content: (
+      <DxcParagraph>
+        Breadcrumbs are a navigational component used in user interfaces to
+        improve the user experience by providing a clear path to previous steps
+        or navigational levels. They typically display the user's current
+        location within the hierarchical structure of an application, allowing
+        for easy navigation and improved orientation.
+      </DxcParagraph>
+    ),
+    subSections: [
+      {
+        title: "Do's",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Use breadcrumbs when there are more than two navigational levels
+              within the same hierarchy to help users easily navigate and
+              understand their position.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Ensure each label of the Breadcrumbs items is informative yet
+              brief, providing users with a clear understanding of where each
+              link will take them without overwhelming them with too much text.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Always position breadcrumbs in the top left corner of the
+              interface.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+      {
+        title: "Don'ts",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Avoid overloading the component. Including too many items in the
+              breadcrumbs increases the cognitive load of the interface and can
+              confuse users. We recommend using the collapsed version of the
+              component when there are more than four items.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Don't use breadcrumbs to replace primary navigation or links, as
+              they are intended to serve as a supplementary navigation aid.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Refrain from using breadcrumbs to represent the sequence of steps
+              to complete an action. Remember that it is a navigation component
+              through levels with an established hierarchy.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+    ],
+  },
+  {
+    title: "Collapsed Breadcrumbs",
+    content: (
+      <>
+        <DxcParagraph>
+          When there are more than four items in the breadcrumbs, the component
+          will collapse the items in a dropdown menu to avoid overloading the
+          interface. Users can click on the dropdown to view the hidden items
+          and navigate to the desired level.
+        </DxcParagraph>
+        <DxcParagraph>
+          Although this can be configurable, we highly encourage our users to
+          stick with the collapsing at five or more items. This was not a random
+          decision, we carefully selected it to ensure the component does not
+          overload the interface and remains an effective navigational aid.
+        </DxcParagraph>
+        <Example example={collapsed} />
+        <DxcParagraph>
+          Depending on the amount of available space, the collapsed breadcrumbs
+          can be synthesized more by removing the root element and displaying
+          only the collapsed dropdown and the current page.
+        </DxcParagraph>
+        <Example example={noRoot} />
+        <DxcParagraph>
+          Be mindful of your user's cognitive load and collapse breadcrumbs
+          appropriately.
+        </DxcParagraph>
+      </>
+    ),
+  },
+];
+
+const BreadcrumbsUsagePage = () => {
+  return (
+    <DxcFlex direction="column" gap="4rem">
+      <QuickNavContainerLayout>
+        <QuickNavContainer
+          sections={sections}
+          startHeadingLevel={2}
+        ></QuickNavContainer>
+      </QuickNavContainerLayout>
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx" />
+    </DxcFlex>
+  );
+};
+
+export default BreadcrumbsUsagePage;
diff --git a/website/screens/components/breadcrumbs/usage/examples/collapsed.tsx b/website/screens/components/breadcrumbs/usage/examples/collapsed.tsx
@@ -0,0 +1,24 @@
+import { DxcBreadcrumbs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  const items = [
+    { label: "Components" },
+    { label: "Select" },
+    { label: "Specifications" },
+    { label: "Design Tokens" },
+    { label: "Typography" }
+  ];
+
+  return (
+    <DxcInset space="2rem">
+      <DxcBreadcrumbs items={items} />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcBreadcrumbs,
+  DxcInset,
+};
+
+export default { code, scope };
diff --git a/website/screens/components/breadcrumbs/usage/examples/noRoot.tsx b/website/screens/components/breadcrumbs/usage/examples/noRoot.tsx
@@ -0,0 +1,24 @@
+import { DxcBreadcrumbs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  const items = [
+    { label: "Components" },
+    { label: "Select" },
+    { label: "Specifications" },
+    { label: "Design Tokens" },
+    { label: "Color" }
+  ];
+
+  return (
+    <DxcInset space="2rem">
+      <DxcBreadcrumbs items={items} showRoot={false} />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcBreadcrumbs,
+  DxcInset,
+};
+
+export default { code, scope };