govuk_publishing_components 58.2.0 → 59.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8766d04b5c4c4d7fab4d972b014cc0ac72f541321146789b75c64414b60aeb08
-  data.tar.gz: d6915e235caf1ea065a3f6f001ef34d797f76187cd58f199ba8ff20e242fb062
+  metadata.gz: f549979959a86cf945676068de299c2d00a19ce4c3e8ccdd8d8d85879057d239
+  data.tar.gz: baeb31f253180567c2810c48fbcac1c15cd720a6b85fa891926b8fc53d4a2a43
 SHA512:
-  metadata.gz: 1aaa22f84475dd4bd8b5bd26d6af93a3e456c999ff9eeffd4631dac8d87b50e7dfed42db8b845cff27408812d7314d9acfb8440109887e137b9208b13ccce8c2
-  data.tar.gz: bb8b3b01adf12c73c771b6366abf277fb263d33149a853188785e308389b9d6c8202c6fcf3301c037a3ac602b65861a4bcdcb210646736dd9dfeb9e3109424a0
+  metadata.gz: 7266e69e402b5f8ce042a4b76b37afbd846241912f8fe19fe09b333d6c618ba10a4b961fdf0b692d58c179afcbf7acfa2e235345361d55776e93460922084b02
+  data.tar.gz: eb1054ccb1591b786297f2fe4e478b11df0a16ba14a7f403118556456aba5294a16a6fb0795cd73a9cbac2eaa62505c2e18a52626f0434777f52720e63aeba7c

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

@@ -91,6 +91,7 @@
 @import "components/summary-list";
 @import "components/tabs";
 @import "components/table";
+@import "components/tag";
 @import "components/textarea";
 @import "components/translation-nav";
 @import "components/warning-text";

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -3,27 +3,28 @@
 .gem-c-action-link {
   display: table;
 
+  @include govuk-media-query($until: tablet) {
+    max-width: 410px;
+  }
+
   &::before {
     content: "";
     display: table-cell;
-    width: 60px;
-    height: 45px;
-    background: url("govuk_publishing_components/action-link-arrow.svg");
+    width: 36px;
+    height: 28px;
+    background: url("govuk_publishing_components/action-link-arrow--light.svg");
     background-repeat: no-repeat;
-    background-position: 0 50%;
-    background-size: 45px auto;
-  }
+    background-size: 28px auto;
+    background-position: 0 0;
 
-  @include govuk-media-query($until: tablet) {
-    max-width: 410px;
+    @include govuk-media-query($from: tablet) {
+      width: 45px;
+      height: 35px;
+      background-size: 35px auto;
+    }
   }
 }
 
-.gem-c-action-link__contents-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
-
 .gem-c-action-link__link-wrapper {
   display: table-cell;
   vertical-align: middle;
@@ -39,59 +40,6 @@
   }
 }
 
-.gem-c-action-link__nowrap-text {
-  white-space: nowrap;
-}
-
-.gem-c-action-link--with-subtext {
-  max-width: none;
-
-  .gem-c-action-link__link-wrapper,
-  .gem-c-action-link__subtext-wrapper {
-    display: block;
-
-    @include govuk-media-query($from: tablet) {
-      display: table-cell;
-      vertical-align: middle;
-    }
-  }
-}
-
-.gem-c-action-link--mobile-subtext {
-  .gem-c-action-link__subtext-wrapper {
-    display: block;
-  }
-
-  .gem-c-action-link__subtext {
-    padding: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-}
-
-.gem-c-action-link__subtext {
-  display: block;
-  color: inherit;
-  @include govuk-font(19);
-
-  @include govuk-media-query($from: tablet) {
-    position: relative;
-    padding-left: govuk-spacing(4);
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 10%;
-      left: govuk-spacing(2);
-      width: govuk-spacing(2);
-      height: 80%;
-      border-left: solid 1px $govuk-text-colour;
-    }
-  }
-}
-
 .gem-c-action-link--simple {
   &::before {
     width: 30px;
@@ -103,76 +51,6 @@
   }
 }
 
-.gem-c-action-link--simple-light {
-  &::before {
-    width: 30px;
-    height: 30px;
-    background: url("govuk_publishing_components/action-link-arrow--simple-light.svg");
-    background-repeat: no-repeat;
-    background-size: 25px auto;
-    background-position: 0 2px;
-  }
-}
-
-.gem-c-action-link--dark-large-icon {
-  &::before {
-    background: url("govuk_publishing_components/action-link-arrow--dark.svg");
-    height: 34px;
-    width: 40px;
-    background-repeat: no-repeat;
-    background-size: 32px auto;
-    background-position: 0 2px;
-  }
-
-  @include govuk-media-query($until: tablet) {
-    margin-bottom: govuk-spacing(2);
-  }
-}
-
-.gem-c-action-link--light-icon {
-  &::before {
-    width: 36px;
-    height: 28px;
-    background: url("govuk_publishing_components/action-link-arrow--light.svg");
-    background-repeat: no-repeat;
-    background-size: 28px auto;
-    background-position: 0 0;
-
-    @include govuk-media-query($from: tablet) {
-      width: 45px;
-      height: 35px;
-      background-size: 35px auto;
-    }
-  }
-}
-
-.gem-c-action-link--dark-icon {
-  max-width: none;
-
-  @include govuk-media-query($until: tablet) {
-    margin-bottom: govuk-spacing(2);
-  }
-
-  &::before {
-    height: 30px;
-    width: 35px;
-    background: url("govuk_publishing_components/action-link-arrow--dark.svg");
-    background-repeat: no-repeat;
-    background-size: 25px auto;
-    background-position: 0 2px;
-  }
-}
-
-.gem-c-action-link--inverse {
-  color: govuk-colour("white");
-
-  .gem-c-action-link__subtext {
-    &::before {
-      border-color: govuk-colour("white");
-    }
-  }
-}
-
 @include govuk-media-query($media-type: print) {
   .gem-c-action-link {
     * {

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

@@ -5,11 +5,6 @@
   margin: 0;
 }
 
-.gem-c-heading--font-size-27 {
-  @include govuk-text-colour;
-  @include govuk-font(27, $weight: bold);
-}
-
 .gem-c-heading--padding {
   padding: govuk-spacing(3) 0;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -2,24 +2,6 @@
 @import "govuk_publishing_components/components/search";
 @import "govuk_publishing_components/components/skip-link";
 @import "govuk/components/header/header";
-@import "govuk/components/tag/tag";
-
-.gem-c-layout-header--production .govuk-header__container {
-  border-bottom-color: govuk-colour("red");
-}
-
-.gem-c-layout-header--integration .govuk-header__container,
-.gem-c-layout-header--staging .govuk-header__container {
-  border-bottom-color: govuk-colour("yellow");
-}
-
-.gem-c-layout-header--example .govuk-header__container {
-  border-bottom-color: govuk-colour("bright-purple");
-}
-
-.gem-c-layout-header--development .govuk-header__container {
-  border-bottom-color: govuk-colour("dark-grey");
-}
 
 .gem-c-layout-header--no-bottom-border,
 .gem-c-layout-header--no-bottom-border .govuk-header__container {
@@ -76,6 +58,11 @@
   }
 }
 
+.gem-c-header__environment {
+  padding-top: 2px;
+  padding-bottom: 3px;
+}
+
 .gem-c-header__logo {
   @include govuk-media-query($from: desktop) {
     white-space: nowrap;
@@ -98,34 +85,6 @@
   }
 }
 
-.gem-c-environment-tag {
-  padding: 2px 5px 0;
-  margin-left: 3px;
-  margin-top: govuk-spacing(-2);
-  vertical-align: middle;
-  @include govuk-font($size: 16, $weight: "bold");
-}
-
-.gem-c-environment-tag--production {
-  background-color: govuk-colour("red");
-  color: govuk-colour("white");
-}
-
-.gem-c-environment-tag--example {
-  background-color: govuk-colour("bright-purple");
-}
-
-.gem-c-environment-tag--development {
-  background-color: govuk-colour("dark-grey");
-  color: govuk-colour("white");
-}
-
-.gem-c-environment-tag--staging,
-.gem-c-environment-tag--integration {
-  background-color: govuk-colour("yellow");
-  color: govuk-colour("black");
-}
-
 .govuk-header__navigation-item--collapsed-menu-only {
   @include govuk-media-query($from: desktop) {
     display: none;
@@ -155,8 +114,7 @@
       padding: 0 2mm 2mm 0;
     }
 
-    .gem-c-header__product-name,
-    .gem-c-environment-tag {
+    .gem-c-header__product-name {
       color: $govuk-print-text-colour;
       background: none;
     }

data/app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss

@@ -1,5 +1,7 @@
 // overload the choices.js variables
 
+@import "govuk_publishing_components/individual_component_support";
+
 $font-size: 19px;
 
 $choices-bg-color: govuk-colour("white") !default;
@@ -14,7 +16,6 @@ $choices-border-radius-item: 0 !default;
 $choices-z-index: 2 !default;
 $choices-button-dimension: 12px !default;
 
-@import "govuk_publishing_components/individual_component_support";
 @import "mixins/prefixed-transform";
 @import "govuk/components/label/label";
 @import "choices.js/src/styles/choices";

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

@@ -0,0 +1,14 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "govuk/components/tag/tag";
+
+.gem-c-tag {
+  max-width: none;
+}
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-tag.govuk-tag {
+    color: $govuk-print-text-colour;
+    background: none;
+    border: 2px solid govuk-colour("black");
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -30,7 +30,7 @@
 
   h2 {
     margin: 0 0 govuk-spacing(4) 0;
-    @include govuk-font($size: 27, $weight: bold);
+    @include govuk-font($size: 24, $weight: bold);
   }
 
   h3 {

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

@@ -3,33 +3,18 @@
 
   local_assigns[:margin_bottom] ||= 0
   text ||= false
-  nowrap_text ||= false
   href ||= false
-  subtext ||= false
-  subtext_href ||= false
-  mobile_subtext ||= false
   inverse ||= false
   simple ||= false
   simple_light ||= false
-  dark_icon ||= false
-  dark_large_icon ||= false
-  light_icon ||= false
-
-  css_classes = %w(gem-c-action-link)
-  css_classes << "gem-c-action-link--inverse" if inverse
-  css_classes << "gem-c-action-link--dark-icon" if dark_icon
-  css_classes << "gem-c-action-link--dark-large-icon" if dark_large_icon
-  css_classes << "gem-c-action-link--light-icon" if light_icon
-  css_classes << "gem-c-action-link--simple" if simple
-  css_classes << "gem-c-action-link--simple-light" if simple_light
-  css_classes << "gem-c-action-link--with-subtext" if subtext
-  css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
 
   link_classes = %w(govuk-link gem-c-action-link__link gem-c-force-print-link-styles)
   link_classes << "govuk-link--inverse" if inverse
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
-  component_helper.add_class(css_classes.join(" "))
+  component_helper.add_class("gem-c-action-link")
+  component_helper.add_class("gem-c-action-link--inverse") if inverse
+  component_helper.add_class("gem-c-action-link--simple") if simple
 %>
 <% if text.present? %>
   <%= tag.div(**component_helper.all_attributes) do %>
@@ -37,7 +22,6 @@
       <span class="gem-c-action-link__link-wrapper">
         <% main_text = capture do %>
           <%= text %>
-          <%= content_tag(:span, nowrap_text, class: "gem-c-action-link__nowrap-text") if nowrap_text %>
         <% end %>
 
         <% if href.present? %>
@@ -48,24 +32,7 @@
           <%= main_text %>
         <% end %>
       </span>
-
-      <% if subtext %>
-        <span class="gem-c-action-link__subtext-wrapper">
-          <% if subtext_href %>
-            <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") do %>
-              <%= link_to subtext, subtext_href, class: link_classes %>
-            <% end %>
-          <% else %>
-            <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") %>
-          <% end %>
-        </span>
-      <% end %>
-    <% end %>
-
-    <% if subtext %>
-      <%= content_tag(:span, contents, class: "gem-c-action-link__contents-wrapper") %>
-    <% else %>
-      <%= contents %>
     <% end %>
+    <%= contents %>
   <% end %>
 <% end %>

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

@@ -12,10 +12,8 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-header govuk-header")
-  component_helper.add_class("gem-c-layout-header--#{environment}") if environment
   component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border
   component_helper.add_data_attribute({ module: "govuk-header" })
-
 %>
 
 <%= tag.header(**component_helper.all_attributes) do %>

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

@@ -77,18 +77,18 @@
             data: data_attributes,
             class: "govuk-link govuk-link--no-underline gem-c-share-links__link" do %>
             <span class="gem-c-share-links__link-icon">
-              <% if link[:icon] == 'facebook' %>
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
-                  <path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                </svg>
-              <% elsif link[:icon] == 'twitter' %>
-                <svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
-                  <path fill="currentColor" d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/>
+              <% if link[:icon] == 'bluesky' %>
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"  aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
+                  <path fill="currentColor" d="M5.2,2.9c2.8,2.1,5.7,6.3,6.8,8.5,1.1-2.2,4-6.4,6.8-8.5,2-1.5,5.2-2.6,5.2,1s-.4,6.2-.7,7c-.9,3.1-4,3.8-6.8,3.4,4.9.8,6.1,3.6,3.4,6.3-5.1,5.2-7.3-1.3-7.8-3-.1-.3-.2-.4-.2-.3,0-.1,0,0-.2.3-.6,1.7-2.8,8.2-7.8,3-2.7-2.7-1.4-5.5,3.4-6.3-2.8.5-5.9-.3-6.8-3.4-.2-.9-.7-6.3-.7-7C0,.2,3.2,1.4,5.2,2.9Z"/>
                 </svg>
               <% elsif link[:icon] == 'email' %>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM58.37,21,36.92,39.45,15.47,21ZM11.65,23.66,26.27,36.23,11.65,49.9ZM15.1,52.83,29.7,39.18l7.22,6.21,7.22-6.21,14.6,13.65ZM62.19,49.9,47.57,36.23,62.19,23.66Z"/>
                 </svg>
+              <% elsif link[:icon] == 'facebook' %>
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
+                  <path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                </svg>
               <% elsif link[:icon] == 'flickr' %>
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M5.334 6.666C2.3884 6.666 0 9.055 0 12c0 2.9456 2.3884 5.334 5.334 5.334 2.9456 0 5.332-2.3884 5.332-5.334 0-2.945-2.3864-5.334-5.332-5.334zm13.332 0c-2.9456 0-5.332 2.389-5.332 5.334 0 2.9456 2.3864 5.334 5.332 5.334C21.6116 17.334 24 14.9456 24 12c0-2.945-2.3884-5.334-5.334-5.334Z"/>
@@ -101,14 +101,22 @@
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                 </svg>
-              <% elsif link[:icon] == 'youtube' %>
+              <% elsif link[:icon] == 'threads' %>
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
-                  <path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+                  <path fill="currentColor" d="M12.2,24h0c-3.6,0-6.3-1.2-8.2-3.5-1.6-2.1-2.5-4.9-2.5-8.5h0c0-3.6.9-6.4,2.5-8.5C5.8,1.2,8.6,0,12.2,0h0c2.7,0,5,.7,6.8,2.1,1.7,1.3,2.9,3.1,3.5,5.5l-2,.6c-1.1-4-3.9-6-8.3-6s-5.1.9-6.5,2.7c-1.3,1.7-2,4.1-2.1,7.2,0,3.1.7,5.5,2.1,7.2,1.4,1.8,3.6,2.7,6.5,2.7s4.4-.6,5.8-2,1.6-3.6,1.1-4.8c-.3-.7-.9-1.3-1.6-1.7-.2,1.4-.6,2.4-1.3,3.3-.9,1.1-2.1,1.7-3.7,1.8-1.2,0-2.4-.2-3.3-.8-1.1-.7-1.7-1.7-1.8-3,0-1.2.4-2.3,1.3-3.1.9-.8,2.1-1.2,3.6-1.3,1.1,0,2.1,0,3,.1-.1-.7-.4-1.3-.7-1.8-.5-.6-1.3-.9-2.4-.9h0c-.8,0-2,.2-2.7,1.3l-1.8-1.2c1-1.5,2.6-2.3,4.5-2.3h0c3.2,0,5.1,2,5.3,5.4.1,0,.2,0,.3.1,1.5.7,2.6,1.8,3.2,3.1.8,1.8.9,4.8-1.5,7.2-1.9,1.8-4.1,2.6-7.3,2.6h0ZM13.2,12.3h-.7c-1.8.1-3,.9-2.9,2.1,0,1.3,1.5,1.8,2.8,1.8s2.8-.5,3.1-3.7c-.7-.1-1.4-.2-2.2-.2h-.1Z"/>
+                </svg>
+              <% elsif link[:icon] == 'twitter' %>
+                <svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
+                  <path fill="currentColor" d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/>
                 </svg>
               <% elsif link[:icon] == 'whatsapp' %>
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                 </svg>
+              <% elsif link[:icon] == 'youtube' %>
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
+                  <path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+                </svg>
               <% else %>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">
                   <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM56.3,48.27a1.42,1.42,0,0,1-1.42,1.42h-19v9.18l-9.18-9.18H19a1.43,1.43,0,0,1-1.43-1.43V20.52A1.43,1.43,0,0,1,19,19.09H54.88a1.43,1.43,0,0,1,1.42,1.42Z"/>

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

@@ -0,0 +1,20 @@
+<%
+  add_gem_component_stylesheet("tag")
+
+  text ||= nil
+  if text.blank?
+    raise ArgumentError, "The tag component requires text"
+  end
+  text = text.capitalize
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class('govuk-tag gem-c-tag')
+
+  colours = %w[grey green turquoise blue light-blue purple pink red orange yellow]
+  colour ||= nil
+  component_helper.add_class("govuk-tag--#{colour}") if colours.include?(colour)
+%>
+
+<%= tag.strong(**component_helper.all_attributes) do %>
+  <%= text %>
+<% end %>

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

@@ -13,11 +13,6 @@ examples:
       text: Look at this margin
       href: "/page"
       margin_bottom: 9
-  with_no_wrapping_text:
-    data:
-      text: "Coronavirus (COVID-19):"
-      nowrap_text: what you need to do
-      href: "/page"
   inverse:
     data:
       text: "Coronavirus (COVID-19)"
@@ -25,65 +20,8 @@ examples:
       inverse: true
     context:
       dark_background: true
-  with_subtext:
-    data:
-      text: Emergency something
-      href: "/page"
-      subtext: This is about the emergency
-  with_subtext_on_a_dark_background:
-    data:
-      text: Emergency something
-      href: "/page"
-      subtext: This is about the emergency that is happening right now unfortunately so pay attention
-      inverse: true
-    context:
-      dark_background: true
-  mobile_subtext:
-    description: Lock the subtext beneath the main text, so the component with subtext always appears as it does on mobile.
-    data:
-      text: Try not to panic now
-      href: "/page"
-      subtext: "The thing that is happening is pretty scary but we'll get through it"
-      mobile_subtext: true
-  with_link_on_subtext:
-    description: The subtext can also be a link if required. The link on the main text is optional.
-    data:
-      text: Remain calm
-      subtext: Better things are ahead
-      subtext_href: "/page"
-  with_link_on_subtext_on_a_dark_background:
-    data:
-      text: Remain calm
-      subtext: Better things are ahead
-      subtext_href: "/page"
-      inverse: true
-    context:
-      dark_background: true
   simple_arrow:
     data:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
       simple: true
-  simple_light_arrow:
-    data:
-      text: Getting financial help and keeping your business safe
-      href: "/financial-help"
-      inverse: true
-      simple_light: true
-    context:
-      dark_background: true
-  with_dark_icon:
-    data:
-      text: Coronavirus (COVID-19)
-      href: "/my-test-page"
-      dark_icon: true
-  with_dark_large_icon:
-    data:
-      text: Coronavirus (COVID-19)
-      href: "/my-test-page"
-      dark_large_icon: true
-  with_light_icon:
-    data:
-      text: Coronavirus (COVID-19)
-      href: "/my-test-page"
-      light_icon: true

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

@@ -42,6 +42,19 @@ examples:
       - text: Hidden on desktop
         href: "item-3"
         show_only_in_collapsed_menu: true
+  with_product_name_and_navigation:
+    data:
+      product_name: Component Guide 999.9.9
+      environment: production
+      navigation_items:
+      - text: Navigation item 1
+        href: "item-1"
+        active: true
+      - text: Navigation item 2
+        href: "item-2"
+      - text: Hidden on desktop
+        href: "item-3"
+        show_only_in_collapsed_menu: true
   with_navigation_link_data_attributes:
     description: Supports adding data attributes i.e for tracking
     data:

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

@@ -251,6 +251,16 @@ examples:
           text: 'Linkedin',
           icon: 'linkedin'
         },
+        {
+          href: '/threads-share-link',
+          text: 'Threads',
+          icon: 'threads'
+        },
+        {
+          href: '/bluesky-share-link',
+          text: 'Bluesky',
+          icon: 'bluesky'
+        },
         {
           href: '/whatsapp-share-link',
           text: 'WhatsApp',

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

@@ -24,13 +24,6 @@ examples:
     data:
       link_text: 'Click right here to sign up!!'
       link_href: '/this-signs-you-up'
-  with_custom_margin_bottom:
-    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
-    data:
-      heading: 'Sign up for email notifications'
-      link_text: 'Click right here to sign up!!'
-      link_href: '/this-signs-you-up'
-      margin_bottom: 8
   with_custom_heading_level:
     description: Override default heading level by passing through `heading_level` parameter (defaults to `h3`).
     data:

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

@@ -9,7 +9,7 @@ body: |
   When the button is clicked, the `base_path` is submitted to an endpoint which proceeds to check the user's authentication status and whether they are already subscribed to the page or not. Depending on these factors, they will be routed accordingly.
 accessibility_criteria: |
   - The bell icon must be presentational and ignored by screen readers.
-uses_component_wrapper_helper: true  
+uses_component_wrapper_helper: true
 examples:
   default:
     description: By default this component prompts the user to subscribe to email notifications to this page.
@@ -33,12 +33,6 @@ examples:
             index_link: 1
           index_total: 1
           section: "Top"
-  with_margin_bottom:
-    description: |
-      The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 15px.
-    data:
-      base_path: '/current-page-path'
-      margin_bottom: 5
   with_js_enhancement:
     description: |
       If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page and accordingly updates its tracking attribute and (optionally) button text.

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

@@ -20,12 +20,6 @@ examples:
     data:
       email_signup_link: '/foreign-travel-advice/singapore/email-signup'
       feed_link: '/foreign-travel-advice/singapore.atom'
-  with_margin:
-    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom, although some margin is supplied by the links themselves (so that when they stack on mobile there is space between them).
-    data:
-      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
-      feed_link: '/foreign-travel-advice/singapore.atom'
-      margin_bottom: 9
   with_only_email_signup_link:
     data:
       email_signup_link: '/foreign-travel-advice/singapore/email-signup'
@@ -70,7 +64,7 @@ examples:
       small_form: true
   without_heading:
     description: |
-      By default the component includes an h2 heading. The component could be used anywhere on the page and could mean that it produces invalid markup or make the site unaccessible.
+      By default the component includes a visually hidden h2 heading. This option removes it, because the component could be used anywhere on the page and could otherwise break the heading structure.
     data:
       email_signup_link: '/foreign-travel-advice/singapore/email-signup'
       feed_link: '/foreign-travel-advice/singapore.atom'

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

@@ -0,0 +1,57 @@
+name: Tag
+description: Use the tag component to show users the status of something. For example, the server environment the page is being rendered from.
+accessibility_criteria: |
+  - should have a text colour contrast ratio of more than 4.5:1 with its background to be visually distinct
+  - does not use colour alone to convey information
+  - should not be used within a link, as a button, or for interactivity
+uses_component_wrapper_helper: true
+govuk_frontend_components:
+  - tag
+examples:
+  default:
+    data:
+      text: Hello world!
+  sentence_case_conversion:
+    description: The component automatically converts text to sentence case as shown.
+    data:
+      text: HELLO WORLD!
+  grey:
+    data:
+      text: Hello world!
+      colour: grey
+  green:
+    data:
+      text: Hello world!
+      colour: green
+  turquoise:
+    data:
+      text: Hello world!
+      colour: turquoise
+  blue:
+    data:
+      text: Hello world!
+      colour: blue
+  light_blue:
+    data:
+      text: Hello world!
+      colour: light-blue
+  purple:
+    data:
+      text: Hello world!
+      colour: purple
+  pink:
+    data:
+      text: Hello world!
+      colour: pink
+  red:
+    data:
+      text: Hello world!
+      colour: red
+  orange:
+    data:
+      text: Hello world!
+      colour: orange
+  yellow:
+    data:
+      text: Hello world!
+      colour: yellow

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -1,3 +1,19 @@
+<%
+  colour_map = {
+    "production" => "red",
+    "staging" => "yellow",
+    "integration" => "yellow",
+    "example" => "purple",
+    "development" => "grey",
+  }
+
+  environment_exists = !environment.blank?
+%>
+<% if environment_exists %>
+  <div class="gem-c-header__environment">
+    <%= render "govuk_publishing_components/components/tag", { text: environment, colour: colour_map[environment.downcase] } %>
+  </div>
+<% end %>
 <div class="govuk-header__logo gem-c-header__logo">
   <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage">
     <%= render "govuk_publishing_components/components/govuk_logo/govuk_logo" %>
@@ -6,10 +22,5 @@
         <%= product_name %>
       </span>
     <% end %>
-    <% if environment %>
-      <span class="gem-c-environment-tag govuk-tag gem-c-environment-tag--<%= environment %>">
-        <%= environment.titleize %>
-      </span>
-    <% end %>
   </a>
 </div>

data/lib/govuk_publishing_components/presenters/heading_helper.rb

@@ -17,7 +17,6 @@ module GovukPublishingComponents
     private
 
       def heading_size(option)
-        gem_class = "gem-c-heading--font-size-"
         govuk_class = "govuk-heading-"
 
         case option
@@ -30,7 +29,7 @@ module GovukPublishingComponents
         when 19, "s"
           "#{govuk_class}s"
         else
-          "#{gem_class}27"
+          "#{govuk_class}m"
         end
       end
     end

data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb

@@ -64,7 +64,7 @@ module GovukPublishingComponents
       end
 
       def skip_the_gov_uk_account?
-        @skip_account == "true"
+        @skip_account == "true" || @skip_account == true
       end
     end
   end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "58.2.0".freeze
+  VERSION = "59.0.1".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 58.2.0
+  version: 59.0.1
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -397,11 +397,8 @@ files:
 - LICENCE.md
 - README.md
 - app/assets/config/govuk_publishing_components_manifest.js
-- app/assets/images/govuk_publishing_components/action-link-arrow--dark.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow--light.svg
-- app/assets/images/govuk_publishing_components/action-link-arrow--simple-light.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow--simple.svg
-- app/assets/images/govuk_publishing_components/action-link-arrow.svg
 - app/assets/images/govuk_publishing_components/crests/bis_crest_18px_x2.png
 - app/assets/images/govuk_publishing_components/crests/coastguard_18px_x2.png
 - app/assets/images/govuk_publishing_components/crests/dbt_crest_18px_x2.png
@@ -615,6 +612,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_summary-list.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_table.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_tag.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss
@@ -767,6 +765,7 @@ files:
 - app/views/govuk_publishing_components/components/_summary_list.html.erb
 - app/views/govuk_publishing_components/components/_table.html.erb
 - app/views/govuk_publishing_components/components/_tabs.html.erb
+- app/views/govuk_publishing_components/components/_tag.html.erb
 - app/views/govuk_publishing_components/components/_textarea.html.erb
 - app/views/govuk_publishing_components/components/_translation_nav.html.erb
 - app/views/govuk_publishing_components/components/_warning_text.html.erb
@@ -868,6 +867,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/summary_list.yml
 - app/views/govuk_publishing_components/components/docs/table.yml
 - app/views/govuk_publishing_components/components/docs/tabs.yml
+- app/views/govuk_publishing_components/components/docs/tag.yml
 - app/views/govuk_publishing_components/components/docs/textarea.yml
 - app/views/govuk_publishing_components/components/docs/translation_nav.yml
 - app/views/govuk_publishing_components/components/docs/warning_text.yml
@@ -2186,7 +2186,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 3.7.0
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications
 test_files: []

data/app/assets/images/govuk_publishing_components/action-link-arrow--dark.svg

@@ -1,5 +0,0 @@
-<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="11.5" cy="11.5" r="11.5" fill="#272828"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9429 11.7949L10.4402 7.29222L11.7327 5.99967L17.528 11.7949L11.7327 17.5902L10.4402 16.2976L14.9429 11.7949Z" fill="#ffffff"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.95631 10.881L15.4414 10.881L15.4414 12.709L3.95631 12.709L3.95631 10.881Z" fill="#ffffff"/>
-</svg>

data/app/assets/images/govuk_publishing_components/action-link-arrow--simple-light.svg

@@ -1,4 +0,0 @@
-<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9429 11.7949L10.4402 7.29222L11.7327 5.99967L17.528 11.7949L11.7327 17.5902L10.4402 16.2976L14.9429 11.7949Z" fill="#ffffff"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.95631 10.881L15.4414 10.881L15.4414 12.709L3.95631 12.709L3.95631 10.881Z" fill="#ffffff"/>
-</svg>

data/app/assets/images/govuk_publishing_components/action-link-arrow.svg

@@ -1,5 +0,0 @@
-<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="19.5" cy="19.5" r="19.5" fill="#fff500"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0343 20L14.1812 10.1469L17.0096 7.31848L29.6912 20L17.0096 32.6815L14.1812 29.8531L24.0343 20Z" fill="#272828"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000423781 18L25.1328 18L25.1328 22L0.000423431 22L0.000423781 18Z" fill="#272828"/>
-</svg>