govuk_publishing_components 66.6.1 → 66.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 15dc9f3d8df89afd884073edc445ee356db19847cadca1102a003d3a63b02ef3
-  data.tar.gz: 729ba4b1052993fa429a1f43cd1ff2f0832a7ad18fddbac4698aff13a04dbaf3
+  metadata.gz: c16d1cf3bd614296e1f3de0308090ef90e04a0eabb7f955029e5f6e3f990c6c4
+  data.tar.gz: 13457a51304ef1d835190720b19796bc5776069e50f4205cdcc80cc319d6a010
 SHA512:
-  metadata.gz: ce997f38b851195443763ffb14970e5d48f5eb5b46db659959152d00e56cc0e183ce702b33972c9597f82922982e21685b2620bbe1fcbf4aa58dabf555e0dfff
-  data.tar.gz: 755231805c81bea3994908507f771ae0fe37de4d6412c6bd9cc3cba86b98143e9d69d66d5a0e60dd32323be7cc63e4029c86f36522b27905f67ab69f2d351b48
+  metadata.gz: 07f145c79d71a24a06d4bc0fb127a46ec82a7788b605577fd42fc66755f47ab63511a8a7f765960374d1795ea505527de8dd64efd9b36fd86d0c675fec49eed8
+  data.tar.gz: 0fa242bea70018bdce3e280dd8abfd9afd603b5c0326320ee648a54a281f02bda6eaec7d29bb332e2947c5bf1f8a4b390d8c3f9d730a689ab7b81a283ba676c6

data/app/assets/javascripts/govuk_publishing_components/components/chart.js

@@ -0,0 +1 @@
+//= require chartkick

data/app/assets/stylesheets/govuk_publishing_components/all-components.scss

@@ -22,6 +22,7 @@
 @import "components/button";
 @import "components/cards";
 @import "components/character-count";
+@import "components/chart";
 @import "components/checkboxes";
 @import "components/contents-list";
 @import "components/contents-list-with-body";

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

@@ -1,11 +1,8 @@
 $thumbnail-width: 99px;
 $thumbnail-height: 140px;
 $thumbnail-border-width: 5px;
-$thumbnail-background: govuk-colour("white");
-$thumbnail-border-colour: rgba(11, 12, 12, .1);
-$thumbnail-shadow-colour: rgba(11, 12, 12, .4);
-$thumbnail-shadow-width: 0 2px 2px;
-$thumbnail-icon-border-colour: govuk-colour("mid-grey");
+
+@use "sass:color";
 
 .gem-c-attachment {
   position: relative;
@@ -25,17 +22,17 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
   width: auto; // for IE8
   max-width: calc($thumbnail-width / 1.5);
   height: calc($thumbnail-height / 1.5);
-  border: $thumbnail-border-colour; // for IE9 & IE10
-  outline: $thumbnail-border-width solid $thumbnail-border-colour;
-  background: $thumbnail-background;
-  box-shadow: $thumbnail-shadow-width $thumbnail-shadow-colour;
-  fill: $thumbnail-icon-border-colour;
-  stroke: $thumbnail-icon-border-colour;
+  background: govuk-colour("white");
+  box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4), 0 0 0 5px color.adjust(govuk-colour("black"), $alpha: -0.9);
+  fill: govuk-colour("mid-grey");
+  stroke: govuk-colour("mid-grey");
 
   @include govuk-media-query($from: tablet) {
     max-width: $thumbnail-width;
     height: $thumbnail-height;
   }
+
+  @include high-contrast-outline;
 }
 
 .gem-c-attachment__details {

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

@@ -0,0 +1,60 @@
+.gem-c-chart {
+  // slight hack to hide the table automatically added by the charts JS
+  // not needed as we already output the table manually in the component
+  svg + div:has(table) {
+    display: none;
+  }
+
+  .google-visualization-tooltip {
+    background-color: govuk-colour("black");
+    box-shadow: none;
+    border: 0;
+
+    span {
+      color: govuk-colour("white");
+      @include govuk-font($size: 16, $weight: bold);
+    }
+  }
+}
+
+.gem-c-chart__table-wrapper {
+  overflow: auto;
+}
+
+.gem-c-chart__table {
+  margin-top: govuk-spacing(3);
+
+  .govuk-table {
+    margin: 0;
+  }
+
+  .govuk-table .govuk-table__header {
+    text-align: center;
+  }
+
+  .govuk-table .govuk-table__cell {
+    text-align: center;
+  }
+}
+
+.gem-c-chart .gem-c-chart__a11y-note-link {
+  display: none;
+  margin-bottom: govuk-spacing(2);
+}
+
+.gem-c-chart__heading {
+  // Ensure heading content width is constrained to two thirds on desktop
+  @include govuk-media-query($from: "desktop") {
+    max-width: 66.6667%;
+  }
+}
+
+.js-enabled {
+  .gem-c-chart .gem-c-chart__a11y-note-link {
+    display: inline;
+  }
+
+  .gem-c-chart .gem-c-chart__a11y-note-link:focus-within {
+    display: inline-block;
+  }
+}

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

@@ -39,8 +39,9 @@
         width: $thumbnail-width;
         height: 140px;
         background: govuk-colour("white");
-        outline: $govuk-border-width solid color.adjust(govuk-colour("black"), $alpha: -0.9);
-        box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4);
+        box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4), 0 0 0 5px color.adjust(govuk-colour("black"), $alpha: -0.9);
+
+        @include high-contrast-outline;
       }
 
       svg {

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_high-contrast-outline.scss

@@ -0,0 +1,8 @@
+@mixin high-contrast-outline {
+  color-scheme: dark;
+
+  @media (forced-colors: active) {
+    outline: 5px solid currentcolor;
+    forced-color-adjust: auto;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_index.scss

@@ -1,4 +1,5 @@
 @import "grid-helper";
+@import "high-contrast-outline";
 @import "margins";
 @import "prefixed-transform";
 @import "scale";

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -13,6 +13,7 @@
     <li><a href="/component-guide/audit">View component audits</a></li>
     <li><a href="/component-guide/applications">View application information</a></li>
   </ul>
+  <p>These components are maintained for www.gov.uk and GOV.UK Publishing services and have not been tested in other contexts. You are still free to use them if you are not developing for GOV.UK or GOV.UK Publishing, however you will need to do work to ensure they function in your code's ecosystem. We cannot provide support on using these components in your service.</p>
 </div>
 
 <div data-module="filter-list" data-filter-label="Search components">

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

@@ -0,0 +1,131 @@
+<%
+  heading_level ||= 2
+  table_direction ||= "vertical"
+  rows ||= []
+  keys ||= []
+  chart_type ||= "line"
+  download_link ||= false
+  heading ||= nil
+  description ||= nil
+  source ||= false
+
+  if !heading || !description
+    raise ArgumentError, "A heading and description must be provided for accessibility purposes."
+  end
+
+  local_assigns[:margin_bottom] ||= 3
+
+  chart_id = "chart-id-#{SecureRandom.hex(4)}"
+  table_id = "table-id-#{SecureRandom.hex(4)}"
+
+  @include_script ||= OpenStruct.new(script_included: false)
+
+  chart_helper = GovukPublishingComponents::Presenters::ChartHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-chart")
+
+  require "chartkick"
+  Chartkick.options[:html] = '<div id="%{id}"><noscript><p class="govuk-body">This chart uses JavaScript to work. To view the chart, turn on JavaScript in your browser’s settings.</p></noscript></div>'
+%>
+<% if rows.length > 0 && keys.length > 0 %>
+  <% unless @include_script[:script_included] %>
+    <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
+    <% @include_script[:script_included] = true %>
+  <% end %>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <div class="gem-c-chart__heading">
+        <%= render "govuk_publishing_components/components/heading", {
+          text: heading,
+          heading_level: heading_level,
+          margin_bottom: 2,
+        } %>
+        <%= content_tag :p, description, class: "gem-c-chart__a11y-note-1 govuk-body" %>
+    </div>
+
+    <%= content_tag :div, id: chart_id, class: "gem-c-chart__chart" do %>
+      <div class="govuk-visually-hidden">
+        <%= content_tag :div, t("components.chart.accessibility_html"), class: "gem-c-chart__a11y-note-2" %>
+      </div>
+      <span class="gem-c-chart__a11y-note-link">
+        <%= render "govuk_publishing_components/components/skip_link", {
+          text: t("components.chart.accessibility_link", heading: heading),
+          href: "##{table_id}",
+        } %>
+      </span>
+
+      <% if chart_type == "column" %>
+        <%= column_chart(chart_helper.chart_format_data, colors: chart_helper.brand_colours, library: chart_helper.chart_options) %>
+      <% elsif chart_type == "bar" %>
+        <%= bar_chart(chart_helper.chart_format_data, colors: chart_helper.brand_colours, library: chart_helper.chart_options) %>
+      <% else %>
+        <%= line_chart(chart_helper.chart_format_data, colors: chart_helper.brand_colours, library: chart_helper.chart_options) %>
+      <% end %>
+    <% end %>
+
+    <%= content_tag :p, t("components.chart.source", source: source), class: "gem-c-chart__source govuk-body" if source %>
+    <div class="gem-c-chart__table" id="<%= table_id %>">
+      <%= render("govuk_publishing_components/components/details",
+        title: t("components.chart.table_dropdown"),
+      ) do %>
+        <div class="gem-c-chart__table-wrapper">
+          <table class="govuk-table">
+            <caption class="govuk-visually-hidden">
+              <%= t("components.chart.accessibility_heading", heading: heading) %>
+            </caption>
+            <thead class="govuk-table__head">
+              <tr class="govuk-table__row">
+                <td class="govuk-table__cell"></td>
+                <% if table_direction == "horizontal" %>
+                  <% keys.each do |key| %>
+                    <th class="govuk-table__header" scope="col">
+                      <%= key %>
+                    </th>
+                  <% end %>
+                <% else %>
+                  <% rows.each do |row| %>
+                    <th class="govuk-table__header govuk-table__header--stacked" scope="row">
+                      <%= row[:label] %>
+                    </th>
+                  <% end %>
+                <% end %>
+              </tr>
+            </thead>
+            <tbody class="govuk-table__body">
+              <% if table_direction == "horizontal" %>
+                <% rows.each do |row| %>
+                  <tr class="govuk-table__row">
+                    <th class="govuk-table__header" scope="row"><%= row[:label] %></th>
+                    <% row[:values].each do |value| %>
+                      <td class="govuk-table__cell govuk-table__cell--numeric">
+                        <%= number_with_delimiter value %>
+                      </td>
+                    <% end %>
+                  </tr>
+                <% end %>
+              <% else %>
+                <% keys.each_with_index do |key, index| %>
+                  <tr>
+                    <th class="govuk-table__header" scope="row">
+                      <%= key %>
+                    </th>
+                    <% rows.each do |row| %>
+                      <td class="govuk-table__cell govuk-table__cell--numeric">
+                        <%= number_with_delimiter row[:values][index] %>
+                      </td>
+                    <% end %>
+                  </tr>
+                <% end %>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    </div>
+
+    <% if download_link %>
+      <p class="govuk-body">
+        <%= link_to "Download chart data", download_link,  class: "govuk-link" %>
+      </p>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -3,6 +3,7 @@
   service_name_url ||= nil
   navigation_items ||= []
   navigation_aria_label ||= t("components.layout_header.menu")
+  toggle_text ||= t("components.service_navigation.menu_toggle")
   inverse ||= false
   collapse_navigation_on_mobile = local_assigns.fetch(:collapse_navigation_on_mobile, navigation_items.length > 1)
 
@@ -13,6 +14,7 @@
   component_helper.add_data_attribute({ module: "govuk-service-navigation" })
 
   full_width ||= false
+  nav_id = "navigation-#{SecureRandom.hex(4)}"
 %>
 <% if service_name.present? || navigation_items.present? %>
   <% service_navigation_content = capture do %>
@@ -31,11 +33,11 @@
         <% if navigation_items.present? %>
           <nav aria-label="<%= navigation_aria_label %>" class="govuk-service-navigation__wrapper">
             <% if collapse_navigation_on_mobile %>
-              <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden aria-hidden="true">
-                Menu
+              <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="<%= nav_id %>" hidden aria-hidden="true">
+                <%= toggle_text %>
               </button>
             <% end %>
-            <ul class="govuk-service-navigation__list" id="navigation">
+            <ul class="govuk-service-navigation__list" id="<%= nav_id %>">
               <% navigation_items.each do |nav| %>
                 <%
                   nav_classes = %w(govuk-service-navigation__item)

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

@@ -103,7 +103,7 @@
                 <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="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' %>
+              <% elsif link[:icon] == 'twitter' || link[:icon] == 'x' %>
                 <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>

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

@@ -26,7 +26,7 @@
       <% tabs.each_with_index do |tab, index| %>
       <li class="govuk-tabs__list-item <%= "govuk-tabs__list-item--selected" if tab[:active] %>">
         <%
-          tab[:tab_data_attributes] ||= {}
+          data_attributes = tab[:tab_data_attributes] || {}
           unless disable_ga4
             ga4_attributes = {
               event_name: "select_content",
@@ -36,8 +36,8 @@
               index_section_count: tabs.length,
             }
             ga4_attributes[:event_name] = "navigation" if as_links
-            tab[:tab_data_attributes][:ga4_link] = ga4_attributes if as_links
-            tab[:tab_data_attributes][:ga4_event] = ga4_attributes unless as_links
+            data_attributes[:ga4_link] = ga4_attributes if as_links
+            data_attributes[:ga4_event] = ga4_attributes unless as_links
           end
 
           tab_link = "##{tab[:id]}"
@@ -46,7 +46,7 @@
         <%= link_to(tab[:label],
                     tab_link,
                     class: "govuk-tabs__tab",
-                    data: tab[:tab_data_attributes]) %>
+                    data: data_attributes) %>
       </li>
       <% end %>
     </ul>