govuk_publishing_components 58.1.1 → 59.0.0

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

@@ -8,42 +8,41 @@
   is_page_heading ||= false
   data_attributes ||= {}
   aria_controls ||= nil
+  heading_size ||= false
+  multiple ||= false
+  include_blank ||= false
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
-  select_helper = GovukPublishingComponents::Presenters::SelectHelper.new(local_assigns)
+  select_helper ||= GovukPublishingComponents::Presenters::SelectHelper.new(local_assigns)
 
   aria_attributes = {
     controls: aria_controls,
     describedby: select_helper.describedby
   }
 %>
-<% if select_helper.options.any? && id && label %>
+<% if select_helper.options_markup.present? && id && label %>
   <%= content_tag :div, class: select_helper.css_classes do %>
-    <% if is_page_heading %>
-      <% add_gem_component_stylesheet("heading") %>
-      <%= render "govuk_publishing_components/components/heading", {
-        text: label_tag(id, label, class: select_helper.label_classes),
-        heading_level: 1
-      } %>
-    <% else %>
-      <%= label_tag(id, label, class: select_helper.label_classes) %>
-    <% end %>
-
-    <% if select_helper.hint %>
-      <%= render "govuk_publishing_components/components/hint", {
-        id: select_helper.hint_id,
-        text: hint
-      } %>
-    <% end %>
+    <%= render "govuk_publishing_components/components/label", {
+      id: "#{id}-label",
+      html_for: id,
+      text: label,
+      heading_size:,
+      is_page_heading:,
+      hint_text: select_helper.hint,
+      hint_id: select_helper.hint_id,
+    } %>
 
-    <% if select_helper.error_message %>
+    <% if select_helper.error_items.any? %>
       <%= render "govuk_publishing_components/components/error_message", {
         id: select_helper.error_id,
-        text: select_helper.error_message
+        items: select_helper.error_items,
       } %>
     <% end %>
 
-    <%= select_tag name, options_for_select(select_helper.option_markup, select_helper.selected_option), id: id, class: select_helper.select_classes, aria: aria_attributes, data: data_attributes %>
+    <%# Create null input so that the value is cleared if no options are selected %>
+    <%# https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select-label-Gotcha %>
+    <% if multiple %>
+      <%= hidden_field_tag name, nil %>
+    <% end %>
+    <%= select_tag name, select_helper.options_markup, id: id, class: select_helper.select_classes, aria: aria_attributes, data: data_attributes, multiple: %>
   <% end %>
 <% end %>

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

@@ -0,0 +1,14 @@
+<%
+  add_gem_component_stylesheet("select-with-search")
+
+  # select_helper.select_classes generates "gem-c-select-with-search"
+  select_helper = GovukPublishingComponents::Presenters::SelectWithSearchHelper.new(local_assigns)
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_data_attribute({ module: "select-with-search" })
+%>
+<%= render "govuk_publishing_components/components/select", {
+  **local_assigns,
+  **component_helper.all_attributes,
+  select_helper:
+}.with_indifferent_access %>

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/select.yml

@@ -174,3 +174,14 @@ examples:
         value: option1
       - text: Option two
         value: option2
+  with_multiple:
+    data:
+      id: dropdown-multiple-id
+      id: dropdown-multiple
+      label: My Dropdown
+      multiple: true
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2

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

@@ -0,0 +1,196 @@
+name: Select with search (experimental)
+description: A dropdown select with search
+body: |
+  A Javascript enhanced dropdown select. This component is progressively enhanced, if
+  Javascript is unavailable then it will use the select component.
+
+  This is an experimental component as it currently fails WCAG compliance for keyboard navigation. The total number of options are not
+  announced when using Voice Over.
+accessibility_criteria: |
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when it has focus
+examples:
+  default:
+    data:
+      id: dropdown-default
+      label: My Dropdown
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_blank_option:
+    description: Include a blank option
+    data:
+      id: dropdown-with-blank
+      label: With blank option
+      include_blank: true
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_grouped_options:
+    description: Options can be grouped
+    data:
+      id: dropdown-with-grouped-options
+      label: Select a city
+      grouped_options:
+      - - England
+        - - text: Bath
+            value: bath
+          - text: Bristol
+            value: bristol
+          - text: London
+            value: london
+          - text: Manchester
+            value: manchester
+      - - Northern Ireland
+        - - text: Bangor
+            value: bangor
+          - text: Belfast
+            value: belfast
+      - - Scotland
+        - - text: Dundee
+            value: dundee
+          - text: Edinburgh
+            value: edinburgh
+          - text: Glasgow
+            value: glasgow
+      - - Wales
+        - - text: Cardiff
+            value: cardiff
+          - text: Swansea
+            value: swansea
+  with_grouped_options_and_blank_option:
+    description: Options can be grouped and include a blank option
+    data:
+      id: dropdown-with-grouped-options-and-blank
+      label: Select a city
+      include_blank: true
+      grouped_options:
+      - - England
+        - - text: Bath
+            value: bath
+          - text: Bristol
+            value: bristol
+          - text: London
+            value: london
+          - text: Manchester
+            value: manchester
+      - - Northern Ireland
+        - - text: Bangor
+            value: bangor
+          - text: Belfast
+            value: belfast
+      - - Scotland
+        - - text: Dundee
+            value: dundee
+          - text: Edinburgh
+            value: edinburgh
+          - text: Glasgow
+            value: glasgow
+      - - Wales
+        - - text: Cardiff
+            value: cardiff
+          - text: Swansea
+            value: swansea
+  with_different_id_and_name:
+    description: If no name is provided, name defaults to the (required) value of id.
+    data:
+      id: dropdown-with-different-id-and-name
+      label: My Dropdown
+      name: dropdown[1]
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+  with_data_attributes:
+    data:
+      id: dropdown-with-data-attributes
+      data_attributes:
+        module: not-a-module
+        loose: moose
+      label: Select your country
+      options:
+        - text: France
+          value: fr
+        - text: Germany
+          value: de
+        - text: United Kingdom
+          value: uk
+  with_preselect:
+    data:
+      id: dropdown-with-preselect
+      label: Option 2 preselected
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+        selected: true
+      - text: Option three
+        value: option3
+  with_hint:
+    description: When a hint is included the `aria-describedby` attribute of the select is included to point to the hint. When an error and a hint are present, that attribute includes the IDs of both the hint and the error.
+    data:
+      id: dropdown-with-hint
+      label: Choose your preferred thing
+      hint: You might need some more information here
+      hint_id: optional-hint-id
+      options:
+      - text: Something
+        value: option1
+      - text: Something else
+        value: option2
+  with_error:
+    description: An arbitrary number of separate error items can be passed to the component.
+    data:
+      id: dropdown-with-error
+      label: How will you be travelling to the conference?
+      error_items:
+        - text: Please choose an option
+      include_blank: true
+      options:
+      - text: Public transport
+        value: option1
+      - text: Will make own arrangements
+        value: option2
+  with_custom_label_size:
+    description: Make the label different sizes. Valid options are `s`, `m`, `l` and `xl`.
+    data:
+      id: dropdown-with-custom-label-size
+      label: Bigger!
+      heading_size: xl
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_multiple_select_enabled:
+    description: Allow multiple items to be selected and de-selected.
+    data:
+      id: dropdown-with-multiple
+      label: Select your country
+      include_blank: true
+      multiple: true
+      options:
+        - text: France
+          value: fr
+          selected: false
+        - text: Germany
+          value: de
+          selected: false
+        - text: The United Kingdom of Great Britain and Northern Ireland
+          value: uk
+        - text: Democratic Republic of the Congo
+          value: cg

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