Breadcrumbs update for mobile, ellipsis button to show all breadcrumbs

src/components/breadcrumbs/_breadcrumbs.hbs

@@ -1,9 +1,9 @@
-<nav aria-label="{{label}}" class="nsw-breadcrumbs">
+<nav aria-label="{{label}}" class="nsw-breadcrumbs js-breadcrumbs">
   <ol>
     {{#each items}}
-    <li>
-      <a href="{{url}}"{{#if @last}} class="current" aria-current="page"{{/if}}>{{text}}</a>
-    </li>
+      <li>
+        <a href="{{url}}"{{#if @last}} class="current" aria-current="page"{{/if}}>{{text}}</a>
+      </li>
     {{/each}}
   </ol>
 </nav>

src/components/breadcrumbs/_breadcrumbs.scss

@@ -8,67 +8,87 @@
     list-style: none;
   }
 
-  li {
+  li:not(:first-child):not(:last-child):not(:nth-last-child(2)):not(.nsw-breadcrumbs__show-more-toggle) {
     display: none;
 
+    @include breakpoint('md') {
+      display: inline-block;
+    }
+  }
+
+  li {
+    display: inline-block;
+
+    &:first-child {
+      &::before {
+        display: none;
+      }
+    }
+
     &::before {
       @include material-icons;
       content: 'keyboard_arrow_right';
-      content: 'keyboard_arrow_right' / '';
       font-size: rem(map-get($nsw-icon-sizes, 20));
       line-height: rem(8px);
       display: inline-block;
       position: relative;
       top: rem(6px);
     }
+  }
 
+  .nsw-breadcrumbs__show-more-toggle {
     @include breakpoint('md') {
-      display: inline;
+      display: none;
     }
 
-    &:nth-last-child(2),
-    &:last-child {
-      display: inline;
-    }
-
-    &:nth-last-child(2) {
-      &::before {
-        display: none;
+    .nsw-breadcrumbs__toggle-button {
+      @include link-button;
+      font-size: var(--nsw-font-size-xs);
+      font-weight: var(--nsw-font-normal);
+      color: var(--nsw-text-dark);
+      text-decoration: none;
+      padding: 0 rem(4px);
+      margin-left: 4px;
+      line-height: 24px;
+      height: 100%;
+      cursor: pointer;
 
-        @include breakpoint('md') {
-          display: inline-block;
-        }
+      .nsw-section--invert & {
+        @include link-light;
+        color: var(--nsw-text-light);
       }
     }
+  }
 
-    &:first-child {
-      &::before {
-        display: none;
+  .nsw-breadcrumbs__show-all {
+    li:not(:first-child):not(:last-child):not(:nth-last-child(2)):not(.nsw-breadcrumbs__show-more-toggle) {
+      display: inline-block;
+    }
 
-        @include breakpoint('md') {
-          display: none;
-        }
-      }
+    .nsw-breadcrumbs__show-more-toggle {
+      display: none;
     }
   }
-
+  
   a {
+    display: inline-block;
+    line-height: 24px;
     font-weight: var(--nsw-font-normal);
 
     &.current {
       text-decoration: none;
       pointer-events: none;
       color: var(--nsw-text-dark);
 
-      .nsw-section--invert & {    
+      .nsw-section--invert & {
         color: var(--nsw-text-light);
       }
     }
   }
 }
 
 @supports (content: 'x' / 'y') {
-  .nsw-breadcrumbs {  
+  .nsw-breadcrumbs {
     li {
       &::before {
         content: 'keyboard_arrow_right' / '';
@@ -78,7 +98,7 @@
 }
 
 @media speech {
-  .nsw-breadcrumbs {  
+  .nsw-breadcrumbs {
     li {
       &::before {
         display: none;

src/components/breadcrumbs/_guidance.hbs

@@ -14,14 +14,16 @@ layout: blank-layout.hbs
 <p><strong>Parent page</strong><br>Starts with the "Home" page and links users to parent-level pages in the IA</p>
 <p><strong>Icon</strong><br>The chevrons between the names shows the visual hierarchy between pages.</p>
 <p><strong>Current page</strong><br>Indicates the current page the user is viewing.</p>
+<p><strong>Ellipsis</strong><br>Provides a clickable option to expand and reveal the full breadcrumb path for mobile users.</p>
 
 <h3>When to avoid</h3>
 <p>Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.</p>
-<p>Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus.</p>
-<p>If you’re using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.</p>
+<p>Breadcrumb navigation should be regarded as an extra feature and shouldn't replace effective primary navigation menus.</p>
+<p>If you're using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.</p>
 
-<h2>How this component works</h2>
-<p>For mobile resolutions (under 768px), the breadcrumb shows a link to the immediate parent and current page only.</p>
+<h3>Mobile usability</h3>
+<p>For mobile resolutions (under 768px), the breadcrumb displays a link to the immediate parent and current page only, with a clickable ellipsis allowing users to reveal the full breadcrumb path for breadcrumb lists that contain more than 3 items (including "Home").</p>
+<p>The ellipsis button is injected into the list of breadcrumb items by adding <code>js-breadcrumbs</code> class into the nav element that wraps the breadcrumb items.</p>
 
 <h2>Accessibility</h2>
 <p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>

src/components/breadcrumbs/blank.hbs

@@ -1,14 +1,24 @@
 ---
 title: Breadcrumbs
 width: narrow
-model: json/breadcrumbs.json
+model: 
+  breadcrumbs-1: json/breadcrumbs-1.json
+  breadcrumbs-2: json/breadcrumbs-2.json
 page: true
 ---
 
 {{#>_layout-container}}
-{{>_breadcrumbs model}}
+{{>_breadcrumbs model.breadcrumbs-1}}
 {{/_layout-container}}
 
 {{#>_layout-container brand-dark="true" invert="true"}}
-{{>_breadcrumbs model}}
+{{>_breadcrumbs model.breadcrumbs-1}}
+{{/_layout-container}}
+
+{{#>_layout-container}}
+{{>_breadcrumbs model.breadcrumbs-2}}
+{{/_layout-container}}
+
+{{#>_layout-container brand-dark="true" invert="true"}}
+{{>_breadcrumbs model.breadcrumbs-2}}
 {{/_layout-container}}

src/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,41 @@
+class Breadcrumbs {
+  constructor(element) {
+    this.element = element
+    this.allBreadcrumbs = this.element.querySelector('.nsw-breadcrumbs ol')
+    this.secondBreadcrumb = this.element.querySelector('.js-breadcrumbs li:nth-child(2)')
+    this.condition = false
+  }
+
+  init() {
+    if (this.allBreadcrumbs.children.length > 3) {
+      this.createToggle()
+    }
+
+    this.element.addEventListener('click', (event) => {
+      event.preventDefault()
+      this.allBreadcrumbs.classList.toggle('nsw-breadcrumbs__show-all')
+    })
+  }
+
+  createToggle() {
+    const toggle = this.constructor.createElement('li', ['nsw-breadcrumbs__show-more-toggle'])
+    toggle.innerHTML = '<button aria-label="Show more breadcrumbs" class="nsw-breadcrumbs__toggle-button" type="button">…</button>'
+
+    this.allBreadcrumbs.insertBefore(toggle, this.secondBreadcrumb)
+  }
+
+  static createElement(tag, classes = [], attributes = {}) {
+    const element = document.createElement(tag)
+    if (classes.length > 0) {
+      element.classList.add(...classes)
+    }
+
+    Object.entries(attributes).forEach(([key, value]) => {
+      element.setAttribute(key, value)
+    })
+
+    return element
+  }
+}
+
+export default Breadcrumbs

src/components/breadcrumbs/index.hbs

@@ -6,9 +6,25 @@ directory: breadcrumbs
 intro: Breadcrumbs help users to understand where they are within a website’s structure.
 theme: true
 figma: https://www.figma.com/file/PVrERKnckLTlJSPk12gbtS/NSW-Digital-Design-System?node-id=21298%3A25012
-model: json/breadcrumbs.json
+model:
+  breadcrumbs-2: json/breadcrumbs-2.json
 meta-description: Breadcrumbs help users to understand where they are within a website’s structure.
 meta-index: true
 ---
 
-{{#>_docs-example}}{{>_breadcrumbs model}}{{/_docs-example}}
+<div class="nsw-tabs js-tabs">
+  <ul class="nsw-tabs__list">
+    <li><a href="#breadcrumbs-brand-light" class="js-tabs-fixed">Brand Light</a></li>
+    <li><a href="#breadcrumbs-brand-dark" class="js-tabs-fixed">Brand Dark</a></li>
+  </ul>
+  <section id="breadcrumbs-brand-light" class="nsw-tabs__content nsw-tabs__content--side-flush">
+{{#>_docs-example}}
+{{>_breadcrumbs model.breadcrumbs-2}}
+{{/_docs-example}}
+  </section>
+  <section id="breadcrumbs-brand-dark" class="nsw-tabs__content nsw-tabs__content--side-flush">
+{{#>_docs-example brand-dark="true" invert="true"}}
+{{>_breadcrumbs model.breadcrumbs-2}}
+{{/_docs-example}}   
+  </section>
+</div>

src/components/breadcrumbs/json/breadcrumbs.json → src/components/breadcrumbs/json/breadcrumbs-1.json

@@ -12,10 +12,6 @@
     {
       "text": "NSW Digital Design System",
       "url": "#"
-    },
-    {
-      "text": "Content design",
-      "url": "#"
     }
   ]
 }

src/components/breadcrumbs/json/breadcrumbs-2.json

@@ -0,0 +1,29 @@
+{
+  "label": "Breadcrumbs",
+  "items": [
+    {
+      "text": "Home",
+      "url": "#"
+    },
+    {
+      "text": "About DPC",
+      "url": "#"
+    },
+    {
+      "text": "Assurance",
+      "url": "#"
+    },
+    {
+      "text": "Strategy",
+      "url": "#"
+    },
+    {
+      "text": "NSW Digital Design System",
+      "url": "#"
+    },
+    {
+      "text": "Content design",
+      "url": "#"
+    }
+  ]
+}

src/components/breadcrumbs/theme.hbs

@@ -1,16 +1,26 @@
 ---
 title: Breadcrumbs
 width: narrow
-model: json/breadcrumbs.json
+model: 
+  breadcrumbs-1: json/breadcrumbs-1.json
+  breadcrumbs-2: json/breadcrumbs-2.json
 page: true
 ---
 
 {{#>_theme}}
 {{#>_layout-container}}
-{{>_breadcrumbs model}}
+{{>_breadcrumbs model.breadcrumbs-1}}
 {{/_layout-container}}
 
 {{#>_layout-container brand-dark="true" invert="true"}}
-{{>_breadcrumbs model}}
+{{>_breadcrumbs model.breadcrumbs-1}}
+{{/_layout-container}}
+
+{{#>_layout-container}}
+{{>_breadcrumbs model.breadcrumbs-2}}
+{{/_layout-container}}
+
+{{#>_layout-container brand-dark="true" invert="true"}}
+{{>_breadcrumbs model.breadcrumbs-2}}
 {{/_layout-container}}
 {{/_theme}}

src/components/footer/test.hbs

@@ -3,7 +3,7 @@ title: Footer
 page: true
 model:
   nav: ../../components/main-nav/json/main-nav-digital-nsw.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   footer: ../../components/footer/json/footer-onecx.json
 ---
 

src/docs/docs.scss

@@ -307,10 +307,18 @@ $header-height: 151px;
     &.nsw-docs__example--dark {
       background-color: var(--nsw-grey-01);
     }
-
+    
     &.nsw-docs__example--light {
       background-color: var(--nsw-grey-04);
     }
+
+    &.nsw-docs__example--brand-dark {
+      background-color: var(--nsw-brand-dark);
+    }
+
+    &.nsw-docs__example--brand-light {
+      background-color: var(--nsw-brand-light);
+    }
   }
 
   &__iframe {
@@ -671,6 +679,7 @@ $header-height: 151px;
   justify-content: flex-end;
   align-items: center;
   gap: 0.5rem;
+  margin: 16px 0;
 
   &__list {
     list-style: none;

src/global/handlebars/layouts/partials/_docs-example.hbs

@@ -1,4 +1,4 @@
-<div class="nsw-docs__example{{#if light}} nsw-docs__example--light{{/if}}{{#if dark}} nsw-docs__example--dark{{/if}}{{#if invert}} nsw-section--invert{{/if}}{{#if hidden}} nsw-docs__example--hidden{{/if}}{{#if simple}} nsw-docs__example--simple{{/if}}{{#if separated}} nsw-m-top-sm{{/if}}"{{#if disable-links}} data-disable-links{{/if}}>
+<div class="nsw-docs__example{{#if brand-dark}} nsw-docs__example--brand-dark{{/if}}{{#if brand-light}} nsw-docs__example--brand-light{{/if}}{{#if light}} nsw-docs__example--light{{/if}}{{#if dark}} nsw-docs__example--dark{{/if}}{{#if invert}} nsw-section--invert{{/if}}{{#if hidden}} nsw-docs__example--hidden{{/if}}{{#if simple}} nsw-docs__example--simple{{/if}}{{#if separated}} nsw-m-top-sm{{/if}}"{{#if disable-links}} data-disable-links{{/if}}>
   <div class="nsw-docs__component">
 {{#unless hidden}}
     {{> @partial-block }}

src/global/handlebars/layouts/partials/_theme.hbs

@@ -1,13 +1,6 @@
 <header class="nsw-header">
   <div class="nsw-header__container">
     <div class="nsw-header__inner">
-      <div class="nsw-header__main">
-        <div class="nsw-header__waratah">
-          <br>
-          <br>
-          <br>
-        </div>
-      </div>
       <div class="nsw-color-swatches js-color-swatches">
         <legend class="nsw-color-swatches__legend" aria-live="polite" aria-atomic="true"><span class="nsw-color-swatches__color js-color-swatches__color">Blue 01</span></legend>
         <select class="js-color-swatches__select" aria-label="Select a color"></select>