govuk_publishing_components 28.8.0 → 28.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5dbe5219da6d54a38c3909d40c427560378214263daa7701f83c7972c24509d4
-  data.tar.gz: 850ad5d021962d86f7d192ebe353d850c3041e21f200dfbbeceb12d5a3c83304
+  metadata.gz: 6c3bd6215882051b9c863a3b252cdb8163820babf43ddbc6a8fa833c0da5f5b1
+  data.tar.gz: 552d3420a3ccf2264bfd6a9a8304c6d24d8eb2a24306daab0b1b2d3998df7309
 SHA512:
-  metadata.gz: de64be05c1cb2168c55c4ab9a7eea97c0e4861b9625edeb0cbec24b419f1f3b15c9d1908c5aa50a382946237052c5eb4312137df75ba87d21314b8e02bec661e
-  data.tar.gz: 71eecbbd72eba66a68b972e3f8020cd87b96bf076094f2bf1330271b012f95c735fb907d66e8d25ad5562ce72157a5e15921e51fe882eb593f6c84e3d7460cf3
+  metadata.gz: 2979878f87bb5ad5dd9daf50a81aa7fe4baeab0569d2b4d686281fd1f87aa3bea056c247784449b12a557fde3e2cf03eea7568445d4522601111a2a1b9528566
+  data.tar.gz: 24ee9afa94eee26d28896e9dc4d4dff843020ad9f1756b449404a35ae71ff2a881c666933e4e10b2a8c0ca32faa14dfddc2880605f672c5c60526e4df03e4588

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

@@ -19,6 +19,7 @@ $govuk-new-link-styles: true;
 @import "components/big-number";
 @import "components/breadcrumbs";
 @import "components/button";
+@import "components/cards";
 @import "components/character-count";
 @import "components/checkboxes";
 @import "components/contents-list";

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

@@ -5,6 +5,7 @@
 
 @import "components/print/accordion";
 @import "components/print/button";
+@import "components/print/cards";
 @import "components/print/contents-list";
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";

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

@@ -58,8 +58,9 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-attachment__metadata {
-  @include govuk-font($size: 14);
+  @include govuk-font($size: 19);
   margin: 0 0 govuk-spacing(3);
+  color: $govuk-secondary-text-colour;
 
   &:last-of-type {
     margin-bottom: 0;

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

@@ -0,0 +1,102 @@
+@import "mixins/grid-helper";
+@import "mixins/prefixed-transform";
+
+.gem-c-cards__heading {
+  margin: 0 0 govuk-spacing(6) 0;
+}
+
+.gem-c-cards__list {
+  list-style: none;
+  padding: 0;
+  // Remove the outermost left and right margin from the internal margin of the list items.
+  margin: 0 govuk-spacing(-3);
+
+  display: grid;
+  grid-auto-flow: row;
+  // Use CSS grid to calculate the number of rows
+  grid-template-rows: auto;
+  // Use the tallest cell in the grid to set the height for all rows
+  grid-auto-rows: fractions(1);
+  grid-template-columns: fractions(1);
+
+  @include govuk-media-query($from: "tablet") {
+    grid-template-columns: fractions(2);
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    // Note that browsers that don't support CSS grid display the component as one column on all
+    // breakpoints
+    grid-template-columns: fractions(3);
+
+    // For browsers that don't support CSS grid, constrain the width to 50% to improve usability
+    // especially for screen magnifier users
+    width: 50%;
+
+    // Reset the width for browsers that support CSS grid
+    @supports (display: grid) {
+      width: initial;
+    }
+  }
+}
+
+.gem-c-cards__list--two-column-desktop {
+  @include govuk-media-query($from: "desktop") {
+    grid-template-columns: fractions(2);
+  }
+}
+
+.gem-c-cards__list-item {
+  border-top: 1px solid $govuk-border-colour;
+  // We use grid to split the container into column widths, so manage the horizontal spacing with
+  // internal margins.
+  margin: 0 govuk-spacing(3);
+  padding: govuk-spacing(3) 0 govuk-spacing(6) 0;
+  position: relative;
+}
+
+.gem-c-cards__sub-heading {
+  margin: 0 govuk-spacing(6) govuk-spacing(2) 0;
+}
+
+.gem-c-cards__link {
+  // Make the entire list item area clickable
+  &:after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &:before {
+    $dimension: 7px;
+    $width: 3px;
+
+    border-right: $width solid $govuk-brand-colour;
+    border-top: $width solid $govuk-brand-colour;
+    content: "";
+    height: $dimension;
+    position: absolute;
+    right: govuk-spacing(1);
+    top: govuk-spacing(4);
+    @include prefixed-transform($rotate: 45deg);
+    width: $dimension;
+  }
+
+  &:hover {
+    &:before {
+      border-color: $govuk-link-hover-colour;
+    }
+  }
+
+  &:focus {
+    &:before {
+      border-color: $govuk-focus-text-colour;
+    }
+  }
+}
+
+.gem-c-cards__description {
+  margin: 0;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -1,5 +1,3 @@
-$transition-campaign-red: #ff003b;
-
 .gem-c-contextual-sidebar__related-links {
   border-top: 2px solid $govuk-brand-colour;
 }
@@ -19,13 +17,10 @@ $transition-campaign-red: #ff003b;
 }
 
 .gem-c-contextual-sidebar__cta {
+  border-top: 2px solid $govuk-brand-colour;
   margin-bottom: govuk-spacing(6);
   background-color: govuk-colour('light-grey', $legacy: 'grey-4');
   display: block;
   padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;
 }
-
-.gem-c-contextual-sidebar__cta--brexit {
-  border-top: 2px solid $transition-campaign-red;
-}

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

@@ -66,7 +66,8 @@
 
 .gem-c-document-list__attribute {
   @include govuk-text-colour;
-  @include govuk-font(14);
+  @include govuk-font(16);
+  color: $govuk-secondary-text-colour;
   display: inline-block;
   list-style: none;
   padding-right: govuk-spacing(4);

data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss

@@ -1,6 +1,7 @@
 .gem-c-related-navigation {
   @include govuk-text-colour;
   border-top: 2px solid govuk-colour("blue");
+  margin-bottom: govuk-spacing(9);
 }
 
 .gem-c-related-navigation__main-heading {

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

@@ -0,0 +1,4 @@
+.gem-c-cards__sub-heading {
+  margin-top: govuk-spacing(6);
+  margin-bottom: govuk-spacing(1);
+}

data/app/models/govuk_publishing_components/component_docs.rb

@@ -45,7 +45,10 @@ module GovukPublishingComponents
     end
 
     def parse_documentation(file)
-      { id: File.basename(file, ".yml") }.merge(YAML.unsafe_load_file(file)).with_indifferent_access
+      # Psych 4's YAML.unsafe_load_file === Psych 3's YAML.load_file
+      # but until we drop support for Ruby 2.7 and Ruby 3.0, we need to support both major versions of Psych
+      yaml = YAML.respond_to?(:unsafe_load_file) ? YAML.unsafe_load_file(file) : YAML.load_file(file)
+      { id: File.basename(file, ".yml") }.merge(yaml).with_indifferent_access
     end
 
     def app_documentation_directory

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

@@ -0,0 +1,62 @@
+<%
+  heading ||= nil
+  items ||= nil
+  sub_heading_level ||= 3
+  two_column_layout ||= false
+  local_assigns ||= nil
+
+  ul_classes = %w[gem-c-cards__list]
+  ul_classes << 'gem-c-cards__list--two-column-desktop' if two_column_layout
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+%>
+<% if items.present? %>
+  <div class="gem-c-cards">
+    <% if heading %>
+      <%= content_tag(shared_helper.get_heading_level, class: "gem-c-cards__heading govuk-heading-m") do %>
+        <%= heading %>
+      <% end %>
+    <% end %>
+    <%= content_tag 'ul', class: ul_classes do %>
+      <%
+        items.each do |item|
+        link = item[:link]
+
+        if !link[:path].present?
+          raise ArgumentError, "The cards component requires a href for all the links"
+        end
+
+        data_attributes = nil
+        attributes = link[:tracking_attributes].presence
+
+        if attributes && attributes[:track_category] && attributes[:track_action]
+          data_attributes = {
+            track_action: attributes[:track_action],
+            track_category: attributes[:track_category],
+            track_dimension_index: attributes[:track_dimension_index],
+            track_dimension: link[:text],
+            track_label: link[:path],
+          }
+        end
+
+        link = capture do
+           link_to(link[:text], link[:path], {
+             class: "govuk-link gem-c-cards__link",
+             data: data_attributes,
+           })
+        end
+      %>
+
+        <li class="gem-c-cards__list-item">
+          <%= content_tag("h#{sub_heading_level}", class: "gem-c-cards__sub-heading govuk-heading-s") do %>
+            <%= link %>
+          <% end %>
+
+          <% if item[:description] %>
+            <p class="govuk-body gem-c-cards__description"><%= item[:description] %></p>
+          <% end %>
+        </li>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -24,7 +24,7 @@
     } %>
   <% end %>
 
-  <% if navigation.show_brexit_cta? %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta', content_item: content_item %>
+  <% if navigation.show_ukraine_cta? %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/ukraine_cta', content_item: content_item %>
   <% end %>
 </div>

data/app/views/govuk_publishing_components/components/contextual_sidebar/{_brexit_cta.html.erb → _ukraine_cta.html.erb}

@@ -1,21 +1,21 @@
 <% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
 <%
-  title = t("components.related_navigation.transition.title")
-  link_text = t("components.related_navigation.transition.link_text")
-  link_path = t("components.related_navigation.transition.link_path")
-  lang = shared_helper.t_locale("components.related_navigation.transition.title")
+  title = t("components.related_navigation.ukraine.title")
+  link_text = t("components.related_navigation.ukraine.link_text")
+  link_path = t("components.related_navigation.ukraine.link_path")
+  lang = shared_helper.t_locale("components.related_navigation.ukraine.title")
 %>
 
 <% data_attributes = {
   "module": "gem-track-click",
   "track-category": "relatedLinkClicked",
-  "track-action": "1.0 Transition",
+  "track-action": "1.0 Invasion of Ukraine",
   "track-label": link_path,
   "track-dimension": link_text,
   "track-dimension-index": "29",
 } %>
 
-<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--brexit" do %>
+<%= tag.div class: "gem-c-contextual-sidebar__cta" do %>
   <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
   <%= tag.p class: "gem-c-contextual-sidebar__text govuk-body" do %>
     <%= link_to link_text,

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

@@ -0,0 +1,139 @@
+name: Cards (experimental)
+description: A grid of cards that have a link and a description
+body: |
+  The component renders the cards as an unordered list element and visually presents it as a grid. It doesn't use the [GOV.UK Design System grid](https://design-system.service.gov.uk/styles/layout/#grid-system) but sets its own so that it can separately target desktop, tablet and mobile columns.
+
+  You can display the grid in three or two columns on desktop. Browsers that don't support CSS grid always display one column.
+
+  You must set a `href` for all the links.
+
+  This component is currently experimental. If you are using it, please feed back any research findings to the GOV.UK Explore team.
+accessibility_criteria: |
+  The component must:
+
+  -  use the correct heading level hierarchy eg. if the component heading uses a `<h2>`, the subheadings must use a `<h3>`
+
+  It is also good practise to include a heading above the list to tell users what the list contains
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      heading: Topics
+      items:
+        - link:
+            text: Benefits
+            path: http://www.gov.uk
+          description: Includes eligibility, appeals, tax credits and Universal Credit
+        - link:
+            text: Births, deaths, marriages and&nbsp;care
+            path: http://www.gov.uk
+          description: Parenting, civil partnerships, divorce and Lasting Power of Attorney
+        - link:
+            text: Business and self-employed
+            path: http://www.gov.uk
+          description: Tools and guidance for businesses
+        - link:
+            text: Childcare and parenting
+            path: http://www.gov.uk
+          description: Includes giving birth, fostering, adopting, benefits for children, childcare and schools
+        - link:
+            text: Citizenship and living in the&nbsp;UK
+            path: http://www.gov.uk
+          description: Voting, community participation, life in the UK, international projects
+        - link:
+            text: Crime, justice and the&nbsp;law
+            path: http://www.gov.uk
+          description: Legal processes, courts and the police
+        - link:
+            text: Disabled people
+            path: http://www.gov.uk
+          description: Includes carers, your rights, benefits and the Equality Act
+        - link:
+            text: Driving and transport
+            path: http://www.gov.uk
+          description: Includes vehicle tax, MOT and driving licences
+        - link:
+            text: Education and learning
+            path: http://www.gov.uk
+          description: Includes student loans, admissions and apprenticeships
+        - link:
+            text: Employing people
+            path: http://www.gov.uk
+          description: Includes pay, contracts, hiring and redundancies
+        - link:
+            text: Environment and countryside
+            path: http://www.gov.uk
+          description: Includes flooding, recycling and wildlife
+        - link:
+            text: Housing and local services
+            path: http://www.gov.uk
+          description: Owning or renting and council services
+  two_column_layout:
+    description:  Override default three column layout on desktop by passing through `two_column_layout` parameter (defaults to `false`).
+    data:
+      two_column_layout: true
+      items:
+        - link:
+            text: Benefits
+            path: http://www.gov.uk
+          description: Includes eligibility, appeals, tax credits and Universal Credit
+        - link:
+            text: Births, deaths, marriages and&nbsp;care
+            path: http://www.gov.uk
+          description: Parenting, civil partnerships, divorce and Lasting Power of Attorney
+        - link:
+            text: Business and self-employed
+            path: http://www.gov.uk
+          description: Tools and guidance for businesses
+        - link:
+            text: Childcare and parenting
+            path: http://www.gov.uk
+          description: Includes giving birth, fostering, adopting, benefits for children, childcare and schools
+        - link:
+            text: Citizenship and living in the&nbsp;UK
+            path: http://www.gov.uk
+          description: Voting, community participation, life in the UK, international projects
+        - link:
+            text: Crime, justice and the&nbsp;law
+            path: http://www.gov.uk
+          description: Legal processes, courts and the police
+        - link:
+            text: Disabled people
+            path: http://www.gov.uk
+          description: Includes carers, your rights, benefits and the Equality Act
+  custom_heading_levels:
+    description: |
+      Override default heading level by passing through `heading_level` parameter (defaults to `<h2>`).
+
+      Override default subheading level by passing through `sub_heading_level` parameter (defaults to `<h3>`)
+    data:
+      heading: Topics
+      heading_level: 3
+      sub_heading_level: 4
+      items:
+        - link:
+            text: Benefits
+            path: http://www.gov.uk
+          description: Includes eligibility, appeals, tax credits and Universal Credit
+  with_tracking_attributes:
+    description: |
+      Tracking can be enabled on the cards component by passing a minimum of data_track_category and data_track_action. Other tracking attributes are optional. Note: tracking events do not currently fire within the component guide.
+    data:
+      items:
+        - link:
+            text: Benefits
+            path: http://www.gov.uk
+            tracking_attributes:
+              track_action: track_action
+              track_category: homepageClicked
+              track_dimension_index: 29
+          description: Includes eligibility, appeals, tax credits and Universal Credit
+        - link:
+            text: Births, deaths, marriages and&nbsp;care
+            path: http://www.gov.uk
+            tracking_attributes:
+              track_action: track_action
+              track_category: homepageClicked
+              track_dimension_index: 29
+          description: Parenting, civil partnerships, divorce and Lasting Power of Attorney

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

@@ -86,29 +86,20 @@ examples:
                       - text: The Highway Code
                         href: "/guidance/the-highway-code"
                     optional: false
-  with_brexit_cta:
-    description: For documents tagged with certain taxons defined in `brexit_cta_taxon_allow_list` we show a custom Brexit call to action element.
+  with_ukraine_cta:
+    description: For documents tagged to the Ukraine topical event we show a custom 'Ukraine Invasion' call to action element.
     data:
       content_item:
-        title: "Transport news story"
-        content_id: "3c402d90-fe77-49b9-a8aa-1800d4fc2b3d"
+        title: "UK forces arrive to reinforce NATO’s eastern flank"
+        content_id: "a342fd46-d801-4c1e-9d8f-f41fba6da563"
         locale: "en"
         links:
           ordered_related_items:
-          - title: Find an apprenticeship
-            base_path: /apply-apprenticeship
-          - title: Training and study at work
-            base_path: /training-study-work-your-rights
-          - title: Careers helpline for teenagers
-            base_path: /careers-helpline-for-teenagers
-          document_collections:
-          - title: Recruit an apprentice (formerly apprenticeship vacancies)
-            base_path: /government/collections/apprenticeship-vacancies
-            document_type: document_collection
-          - title: The future of jobs and skills
-            base_path: /government/collections/the-future-of-jobs-and-skills
-            document_type: document_collection
-          taxons:
-            - content_id: "2f8b848d-23c8-4f42-a41a-df1f81c64d0f"
-              title: "Exporting"
-              phase: "live"
+          - title: Protecting the UK and promoting a Global Britain
+            base_path: "/government/collections/protecting-the-uk-and-promoting-a-global-britain"
+            locale: "en"
+          topical_events:
+            - content_id: "bfa79635-ffda-4b5d-8266-a9cd3a03649c"
+              title: "Russian invasion of Ukraine: UK government response"
+              base_path: "/government/topical-events/russian-invasion-of-ukraine-uk-government-response"
+              locale: "en"

data/config/locales/ar.yml

@@ -163,6 +163,10 @@ ar:
         link_path: "/brexit"
         link_text: تحقق مما تحتاج إلى القيام به
         title: برِيكْسِت
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: المواقع العالمية
     search_box:
       input_title: بحث

data/config/locales/az.yml

@@ -159,6 +159,10 @@ az:
         link_path: "/brexit"
         link_text: Nələri etməli olduğunuzu yoxlayın
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Dünya üzrə yerləri
     search_box:
       input_title: Axtar

data/config/locales/be.yml

@@ -166,6 +166,10 @@ be:
         link_path: "/brexit"
         link_text: Праверце, што вам трэба зрабіць
         title: Брэкзiт
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Мы ў свеце
     search_box:
       input_title: Пошук

data/config/locales/bg.yml

@@ -164,6 +164,10 @@ bg:
         link_path: "/brexit"
         link_text: Проверете какво трябва да направите
         title: Брекзит
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Местоположения по света
     search_box:
       input_title: Търсене

data/config/locales/bn.yml

@@ -161,6 +161,10 @@ bn:
         link_path: "/brexit"
         link_text: আপনার যা করা প্রয়োজন তা দেখুন
         title: ব্রেক্সিট
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: বিশ্বের অবস্থানসমূহ
     search_box:
       input_title: খুঁজুন

data/config/locales/cs.yml

@@ -165,6 +165,10 @@ cs:
         link_path: "/brexit"
         link_text: Zkontrolujte, co je třeba udělat
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Místa ve světě
     search_box:
       input_title: Vyhledávání

data/config/locales/cy.yml

@@ -164,6 +164,10 @@ cy:
         link_path: "/brexit.cy"
         link_text: Gwiriwch beth mae angen i chi wneud
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Lleoliadau byd-eang
     search_box:
       input_title: Chwilio

data/config/locales/da.yml

@@ -161,6 +161,10 @@ da:
         link_path: "/brexit"
         link_text: Tjek hvad du skal gøre
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Verden Placeringer
     search_box:
       input_title: Søge

data/config/locales/de.yml

@@ -164,6 +164,10 @@ de:
         link_path: "/brexit"
         link_text: Prüfen Sie, was Sie machen müssen
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Weltweite Standorte
     search_box:
       input_title: Suche

data/config/locales/dr.yml

@@ -162,6 +162,10 @@ dr:
         link_path: "/brexit"
         link_text: بیبینید که چه کاری باید انجام دهید
         title: برکست
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: موقعیت هایی جهان
     search_box:
       input_title: جستجو نمایید

data/config/locales/el.yml

@@ -160,6 +160,10 @@ el:
         link_path: "/brexit"
         link_text: Ελέγξτε τι πρέπει να κάνετε
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Παγκόσμιες τοποθεσίες
     search_box:
       input_title: Αναζήτηση

data/config/locales/en.yml

@@ -177,10 +177,10 @@ en:
       navigation_search_heading: Search and popular pages
       navigation_search_subheading: Search
       popular_links:
+      - label: 'Invasion of Ukraine'
+        href: "/government/topical-events/russian-invasion-of-ukraine-uk-government-response"
       - label: 'Coronavirus (COVID-19)'
         href: "/coronavirus"
-      - label: 'Brexit: check what you need to do'
-        href: "/brexit"
       - label: Find a job
         href: "/find-a-job"
       - label: 'Personal tax account: sign in'
@@ -234,6 +234,10 @@ en:
         link_path: "/brexit"
         link_text: Check what you need to do
         title: Brexit
+      ukraine:
+        link_path: "/government/topical-events/russian-invasion-of-ukraine-uk-government-response"
+        link_text: Find out about the UK’s response
+        title: Invasion of Ukraine
       world_locations: World locations
     search_box:
       input_title: Search

data/config/locales/es-419.yml

@@ -160,6 +160,10 @@ es-419:
         link_path: "/brexit"
         link_text: Verifique lo que debe hacer
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Ubicaciones en el mundo
     search_box:
       input_title: Buscar