govuk_publishing_components 17.6.1 → 17.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 326e0dc7a825b9bb97c66d22745196ef226d0d69d6ce6a615359b77a2cda2018
-  data.tar.gz: e8e284660bf9f21af02e2e49f2e361cebdd81a3242f3bb10f893b4d1875b5468
+  metadata.gz: 5a3c34586d67a16119aeac7a55f462e222d46afedbc1676d9189de64879c69b6
+  data.tar.gz: 8d3435fb34861e37f3be74f810b8c347142875be94555a35e1e99be964078056
 SHA512:
-  metadata.gz: b0c044df17483b9628fb9c3ded6f7cf4f94953fc6dc37d5a78a0dd11989b1b3c5b9c913e0d359324d0fd1bfcb2d3a0fc5bcc5687accd457e6db8ba865ec26519
-  data.tar.gz: ed146dd8af8b4dfad569bc10c079881104fe3a81afe9660e902f29b1079b79833b96832bc7d5550253ef6830ac77c28b3a3531efec245f0194424c50fae5158f
+  metadata.gz: 35a3fda9195eb7f0449af19ce54086cbb4371a44c352c90395b96092716d5799d1b8438d4b35a2e27d2e3e95f7f6d91eb47df322c1ce5f8760cb792ef2a16444
+  data.tar.gz: 79dd0c477f41e0e0f9966765e9623ab14860d06c76c6139f65d77e0ddee5f555ceec1bb9619b394a37c6edafd0d85c28d6ec4bc4e78b6816857ae7b5a9465f77

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss

@@ -1,6 +1,6 @@
 // Override govspeak styles with HTML publication specific ones
 .gem-c-govspeak-html-publication {
-  margin-bottom: $gutter * 1.5;
+  margin-bottom: govuk-spacing(6) * 1.5;
   z-index: 2;
 
   // This fixes the positioning of the sticky element. The reason it's done on the parent element
@@ -22,25 +22,25 @@
     }
 
     .stat-headline:first-child {
-      margin-top: $gutter;
+      margin-top: govuk-spacing(6);
 
       @include govuk-media-query($from: tablet) {
-        margin-top: ($gutter * 2) + $gutter-two-thirds;
+        margin-top: govuk-spacing(9) + govuk-spacing(4);
       }
     }
 
     h2,
     h3 {
-      margin-top: $gutter;
+      margin-top: govuk-spacing(6);
 
       @include govuk-media-query($from: tablet) {
-        margin-top: ($gutter * 2) + $gutter-two-thirds;
+        margin-top: govuk-spacing(9) + govuk-spacing(4);
       }
     }
 
     h2:first-child,
     h3:first-child {
-      margin-top: $gutter-two-thirds;
+      margin-top: govuk-spacing(4);
 
       @include govuk-media-query($from: tablet) {
         margin-top: 0;
@@ -67,7 +67,7 @@
 
       .numeric {
         text-align: right;
-        font-family: $nta-light-tabular;
+        @include govuk-font(14, $weight: regular, $tabular: true);
       }
 
       // make all elements inside thead look the same
@@ -75,12 +75,16 @@
       // and make all of thead and tfoot stand out
       thead,
       tfoot {
-        background-color: $grey-3;
+        background-color: govuk-colour("grey-3");
       }
 
       thead th,
       thead td {
-        font-weight: bold;
+        @include govuk-font(14, $weight: bold, $tabular: true);
+
+        &.numeric {
+          @include govuk-font(14, $weight: bold, $tabular: true);
+        }
       }
 
       // don't make `th`s bold unless they are a section heading or a (sub)total row
@@ -93,30 +97,30 @@
       // is intentionally small and not balanced with other padding
       // as tables can be quite wide
       tr > :first-child {
-        padding-left: $gutter-one-third / 2;
+        padding-left: govuk-spacing(1);
       }
 
       // add spacing so that groupings are clearer
       tr.section-heading > * {
         font-weight: bold;
-        padding-top: $gutter;
+        padding-top: govuk-spacing(6);
       }
 
       // ideally this should be just a top margin on the tfoot
       // but as that is very tricky, this is more complex
       tbody:last-of-type tr:last-child > *,
       tfoot ~ tbody:last-of-type tr:last-child > * {
-        padding-bottom: $gutter;
+        padding-bottom: govuk-spacing(6);
       }
 
       tbody:last-child tr:last-child > * {
-        padding-bottom: $gutter-one-third;
+        padding-bottom: govuk-spacing(2);
       }
 
       // total and subtotal rows
       tr.subtotal > *,
       tr.total > * {
-        border-top: 3px solid $grey-2;
+        border-top: 3px solid govuk-colour("grey-2");
       }
 
       tr.total > *,
@@ -127,7 +131,7 @@
       // the total is usually in the tfoot, so already has that background colour
       // but when it's used inside the tbody, it should also be highlighted
       tr.total {
-        background-color: $grey-3;
+        background-color: govuk-colour("grey-3");
       }
     }
     // sass-lint:enable no-qualifying-elements

data/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss

@@ -6,3 +6,22 @@
     margin-right: govuk-spacing(2);
   }
 }
+
+.gem-c-phase-banner--inverse {
+  background: $govuk-brand-colour;
+
+  .govuk-phase-banner__content__tag {
+    background: govuk-colour("white");
+    color: $govuk-brand-colour;
+  }
+
+  .govuk-phase-banner__content__app-name,
+  .govuk-phase-banner__text,
+  .govuk-link {
+    color: govuk-colour("white");
+
+    &:focus {
+      color: govuk-colour("black");
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss

@@ -8,7 +8,7 @@ $high-alert-border: #cc0000;
   padding: 1em;
   text-align: left;
 
-  @include device-pixel-ratio {
+  @include govuk-device-pixel-ratio {
     background-image: image-url("icon-information-2x.png");
     background-size: 27px 27px;
   }
@@ -24,7 +24,7 @@ $high-alert-border: #cc0000;
   }
 
   &.high-alert {
-    background-color: $panel-colour;
+    background-color: govuk-colour("grey-3");
     border-color: $high-alert-border;
   }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss

@@ -19,9 +19,9 @@
 
   .attachment {
     position: relative;
-    margin: $gutter 0;
-    padding: $gutter-half 0 0 ($thumbnail-width + $gutter);
-    @extend %contain-floats;
+    margin: govuk-spacing(6) 0;
+    padding: govuk-spacing(3) 0 0 ($thumbnail-width + govuk-spacing(6));
+    @include govuk-clearfix;
 
     &:first-child {
       margin-top: 0;
@@ -29,32 +29,30 @@
     }
 
     .attachment-thumb {
-      $thumb-border-width: $gutter-one-third / 2;
-
       position: relative;
       float: left;
-      margin-top: $thumb-border-width;
-      margin-left: -($thumbnail-width + $gutter - $thumb-border-width);
-      padding-bottom: $gutter-half;
+      margin-top: $govuk-border-width;
+      margin-left: -($thumbnail-width + govuk-spacing(6) - $govuk-border-width);
+      padding-bottom: govuk-spacing(3);
 
       img {
         display: block;
         width: $thumbnail-width;
         height: 140px;
-        background: $white;
-        outline: $thumb-border-width solid transparentize($black, .9);
+        background: govuk-colour("white");
+        outline: $govuk-border-width solid transparentize(govuk-colour("black"), .9);
 
-        @include ie-lte(8) {
+        @include govuk-if-ie8 {
           // IE8 incorrectly asserts the "max-width: 100%" rule to be 0
           // because of the collapsed width on its floating container
           // Reset the max-width so that thumbnails render at the specified
           // width above.
           // http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/
           max-width: none;
-          border: $thumb-border-width solid $grey-3;
+          border: $govuk-border-width solid govuk-colour("grey-3");
         }
 
-        @include box-shadow(0 2px 2px rgba($black, .4));
+        box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4);
       }
     }
 
@@ -65,7 +63,7 @@
       }
 
       p {
-        margin: $gutter-one-third 0;
+        margin: govuk-spacing(2) 0;
       }
 
       .metadata {
@@ -88,7 +86,7 @@
       }
 
       .preview {
-        padding-right: $gutter-half;
+        padding-right: govuk-spacing(3);
       }
 
       .opendocument-help {
@@ -109,12 +107,12 @@
   }
 
   &.direction-rtl .attachment {
-    padding: $gutter-half ($thumbnail-width + $gutter) 0 0;
+    padding: govuk-spacing(3) ($thumbnail-width + govuk-spacing(6)) 0 0;
 
     .attachment-thumb {
       float: right;
       margin-left: 0;
-      margin-right: (($thumbnail-width * -1) - $gutter-half);
+      margin-right: (($thumbnail-width * -1) - govuk-spacing(3));
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss

@@ -9,7 +9,7 @@
 .gem-c-govspeak {
   .call-to-action {
     margin: 2em 0;
-    background-color: $panel-colour;
+    background-color: govuk-colour("grey-3");
     padding: 2em;
 
     &:first-child {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -6,16 +6,8 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
-// Disable linting for vendor asset
-// scss-lint:disable all
-// sass-lint:disable-all
-/*
- * magna-charta example stylesheet
- * https://github.com/alphagov/magna-charta
- *
- * Author: Tim Paul
- * Licensed under the MIT license.
- */
+// adapted from magna-charta example stylesheet
+// https://github.com/alphagov/magna-charta/blob/master/demo/stylesheets/magna-charta.css
 
 .gem-c-govspeak {
   // DEFAULT CHART STYLES
@@ -32,24 +24,11 @@
 
   // CHART COLOUR SCHEME
 
-  @import "colours"; // Cabinet Office colour palette (feel free to choose your own)
-  $chart-border: $white; // Chart border colour
-  $key-border: $white; // Key border colour
-  $bar-colours: $govuk-blue, $turquoise, $green, $grass-green, $yellow, $orange, $red, $mellow-red;
-
-  // HELPER MIXINS
-
-  @mixin visually-hidden {
-    // Hides content visually, but not from screen readers
-    position: absolute !important;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-    clip: rect(1px, 1px, 1px, 1px);
-    padding: 0 !important;
-    border: 0 !important;
-    height: 1px !important;
-    width: 1px !important;
-    overflow: hidden;
-  }
+  $chart-border: govuk-colour("white"); // Chart border colour
+  $key-border: govuk-colour("white"); // Key border colour
+  $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-red");
+  $bar-cell-colour: #ebebeb;
+  $bar-outdented-colour: #111111;
 
   // CHART STYLES
   .mc-chart {
@@ -73,7 +52,7 @@
 
     // KEY STYLES
     .mc-thead {
-      background-color: #ffffff;
+      background-color: govuk-colour("white");
       display: table-header-group;
       padding: $bar-spacing;
       border: 1px solid $key-border;
@@ -151,7 +130,7 @@
           text-align: left;
           padding: $bar-padding 0;
           margin-bottom: 1px;
-          color: $white;
+          color: govuk-colour("white");
           text-indent: $bar-padding;
         }
 
@@ -196,7 +175,7 @@
       .mc-stacked-total {
         padding: $bar-padding 0;
         background-color: transparent !important;
-        color: $black;
+        color: govuk-colour("black");
         display: inline-block;
         text-indent: 5px;
       }
@@ -228,7 +207,8 @@
       }
     }
 
-    .mc-td, .mc-th {
+    .mc-td,
+    .mc-th {
       padding: 0;
       padding-right: $bar-spacing;
       margin-right: $stack-spacing;
@@ -236,11 +216,11 @@
 
       &.mc-bar-cell {
         display: block;
-        background-color: #ebebeb; // Just for testing
+        background-color: $bar-cell-colour; // Just for testing
         text-align: left;
         padding: $bar-padding 0;
         margin-bottom: 1px;
-        color: $white;
+        color: govuk-colour("white");
         text-indent: 4px;
         line-height: 1.5;
       }
@@ -248,7 +228,7 @@
 
     .mc-bar-outdented {
       span {
-        color: #111111;
+        color: $bar-outdented-colour;
       }
     }
 
@@ -266,15 +246,13 @@
 
     // OUTDENTED BAR VALUES
     &.mc-outdented {
-      .mc-tbody {
-        .mc-tr {
-          .mc-bar-cell {
-            color: #111111;
-          }
+      .mc-tr {
+        .mc-bar-cell {
+          color: $bar-cell-colour;
+        }
 
-          .mc-bar-negative {
-            text-align: left;
-          }
+        .mc-bar-negative {
+          text-align: left;
         }
       }
     }
@@ -300,7 +278,7 @@
   // Hides the original table
   .visually-hidden,
   .visually-hidden caption {
-    @include visually-hidden;
+    @include govuk-visually-hidden;
 
     // It's reapplied to captions because Firefox can't hide
     // table captions unless it's applied directly to it. Go figure.

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss

@@ -9,19 +9,19 @@
   // .address is used by the `$A` markdown pattern
   .address,
   .contact {
-    border-left: 1px solid $border-colour;
-    padding-left: $gutter-half;
-    margin-bottom: $gutter;
-    margin-top: $gutter;
+    border-left: 1px solid govuk-colour("grey-2");
+    padding-left: govuk-spacing(3);
+    margin-bottom: govuk-spacing(6);
+    margin-top: govuk-spacing(6);
   }
 
   .contact {
-    @extend %contain-floats;
+    @include govuk-clearfix;
     position: relative;
 
     .content {
       float: none;
-      width: $full-width;
+      width: 100%;
 
       h3 {
         @include govuk-font($size: 19, $weight: bold);

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss

@@ -7,7 +7,7 @@
 
 .gem-c-govspeak {
   .example {
-    border-left: 1em solid $panel-colour;
+    border-left: 1em solid govuk-colour("grey-3");
     padding: 1em 0 1em 1em;
     margin: 2em 0;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss

@@ -11,9 +11,9 @@
 
 .gem-c-govspeak {
   .footnotes {
-    border-top: 1px solid $border-colour;
-    margin-top: $gutter;
-    padding-top: $gutter-one-third;
+    border-top: 1px solid govuk-colour("grey-2");
+    margin-top: govuk-spacing(6);
+    padding-top: govuk-spacing(2);
 
     ol {
       margin-top: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss

@@ -16,7 +16,7 @@
     min-height: 2.5em;
     padding: 0 0 0 2.5em;
 
-    @include device-pixel-ratio {
+    @include govuk-device-pixel-ratio {
       background-image: image-url("icon-file-download-2x.png");
       background-size: 25px 25px;
     }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss

@@ -8,21 +8,21 @@
   img {
     width: auto;
     height: auto;
-    max-width: $full-width;
+    max-width: 100%;
   }
 
   figure {
-    width: $full-width;
+    width: 100%;
     clear: both;
     overflow: hidden;
-    padding: $gutter-one-third 0 0;
+    padding: govuk-spacing(2) 0 0;
 
     img {
       display: inline;
       text-align: center;
       width: auto;
       height: auto;
-      max-width: $full-width;
+      max-width: 100%;
     }
 
     figcaption {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss

@@ -8,7 +8,7 @@
 
 .gem-c-govspeak {
   .info-notice {
-    border-left: 1em solid $panel-colour;
+    border-left: 1em solid govuk-colour("grey-3");
     padding: 1em 0 1em 1em;
     margin: 2em 0;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss

@@ -19,7 +19,7 @@
     }
 
     ol {
-      margin: 10px 0 10px $gutter;
+      margin: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
       list-style: none;
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss

@@ -1,6 +1,6 @@
 .gem-c-govspeak  .place {
   margin: 1.5em 0;
-  border-bottom: solid 1px $border-colour;
+  border-bottom: solid 1px govuk-colour("grey-2");
   padding-bottom: 1.5em;
 
   .address {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss

@@ -7,12 +7,12 @@
 
 .gem-c-govspeak {
   .stat-headline {
-    margin-bottom: $gutter-half;
-    margin-top: $gutter-half;
+    margin-bottom: govuk-spacing(3);
+    margin-top: govuk-spacing(3);
 
     @include govuk-media-query($from: tablet) {
-      margin-bottom: $gutter-two-thirds;
-      margin-top: $gutter-two-thirds;
+      margin-bottom: govuk-spacing(4);
+      margin-top: govuk-spacing(4);
     }
 
     p {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss

@@ -14,7 +14,7 @@
       &:nth-child(#{$i}) {
         background-image: image-url("icon-steps/icon-step-#{$i}.png");
 
-        @include device-pixel-ratio {
+        @include govuk-device-pixel-ratio {
           background-image: image-url("icon-steps/icon-step-#{$i}-2x.png");
           background-size: 24px 24px;
         }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss

@@ -1,7 +1,7 @@
 .gem-c-govspeak .summary {
   margin: 0 0 2em;
   padding: 0;
-  color: $text-colour;
+  color: $govuk-text-colour;
 
   p {
     @include govuk-font($size: 19);

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -9,8 +9,8 @@
   table {
     border-collapse: collapse;
     border-spacing: 0;
-    margin: $gutter 0;
-    width: $full-width;
+    margin: govuk-spacing(6) 0;
+    width: 100%;
     @include govuk-font($size: 14);
 
     caption {
@@ -21,14 +21,14 @@
     th,
     td {
       vertical-align: top;
-      padding: $gutter-one-third $gutter-one-third $gutter-one-third 0;
-      border-bottom: solid 1px $border-colour;
+      padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
+      border-bottom: solid 1px govuk-colour("grey-2");
     }
 
     th {
       @include govuk-font($size: 14, $weight: bold);
       text-align: left;
-      color: $black;
+      color: $govuk-text-colour;
     }
 
     td small {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -15,7 +15,7 @@
   &.direction-rtl ol,
   &.direction-rtl ul {
     margin-left: 0;
-    margin-right: $gutter-two-thirds;
+    margin-right: govuk-spacing(4);
 
     ul,
     ol {
@@ -27,26 +27,26 @@
   // Block quotes
 
   blockquote {
-    padding: 0 0 0 $gutter-two-thirds;
+    padding: 0 0 0 govuk-spacing(4);
     margin: 0;
     border: 0;
 
-    @include media(desktop) {
-      margin: 0 0 0 (-$gutter);
+    @include govuk-media-query($from: desktop) {
+      margin: 0 0 0 (- govuk-spacing(6));
     }
 
     p {
-      padding-left: $gutter-half;
+      padding-left: govuk-spacing(3);
 
-      @include media(tablet) {
-        padding-left: $gutter;
+      @include govuk-media-query($from: tablet) {
+        padding-left: govuk-spacing(6);
       }
 
       &:before {
         content: "\201C";
         float: left;
         clear: both;
-        margin-left: -$gutter-half;
+        margin-left: (- govuk-spacing(3));
       }
 
       &:last-child:after {
@@ -56,25 +56,25 @@
   }
 
   &.direction-rtl blockquote {
-    padding: 0 $gutter-two-thirds 0 0;
+    padding: 0 govuk-spacing(4) 0 0;
 
     @include govuk-media-query($from: desktop) {
-      margin: 0 (-$gutter) 0 0;
+      margin: 0 (- govuk-spacing(6)) 0 0;
     }
 
     p {
-      padding-right: $gutter-half;
+      padding-right: govuk-spacing(3);
       padding-left: 0;
 
       @include govuk-media-query($from: tablet) {
-        padding-right: $gutter;
+        padding-right: govuk-spacing(6);
         padding-left: 0;
       }
 
       &:before {
         content: "\201D";
         float: right;
-        margin-right: -$gutter-half;
+        margin-right: (- govuk-spacing(3));
         margin-left: 0;
       }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -19,7 +19,7 @@
     background-size: $icon-size $icon-size;
     background-repeat: no-repeat;
 
-    @include device-pixel-ratio {
+    @include govuk-device-pixel-ratio {
       background-image: image-url("icon-important-2x.png");
     }
 

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss

@@ -6,9 +6,9 @@
   .info-notice,
   .help-notice,
   .call-to-action {
-    margin: $gutter-half 0;
-    padding: 0 $gutter-half;
-    border: 1pt solid $border-colour;
+    margin: govuk-spacing(3) 0;
+    padding: 0 govuk-spacing(3);
+    border: 1pt solid govuk-colour("grey-2");
   }
 
   .help-notice p {
@@ -23,7 +23,7 @@
   }
 
   .attachment {
-    margin: $gutter 0;
+    margin: govuk-spacing(6) 0;
 
     &:first-child {
       margin-top: 0;
@@ -41,7 +41,7 @@
 
     .accessibility-warning {
       h2 {
-        @include core-14;
+        @include govuk-font(14);
       }
 
       .toggler {
@@ -51,7 +51,7 @@
   }
 
   .footnotes {
-    border-top: 1px solid $text-colour;
+    border-top: 1px solid $govuk-text-colour;
   }
 
   .legislative-list {

data/app/views/govuk_publishing_components/components/_phase_banner.html.erb

@@ -1,7 +1,8 @@
 <%
 app_name ||= nil
 phase ||= nil
-message ||= nil 
+message ||= nil
+inverse ||= false
 
 unless phase.in?(%w[alpha beta])
   raise ArgumentError, "The phase banner component expects a `phase` (`beta` or `alpha`), #{phase.inspect} given"
@@ -9,14 +10,17 @@ end
 
 unless message.present?
   if phase == "beta"
-    message = raw("This part of GOV.UK is being rebuilt &ndash; <a href=\"/help/beta\">find out what beta means</a>")
+    message = raw("This part of GOV.UK is being rebuilt &ndash; <a class=\"govuk-link\" href=\"/help/beta\">find out what beta means</a>")
   elsif phase == "alpha"
-    message = raw("This part of GOV.UK is being built &ndash; <a href=\"/service-manual/phases/ideal-alphas\">find out what alpha means</a>")
+    message = raw("This part of GOV.UK is being built &ndash; <a class=\"govuk-link\" href=\"/service-manual/phases/ideal-alphas\">find out what alpha means</a>")
   end
-end 
+end
+
+container_css_classes = %w(gem-c-phase-banner govuk-phase-banner)
+container_css_classes << "gem-c-phase-banner--inverse" if inverse
 %>
 
-<%= tag.div class: "gem-c-phase-banner govuk-phase-banner" do %>
+<%= tag.div class: container_css_classes do %>
   <%= tag.p class: "govuk-phase-banner__content" do %>
     <%= tag.strong app_name, class: "govuk-phase-banner__content__app-name" if app_name %>
     <%= tag.strong phase, class: "govuk-tag govuk-phase-banner__content__tag" %>

data/app/views/govuk_publishing_components/components/docs/phase_banner.yml

@@ -18,8 +18,17 @@ examples:
     data:
       phase: beta
       message: This is an optional different message to explain what the state means in this
-        context which can take <a href='https://www.gov.uk'>HTML</a>
+        context which can take <a class="govuk-link" href='https://www.gov.uk'>HTML</a>
   with_app_name:
     data:
       app_name: Skittles Maker
       phase: beta
+  inverse_for_blue_background:
+    data:
+      phase: beta
+      inverse: true
+  inverse_for_blue_background_with_app_name:
+    data:
+      app_name: Skittles Maker
+      phase: beta
+      inverse: true

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '17.6.1'.freeze
+  VERSION = '17.7.0'.freeze
 end

data/node_modules/accessible-autocomplete/package.json

@@ -49,7 +49,7 @@
     "/"
   ],
   "_resolved": "git://github.com/alphagov/accessible-autocomplete.git#3523dd9fffc70cbd9f6f555f75863c33a709f49e",
-  "_shasum": "a8d82fdf44ee260077b8fc108db07667d0e8f5b9",
+  "_shasum": "1f80c0f6496bc9005bdc5742bd3a6f47e3a44be0",
   "_shrinkwrap": null,
   "_spec": "accessible-autocomplete@git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
   "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 17.6.1
+  version: 17.7.0
 platform: ruby
 authors:
 - GOV.UK Dev