RubyGems - govuk_publishing_components - Versions diffs - 17.21.0 → 18.0.0 - Mend

govuk_publishing_components 17.21.0 → 18.0.0

Files changed (476) hide show

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 // Govspeak footnotes callout
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/footnotes
+// https://components.publishing.service.gov.uk/component-guide/govspeak/footnotes
 //
 // Support:
 //
@@ -11,7 +11,7 @@
 .gem-c-govspeak {
   .footnotes {
-    border-top: 1px solid govuk-colour("grey-2");
+    border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
     margin-top: govuk-spacing(6);
     padding-top: govuk-spacing(2);

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 // Govspeak fractions
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/image_fractions
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/text_fractions
+// https://components.publishing.service.gov.uk/component-guide/govspeak/image_fractions
+// https://components.publishing.service.gov.uk/component-guide/govspeak/text_fractions
 //
 // Support:
 // - alphagov/whitehall: ✔︎

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss CHANGED Viewed

@@ -1,5 +1,5 @@
-$highlight-answer-bg-color: #28a197;
-$highlight-answer-color: #ffffff;
+$highlight-answer-bg-color: govuk-colour("green");
+$highlight-answer-color: govuk-colour("white");
 .gem-c-govspeak .highlight-answer {
   background-color: $highlight-answer-bg-color;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 // Govspeak information callout
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/information_callout
+// https://components.publishing.service.gov.uk/component-guide/govspeak/information_callout
 //
 // Support:
 //
@@ -8,7 +8,7 @@
 .gem-c-govspeak {
   .info-notice {
-    border-left: 1em solid govuk-colour("grey-3");
+    border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3");
     padding: 1em 0 1em 1em;
     margin: 2em 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 // Govspeak legislative list
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/legislative_lists
+// https://components.publishing.service.gov.uk/component-guide/govspeak/legislative_lists
 // Support:
 // - alphagov/whitehall: ✔︎

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 // Govspeak media player
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/with_youtube_embed
+// https://components.publishing.service.gov.uk/component-guide/govspeak/with_youtube_embed
 //
 // Support:
 // - alphagov/whitehall: ✔︎

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 .gem-c-govspeak  .place {
   margin: 1.5em 0;
-  border-bottom: solid 1px govuk-colour("grey-2");
+  border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
   padding-bottom: 1.5em;
   .address {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 // Govspeak statistic headline
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/statistic_headlines
+// https://components.publishing.service.gov.uk/component-guide/govspeak/statistic_headlines
 //
 // Support:
 // - alphagov/whitehall: ✔︎

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 // Govspeak tables
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/tables
+// https://components.publishing.service.gov.uk/component-guide/govspeak/tables
 //
 // Support:
 // - alphagov/whitehall: ✔︎
@@ -22,7 +22,7 @@
     td {
       vertical-align: top;
       padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
-      border-bottom: solid 1px govuk-colour("grey-2");
+      border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
     }
     th {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss CHANGED Viewed

@@ -1,9 +1,9 @@
 @import "../helpers/markdown-typography";
 // Govspeak typography
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/heading_levels
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/lists
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/nested_lists
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/blockquote
+// https://components.publishing.service.gov.uk/component-guide/govspeak/heading_levels
+// https://components.publishing.service.gov.uk/component-guide/govspeak/lists
+// https://components.publishing.service.gov.uk/component-guide/govspeak/nested_lists
+// https://components.publishing.service.gov.uk/component-guide/govspeak/blockquote
 //
 // Support:
 // - alphagov/whitehall: ✔︎

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 // Govspeak warning callout
-// https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/warning_callout
+// https://components.publishing.service.gov.uk/component-guide/govspeak/warning_callout
 //
 // Support:
 //

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss CHANGED Viewed

@@ -1,5 +1,5 @@
-@import "govuk-frontend/settings/colours-organisations";
-@import "govuk-frontend/helpers/colour";
+@import "govuk/settings/colours-organisations";
+@import "govuk/helpers/colour";
 @mixin organisation-brand-colour {
   @each $organisation in map-keys($govuk-colours-organisations) {

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss CHANGED Viewed

@@ -1,6 +1,2 @@
 $govuk-image-url-function: "image-url";
 $govuk-font-url-function: "font-url";
-$govuk-compatibility-govukfrontendtoolkit: true;
-$govuk-compatibility-govuktemplate: true;
-$govuk-compatibility-govukelements: true;
-$govuk-typography-use-rem: false;

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss CHANGED Viewed

@@ -76,7 +76,10 @@
   a {
     @include govuk-link-style-default;
-    @include govuk-focusable-fill;
+    &:focus {
+      @include govuk-focused-text;
+    }
   }
   // Lists

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss CHANGED Viewed

@@ -11,7 +11,7 @@ $gem-spacing-scale-7: 50px;
 $gem-spacing-scale-8: 60px;
 $gem-text-colour: $text-colour;
-$gem-secondary-text-colour: $grey-1;
+$gem-secondary-text-colour: $govuk-secondary-text-colour;
 // Border widths
 $gem-border-width-mobile: 4px;

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss CHANGED Viewed

@@ -8,7 +8,7 @@
   .call-to-action {
     margin: govuk-spacing(3) 0;
     padding: 0 govuk-spacing(3);
-    border: 1pt solid govuk-colour("grey-2");
+    border: 1pt solid $govuk-border-colour;
   }
   .help-notice p {

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

@@ -16,20 +16,22 @@
   } %>
 </form>
-<h2 class="component-doc-h2">Components in this application</h2>
+<% unless ENV["MAIN_COMPONENT_GUIDE"] %>
+  <h2 class="component-doc-h2">Components in this application</h2>
-<ul class="component-list">
-  <% @component_docs.each do |component_doc| %>
-    <li>
-      <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-      <p>
-        <%= component_doc.description %>
-      </p>
-    </li>
-  <% end %>
-</ul>
+  <ul class="component-list">
+    <% @component_docs.each do |component_doc| %>
+      <li>
+        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
+        <p>
+          <%= component_doc.description %>
+        </p>
+      </li>
+    <% end %>
+  </ul>
-<h2 class="component-doc-h2">Components in the gem</h2>
+  <h2 class="component-doc-h2">Components in the gem</h2>
+<% end %>
 <ul class="component-list">
   <% @gem_component_docs.each do |component_doc| %>

data/app/views/govuk_publishing_components/components/_accordion.html.erb CHANGED Viewed

@@ -8,7 +8,7 @@
   accordion_classes << 'govuk-accordion--condensed' if condensed
   data_attributes ||= {}
-  data_attributes[:module] = 'accordion'
+  data_attributes[:module] = 'govuk-accordion'
 %>
 <% if items.any? %>
   <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>

data/app/views/govuk_publishing_components/components/_button.html.erb CHANGED Viewed

@@ -1,9 +1,23 @@
 <% button = GovukPublishingComponents::Presenters::ButtonHelper.new(local_assigns) %>
+<% start_icon = capture do %>
+  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
+    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
+  </svg>
+<% end %>
+<%
+  if button.start
+    button_text = button.text + start_icon
+  else
+    button_text = button.text
+  end
+%>
 <% if button.link? %>
-  <%= link_to button.text, button.href, button.html_options %>
+  <%= link_to button_text, button.href, button.html_options %>
 <% else %>
-  <%= content_tag :button, button.text, button.html_options %>
+  <%= content_tag :button, button_text, button.html_options %>
 <% end %>
 <% if button.info_text %>

data/app/views/govuk_publishing_components/components/_character_count.html.erb CHANGED Viewed

@@ -9,7 +9,7 @@
 <%= content_tag :div,
   class: "gem-c-character-count govuk-character-count",
   data: {
-    module: "character-count",
+    module: "govuk-character-count",
     maxlength: maxlength,
     maxwords: maxwords,
     threshold: threshold

data/app/views/govuk_publishing_components/components/_checkboxes.html.erb CHANGED Viewed

@@ -4,7 +4,7 @@
   id = cb_helper.id
 %>
-<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "checkboxes" } do %>
+<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "govuk-checkboxes" } do %>
   <% if cb_helper.should_have_fieldset %>
     <% if cb_helper.heading_markup %>
       <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %>

data/app/views/govuk_publishing_components/components/_contents_list.html.erb CHANGED Viewed

@@ -2,6 +2,7 @@
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new
   format_numbers ||= false
   underline_links ||= false
+  inverse ||= false
   contents ||= []
   aria_label ||= ''
   nested = !!contents.find { |c| c[:items] && c[:items].any? }
@@ -19,7 +20,10 @@
 <% if contents.any? %>
   <nav
     role="navigation"
-    class="gem-c-contents-list <%= 'gem-c-contents-list--no-underline' unless underline_links %> <%= brand_helper.brand_class %>"
+    class="gem-c-contents-list
+      <%= 'gem-c-contents-list--inverse' if inverse %>
+      <%= 'gem-c-contents-list--no-underline' unless underline_links %>
+      <%= brand_helper.brand_class %>"
     data-module="track-click"
     <% if aria_label.present? %>
       aria-label="<%= aria_label %>"

data/app/views/govuk_publishing_components/components/_details.html.erb CHANGED Viewed

@@ -1,11 +1,13 @@
 <%
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  data_attributes ||= nil
   open ||= nil
   margin_bottom ||= 3
   css_classes = %w(gem-c-details govuk-details)
   css_classes << (shared_helper.get_margin_bottom)
+  data_attributes ||= {}
+  data_attributes[:module] = 'govuk-details'
 %>
 <%= tag.details class: css_classes, data: data_attributes, open: open do %>
   <summary class="govuk-details__summary">

data/app/views/govuk_publishing_components/components/_error_summary.html.erb CHANGED Viewed

@@ -11,7 +11,7 @@
 %>
 <%= tag.div(
   class: "gem-c-error-summary govuk-error-summary",
-  data: { module: "error-summary" }.merge(data_attributes),
+  data: { module: "govuk-error-summary" }.merge(data_attributes),
   aria: { labelledby: title_id },
   role: "alert",
   tabindex: -1,

data/app/views/govuk_publishing_components/components/_layout_header.html.erb CHANGED Viewed

@@ -8,7 +8,7 @@
     width_class = "govuk-width-container"
   end
 %>
-<header class="gem-c-layout-header govuk-header gem-c-layout-header--<%= environment %>" role="banner" data-module="header">
+<header class="gem-c-layout-header govuk-header gem-c-layout-header--<%= environment %>" role="banner" data-module="govuk-header">
   <div class="govuk-header__container <%= width_class %>">
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
@@ -36,7 +36,7 @@
     </div><div class="govuk-header__content">
     <% if navigation_items.any? %>
-    <button role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+    <button role="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
     <nav>
       <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
         <% navigation_items.each_with_index do |item, index| %>

data/app/views/govuk_publishing_components/components/_radio.html.erb CHANGED Viewed

@@ -62,7 +62,7 @@
     <%= content_tag :div, class: radio_classes,
       data: {
-        module: ('radios' if has_conditional)
+        module: ('govuk-radios' if has_conditional)
       } do %>
       <% items.each_with_index do |item, index| %>
         <% if item === :or %>

data/app/views/govuk_publishing_components/components/_subscription-links.html.erb CHANGED Viewed

@@ -16,8 +16,8 @@
   hide_heading ||= false
-  email_signup_link_text_locale = local_assigns[:email_signup_link_text_locale]
-  feed_link_text_locale = local_assigns[:feed_link_text_locale]
+  email_signup_link_text_locale = local_assigns[:email_signup_link_text_locale].presence
+  feed_link_text_locale = local_assigns[:feed_link_text_locale].presence
 %>
 <% if sl_helper.component_data_is_valid? %>
   <%= tag.section class: css_classes, data: data do %>

data/app/views/govuk_publishing_components/components/_tabs.html.erb CHANGED Viewed

@@ -6,7 +6,7 @@
   panel_css_classes = panel_css_classes.join(" ")
 %>
 <% if tabs.count > 1 %>
-  <div class="govuk-tabs gem-c-tabs" data-module="tabs">
+  <div class="govuk-tabs gem-c-tabs" data-module="govuk-tabs">
     <h2 class="govuk-tabs__title">
       Contents
     </h2>

data/app/views/govuk_publishing_components/components/_textarea.html.erb CHANGED Viewed

@@ -20,7 +20,7 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   css_classes = %w(govuk-textarea)
-  css_classes << "js-character-count" if character_count
+  css_classes << "govuk-js-character-count" if character_count
   css_classes << "govuk-textarea--error" if has_error
   form_group_css_classes = %w(gem-c-textarea govuk-form-group)
   form_group_css_classes << "govuk-form-group--error" if has_error

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

@@ -17,7 +17,7 @@
 <%= content_tag(:div, class: classes) do %>
   <% if context %>
     <p class="gem-c-title__context">
-      <%= context_href ? link_to(context_text, context_href, class: 'gem-c-title__context-link', data: context_data) : context_text %>
+      <%= context_href ? link_to(context_text, context_href, class: 'gem-c-title__context-link govuk-link', data: context_data) : context_text %>
     </p>
   <% end %>
   <h1 class="gem-c-title__text <% if average_title_length %>gem-c-title__text--<%= average_title_length %><% end %>">

data/app/views/govuk_publishing_components/components/docs/button.yml CHANGED Viewed

@@ -3,7 +3,7 @@ description: Use buttons to move though a transaction, aim to use only one butto
 body: |
   Button text should be short and describe the action the button performs.
-  This component is also [extended for use in govspeak](https://govuk-publishing-components.herokuapp.com/component-guide/govspeak/button).
+  This component is also [extended for use in govspeak](https://components.publishing.service.gov.uk/component-guide/govspeak/button).
   These instances of buttons are added by Content Designers, ideally this duplication would not exist but we currently don't have shared markup
   via our components within the generated [govspeak](https://github.com/alphagov/govspeak).

data/app/views/govuk_publishing_components/components/docs/contents_list.yml CHANGED Viewed

@@ -215,4 +215,16 @@ examples:
             text: Guidance and regulation
           - href: "#third-thing"
             text: Consultations
+  inverse:
+    description: Displays with no background colour, no box shadow and white text, for use on (for example) the [inverse header](/component-guide/inverse_header)
+    data:
+      inverse: true
+      contents:
+        - href: "#item-1"
+          text: "Item 1"
+        - href: "#item-2"
+          text: "Item 2"
+    context:
+      dark_background: true

data/app/views/govuk_publishing_components/components/docs/contextual_breadcrumbs.yml CHANGED Viewed

@@ -16,7 +16,7 @@ body: |
   [header]: /component-guide/step_by_step_nav_header
   [footer]: /component-guide/contextual_footer
   [sidebar]: /component-guide/contextual_sidebar
-  [breadcrumbs]: https://govuk-publishing-components.herokuapp.com/component-guide/breadcrumbs
+  [breadcrumbs]: https://components.publishing.service.gov.uk/component-guide/breadcrumbs
 accessibility_criteria: |
   Components called by this component must be accessible
 examples:

data/app/views/govuk_publishing_components/components/docs/fieldset.yml CHANGED Viewed

@@ -18,7 +18,7 @@ examples:
         <input type="radio" id="default-no" name="default"t>
         <label for="default-no">No</label>
   with_html_legend:
-    description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://govuk-publishing-components.herokuapp.com/component-guide/title)'
+    description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://components.publishing.service.gov.uk/component-guide/title)'
     data:
       legend_text: |
         <!-- Use the title component, this is hardcoded only for this example -->

data/app/views/govuk_publishing_components/components/docs/label.yml CHANGED Viewed

@@ -35,7 +35,10 @@ examples:
       hint_id: "should-match-aria-describedby-input-bold"
       hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
   inside_a_radio_component:
-    description: Then the label is used inside the [radio component](/component-guide/radio) additional classes are required on the radio, which are added by this option. This is already handled by the radio component and is a specific use case, but is worth documenting.
+    description: |
+      When the label is used inside the [radio component](/component-guide/radio) additional classes are required on the radio, which are added by this option. This is already handled by the radio component and is a specific use case, but is worth documenting.
+      Note that this example will not render correctly - do not be alarmed. It only works properly when inside the radio component.
     data:
       text: "National Insurance number"
       html_for: "id-that-matches-input"