digitalnsw · seanelliott86 · Nov 8, 2019 · Nov 8, 2019
diff --git a/dist/components/breadcrumbs/index.html b/dist/components/breadcrumbs/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>NSW Digital Design System</title>
+  <meta name="robots" content="noindex" />
+  <meta name="description" content="">
+  <meta name="keywords" content="">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="stylesheet" href="/css/main.css">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css" rel="stylesheet">
+  <script>
+    // SVG Sprite Loader
+    var svgAjax = new XMLHttpRequest(), svgDiv;
+    svgAjax.open("GET", "../../assets/svg/sprite.svg", true);
+    svgAjax.send();
+    svgAjax.onload = function(e) {
+      svgDiv = document.createElement("div");
+      svgDiv.innerHTML = svgAjax.responseText;
+      svgDiv.style.cssText = "display: block; width: 0; height: 0;";
+      document.body.insertBefore(svgDiv, document.body.childNodes[0]);
+    };
+    // Replace 'no-js' with 'js' on the html tag
+    (function(e){e.className=e.className.replace(/\bno-js\b/,'js')})(document.documentElement);
+  </script>
+</head>
+
+<body>
+  <nav aria-label="Breadcrumb" class="nsw-breadcrumb">
+  <ol class="nsw-breadcrumb__list">
+      <li class="nsw-breadcrumb__item">
+        <a href="#" class="nsw-breadcrumb__link " >Home</a>
+      </li>
+      <li class="nsw-breadcrumb__item">
+        <a href="#" class="nsw-breadcrumb__link " >News and Events</a>
+      </li>
+      <li class="nsw-breadcrumb__item">
+        <a href="#" class="nsw-breadcrumb__link " >News</a>
+      </li>
+      <li class="nsw-breadcrumb__item">
+        <a href="#" class="nsw-breadcrumb__link nsw-breadcrumb--current" aria-current="page">Download the Digital Driver Licence to your phone</a>
+      </li>
+  </ol>
+</nav>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
+  <script src="/js/main.js"></script>
+  <script>window.NSW.initSite()</script>
+</body>
+</html>
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/dist/styleguide.html b/dist/styleguide.html
@@ -30,8 +30,9 @@
 <body>
   <h1>Component Styleguide</h1>
 <ul>
-  <li><a class="navigation-nav-item" href="components/button/index.html">Buttons</a></li>
+  <li><a class="navigation-nav-item" href="components/breadcrumbs/index.html">Breadcrumbs</a></li>
   <li><a class="navigation-nav-item" href="components/footer/index.html">Global Footer</a></li>
+  <li><a class="navigation-nav-item" href="components/button/index.html">Buttons</a></li>
   <li><a class="navigation-nav-item" href="components/header/index.html">Global Header</a></li>
   <li><a class="navigation-nav-item" href="components/typography/index.html">Typography</a></li>
 </ul>

diff --git a/src/components/breadcrumbs/_breadcrumbs.hbs b/src/components/breadcrumbs/_breadcrumbs.hbs
@@ -0,0 +1,9 @@
+<nav aria-label="{{label}}" class="nsw-breadcrumb">
+  <ol class="nsw-breadcrumb__list">
+    {{#each breadcrumbItems}}
+      <li class="nsw-breadcrumb__item">
+        <a href="{{url}}" class="nsw-breadcrumb__link {{#if @last}}nsw-breadcrumb--current{{/if}}" {{#if @last}}aria-current="page"{{/if}}>{{text}}</a>
+      </li>
+    {{/each}}
+  </ol>
+</nav>
diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -0,0 +1,57 @@
+.nsw-breadcrumb {
+  @include font-stack('heading');
+  @include font-size('xs');
+
+  &__list{
+    margin: 0;
+    padding-left: 0;
+    list-style: none;
+  }
+
+  &__item{
+    display: none;
+
+    & + &::before{
+      content: '';
+      display: inline-block;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      width: rem(6px);
+      height: rem(6px);
+      transform: rotate(-45deg);
+      margin-right: rem(20px);
+      margin-left: rem(4px);
+      top: -1px;
+      position: relative;
+    }
+
+    @include breakpoint('sm'){
+      display: inline;
+    }
+  }
+
+  &__item:nth-last-child(2),
+  &__item:last-child{
+    display: inline;
+  }
+
+  &__item:nth-last-child(2){
+    &::before{
+      display: none;
+
+      @include breakpoint('sm'){
+        display: inline-block;
+      }
+    }
+  }
+
+  &__link{
+    @include text-link()
+  }
+
+  &--current{
+    text-decoration: none;
+    pointer-events: none;
+    color: $dark80;
+  }
+}
diff --git a/src/components/breadcrumbs/breadcrumbs.js b/src/components/breadcrumbs/breadcrumbs.js
diff --git a/src/components/breadcrumbs/breadcrumbs.json b/src/components/breadcrumbs/breadcrumbs.json
@@ -0,0 +1,21 @@
+{
+  "label": "Breadcrumb",
+  "breadcrumbItems": [
+    {
+      "text": "Home",
+      "url": "#"
+    },
+    {
+      "text": "News and Events",
+      "url": "#"
+    },
+    {
+      "text": "News",
+      "url": "#"
+    },
+    {
+      "text": "Download the Digital Driver Licence to your phone",
+      "url": "#"
+    }
+  ]
+}
diff --git a/src/components/breadcrumbs/index.hbs b/src/components/breadcrumbs/index.hbs
@@ -0,0 +1,5 @@
+---
+title: Breadcrumbs
+model: breadcrumbs.json
+---
+{{>_breadcrumbs model}}
diff --git a/src/components/typography/_typography.scss b/src/components/typography/_typography.scss
@@ -27,15 +27,15 @@ $nsw-body--link-hover-color: rgba($nsw-tertiary-blue, 0.2);
   }
 
   * + p{
-    margin-top: rem(16px)
+    @include margin-size('md');
   }
 
   blockquote{
     @include font-size('lg');
+    @include margin-size('md');
     margin: 0;
     border-left: solid 6px $nsw-primary-highlight;
     padding: rem(20px) rem(24px);
-    margin-top: rem(16px);
 
     @include breakpoint('sm'){
       margin-left: auto;
@@ -46,9 +46,9 @@ $nsw-body--link-hover-color: rgba($nsw-tertiary-blue, 0.2);
 
   cite {
     @include font-size('sm');
+    @include margin-size('md');
     display: block;
     font-style: normal;
-    margin-top: rem(16px)
   }
 
   cite::before {
@@ -104,6 +104,6 @@ $nsw-body--link-hover-color: rgba($nsw-tertiary-blue, 0.2);
   * + h4,
   * + h5,
   * + h6{
-    margin-top: 1rem;
+    @include margin-size('md');
   }
 }
diff --git a/src/global/helpers/_all.scss b/src/global/helpers/_all.scss
@@ -1,2 +1,2 @@
 @import 'sr-only';
-
+@import 'spacing';
diff --git a/src/global/helpers/_spacing.scss b/src/global/helpers/_spacing.scss
@@ -0,0 +1,3 @@
+.margin-top{
+  @include helper-classes(margin-top, $margin-sizes);
+}
diff --git a/src/global/settings/_settings.scss b/src/global/settings/_settings.scss
@@ -35,14 +35,16 @@ $border-radius:             4px !default;
 $border-width:              1px !default;
 
 // Spacing
-$spacing: (
-  none: 0,
-  xs:   8px,    //0.5rem
-  sm:   16px,   //1rem
-  md:   24px,   //1.5rem
-  lg:   36px,   //2.25rem
-  xl:   60px,   //3.75rem
-  xxl:  88px   //5.5rem
+$margin-sizes: (
+  none:   0,    //0rem
+  xs:     8px,  //0.5rem
+  sm:     12px, //0.8rem
+  md:     16px, //1rem
+  lg:     24px, //1.5rem
+  xl:     32px, //2rem
+  xxl:    48px, //3rem
+  xxxl:   64px, //4rem
+  xxxxl:  80px  //5rem
 ) !default;
 
 // Predefined Colours and their names

diff --git a/src/global/style/_grid.scss b/src/global/style/_grid.scss
@@ -17,7 +17,7 @@
   align-items: stretch;
 
   + .nsw-grid{
-    margin-top: 1rem;
+    @include margin-size('md');
   }
 
   & > .nsw-col{

diff --git a/src/global/tools/_all.scss b/src/global/tools/_all.scss
@@ -1,9 +1,9 @@
+@import 'general';
 @import 'breakpoint';
-@import 'spacing';
-@import 'pixel-to';
 @import 'typography';
 @import 'grid';
 @import 'sr-only';
 @import 'focus';
 @import 'links';
 @import 'buttons';
+@import 'spacing';
diff --git a/src/global/tools/_general.scss b/src/global/tools/_general.scss
@@ -0,0 +1,35 @@
+// sass-lint:disable no-important
+@function rem($value) {
+  @if (unitless($value)) {
+    $value: $value * 1px;
+  }
+
+  @return $value / $base-font-size * 1rem;
+}
+
+@function em($value) {
+  @if (unitless($value)) {
+    $value: $value * 1px;
+  }
+
+  @return $value / $base-font-size * 1em;
+}
+
+// generates modifer classes in the bem syntax
+@mixin helper-classes($attribute, $map) {
+
+  @each $modifier, $value in $map {
+    &--#{$modifier} {
+      #{$attribute}: get-mapped-value($modifier, $map) !important;
+    }
+  }
+}
+
+//gets mapped px values and returns it as rem
+@function get-mapped-value($key, $map){
+  @each $mapkey, $mapvalue in $map {
+    @if $mapkey == $key{
+      @return rem($mapvalue);
+    }
+  }
+}
diff --git a/src/global/tools/_links.scss b/src/global/tools/_links.scss
@@ -7,7 +7,7 @@
 
   &:hover{
     @include nsw-hover;
-    outline: 2px solid $link-hover--outline-color;
+    outline: 4px solid $link-hover--outline-color;
   }
 
   &:focus{

diff --git a/src/global/tools/_pixel-to.scss b/src/global/tools/_pixel-to.scss
diff --git a/src/global/tools/_spacing.scss b/src/global/tools/_spacing.scss
@@ -1,8 +1,10 @@
-// sass-lint:disable no-important
-@mixin spacing-modifiers($attribute: 'padding', $separator: '--') {
-  @each $modifier, $value in $spacing {
-    &#{$separator}#{$modifier} {
-      #{$attribute}: $value !important;
-    }
+// margin-size mixin - returns the margin-size based of the values in $margin-sizes map
+@mixin margin-size($size) {
+  @if $size != 'xs' and $size != 'sm' and $size != 'md' and $size != 'lg' and $size != 'xl' and $size != 'xxl' and $size != 'xxxl' and $size != 'xxxxl' {
+    @error 'NSW-DS margin-size mixin allows the following values for $sizes: xs, sm, md, lg, xl, xxl, xxxl, xxxxl';
+  }
+
+  @if $size {
+    margin-top: get-mapped-value($size, $margin-sizes);
   }
 }