govuk_publishing_components 23.3.0 → 23.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 023220040cfb5795cd3e6b148e22b442144f18028ef8e09853e764b004a5de0a
-  data.tar.gz: 5b2a54316ce8efa8ae221bf8dddf3948934a2472838f629abbda0b2d56bc7f42
+  metadata.gz: 4a97fad3ed17572d72aa4904dec96a13f48732b2c740f017dd8ac3a8c9ef9d93
+  data.tar.gz: 429048afab20b2b89b342024d4681ccccfb4c7706d1e09051cfdf6c47af1066d
 SHA512:
-  metadata.gz: 62418105d4b33b8d133b05dcbbf7f440fd0159e07144f8a9c9de272ccb2061c832b54d1233efdbecf91269aa0b98a97fa589ffba74591e86ae9892deef1cfb82
-  data.tar.gz: 21a872c9340a3f6d8d95dcfa60a4935d1d945d75f24cd5a3427649679d062948d34e8f38a60429ca14f85243bc322beff2c87756ea489b828ca60fcdf714a689
+  metadata.gz: f51d92a980b602c69168a506866f2a496c4ea85558de991083ba09a3c7c054a50486dd8169bcb74f61ffa279066bbbf0e6d2a367c6d457f1f89ede11fff78423
+  data.tar.gz: d32c3132330f198be910b85ca88fdbf96c061a5fb5e2520eedd741ff03ea1af0072823e45d654ade08a84ae8a9ac9aedfbea80bc1a41156dda99d987a6fbd638

data/app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js

@@ -2,22 +2,24 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function CopyToClipboard () { }
 
-  Modules.CopyToClipboard = function () {
-    this.start = function (element) {
-      var input = element[0].querySelector('.gem-c-input')
-      var copyButton = element[0].querySelector('.gem-c-button')
+  CopyToClipboard.prototype.start = function ($module) {
+    this.$module = $module[0]
 
-      input.addEventListener('click', function () {
-        input.select()
-      })
+    var input = this.$module.querySelector('.gem-c-input')
+    var copyButton = this.$module.querySelector('.gem-c-button')
 
-      copyButton.addEventListener('click', function (event) {
-        event.preventDefault()
-        input.select()
-        document.execCommand('copy')
-      })
-    }
+    input.addEventListener('click', function () {
+      input.select()
+    })
+
+    copyButton.addEventListener('click', function (event) {
+      event.preventDefault()
+      input.select()
+      document.execCommand('copy')
+    })
   }
+
+  Modules.CopyToClipboard = CopyToClipboard
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/components/details.js

@@ -4,47 +4,51 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
-
-  Modules.GovukDetails = function () {
-    this.start = function (element) {
-      var customTrackLabel = element[0].getAttribute('data-track-label')
-
-      // If a custom label has been provided, we can simply call the tracking module
-      if (customTrackLabel) {
-        var trackDetails = new window.GOVUK.Modules.TrackClick()
-        trackDetails.start(element)
-      } else {
-        // If no custom label is set, we use the open/close status as the label
-        var detailsComponent = element[0]
-        var detailsClick = detailsComponent.querySelector('[data-details-track-click]')
-        var that = this
-
-        if (detailsClick) {
-          detailsClick.addEventListener('click', function (event) {
-            that.trackDefault(detailsComponent)
-          })
-        }
+  function GovukDetails () { }
+
+  GovukDetails.prototype.start = function ($module) {
+    this.$module = $module[0]
+
+    var customTrackLabel = this.$module.getAttribute('data-track-label')
+
+    // If a custom label has been provided, we can simply call the tracking module
+    if (customTrackLabel) {
+      var trackDetails = new window.GOVUK.Modules.TrackClick()
+      trackDetails.start($module)
+    } else {
+      // If no custom label is set, we use the open/close status as the label
+      var detailsClick = this.$module.querySelector('[data-details-track-click]')
+
+      if (detailsClick) {
+        detailsClick.addEventListener('click', function (event) {
+          this.trackDefault(this.$module)
+        }.bind(this))
       }
     }
+  }
 
-    this.trackDefault = function (element) {
-      if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-        var componentStatus = (element.getAttribute('open') == null) ? 'open' : 'closed'
-        var trackCategory = element.getAttribute('data-track-category')
-        var trackAction = element.getAttribute('data-track-action')
-        var trackOptions = element.getAttribute('data-track-options')
+  GovukDetails.prototype.trackDefault = function (element) {
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      var componentStatus = (element.getAttribute('open') == null) ? 'open' : 'closed'
+      var trackCategory = element.getAttribute('data-track-category')
+      var trackAction = element.getAttribute('data-track-action')
+      var trackOptions = element.getAttribute('data-track-options')
 
-        if (typeof trackOptions !== 'object' || trackOptions === null) {
-          trackOptions = {}
-        }
+      if (trackOptions) {
+        trackOptions = JSON.parse(trackOptions)
+      }
+
+      if (typeof trackOptions !== 'object' || trackOptions === null) {
+        trackOptions = {}
+      }
 
-        trackOptions.label = componentStatus
+      trackOptions.label = componentStatus
 
-        if (trackAction && trackCategory) {
-          window.GOVUK.analytics.trackEvent(trackCategory, trackAction, trackOptions)
-        }
+      if (trackAction && trackCategory) {
+        window.GOVUK.analytics.trackEvent(trackCategory, trackAction, trackOptions)
       }
     }
   }
+
+  Modules.GovukDetails = GovukDetails
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/components/print-link.js

@@ -2,13 +2,14 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function PrintLink () { }
 
-  Modules.PrintLink = function () {
-    this.start = function (element) {
-      element[0].addEventListener('click', function () {
-        window.print()
-      })
-    }
+  PrintLink.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$module.addEventListener('click', function () {
+      window.print()
+    })
   }
+
+  Modules.PrintLink = PrintLink
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -49,8 +49,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     // true if it's a 'multiple' table
     // this means multiple bars per rows, but not stacked.
-    var moreThanTwoTDs = this.$table.querySelectorAll('tbody tr')[0].querySelectorAll('td').length > 2
-    this.options.multiple = !this.options.stacked && (this.$table.classList.contains('mc-multiple') || moreThanTwoTDs)
+    var moreThanTwoCells = this.$table.querySelectorAll('tbody tr')[0].querySelectorAll('th, td').length > 2
+
+    this.options.multiple = !this.options.stacked && (this.$table.classList.contains('mc-multiple') || moreThanTwoCells)
 
     // set the outdent options
     // which can be set via classes or overriden by setting the value to true
@@ -118,11 +119,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     tr.classList.add('mc-tr')
 
     var output = ''
-    var allTheTHs = this.$table.querySelectorAll('th')
+    var allTheTHsInTableHead = this.$table.querySelectorAll('thead th')
 
-    for (var i = 0; i < allTheTHs.length; i++) {
+    for (var i = 0; i < allTheTHsInTableHead.length; i++) {
       output += '<div class="mc-th">'
-      output += allTheTHs[i].innerHTML
+      output += allTheTHsInTableHead[i].innerHTML
       output += '</div>'
     }
 
@@ -143,11 +144,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       tr.classList.add('mc-tr')
 
       var cellsOutput = ''
-      var allTheTds = allTheTbodyTrs[i].querySelectorAll('td')
+      var allTheTableBodyCells = allTheTbodyTrs[i].querySelectorAll('th, td')
 
-      for (var j = 0; j < allTheTds.length; j++) {
+      for (var j = 0; j < allTheTableBodyCells.length; j++) {
         cellsOutput += '<div class="mc-td">'
-        cellsOutput += allTheTds[j].innerHTML
+        cellsOutput += allTheTableBodyCells[j].innerHTML
         cellsOutput += '</div>'
       }
       tr.innerHTML = cellsOutput
@@ -412,7 +413,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         }
       } else {
         // if it's a stacked graph
-        if (spanWidth > cellWidth && cellVal > 0) {
+        if ((spanWidth > cellWidth && cellVal > 0) || (cellVal < 1)) {
           $cell.classList.add('mc-value-overflow')
         }
       }

data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js

@@ -0,0 +1,13 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function InitialFocus () { }
+
+  InitialFocus.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$module.focus()
+  }
+
+  Modules.InitialFocus = InitialFocus
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -73,4 +73,5 @@
 @import "components/textarea";
 @import "components/title";
 @import "components/translation-nav";
+@import "components/transition-countdown";
 @import "components/warning-text";

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -1,3 +1,5 @@
+@import 'transition-countdown';
+
 .gem-c-contextual-sidebar__brexit-cta {
   border-top: 2px solid $govuk-brand-colour;
 }

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

@@ -88,6 +88,7 @@
     height: 100%;
     $ie-background: rgba(255, 255, 255, 0);
     background: $ie-background; // because internet explorer
+    -ms-high-contrast-adjust: none;
   }
 
   @include govuk-media-query($from: mobile, $until: tablet) {

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

@@ -18,49 +18,3 @@
     padding-left: govuk-spacing(6);
   }
 }
-
-.gem-c-input__wrapper {
-  display: flex;
-  display: -ms-flexbox;
-
-  .gem-c-input {
-    display: inline-block;
-    flex: 0 1 auto;
-  }
-
-  .gem-c-input:focus {
-    z-index: 1; // increase z-index on focus so it appears over the suffix
-  }
-}
-
-.gem-c-input__prefix,
-.gem-c-input__suffix {
-  @include govuk-font($size: 19);
-
-  background-color: govuk-colour("light-grey", $legacy: "grey-3");
-  border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-  box-sizing: border-box;
-  cursor: default; // emphasise non-editable status of prefixes and suffixes
-  display: inline-block;
-  flex: 0 0 auto;
-  height: 40px;
-  margin-top: 0;
-  min-width: 40px;
-  padding: govuk-spacing(1);
-  text-align: center;
-  white-space: nowrap;
-  width: auto;
-
-  @if $govuk-typography-use-rem {
-    height: govuk-px-to-rem(40px);
-    min-width: govuk-px-to-rem(40px);
-  }
-}
-
-.gem-c-input__prefix {
-  border-right: 0;
-}
-
-.gem-c-input__suffix {
-  border-left: 0;
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss

@@ -0,0 +1,125 @@
+$transition-campaign-red: #ff003b;
+$transition-campaign-dark-blue: #1e1348;
+
+.gem-c-transition-countdown {
+  @include govuk-font(19);
+  margin-bottom: govuk-spacing(6);
+}
+
+.gem-c-transition-countdown--cta {
+  background-color: govuk-colour('light-grey', $legacy: 'grey-4');
+  border-top: 4px solid $transition-campaign-red;
+  display: block;
+  padding: govuk-spacing(3);
+  text-decoration: none;
+}
+
+.gem-c-transition-countdown__title {
+  @extend %govuk-heading-m;
+  color: $transition-campaign-dark-blue;
+}
+
+.gem-c-transition-countdown__countdown {
+  margin-top: 0;
+  margin-bottom: govuk-spacing(2);
+
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(0);
+  }
+}
+
+.gem-c-transition-countdown__countdown-number {
+  @include govuk-font($size: 80, $weight: bold, $line-height: 60px);
+
+  min-width: 50px;
+  text-align: center;
+  display: inline-block;
+  background: $transition-campaign-dark-blue;
+  color: govuk-colour('white');
+  position: relative;
+  margin-bottom: govuk-spacing(2);
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(2) govuk-spacing(1);
+  }
+
+  &:after {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -1px;
+    height: 3px;
+    background: govuk-colour('white');
+    content: '';
+    width: 100%;
+    display: block;
+  }
+
+  &:first-child {
+    margin-right: 3px;
+  }
+
+  &:nth-child(2) {
+    margin-right: govuk-spacing(2);
+  }
+}
+
+.gem-c-transition-countdown__countdown-text {
+  @extend %govuk-heading-m;
+
+  display: inline-block;
+  margin-bottom: 0;
+  height: 45px;
+  vertical-align: middle;
+  color: $transition-campaign-dark-blue;
+
+  @include govuk-media-query($from: tablet) {
+    height: 80px;
+  }
+
+  &:after {
+    content: '' / '.'; // Wrap up the countdown-text element in a statement for screen readers
+  }
+}
+
+.gem-c-transition-countdown__text {
+  @extend %govuk-link;
+
+  margin-top: 0;
+  margin-bottom: 0;
+  text-decoration: underline;
+
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(2);
+  }
+}
+
+.gem-c-transition-countdown:focus {
+  .gem-c-transition-countdown__countdown-number:after {
+    background-color: $govuk-focus-colour;
+  }
+
+  .gem-c-transition-countdown__text {
+    text-decoration: none;
+  }
+}
+
+@include govuk-compatibility(govuk_template) {
+  .gem-c-transition-countdown__title {
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .gem-c-transition-countdown__countdown-number {
+    padding: govuk-spacing(1) 0 0;
+
+    @include govuk-media-query($from: tablet) {
+      padding: govuk-spacing(3) govuk-spacing(1) govuk-spacing(1);
+    }
+  }
+
+  .gem-c-transition-countdown__countdown-text {
+    @include govuk-media-query($from: tablet) {
+      height: 75px;
+    }
+  }
+}

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -22,10 +22,9 @@
           <div class="component-markdown">
             <%= raw(@component_doc.html_body) %>
           </div>
-
-          <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %></p>
         </div>
       <% end %>
+      <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %></p>
     </div>
   </div>
 

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

@@ -5,6 +5,7 @@
   hide_order_copy_link ||= false
   attributes = []
   data_attributes ||= {}
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   if attachment.content_type_name
     content = if attachment.content_type_abbr
@@ -50,11 +51,11 @@
   <% end %>
 
   <%= tag.div class: "gem-c-attachment__details" do %>
-    <%= tag.h2 class: "gem-c-attachment__title" do %>
+    <%= content_tag(shared_helper.get_heading_level, class: "gem-c-attachment__title") do %>
       <%= link_to attachment.title, attachment.url,
-            class: "govuk-link gem-c-attachment__link",
-            target: target,
-            data: data_attributes %>
+      class: "govuk-link gem-c-attachment__link",
+      target: target,
+      data: data_attributes %>
     <% end %>
 
     <% if attachment.reference.present? %>