From 95099b34996e75f8d2eb6ef32885801ed9541e9e Mon Sep 17 00:00:00 2001 From: Benjamin Chiong <72421923+cdbenj@users.noreply.github.com> Date: Fri, 6 Nov 2020 10:05:11 +1100 Subject: [PATCH] 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 <> --- LICENSE | 7 +++ README.md | 44 +++++++++++++++---- src/components/button/_button.scss | 2 +- .../main-navigation/_main-navigation.scss | 41 +++++++++-------- .../main-navigation/main-navigation.js | 2 +- src/components/pagination/_pagination.scss | 20 ++++----- src/patterns/header/_header.scss | 24 +++++----- 7 files changed, 86 insertions(+), 54 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..31f95a59 --- /dev/null +++ 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 index e2c88be8..dabd9f94 100644 --- 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 `` tag +``` + +``` + +#### Using the icons +The design system icons use sprite SVG, add this line of code inside the `` tag in your main html document +``` + +``` + ### 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. ``` ``` -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 ``` +### 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 index 9b1b2323..0ad1ce58 100644 --- 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 index 5839776d..828b95a7 100644 --- 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,7 +144,7 @@ .nsw-subnavigation__list-item { @include font-stack; - @include breakpoint('md') { + @include breakpoint('lg') { @include font-stack('heading'); border-bottom: 0; } @@ -152,7 +152,7 @@ .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,7 +338,7 @@ @include font-size('xs'); display: none; - @include breakpoint('md') { + @include breakpoint('lg') { display: block; } } @@ -347,7 +346,7 @@ .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 index 8cffaa51..42e0b8d4 100644 --- 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 index e82552af..d30c9960 100644 --- 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); -} diff --git a/src/patterns/header/_header.scss b/src/patterns/header/_header.scss index e1d1977c..ad8ebbe5 100644 --- a/src/patterns/header/_header.scss +++ b/src/patterns/header/_header.scss @@ -29,7 +29,7 @@ } } - @include breakpoint('md') { + @include breakpoint('lg') { text-align: left; } } @@ -53,7 +53,7 @@ position: relative; border-bottom: solid 1px $light20; - @include breakpoint('md') { + @include breakpoint('lg') { border-bottom: 0; } @@ -71,7 +71,7 @@ align-items: center; height: rem(72px); - @include breakpoint('md') { + @include breakpoint('lg') { justify-content: unset; height: rem(94px); } @@ -80,7 +80,7 @@ &__center { order: 2; - @include breakpoint('md') { + @include breakpoint('lg') { order: 0; } } @@ -94,7 +94,7 @@ order: 3; margin-right: rem(-4px); - @include breakpoint('md') { + @include breakpoint('lg') { margin-left: auto; margin-right: 0; } @@ -113,7 +113,7 @@ width: rem(141px); height: rem(46px); - @include breakpoint('md') { + @include breakpoint('lg') { width: rem(168px); height: rem(55px); } @@ -152,13 +152,13 @@ } .nsw-header-btn--menu { - @include breakpoint('md') { + @include breakpoint('lg') { display: none; } } .nsw-header-btn--search { - @include breakpoint('md') { + @include breakpoint('lg') { .nsw-header-btn__sub { @include sr-only; } @@ -176,7 +176,7 @@ background: $light10; top: 0; - @include breakpoint('md') { + @include breakpoint('lg') { @include break-out-reset; position: absolute; width: rem(394px); @@ -201,7 +201,7 @@ @include nsw-focus($offset: false); } - @include breakpoint('md') { + @include breakpoint('lg') { @include nsw-spacing(padding, none md); @include border-radius; height: rem(50px); @@ -218,7 +218,7 @@ height: rem(24px); display: none; - @include breakpoint('md') { + @include breakpoint('lg') { display: inline-block; } } @@ -243,7 +243,7 @@ @include nsw-focus; } - @include breakpoint('md') { + @include breakpoint('lg') { display: none; } }