govuk_publishing_components 66.9.0 → 67.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 247936d6bf21c20afd54140ea0ef39d9089613ed03634b4c374d3287856d4bf5
-  data.tar.gz: ed26a01e0a315560721e6b45807698664522e213feb11e0cd225a46f10877321
+  metadata.gz: 07f0efc1a3023358e2584fdcd3bf5dbaef619c6d4c740036ab0990018f3c957d
+  data.tar.gz: d4927e6211c1247bbf699403bbea9a6356a6cf879e2cda490d03cd74c08098f4
 SHA512:
-  metadata.gz: 864718bc9a3a883e6479687c6a46bf297f8c2c992d38320891d13f582067ec1e248c331ee1e5c792b11a397a0a833380440bf6ca3eb6c95a36138e22af2437a8
-  data.tar.gz: 03c39b7de43370b615701938ea29dd9801dc73b6d80a733892bfb9d843d8e0572d1dd914eb85053aac37adc25b6a7c3fe1205b6286fbe7368f2c548368421675
+  metadata.gz: cf09a1069080191a1962a9adaf021e95dee155be1c8548229c8ea8aa5901110fcea1e7a63120451d402ab7b1f9fc17724e522127b62fc11ba25f3c97cfa6770a
+  data.tar.gz: a4cf351f3e2ed79320e3e693846980e68d4cc19065dcc00f57db06e1b292c978e532b0ea804f4a51f9ccedcabeefa9ea4526658423f33e8aaecca69f9a0242e9

data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss

@@ -5,7 +5,6 @@
 
 .gem-c-big-number__value {
   line-height: 1;
-  font-size: 80px;
   font-size: govuk-px-to-rem(80px);
   @include govuk-font($size: false, $weight: bold);
   // Make the value an inline element, and the label a block level element to make them stack vertically but be announced as one element by JAWS and NVDA.

data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -26,23 +26,3 @@
     }
   }
 }
-
-@include govuk-media-query($media-type: print) {
-  .gem-c-breadcrumbs {
-    font-size: 12pt;
-  }
-
-  .gem-c-breadcrumbs,
-  .govuk-breadcrumbs {
-    .govuk-breadcrumbs__list-item {
-      .govuk-breadcrumbs__link:link,
-      .govuk-breadcrumbs__link:visited {
-        color: $govuk-print-text-colour;
-      }
-
-      &::before {
-        border-color: $govuk-print-text-colour;
-      }
-    }
-  }
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_details.scss

@@ -1,5 +1,46 @@
 @import "govuk/components/details/details";
 
+[dir="rtl"] .gem-c-details,
+.direction-rtl .gem-c-details,
+.gem-c-details.direction-rtl {
+  direction: rtl;
+  text-align: start;
+
+  .govuk-details__summary {
+    padding-left: 0;
+    padding-right: govuk-spacing(5);
+
+    &::before {
+      left: auto;
+      right: 0;
+      transform: rotate(180deg);
+    }
+  }
+
+  &[open] {
+    .govuk-details__summary::before {
+      transform: none;
+    }
+  }
+
+  .govuk-details__text {
+    border: 0;
+    border-right: 5px solid $govuk-border-colour;
+    padding-left: 0;
+    padding-right: govuk-spacing(4);
+  }
+
+  &.gem-c-details--small {
+    .govuk-details__summary {
+      padding-right: govuk-spacing(4);
+    }
+
+    .govuk-details__text {
+      padding-right: govuk-spacing(3);
+    }
+  }
+}
+
 .gem-c-details--black {
   .govuk-details__summary {
     color: govuk-colour("black");
@@ -34,6 +75,21 @@
   }
 }
 
+.gem-c-details--small {
+  .govuk-details__summary {
+    padding-left: govuk-spacing(4);
+  }
+
+  .govuk-details__summary-text,
+  .govuk-details__text {
+    @include govuk-font(16);
+  }
+
+  .govuk-details__text {
+    padding-left: govuk-spacing(3);
+  }
+}
+
 // fix for issue https://github.com/alphagov/govuk_publishing_components/issues/5436
 .govuk-details__summary {
   box-shadow: 0 4px transparent;

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

@@ -72,7 +72,6 @@
 
 .gem-c-image-card__context,
 .gem-c-image-card__metadata {
-  font-size: 16px;
   font-size: govuk-px-to-rem(16px);
   margin: 0 0 calc(govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey");

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

@@ -6,10 +6,8 @@ $search-icon-size: 40px;
   display: block;
   position: relative;
   z-index: 1;
-  margin-bottom: -$search-icon-size;
   margin-bottom: -(govuk-px-to-rem($search-icon-size));
   width: $search-icon-size;
-  height: $search-icon-size;
   height: govuk-px-to-rem($search-icon-size);
   background: url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;
 }

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

@@ -158,7 +158,6 @@ $search-icon-height: 20px;
 .gem-c-layout-super-navigation-header__search-item-link {
   color: govuk-colour("white");
   display: inline-block;
-  font-size: 19px;
   font-size: govuk-px-to-rem(19px);
   font-weight: bold;
   padding: govuk-spacing(4) 0;
@@ -182,7 +181,6 @@ $search-icon-height: 20px;
   &:link,
   &:visited {
     color: govuk-colour("white");
-    font-size: 16px;
     font-size: govuk-px-to-rem(16px);
     height: govuk-spacing(4);
     text-decoration: none;
@@ -238,7 +236,6 @@ $search-icon-height: 20px;
 
 // JS available - target the "Menu" toggle button
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button {
-  font-size: 16px;
   font-size: govuk-px-to-rem(16px);
   font-weight: 700;
   background: none;
@@ -519,7 +516,7 @@ $search-icon-height: 20px;
 // JS available - styles the close icon, used when the search menu is in the open state
 .gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon {
   display: none;
-  font-size: 36px;
+  font-size: govuk-px-to-rem(36px);
   font-weight: normal;
   left: 0;
   line-height: 22px;
@@ -616,7 +613,6 @@ $search-icon-height: 20px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
-  font-size: 16px;
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
@@ -634,7 +630,6 @@ $search-icon-height: 20px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
-  font-size: 16px;
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
@@ -645,7 +640,6 @@ $search-icon-height: 20px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
-  font-size: 16px;
   font-size: govuk-px-to-rem(16px);
   font-weight: normal;
   margin: govuk-spacing(1) 0 0 0;
@@ -661,7 +655,7 @@ $search-icon-height: 20px;
 }
 
 .gem-c-layout-super-navigation-header__column-header {
-  font-size: 24px;
+  font-size: govuk-px-to-rem(24px);
 }
 
 // Ensure the total space to the left of the logo for mobile screen sizes is 24px (margin is 15px)
@@ -677,7 +671,6 @@ $search-icon-height: 20px;
   // custom class to the label of the search component to turn off
   // the responsive font size
   .gem-c-layout-super-navigation-header__search-label--large-navbar {
-    font-size: 24px;
     font-size: govuk-px-to-rem(24px);
   }
 }

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

@@ -117,12 +117,9 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
   color: govuk-colour("white");
   background: none;
   cursor: pointer;
-
-  @include govuk-font($size: 36, $weight: bold, $line-height: 1.3);
-  @include govuk-media-query($until: tablet) {
-    font-size: 36px;
-    line-height: 1.3;
-  }
+  font-size: govuk-px-to-rem(36px);
+  line-height: 1.3;
+  @include govuk-font($size: false, $weight: bold);
 
   &:focus,
   &:hover {

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

@@ -39,7 +39,6 @@
     }
 
     td small {
-      font-size: 19px;
       font-size: govuk-px-to-rem(19);
     }
 

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

@@ -13,60 +13,6 @@
 
 @include organisation-brand-colour;
 
-// in the past we used the-office-of-the-leader-of-the-house-of-commons before
-// the "the" prefix was dropped, this is maintained here for backwards
-// compatibility
-.brand--the-office-of-the-leader-of-the-house-of-commons {
-  &.brand__border-color,
-  .brand__border-color {
-    border-color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons", $contrast-safe: false);
-  }
-}
-// colours for the prime ministers office are not included in the toolkit
-// so are written out here for our use
-
-.brand--prime-ministers-office-10-downing-street {
-  .brand__color {
-    color: govuk-colour("black");
-
-    &:link,
-    &:visited,
-    &:active {
-      color: govuk-colour("black");
-    }
-
-    &:hover,
-    &:focus {
-      color: $govuk-focus-text-colour;
-    }
-  }
-
-  &.brand__border-color,
-  .brand__border-color {
-    border-color: govuk-colour("black");
-  }
-}
-
-// in the toolkit, civil service has red for the text and borders
-// but the required border colour is black, ideally would fix this in
-// the toolkit but other things are using it
-
-.brand--civil-service {
-  &.brand__border-color,
-  .brand__border-color {
-    border-color: govuk-colour("black");
-  }
-}
-
-// Temp colour overrides
-
-.brand--department-for-science-innovation-and-technology {
-  &.brand__border-color,
-  .brand__border-color {
-    border-color: govuk-organisation-colour("department-for-science-innovation-technology", $contrast-safe: false);
-  }
-}
-
 .brand--government-digital-service {
   &.brand__border-color,
   .brand__border-color {

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

@@ -8,7 +8,7 @@
 
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
-  classes = %w[gem-c-breadcrumbs govuk-breadcrumbs]
+  classes = %w[gem-c-breadcrumbs govuk-breadcrumbs govuk-!-display-none-print]
   classes << "govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
   classes << "govuk-breadcrumbs--inverse" if inverse
   classes << "gem-c-breadcrumbs--border-bottom" if border == "bottom"

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

@@ -13,11 +13,9 @@
   <% if breadcrumb_selector.step_by_step %>
     <%= render "govuk_publishing_components/components/step_by_step_nav_header", breadcrumb_selector.breadcrumbs %>
   <% elsif breadcrumb_selector.breadcrumbs %>
-    <div class="govuk-!-display-none-print">
-      <%= render "govuk_publishing_components/components/breadcrumbs",
-                 breadcrumbs: breadcrumb_selector.breadcrumbs,
-                 inverse: inverse,
-                 collapse_on_mobile: collapse_on_mobile %>
-    </div>
+    <%= render "govuk_publishing_components/components/breadcrumbs",
+                breadcrumbs: breadcrumb_selector.breadcrumbs,
+                inverse: inverse,
+                collapse_on_mobile: collapse_on_mobile %>
   <% end %>
 <% end %>

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

@@ -7,6 +7,7 @@
   local_assigns[:margin_bottom] ||= 3
   theme ||= nil
   inverse ||= false
+  small ||= false
 
   unless disable_ga4
     ga4_event = {
@@ -25,6 +26,8 @@
   component_helper.add_class("gem-c-details govuk-details")
   component_helper.add_class("gem-c-details--black") if theme == "black"
   component_helper.add_class("gem-c-details--inverse") if inverse
+  component_helper.add_class("gem-c-details--small") if small
+  component_helper.add_class("direction-#{direction}") if local_assigns.include?(:direction)
   component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless disable_ga4
   component_helper.add_data_attribute({ ga4_event: ga4_event }) unless disable_ga4
   component_helper.set_open(open)

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

@@ -3,7 +3,6 @@
   description_text ||= false
   description_govspeak ||= false
   description ||= yield || false
-  aria_live ||= false
   lang = local_assigns[:lang].presence
   local_assigns[:margin_bottom] ||= 8
   local_assigns[:margin_bottom] = 8 if local_assigns[:margin_bottom] > 9
@@ -17,7 +16,6 @@
   component_helper.add_class("govuk-notification-banner gem-c-notice")
 
   component_helper.add_aria_attribute({ label: "Notice" })
-  component_helper.add_aria_attribute({ live: "polite" }) if aria_live
   component_helper.add_aria_attribute({ labelledby: banner_title_id }) if show_banner_title
 
   component_helper.set_lang(lang)

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

@@ -22,6 +22,12 @@ examples:
       title: Help with nationality
       block: |
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
+  basic_rtl:
+    data:
+      direction: rtl
+      title: Help with nationality
+      block: |
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
   with_aria_attributes:
     description: |
       Aria attributes can be applied to the summary element of the component.
@@ -82,3 +88,9 @@ examples:
       inverse: true
       block: |
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post. <a href="#" class="govuk-link">Example link</a>
+  small:
+    data:
+      small: true
+      title: Help with nationality
+      block: |
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

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

@@ -37,12 +37,6 @@ examples:
   without_title:
     data:
       description_govspeak: '<p>Scheduled to publish at 8am on 25 April 2019</p><ul><li><a href="change-date">Change date</a></li><li><a href="stop-scheduled-publishing">Stop scheduled publishing</a></li></ul>'
-  with_aria_live:
-    description: Passing the aria live flag to the notice component will read the notice out to users if the notice changes, e.g on form submission the notice may go from hidden to visible.
-    data:
-      title: 'Your settings have been saved'
-      description_govspeak: <p>This is a confirmation message to tell you your settings have been saved</p>
-      aria_live: true
   with_locale:
     description: |
       Passing a lang value allows the content of the notice to be labelled as being a different language from surrounding content.

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

@@ -99,7 +99,7 @@ examples:
       organisation:
         name: 'Office of the <br>Leader of the <br>House of Commons'
         url: '/government/organisations/the-office-of-the-leader-of-the-house-of-commons'
-        brand: 'the-office-of-the-leader-of-the-house-of-commons'
+        brand: 'office-of-the-leader-of-the-house-of-commons'
         crest: 'portcullis'
   wales_office:
     data:

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "66.9.0".freeze
+  VERSION = "67.0.0".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 66.9.0
+  version: 67.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -2159,7 +2159,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.16
+rubygems_version: 4.0.17
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications
 test_files: []