govuk_publishing_components 21.22.2 → 21.23.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f90a6f2455647f21585244ee5a6893bfa8474baceee038ca4a5190446a68367
-  data.tar.gz: 49aeec37d6161caa77934cceca478f2ba27f08f6f96eb4018717ab71d19ecbe9
+  metadata.gz: d5bcdda1b569c7b90dc8b4ae0fa6447a7494b12fea56b23447e30f12a5a77c5f
+  data.tar.gz: 881158edbe492a135ffe6ef0255a974b171330a31d211652a3934b749a865ec6
 SHA512:
-  metadata.gz: beb447c9295c02c585f9e0cbacb6302324b31dce14915e34bc3b41654937e3495ddde3364c5abfe860f3469808967f3d58ab2bb3c7db4e8e58951558435e8aca
-  data.tar.gz: 692091eab0e27eb475dffe97d24ce579ac6e6f17f3d8154591a04da2df83344c9a7064ce3615fcecee1e24fab3c7ac2853854494a9a5c1f327459af530037102
+  metadata.gz: d09fc5cf84710a16591f38f16567cac3492b9de35e8294b4d7ddb849054aa14e58cb2480f61375bc94551766092f3959666e351ea381c2513f53c191278cbca0
+  data.tar.gz: a770b10aee34dcfbabab46499aad8bf140529dd271134b9cd04c32bae0aa4e397831052850a3f839836ac2ebabce13c2883be136de7e1649a51f346c30895511

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

@@ -9,10 +9,6 @@
 
 $gem-guide-border-width: 1px;
 
-.component-guide-wrapper {
-  padding-bottom: $govuk-gutter * 1.5;
-}
-
 .component-list {
   @include govuk-text-colour;
   @extend %govuk-list--bullet;

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

@@ -32,11 +32,10 @@
 }
 
 .gem-c-title__text {
-  @include govuk-text-colour;
-  @include govuk-font(48, $weight: bold);
+  @extend %govuk-heading-xl;
   margin: 0;
 }
 
 .gem-c-title__text--long {
-  @include govuk-font(36, $weight: bold);
+  @extend %govuk-heading-l;
 }

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

@@ -1,5 +1,5 @@
 <% content_for :title, "#{@component_example.name} example - #{@component_doc.name} component" %>
-<%= render 'govuk_publishing_components/components/title', title: @component_example.name, context: "#{@component_doc.name} example" %>
+<%= render 'govuk_publishing_components/components/title', title: @component_example.name, context: "#{@component_doc.name} example", margin_top: 0 %>
 
 <div class="component-show">
   <div class="component-doc">

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

@@ -1,4 +1,4 @@
-<%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title %>
+<%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title, margin_top: 0 %>
 
 <div class="component-markdown">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>

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

@@ -1,5 +1,5 @@
 <% content_for :title, "#{@component_doc.name} component" %>
-<%= render 'govuk_publishing_components/components/title', title: @component_doc.name, context: "Component" %>
+<%= render 'govuk_publishing_components/components/title', title: @component_doc.name, context: "Component", margin_top: 0; %>
 
 <div class="component-show">
   <div class="govuk-grid-row">

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

@@ -2,13 +2,14 @@
   id ||= "modal-dialogue-#{SecureRandom.hex(4)}"
   wide ||= false
   data_attributes = {}
+  aria_label ||= nil
   dialog_classes = ["gem-c-modal-dialogue__box"]
   dialog_classes << "gem-c-modal-dialogue__box--wide" if wide
 %>
 
 <%= tag.div class: "gem-c-modal-dialogue", data: { module: "modal-dialogue" }, id: id do %>
   <%= tag.div class: "gem-c-modal-dialogue__overlay" %>
-  <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true }, role: "dialog", tabindex: 0 do %>
+  <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %>
     <%= tag.div class: "gem-c-modal-dialogue__header" do %>
       <svg role="presentation" focusable="false" class="gem-c-modal-dialogue__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="26" width="30">
         <path fill="currentColor" fill-rule="evenodd"

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

@@ -7,14 +7,15 @@
   context_data = context.is_a?(Hash) ? context[:data] : false
 
   inverse ||= false
+  local_assigns[:margin_top] ||= 8
   local_assigns[:margin_bottom] ||= 8
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  classes = %w(gem-c-title govuk-!-margin-top-8)
+  classes = %w(gem-c-title)
   classes << "gem-c-title--inverse" if inverse
+  classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom)
-
 %>
 <%= content_tag(:div, class: classes) do %>
   <% if context %>

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

@@ -3,7 +3,10 @@ description: Shows only one section, with no other navigation options, until the
 body: |
   Use where the application has gotten into a state from which it shouldn’t or can’t proceed without input from the user or the state of the current page needs to be preserved.
 
-  Modal instances are automatically initialised and their state can be changed programmatically using bounded functions (e.g. `$modalDialogue.open()` and `$modalDialogue.close()`)
+  Modal instances are automatically initialised and their state can be changed programmatically using bounded functions (e.g. `$modalDialogue.open()` and `$modalDialogue.close()`).
+
+  When the component is not limited to presenting information (e.g. an alert dialog or an informative dialog) and it contains interactive elements (e.g. form elements) you should use the `aria_label` attribute.
+  This will provide context around what the modal dialogue is about and will prevent it from being too verbose for screen reader users (if `aria_label` is not specified the whole modal content will be read out).
 
   This component is currently experimental. If you are using it, please feed back any research findings to the Content Publisher team.
 accessibility_criteria: |
@@ -48,6 +51,7 @@ examples:
       <%= component %>
     data:
       id: modal-with-form
+      aria_label: Search contacts
       block: |
         <h1 class="govuk-heading-l">Search contacts</h1>
           <label class="govuk-label govuk-visually-hidden" for="contacts">Search contacts</label>

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

@@ -50,7 +50,7 @@ examples:
       context: Publication
       title: My page title which is often really long and verbose and has lots of extra words it doesn't need
       average_title_length: long
-  with_margin:
+  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 margin bottom of 50px.
 
@@ -78,4 +78,13 @@ examples:
       margin_bottom: 0
     context:
       dark_background: true
-
+  using_design_system_template:
+    description: |
+      This option allows the removal of top margin from the component so that it works within a [Design System page template](https://design-system.service.gov.uk/styles/page-template/default/index.html), where spacing above the title is already provided by padding on the wrapping div.
+    embed: |
+      <main class="govuk-main-wrapper">
+        <%= component %>
+      </main>
+    data:
+      title: My page title
+      margin_top: 0

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -32,21 +32,22 @@
     </script>
     <% if @preview %>
       <main id="wrapper" class="govuk-width-container">
+        <%= yield %>
+      </main>
     <% else %>
       <%= render "govuk_publishing_components/components/layout_header", {
         environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
         product_name: GovukPublishingComponents::Config.component_guide_title,
         href: component_guide_path
       } %>
-
-      <main id="wrapper" class="govuk-width-container component-guide-wrapper">
-      <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs  %>
-    <% end %>
-
-    <%= yield %>
-    </main>
-
-    <% unless @preview %>
+      <div class="govuk-width-container app-width-container--wide">
+        <% if @guide_breadcrumbs %>
+          <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs  %>
+        <% end %>
+        <main id="wrapper" class="govuk-main-wrapper">
+          <%= yield %>
+        </main>
+      </div>
       <%= render "govuk_publishing_components/components/layout_footer" %>
     <% end %>
 

data/lib/govuk_publishing_components/presenters/shared_helper.rb

@@ -1,14 +1,19 @@
 module GovukPublishingComponents
   module Presenters
     class SharedHelper
-      attr_reader :options, :margin_bottom, :heading_level
+      attr_reader :options, :margin_top, :margin_bottom, :heading_level
 
       def initialize(local_assigns)
         @options = local_assigns
+        @margin_top = @options[:margin_top] || nil
         @margin_bottom = @options[:margin_bottom] || 3
         @heading_level = @options[:heading_level] || 2
       end
 
+      def get_margin_top
+        [*0..9].include?(@margin_top) ? "govuk-!-margin-top-#{margin_top}" : ""
+      end
+
       def get_margin_bottom
         [*0..9].include?(@margin_bottom) ? "govuk-!-margin-bottom-#{margin_bottom}" : "govuk-!-margin-bottom-3"
       end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '21.22.2'.freeze
+  VERSION = '21.23.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.22.2
+  version: 21.23.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-17 00:00:00.000000000 Z
+date: 2020-02-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: gds-api-adapters