Merge pull request #65 from digitalnsw/fix/GDS-745-audit-naming-conve…

…ntions-settings BREAKING CHANGE: fixes based on results of audit and mega menu update
digitalnsw · Mar 18, 2020 · 05d40b9 · 05d40b9
2 parents b4f773a + d1845b3
commit 05d40b9
Show file tree

Hide file tree

Showing 38 changed files with 424 additions and 435 deletions.
diff --git a/src/components/blockquote/_blockquote.hbs b/src/components/blockquote/_blockquote.hbs
diff --git a/src/components/blockquote/_blockquote.scss b/src/components/blockquote/_blockquote.scss
diff --git a/src/components/blockquote/blockquote.json b/src/components/blockquote/blockquote.json
diff --git a/src/components/blockquote/index.hbs b/src/components/blockquote/index.hbs
diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -26,7 +26,7 @@
       position: relative;
     }
 
-    @include breakpoint('sm') {
+    @include breakpoint('md') {
       display: inline;
     }
   }
@@ -40,7 +40,7 @@
     &::before {
       display: none;
 
-      @include breakpoint('sm') {
+      @include breakpoint('md') {
         display: inline-block;
       }
     }

diff --git a/src/components/callout/_callout.hbs b/src/components/callout/_callout.hbs
@@ -4,7 +4,7 @@
   </svg>
   {{/if}}
   <div class="nsw-callout__content">
-    {{#if heading}}<h4 class="nsw-callout__title">{{heading}}</h4>{{/if}}
+    <h4 class="nsw-callout__title">{{heading}}</h4>
     <p>{{copy}}</p>
     {{#if link}}<a href="{{link.href}}" class="nsw-text-link">{{link.text}}</a>{{/if}}
   </div>

diff --git a/src/components/callout/_callout.scss b/src/components/callout/_callout.scss
@@ -5,7 +5,7 @@
   position: relative;
   border-left: solid 6px $nsw-primary-blue;
 
-  @include breakpoint('sm') {
+  @include breakpoint('md') {
     @include nsw-spacing(padding, lg lg lg md);
     display: flex;
     flex-direction: row;
@@ -16,19 +16,26 @@
     width: rem(24px);
     height: rem(24px);
 
-    @include breakpoint('sm') {
+    + .nsw-callout__content {
+      @include nsw-spacing(margin-top, md);
+    }
+
+    @include breakpoint('md') {
       @include nsw-spacing(margin-right, md);
       flex: 0 0 auto;
       width: rem(30px);
       height: rem(30px);
+
+      + .nsw-callout__content {
+        @include nsw-spacing(margin-top, none);
+      }
     }
   }
 
   &__content {
     @include font-stack;
-    @include nsw-spacing(margin-top, md);
 
-    @include breakpoint('sm') {
+    @include breakpoint('md') {
       @include nsw-spacing(margin-top, none);
     }
 

diff --git a/src/components/callout/callout-all.json b/src/components/callout/callout-all.json
@@ -0,0 +1,9 @@
+{
+  "heading": "Callout Heading",
+  "icon": "search",
+  "copy": "Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.",
+  "link": {
+    "text": "Text link",
+    "href": "#"
+  }
+}
diff --git a/src/components/callout/callout.json b/src/components/callout/callout.json
@@ -1,9 +1,4 @@
 {
   "heading": "Callout Heading",
-  "icon": "search",
-  "copy": "Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.",
-  "link": {
-    "text": "Text link",
-    "href": "#"
-  }
+  "copy": "Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit."
 }
diff --git a/src/components/callout/index.hbs b/src/components/callout/index.hbs
@@ -1,7 +1,13 @@
 ---
 title: Callout
-model: callout.json
+model:
+  default: callout.json
+  all: callout-all.json
 ---
 <div class="nsw-container">
-  {{>_callout model}}
+  {{>_callout model.default}}
+</div>
+
+<div class="nsw-container">
+  {{>_callout model.all}}
 </div>
diff --git a/src/components/card/_card.hbs b/src/components/card/_card.hbs
@@ -11,7 +11,7 @@
           <time datetime="{{date.machine}}">{{date.human}}</time>
         </p>
         {{/if}}
-        <p class="nsw-card__copy">{{copy}}</p>
+        {{#if copy}}<p class="nsw-card__copy">{{copy}}</p>{{/if}}
         <svg class="nsw-icon nsw-card__icon" focusable="false" aria-hidden="true">
           <use xlink:href="#arrow"></use>
         </svg>

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -34,9 +34,12 @@
     @include font-size('sm');
     @include nsw-spacing(padding, md md xxxl md);
     border-top: solid 6px $nsw-primary-highlight;
+    display: flex;
+    flex-direction: column;
+    order: 2;
 
 
-    @include breakpoint('md') {
+    @include breakpoint('lg') {
       @include nsw-spacing(padding, md xl xxxl xl);
     }
 
@@ -47,24 +50,30 @@
 
   &__tag {
     @include font-stack('heading');
+    order: 1;
+  }
+
+  &__date {
+    order: 2;
   }
 
   &__tag,
   &__date {
     @include font-size('xs');
   }
 
+  &__title,
+  &__copy,
+  &__icon {
+    order: 3;
+  }
+
   &__icon {
     @include nsw-spacing(margin, md none none none);
     @include nsw-spacing(bottom, md);
     position: absolute;
-    width: rem(16px);
-    height: rem(16px);
-
-    @include breakpoint('sm') {
-      width: rem(20px);
-      height: rem(20px);
-    }
+    width: rem(20px);
+    height: rem(20px);
   }
 
   &__link {
@@ -81,48 +90,19 @@
       text-decoration: underline;
     }
   }
-}
 
-.nsw-card--media {
-  .nsw-card__image-area {
+  &__image-area {
     order: 1;
     height: rem(200px);
   }
 
-  .nsw-card__content {
-    order: 2;
-  }
-
-  .nsw-card__image {
+  &__image {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
-
 }
 
-.nsw-card--news {
-  .nsw-card__content {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .nsw-card__tag {
-    order: 1;
-  }
-
-  .nsw-card__date {
-    order: 2;
-  }
-
-  .nsw-card__title,
-  .nsw-card__copy,
-  .nsw-card__icon {
-    order: 3;
-  }
-}
-
-
 .nsw-card--headline {
   .nsw-card__title {
     @include font-size('xl');

diff --git a/src/components/card/card-media.json b/src/components/card/card-media.json
@@ -1,5 +1,4 @@
 {
-  "theme": "media",
   "heading": "Ut placet inquam tum dicere exorsus est laborum et inter",
   "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expe",
   "img": "https://picsum.photos/id/421/400/200"

diff --git a/src/components/card/card-news.json b/src/components/card/card-news.json
@@ -1,5 +1,4 @@
 {
-  "theme": "news",
   "heading": "Ut placet inquam tum dicere exorsus est laborum et inter",
   "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expe",
   "tag": "Service NSW",

diff --git a/src/components/hero-banner/_hero-banner.scss b/src/components/hero-banner/_hero-banner.scss
@@ -2,14 +2,14 @@
   $parent: &;
   position: relative;
 
-  @include breakpoint('sm') {
+  @include breakpoint('md') {
     height: rem(380px);
     overflow: hidden;
   }
 
   &__image-area {
 
-    @include breakpoint('sm') {
+    @include breakpoint('md') {
       position: absolute;
       top: 0;
       left: 0;
@@ -23,7 +23,7 @@
     height: auto;
     display: block;
 
-    @include breakpoint('sm') {
+    @include breakpoint('md') {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
@@ -34,7 +34,7 @@
   &__content-area {
     @include break-out;
 
-    @include breakpoint('sm') {
+    @include breakpoint('md') {
       @include break-out-reset;
       height: rem(380px);
       background-color: transparent;
@@ -49,7 +49,7 @@
     background-color: $light20;
     border-top: solid 6px $nsw-primary-highlight;
 
-    @include breakpoint('sm') {
+    @include breakpoint('md') {
       @include nsw-spacing(padding, md lg);
       position: relative;
       top: 50%;
@@ -106,7 +106,7 @@
       color: $white;
       background-color: $dark80;
 
-      @include breakpoint('sm') {
+      @include breakpoint('md') {
         background-color: map-get($overlays, dark);;
       }
     }

diff --git a/src/components/in-page-navigation/_in-page-navigation.scss b/src/components/in-page-navigation/_in-page-navigation.scss
@@ -1,6 +1,6 @@
 .nsw-page-nav {
   @include nsw-spacing(padding, md);
-  border-left: solid 4px $nsw-primary-blue;
+  border-left: solid 4px $nsw-primary-highlight;
 
   &__title {
     @include nsw-spacing(margin, none);

diff --git a/src/components/link-list/_link-list.hbs b/src/components/link-list/_link-list.hbs
@@ -5,8 +5,8 @@
             <li class="nsw-link-list__item" >
               <a class="nsw-link-list__link" href="{{url}}">{{text}}
                 <svg class="nsw-icon nsw-link-list__icon" focusable="false" aria-hidden="true">
-              <use xlink:href="#arrow"></use>
-            </svg>
+                  <use xlink:href="#arrow"></use>
+                </svg>
               </a>
             </li>
         {{/each}}

diff --git a/src/components/link-list/index.hbs b/src/components/link-list/index.hbs
@@ -3,5 +3,4 @@ title: Link list
 model: link-list.json
 ---
 
-<h1>Link list</h1>  
 {{>_link-list model}}
diff --git a/src/components/main-navigation/_main-navigation.hbs b/src/components/main-navigation/_main-navigation.hbs
@@ -20,50 +20,7 @@
           {{/if}}
         </a>
         {{#if subnav}}
-        <button type="button" class="nsw-navigation__subbtn js-open-subnav" aria-controls="{{id}}-subnav" aria-expanded="false">
-          <svg class="nsw-icon" focusable="false" aria-hidden="true">
-            <use xlink:href="#chevron"></use>
-          </svg>
-          <span class="sr-only">Show {{text}} Submenu</span>
-        </button>
-        {{/if}}
-        {{#if subnav}}
-          <div class="nsw-subnavigation" id="{{id}}-subnav" role="region" aria-label="{{text}} Submenu">
-            <div class="nsw-subnavigation__header">
-              <button type="button" class="nsw-subnavigation__back-btn js-close-subnav" aria-controls="{{id}}-subnav" aria-expanded="true">
-                <svg class="nsw-icon nsw-icon--rotate-180" focusable="false" aria-hidden="true">
-                  <use xlink:href="#chevron"></use>
-                </svg>
-                <span><span class="sr-only">Back to</span> {{text}}</span>
-              </button>
-
-              <h2 class="nsw-subnavigation__title">
-                <a href="{{url}}" class="nsw-subnavigation__title-link">
-                  {{text}}
-                  <svg class="nsw-icon" focusable="false" aria-hidden="true">
-                    <use xlink:href="#arrow"></use>
-                  </svg>
-                </a>
-              </h2>
-              <p class="nsw-subnavigation__description">{{description}}</p>
-
-              <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
-                <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
-                  <use xlink:href="#close"></use>
-                </svg>
-                <span class="sr-only">Close Menu</span>
-              </button>
-            </div>
-            <ul class="nsw-subnavigation__list">
-              {{#each subnav}}
-                <li class="nsw-subnavigation__list-item">
-                  <a href="{{url}}" class="nsw-subnavigation__link">
-                    {{text}}
-                  </a>
-                </li>
-              {{/each}}
-            </ul>
-          </div>
+          {{>_sub-nav}}
         {{/if}}
       </li>
     {{/each}}