govuk_publishing_components 28.8.1 → 28.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 56d5f41976b37b95a3d00db9c7375f7d500879dc0715134227b7f3e935b88ecf
-  data.tar.gz: debdecb330a017f20cabbdc4a2635709f3101a1c9ab7c95043a4cf12283258e8
+  metadata.gz: dd778ec8393d73593a0efed8121a361f120adcfcfb3afaa2636e988098ffc748
+  data.tar.gz: 6464e9b000c6042e360af3f3dbd64eb867cb4c64e0823e13388e375c9958df9c
 SHA512:
-  metadata.gz: 1a27ffd2c2449ac670a5726512a140d379cd960371107afe40a4d563a3d15f054280a23dbd01acbd2734047628b91d1b2baee7d7405c680ba87122a1b4c5cc6f
-  data.tar.gz: 1a8d05393b71c257a6dc2af490515a61ce5680aec77ba96b16bd0e4cd64b7ced87be26d9db70f1315426f9b71687c0ac06bf7897c3409968a11f9be40e89c847
+  metadata.gz: fc2047a42108470a5c65cb207e721096e85c9d7ca06664102a4815b6bf2cf81e15be44827bda61760a9edbac45b08775004d7bf782ba2d1a4411ac58316525af
+  data.tar.gz: 15b4a62e81f1e8a62756b7f780635ee33edf8d1db5b6cf21fc6902cae9fa7ca7c85d191585b2bc59f7c6e1284ecdccfa4390b4e683516962c9072e6c6c71b9ff

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

@@ -19,6 +19,7 @@ $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;

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

data/app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb

@@ -0,0 +1,27 @@
+<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
+<%
+  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 Invasion of Ukraine",
+  "track-label": link_path,
+  "track-dimension": link_text,
+  "track-dimension-index": "29",
+} %>
+
+<%= 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,
+      link_path,
+      class: "govuk-link",
+      data: data_attributes,
+      lang: lang %>
+  <% end %>
+<% end %>

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

@@ -112,3 +112,21 @@ examples:
             - content_id: "2f8b848d-23c8-4f42-a41a-df1f81c64d0f"
               title: "Exporting"
               phase: "live"
+
+  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: "UK forces arrive to reinforce NATO’s eastern flank"
+        content_id: "a342fd46-d801-4c1e-9d8f-f41fba6da563"
+        locale: "en"
+        links:
+          ordered_related_items:
+          - 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

@@ -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

data/config/locales/es.yml

@@ -160,6 +160,10 @@ es:
         link_path: "/brexit"
         link_text: Compruebe lo que necesita hacer
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Ubicaciones mundiales
     search_box:
       input_title: Buscar

data/config/locales/et.yml

@@ -163,6 +163,10 @@ et:
         link_path: "/brexit"
         link_text: Kontrollige, mida peate tegema
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Maailma asukohad
     search_box:
       input_title: Otsing

data/config/locales/fa.yml

@@ -158,6 +158,10 @@ fa:
         link_path: "/brexit"
         link_text: آنچه را باید انجام دهید، بررسی کنید
         title: برگزیت
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: مکان‌های جهانی
     search_box:
       input_title: جستجو

data/config/locales/fi.yml

@@ -162,6 +162,10 @@ fi:
         link_path: "/brexit"
         link_text: Tarkista, mitä sinun on tehtävä
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Maailman sijainnit
     search_box:
       input_title: Hae

data/config/locales/fr.yml

@@ -160,6 +160,10 @@ fr:
         link_path: "/brexit"
         link_text: Vérifiez ce que vous devez faire
         title: Brexit
+      ukraine:
+        link_path:
+        link_text:
+        title:
       world_locations: Emplacements dans le monde
     search_box:
       input_title: Rechercher