Updates breadcrumbs ellipsis logic and updates documentation surround…

…ing the feature updates

src/components/breadcrumbs/_breadcrumbs.scss

@@ -71,7 +71,7 @@
 
   a {
     font-weight: var(--nsw-font-normal);
-    padding: rem(3px) 0;
+    padding: rem(2px) 0;
 
     &.current {
       text-decoration: 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-2.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

@@ -3,12 +3,13 @@ class Breadcrumbs {
     this.element = element
     this.allBreadcrumbs = this.element.querySelector('.nsw-breadcrumbs ol')
     this.secondBreadcrumb = this.element.querySelector('.js-breadcrumbs li:nth-child(2)')
-    this.breadcrumbs = document.querySelectorAll('.js-breadcrumbs li')
     this.condition = false
   }
 
   init() {
-    this.createToggle()
+    if (this.allBreadcrumbs.children.length > 3) {
+      this.createToggle()
+    }
 
     this.element.addEventListener('click', (event) => {
       event.preventDefault()

src/components/breadcrumbs/index.hbs

@@ -2,13 +2,50 @@
 title: Breadcrumbs
 width: narrow
 tabs: true
+core: true
 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-1: json/breadcrumbs-1.json
+  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}}
+<h3>Breadcrumbs with 3 or fewer items</h3>
+<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-1}}
+{{/_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-1}}
+{{/_docs-example}}   
+  </section>
+</div>
+
+<h3>Breadcrumbs with 4 or more items</h3>
+<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/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>

src/templates/content/article-loader.hbs

@@ -6,7 +6,7 @@ directory: Article
 model:
   nav-basic: ../../components/main-nav/json/main-nav.json
   nav-mega: ../../components/main-nav/json/main-nav-mega.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   tag: ../../components/tag/json/tag-link.json
   link-list: ../../components/link-list/json/link-list-3.json
   card-blog-1: ../../components/card/json/card-blog-1.json

src/templates/content/article.hbs

@@ -6,7 +6,7 @@ directory: Article
 model:
   nav-basic: ../../components/main-nav/json/main-nav.json
   nav-mega: ../../components/main-nav/json/main-nav-mega.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   tag: ../../components/tag/json/tag-link.json
   link-list: ../../components/link-list/json/link-list-3.json
   card-blog-1: ../../components/card/json/card-blog-1.json

src/templates/content/form.hbs

@@ -5,7 +5,7 @@ page: true
 model:
   nav-basic: ../../components/main-nav/json/main-nav.json
   nav-mega: ../../components/main-nav/json/main-nav-mega.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   card-media-1: ../../components/card/json/card-media-1.json
   card-media-2: ../../components/card/json/card-media-2.json
   card-media-3: ../../components/card/json/card-media-3.json

src/templates/content/side-nav.hbs

@@ -4,7 +4,7 @@ order: 21
 page: true
 model:
   nav-basic: ../../components/main-nav/json/main-nav.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   side-nav: ../../components/side-nav/json/side-nav-level-2.json
   in-page-nav: ../../components/in-page-nav/json/in-page-nav-2.json
   accordion: ../../components/accordion/json/accordion-3.json

src/templates/homepage/featured-list.hbs

@@ -4,7 +4,7 @@ order: 12
 page: true
 model:
   nav: ../../components/main-nav/json/main-nav-customer-service.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   footer: ../../components/footer/json/footer.json
 ---
 

src/templates/homepage/hero-banner.hbs

@@ -4,7 +4,7 @@ order: 11
 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.json
 ---
 

src/templates/homepage/hero-search.hbs

@@ -5,7 +5,7 @@ page: true
 model:
   nav: ../../components/main-nav/json/main-nav-nsw.json
   hero-search: ../../components/hero-search/json/hero-search.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   footer: ../../components/footer/json/footer.json
 ---
 

src/templates/theming/content-only.hbs

@@ -4,7 +4,7 @@ order: 20
 page: true
 model:
   nav-basic: ../../components/main-nav/json/main-nav.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   side-nav: ../../components/side-nav/json/side-nav-level-2.json
   in-page-nav: ../../components/in-page-nav/json/in-page-nav-2.json
   accordion: ../../components/accordion/json/accordion-3.json

src/templates/theming/full-page.hbs

@@ -4,7 +4,7 @@ order: 20
 page: true
 model:
   nav-basic: ../../components/main-nav/json/main-nav.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   side-nav: ../../components/side-nav/json/side-nav-level-2.json
   in-page-nav: ../../components/in-page-nav/json/in-page-nav-2.json
   accordion: ../../components/accordion/json/accordion-3.json

src/templates/theming/partial.hbs

@@ -4,7 +4,7 @@ order: 20
 page: true
 model:
   nav-basic: ../../components/main-nav/json/main-nav.json
-  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
+  breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs-1.json
   side-nav: ../../components/side-nav/json/side-nav-level-2.json
   in-page-nav: ../../components/in-page-nav/json/in-page-nav-2.json
   accordion: ../../components/accordion/json/accordion-3.json