govuk_publishing_components 44.2.0 → 44.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9965237d610d89cc111280485974a006db97821e70a9c08c9e676af6e306738b
-  data.tar.gz: 665b1ff85c45117c62f6217be18e5656bef8ea610367e0743b4dbcc220e3eeba
+  metadata.gz: acaaebc230d315ddd2b5247622c5b98dccef59074721ca8f33c338360b55ddc4
+  data.tar.gz: 4662cc43523ed060f3d57044179501e2623f9ac93574a38fdfb5c1c8f069e928
 SHA512:
-  metadata.gz: 0bd2fb7d183bc3b859f739520bcc30b0cf4b774711e1c2245d1c849f74ba611a8b163efe962c0e68c4b01dbb29a28fbb9a193199fd91f5ac1fa39ac16fbd156f
-  data.tar.gz: e5bdab047bbac0d6402fc5bd4febfa613008e410cffaba4d9c2b3b45766b78ee776a3390b221831f54b9373c9d492642b8d3ad7567b1324b0df6bea3ad9776d8
+  metadata.gz: 3b14547627345313b4f75687ab9565fe1bf959d3245b833c2fc959b6b5dc5bbb14d8bce0e15826ea4ecef4475b99384c04251125539ef1e8576102424e7309e7
+  data.tar.gz: 5a99542a48114c6a2fe965b06ec669e10d2d8b66877190f042f6df02c8135d717f63864c5ff3732d0ba1d5bada1ba34ed4373626f55c2d117effe91889c28c2d

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

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

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

@@ -0,0 +1,44 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.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__accessibility-message {
+  @include govuk-visually-hidden;
+}

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

@@ -27,13 +27,13 @@
 }
 
 .gem-c-contents-list__link {
-  .gem-c-contents-list__list-item--parent > & {
-    font-weight: bold;
-  }
-
   @include govuk-template-link-focus-override;
 }
 
+.gem-c-contents-list__list-item--parent > .gem-c-contents-list__link {
+  font-weight: $govuk-font-weight-bold;
+}
+
 .gem-c-contents-list__list-item {
   padding-top: govuk-spacing(2);
   line-height: 1.3;
@@ -50,7 +50,7 @@
   padding-left: $contents-spacing;
   padding-right: $contents-spacing;
 
-  & span::before {
+  .gem-c-contents-list__list-item-dash::before {
     content: "—";
     position: absolute;
     left: 0;
@@ -76,6 +76,29 @@
   }
 }
 
+.gem-c-contents-list--alternative-line-style {
+  .gem-c-contents-list__title {
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .gem-c-contents-list__list-item {
+    padding: govuk-spacing(2) 0;
+    margin: 0;
+  }
+
+  .gem-c-contents-list__list-item-dash::before {
+    display: none;
+  }
+
+  .gem-c-contents-list__list-item--active {
+    padding: govuk-spacing(1) govuk-spacing(2);
+    margin: govuk-spacing(1) 0;
+    border-left: 4px solid govuk-colour("blue");
+    color: govuk-colour("blue");
+    font-weight: $govuk-font-weight-bold;
+  }
+}
+
 @include govuk-media-query($media-type: print) {
   // Override default browser indentation
   .gem-c-contents-list__list,

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -82,6 +82,21 @@
   }
 }
 
+.gem-c-organisation-logo--inverse {
+  .gem-c-organisation-logo__container {
+    border-color: govuk-colour("white");
+    @include govuk-link-style-inverse;
+  }
+
+  .gem-c-organisation-logo__crest {
+    filter: brightness(0) invert(1);
+
+    &:focus {
+      filter: none;
+    }
+  }
+}
+
 @mixin crest($crest, $xpos:0, $ypos:0) {
   background: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png") no-repeat $xpos $ypos;
   background-size: auto 32px;

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -83,3 +83,35 @@ $column-width: 9.5em;
     display: block;
   }
 }
+
+.gem-c-share-links--square-icons {
+  .gem-c-share-links__list-item {
+    padding-left: 60px;
+    padding-top: 12px;
+    margin-bottom: 30px;
+  }
+
+  .gem-c-share-links__link-icon {
+    background-color: govuk-colour("dark-blue");
+    color: govuk-colour("white");
+    padding: govuk-spacing(2);
+    margin-right: govuk-spacing(2);
+  }
+
+  .gem-c-share-links__link:hover {
+    .gem-c-share-links__link-icon {
+      background-color: govuk-colour("black");
+    }
+  }
+
+  .gem-c-share-links__link:focus {
+    .gem-c-share-links__link-icon {
+      background-color: govuk-colour("black");
+    }
+  }
+
+  .gem-c-share-links__label {
+    color: govuk-colour("black");
+    @include govuk-font(19, $weight: bold);
+  }
+}

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

@@ -0,0 +1,151 @@
+<%
+  add_gem_component_stylesheet("chart")
+  add_gem_component_stylesheet("table")
+  add_gem_component_stylesheet("details")
+  add_gem_component_stylesheet("heading")
+
+  chart_heading ||= nil
+  chart_heading_level ||= 2
+  table_direction ||= "horizontal"
+  h_axis_title ||= nil
+  v_axis_title ||= nil
+  rows ||= []
+  keys ||= []
+  chart_overview ||= nil
+  hide_legend ||= false
+  link ||= false
+
+  chart_id = "chart-id-#{SecureRandom.hex(4)}"
+  table_id = "table-id-#{SecureRandom.hex(4)}"
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-chart")
+  component_helper.add_class(shared_helper.get_margin_bottom)
+
+  require "chartkick"
+  Chartkick.options[:html] = '<div id="%{id}"><noscript><p class="govuk-body">Our charts are built using JavaScript but all the data is also available in the table below.</p></noscript></div>'
+  # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart
+  font_16 = { color: '#000', fontName: 'GDS Transport', fontSize: '16', italic: false }
+  font_19 = { color: '#000', fontName: 'GDS Transport', fontSize: '19', italic: false }
+  legend = 'none'
+  legend = { position: 'top', textStyle: font_16 } unless hide_legend
+
+  chart_library_options = {
+    chartArea: { width: '80%', height: '60%' },
+    crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' },
+    curveType: 'none',
+    legend: legend,
+    pointSize: 10,
+    height: 400,
+    tooltip: { isHtml: true },
+    hAxis: {
+      textStyle: font_16,
+      format: 'd MMM Y', # https://developers.google.com/chart/interactive/docs/reference#dateformatter
+      title: h_axis_title,
+      titleTextStyle: font_19,
+    },
+    vAxis: {
+      format: '#,###,###',
+      textStyle: font_16,
+      title: v_axis_title,
+      titleTextStyle: font_19,
+    },
+  }
+
+  if rows.length > 0 && keys.length > 0
+    chart_format_data = rows.map do |row|
+      {
+        name: row[:label],
+        linewidth: 10,
+        data: keys.zip(row[:values])
+      }
+    end
+  end
+%>
+<% if rows.length > 0 && keys.length > 0 %>
+  <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <% if chart_heading %>
+      <%= render "govuk_publishing_components/components/heading", {
+        text: chart_heading,
+        heading_level: chart_heading_level,
+        margin_bottom: 2,
+      } %>
+    <% end %>
+
+    <div class="gem-c-chart__chart" id="<%= chart_id %>">
+      <div class="gem-c-chart__accessibility-message">
+        <%= t("components.chart.accessibility_html", table_id: table_id) %>
+        <%= content_tag :span, chart_overview, class: "gem-c-chart__overview" if chart_overview %>
+      </div>
+      <%= line_chart(chart_format_data, library: chart_library_options) %>
+    </div>
+
+    <div class="gem-c-chart__table" id="<%= table_id %>">
+      <%= render("govuk_publishing_components/components/details",
+        title: t("components.chart.table_dropdown")
+      ) do %>
+        <div tabindex="0" class="gem-c-chart__table-wrapper">
+          <table class="govuk-table">
+            <% if table_direction == "horizontal" %>
+              <thead class="govuk-table__head">
+                <tr class="govuk-table__row">
+                  <td class="govuk-table__cell"></td>
+                  <% keys.each do |key| %>
+                    <th class="govuk-table__header scope="col">
+                      <%= key %>
+                    </th>
+                  <% end %>
+                </tr>
+              </thead>
+              <tbody class="govuk-table__body">
+                <% 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 %>
+              </tbody>
+            <% else %>
+              <thead class="govuk-table__head">
+                <tr class="govuk-table__row">
+                  <td class="govuk-table__cell"></td>
+                  <% rows.each do |row| %>
+                    <th class="govuk-table__header govuk-table__header--stacked" scope="row">
+                      <%= row[:label] %>
+                    </th>
+                  <% end %>
+                </tr>
+              </thead>
+              <tbody class="govuk-table__body">
+                <% 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 %>
+              </tbody>
+            <% end %>
+          </table>
+        </div>
+      <% end %>
+    </div>
+
+    <% if link %>
+      <p class="govuk-body">
+        <%= link_to "Download chart data", link,  class: "govuk-link" %>
+      </p>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -4,6 +4,8 @@
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
   underline_links ||= false
   format_numbers ||= false
+  alternative_line_style ||= false
+  title ||= nil
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en")
@@ -22,6 +24,8 @@
   local_assigns[:aria] ||= {}
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}")
+  component_helper.add_class("gem-c-contents-list--alternative-line-style") if alternative_line_style
+  component_helper.add_class("gem-c-contents-list--custom-title") if title
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
   component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
   component_helper.add_role("navigation")
@@ -33,14 +37,14 @@
         title_fallback == "en" ? {:lang => "en",} : {}
       )
     ) do %>
-      <%= t("components.contents_list.contents") %>
+      <%= title || t("components.contents_list.contents") %>
     <% end %>
 
     <ol class="gem-c-contents-list__list">
       <% index_link = 1 unless disable_ga4 %>
       <% contents.each do |contents_item| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
-          <span aria-hidden="true"></span>
+          <span class="gem-c-contents-list__list-item-dash" aria-hidden="true"></span>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : cl_helper.clean_string(contents_item[:text])
             unless disable_ga4
               ga4_data[:event_name] = cl_helper.get_ga4_event_name(contents_item[:href]) if contents_item[:href]
@@ -58,7 +62,7 @@
             <ol class="gem-c-contents-list__nested-list">
               <% contents_item[:items].each do |nested_contents_item| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
-                  <span aria-hidden="true"></span>
+                  <span class="gem-c-contents-list__list-item-dash" aria-hidden="true"></span>
                   <%
                     unless disable_ga4
                       ga4_data[:event_name] = cl_helper.get_ga4_event_name(nested_contents_item[:href]) if nested_contents_item[:href]

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

@@ -7,6 +7,7 @@
   organisation ||= {}
   heading_level ||= false
   inline ||= false
+  inverse ||= false
 
   # Check if `heading_level` is an appropriate number:
   use_heading = [*1..6].include?(heading_level)
@@ -16,6 +17,7 @@
 
   wrapper_classes = %w[gem-c-organisation-logo]
   wrapper_classes << brand_helper.brand_class
+  wrapper_classes << "gem-c-organisation-logo--inverse" if inverse
 
   container_classes = [
     logo_helper.logo_container_class,

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

@@ -8,6 +8,7 @@
   ga4_extra_data ||= {}
   stacked ||= false
   columns ||= false
+  square_icons ||= false
 
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
@@ -15,6 +16,8 @@
   classes = %w(gem-c-share-links govuk-!-display-none-print)
   classes << "gem-c-share-links--stacked" if stacked
   classes << "gem-c-share-links--columns" if columns
+  classes << "gem-c-share-links--square-icons" if square_icons
+
   classes << brand_helper.brand_class
 
   data_attributes ||= {}
@@ -110,7 +113,7 @@
                   <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"/>
                 </svg>
               <% end %>
-            </span><%= link_text %><% end %>
+            </span><%= tag.span(class: "gem-c-share-links__label") do %><%= link_text %><% end %><% end %>
         </li>
       <% end %>
     </ul>

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

@@ -0,0 +1,238 @@
+name: Chart (experimental)
+description: The chart component presents a data chart and a tabular version of the same data
+part_of_admin_layout: true
+body: |
+  This component takes a set of data and presents it as a line graph and a table with one or more rows and lines.
+  The chart relies upon chartkick and renders using JavaScript, so the table is provided as a fallback for a lack of JavaScript,
+  an accessible view on the data for screenreaders, and a simple view of the raw data for all users.
+
+  The `overview` option can be used to provide an explanation for screen reader users of what the graph shows.
+accessibility_criteria: |
+  Charts must:
+
+    - use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+shared_accessibility_criteria:
+  - link
+uses_component_wrapper_helper: true
+examples:
+  default:
+    data:
+      chart_heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      overview: This chart shows page views for January 2015.
+      hide_legend: true
+      keys:
+        - "2015-01-01"
+        - "2015-01-02"
+        - "2015-01-03"
+        - "2015-01-04"
+        - "2015-01-05"
+        - "2015-01-06"
+        - "2015-01-07"
+        - "2015-01-08"
+        - "2015-01-09"
+        - "2015-01-10"
+      rows:
+        - label: January 2015
+          values:
+            - 500
+            - 1190
+            - 740
+            - 820
+            - 270
+            - 450
+            - 110
+            - 210
+            - 670
+            - 430
+  multiple rows of data:
+    description: Where more than one series is shown on a chart, do not hide the legend.
+    data:
+      chart_heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+        - 8th
+        - 9th
+        - 10th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 82
+            - 27
+            - 45
+            - 11
+            - 21
+            - 67
+            - 43
+        - label: January 2016
+          values:
+            - 5
+            - 8
+            - 37
+            - 50
+            - 43
+            - 29
+            - 67
+            - 61
+            - 14
+            - 91
+        - label: January 2017
+          values:
+            - 31
+            - 81
+            - 12
+            - 15
+            - 52
+            - 61
+            - 143
+            - 27
+            - 18
+            - 34
+  vertical table:
+    description: Reorient the table to better suit the output of some data sets.
+    data:
+      chart_heading: Page views chart
+      table_direction: vertical
+      h_axis_title: Day
+      v_axis_title: Views
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80
+  with_a_different_heading_level:
+    description: Use a different heading level for the chart heading. It defaults to a H2.
+    data:
+      chart_heading: Page views chart
+      chart_heading_level: 4
+      h_axis_title: Day
+      v_axis_title: Views
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80
+  with_a_download_link:
+    description: Add a download link to the original data. Doesn't do anything clever, just creates a link to the URL passed.
+    data:
+      chart_heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      link: 'https://www.gov.uk'
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80
+  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 bottom margin of 15px.
+    data:
+      chart_heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      margin_bottom: 9
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80

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

@@ -193,6 +193,38 @@ examples:
             text: 2. Numbers not parsed
           - href: "#third-thing"
             text: 3. Numbers are just text
+  with_alternative_line_style:
+    description: With this option, the individual lines get different styling. The left hand indent and dashes are removed, there's more vertical space between each list item and the active links are styled with a vertical left hand border.
+    data:
+      alternative_line_style: true
+      contents:
+        - href: "#first-thing"
+          text: First page title link
+        - href: "#second-thing"
+          text: Second page title link
+        - href: "#third-thing"
+          text: Third page title link
+          active: true
+        - href: "#fourth-thing"
+          text: Fourth page title link
+        - href: "#fifth-thing"
+          text: Fifth page title link
+  with_custom_title:
+    description: With this option, the 'Contents' title is replaced with the supplied alternate title. This should only be used when using this component as a navigation element on landing pages. Typically used with `alternative_line_style`.
+    data:
+      title: "An alternate title"
+      contents:
+        - href: "#first-thing"
+          text: First page title link
+        - href: "#second-thing"
+          text: Second page title link
+        - href: "#third-thing"
+          text: Third page title link
+          active: true
+        - href: "#fourth-thing"
+          text: Fourth page title link
+        - href: "#fifth-thing"
+          text: Fifth page title link
   without_ga4_tracking:
     description: Disables GA4 link tracking on the list. Tracking is enabled by default.
     data: