govuk_publishing_components 9.6.0 → 9.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee1bc2d4e6fb993c27eba2510c283cda497987294f93fc21f3a30e94f2deecf8
-  data.tar.gz: 9f9cc5eb7519cd81ba336464e8a9f6f3b7dc3fb0c254d5d12d59e667201ed6d8
+  metadata.gz: 2f3131ba99a3b7dd9d31bf4334388ab00549d24e094139aa9ca894fe992bdbb1
+  data.tar.gz: 9649c4163ee5badbcb2ad66fe321293c106010068bad671db17a59b625075a22
 SHA512:
-  metadata.gz: f7fd7e8f9617b31d253a820723d312b67cbd7d2c770c90f8e05c205463505e1155cf3a990c8e292e20d0fd58cdb1533506f49f31b0a50f4a0c68c51f612ba764
-  data.tar.gz: 14141157d36c0985c423074c3e2d095bb1ca6c7d0c066b45417d201cc8e61a0f6ba5853ca44d6d60e486463b8a94e3420c85b8530a709c4e9e58525abd0afe8b
+  metadata.gz: f393badabcf4a976abc0fa696026351809a10c7158b6ea5146c6c105dcf1c2cc80e2c5c66717a06cd7dc5d83b6c8514619c1413fb3bb919cf70ff068b054b240
+  data.tar.gz: 45801c06bfda33cd98104c7031a308ff9459a522a8879c4cd2486f6f85244b1953b2c03648d110e4bcdef9e57802ca1b7c2e3ce0d99c6e3040d0fe462e48c752

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

@@ -0,0 +1,32 @@
+// This component relies on JavaScript from GOV.UK Frontend
+//= require components/radios/radios.js
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.FrontendModules = window.GOVUK.FrontendModules || {};
+
+(function (global, GOVUK) {
+  'use strict'
+
+  /**
+   * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
+   *
+   * See: https://github.com/imagitama/nodelist-foreach-polyfill
+   * but the polyfill doesn't work in IE8 and needs more investigation
+   */
+  function nodeListForEach (nodes, callback) {
+    if (window.NodeList.prototype.forEach) {
+      return nodes.forEach(callback)
+    }
+    for (var i = 0; i < nodes.length; i++) {
+      callback.call(window, nodes[i], i, nodes)
+    }
+  }
+
+  GOVUK.FrontendModules.Radios = window.GOVUKFrontend
+
+  var $radios = document.querySelectorAll('[data-module="radios"]')
+
+  nodeListForEach($radios, function ($radio) {
+    new GOVUK.FrontendModules.Radios($radio).init()
+  })
+})(window, window.GOVUK)

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

@@ -6,7 +6,7 @@
 @import "grid_layout";
 @import "typography";
 @import "colours";
-
+@import "components/helpers/variables";
 @import "components/helpers/brand-colours";
 
 @import "components/back-link";

data/app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss

@@ -1,33 +1,6 @@
-@import "helpers/variables";
+// This component relies on styles from GOV.UK Frontend
 
-.gem-c-back-link {
-  position: relative;
-  display: inline-block;
-  margin-top: $gem-spacing-scale-3;
-  margin-bottom: $gem-spacing-scale-3;
-  font-size: 16px;
-  line-height: 1.25;
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-font-url-function: "font-url";
 
-  text-decoration: none;
-  border-bottom: 1px solid currentColor;
-
-  &:link,
-  &:link:focus,
-  &:visited,
-  &:active {
-    color: currentColor;
-  }
-
-  &:hover {
-    color: $link-colour;
-  }
-
-  &::before {
-    content: "";
-    display: inline-block;
-    margin-right: .3em;
-    border-top: 0.3125em solid transparent;
-    border-right: 0.375em solid currentColor;
-    border-bottom: 0.3125em solid transparent;
-  }
-}
+@import "../../../../node_modules/govuk-frontend/components/back-link/back-link";

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

@@ -1,20 +1,18 @@
-@import "design-patterns/buttons";
-@import "mixins/media-down";
-@import "mixins/margins";
+// This component relies on styles from GOV.UK Frontend
 
-%gem-c-button,
-.gem-c-button {
-  @include button;
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-image-url-function: "image-url";
+$govuk-font-url-function: "font-url";
 
-  @media(max-width: 425px) {
-    box-sizing: border-box;
-    width: 100%;
-    text-align: center;
-  }
+@import "../../../../node_modules/govuk-frontend/components/button/button";
+
+@import "mixins/margins";
 
-  &:focus {
-    outline: 3px solid $focus-colour;
-  }
+// Because govuk-frontend adds a responsive bottom margin by default for each component
+// we reset it to zero so we can set it separately using `gem-c-button--bottom-margin`
+// If we decide to use responsive margins consistently across components we can remove this
+.gem-c-button {
+  margin-bottom: 0;
 }
 
 // this will be moved and extended into a model for general component spacing
@@ -24,35 +22,8 @@
   @include responsive-bottom-margin;
 }
 
-%gem-c-button--start,
-.gem-c-button--start {
-  @include bold-24($line-height: (24 / 20));
-  display: inline-block;
-  padding: 0.6em 1.7em 0.45em 0.67em;
-
-  @include media(tablet) {
-    padding-top: 0.3em;
-    padding-bottom: 0.15em;
-  }
-
-  background-image: image-url("govuk_publishing_components/icon-pointer.png");
-  background-position: 100% 50%;
-  background-repeat: no-repeat;
-
-  @include media-down(mobile) {
-    background-position: center right -.35em;
-  }
-
-  @include device-pixel-ratio() {
-    background-image: image-url("govuk_publishing_components/icon-pointer-2x.png");
-    background-size: 30px 19px;
-  }
-}
-
-// scss-lint:disable SelectorFormat
 .gem-c-button__info-text {
   display: block;
-  margin-top: .5em;
   max-width: 14em;
+  margin-top: .5em;
 }
-// scss-lint:enable SelectorFormat

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

@@ -1,34 +1,6 @@
-// scss-lint:disable QualifyingElement
-.gem-c-input,
+// This component relies on styles from GOV.UK Frontend
 
-// Explicitly set the input type so that we have higher specificity than
-// https://github.com/alphagov/static/blob/79d29b6a4221874ead27e67d007704a6be166a57/app/assets/stylesheets/helpers/_buttons.scss#L91-L122
-// This can be removed once everything is using `core_layout`.
-input[type=text].gem-c-input {
-  @include core-19;
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-font-url-function: "font-url";
 
-  box-sizing: border-box;
-  width: 100%;
-  height: 2.10526em;
-
-  margin: 0; // Override unwanted global cascaded styles
-  margin-bottom: 20px;
-
-  padding: $gem-spacing-scale-1;
-  // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
-  // as background-color and color need to always be set together, color should not be set either
-  border: $gem-border-width-form-element solid;
-  border-radius: 0;
-
-  // Disable inner shadow and remove rounded corners
-  appearance: none;
-
-  &.gem-c-input:focus {
-    outline: $gem-focus-width solid $gem-focus-colour;
-  }
-
-  &.gem-c-input--error {
-    border: $gem-border-width-error solid $gem-error-colour;
-  }
-}
-// scss-lint:enable QualifyingElement
+@import "../../../../node_modules/govuk-frontend/components/input/input";

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

@@ -1,25 +1,6 @@
-@import "helpers/variables";
+// This component relies on styles from GOV.UK Frontend
 
-.gem-c-label {
-  display: block;
-  color: $gem-text-colour;
-  @include core-19;
-}
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-font-url-function: "font-url";
 
-.gem-c-label--bold {
-  font-weight: 700;
-}
-
-// Hint text sits inside a label, to be read by AT
-.gem-c-label__hint {
-  display: block;
-  color: $gem-secondary-text-colour;
-  font-weight: 400;
-}
-
-// TODO: Replace this with the error message component.
-.gem-c-label__error {
-  font-weight: bold;
-  color: $gem-error-colour;
-  padding-top: 4px;
-}
+@import "../../../../node_modules/govuk-frontend/components/label/label";

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

@@ -10,14 +10,6 @@
   border-bottom-color: govuk-colour("grey-1");
 }
 
-// Fix header component's reliance on markup whitespace
-// https://github.com/alphagov/govuk-frontend/pull/884/files
-//
-// Remove this fix after updating to GOV.UK Frontend 1.1.0
-.govuk-header__container {
-  @include govuk-clearfix;
-}
-
 .govuk-header__logo {
   @include mq ($from: desktop) {
     float: left;

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

@@ -1,131 +1,7 @@
-@import "helpers/variables";
-@import "helpers/px-to-em";
+// This component relies on styles from GOV.UK Frontend
 
-.gem-c-radio {
-  display: block;
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-image-url-function: "image-url";
+$govuk-font-url-function: "font-url";
 
-  position: relative;
-
-  margin-bottom: $gem-spacing-scale-2;
-  padding: 0 0 0 em(40px, 19px);
-
-  clear: left;
-
-  @include core-19;
-}
-
-.gem-c-radio:last-child,
-.gem-c-radio:last-of-type {
-  margin-bottom: 0;
-}
-
-.gem-c-radio--inline {
-  margin-right: $gem-spacing-scale-4;
-  float: left;
-  clear: none;
-}
-
-.gem-c-radio__input {
-  font-size: inherit;
-  position: absolute;
-
-  z-index: 1;
-  top: 0;
-  left: 0;
-
-  width: em(40px, 19px);
-  height: em(40px, 19px);
-
-  cursor: pointer;
-
-  // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8.
-  @if ($is-ie == false) or ($ie-version == 9) {
-    margin: 0;
-    opacity: 0;
-  }
-}
-
-.gem-c-radio__label {
-  display: block;
-  border: 2px solid transparent;
-}
-
-.gem-c-radio__label__text {
-  cursor: pointer;
-  // remove 300ms pause on mobile
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-
-  display: block;
-  padding-top: em(8px, 19px);
-  padding-bottom: em($gem-spacing-scale-1, 19px);
-}
-
-.gem-c-radio__label__text,
-.gem-c-radio__label__hint {
-  padding-left: em($gem-spacing-scale-3, 19px);
-  padding-right: em($gem-spacing-scale-3, 19px);
-}
-
-.gem-c-radio__input + .gem-c-radio__label::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: em(40px, 19px);
-  height: em(40px, 19px);
-
-  border: $gem-border-width-form-element solid;
-  border-radius: 50%;
-  background: transparent;
-}
-
-.gem-c-radio__input + .gem-c-radio__label::after {
-  content: "";
-
-  position: absolute;
-  top: em($gem-spacing-scale-2, 19px);
-  left: em($gem-spacing-scale-2, 19px);
-
-  width: 0;
-  height: 0;
-
-  border: em($gem-spacing-scale-2, 19px) solid;
-  border-radius: 50%;
-  background: currentColor;
-  opacity: 0;
-}
-
-// Focused state
-.gem-c-radio__input:focus + .gem-c-radio__label::before {
-  box-shadow: 0 0 0 4px $gem-focus-colour;
-}
-
-// Selected state
-.gem-c-radio__input:checked + .gem-c-radio__label::after {
-  opacity: 1;
-}
-
-// Disabled state
-.gem-c-radio__input:disabled,
-.gem-c-radio__input:disabled + .gem-c-radio__label__text {
-  cursor: default;
-}
-
-.gem-c-radio__input:disabled + .gem-c-radio__label {
-  opacity: .5;
-}
-
-// TODO: Can be replaced by spacing + typography helpers from GOV.UK Frontend
-.gem-c-radio--margin-bottom-0 {
-  margin-bottom: $gem-spacing-scale-0 !important;
-}
-
-// TODO: Can be replaced by spacing + typography helpers from GOV.UK Frontend
-.gem-c-radio__block-text {
-  display: block;
-  @include core-19;
-  margin-bottom: $gem-spacing-scale-3;
-}
+@import "../../../../node_modules/govuk-frontend/components/radios/radios";

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

@@ -1,11 +1,13 @@
-@import "govuk_publishing_components/components/button";
+@import "../../../../node_modules/govuk-frontend/components/button/button";
 
+// scss-lint:disable PlaceholderInExtend
 .gem-c-govspeak {
   .button {
-    @extend %gem-c-button;
+    @extend .govuk-button;
   }
 
   .button-start {
-    @extend %gem-c-button--start;
+    @extend .govuk-button--start;
   }
 }
+// scss-lint:enable PlaceholderInExtend

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

@@ -1,6 +1,7 @@
-<a
-  class="gem-c-back-link"
-  href="<%= href %>"
->
-  <%= t('components.back_link.back') %>
-</a>
+<%= link_to t('components.back_link.back'),
+  href,
+  class: %w(
+    gem-c-back-link
+    govuk-back-link
+  )
+ %>

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

@@ -7,8 +7,8 @@
   margin_bottom ||= false
   data_attributes ||= false
   title ||= false
-  css_classes = %w(gem-c-button)
-  css_classes << "gem-c-button--start" if start
+  css_classes = %w(gem-c-button govuk-button)
+  css_classes << "govuk-button--start" if start
   css_classes << "gem-c-button--bottom-margin" if margin_bottom
   css_classes = css_classes.join(" ")
   html_options = { class: css_classes }

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

@@ -1,35 +1,42 @@
 <%
   id ||= "input-#{SecureRandom.hex(4)}"
   hint_id ||= "hint-#{SecureRandom.hex(4)}"
-  value ||= false
+  value ||= nil
   error_message ||= false
   label ||= {}
   type ||= "text"
   describedby ||= false
-%>
-
-<%= render "govuk_publishing_components/components/label", {
-  text: label[:text],
-  html_for: id,
-  hint_text: error_message,
-  hint_text_classes: "gem-c-label__error",
-  hint_id: hint_id,
-  bold: error_message ? true : false,
-} %>
+  ariadescribedby ||= nil
+  css_classes = %w(gem-c-input govuk-input)
+  css_classes << "govuk-input--error" if error_message
+  hint_text_css_classes = "govuk-error-message" if error_message
 
-<input
-  class="gem-c-input <%= "gem-c-input--error" if error_message %>"
-  id="<%= id %>"
-  name="<%= name %>"
-  type="<%= type %>"
+  if error_message
+    ariadescribedby = hint_id
+  elsif describedby
+    ariadescribedby = describedby
+  end
+%>
 
-  <% if error_message %>
-    aria-describedby="<%= hint_id %>"
-  <% elsif describedby %>
-    aria-describedby="<%= describedby %>"
-  <% end %>
+<%= content_tag :div, class: "govuk-form-group" do %>
+  <%= render "govuk_publishing_components/components/label", {
+    text: label[:text],
+    html_for: id,
+    hint_text: error_message,
+    hint_text_classes: hint_text_css_classes,
+    hint_id: hint_id,
+    bold: error_message ? true : false,
+  } %>
 
-  <% if value %>
-    value="<%= value %>"
-  <% end %>
->
+  <%= text_field_tag name,
+    value,
+    {
+      class: css_classes,
+      id: id,
+      type: type,
+      aria: {
+        describedby: ariadescribedby
+      }
+    }
+  %>
+<% end %>