Updates component name to Support list and updates documentation

src/components/acknowledgement-list/_guidance.hbs → src/components/support-list/_guidance.hbs

@@ -1,5 +1,5 @@
 ---
-title: Acknowledgements list
+title: Support list
 layout: blank-layout.hbs
 ---
 
@@ -8,33 +8,46 @@ layout: blank-layout.hbs
      focusable="false" aria-hidden="true">info</span>
   <div class="nsw-in-page-alert__content">
     <h4>Brand requirements</h4>
-    <p>Elements required for NSW branding include the use and implementation of descriptors and logos. View the <a href="https://branding.nsw.gov.au" target="_blank">Sponsorship and Partnership Brand Guidelines</a> for full requirements specific to your brand classification.</p>
+    <p>Elements required for NSW branding include the use and implementation of descriptors and logos. View the <a href="https://branding.nsw.gov.au" target="_blank">Sponsorship and Partnership Brand Guidelines</a> for full requirements specific to your brand classification category.</p>
   </div>
 </div>
 
 <h2 id="usage">Usage</h2>
-<p>Use when highlighting NSW Government and external organisations that have generously provided support including sponsorship, partnership, or funding.</p>
+<p>Use when highlighting NSW Government and external organisations that have provided sponsorship and partnership support.</p>
 
-<h2 id="nsw-government-waratah-logo">NSW Government Waratah logo</h2>
-<p>Each brand classification has specific requirements for the inclusion of the NSW Government Waratah logo.</p>
+<h3 id="nsw-government-waratah-logo">NSW Government Waratah logo</h3>
+<p>Under the NSW Government Brand Framework, all brand categories include specific requirements for the usage of the NSW Government Waratah logo.</p>
 <p>When the NSW Government logo is displayed next to another logo or Masterbrand descriptor, it should be vertically centered and separated by a minimum distance of 40px.</p>
 
-<h3 id="masterbrand-or-co-brand">Masterbrand or Co-brand</h3>
-<p>Do not require the Waratah logo as it's already included in the header. Use a 'NSW Government' text label as the first element, on a separate line, before any Masterbrand descriptor.</p>
+<figure class="nsw-media nsw-media--transparent nsw-m-bottom-xs">
+  <img src="/assets/images/support-list-logo-dimensions.png" alt="Masterbrand sponsorship and partnership acknowledgment example layout">
+</figure>
 
-<h3 id="endorsed-independent-stand-alone">Endorsed, Independent and Stand-alone</h3>
-<p>In cases where the NSW Government Waratah is not included in the header, position as the first element among the support logos.</p>
+<div class="nsw-grid">
+  <div class="nsw-col nsw-col-sm-6">
+    <figure class="nsw-media nsw-media--transparent nsw-m-bottom-xs">
+      <h4>Masterbrand or Co-brand</h4><p>Do not require the NSW Government Waratah logo as it's already included in the header. Use a 'NSW Government' descriptor heading instead as the first element, on a separate line, before any Masterbrand descriptor.</p>
+      <img class="nsw-p-top-md" src="/assets/images/support-list-standard-waratah-requirements.png" alt="Endorsed exmaple with logo coupled in header">
+    </figure>
+  </div>
+  <div class="nsw-col nsw-col-sm-6">
+    <figure class="nsw-media nsw-media--transparent nsw-m-bottom-xs">
+      <h4>Endorsed, Independent and Stand-alone</h4><p>In cases where the NSW Government Waratah logo is not included in the header, position it as the first element among the support logos.</p><br />
+      <img class="nsw-p-top-md" src="/assets/images/support-list-decoupled-waratah-requirements.png" alt="Endorsed exmaple with logo decoupled in footer">
+    </figure>
+  </div>
+</div>
 
-<h3 id="sizing-master-brand">Sizing</h3>
+<h4 id="sizing-master-brand">Sizing</h4>
 <p>The NSW Government Waratah logo should be 76px in height on large screens (≥ 992px), and 48px in height on small screens (< 991px) and should never be smaller than the support logos.</p>
 
-<h2 id="masterbrand-descriptors">Masterbrand descriptors</h3>
+<h3 id="masterbrand-descriptors">Masterbrand descriptors</h3>
 <p>Use Masterbrand descriptors when Masterbrand agencies need to be recognised, as text-only links.</p>
-<p>In cases where the NSW Government Waratah logo is not used in the support section, display a 'NSW Government' text label instead.</p>
+<p>In cases where the NSW Government Waratah logo is not used in the support section, display a 'NSW Government' descriptor heading instead.</p>
 
-<h2 id="support-logos">Support logos</h2>
+<h3 id="support-logos">Support logos</h3>
 
-<h3 id="arrangement">Arrangement</h3>
+<h4 id="arrangement">Arrangement</h4>
 <p>Order is based on hierarchy of the NSW Government Brand Framework:</p>
 <ol>
   <li>Masterbrand (used as a text-only link descriptor)</li>
@@ -47,7 +60,7 @@ layout: blank-layout.hbs
 <p>The arrangement of logos follows the hierarchy of the NSW Government Brand Framework, however when necessary, they can be re-ordered  based on the scale of funding or contribution.</p>
 <p>For more information on support logo arrangement requirements for your brand classification view the <a href="https://branding.nsw.gov.au/" target="_blank">Sponsorship and Partnership Brand Guidelines</a>.</p>
 
-<h3 id="sizing-support">Sizing</h3>
+<h4 id="sizing-support">Sizing</h4>
 <p>The support logos should be 76px in height on large screens (≥ 992px), and 48px in height on small screens (< 991px).</p>
 
 <h2>Accessibility</h2>

src/components/acknowledgement-list/_acknowledgement-list.hbs → src/components/support-list/_support-list.hbs

@@ -1,11 +1,11 @@
-<div class="nsw-acknowledgement-list">
-    <h4 class="nsw-acknowledgement-list__header">
+<div class="nsw-support-list">
+    <h4 class="nsw-support-list__header">
         {{#if title}}{{title}}{{else}}Acknowledgements{{/if}}
     </h4>
-    <div {{#if gov-departments.length}}class="nsw-acknowledgement-list__container"{{else}}class="nsw-acknowledgement-list__container nsw-acknowledgement-list__container-no-text"{{/if}}>
-      <div {{#if gov-departments.length}}class="nsw-acknowledgement-list__gov-departments"{{else}}class="nsw-acknowledgement-list__gov-departments__empty"{{/if}}>
+    <div {{#if gov-departments.length}}class="nsw-support-list__container"{{else}}class="nsw-support-list__container nsw-support-list__container-no-text"{{/if}}>
+      <div {{#if gov-departments.length}}class="nsw-support-list__gov-departments"{{else}}class="nsw-support-list__gov-departments__empty"{{/if}}>
         {{#if includeWaratah}}
-          <div aria-label="NSW Government waratah logo" class="nsw-acknowledgement-list__waratah">
+          <div aria-label="NSW Government waratah logo" class="nsw-support-list__waratah">
             <svg role="img" aria-hidden="true" viewBox="0 0 259 280" fill="none" xmlns="http://www.w3.org/2000/svg">
               <title>NSW Government waratah logo</title>
               <path class="hide waratah-logo-text" fill-rule="evenodd" clip-rule="evenodd" d="M24.208 270.207h-5.045v-4.277l11.15.054v13.676H26.08v-2.491c-.266.278-.553.556-.86.833-.673.585-1.49 1.07-2.433 1.434-.96.373-2.143.564-3.513.564-2.33 0-4.385-.539-6.109-1.6-1.727-1.065-3.073-2.594-4.007-4.538-.926-1.927-1.395-4.231-1.395-6.85 0-2.657.494-4.994 1.47-6.946.971-1.96 2.363-3.498 4.132-4.571 1.768-1.065 3.849-1.604 6.183-1.604 1.515 0 2.915.245 4.156.725 1.255.485 2.36 1.157 3.273 1.985a9.61 9.61 0 0 1 2.192 2.852 8.196 8.196 0 0 1 .872 3.319l.021.435h-6.038l-.062-.339a5.22 5.22 0 0 0-.814-1.981 4.562 4.562 0 0 0-1.537-1.43c-.614-.352-1.345-.531-2.175-.531-1.005 0-1.931.261-2.741.775-.806.51-1.458 1.351-1.935 2.495-.486 1.169-.731 2.74-.731 4.679 0 1.579.162 2.897.482 3.925.311 1.011.739 1.819 1.266 2.403.523.581 1.117.991 1.773 1.219a6.036 6.036 0 0 0 2.089.369c.669 0 1.27-.112 1.79-.328.523-.224.98-.514 1.354-.866.377-.356.676-.746.884-1.152.216-.41.349-.816.399-1.21l.14-1.028Zm20.878-16.312c2.354 0 4.435.534 6.179 1.587 1.752 1.061 3.13 2.59 4.086 4.546.947 1.935 1.428 4.281 1.428 6.967 0 2.648-.473 4.969-1.412 6.9-.946 1.948-2.317 3.469-4.073 4.521-1.744 1.053-3.837 1.583-6.212 1.583-2.396 0-4.502-.534-6.254-1.583-1.753-1.044-3.135-2.557-4.099-4.505-.947-1.927-1.428-4.252-1.428-6.912 0-2.673.486-5.015 1.449-6.954.968-1.956 2.355-3.486 4.12-4.551 1.764-1.061 3.853-1.599 6.216-1.599Zm0 21.185c1.117 0 2.093-.265 2.898-.787.802-.523 1.433-1.372 1.881-2.516.453-1.185.686-2.772.686-4.712 0-1.993-.237-3.618-.698-4.832-.444-1.181-1.08-2.056-1.885-2.603-.814-.543-1.782-.82-2.878-.82-1.1 0-2.072.277-2.886.82-.81.543-1.453 1.422-1.906 2.611-.47 1.223-.706 2.843-.706 4.82 0 1.944.237 3.531.702 4.712.452 1.148 1.092 1.997 1.902 2.515.81.527 1.781.792 2.89.792Zm23.764-2.93-6.162-17.829H57.09l8.654 25.251h6.195l8.73-25.251h-5.607L68.85 272.15Zm30.312-2.827H88.863v5.206l12.043.016v5.027H83.103v-25.251h17.632l-.016 4.99H88.892v5.089h10.27v4.923Zm22.482-1.529c.685-.613 1.246-1.401 1.678-2.341.419-.933.635-2.081.635-3.419 0-1.497-.311-2.835-.93-3.983-.619-1.169-1.599-2.093-2.919-2.756-1.3-.647-2.973-.974-4.975-.974h-10.738v25.243h5.759v-9.404h4.24l3.991 9.404h6.046l-4.651-10.456c.673-.357 1.3-.8 1.864-1.314Zm-3.513-5.64c0 .999-.336 1.79-1.025 2.428-.69.63-1.649.949-2.857.949h-4.095v-6.606h4.456c1.038 0 1.873.286 2.545.875.657.576.976 1.347.976 2.354Zm15.159-7.833 10.527 15.23v-15.23h5.776v25.251h-5.086l-10.98-15.86v15.86h-5.759v-25.251h5.522Zm33.949 16.461-5.29-16.461h-7.894v25.251h5.809v-16.266l5.124 16.266h4.485l5.162-16.357v16.357h5.826v-25.251h-7.878l-5.344 16.461Zm33.727-1.459h-10.298v5.206l12.046.016v5.027h-17.806v-25.251h17.636l-.021 4.99h-11.818v5.089h10.261v4.923Zm21.494.228-10.523-15.23h-5.527v25.251h5.756v-15.86l10.979 15.86h5.087v-25.251h-5.772v15.23Zm15.586-10.004h-7.388v-5.226h20.402v5.226h-7.217v20.025h-5.797v-20.025Z" fill="#002664"/>
@@ -18,7 +18,7 @@
         {{#if gov-departments}}
           <div>
             {{#if includeWaratah.length}}{{else}}<p>NSW Government</p>{{/if}}
-            <div class="nsw-acknowledgement-list__gov-departments__labels">
+            <div class="nsw-support-list__gov-departments__labels">
               {{#each gov-departments}}
                 <a {{#if url}}href="{{url}}"{{else}}href="#"{{/if}} {{#if alt}}alt="{{alt}}"{{else}}alt="{{name}}"{{/if}} target="_blank">{{name}}</a>
               {{/each}}
@@ -27,9 +27,9 @@
         {{/if}}
       </div>
       {{#if logos}}
-        <div class="nsw-acknowledgement-list__logo-grid">
+        <div class="nsw-support-list__logo-grid">
           {{#each logos}}
-            <img role="img" src="{{url}}" {{#if alt}}alt="{{alt}}"{{/if}} class="nsw-acknowledgement-list__logo-grid__item">
+            <img role="img" src="{{url}}" {{#if alt}}alt="{{alt}}"{{/if}} class="nsw-support-list__logo-grid__item">
           {{/each}}
         </div>
       {{/if}}

src/components/acknowledgement-list/_acknowledgement-list.scss → src/components/support-list/_support-list.scss

@@ -1,4 +1,4 @@
-.nsw-acknowledgement-list {
+.nsw-support-list {
   margin: rem(20px);
 
   @include breakpoint($nsw-desktop-breakpoint) {

src/components/support-list/blank.hbs

@@ -0,0 +1,21 @@
+---
+title: Support list
+width: wide
+model:
+  list-1: ../../components/support-list/json/support-list-1.json
+  list-2: ../../components/support-list/json/support-list-2.json
+  list-3: ../../components/support-list/json/support-list-3.json
+page: true
+---
+
+{{#>_layout-container}}
+{{>_support-list model.list-1 includeWaratah="true" }}
+{{>_support-list model.list-2 }}
+{{>_support-list model.list-3 includeWaratah="true" }}
+{{/_layout-container}}
+
+{{#>_layout-container brand-dark="true" invert="true"}}
+{{>_support-list model.list-1 includeWaratah="true" }}
+{{>_support-list model.list-2 }}
+{{>_support-list model.list-3 includeWaratah="true" }}
+{{/_layout-container}}

src/components/support-list/index.hbs

@@ -0,0 +1,30 @@
+---
+title: Support list
+width: wide
+tabs: true
+directory: support-list
+intro: Recognising sponsorship and partnership support from the NSW Government and external organisations.
+theme: true
+figma: https://www.figma.com/design/PVrERKnckLTlJSPk12gbtS/NSW-Digital-Design-System?node-id=18830-13455
+meta-description: Highlights NSW Government and external organisations that have provided support including sponsorship, partnership, or funding.
+meta-index: true
+model:
+  list-1: ../../components/support-list/json/support-list-1.json
+  list-2: ../../components/support-list/json/support-list-2.json
+  list-3: ../../components/support-list/json/support-list-3.json
+---
+
+<h3>Masterbrand descriptors</h3>
+{{#>_docs-example}}
+{{>_support-list model.list-1 includeWaratah="true"}}
+{{/_docs-example}}
+
+<h3>Masterbrand descriptors with label</h3>
+{{#>_docs-example}}
+{{>_support-list model.list-2 }}
+{{/_docs-example}}
+
+<h3>Support logos</h3>
+{{#>_docs-example}}
+{{>_support-list model.list-3 includeWaratah="true" }}
+{{/_docs-example}}

src/components/acknowledgement-list/json/acknowledgement-list-1.json → src/components/support-list/json/support-list-1.json

@@ -24,19 +24,19 @@
   ],
   "logos": [
     {
-      "url": "/assets/images/acknowledgement-logo.png",
+      "url": "/assets/images/support-list-logo.png",
       "alt": "Logo 1"
     },
     {
-      "url": "/assets/images/acknowledgement-logo.png",
+      "url": "/assets/images/support-list-logo.png",
       "alt": "Logo 2"
     },
     {
-      "url": "/assets/images/acknowledgement-logo.png",
+      "url": "/assets/images/support-list-logo.png",
       "alt": "Logo 3"
     },
     {
-      "url": "/assets/images/acknowledgement-logo.png",
+      "url": "/assets/images/support-list-logo.png",
       "alt": "Logo 4"
     }
   ]

src/components/acknowledgement-list/json/acknowledgement-list-2.json → src/components/support-list/json/support-list-2.json

@@ -24,19 +24,19 @@
   ],
   "logos": [
     {
-      "url": "/assets/images/acknowledgement-logo.png",
+      "url": "/assets/images/support-list-logo.png",
       "alt": "Logo 1"
     },
     {
-      "url": "/assets/images/acknowledgement-logo.png",
+      "url": "/assets/images/support-list-logo.png",
       "alt": "Logo 2"
     },
     {
-      "url": "/assets/images/acknowledgement-logo.png",
+      "url": "/assets/images/support-list-logo.png",
       "alt": "Logo 3"
     },
     {
-      "url": "/assets/images/acknowledgement-logo.png",
+      "url": "/assets/images/support-list-logo.png",
       "alt": "Logo 4"
     }
   ]

src/components/support-list/json/support-list-3.json

@@ -0,0 +1,21 @@
+{
+  "title": "Major sponsors",
+  "logos": [
+    {
+      "url": "/assets/images/support-list-logo.png",
+      "alt": "Logo 1"
+    },
+    {
+      "url": "/assets/images/support-list-logo.png",
+      "alt": "Logo 2"
+    },
+    {
+      "url": "/assets/images/support-list-logo.png",
+      "alt": "Logo 3"
+    },
+    {
+      "url": "/assets/images/support-list-logo.png",
+      "alt": "Logo 4"
+    }
+  ]
+}

src/components/support-list/theme.hbs

@@ -0,0 +1,23 @@
+---
+title: Support list
+width: wide
+model:
+  list-1: ../../components/support-list/json/support-list-1.json
+  list-2: ../../components/support-list/json/support-list-2.json
+  list-3: ../../components/support-list/json/support-list-3.json
+page: true
+---
+
+{{#>_theme}}
+{{#>_layout-container}}
+{{>_support-list model.list-1 includeWaratah="true" }}
+{{>_support-list model.list-2 }}
+{{>_support-list model.list-3 includeWaratah="true" }}
+{{/_layout-container}}
+
+{{#>_layout-container brand-dark="true" invert="true"}}
+{{>_support-list model.list-1 includeWaratah="true" }}
+{{>_support-list model.list-2 }}
+{{>_support-list model.list-3 includeWaratah="true" }}
+{{/_layout-container}}
+{{/_theme}}

src/main.scss

@@ -6,7 +6,7 @@
 @import 'core/all';
 
 @import 'components/accordion/accordion';
-@import 'components/acknowledgement-list/acknowledgement-list';
+@import 'components/support-list/support-list';
 @import 'components/back-to-top/back-to-top';
 @import 'components/date-input/date-input';
 @import 'components/date-picker/date-picker';