govuk_publishing_components 11.2.0 → 12.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d8c9d9ec6c6487bdef155ae590798d937c6a5107cae8844c82b734d228401519
-  data.tar.gz: 2652dac3fae86a01a886daea03ec694ed975290b5ccd2629a34b99e020a05720
+  metadata.gz: 3ee32f536043a1a2f64756b001e8461fc1d9c1115224355d5c4df4e5e85345fb
+  data.tar.gz: ab008670e129c580ad58822896f218a3d310aba562ffa9bbad94e1ddc2cada38
 SHA512:
-  metadata.gz: f2b354947e964e18326d7077b0ff9bae41db3fd5aa5b1775abd115a30dd1514c04ef1dc7e30d255f7ebf64b3ce059477ea796c60bc1b1f536d7ec0780564fd72
-  data.tar.gz: 4c3d8b859c0d3de97bd21c82754e2538c98721d03a91bf3f8ba16a2ff28fa528c2ca3dae21ba5f7aeb56e772d33e3372137cdd8fb6d6cfa97d9bb40426c70863
+  metadata.gz: 478e64833260a3752fe680760bdfcb1b227ac8cd9cf3cacb53de5e76d8a2fc4588b1d631f223029c033e47caae2eba1abd667faf544b9b288a177fc354ba3039
+  data.tar.gz: f58a472db124e4eef3ec5f79c1087d2e112d22d4150b80cf98ba2e5d030861ad2718655c91e48835a67bdec4da05089c4fb05fac938398d3f850b2aeb09d460b

data/app/assets/javascripts/component_guide/application.js

@@ -1,3 +1,3 @@
-//= require govuk/modules
+//= require ./no_slimmer
 //= require_tree ./vendor
 //= require_tree .

data/app/assets/javascripts/component_guide/no_slimmer.js

@@ -0,0 +1,15 @@
+// This adds in javascript that initialiases components and dependencies
+// that would normally be provided by slimmer
+//= require jquery/dist/jquery
+//= require govuk/modules
+
+$(document).ready(function () {
+  'use strict'
+
+  GOVUK.modules.start()
+
+  // Static has a Toggle module in here we have a GemToggle module, we can't
+  // easily change govspeak to use GemToggle but we can use the GemToggle module
+  var gemToggle = new GOVUK.Modules.GemToggle();
+  gemToggle.start($("[data-module=toggle]"));
+})

data/app/assets/javascripts/govuk_publishing_components/admin_scripts.js

@@ -1,4 +1,2 @@
-//= require govuk-frontend/all.js
-
-// Initialise all GOVUKFrontend components
-window.GOVUKFrontend.initAll()
+//= require component_guide/no_slimmer
+//= require govuk_publishing_components/all_components

data/app/assets/javascripts/govuk_publishing_components/all_components.js

@@ -1,2 +1,6 @@
 //= require_tree ./lib
 //= require_tree ./components
+//= require govuk-frontend/all.js
+
+// Initialise all GOVUKFrontend components
+window.GOVUKFrontend.initAll()

data/app/assets/stylesheets/component_guide/application.scss

@@ -1,32 +1,35 @@
 // This file contains the styles for the Component Guide.
 
-// `govuk_frontend_toolkit`
-@import "measurements";
-@import "grid_layout";
-@import "typography";
-@import "colours";
-
-$border-color: #ccc;
-
-.govuk-component-guide-wrapper {
-  padding-bottom: $gutter * 1.5;
+@import "govuk_publishing_components/components/helpers/govuk-frontend-settings";
+@import "govuk-frontend/settings/all";
+@import "govuk-frontend/tools/all";
+@import "govuk-frontend/helpers/all";
+@import "govuk-frontend/core/all";
+
+.component-guide-wrapper {
+  padding-bottom: $govuk-gutter * 1.5;
 }
 
 .component-list {
-  margin-left: 20px;
+  @include govuk-text-colour;
+  @extend %govuk-list--bullet;
 
   li {
-    @include core-19;
-    margin-bottom: $gutter-half;
+    @include govuk-font($size: 19);
+    margin-bottom: $govuk-gutter-half;
+  }
+
+  p {
+    margin: 0;
   }
 }
 
 .component-body {
-  margin-bottom: $gutter * 1.5;
+  margin-bottom: $govuk-gutter * 1.5;
 }
 
 .component-doc {
-  @include core-16;
+  @include govuk-font($size: 16);
 
   .component-doc-h2:first-child {
     margin-top: 0;
@@ -34,70 +37,63 @@ $border-color: #ccc;
 }
 
 .component-violation {
-  border: 3px solid $error-colour;
-  margin: 0 0 $gutter;
-  padding: $gutter $gutter;
+  @include govuk-text-colour;
+  border: 3px solid $govuk-error-colour;
+  margin: 0 0 $govuk-gutter;
+  padding: $govuk-gutter $govuk-gutter;
 
   .component-violation__title {
-    @include bold-24;
+    @include govuk-font($size: 24, $weight: bold);
+    margin: 0;
   }
 
   .component-violation__link {
     display: block;
-    @include bold-19;
-    color: $error-colour;
-    margin: $gutter-half 0;
+    @include govuk-font($size: 19, $weight: bold);
+    color: $govuk-error-colour;
+    margin: $govuk-gutter-half 0;
   }
 }
 
 .component-doc-h2 {
-  @include bold-27;
-  margin: ($gutter * 1.5) 0 $gutter;
+  @include govuk-text-colour;
+  @include govuk-font($size: 27, $weight: bold);
+  margin: ($govuk-gutter * 1.5) 0 $govuk-gutter;
 
   small {
-    @include bold-16;
+    @include govuk-font($size: 16, $weight: bold);
   }
 }
 
 .component-doc-h3 {
-  margin: $gutter 0 $gutter-half;
-  @include bold-19;
-}
-
-.component-guide-preview {
-  padding: 30px 0;
-
-  .preview-title {
-    margin-bottom: 1em;
-    @include bold-16;
-
-    a {
-      color: $black;
-    }
-  }
+  @include govuk-text-colour;
+  margin: $govuk-gutter 0 $govuk-gutter-half;
+  @include govuk-font($size: 19, $weight: bold);
 }
 
 .component-call {
-  margin-top: $gutter-half;
-  margin-bottom: $gutter-half;
+  margin-top: $govuk-gutter-half;
+  margin-bottom: $govuk-gutter-half;
 
   font-family: Consolas, Monaco, 'Andale Mono', monospace;
   font-size: 16px;
   line-height: 1.5;
-  border: 1px solid $border-colour;
+  border: 1px solid $govuk-border-colour;
 
   &[contenteditable]:hover {
     cursor: text;
   }
 
   &[contenteditable]:focus {
-    outline: 3px solid $focus-colour;
+    outline: 3px solid $govuk-focus-colour;
   }
 
   > pre {
-    padding: $gutter;
+    margin: 0;
+    padding: $govuk-gutter;
     max-height: 300px;
     overflow: auto;
+    font-family: inherit;
 
     > code {
       font-family: inherit;
@@ -119,26 +115,26 @@ $border-color: #ccc;
   }
 
   &.dark-background {
-    background-color: $govuk-blue;
+    background-color: govuk-colour("blue");
   }
 
   &.component-output {
     padding: 0;
   }
 
-  padding: ($gutter * 1.5) $gutter $gutter;
-  border: 1px solid $border-colour;
+  padding: ($govuk-gutter * 1.5) $govuk-gutter $govuk-gutter;
+  border: 1px solid $govuk-border-colour;
   position: relative;
 
   &:before {
-    @include core-14;
+    @include govuk-font($size: 14);
     content: attr(data-content);
     position: absolute;
     top: 0;
     left: 0;
     padding: 0.21053em 0.78947em;
-    background: $border-colour;
-    color: $black;
+    background: $govuk-border-colour;
+    color: govuk-colour("black");
     font-weight: bold;
   }
 }
@@ -154,24 +150,31 @@ $border-color: #ccc;
 
 .component-guide-preview--violation,
 .component-guide-preview--warning {
-  margin-top: $gutter-half;
-  @include core-19;
+  @include govuk-text-colour;
+  margin-top: $govuk-gutter-half;
+
+  @include govuk-font($size: 19);
 
   &:empty {
     display: none;
   }
 
   h3 {
-    @include bold-19;
+    @include govuk-font($size: 19, $weight: bold);
   }
 
   p,
   h3 {
-    margin-bottom: $gutter / 2;
+    margin-top: 0;
+    margin-bottom: $govuk-gutter / 2;
+  }
+
+  h3 a {
+    @extend %govuk-link;
   }
 
   h3:not(:first-child) {
-    margin-top: $gutter;
+    margin-top: $govuk-gutter;
   }
 
   .selector {
@@ -180,32 +183,33 @@ $border-color: #ccc;
 }
 
 .component-guide-preview--warning {
-  border-color: $yellow;
+  border-color: govuk-colour("yellow");
 
   &:before {
-    background-color: $yellow;
+    background-color: govuk-colour("yellow");
   }
 }
 
 .component-guide-preview--violation {
-  border-color: $red;
+  border-color: govuk-colour("red");
 
   &:before {
-    background-color: $red;
-    color: $white;
+    background-color: govuk-colour("red");
+    color: govuk-colour("white");
   }
 }
 
 .examples {
   .component-example {
-    margin: 0 0 $gutter * 1.5;
+    margin: 0 0 $govuk-gutter * 1.5;
 
     .example-title {
-      @include bold-24;
-      margin: $gutter-half 0;
+      @include govuk-text-colour;
+      @include govuk-font($size: 24, $weight: bold);
+      margin: $govuk-gutter-half 0;
 
       small {
-        @include bold-16;
+        @include govuk-font($size: 16, $weight: bold);
       }
     }
   }
@@ -213,7 +217,7 @@ $border-color: #ccc;
 
 // Preview Page Styling
 html {
-  background: $white;
+  background: govuk-colour("white");
 }
 
 .hide-header-and-footer {
@@ -228,15 +232,17 @@ html {
 }
 
 .component-guide-preview-page {
-  padding: ($gutter * 1.5) 0;
+  padding: ($govuk-gutter * 1.5) 0;
   position: relative;
 
   .preview-title {
+    margin-top: 0;
     margin-bottom: 1em;
-    @include bold-16;
+    @include govuk-font($size: 16, $weight: bold);
 
     a {
-      color: $black;
+      @include govuk-link-common;
+      @include govuk-link-style-text;
     }
   }
 }
@@ -252,20 +258,20 @@ html {
 // Rouge syntax highlighting
 // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
 
-$code-00: scale-color($highlight-colour, $lightness:50%); // Default Background
+$code-00: scale-color(govuk-colour("grey-4"), $lightness:50%); // Default Background
 $code-01: #f5f5f5; // Lighter Background (Unused)
 $code-02: #bfc1c3; // Selection Background
-$code-03: darken($secondary-text-colour, 2%); // Comments, Invisibles, Line Highlighting
+$code-03: darken($govuk-secondary-text-colour, 2%); // Comments, Invisibles, Line Highlighting
 $code-04: #e8e8e8; // Dark Foreground (Unused)
-$code-05: $text-colour; // Default Foreground, Caret, Delimiters, Operators
+$code-05: $govuk-text-colour; // Default Foreground, Caret, Delimiters, Operators
 $code-06: #ffffff; // Light Foreground (Unused)
 $code-07: #ffffff; // Light Background (Unused)
 
 $code-08: #ae5f3d; // Variables, XML Tags, Markup Link Text, Markup Lists
 $code-09: #0E7754; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
 $code-0a: #4C4077; // Classes, Markup Bold, Search Text Background
-$code-0b: $govuk-blue; // Strings, Inherited Class, Markup Code
-$code-0c: $govuk-blue; // Support, Regular Expressions, Escape Characters, Markup Quotes
+$code-0b: govuk-colour("blue"); // Strings, Inherited Class, Markup Code
+$code-0c: govuk-colour("blue"); // Support, Regular Expressions, Escape Characters, Markup Quotes
 $code-0d: #4C4077; // Functions, Methods, Attribute IDs, Headings
 $code-0e: #a71d5d; // Keywords, Storage, Selector, Markup Italic
 $code-0f: #C92424; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?> (Unused)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -1,3 +1,7 @@
+// Include all of the GOV.UK Frontend styles. This includes fonts, and individual components.
+@import "components/helpers/govuk-frontend-settings";
+@import "govuk-frontend/all";
+
 // This is the file that the application needs to include in order to use
 // the components.
 

data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -1,7 +1,6 @@
 @import "design-patterns/breadcrumbs";
 @import "mixins/back-arrow";
 @import "mixins/media-down";
-@import "mixins/touch-friendly-links";
 
 .gem-c-breadcrumbs {
   // reset the default browser styles
@@ -11,11 +10,28 @@
   }
 
   @include breadcrumbs;
-  @include touch-friendly-links();
+
+  .gem-c-breadcrumbs__item {
+    @include govuk-text-colour;
+  }
+
+  .gem-c-breadcrumbs__link {
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+  }
 
   .gem-c-breadcrumbs--current {
-    color: $secondary-text-colour;
-    text-decoration: none;
+    &:link,
+    &:visited,
+    &:hover,
+    &:active {
+      color: $secondary-text-colour;
+      text-decoration: none;
+    }
+
+    &:focus {
+      text-decoration: none;
+    }
   }
 
   @include media-down(mobile) {
@@ -39,5 +55,10 @@
 
 .gem-c-breadcrumbs--current.gem-c-breadcrumbs--inverse,
 .gem-c-breadcrumbs .gem-c-breadcrumbs--inverse {
-  color: $white;
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: $white;
+  }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss

@@ -29,6 +29,8 @@ $gem-destructive-button-border-colour: govuk-colour("black");
 }
 
 .gem-c-button__info-text {
+  @include govuk-text-colour;
+  @include govuk-font($size: 16);
   display: block;
   max-width: 14em;
   margin-top: .5em;

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -4,12 +4,32 @@
   // Always render the contents list above a
   // back to contents link
   position: relative;
-  margin-bottom: $gutter-two-thirds;
+  margin: 0 0 $gutter-two-thirds 0;
   z-index: 1;
   background: $white;
   box-shadow: 0 20px 15px -10px $white;
 }
 
+.gem-c-contents-list__title {
+  @include govuk-text-colour;
+  @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
+  margin: 0;
+}
+
+.gem-c-contents-list__list,
+.gem-c-contents-list__nested-list {
+  @include govuk-text-colour;
+  @include govuk-font($size: 16);
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.gem-c-contents-list__link {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+}
+
 .gem-c-contents-list--no-underline {
   .gem-c-contents-list__link {
     text-decoration: none;