govuk_publishing_components 21.22.2 → 21.23.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4f90a6f2455647f21585244ee5a6893bfa8474baceee038ca4a5190446a68367
4
- data.tar.gz: 49aeec37d6161caa77934cceca478f2ba27f08f6f96eb4018717ab71d19ecbe9
3
+ metadata.gz: d5bcdda1b569c7b90dc8b4ae0fa6447a7494b12fea56b23447e30f12a5a77c5f
4
+ data.tar.gz: 881158edbe492a135ffe6ef0255a974b171330a31d211652a3934b749a865ec6
5
5
  SHA512:
6
- metadata.gz: beb447c9295c02c585f9e0cbacb6302324b31dce14915e34bc3b41654937e3495ddde3364c5abfe860f3469808967f3d58ab2bb3c7db4e8e58951558435e8aca
7
- data.tar.gz: 692091eab0e27eb475dffe97d24ce579ac6e6f17f3d8154591a04da2df83344c9a7064ce3615fcecee1e24fab3c7ac2853854494a9a5c1f327459af530037102
6
+ metadata.gz: d09fc5cf84710a16591f38f16567cac3492b9de35e8294b4d7ddb849054aa14e58cb2480f61375bc94551766092f3959666e351ea381c2513f53c191278cbca0
7
+ data.tar.gz: a770b10aee34dcfbabab46499aad8bf140529dd271134b9cd04c32bae0aa4e397831052850a3f839836ac2ebabce13c2883be136de7e1649a51f346c30895511
@@ -9,10 +9,6 @@
9
9
 
10
10
  $gem-guide-border-width: 1px;
11
11
 
12
- .component-guide-wrapper {
13
- padding-bottom: $govuk-gutter * 1.5;
14
- }
15
-
16
12
  .component-list {
17
13
  @include govuk-text-colour;
18
14
  @extend %govuk-list--bullet;
@@ -32,11 +32,10 @@
32
32
  }
33
33
 
34
34
  .gem-c-title__text {
35
- @include govuk-text-colour;
36
- @include govuk-font(48, $weight: bold);
35
+ @extend %govuk-heading-xl;
37
36
  margin: 0;
38
37
  }
39
38
 
40
39
  .gem-c-title__text--long {
41
- @include govuk-font(36, $weight: bold);
40
+ @extend %govuk-heading-l;
42
41
  }
@@ -1,5 +1,5 @@
1
1
  <% content_for :title, "#{@component_example.name} example - #{@component_doc.name} component" %>
2
- <%= render 'govuk_publishing_components/components/title', title: @component_example.name, context: "#{@component_doc.name} example" %>
2
+ <%= render 'govuk_publishing_components/components/title', title: @component_example.name, context: "#{@component_doc.name} example", margin_top: 0 %>
3
3
 
4
4
  <div class="component-show">
5
5
  <div class="component-doc">
@@ -1,4 +1,4 @@
1
- <%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title %>
1
+ <%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title, margin_top: 0 %>
2
2
 
3
3
  <div class="component-markdown">
4
4
  <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
@@ -1,5 +1,5 @@
1
1
  <% content_for :title, "#{@component_doc.name} component" %>
2
- <%= render 'govuk_publishing_components/components/title', title: @component_doc.name, context: "Component" %>
2
+ <%= render 'govuk_publishing_components/components/title', title: @component_doc.name, context: "Component", margin_top: 0; %>
3
3
 
4
4
  <div class="component-show">
5
5
  <div class="govuk-grid-row">
@@ -2,13 +2,14 @@
2
2
  id ||= "modal-dialogue-#{SecureRandom.hex(4)}"
3
3
  wide ||= false
4
4
  data_attributes = {}
5
+ aria_label ||= nil
5
6
  dialog_classes = ["gem-c-modal-dialogue__box"]
6
7
  dialog_classes << "gem-c-modal-dialogue__box--wide" if wide
7
8
  %>
8
9
 
9
10
  <%= tag.div class: "gem-c-modal-dialogue", data: { module: "modal-dialogue" }, id: id do %>
10
11
  <%= tag.div class: "gem-c-modal-dialogue__overlay" %>
11
- <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true }, role: "dialog", tabindex: 0 do %>
12
+ <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %>
12
13
  <%= tag.div class: "gem-c-modal-dialogue__header" do %>
13
14
  <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">
14
15
  <path fill="currentColor" fill-rule="evenodd"
@@ -7,14 +7,15 @@
7
7
  context_data = context.is_a?(Hash) ? context[:data] : false
8
8
 
9
9
  inverse ||= false
10
+ local_assigns[:margin_top] ||= 8
10
11
  local_assigns[:margin_bottom] ||= 8
11
12
 
12
13
  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
13
14
 
14
- classes = %w(gem-c-title govuk-!-margin-top-8)
15
+ classes = %w(gem-c-title)
15
16
  classes << "gem-c-title--inverse" if inverse
17
+ classes << (shared_helper.get_margin_top)
16
18
  classes << (shared_helper.get_margin_bottom)
17
-
18
19
  %>
19
20
  <%= content_tag(:div, class: classes) do %>
20
21
  <% if context %>
@@ -3,7 +3,10 @@ description: Shows only one section, with no other navigation options, until the
3
3
  body: |
4
4
  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.
5
5
 
6
- Modal instances are automatically initialised and their state can be changed programmatically using bounded functions (e.g. `$modalDialogue.open()` and `$modalDialogue.close()`)
6
+ Modal instances are automatically initialised and their state can be changed programmatically using bounded functions (e.g. `$modalDialogue.open()` and `$modalDialogue.close()`).
7
+
8
+ 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.
9
+ 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).
7
10
 
8
11
  This component is currently experimental. If you are using it, please feed back any research findings to the Content Publisher team.
9
12
  accessibility_criteria: |
@@ -48,6 +51,7 @@ examples:
48
51
  <%= component %>
49
52
  data:
50
53
  id: modal-with-form
54
+ aria_label: Search contacts
51
55
  block: |
52
56
  <h1 class="govuk-heading-l">Search contacts</h1>
53
57
  <label class="govuk-label govuk-visually-hidden" for="contacts">Search contacts</label>
@@ -50,7 +50,7 @@ examples:
50
50
  context: Publication
51
51
  title: My page title which is often really long and verbose and has lots of extra words it doesn't need
52
52
  average_title_length: long
53
- with_margin:
53
+ with_margin_bottom:
54
54
  description: |
55
55
  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.
56
56
 
@@ -78,4 +78,13 @@ examples:
78
78
  margin_bottom: 0
79
79
  context:
80
80
  dark_background: true
81
-
81
+ using_design_system_template:
82
+ description: |
83
+ 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.
84
+ embed: |
85
+ <main class="govuk-main-wrapper">
86
+ <%= component %>
87
+ </main>
88
+ data:
89
+ title: My page title
90
+ margin_top: 0
@@ -32,21 +32,22 @@
32
32
  </script>
33
33
  <% if @preview %>
34
34
  <main id="wrapper" class="govuk-width-container">
35
+ <%= yield %>
36
+ </main>
35
37
  <% else %>
36
38
  <%= render "govuk_publishing_components/components/layout_header", {
37
39
  environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
38
40
  product_name: GovukPublishingComponents::Config.component_guide_title,
39
41
  href: component_guide_path
40
42
  } %>
41
-
42
- <main id="wrapper" class="govuk-width-container component-guide-wrapper">
43
- <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs %>
44
- <% end %>
45
-
46
- <%= yield %>
47
- </main>
48
-
49
- <% unless @preview %>
43
+ <div class="govuk-width-container app-width-container--wide">
44
+ <% if @guide_breadcrumbs %>
45
+ <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs %>
46
+ <% end %>
47
+ <main id="wrapper" class="govuk-main-wrapper">
48
+ <%= yield %>
49
+ </main>
50
+ </div>
50
51
  <%= render "govuk_publishing_components/components/layout_footer" %>
51
52
  <% end %>
52
53
 
@@ -1,14 +1,19 @@
1
1
  module GovukPublishingComponents
2
2
  module Presenters
3
3
  class SharedHelper
4
- attr_reader :options, :margin_bottom, :heading_level
4
+ attr_reader :options, :margin_top, :margin_bottom, :heading_level
5
5
 
6
6
  def initialize(local_assigns)
7
7
  @options = local_assigns
8
+ @margin_top = @options[:margin_top] || nil
8
9
  @margin_bottom = @options[:margin_bottom] || 3
9
10
  @heading_level = @options[:heading_level] || 2
10
11
  end
11
12
 
13
+ def get_margin_top
14
+ [*0..9].include?(@margin_top) ? "govuk-!-margin-top-#{margin_top}" : ""
15
+ end
16
+
12
17
  def get_margin_bottom
13
18
  [*0..9].include?(@margin_bottom) ? "govuk-!-margin-bottom-#{margin_bottom}" : "govuk-!-margin-bottom-3"
14
19
  end
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = '21.22.2'.freeze
2
+ VERSION = '21.23.0'.freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 21.22.2
4
+ version: 21.23.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-02-17 00:00:00.000000000 Z
11
+ date: 2020-02-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: gds-api-adapters