RubyGems - govuk_publishing_components - Versions diffs - 68.3.0 → 69.0.1 - Mend

govuk_publishing_components 68.3.0 → 69.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (330) hide show

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

@@ -8,7 +8,7 @@
   gap: govuk-spacing(2);
   justify-content: space-between;
   align-items: stretch;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-media-query($until: tablet) {
     gap: govuk-spacing(3);

data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/input/input";
+@import "govuk/components/input";
 $search-icon-size: 40px;

data/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/inset-text/inset-text";
+@import "govuk/components/inset-text";
 @include govuk-media-query($media-type: print) {
   .gem-c-inset-text {

data/app/assets/stylesheets/govuk_publishing_components/components/_intervention.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 .gem-c-intervention {
   background-color: govuk-colour("black", $variant: "tint-95");
   border-left: 10px solid govuk-functional-colour(success);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-responsive-padding(3);
   @include govuk-responsive-margin(6, "bottom");

data/app/assets/stylesheets/govuk_publishing_components/components/_label.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import "govuk/components/label~~/label~~";
1	+ @import "govuk/components/label";

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/footer/footer";
+@import "govuk/components/footer";
 .govuk-footer__list-item {
   display: inline-block;

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/header/header";
+@import "govuk/components/header";
 .gem-c-layout-header.gem-c-layout-header--no-bottom-border,
 .gem-c-layout-header.gem-c-layout-header--no-bottom-border .govuk-header__container {

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/header/header";
+@import "govuk/components/header";
 $chevron-breakpoint: 360px;
 $chevron-indent-spacing: 7px;
@@ -26,13 +26,13 @@ $search-icon-height: 20px;
     border-bottom-color: $colour;
     border-right-color: $colour;
   } @else {
-    @include prefixed-transform($rotate: 45deg, $translateY: -35%);
     border-bottom: 2px solid $colour;
     border-right: 2px solid $colour;
     content: "";
     display: inline-block;
     height: 8px;
     margin: 0 10px 0 2px;
+    transform: translateY(-35%) rotate(45deg) scale(1);
     vertical-align: middle;
     width: 8px;
   }
@@ -373,7 +373,7 @@ $search-icon-height: 20px;
       &::before {
         @include chevron(govuk-colour("black"), true);
-        @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+        transform: translateY(1px) rotate(225deg) scale(1);
       }
     }
   }
@@ -392,7 +392,7 @@ $search-icon-height: 20px;
       @include govuk-media-query($from: $chevron-breakpoint) {
         &::before {
           @include chevron(govuk-functional-colour(link), true);
-          @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+          transform: translateY(1px) rotate(225deg) scale(1);
         }
       }
     }
@@ -609,7 +609,10 @@ $search-icon-height: 20px;
   }
   @include govuk-media-query($from: "desktop") {
-    @include columns($items: 16, $columns: 2, $selector: "li", $flow: column);
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(8, auto);
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_lead-paragraph.scss CHANGED Viewed

@@ -2,7 +2,7 @@
   margin-top: 0;
   // Ensure the text has a line-length of around 60 characters
   max-width: 30em;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include responsive-bottom-margin;
   @include govuk-font(24);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 .gem-c-metadata {
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font(16);
   @include responsive-bottom-margin;
@@ -91,7 +91,7 @@
 }
 .gem-c-metadata--border-top {
-  padding-top: govuk-spacing(2);
+  padding-top: govuk-spacing(3);
   border-top: 1px solid $govuk-border-colour;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss CHANGED Viewed

@@ -36,7 +36,7 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
   }
   @include govuk-font($size: 19);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-media-query($from: tablet) {
     position: relative;
     top: inherit;

data/app/assets/stylesheets/govuk_publishing_components/components/_notice.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/notification-banner/notification-banner";
+@import "govuk/components/notification-banner";
 .gem-c-notice {
   .gem-c-govspeak {

data/app/assets/stylesheets/govuk_publishing_components/components/_pagination.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/pagination/pagination";
+@import "govuk/components/pagination";
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {

data/app/assets/stylesheets/govuk_publishing_components/components/_panel.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/panel/panel";
+@import "govuk/components/panel";
 .gem-c-panel__prepend {
   margin-bottom: govuk-spacing(3);

data/app/assets/stylesheets/govuk_publishing_components/components/_password-input.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import "govuk/components/password-input~~/password-input~~";
1	+ @import "govuk/components/password-input";

data/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/phase-banner/phase-banner";
+@import "govuk/components/phase-banner";
 .gem-c-phase-banner--inverse {
   .govuk-phase-banner__content__tag {

data/app/assets/stylesheets/govuk_publishing_components/components/_radio.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/radios/radios";
+@import "govuk/components/radios";
 .gem-c-radio__heading-text {
   margin: 0 0 govuk-spacing(4);

data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 .gem-c-related-navigation {
   border-top: 2px solid govuk-colour("blue");
   margin-bottom: govuk-spacing(9);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 }
 .gem-c-related-navigation__main-heading {

data/app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss CHANGED Viewed

@@ -14,7 +14,7 @@ $choices-border-radius-item: 0 !default;
 $choices-z-index: 2 !default;
 $choices-button-dimension: 12px !default;
-@import "govuk/components/label/label";
+@import "govuk/components/label";
 @import "choices.js/src/styles/choices";
 .gem-c-select-with-search {

data/app/assets/stylesheets/govuk_publishing_components/components/_select.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/select/select";
+@import "govuk/components/select";
 // Increase height of selects that have a `multiple`
 // attribute otherwise they are too small to be useful.

data/app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/service-navigation/service-navigation";
+@import "govuk/components/service-navigation";
 .gem-c-service-navigation--full-width {
   padding-left: govuk-spacing(3);

data/app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss CHANGED Viewed

	@@ -1 +1 @@
1	- @import "govuk/components/skip-link~~/skip-link~~";
1	+ @import "govuk/components/skip-link";

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss CHANGED Viewed

@@ -5,7 +5,7 @@
   border-bottom: solid 1px govuk-colour("blue");
   margin-top: govuk-spacing(3);
   @include govuk-font(24, $weight: bold);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-media-query($from: tablet) {
     padding: govuk-spacing(5);

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 .gem-c-step-nav-related {
   border-top: 2px solid govuk-colour("blue");
   margin-bottom: govuk-spacing(6);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 }
 .gem-c-step-nav-related__heading {

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss CHANGED Viewed

@@ -395,7 +395,7 @@ $top-border: solid 1px govuk-functional-colour("border");
 .gem-c-step-nav__title {
   margin: 0;
   @include step-nav-font(19, $weight: bold, $line-height: 1.4);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
@@ -417,7 +417,7 @@ $top-border: solid 1px govuk-functional-colour("border");
 .gem-c-step-nav__panel {
   padding-bottom: govuk-spacing(5);
   @include step-nav-font(16);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   .gem-c-step-nav--large & {
     @include step-nav-font(16, $tablet-size: 19);

data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 .gem-c-subscription-links {
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font(19, $weight: bold);
 }

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

@@ -1,4 +1,4 @@
-@import "govuk/components/notification-banner/notification-banner";
+@import "govuk/components/notification-banner";
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {

data/app/assets/stylesheets/govuk_publishing_components/components/_summary-card.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/summary-list/summary-list";
+@import "govuk/components/summary-list";
 .gem-c-summary-card {
   .govuk-summary-list__key {

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

@@ -1,4 +1,4 @@
-@import "govuk/components/summary-list/summary-list";
+@import "govuk/components/summary-list";
 .gem-c-summary-list {
   margin-bottom: govuk-spacing(6);

data/app/assets/stylesheets/govuk_publishing_components/components/_table.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/table/table";
+@import "govuk/components/table";
 $table-border-width: 1px;
 $table-border-colour: govuk-functional-colour("border");

data/app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/tabs/tabs";
+@import "govuk/components/tabs";
 .govuk-frontend-supported {
   .gem-c-tabs__panel--no-border {

data/app/assets/stylesheets/govuk_publishing_components/components/_tag.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/tag/tag";
+@import "govuk/components/tag";
 .gem-c-tag {
   max-width: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import "govuk/components/textarea/textarea";
+@import "govuk/components/textarea";
 .gem-c-textarea {
   .govuk-textarea {

data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 .gem-c-translation-nav {
   margin-bottom: govuk-spacing(6);
   border-bottom: 1px solid govuk-functional-colour(border);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font(16);
 }

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

@@ -1,4 +1,4 @@
-@import "govuk/components/warning-text/warning-text";
+@import "govuk/components/warning-text";
 .gem-c-warning-text .govuk-warning-text__text {
   margin: 0;

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

@@ -1,4 +1,4 @@
-@import "govuk/components/button/button";
+@import "govuk/components/button";
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {

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

@@ -21,27 +21,26 @@
   $base-unit: 16px; // For font sizes and related spacing
   $compact-font-size: 12px; // For the 'compact' bar style
   $bar-padding: 8px; // The padding between the bar values and the edge of the bar
-  $bar-spacing: 5px; // The spacing around the bars
+  $bar-spacing: 10px; // The spacing around the bars
   $stack-spacing: 1px; // For stacked bars, the spacing between each stack in a bar
   $caption-side: top; // Caption alignment. Top or bottom.
-  $key-width: 160px; // Only used by IE. Other browsers get smallest width that fits content
   // The following accessible colour palette has been developed to meet the colour contrast requirements for adjacent colours (as set out in WCAG 2.1)
   // For charts, the palette should be used instead of the GOV.UK colour palette - https://design-system.service.gov.uk/styles/colour/
   // https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5
-  $gss-colour-dark-blue: #12436d;
-  $gss-colour-turquoise: #1bbbaf;
-  $gss-colour-dark-pink: #801650;
-  $gss-colour-orange: #f46a25;
-  $gss-colour-dark-grey: #3d3d3d;
-  $gss-colour-plum: #a285d1;
+  $chart-blue-shade-50: govuk-colour("blue", $variant: "shade-50");
+  $chart-teal-tint-25: govuk-colour("teal", $variant: "tint-25");
+  $chart-magenta-shade-25: govuk-colour("magenta", $variant: "shade-25");
+  $chart-primary-orange: govuk-colour("orange");
+  $chart-green-shade-50: govuk-colour("green", $variant: "shade-50");
+  $chart-accent-purple: #ba4aff; // There is currently no equivalent colour in the GOV.UK palette, but this can be updated in future if one is added.
   // CHART COLOUR SCHEME
   $chart-border: govuk-colour("white"); // Chart border colour
   $key-border: govuk-colour("white"); // Key border colour
-  $bar-colours: $gss-colour-dark-blue, $gss-colour-turquoise, $gss-colour-dark-pink, $gss-colour-orange, $gss-colour-dark-grey, $gss-colour-plum;
+  $bar-colours: $chart-blue-shade-50, $chart-teal-tint-25, $chart-magenta-shade-25, $chart-primary-orange, $chart-green-shade-50, $chart-accent-purple;
   $bar-text-colours: govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black");
   $bar-cell-colour: govuk-colour("black");
   $bar-outdented-colour: govuk-colour("black");
@@ -53,7 +52,6 @@
     width: 100%;
     border-spacing: 0 $bar-spacing;
     border: 1px solid $chart-border;
-    padding: $base-unit 0;
     position: relative;
     margin-bottom: $base-unit;
@@ -148,6 +146,7 @@
           margin-bottom: 1px;
           color: govuk-colour("white");
           text-indent: $bar-padding;
+          font-weight: $govuk-font-weight-bold;
         }
         // Bar colours
@@ -156,6 +155,18 @@
             background-color: list.nth($bar-colours, $i + 1);
             color: list.nth($bar-text-colours, $i + 1);
           }
+          .mc-bar-#{$i + 1}.mc-no-data {
+              color: govuk-colour("black");
+              border-width: 2px;
+              border-style: solid;
+              border-color: list.nth($bar-colours, $i + 1);
+          }
+        }
+        .mc-no-data span {
+          display: inline-block;
+          min-width: 75px;
         }
         // Negative bars
@@ -175,6 +186,7 @@
           text-align: $label-align;
           display: table-cell;
           vertical-align: middle;
+          font-weight: $govuk-font-weight-bold;
         }
       }
     }

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

@@ -6,7 +6,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
-@import "govuk/components/warning-text/warning-text";
+@import "govuk/components/warning-text";
 // stylelint-disable max-nesting-depth
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.

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

@@ -1,5 +1,5 @@
 @mixin markdown-typography {
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font($size: 16);
   ol,

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_index.scss CHANGED Viewed

@@ -1,4 +1,3 @@
-@import "grid-helper";
 @import "high-contrast-outline";
 @import "margins";
 @import "prefixed-transform";

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

@@ -8,30 +8,34 @@
   ]
   autocomplete_date_of_birth ||= nil
   legend_text ||= nil
+  legend_heading_level ||= nil
+  legend_size ||= nil
   hint ||= nil
   error_message ||= nil
   error_items ||= []
-  describedby ||= nil
-  has_error ||= error_message || error_items.any?
+  error_id ||= nil
+  has_error ||= error_message || error_items.any? || error_id
   css_classes = %w(gem-c-date-input govuk-date-input)
   form_group_css_classes = %w(govuk-form-group)
   form_group_css_classes << "govuk-form-group--error" if has_error
   hint_id = "hint-#{SecureRandom.hex(4)}"
-  error_id = "error-#{SecureRandom.hex(4)}"
+  error_id = error_id || "error-#{SecureRandom.hex(4)}"
-  aria_described_by ||= nil
-  if hint || has_error || describedby
+  aria_described_by = nil
+  if hint || has_error
     aria_described_by = []
-    aria_described_by << hint_id if hint
+    aria_described_by << hint_id if hint && !has_error
     aria_described_by << error_id if has_error
-    aria_described_by << describedby if describedby
     aria_described_by = aria_described_by.join(" ")
   end
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class(form_group_css_classes.join(" "))
 %>
-<%= content_tag :div, class: form_group_css_classes do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <% fieldset_content = capture do %>
     <% if hint %>
       <%= render "govuk_publishing_components/components/hint", {
@@ -41,7 +45,7 @@
       } %>
     <% end %>
-    <% if has_error %>
+    <% if error_message || error_items.any? %>
       <%= render "govuk_publishing_components/components/error_message", {
         id:  error_id,
         text: error_message,
@@ -62,6 +66,7 @@
             value: item[:value],
             width: item[:width],
             id: item[:id],
+            describedby: aria_described_by,
             type: "number",
             data: item[:data],
             autocomplete: autocomplete_date_of_birth ? "bday-#{item[:name]}" : nil,
@@ -73,8 +78,9 @@
   <% if legend_text %>
     <%= render "govuk_publishing_components/components/fieldset", {
-      describedby: aria_described_by,
       legend_text: legend_text,
+      heading_level: legend_heading_level,
+      heading_size: legend_size,
       text: fieldset_content,
       role: "group",
     } %>