feat: breadcrumbs component

apps/docs/content/3-components/2-library/breadcrumbs.mdx

@@ -7,23 +7,90 @@ libraries:
     link: '?path=/docs/navigation-breadcrumbs--docs'
     status: 'stable'
   - platform: 'global'
-    status: 'considering'
+    status: 'beta'
   - platform: 'react'
-    status: 'considering'
+    status: 'beta'
 ---
 
 # Breadcrumbs
 
 ## Variants
 
+### Default
+
+<ComponentContainer>
+  <Breadcrumbs>
+    <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+    <BreadcrumbEllipsis />
+    <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
+    <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink>
+  </Breadcrumbs>
+</ComponentContainer>
+
+<Tabs id="tab1">
+  <TabList>
+    <TabItem value="tab11" checked>HTML</TabItem>
+    <TabItem value="tab12">Macro</TabItem>
+    <TabItem value="tab13">React</TabItem>
+  </TabList>
+  <TabPanel value="tab11">
+  ```html
+   <nav aria-label="Breadcrumbs" class="gi-breadcrumbs">
+      <ol role="list">
+        <li role="listitem">
+          <a href="/home" class="gi-link gi-link-inherit" aria-label="Home page">Home</a>
+        </li>
+            <li role="listitem">
+              <div aria-hidden="true">
+                  <span class="material-symbols-outlined gi-gray-700">more_horiz</span>
+              </div>
+            </li>
+        <li role="listitem">
+          <a href="/docs" class="gi-link gi-link-inherit" aria-label="Documentation page">Documentation</a>
+        </li>
+        <li role="listitem">
+          <a href="/travel" class="gi-link gi-link-inherit" aria-label="Travel page" aria-current="page">Travel abroad</a>
+        </li>
+      </ol>
+    </nav>
+  ```
+  </TabPanel>
+  <TabPanel value="tab12">
+    ```html
+      {{govieBreadcrumbs({
+        navItems: [
+          { "label": "Home", "href": "/home" },
+          { "ellipsis": true },
+          { "label": "Documentation", "href": "/docs" },
+          { "label": "Travel abroad", "href": "/travel", "currentPage": true }
+        ]})
+      }}
+    ```
+    </TabPanel>
+  <TabPanel value="tab13">
+  ```react
+    import { Breadcrumbs, BreadcrumbLink, BreadcrumbEllipsis, BreadcrumbCurrentLink } from '@govie-ds/react';
+
+    <Breadcrumbs>
+      <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+      <BreadcrumbEllipsis />
+      <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
+      <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink>
+    </Breadcrumbs>
+
+```
+</TabPanel>
+</Tabs>
+
 ## Usage
 
 ### Best Practices
 
-### When to use this component
 
-### When not to use this component
+## When to use this component
+Use breadcrumbs to help users understand their location within a website or application hierarchy and navigate back to higher levels easily.
 
-## Status
+## When not to use this component
+Avoid breadcrumbs on websites or applications with a flat structure, where there is no clear hierarchy or depth (e.g., single-page applications or sites with only top-level pages)
 
-<ComponentStatusBlock componentId="breadcrumbs" />
+<ComponentStatusBlock componentId="breadcrumbs" />

apps/docs/src/components/document/common/mdx.tsx

@@ -1,6 +1,10 @@
 import {
   Alert,
   Blockquote,
+  Breadcrumbs,
+  BreadcrumbCurrentLink,
+  BreadcrumbEllipsis,
+  BreadcrumbLink,
   Button,
   Card,
   CheckboxesGroup,
@@ -222,6 +226,10 @@ const documentComponents: MDXComponents = {
   ),
   Stack: (props) => <Stack {...props} />,
   Pagination: (props) => <Pagination {...props} />,
+  Breadcrumbs: (props) => <Breadcrumbs {...props} />,
+  BreadcrumbCurrentLink: (props) => <BreadcrumbCurrentLink {...props} />,
+  BreadcrumbEllipsis: (props) => <BreadcrumbEllipsis {...props} />,
+  BreadcrumbLink: (props) => <BreadcrumbLink {...props} />,
   PhaseBanner: (props) => <PhaseBanner {...props} />,
   Blockquote: (props) => <Blockquote {...props} />,
   ComponentContainer: (props) => (

examples/nextjs/src/app/page.tsx

@@ -1,5 +1,5 @@
-"use client";
-import { ComboBoxProps, CookieBannerProps } from "@/props";
+'use client';
+import { ComboBoxProps, CookieBannerProps } from '@/props';
 import {
   Container,
   Footer,
@@ -21,37 +21,41 @@ import {
   Chip,
   Stack,
   Alert,
+  Breadcrumbs,
   Toast,
+  BreadcrumbCurrentLink,
+  BreadcrumbEllipsis,
+  BreadcrumbLink,
   SummaryListRow,
   SummaryList,
   SummaryListAction,
   SummaryListValue,
-} from "@govie-ds/react";
+} from '@govie-ds/react';
 
 export default function Home() {
   return (
     <>
       <Header
-        logo={{ href: "/" }}
-        tools={{ search: { action: "/search-page" } }}
+        logo={{ href: '/' }}
+        tools={{ search: { action: '/search-page' } }}
         navLinks={[
           {
-            href: "#",
-            label: "News",
+            href: '#',
+            label: 'News',
           },
           {
-            href: "#",
-            label: "Departments",
+            href: '#',
+            label: 'Departments',
           },
           {
-            href: "#",
-            label: "Services",
+            href: '#',
+            label: 'Services',
           },
         ]}
         languages={[
           {
-            href: "#",
-            label: "Gaeilge",
+            href: '#',
+            label: 'Gaeilge',
           },
         ]}
       />
@@ -64,6 +68,12 @@ export default function Home() {
           trigger={<Button>Trigger Toast</Button>}
         />
         <div className="flex flex-col gap-4 my-4">
+          <Breadcrumbs>
+            <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+            <BreadcrumbEllipsis />
+            <BreadcrumbLink href="/documentation">Documentation</BreadcrumbLink>
+            <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
+          </Breadcrumbs>
           <Heading>Heading</Heading>
           <PhaseBanner level="alpha">This is a pre-release version</PhaseBanner>
           <Link
@@ -77,8 +87,8 @@ export default function Home() {
           <Icon icon="thumb_up" />
           <IconButton
             icon={{
-              icon: "send",
-              ariaLabel: "Send",
+              icon: 'send',
+              ariaLabel: 'Send',
             }}
           />
           <Combobox {...ComboBoxProps} />
@@ -96,37 +106,37 @@ export default function Home() {
           <hr />
           <RadiosGroup
             title={{
-              value: "Where do you live?",
+              value: 'Where do you live?',
               asHeading: {
-                size: "md",
-                as: "h2",
+                size: 'md',
+                as: 'h2',
               },
             }}
             items={[
               {
-                label: "England",
-                value: "england",
+                label: 'England',
+                value: 'england',
               },
               {
-                label: "Scotland",
-                value: "scotland",
+                label: 'Scotland',
+                value: 'scotland',
               },
               {
-                label: "Ireland",
-                value: "ireland",
+                label: 'Ireland',
+                value: 'ireland',
               },
             ]}
             groupId="uniqueId"
           />
           <TextArea
             hint={{
-              text: "Hint: This is a helpful hint.",
+              text: 'Hint: This is a helpful hint.',
             }}
             id="textarea-id"
             maxChars={50}
             label={{
-              text: "Textarea text",
-              htmlFor: "textarea-id",
+              text: 'Textarea text',
+              htmlFor: 'textarea-id',
             }}
           />
 
@@ -145,11 +155,11 @@ export default function Home() {
               <Button>Primary action</Button>
             </div>
           </Modal>
-          <List items={["Item 1", "Item 2", "Item 3"]} type={TypeEnum.Bullet} />
+          <List items={['Item 1', 'Item 2', 'Item 3']} type={TypeEnum.Bullet} />
           <Chip label="Chip" onClose={() => null} />
           <div className="gi-h-[300px] gi-bg-gray-50 gi-overflow-auto gi-p-2">
             <Stack
-              direction={{ sm: "column", base: "row" }}
+              direction={{ sm: 'column', base: 'row' }}
               itemsAlignment="start"
               itemsDistribution="start"
               gap={5}
@@ -173,7 +183,9 @@ export default function Home() {
           <SummaryList>
             <SummaryListRow label="Name">
               <SummaryListValue>John Smith</SummaryListValue>
-              <SummaryListAction href="/change-name">Change name</SummaryListAction>
+              <SummaryListAction href="/change-name">
+                Change name
+              </SummaryListAction>
             </SummaryListRow>
             <SummaryListRow label="Date of Birth">
               <SummaryListValue>8 November 1982</SummaryListValue>
@@ -183,10 +195,10 @@ export default function Home() {
             </SummaryListRow>
             <SummaryListRow label="Address">
               <SummaryListValue>
-                72 Guild Street 
-                <br/>
+                72 Guild Street
+                <br />
                 London
-                <br/>
+                <br />
                 SE23 6FH
               </SummaryListValue>
               <SummaryListAction href="/change-address">

examples/wagtail/core/jinja/home_page.jinja

@@ -20,6 +20,7 @@
 {% from 'combo-box/combo-box.html' import govieComboBox %}
 {% from 'alert/alert.html' import govieAlert %}
 {% from 'toast/toast.html' import govieToast %}
+{% from 'breadcrumbs/breadcrumbs.html' import govieBreadcrumbs %}
 {% from 'summary-list/summary-list.html' import govieSummaryList %}
 {% from 'list/list.html' import govieList %}
 {% from 'pagination/pagination.html' import goviePagination %}
@@ -53,6 +54,17 @@
 
   <hr />
 
+  <h2>Breadcrumbs</h2>
+    {{ govieBreadcrumbs({ "navItems": [
+        { "label": "Home", "href": "/" },
+        { "ellipsis": true },
+        { "label": "Travel", "href": "/travel" },
+        { "label": "Documentation", "href": "/docs", "currentPage": true }
+    ]}) }}
+  <br />
+
+  <hr />
+
   {{ govieCookieBanner(cookieBannerProps) }}
 
   <h2>Paragraph (Global)</h2>

packages/design/tailwind/css/components.css

@@ -911,3 +911,32 @@ input[type='file' i] {
 }
 /* End of Pagination */
 
+/* Breadcrumbs */
+.gi-breadcrumbs {
+  @apply gi-flex gi-items-center;
+}
+
+.gi-breadcrumbs > ol {
+  @apply gi-inline-flex gi-list-none gi-gap-7;
+}
+
+.gi-breadcrumbs > ol > :not([hidden]) ~ :not([hidden]) {
+  @apply gi-mx-0;
+}
+
+.gi-breadcrumbs > ol > li {
+  @apply gi-relative;
+}
+
+.gi-breadcrumbs > ol > li:not(:first-child)::before {
+  @apply gi-block
+    gi-absolute
+    gi-bottom-0
+    gi-left-[-17px]
+    gi-text-gray-500
+    gi-font-bold
+    gi-text-sm;
+  content: '/';
+}
+
+/* End of Breadcrumbs */

packages/design/tailwind/css/typography.css

@@ -164,21 +164,28 @@
   @apply gi-decoration-xs
   gi-underline
   gi-underline-offset-[0.2em]
-  gi-text-blue-700
-  hover:gi-text-blue-800
-  visited:gi-text-purple-700
-  hover:gi-decoration-lg
+  gi-text-blue-700;
+}
+
+.gi-link:not([aria-current='page']) {
+  @apply hover:gi-decoration-lg
   focus:gi-no-underline
   focus:gi-rounded-sm
-  focus:gi-text-blue-800
   focus:gi-shadow-[0_0_0_2px_var(--gieds-color-gray-950),0_0_0_5px_var(--gieds-color-yellow-400)]
   focus-visible:gi-shadow-[0_0_0_2px_var(--gieds-color-gray-950),0_0_0_5px_var(--gieds-color-yellow-400)]
-  focus-visible:gi-text-blue-800
   focus-visible:gi-no-underline
   focus-visible:gi-rounded-sm
   focus-visible:gi-outline-none;
 }
 
+.gi-link[aria-current='page'] {
+  @apply gi-text-gray-700 gi-pointer-events-none gi-no-underline focus-visible:gi-outline-none focus-visible:gi-shadow-none;
+}
+
+.gi-link:not(.gi-link-inherit) {
+  @apply hover:gi-text-blue-800 visited:gi-text-purple-700 focus:gi-text-blue-800 focus-visible:gi-text-blue-800;
+}
+
 .gi-link-sm {
   @apply gi-text-sm;
 }