feature/TE-2111/accordion-open-onload

src/components/accordion/_accordion.hbs

@@ -6,7 +6,7 @@
   </div>
   {{/if}}
   {{#each items}}
-  <div class="nsw-accordion__title">{{title}}</div>
+  <div class="nsw-accordion__title{{#if open}} {{open}}{{/if}}">{{title}}</div>
   <div class="nsw-accordion__content">
     {{{content}}}
   </div>

src/components/accordion/_guidance.hbs

@@ -33,6 +33,9 @@ layout: blank-layout.hbs
 <p>The optional collapse all/expand all functionality allows users to perform the action to all accordions, reducing time and clicks to reach the required information. It can be removed or added as required.</p>
 <p>This function should not be used to help users locate information within accordions. If a user is expanding multiple accordions because they are unsure of the content they contain, consider more descriptive titles or removing accordions all together and displaying the content separated by headings.</p>
 
+<h3>Open accordion pane on page load</h3>
+<p>By default, all panes in an accordion are closed. To render an accordion pane expanded on page load, add the <code>.nsw-accordion__open</code> class on the <code>.nsw-accordion__title</code> element.</p>
+
 <h2>Principles</h2>
 <p><strong>Use clear labels</strong></p>
 <p>Accordions hide content, so the labels need to be clear. Ensure the headings used are brief and explicit about what is contained in the hidden panel. Intuitive headings help the user build a clear mental model of the content.</p>

src/components/accordion/accordion.js

@@ -26,6 +26,7 @@ class Accordion {
     this.headings = element.querySelectorAll(this.accordionHeadingClass)
     this.expandAllBtn = expandAll
     this.collapseAllBtn = collapseAll
+    this.isExpandedOnLoad = element.querySelectorAll('.nsw-accordion__open')
     this.buttons = []
     this.content = []
     this.toggleEvent = (e) => this.toggle(e)
@@ -58,6 +59,13 @@ class Accordion {
       this.content.push(contentElem)
       this.buttons.push(buttonElem)
     })
+
+    if (this.isExpandedOnLoad) {
+      this.isExpandedOnLoad.forEach((element) => {
+        const openButton = element.querySelector('button')
+        this.setAccordionState(openButton, 'open')
+      })
+    }
   }
 
   controls() {

src/components/accordion/json/accordion-2.json

@@ -3,7 +3,8 @@
   [
     {
       "title": "Sprint cadence or workflow",
-      "content": "<p>In your team there may already be a sprint cadence that includes content design. Become familiar with agile practices such as the Kanban wall, daily stand ups and sprint planning. Understand the user journey and their needs. Get involved in usability testing sessions and iteration.</p><p>Otherwise, the content workflow may be separate from the product team. At the very least, make sure the team has real content to use, when they’re building a prototype. Also ensure your team uses real content when it does usability testing. Attend playbacks from this testing, to know how your content needs to change.</p><p>As well as designing the user experience with product team members, a content designer works to know the facts with subject matter experts.</p>"
+      "content": "<p>In your team there may already be a sprint cadence that includes content design. Become familiar with agile practices such as the Kanban wall, daily stand ups and sprint planning. Understand the user journey and their needs. Get involved in usability testing sessions and iteration.</p><p>Otherwise, the content workflow may be separate from the product team. At the very least, make sure the team has real content to use, when they’re building a prototype. Also ensure your team uses real content when it does usability testing. Attend playbacks from this testing, to know how your content needs to change.</p><p>As well as designing the user experience with product team members, a content designer works to know the facts with subject matter experts.</p>",
+      "open": "nsw-accordion__open"
     },
     {
       "title": "Simplifying complexity",

src/components/accordion/json/accordion-3.json

@@ -2,7 +2,8 @@
   "items": [
     {
       "title": "Sprint cadence or workflow",
-      "content": "<p>In your team there may already be a sprint cadence that includes content design. Become familiar with agile practices such as the Kanban wall, daily stand ups and sprint planning. Understand the user journey and their needs. Get involved in usability testing sessions and iteration.</p><p>Otherwise, the content workflow may be separate from the product team. At the very least, make sure the team has real content to use, when they’re building a prototype. Also ensure your team uses real content when it does usability testing. Attend playbacks from this testing, to know how your content needs to change.</p><p>As well as designing the user experience with product team members, a content designer works to know the facts with subject matter experts.</p>"
+      "content": "<p>In your team there may already be a sprint cadence that includes content design. Become familiar with agile practices such as the Kanban wall, daily stand ups and sprint planning. Understand the user journey and their needs. Get involved in usability testing sessions and iteration.</p><p>Otherwise, the content workflow may be separate from the product team. At the very least, make sure the team has real content to use, when they’re building a prototype. Also ensure your team uses real content when it does usability testing. Attend playbacks from this testing, to know how your content needs to change.</p><p>As well as designing the user experience with product team members, a content designer works to know the facts with subject matter experts.</p>",
+      "open": "nsw-accordion__open"
     },
     {
       "title": "Simplifying complexity",

src/components/accordion/json/accordion.json

@@ -2,7 +2,8 @@
   "items": [
     {
       "title": "First Home Owner's Grant (New Homes) scheme (FHOG)",
-      "content": "<p>Buying or building your first home? You may be eligible for a $10,000 grant under the First Home Owner's Grant (FHOG) scheme.</p><p>This grant scheme only applies to buying or building a new home.</p><p>You can make a claim if:</p><ul><li>your home is newly constructed and has a total value of less than $600,000</li><li>the land and the dwelling you intend to build has a combined value of less than $750,000.</li></ul>"
+      "content": "<p>Buying or building your first home? You may be eligible for a $10,000 grant under the First Home Owner's Grant (FHOG) scheme.</p><p>This grant scheme only applies to buying or building a new home.</p><p>You can make a claim if:</p><ul><li>your home is newly constructed and has a total value of less than $600,000</li><li>the land and the dwelling you intend to build has a combined value of less than $750,000.</li></ul>",
+      "open": "nsw-accordion__open"
     },
     {
       "title": "HomeBuilder program",