govuk_publishing_components 24.8.0 → 24.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0970bb03929bfc783d477b903ce46f8f8fa47ad800b74303f61c4f2e473a914e'
-  data.tar.gz: e1bc0b5d89be175278b988b30b85269b7128fc9fa5fbb3286b582bf66c91b7f0
+  metadata.gz: d79929a27b4001f7a46caed7050ee5c3d04eda5137c21e8a28bef4cd12b8ce54
+  data.tar.gz: 957d3905b7989a6eda0c9bb54e262b197fee924df5cd7edc56d983018f650577
 SHA512:
-  metadata.gz: 7dfb6d556b81cc890eec0fa6884a7738d2c47b0b5bba80d0f8b35788682ba8cd0c4d9528370f7175c3b2361f47592fa405ebb43e8b5fa43954fc57bc23960dcc
-  data.tar.gz: 3e58e5f9b229c8c85e734b74fd2ba98db39cd9f66ba80bab12cf8ac6acc8a482a059f200d9b721e530c190a6dff73915c9641377a77afaef5506eef8d4ca9aaf
+  metadata.gz: b3f25112299f7b0c198c884293a3932176bb299bc0d7477434f1124facb36b03fe365ecfca09a249844e5701c881e64a359e3be2fb71995daf74bfd0f56ee38c
+  data.tar.gz: cbacbec44192f78e41925a071ef9e0b854e0690b4d999d8515e7828071cd8a620044ee3182ac7eb3e50069f3e077ea4d8cd560bce8c4d89da9d0b41b7104c3b2

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -59,12 +59,10 @@
 }
 
 .gem-c-image-card__title {
-  @include govuk-font(19, $weight: bold);
   margin: 0;
 }
 
 .gem-c-image-card__title-link {
-  @extend %govuk-link;
   text-decoration: none;
 
   &:hover {
@@ -136,7 +134,6 @@
   }
 
   .gem-c-image-card__list-item-link {
-    @extend %govuk-link;
     line-height: 1.35em;
   }
 
@@ -193,7 +190,6 @@
   }
 
   .gem-c-image-card__title {
-    @include govuk-font(24, $weight: bold);
     padding-bottom: govuk-spacing(2);
   }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -1,36 +1,5 @@
-.gem-c-success-alert {
-  color: $govuk-text-colour;
-  padding: govuk-spacing(3);
-  border: $govuk-border-width-narrow solid $govuk-success-colour;
-  @include govuk-responsive-margin(8, "bottom");
-
-  @include govuk-media-query($from: tablet) {
-    padding: govuk-spacing(4);
-    border-width: $govuk-border-width;
-  }
-}
+@import "govuk/components/notification-banner/notification-banner";
 
 .gem-c-success-alert__message {
   @include govuk-font(19, $weight: bold);
-  margin: 0;
-}
-
-.gem-c-success-summary__title {
-  margin-top: 0;
-  margin-bottom: govuk-spacing(3);
-
-  @include govuk-media-query($from: tablet) {
-    margin-bottom: govuk-spacing(4);
-  }
-
-  @include govuk-font(24, $weight: bold);
-}
-
-.gem-c-success-summary__body {
-  @include govuk-font(19);
-  margin: 0;
-}
-
-.gem-c-success-alert:focus {
-  outline: $govuk-focus-width solid $govuk-focus-colour;
 }

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

@@ -6,6 +6,10 @@
   classes = "gem-c-image-card"
   classes << " gem-c-image-card--large" if card_helper.large
   classes << " gem-c-image-card--no-image" unless defined?(image_src)
+
+  font_size ||= card_helper.large ? 'm' : 's'
+  heading_class = %w[gem-c-image-card__title]
+  heading_class << shared_helper.get_heading_size(font_size, 's')
 %>
 <% if card_helper.href || card_helper.extra_links.any? %>
   <div class="<%= classes %> <%= brand_helper.brand_class %>"
@@ -14,16 +18,15 @@
     <div class="gem-c-image-card__text-wrapper">
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>
-          <%= content_tag(shared_helper.get_heading_level,
-            class: "gem-c-image-card__title") do %>
-              <% if card_helper.href %>
-                <%= link_to card_helper.heading_text, card_helper.href,
-                  class: "gem-c-image-card__title-link #{brand_helper.color_class}",
-                  data: card_helper.href_data_attributes
-                %>
-              <% else %>
-                <%= card_helper.heading_text %>
-              <% end %>
+          <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
+            <% if card_helper.href %>
+              <%= link_to card_helper.heading_text, card_helper.href,
+                class: "gem-c-image-card__title-link govuk-link #{brand_helper.color_class}",
+                data: card_helper.href_data_attributes
+              %>
+            <% else %>
+              <%= card_helper.heading_text %>
+            <% end %>
           <% end %>
         <% end %>
         <%= card_helper.context %>
@@ -34,7 +37,7 @@
           <% card_helper.extra_links.each do |link| %>
             <li class="gem-c-image-card__list-item">
               <%= link_to link[:text], link[:href],
-                class: "gem-c-image-card__list-item-link #{brand_helper.color_class}",
+                class: "gem-c-image-card__list-item-link govuk-link #{brand_helper.color_class}",
                 data: link[:data_attributes]
               %>
             </li>

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

@@ -1,10 +1,26 @@
-<% description ||= nil %>
+<%
+  description ||= nil
+  title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
+%>
 
-<%= tag.div class: "gem-c-success-alert", data: { module: "initial-focus" }, role: "alert", tabindex: "-1" do %>
-  <% if description.present? %>
-    <%= tag.h2 message, class: "gem-c-success-summary__title" %>
-    <%= tag.div description, class: "gem-c-success-summary__body" %>
-  <% else %>
-    <%= tag.p message, class: "gem-c-success-alert__message" %>
-  <% end %>
+<%= tag.div class: "gem-c-success-alert govuk-notification-banner govuk-notification-banner--success",
+  role: "alert",
+  tabindex: "-1",
+  aria: {
+    labelledby: title_id,
+  },
+  data: {
+    module: "initial-focus",
+  } do %>
+  <div class="govuk-notification-banner__header">
+    <%= tag.h2 t("govuk_component.success_alert.success", default: "Success"), class: "govuk-notification-banner__title", id: title_id %>
+  </div>
+  <div class="govuk-notification-banner__content">
+    <% if description.present? %>
+      <%= tag.h3 message, class: "govuk-notification-banner__heading" %>
+      <%= description %>
+    <% else %>
+      <%= tag.p message, class: "govuk-body gem-c-success-alert__message" %>
+    <% end %>
+  </div>
 <% end %>

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

@@ -35,6 +35,18 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: "I am not a heading"
       heading_level: 0
+  with_different_link_size:
+    description: |
+      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`.
+
+      This option is not tied to the `heading_level` option in order to give flexibility.
+    data:
+      href: "/definitely-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "I am a big link"
+      heading_level: 0
+      font_size: 'xl'
   with_more_information:
     data:
       href: "/also-not-a-page"

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

@@ -8,6 +8,8 @@ body: |
   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).
 
+  Modal components must be a direct descendant of the `<body>` element; we recommend placing it toward the end of the document for performance considerations.
+
   This component is currently experimental. If you are using it, please feed back any research findings to the Content Publisher team.
 accessibility_criteria: |
   The modal dialogue box must:
@@ -21,6 +23,7 @@ accessibility_criteria: |
   - can be operable with a keyboard (allows the ESC key to close the dialogue)
   - return focus to last focused element on close
 
+display_preview: false
 examples:
   default:
     embed: |

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

@@ -1,5 +1,7 @@
 name: Success alert
 description: Used at the top of the page, to summarise a successful user action.
+govuk_frontend_components:
+  - notification-banner
 accessibility_criteria: |
   - should be focused on page load, to ensure the message is noticed by
     assistive tech
@@ -10,9 +12,18 @@ examples:
     data:
       message: Message to alert the user to a successful action goes here
   with_message_and_description:
+    description: Descriptions can be passed as plain text but it is strongly recommended that you pass these as html, cleaned using `raw` or `sanitize`.
     data:
       message: Message to alert the user to a successful action goes here
-      description: A further description
+      description: <p class="govuk-body">A further description</p>
+  with_custom_title_id:
+    description: |
+      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.
+
+      Please ensure that this id is unique across the view you are building.
+    data:
+      message: Message to alert the user to a successful action goes here
+      title_id: my-custom-success-id
   long_example:
     data:
       message: |

data/config/locales/en.yml

@@ -100,6 +100,8 @@ en:
       hide_password: "Hide password"
       announce_show: "Your password is shown"
       announce_hide: "Your password is hidden"
+    success_alert:
+      success: "Success"
     print_link:
       text: "Print this page"
     skip_link:

data/lib/govuk_publishing_components/presenters/shared_helper.rb

@@ -31,6 +31,16 @@ module GovukPublishingComponents
         "span"
       end
 
+      def get_heading_size(option, fallback)
+        govuk_class = "govuk-heading-"
+
+        if %w[xl l m s].include? option
+          "#{govuk_class}#{option}"
+        else
+          "#{govuk_class}#{fallback}"
+        end
+      end
+
       def t_locale(content, options = {})
         # Check if the content string has a translation
         content_translation_available = translation_present?(content)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.8.0".freeze
+  VERSION = "24.9.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.8.0
+  version: 24.9.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-29 00:00:00.000000000 Z
+date: 2021-04-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config