Merge branch 'develop' into feature/GDS-721-design-tokens

* develop: BREAKING CHANGE: main nav mega menu update - created new utility function `getFocusableElementBySelector` this helps restrict our range to the areas of the menu we are in, not all the menu items - separated out reusable parts of the `getFocusableElement` function - updated `mega-navigation.json` to be multi level - updated JS for main nav, not its robust enough to handle unlimited number of sub menus - updated handlebars and created new files to reflect changes based off new mark up for multilevel nav - updated css for main nav styling - updated main nav structure to be inline with new design and UX - updated css according to new design - updated js to be inline with the new UX - changed breakpoint from sm to md for header border-bottom styles - removed reference to blockquote from scss import - updated checkbox styles to have correct margin between checkbox and label and correct border radius - minor adjustments to header search icon, added `.nsw-masthead` as an additional class for `.nsw-infobar` this will be deprecated eventually - updated colors of tab navigation styles - updated border colors for main-navigation mega menu to match sketch - removed headings from list-list and direction-links index.hbs file, cleaned up indenting - updated in-page navigation border color to use highlight color fix: changes made when auditing design system - removed blockquote from components folder as its part of typoography - changed values in `settings.scss`, mapping for breakpoints was wrong breakpoints were breaking later then it should have - moved all media queries up one breakpoint to match what was designed but better match the screen size, including settings related to grid and typography breakpoints - added check for `xl` sized in `breakpoint` mixin - updated footer font sizes - removed theme from `card-new.json` and `card-media.json` - consolidated `card.scss` and removed variants for `.nsw-card__media` and `.nsw-card__news` - added if around copy in card component hbs - added new callout json file, fixed up css issue with margins when there is no icon, removed if around heading in callout as we determined this is always required # Conflicts: # src/components/callout/_callout.scss # src/components/card/_card.scss # src/global/scss/settings/_settings.scss # src/styles/forms/_forms.scss # src/styles/tables/_tables.scss
digitalnsw · Mar 18, 2020 · 36c30d4 · 36c30d4
2 parents 3a4e614 + 05d40b9
commit 36c30d4
Show file tree

Hide file tree

Showing 31 changed files with 377 additions and 381 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/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
@@ -16,17 +16,24 @@
     width: rem(24px);
     height: rem(24px);
 
+    + .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('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,13 +50,24 @@
 
   &__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);
@@ -81,48 +95,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/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}}