Feature/new grid and layout (#112)

* New grid and layout * Full width demo page update Background helper classes * Footer content updates * Folder restructure * Index page updates * Hero banner demo page update * Components content update Side nav demo template update WIP * Side nav demo template update * Sidebar demo page update Tags component content update * Card components example update * Tables component content update and mobile min width fix * Grid and layout pages update * Broken characters fix Adding image background * default anchor links to #, change duplicated id * Styles page updates * ci: remove pattern folder in the glob * Moving json files into separate folders * Component spacing updates Component page structure update * Changing names for bg helper classes Removing max card width * feature tile: fix typo, ie overlay fix Co-authored-by: Anna Yeshtukova <> Co-authored-by: Benjamin Chiong <benjamin.chiong@customerservice.nsw.gov.au>
digitalnsw · Jan 21, 2021 · b8aae7c · b8aae7c
1 parent 62c5acc
commit b8aae7c
Show file tree

Hide file tree

Showing 166 changed files with 2,615 additions and 1,287 deletions.
diff --git a/.github/workflows/build-deploy-staging.yml b/.github/workflows/build-deploy-staging.yml
@@ -35,7 +35,7 @@ jobs:
             dist
       - run: |
           npm install -g pa11y-ci
-          pa11y-ci ./dist/{components,patterns,styles,templates}/**/*.html
+          pa11y-ci ./dist/{components,styles,templates}/**/*.html
       - name: Visual test
         uses: percy/snapshot-action@v0.1.2
         with:

diff --git a/gulpfile.js b/gulpfile.js
@@ -130,10 +130,6 @@ function metalsmithBuild(callback) {
       pattern: config.metalSmith.collection.components.pattern,
       sortBy: sortByAlpha,
     },
-    patterns: {
-      pattern: config.metalSmith.collection.patterns.pattern,
-      sortBy: sortByAlpha,
-    },
     styles: {
       pattern: config.metalSmith.collection.styles.pattern,
       sortBy: sortByAlpha,

diff --git a/src/components/accordion/_accordion.hbs b/src/components/accordion/_accordion.hbs
@@ -2,7 +2,9 @@
   {{#each accordionitems}}
   <h2 class="nsw-accordion__title">{{title}}</h2>
   <div class="nsw-accordion__content">
-    {{{content}}}
+  	<div class="nsw-wysiwyg-content">
+    	{{{content}}}
+    </div>
   </div>
   {{/each}}
 </div>
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -1,5 +1,5 @@
 .nsw-accordion {
-  @include nsw-spacing(margin, md none none);
+  @include component-spacing();
 
   &__title,
   &__button {

diff --git a/src/components/accordion/accordion.json b/src/components/accordion/accordion.json
diff --git a/src/components/accordion/index.hbs b/src/components/accordion/index.hbs
@@ -1,7 +1,20 @@
 ---
 title: Accordion
-model: accordion.json
+model: json/accordion.json
 ---
-<div class="nsw-container">
-	{{>_accordion model}}
-</div>
+
+<main>
+  <div class="nsw-section--white">
+    <div class="nsw-container">
+      <div class="nsw-page-layout">
+        <div class="nsw-page-layout__main">
+          <div class="nsw-grid">
+            <div class="nsw-col nsw-col-lg-8 nsw-offset-lg-2">
+							{{>_accordion model}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/src/components/accordion/json/accordion-2.json b/src/components/accordion/json/accordion-2.json
@@ -0,0 +1,22 @@
+{
+  "accordionitems": [
+    {
+      "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>"
+    },
+    {
+      "title": "Simplifying complexity",
+      "content": "<p>Your aim from the outset is to simplify everything for the user. Your main task will be to set up a clear path for them to achieve their goal. </p><p>Start with a user story. You should create one for each piece of content, from user research. If you’re part of a multidisciplinary product team, everyone is likely to be using them as you design and build.</p><p>A user story will help you to pinpoint the user need from the outset. It puts the user front-of-mind and gives you a focus when designing and writing the content.</p><p>Next, create a structure for your page, based on the user story. Write up meaningful H2 headers to serve as signposts to help the user do what they need to do.</p>"
+    },
+    {
+      "title": "Working with subject matter experts",
+      "content": "<p>Share your way of working with your subject matter experts – in person if possible. </p><p>They're a great way of introducing your approach to a subject matter expert, which may be completely foreign to them. It will show them how you're focusing on the user, and what you're trying to solve. Ask them for feedback. Find out if there’s anything missing and if you’re on the right track.</p>"
+    }
+  ]
+}
+
+
+
+
+
+
diff --git a/src/components/accordion/json/accordion.json b/src/components/accordion/json/accordion.json
@@ -0,0 +1,16 @@
+{
+  "accordionitems": [
+    {
+      "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>"
+    },
+    {
+      "title": "HomeBuilder program",
+      "content": "<p>If you are building a new home, you could also be able to apply for the Australian Government grant of $25,000. To be eligible you must:</p><ul><li>sign the contract between 4 June 2020 and 31 December 2020</li><li>commence within 3 months of the contract date.</li></ul><p>HomeBuilder complements the NSW Government’s existing First Home Owner Grant and stamp duty concessions.</p>"
+    },
+    {
+      "title": "First Home Buyer Assistance scheme (FHBAS)",
+      "content": "<p>The NSW Government recently announced increased thresholds for purchases of new homes and vacant land to build a new home from 1 August 2020.  The threshold for existing home purchases remains unchanged.</p>"
+    }
+  ]
+}
diff --git a/src/components/breadcrumbs/index.hbs b/src/components/breadcrumbs/index.hbs
@@ -1,7 +1,20 @@
 ---
 title: Breadcrumbs
-model: breadcrumbs.json
+model: json/breadcrumbs.json
 ---
 <div class="nsw-container">
-  {{>_breadcrumbs model}}
 </div>
+
+<div class="nsw-section--white">
+	<div class="nsw-container">
+	  <div class="nsw-page-layout">
+	    <div class="nsw-page-layout__main">
+	      <div class="nsw-grid">
+	        <div class="nsw-col">
+						{{>_breadcrumbs model}}
+	        </div>
+	      </div>
+	    </div>
+	  </div>
+	</div>
+</div>
diff --git a/src/components/breadcrumbs/breadcrumbs.json → ...ponents/breadcrumbs/json/breadcrumbs.json b/src/components/breadcrumbs/breadcrumbs.json → ...ponents/breadcrumbs/json/breadcrumbs.json
@@ -6,15 +6,15 @@
       "url": "#"
     },
     {
-      "text": "News and Events",
+      "text": "About DPC",
       "url": "#"
     },
     {
-      "text": "News",
+      "text": "NSW Digital Design System",
       "url": "#"
     },
     {
-      "text": "Download the Digital Driver Licence to your phone",
+      "text": "Content design",
       "url": "#"
     }
   ]

diff --git a/src/components/button/index.hbs b/src/components/button/index.hbs
@@ -1,51 +1,86 @@
 ---
 title: Buttons
 ---
-<div style="padding: 1rem">
-  {{>_button-link url="#" style="primary" text="Link"}}
-  {{>_button type="button" style="primary" text="Button"}}
-  {{>_button type="submit" style="primary" text="Submit Button"}}
-  {{>_button type="reset" style="primary" text="Reset Button"}}
-  {{>_button-input type="button" style="primary" text="Input Button"}}
-  {{>_button-input type="submit" style="primary" text="Input Submit Button"}}
-  {{>_button-input type="reset" style="primary" text="Input Reset Button"}}
-</div>
-<div style="padding: 1rem">
-  {{>_button-link url="#" style="highlight" text="Link"}}
-  {{>_button type="button" style="highlight" text="Button"}}
-  {{>_button type="submit" style="highlight" text="Submit Button"}}
-  {{>_button type="reset" style="highlight" text="Reset Button"}}
-  {{>_button-input type="button" style="highlight" text="Input Button"}}
-  {{>_button-input type="submit" style="highlight" text="Input Submit Button"}}
-  {{>_button-input type="reset" style="highlight" text="Input Reset Button"}}
-</div>
-<div style="padding: 1rem">
-  {{>_button-link url="#" style="outline" text="Link"}}
-  {{>_button type="button" style="outline" text="Button"}}
-  {{>_button type="submit" style="outline" text="Submit Button"}}
-  {{>_button type="reset" style="outline" text="Reset Button"}}
-  {{>_button-input type="button" style="outline" text="Input Button"}}
-  {{>_button-input type="submit" style="outline" text="Input Submit Button"}}
-  {{>_button-input type="reset" style="outline" text="Input Reset Button"}}
-</div>
-<div style="padding: 1rem; background: #f4f4f7">
-  {{>_button-link url="#" style="white" text="Link"}}
-  {{>_button type="button" style="white" text="Button"}}
-  {{>_button type="submit" style="white" text="Submit Button"}}
-  {{>_button type="reset" style="white" text="Reset Button"}}
-  {{>_button-input type="button" style="white" text="Input Button"}}
-  {{>_button-input type="submit" style="white" text="Input Submit Button"}}
-  {{>_button-input type="reset" style="white" text="Input Reset Button"}}
-</div>
-<div style="padding: 1rem;">
-  {{>_button type="button" style="primary" text="Button" isDisabled=true}}
-  {{>_button type="submit" style="primary" text="Submit Button" isDisabled=true}}
-  {{>_button type="reset" style="primary" text="Reset Button" isDisabled=true}}
-  {{>_button-input type="button" style="primary" text="Input Button" isDisabled=true}}
-  {{>_button-input type="submit" style="primary" text="Input Submit Button" isDisabled=true}}
-  {{>_button-input type="reset" style="primary" text="Input Reset Button" isDisabled=true}}
-</div>
-<div style="padding: 1rem;">
-  Note: Its not possible to disable links, a class of .disable can be applied for the visual look<br />
-  but that doesnt prevent click or keyboard events. Suggestion is to not disable links
-</div>
+
+<main>
+  <div class="nsw-section--white">
+    <div class="nsw-container">
+      <div class="nsw-page-layout">
+        <div class="nsw-page-layout__main">
+          <div class="nsw-grid">
+            <div class="nsw-col">
+              <h2 class="nsw-section-title">Primary</h2>
+              {{>_button-link url="#" style="primary" text="Link"}}
+              {{>_button type="button" style="primary" text="Button"}}
+              {{>_button type="submit" style="primary" text="Submit Button"}}
+              {{>_button type="reset" style="primary" text="Reset Button"}}
+              {{>_button-input type="button" style="primary" text="Input"}}
+              {{>_button-input type="submit" style="primary" text="Input Submit"}}
+              {{>_button-input type="reset" style="primary" text="Input Reset"}}
+            </div>
+            <div class="nsw-col">
+              <h2 class="nsw-section-title">Highlight</h2>
+              {{>_button-link url="#" style="highlight" text="Link"}}
+              {{>_button type="button" style="highlight" text="Button"}}
+              {{>_button type="submit" style="highlight" text="Submit Button"}}
+              {{>_button type="reset" style="highlight" text="Reset Button"}}
+              {{>_button-input type="button" style="highlight" text="Input"}}
+              {{>_button-input type="submit" style="highlight" text="Input Submit"}}
+              {{>_button-input type="reset" style="highlight" text="Input Reset"}}
+            </div>
+            <div class="nsw-col">
+              <h2 class="nsw-section-title">Outline</h2>
+              {{>_button-link url="#" style="outline" text="Link"}}
+              {{>_button type="button" style="outline" text="Button"}}
+              {{>_button type="submit" style="outline" text="Submit Button"}}
+              {{>_button type="reset" style="outline" text="Reset Button"}}
+              {{>_button-input type="button" style="outline" text="Input"}}
+              {{>_button-input type="submit" style="outline" text="Input Submit"}}
+              {{>_button-input type="reset" style="outline" text="Input Reset"}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="nsw-section--light-40">
+    <div class="nsw-container">
+      <div class="nsw-page-layout">
+        <div class="nsw-page-layout__main">
+          <div class="nsw-grid">
+            <div class="nsw-col">
+              <h2 class="nsw-section-title">White</h2>
+              {{>_button-link url="#" style="white" text="Link"}}
+              {{>_button type="button" style="white" text="Button"}}
+              {{>_button type="submit" style="white" text="Submit Button"}}
+              {{>_button type="reset" style="white" text="Reset Button"}}
+              {{>_button-input type="button" style="white" text="Input"}}
+              {{>_button-input type="submit" style="white" text="Input Submit"}}
+              {{>_button-input type="reset" style="white" text="Input Reset"}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="nsw-section--white">
+    <div class="nsw-container">
+      <div class="nsw-page-layout">
+        <div class="nsw-page-layout__main">
+          <div class="nsw-grid">
+            <div class="nsw-col">
+              <h2 class="nsw-section-title">Disabled</h2>
+              <p><strong>Note:</strong> Its not possible to disable links, a class of .disable should only be applied to buttons and inputs</p>
+              {{>_button type="button" style="primary" text="Button" isDisabled=true}}
+              {{>_button type="submit" style="primary" text="Submit Button" isDisabled=true}}
+              {{>_button type="reset" style="primary" text="Reset Button" isDisabled=true}}
+              {{>_button-input type="button" style="primary" text="Input" isDisabled=true}}
+              {{>_button-input type="submit" style="primary" text="Input Submit" isDisabled=true}}
+              {{>_button-input type="reset" style="primary" text="Input Reset" isDisabled=true}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/src/components/button/button.json → src/components/button/json/button.json b/src/components/button/button.json → src/components/button/json/button.json
diff --git a/src/components/callout/_callout.hbs b/src/components/callout/_callout.hbs
@@ -5,7 +5,7 @@
   {{/if}}
   <div class="nsw-callout__content">
     <h4 class="nsw-callout__title">{{heading}}</h4>
-    <p>{{copy}}</p>
+    <p>{{{copy}}}</p>
     {{#if link}}<a href="{{link.href}}" class="nsw-text-link">{{link.text}}</a>{{/if}}
   </div>
 </div>
diff --git a/src/components/callout/_callout.scss b/src/components/callout/_callout.scss
@@ -1,6 +1,6 @@
 .nsw-callout {
   @include nsw-spacing(padding, md);
-  @include nsw-spacing(margin-top, md);
+  @include component-spacing();
   background: $light10;
   position: relative;
   border-left: solid 6px $nsw-primary-blue;
@@ -43,6 +43,10 @@
       @include nsw-spacing(margin, sm none none none);
     }
 
+    a {
+      @include text-link;
+    }
+
     .nsw-text-link {
       @include nsw-spacing(margin-top, sm);
     }

diff --git a/src/components/callout/callout-all.json b/src/components/callout/callout-all.json
diff --git a/src/components/callout/callout.json b/src/components/callout/callout.json
diff --git a/src/components/callout/index.hbs b/src/components/callout/index.hbs
@@ -1,13 +1,28 @@
 ---
 title: Callout
 model:
-  default: callout.json
-  all: callout-all.json
+  default: json/callout.json
+  all: json/callout-all.json
 ---
-<div class="nsw-container">
-  {{>_callout model.default}}
-</div>
 
-<div class="nsw-container">
-  {{>_callout model.all}}
-</div>
+<main>
+  <div class="nsw-section--white">
+    <div class="nsw-container">
+      <div class="nsw-page-layout">
+        <div class="nsw-page-layout__main">
+          <div class="nsw-grid">
+          	<div class="nsw-row">
+            	<div class="nsw-col nsw-col-lg-8 nsw-offset-lg-2">
+	  						{{>_callout model.default}}
+	  					</div>
+	  				</div>
+            	<div class="nsw-col nsw-col-lg-8 nsw-offset-lg-2">
+	  						{{>_callout model.all}}
+	  					</div>
+	  				</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/src/components/callout/json/callout-all-2.json b/src/components/callout/json/callout-all-2.json
@@ -0,0 +1,9 @@
+{
+  "heading": "Keep up-to date",
+  "icon": "status-info",
+  "copy": "Join our community and register for updates to stay up-to-date with all the latest patterns releases.",
+  "link": {
+    "text": "Join our community",
+    "href": "#"
+  }
+}
diff --git a/src/components/callout/json/callout-all.json b/src/components/callout/json/callout-all.json
@@ -0,0 +1,9 @@
+{
+  "heading": "The Digital Driver's License trial",
+  "icon": "status-info",
+  "copy": "Once we launch statewide, the Digital Drivers License will become legal for use across NSW",
+  "link": {
+    "text": "Conditions for using the Digital Drivers License",
+    "href": "#"
+  }
+}
diff --git a/src/components/callout/json/callout-icon.json b/src/components/callout/json/callout-icon.json
@@ -0,0 +1,5 @@
+{
+  "heading": "Plain language tool",
+  "icon": "status-info",
+  "copy": "Learn more about writing clear, concise, organised, and appropriate content for your intended audience using <a href='#'>plain language tools</a>."
+}