govuk_publishing_components 24.8.0 → 24.9.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: '0970bb03929bfc783d477b903ce46f8f8fa47ad800b74303f61c4f2e473a914e'
4
- data.tar.gz: e1bc0b5d89be175278b988b30b85269b7128fc9fa5fbb3286b582bf66c91b7f0
3
+ metadata.gz: d79929a27b4001f7a46caed7050ee5c3d04eda5137c21e8a28bef4cd12b8ce54
4
+ data.tar.gz: 957d3905b7989a6eda0c9bb54e262b197fee924df5cd7edc56d983018f650577
5
5
  SHA512:
6
- metadata.gz: 7dfb6d556b81cc890eec0fa6884a7738d2c47b0b5bba80d0f8b35788682ba8cd0c4d9528370f7175c3b2361f47592fa405ebb43e8b5fa43954fc57bc23960dcc
7
- data.tar.gz: 3e58e5f9b229c8c85e734b74fd2ba98db39cd9f66ba80bab12cf8ac6acc8a482a059f200d9b721e530c190a6dff73915c9641377a77afaef5506eef8d4ca9aaf
6
+ metadata.gz: b3f25112299f7b0c198c884293a3932176bb299bc0d7477434f1124facb36b03fe365ecfca09a249844e5701c881e64a359e3be2fb71995daf74bfd0f56ee38c
7
+ data.tar.gz: cbacbec44192f78e41925a071ef9e0b854e0690b4d999d8515e7828071cd8a620044ee3182ac7eb3e50069f3e077ea4d8cd560bce8c4d89da9d0b41b7104c3b2
@@ -59,12 +59,10 @@
59
59
  }
60
60
 
61
61
  .gem-c-image-card__title {
62
- @include govuk-font(19, $weight: bold);
63
62
  margin: 0;
64
63
  }
65
64
 
66
65
  .gem-c-image-card__title-link {
67
- @extend %govuk-link;
68
66
  text-decoration: none;
69
67
 
70
68
  &:hover {
@@ -136,7 +134,6 @@
136
134
  }
137
135
 
138
136
  .gem-c-image-card__list-item-link {
139
- @extend %govuk-link;
140
137
  line-height: 1.35em;
141
138
  }
142
139
 
@@ -193,7 +190,6 @@
193
190
  }
194
191
 
195
192
  .gem-c-image-card__title {
196
- @include govuk-font(24, $weight: bold);
197
193
  padding-bottom: govuk-spacing(2);
198
194
  }
199
195
 
@@ -1,36 +1,5 @@
1
- .gem-c-success-alert {
2
- color: $govuk-text-colour;
3
- padding: govuk-spacing(3);
4
- border: $govuk-border-width-narrow solid $govuk-success-colour;
5
- @include govuk-responsive-margin(8, "bottom");
6
-
7
- @include govuk-media-query($from: tablet) {
8
- padding: govuk-spacing(4);
9
- border-width: $govuk-border-width;
10
- }
11
- }
1
+ @import "govuk/components/notification-banner/notification-banner";
12
2
 
13
3
  .gem-c-success-alert__message {
14
4
  @include govuk-font(19, $weight: bold);
15
- margin: 0;
16
- }
17
-
18
- .gem-c-success-summary__title {
19
- margin-top: 0;
20
- margin-bottom: govuk-spacing(3);
21
-
22
- @include govuk-media-query($from: tablet) {
23
- margin-bottom: govuk-spacing(4);
24
- }
25
-
26
- @include govuk-font(24, $weight: bold);
27
- }
28
-
29
- .gem-c-success-summary__body {
30
- @include govuk-font(19);
31
- margin: 0;
32
- }
33
-
34
- .gem-c-success-alert:focus {
35
- outline: $govuk-focus-width solid $govuk-focus-colour;
36
5
  }
@@ -6,6 +6,10 @@
6
6
  classes = "gem-c-image-card"
7
7
  classes << " gem-c-image-card--large" if card_helper.large
8
8
  classes << " gem-c-image-card--no-image" unless defined?(image_src)
9
+
10
+ font_size ||= card_helper.large ? 'm' : 's'
11
+ heading_class = %w[gem-c-image-card__title]
12
+ heading_class << shared_helper.get_heading_size(font_size, 's')
9
13
  %>
10
14
  <% if card_helper.href || card_helper.extra_links.any? %>
11
15
  <div class="<%= classes %> <%= brand_helper.brand_class %>"
@@ -14,16 +18,15 @@
14
18
  <div class="gem-c-image-card__text-wrapper">
15
19
  <div class="gem-c-image-card__header-and-context-wrapper">
16
20
  <% if card_helper.heading_text %>
17
- <%= content_tag(shared_helper.get_heading_level,
18
- class: "gem-c-image-card__title") do %>
19
- <% if card_helper.href %>
20
- <%= link_to card_helper.heading_text, card_helper.href,
21
- class: "gem-c-image-card__title-link #{brand_helper.color_class}",
22
- data: card_helper.href_data_attributes
23
- %>
24
- <% else %>
25
- <%= card_helper.heading_text %>
26
- <% end %>
21
+ <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
22
+ <% if card_helper.href %>
23
+ <%= link_to card_helper.heading_text, card_helper.href,
24
+ class: "gem-c-image-card__title-link govuk-link #{brand_helper.color_class}",
25
+ data: card_helper.href_data_attributes
26
+ %>
27
+ <% else %>
28
+ <%= card_helper.heading_text %>
29
+ <% end %>
27
30
  <% end %>
28
31
  <% end %>
29
32
  <%= card_helper.context %>
@@ -34,7 +37,7 @@
34
37
  <% card_helper.extra_links.each do |link| %>
35
38
  <li class="gem-c-image-card__list-item">
36
39
  <%= link_to link[:text], link[:href],
37
- class: "gem-c-image-card__list-item-link #{brand_helper.color_class}",
40
+ class: "gem-c-image-card__list-item-link govuk-link #{brand_helper.color_class}",
38
41
  data: link[:data_attributes]
39
42
  %>
40
43
  </li>
@@ -1,10 +1,26 @@
1
- <% description ||= nil %>
1
+ <%
2
+ description ||= nil
3
+ title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
4
+ %>
2
5
 
3
- <%= tag.div class: "gem-c-success-alert", data: { module: "initial-focus" }, role: "alert", tabindex: "-1" do %>
4
- <% if description.present? %>
5
- <%= tag.h2 message, class: "gem-c-success-summary__title" %>
6
- <%= tag.div description, class: "gem-c-success-summary__body" %>
7
- <% else %>
8
- <%= tag.p message, class: "gem-c-success-alert__message" %>
9
- <% end %>
6
+ <%= tag.div class: "gem-c-success-alert govuk-notification-banner govuk-notification-banner--success",
7
+ role: "alert",
8
+ tabindex: "-1",
9
+ aria: {
10
+ labelledby: title_id,
11
+ },
12
+ data: {
13
+ module: "initial-focus",
14
+ } do %>
15
+ <div class="govuk-notification-banner__header">
16
+ <%= tag.h2 t("govuk_component.success_alert.success", default: "Success"), class: "govuk-notification-banner__title", id: title_id %>
17
+ </div>
18
+ <div class="govuk-notification-banner__content">
19
+ <% if description.present? %>
20
+ <%= tag.h3 message, class: "govuk-notification-banner__heading" %>
21
+ <%= description %>
22
+ <% else %>
23
+ <%= tag.p message, class: "govuk-body gem-c-success-alert__message" %>
24
+ <% end %>
25
+ </div>
10
26
  <% end %>
@@ -35,6 +35,18 @@ examples:
35
35
  image_alt: "some meaningful alt text please"
36
36
  heading_text: "I am not a heading"
37
37
  heading_level: 0
38
+ with_different_link_size:
39
+ description: |
40
+ Set a different font size for the link. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 19px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
41
+
42
+ This option is not tied to the `heading_level` option in order to give flexibility.
43
+ data:
44
+ href: "/definitely-not-a-page"
45
+ image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
46
+ image_alt: "some meaningful alt text please"
47
+ heading_text: "I am a big link"
48
+ heading_level: 0
49
+ font_size: 'xl'
38
50
  with_more_information:
39
51
  data:
40
52
  href: "/also-not-a-page"
@@ -8,6 +8,8 @@ body: |
8
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
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).
10
10
 
11
+ Modal components must be a direct descendant of the `<body>` element; we recommend placing it toward the end of the document for performance considerations.
12
+
11
13
  This component is currently experimental. If you are using it, please feed back any research findings to the Content Publisher team.
12
14
  accessibility_criteria: |
13
15
  The modal dialogue box must:
@@ -21,6 +23,7 @@ accessibility_criteria: |
21
23
  - can be operable with a keyboard (allows the ESC key to close the dialogue)
22
24
  - return focus to last focused element on close
23
25
 
26
+ display_preview: false
24
27
  examples:
25
28
  default:
26
29
  embed: |
@@ -1,5 +1,7 @@
1
1
  name: Success alert
2
2
  description: Used at the top of the page, to summarise a successful user action.
3
+ govuk_frontend_components:
4
+ - notification-banner
3
5
  accessibility_criteria: |
4
6
  - should be focused on page load, to ensure the message is noticed by
5
7
  assistive tech
@@ -10,9 +12,18 @@ examples:
10
12
  data:
11
13
  message: Message to alert the user to a successful action goes here
12
14
  with_message_and_description:
15
+ description: Descriptions can be passed as plain text but it is strongly recommended that you pass these as html, cleaned using `raw` or `sanitize`.
13
16
  data:
14
17
  message: Message to alert the user to a successful action goes here
15
- description: A further description
18
+ description: <p class="govuk-body">A further description</p>
19
+ with_custom_title_id:
20
+ description: |
21
+ This is for the heading element at the head of the component (reading "Success" by default) where the id is used by an `aria-labelledby` on screen reader focus of the element.
22
+
23
+ Please ensure that this id is unique across the view you are building.
24
+ data:
25
+ message: Message to alert the user to a successful action goes here
26
+ title_id: my-custom-success-id
16
27
  long_example:
17
28
  data:
18
29
  message: |
@@ -100,6 +100,8 @@ en:
100
100
  hide_password: "Hide password"
101
101
  announce_show: "Your password is shown"
102
102
  announce_hide: "Your password is hidden"
103
+ success_alert:
104
+ success: "Success"
103
105
  print_link:
104
106
  text: "Print this page"
105
107
  skip_link:
@@ -31,6 +31,16 @@ module GovukPublishingComponents
31
31
  "span"
32
32
  end
33
33
 
34
+ def get_heading_size(option, fallback)
35
+ govuk_class = "govuk-heading-"
36
+
37
+ if %w[xl l m s].include? option
38
+ "#{govuk_class}#{option}"
39
+ else
40
+ "#{govuk_class}#{fallback}"
41
+ end
42
+ end
43
+
34
44
  def t_locale(content, options = {})
35
45
  # Check if the content string has a translation
36
46
  content_translation_available = translation_present?(content)
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "24.8.0".freeze
2
+ VERSION = "24.9.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: 24.8.0
4
+ version: 24.9.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: 2021-03-29 00:00:00.000000000 Z
11
+ date: 2021-04-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config