govuk_publishing_components 9.3.6 → 9.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91608383235d300d56657df62187bb825665dc99cdaacfbcb12591f111cc0600
-  data.tar.gz: d1d0957629c575a9401e5d2af03910f39e357dc915eeb2a8083e42a398e1b908
+  metadata.gz: 17673b0fafadbf9937d4a6df90dfe194a19c8a83a7a0a8c2dbe65be551402f64
+  data.tar.gz: 5146a665a20166d526cb1a6b4f78dc333800d0e421a847515e3f1574d7f43784
 SHA512:
-  metadata.gz: 0b0856a83b0b663dfe443ce02a6f2a910802119b48bf3d7ce9246aa9db8df1eafe2caa47358dbbc60758d383df036382e3623141d79ff7c7bfd4789366bc9163
-  data.tar.gz: 4fd0e833b724f73ac432c118c96b753f8130c305f41c014b34cbe8742ae35d981c902fe110ed4235a7f239e52d32da5ffcd40934649cbdfe1a990b90cbae81fc
+  metadata.gz: a95e67dc05e77c76c2d537330a94884fc5feced188d3e0fefac35c2e130fa6a239ec7235cc6374be4907e84bed6cf2e8006b2ace9fd4f4e06ba24ccfb0a58a09
+  data.tar.gz: f1ae0591b02e3a4ddca6ee7a45e47cb44c62322eabe5ca9292162cd73db19368fdc81d7ccf225628b9396512933261a127b1bb2af8bf47bb20c9e7c050e8dd18

data/README.md

@@ -30,6 +30,19 @@ There are 2 types of helper classes in this app:
 - [AppHelpers](lib/govuk_publishing_components/app_helpers). Are exposed to the applications using this gem. They should be documented using RDoc.
 - [Component Presenters](lib/govuk_publishing_components/presenters). Anything in these classes is only for use within the components. They should be marked `@private`.
 
+## GOV.UK Frontend
+
+This gem is the way GOV.UK consumes [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), part of the GOV.UK Design System.
+
+We use NPM to pull in the GOV.UK Frontend styles and Javascript, but we don't commit
+the `node_modules` directory. To install GOV.UK Frontend on your machine, run:
+
+```
+npm install
+```
+
+You'll need to have installed Node and NPM for this.
+
 ## Documentation
 
 [See the rubydoc.info documentation](http://www.rubydoc.info/gems/govuk_publishing_components)

data/app/assets/stylesheets/component_guide/application.scss

@@ -50,6 +50,16 @@ $border-color: #ccc;
   }
 }
 
+.component-warning {
+  border: 3px solid $orange;
+  margin: 0 0 $gutter;
+  padding: $gutter $gutter 0 $gutter;
+
+  .component-warning__title {
+    @include bold-24;
+  }
+}
+
 .component-doc-h2 {
   @include bold-27;
   margin: ($gutter * 1.5) 0 $gutter;

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

@@ -19,6 +19,7 @@
 @import "components/fieldset";
 @import "components/govspeak";
 @import "components/heading";
+@import "components/highlight-boxes";
 @import "components/image-card";
 @import "components/input";
 @import "components/inverse-header";

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

@@ -0,0 +1,13 @@
+// Include all of the GOV.UK Frontend styles. This includes global styles, fonts,
+// and individual components.
+$govuk-global-styles: true;
+$govuk-image-url-function: 'image-url';
+$govuk-font-url-function: 'font-url';
+
+@import "../../../node_modules/govuk-frontend/all";
+
+// Include our GOV.UK components
+@import "govuk_publishing_components/all_components";
+
+// Components that are only available inside the admin layout
+@import "govuk_publishing_components/components/layout-footer";

data/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss

@@ -0,0 +1,66 @@
+.gem-c-highlight-boxes {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: $gutter-half;
+
+  @include media(tablet) {
+    margin-right: -25px;
+  }
+}
+
+.gem-c-highlight-boxes__item-wrapper {
+  @include core-19;
+  @include box-sizing(border-box);
+  list-style-type: none;
+  padding: ($gutter / 6) $gutter-one-third ($gutter-half + $gutter-one-third) 0;
+  width: 100%;
+
+  @include media(tablet) {
+    width: 50%;
+    padding: ($gutter / 6) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
+  }
+
+  @include media(desktop) {
+    width: (1 / 3) * 100%;
+    padding: ($gutter / 6) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
+  }
+}
+
+.gem-c-highlight-boxes__item {
+  @include box-sizing(border-box);
+  border: 1px solid $grey-2;
+  padding: $gutter-half * 1.5;
+  height: 100%;
+  box-shadow: 7px 7px 0 $white, 8px 8px 0 $grey-2;
+}
+
+.gem-c-highlight-boxes--inverse {
+  background-color: $govuk-blue;
+  border: 0;
+  color: $white;
+}
+
+.gem-c-highlight-boxes--inverse .gem-c-highlight-boxes__title {
+  color: $white;
+}
+
+.gem-c-highlight-boxes__title {
+  @include bold-19;
+  display: block;
+  text-decoration: underline;
+  margin-bottom: 5px;
+}
+
+.gem-c-highlight-boxes__title--featured {
+  @include bold-24;
+}
+
+.gem-c-highlight-boxes__description {
+  margin-bottom: $gutter-one-third;
+}
+
+.gem-c-highlight-boxes__metadata {
+  @include core-16;
+  display: inline-block;
+  margin-right: $gutter-half;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -0,0 +1 @@
+// This component relies on styles from GOV.UK Frontend

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-admin.scss

@@ -0,0 +1 @@
+// This component relies on styles from GOV.UK Frontend

data/app/models/govuk_publishing_components/component_doc.rb

@@ -42,6 +42,14 @@ module GovukPublishingComponents
       component[:display_html]
     end
 
+    def display_preview?
+      component[:display_preview].nil? ? true : component[:display_preview]
+    end
+
+    def part_of_admin_layout?
+      component[:part_of_admin_layout]
+    end
+
     def html_body
       govspeak_to_html(body) if body.present?
     end
@@ -58,6 +66,10 @@ module GovukPublishingComponents
       end
     end
 
+    def govuk_frontend_components
+      component[:govuk_frontend_components].to_a
+    end
+
     def github_search_url
       params = { q: "org:alphagov #{partial_path}", type: "Code" }
       "https://github.com/search?#{params.to_query}"

data/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb

@@ -1,8 +1,10 @@
-<div data-module="test-a11y" data-excluded-rules="<%= @component_doc.accessibility_excluded_rules %>">
-  <%= render "govuk_publishing_components/component_guide/component_doc/component", component_doc: @component_doc, example: example, preview_page: false %>
-  <div class="component-guide-preview component-guide-preview--violation" data-module="test-a11y-violation" data-content="Accessibility Issues"></div>
-  <div class="component-guide-preview component-guide-preview--warning" data-module="test-a11y-warning" data-content="Potential accessibility issues: need manual check"></div>
-</div>
+<% if component_doc.display_preview? %>
+  <div data-module="test-a11y" data-excluded-rules="<%= @component_doc.accessibility_excluded_rules %>">
+    <%= render "govuk_publishing_components/component_guide/component_doc/component", component_doc: @component_doc, example: example, preview_page: false %>
+    <div class="component-guide-preview component-guide-preview--violation" data-module="test-a11y-violation" data-content="Accessibility Issues"></div>
+    <div class="component-guide-preview component-guide-preview--warning" data-module="test-a11y-warning" data-content="Potential accessibility issues: need manual check"></div>
+  </div>
+<% end %>
 
 <% if component_doc.display_html? %>
   <div class="component-guide-preview component-call component-highlight component-output" data-content="HTML OUTPUT">

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

@@ -1,6 +1,15 @@
 <% content_for :title, "#{@component_doc.name} component" %>
 <%= render 'govuk_publishing_components/components/title', title: @component_doc.name, context: "Component" %>
 
+<% if @component_doc.part_of_admin_layout? %>
+<div class="component-warning">
+  <h2 class="component-warning__title">Admin layout only</h2>
+  <p>
+    This component uses the Design System, so only works inside the <%= link_to "admin layout", "/component-guide/layout_for_admin" %>
+  </p>
+</div>
+<% end %>
+
 <div class="component-show">
   <div class="grid-row">
     <div class="column-two-thirds">
@@ -28,6 +37,19 @@
 
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
+  <% if @component_doc.govuk_frontend_components.any? %>
+    <h2 class="component-doc-h2">GOV.UK Design System</h2>
+    <%= render 'govuk_publishing_components/components/govspeak' do %>
+      <p>This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:</p>
+
+      <ul>
+      <% @component_doc.govuk_frontend_components.each do |component| %>
+        <li><%= link_to component.humanize, "https://design-system.service.gov.uk/components/#{component}" %></li>
+      <% end %>
+      </ul>
+    <% end %>
+  <% end %>
+
   <% if @component_doc.accessibility_criteria.present? %>
     <div class="grid-row component-accessibility-criteria">
       <div class="column-two-thirds">

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

@@ -0,0 +1,39 @@
+<%
+  items ||= []
+  inverse ||= false
+  inverse_class = "gem-c-highlight-boxes--inverse" if inverse
+  highlight_boxes_helper = GovukPublishingComponents::Presenters::HighlightBoxesHelper.new(local_assigns)
+%>
+<% if items.any? %>
+  <ol class="gem-c-highlight-boxes" <%= "data-module=track-click" if highlight_boxes_helper.data_tracking? %>>
+    <% items.each do |content_item| %>
+      <li class="gem-c-highlight-boxes__item-wrapper">
+        <div class="gem-c-highlight-boxes__item <%= inverse_class %>">
+          <%= link_to(
+            content_item[:link].fetch(:text),
+            content_item[:link].fetch(:path),
+            class: "gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
+            data: content_item[:link][:data_attributes]
+            )
+          %>
+
+          <% if content_item[:link][:description] %>
+            <p class="gem-c-highlight-boxes__description"><%= content_item[:link][:description] %></p>
+          <% end %>
+
+          <% if content_item[:metadata] %>
+            <% content_item[:metadata].each do |metadata_key, metadata_value| %>
+              <% if metadata_key.to_s.eql?("public_updated_at") %>
+                <time class="gem-c-highlight-boxes__metadata" datetime="<%= metadata_value.iso8601 %>">
+                  <%= l(metadata_value, format: '%e %B %Y') %>
+                </time>
+              <% else %>
+                <p class="gem-c-highlight-boxes__metadata"><%= metadata_value %></p>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </li>
+    <% end %>
+  </ol>
+<% end %>

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

@@ -0,0 +1,26 @@
+<footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+
+        <svg role="presentation" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+          <path
+            fill="currentColor"
+            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
+          />
+        </svg>
+        <span class="govuk-footer__licence-description">
+          All content is available under the
+          <a
+            class="govuk-footer__link"
+            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
+            rel="license"
+          >Open Government Licence v3.0</a>, except where otherwise stated
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a class="govuk-footer__link govuk-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
+      </div>
+    </div>
+  </div>
+</footer>

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

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title><%= browser_title %></title>
+    <%= stylesheet_link_tag 'govuk_publishing_components/admin_styles' %>
+  </head>
+  <body class="govuk-template__body">
+    <%= yield %>
+  </body>
+</html>

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

@@ -0,0 +1,142 @@
+name: Highlight boxes
+description: Displays content item details in a grid of highlight boxes, with a max of 3 items per row.
+body: |
+  The highlight boxes have several optional flags which can be set:
+
+  - Inverse - renders the highlight boxes as white text on a blue background
+  - Featured - renders a specific highlight box with larger font size
+accessibility_criteria: |
+  The highlight boxes must:
+
+  - be visually distinct from other content on the page
+  - have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      items:
+      - link:
+          text: If your child is taken into care
+          path: /child-into-care
+        metadata:
+          document_type: Detailed guide
+      - link:
+          text: High needs funding
+          path: /high-needs-funding
+        metadata:
+          document_type: Guide
+      - link:
+          text: Joint Statement of the 4th meeting of the UK-China High-Level People to People Dialogue
+          path: /government/publications/joint-statement-of-the-4th-meeting-of-the-uk-china-high-level-people-to-people-dialogue
+        metadata:
+          document_type: Policy paper
+  with_descriptions_and_metadata:
+    data:
+      items:
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+  inverse:
+    data:
+      inverse: true
+      items:
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+  featured_card:
+    description: "Used to highlight a specific content item within the highlight boxes, e.g: the most popular."
+    data:
+      items:
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+          featured: true
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+  with_data_tracking_attributes:
+    data:
+      items:
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+          data_attributes: {
+            track_category: "servicesHighlightBoxClicked",
+            track_action: 1,
+            track_label: "/becoming-an-apprentice"
+          }
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+          data_attributes: {
+            track_category: "servicesHighlightBoxClicked",
+            track_action: 2,
+            track_label: "/becoming-an-apprentice",
+            track_options: {
+              dimension28: 2,
+              dimension29: "Becoming an apprentice"
+            }
+          }
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44