Feature/ds2 61 gh fixes (#85)

* add MIT license * fixed pagination margin * fix main nav back btn link alignment * Main navigation: changing meganav breakpoint to lg * Button: changing white space settings to allow buttons to wrap on multiple lines * Main navigation: address ie and safari UI issues * Readme: restructure content, add instructions on font and icons, specify JS reference needs a build workflow Co-authored-by: Anna Yeshtukova <>
digitalnsw · Nov 5, 2020 · 95099b3 · 95099b3
1 parent c779329
commit 95099b3
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 54 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,7 @@
+Copyright 2020 Digital.NSW
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -4,18 +4,18 @@
 [![](https://data.jsdelivr.com/v1/package/npm/nsw-design-system/badge)](https://www.jsdelivr.com/package/npm/nsw-design-system)
 
 
-NSW Design system is a collection of reusable UI components used on the NSW goverment websites.
+NSW Design system is a collection of reusable UI components used on the NSW government websites.
 
 See live examples of NSW Digital Design system components and guidance on how to use them on you website at [NSW Design System](https://www.digital.nsw.gov.au/digital-design-system).
 
 ## Using the design system
 
-How you use the NSW Design System depends on your team's capabilities. We recommend using `npm` but also provide a downloadable starter kit which includes all the compiled assets.
+How you use the NSW Design System depends on your team's capabilities. We recommend using `npm` but also provided in a CDN, and a downloadable starter kit which includes all the compiled assets.
 
  1. [Installing with NPM](#installing-with-npm)
- 2. [Download starter kit](#download-starter-kit)
- 3. [Using JSDelivr CDN](#using-jsdelivr-cdn)
-
+ 2. [Using JSDelivr CDN](#using-jsdelivr-cdn)
+ 3. [Download starter kit](#download-starter-kit)
+ 
 ### Installing with NPM
 `npm` is a package manager for Node-based projects. We recommend `npm` packages because it makes it easy to update and install the design system from the command line.
 1.  Install  `Node/npm`. 
@@ -29,8 +29,6 @@ How you use the NSW Design System depends on your team's capabilities. We recomm
 
 The NSW Design System is now installed as a dependancy of your project, check out how to [import styles](#importing-styles-into-your-project) and [javascript](#importing-javascript-into-your-project) in to your project build.
 
-### Download starter kit
-You can download the compiled design system assets (HTML, CSS, JavaScript) in the [HTMLStarterkit zip file](https://github.com/digitalnsw/nsw-design-system/blob/master/HTMLstarterkit.zip) from the latest release.
 
 ### Importing styles into your project
 The NSW Design System styles need to be added to the main Sass file in your project.  
@@ -39,15 +37,40 @@ Use the below snippet to import the NSW Design System (ideally placed before any
 @import 'node_modules/nsw-design-system/src/main';
 ```
 
+#### Adding the font
+In your main html document add this line of code inside the `<head>` tag
+```
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
+```
+
+#### Using the icons
+The design system icons use sprite SVG, add this line of code inside the `<head>` tag in your main html document
+```
+  <script>
+    // SVG Sprite Loader
+    var svgAjax = new XMLHttpRequest();
+    svgAjax.open("GET", "https://cdn.jsdelivr.net/npm/nsw-design-system/dist/assets/svg/sprite.svg", true);
+    svgAjax.send();
+    svgAjax.onload = function(e) {
+      var fragment = document.createRange().createContextualFragment(svgAjax.responseText);
+      var svg = fragment.querySelector('svg')
+      svg.setAttribute('aria-hidden', true);
+      svg.style.cssText = 'position: absolute; width: 0; height: 0; overflow: hidden;'
+      document.body.insertBefore(fragment, document.body.childNodes[0]);
+    };
+  </script>
+```
+
 ### Importing javascript into your project
-Some of the NSW Design System components require javascript to provide advanced functionality.  To ensure the page is ready for javascript to run, include the follow scripts tags at the end of the html document.
+Some of the NSW Design System components require javascript to provide advanced functionality. To ensure the page is ready for javascript to run, include the follow scripts tags at the end of the html document.
 ```
     <script src="node_modules/nsw-design-system/src/main.js"></script>
     <script>window.NSW.initSite()</script>
   </body>
 </html>
 ```
-You might wish to copy the file into your project or reference it from  `node_modules`, this will depend on your build setup.
+Depending on your project set up, you might wish to copy the file into your project from `node_modules` or add the reference to your build workflow.
+
 
 ### Using JSDelivr CDN
 The bundled css and js files are also hosted in [JSDelivr](https://www.jsdelivr.com).
@@ -67,6 +90,9 @@ You can add the files to your main html document
 </html>
 ```
 
+### Download starter kit
+You can download the compiled design system assets (HTML, CSS, JavaScript) in the [HTMLStarterkit zip file](https://github.com/digitalnsw/nsw-design-system/blob/master/HTMLstarterkit.zip) from the latest release.
+
 ## Getting updates
 
 To be notified when there’s a new release, you can either join the [NSW Design System community](https://community.digital.nsw.gov.au/) or [watch the NSW Design System Github](https://github.com/digitalnsw/nsw-design-system)
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -4,7 +4,7 @@
   @include nsw-spacing(margin, lg md none none);
   @include border-radius;
   border: solid 2px transparent;
-  white-space: nowrap;
+  white-space: normal;
   text-decoration: none;
   padding: rem(12px) rem(24px);
   cursor: pointer;

diff --git a/src/components/main-navigation/_main-navigation.scss b/src/components/main-navigation/_main-navigation.scss
@@ -26,7 +26,7 @@
     transform: translateX(-100%);
   }
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     position: relative;
     transform: none;
     background-color: $light10;
@@ -35,7 +35,7 @@
     transition: none;
     visibility: visible;
     border-top: solid 1px $light40;
-    overflow-y: initial;
+    overflow-y: visible;
     height: auto;
   }
 
@@ -64,7 +64,7 @@
       width: rem(20px);
     }
 
-    @include breakpoint('md') {
+    @include breakpoint('lg') {
       display: none;
     }
   }
@@ -95,7 +95,7 @@
       height: rem(16px);
     }
 
-    @include breakpoint('md') {
+    @include breakpoint('lg') {
       display: none;
     }
   }
@@ -109,7 +109,7 @@
   margin-top: 0;
   margin-bottom: 0;
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     @include container(0);
     display: flex;
     flex-direction: row;
@@ -120,7 +120,7 @@
 }
 
 .nsw-subnavigation__list {
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     @include nsw-spacing(margin-top, xl);
     display: flex;
   }
@@ -135,7 +135,7 @@
   align-items: stretch;
   flex-wrap: nowrap;
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     border-bottom: 0;
   }
 }
@@ -144,15 +144,15 @@
 .nsw-subnavigation__list-item {
   @include font-stack;
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     @include font-stack('heading');
     border-bottom: 0;
   }
 }
 
 .nsw-subnavigation__list-item {
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     width: 32%;
     border-top: solid 1px $light20;
 
@@ -179,7 +179,7 @@
   align-items: stretch;
   flex-wrap: nowrap;
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     @include z-index('middle');
     position: relative;
   }
@@ -198,13 +198,12 @@
 }
 
 .nsw-navigation__link-icon {
-  position: relative;
-  top: 50%;
+  margin-top: rem(10px);
   transform: translateY(-50%);
   height: rem(16px);
   width: rem(16px);
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     display: block;
     height: rem(12px);
     width: rem(12px);
@@ -235,7 +234,7 @@
     visibility: visible;
   }
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     @include container;
     @include nsw-spacing(padding-top, lg);
     @include nsw-spacing(padding-bottom, lg);
@@ -277,7 +276,7 @@
     align-self: center;
   }
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     display: none;
   }
 }
@@ -291,7 +290,7 @@
   border: 0;
   display: inline-flex;
   text-decoration: none;
-  vertical-align: middle;
+  align-items: center;
   position: relative;
   left: -8px;
 
@@ -310,7 +309,7 @@
     align-self: center;
   }
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     display: none;
   }
 }
@@ -320,14 +319,14 @@
   @include font-size('md');
   @include nsw-spacing(margin, none);
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     @include font-size('lg');
     display: inline-block;
   }
 }
 
 .nsw-subnavigation__title-link {
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     @include nsw-spacing(padding, none);
     color: $nsw-primary-blue;
   }
@@ -339,15 +338,15 @@
   @include font-size('xs');
   display: none;
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     display: block;
   }
 }
 
 .nsw-subnavigation .nsw-subnavigation,
 .nsw-subnavigation .nsw-navigation__link-icon {
 
-  @include breakpoint('md') {
+  @include breakpoint('lg') {
     display: none;
   }
 

diff --git a/src/components/main-navigation/main-navigation.js b/src/components/main-navigation/main-navigation.js
@@ -23,7 +23,7 @@ class Navigation {
     this.checkFocusEvent = (e) => this.checkIfContainsFocus(e)
     this.escapeCloseEvent = (e) => this.escapeClose(e)
     this.openSubNavElements = []
-    this.breakpoint = window.matchMedia('(min-width: 48em)')
+    this.breakpoint = window.matchMedia('(min-width: 62em)')
     this.body = document.body
   }
 

diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
@@ -11,8 +11,16 @@
   &__item {
     @include nsw-spacing(margin, none none none xs);
 
-    &:nth-child(2) {
-      @include nsw-spacing(margin-left, none);
+    &--next-page {
+      @include nsw-spacing(margin, none none none md);
+    }
+
+    &--prev-page {
+      @include nsw-spacing(margin, none md none none);
+
+      + .nsw-pagination__item {
+        @include nsw-spacing(margin-left, none);
+      }
     }
   }
 
@@ -50,11 +58,3 @@
     vertical-align: middle;
   }
 }
-
-.nsw-pagination__item--next-page {
-  @include nsw-spacing(margin, none none none md);
-}
-
-.nsw-pagination__item--prev-page {
-  @include nsw-spacing(margin, none md none none);
-}