Create utility list component files and add reference to their js and…

… scss files

src/components/utility-list/_guidance.hbs

@@ -0,0 +1,4 @@
+---
+title: Utility list
+layout: blank-layout.hbs
+---

src/components/utility-list/_utility-list.hbs

@@ -0,0 +1,28 @@
+<div class="nsw-utility-list js-utility-list{{#if theme}} nsw-utility-list--{{theme}}{{/if}}{{#if align}} nsw-utility-list--{{align}}{{/if}}">{{#if title}}
+  <div class="nsw-utility-list__title">{{title}}</div>{{/if}}
+  <ul>{{#if copy}}
+    <li class="nsw-utility-list__item js-copy-clipboard">
+      <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">link</span>
+      Copy link
+    </li>{{/if}}{{#if print}}
+    <li class="nsw-utility-list__item js-print-page">
+      <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">print</span>
+      Print this page
+    </li>{{/if}}{{#if download}}
+    <li class="nsw-utility-list__item js-print-page">
+      <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">download</span>
+      Download as PDF
+    </li>{{/if}}{{#if share}}
+    <li class="nsw-utility-list__item js-share" aria-controls="social-share-{{id}}" data-title="Social Sharing">
+      <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">share</span>
+      <span data-anchor>Share this page</span>
+      <div id="social-share-{{id}}" class="nsw-toggletip__element nsw-toggletip__element--{{#if theme}}light{{/if}}{{#unless theme}}dark{{/unless}}">
+      {{#each social}}
+        <a class="nsw-icon-button" data-social="{{@key}}" {{#each data}}{{@key}}="{{this}}"{{/each}}>
+          {{{this.icon}}}
+        </a>
+      {{/each}}
+      </div>
+    </li>{{/if}}
+  </ul>
+</div>

src/components/utility-list/_utility-list.scss

@@ -0,0 +1,163 @@
+.nsw-utility-list {
+  @include component-spacing();
+
+  &__title {
+    @include font-size('lg');
+    font-weight: var(--nsw-font-bold);
+    padding-bottom: rem(16px);
+
+    @include breakpoint('md') {
+      padding-bottom: rem(24px);
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  &__item {
+    margin: 0;
+    padding: rem(16px);
+    display: flex;
+    gap: $grid-gutters;
+    align-items: center;
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: var(--nsw-font-bold);
+    border-bottom: 1px solid var(--nsw-grey-04);
+    color: var(--nsw-brand-dark);
+
+    @include font-size('sm');
+
+    &:hover {
+      @include nsw-hover;
+      outline-width: 0;
+    }
+
+    &:focus {
+      @include nsw-focus;
+    }
+
+    &:last-child {
+      border-bottom: unset;
+    }
+
+    .nsw-section--invert & {    
+      color: var(--nsw-text-light);
+    }
+
+    svg {
+      width: rem(24px);
+      height: rem(24px);
+
+      path {
+        fill: var(--nsw-white);
+      }
+    }
+  }
+
+  .nsw-toggletip {
+    border-bottom: unset;
+
+    &__header {
+      display: none;
+    }
+
+    &__content {
+      display: flex;
+      gap: $grid-gutters;
+      padding: rem(16px);
+
+      a {
+        display: flex;
+        padding: rem(8px);
+        border-radius: var(--nsw-border-radius);
+        text-decoration: none;
+      }
+
+      span:not(.nsw-toggletip__element .nsw-material-icons) {
+        color: var(--nsw-brand-dark);
+      }
+    }
+  }
+
+  &--dark {
+    .nsw-utility-list__item {
+      background-color: rgba(var(--nsw-palette-blue-01-rgb), 1);
+      color: var(--nsw-text-light);
+
+      span:not(.nsw-toggletip__element .nsw-material-icons) {
+        color: var(--nsw-text-light);
+      }
+
+      svg {  
+        path {
+          fill: var(--nsw-brand-dark);
+        }
+      }
+
+      &:hover {
+        background-color: rgba(var(--nsw-palette-blue-01-rgb), 0.8);
+      }
+
+      &:focus {
+        outline: solid 3px var(--nsw-focus);
+        outline-offset: 0;
+      }
+
+      &:visited {
+        color: var(--nsw-text-visited);
+      }
+    }
+  }
+
+  &--light {
+    background-color: var(--nsw-brand-light);
+    color: var(--nsw-text-dark);
+
+    .nsw-utility-list__item {
+      border-color: var(--nsw-off-white);
+
+      svg {  
+        path {
+          fill: var(--nsw-brand-dark);
+        }
+      }
+    }
+  }
+
+  &--off-white {
+    background-color: var(--nsw-off-white);
+
+    .nsw-utility-list__item {
+      svg {  
+        path {
+          fill: var(--nsw-brand-dark);
+        }
+      }
+
+      span {
+        color: var(--nsw-brand-dark);
+      }
+    }
+  }
+
+  &--horizontal {
+    @include breakpoint('md') {
+      display: flex;
+
+      ul {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      li {
+        flex: 1 1 auto;
+        border-bottom: unset;
+      }
+    }
+  }
+}

src/components/utility-list/blank.hbs

@@ -0,0 +1,18 @@
+---
+title: Utility list
+width: narrow
+page: true
+model: ../../components/utility-list/json/utility-list.json
+---
+
+{{#>_layout-container}}
+
+{{#each model}}
+  {{#each this}}
+    {{#each this}}
+      {{>_utility-list}}
+    {{/each}}
+  {{/each}}
+{{/each}}
+
+{{/_layout-container}}

src/components/utility-list/index.hbs

@@ -0,0 +1,33 @@
+---
+title: Utility list
+width: narrow
+tabs: true
+directory: utility-list
+intro:
+model: ../../components/utility-list/json/utility-list.json
+meta-description: 
+meta-index: true
+---
+
+<div class="nsw-tabs js-tabs">
+  <ul class="nsw-tabs__list">
+    <li><a href="#off-white" class="js-tabs-fixed">Off-White</a></li>
+    <li><a href="#white" class="js-tabs-fixed">White</a></li>
+    <li><a href="#dark" class="js-tabs-fixed">Brand Dark</a></li>
+    <li><a href="#light" class="js-tabs-fixed">Brand Light</a></li>
+  </ul>
+
+{{#each model}}
+  <section id="{{@key}}" class="nsw-tabs__content nsw-tabs__content--side-flush">
+  {{#each this}}
+    <h3>{{@key}}</h3>
+    {{#each this}}
+{{#>_docs-example separated=true}}
+{{>_utility-list}}
+{{/_docs-example}}
+    {{/each}}
+  {{/each}}
+  </section>
+{{/each}}
+
+</div>