chore(packages): copy changes to packages

alphagov · Jan 10, 2018 · a87bd74 · a87bd74
1 parent c53f493
commit a87bd74
Show file tree

Hide file tree

Showing 87 changed files with 1,022 additions and 2,609 deletions.
diff --git a/packages/all/package.json b/packages/all/package.json
@@ -5,7 +5,7 @@
     "@govuk-frontend/back-link": "^0.0.19-alpha",
     "@govuk-frontend/breadcrumbs": "^0.0.19-alpha",
     "@govuk-frontend/button": "^0.0.19-alpha",
-    "@govuk-frontend/checkbox": "^0.0.19-alpha",
+    "@govuk-frontend/checkboxes": "^0.0.20-alpha",
     "@govuk-frontend/cookie-banner": "^0.0.19-alpha",
     "@govuk-frontend/date-input": "^0.0.19-alpha",
     "@govuk-frontend/details": "^0.0.19-alpha",
@@ -21,7 +21,7 @@
     "@govuk-frontend/panel": "^0.0.19-alpha",
     "@govuk-frontend/phase-banner": "^0.0.19-alpha",
     "@govuk-frontend/previous-next": "^0.0.19-alpha",
-    "@govuk-frontend/radios": "^0.0.19-alpha",
+    "@govuk-frontend/radios": "^0.0.20-alpha",
     "@govuk-frontend/select": "^0.0.19-alpha",
     "@govuk-frontend/skip-link": "^0.0.19-alpha",
     "@govuk-frontend/table": "^0.0.19-alpha",

diff --git a/packages/back-link/README.md b/packages/back-link/README.md
@@ -1,7 +1,3 @@
-<div class="govuk-o-width-container">
-
-<div class="govuk-o-main-wrapper">
-
 # Back link
 
 ## Introduction
@@ -34,32 +30,28 @@ To consume the back-link component you must be running npm version 5 or above.
 
 ## Installation
 
-    npm install --save @govuk-frontend/back-link
+      npm install --save @govuk-frontend/back-link
 
 ## Requirements
 
 ### Build tool configuration
 
 When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
 
-<pre>  `.pipe(sass({
+      .pipe(sass({
         includePaths: 'node_modules/'
-    }))` 
-  </pre>
+      }))
 
 ### Static asset path configuration
 
 To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js:
 
-<pre>  `app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))` 
-  </pre>
+      app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))
 
 ## Component arguments
 
 If you are using Nunjucks,then macros take the following arguments
 
-<div>
-
 <table class="govuk-c-table">
 
 <thead class="govuk-c-table__head">
@@ -144,43 +136,30 @@ If you are using Nunjucks,then macros take the following arguments
 
 </table>
 
-</div>
-
 ### Setting up Nunjucks views and paths
 
 Below is an example setup using express configure views:
 
-<pre>  `nunjucks.configure('node_modules/@govuk-frontend`, {
-    autoescape: true,
-    cache: false,
-    express: app
-  })` 
-  </pre>
+      nunjucks.configure('node_modules/@govuk-frontend', {
+        autoescape: true,
+        cache: false,
+        express: app
+      })
 
 ## Getting updates
 
 To check whether you have the latest version of the button run:
 
-    npm outdated @govuk-frontend/back-link
+      npm outdated @govuk-frontend/back-link
 
 To update the latest version run:
 
-    npm update @govuk-frontend/back-link
+      npm update @govuk-frontend/back-link
 
 ## Contribution
 
 Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
 
-## Acknowledgements/credits
-
-*   GDS developers
-*   Jani Kraner
-*   Gemma Leigh
-
 ## License
 
-MIT
-
-</div>
-
-</div>
+MIT
diff --git a/packages/breadcrumbs/README.md b/packages/breadcrumbs/README.md
@@ -1,7 +1,3 @@
-<div class="govuk-o-width-container">
-
-<div class="govuk-o-main-wrapper">
-
 # Breadcrumbs
 
 ## Introduction
@@ -210,32 +206,28 @@ Please note, this component depends on @govuk-frontend/globals and @govuk-fronte
 
 ## Installation
 
-    npm install --save @govuk-frontend/breadcrumbs
+      npm install --save @govuk-frontend/breadcrumbs
 
 ## Requirements
 
 ### Build tool configuration
 
 When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
 
-<pre>  `.pipe(sass({
+      .pipe(sass({
         includePaths: 'node_modules/'
-    }))` 
-  </pre>
+      }))
 
 ### Static asset path configuration
 
 To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js:
 
-<pre>  `app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))` 
-  </pre>
+      app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))
 
 ## Component arguments
 
 If you are using Nunjucks,then macros take the following arguments
 
-<div>
-
 <table class="govuk-c-table">
 
 <thead class="govuk-c-table__head">
@@ -332,43 +324,30 @@ If you are using Nunjucks,then macros take the following arguments
 
 </table>
 
-</div>
-
 ### Setting up Nunjucks views and paths
 
 Below is an example setup using express configure views:
 
-<pre>  `nunjucks.configure('node_modules/@govuk-frontend`, {
-    autoescape: true,
-    cache: false,
-    express: app
-  })` 
-  </pre>
+      nunjucks.configure('node_modules/@govuk-frontend', {
+        autoescape: true,
+        cache: false,
+        express: app
+      })
 
 ## Getting updates
 
 To check whether you have the latest version of the button run:
 
-    npm outdated @govuk-frontend/breadcrumbs
+      npm outdated @govuk-frontend/breadcrumbs
 
 To update the latest version run:
 
-    npm update @govuk-frontend/breadcrumbs
+      npm update @govuk-frontend/breadcrumbs
 
 ## Contribution
 
 Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
 
-## Acknowledgements/credits
-
-*   GDS developers
-*   Jani Kraner
-*   Gemma Leigh
-
 ## License
 
-MIT
-
-</div>
-
-</div>
+MIT
diff --git a/packages/breadcrumbs/_breadcrumbs.scss b/packages/breadcrumbs/_breadcrumbs.scss
@@ -1,6 +1,22 @@
 @import "@govuk-frontend/globals/common";
 
 @include exports("breadcrumbs") {
+
+  // Size of chevron (excluding border)
+  $chevron-size: 7px;
+
+  // Size of chevron border
+  $chevron-border-width: 1px;
+
+  // Colour of chevron
+  $chevron-border-colour: $govuk-secondary-text-colour;
+
+  // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
+  // of length 8 (7px + 1px border):
+  //
+  // √(8² + 8²) * 0.5 ≅ 5.655
+  $chevron-altitude-calculated: 5.655px;
+
   .govuk-c-breadcrumbs {
     @include govuk-font-regular-16;
     @include govuk-text-colour;
@@ -18,26 +34,77 @@
   }
 
   .govuk-c-breadcrumbs__list-item {
+
+    display: inline-block;
+    position: relative;
+
     margin-bottom: $govuk-spacing-scale-1;
+
+    // Add both margin and padding such that the chevron appears centrally
+    // between each breadcrumb item
     margin-left: $govuk-spacing-scale-2;
-    padding-left: $govuk-spacing-scale-3;
+    padding-left: $govuk-spacing-scale-2 + $chevron-altitude-calculated;
+
     float: left;
-    background-image: file-url("separator.png");
+  }
+
+    // Create a chevron using a box with borders on two sides, rotated 45deg.
+    .govuk-c-breadcrumbs__list-item:before {
+      content: "";
+      display: block;
+
+      position: absolute;
+
+      // Begin adjustments for font baseline offset
+      // These should be reverted when the font is updated with the correct
+      // baseline
 
-    @include govuk-h-device-pixel-ratio {
-      background-image: file-url("separator-2x.png");
-      background-size: 6px 11px;
+      // top: 0;
+      // bottom: 0;
+
+      top: -1px;
+      bottom: 1px;
+
+      // End adjustments for font baseline offset
+
+      // Offset by the difference between the width of the non-rotated square
+      // and its width when rotated
+      left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width);
+
+      width: $chevron-size;
+      height: $chevron-size;
+
+      margin: auto 0;
+
+      -webkit-transform: rotate(45deg);
+
+          -ms-transform: rotate(45deg);
+
+              transform: rotate(45deg);
+
+      border: solid;
+      border-width: $chevron-border-width $chevron-border-width 0 0;
+      border-color: $chevron-border-colour;
+
+      // Fall back to a greater than sign for IE8
+      @include ie(8) {
+        content: "\003e"; // Greater than sign (>)
+        width: auto;
+        height: auto;
+        border: 0;
+        color: $chevron-border-colour;
+      }
     }
 
-    background-repeat: no-repeat;
-    background-position: 0% 50%;
-  }
+    .govuk-c-breadcrumbs__list-item:first-child {
+      margin-left: 0;
+      padding-left: 0;
+    }
 
-  .govuk-c-breadcrumbs__list-item:first-child {
-    margin-left: 0;
-    padding-left: 0;
-    background-image: none;
-  }
+      .govuk-c-breadcrumbs__list-item:first-child:before {
+        content: none;
+        display: none;
+      }
     .govuk-c-breadcrumbs__link:link,
     .govuk-c-breadcrumbs__link:visited,
     .govuk-c-breadcrumbs__link:hover,