govuk_publishing_components 9.6.0 → 9.7.0

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

@@ -1,39 +1,21 @@
 <%
   classes ||= ''
-  text_classes ||= ''
-  hint_text_classes ||= ''
   hint_text ||= ''
+  hint_text_classes ||= ''
   bold ||= false
+  css_classes = %w( gem-c-label govuk-label )
+  css_classes << "govuk-label--s" if bold
+  css_classes << classes if classes
+  hint_text_css_classes = %w( govuk-hint )
+  hint_text_css_classes << hint_text_classes if hint_text_classes
 %>
 
+<%= tag.label for: html_for, class: css_classes do %>
+  <%= text %>
+<% end %>
 
-<div
-  class="
-    gem-c-label
-    <%= "gem-c-label--bold" if bold %>
-    <%= classes if classes %>
-  "
->
-  <label
-    class="
-      gem-c-label__text
-      <%= text_classes if text_classes %>
-    "
-    <% if html_for %>
-      for="<%= html_for %>"
-    <% end %>
-  >
-    <%= text %>
-  </label>
-  <% if hint_text.present? %>
-    <span
-      class="
-        gem-c-label__hint
-        <%= hint_text_classes if hint_text_classes %>
-      "
-      id="<%= hint_id %>"
-    >
-      <%= hint_text %>
-    </span>
+<% if hint_text.present? %>
+  <%= tag.span id: hint_id, class: hint_text_css_classes do %>
+    <%= hint_text %>
   <% end %>
-</div>
+<% end %>

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

@@ -1,45 +1,61 @@
 <%
   id_prefix ||= "radio-#{SecureRandom.hex(4)}"
   items ||= []
+
+  # check if any item is set as being conditional
+  has_conditional = items.any? { |item| item["conditional"] }
 %>
-<% items.each_with_index do |item, index| %>
-  <% if item === :or %>
-    <span class="gem-c-radio__block-text">
-      <%= t('components.radio.or') %>
-    </span>
-  <% else %>
-    <%
-      item_next = items[index + 1] unless index === items.size - 1
-      label_id = item[:id] ? item[:id] : "#{id_prefix}-#{index}"
-      label_hint_id = "label-hint-#{SecureRandom.hex(4)}" if item[:hint_text].present?
-    %>
-    <div
-      class="
-        gem-c-radio
-        <%= 'gem-c-radio--margin-bottom-0' if item_next === :or && item[:hint_text].present? %>
-      "
-    >
-      <input
-        class="gem-c-radio__input"
-        id="<%= label_id %>"
-        name="<%= name %>"
-        type="radio"
-        value="<%= item[:value] %>"
-        <%= "checked" if item[:checked] %>
-        <% if label_hint_id %>
-          aria-describedby="<%= label_hint_id %>"
+<%= content_tag :div, class: "govuk-form-group" do %>
+  <%= content_tag :div, class: "govuk-radios",
+    data: {
+      module: ('radios' if has_conditional)
+    } do %>
+    <% items.each_with_index do |item, index| %>
+      <% if item === :or %>
+        <div class="govuk-radios__divider">
+          <%= t('components.radio.or') %>
+        </div>
+      <% else %>
+        <%
+          item_next = items[index + 1] unless index === items.size - 1
+          label_id = item[:id] ? item[:id] : "#{id_prefix}-#{index}"
+          label_hint_id = "label-hint-#{SecureRandom.hex(4)}" if item[:hint_text].present?
+          conditional_id = "conditional-#{SecureRandom.hex(4)}" if item[:conditional].present?
+        %>
+        <%= tag.div class: %w( gem-c-radio govuk-radios__item ) do %>
+          <%= check_box_tag name,
+            item[:value],
+            item[:checked],
+            {
+              class: "govuk-radios__input",
+              id: label_id,
+              type: "radio",
+              aria: {
+                describedby: label_hint_id
+              },
+              data: {
+                "aria-controls": conditional_id
+              }
+            }
+          %>
+          <%= render "govuk_publishing_components/components/label", {
+            hint_id: label_hint_id,
+            html_for: label_id,
+            classes: "govuk-radios__label",
+            hint_text_classes: "govuk-radios__hint",
+            hint_text: item[:hint_text],
+            text: item[:text],
+            bold: item[:bold]
+          } %>
         <% end %>
-      >
-      <%= render "govuk_publishing_components/components/label", {
-        hint_id: label_hint_id,
-        html_for: label_id,
-        classes: 'gem-c-radio__label',
-        text_classes: 'gem-c-radio__label__text',
-        hint_text_classes: 'gem-c-radio__label__hint',
-        hint_text: item[:hint_text],
-        text: item[:text],
-        bold: item[:bold]
-      } %>
-    </div>
+
+        <% if item[:conditional] %>
+        <div class="govuk-radios__conditional" id="<%= conditional_id %>">
+          <%= item[:conditional] %>
+        </div>
+        <% end %>
+
+      <% end %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -1,9 +1,9 @@
 name: Radio button
 description: A radio button is a GOV.UK element that allows users to answer a question by selecting an option. If you have a question with more than one option you should stack radio buttons.
 body: |
-  Forked from the upcoming [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), when GOV.UK Frontend release we can replace these source files.
+  You can also use 'or' as an item to break up radios.
 
-  You can also use 'or' as an item to [break up radios](https://www.gov.uk/service-manual/design/writing-for-user-interfaces#ask-questions-that-users-can-understand)
+  If JavaScript is disabled a conditionally revealed content expands fully. All of the functionality (including aria attributes) are added using JavaScript.
 accessibility_criteria: |
   Radio buttons should
 
@@ -32,6 +32,7 @@ accessibility_criteria: |
 
 accessibility_excluded_rules:
 - radiogroup # Since this is in isolation we don't want to wrap a fieldset here.
+- aria-expanded # We use aria expanded to reflect the state of a conditionally revealed radio content even if this attribute is not officially supported on this element.
 examples:
   default:
     data:
@@ -117,3 +118,14 @@ examples:
         hint_text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien justo, lobortis elementum tortor in, luctus interdum turpis. Nam sit amet nulla nec arcu condimentum dapibus quis varius metus. Suspendisse cursus tristique diam et vestibulum. Proin nec lacinia tortor. Morbi at nisi id lorem aliquam ullamcorper. Pellentesque laoreet sit amet leo sodales ultricies. Suspendisse maximus efficitur odio in tristique."
         text: "Quisque tincidunt venenatis bibendum. Morbi volutpat magna euismod ipsum consequat cursus. Etiam bibendum interdum ultricies."
         bold: true
+  conditional:
+    data:
+      name: "radio-group-conditional"
+      id_prefix: "conditional"
+      items:
+      - value: "government-gateway"
+        text: "Use Government Gateway"
+        conditional: "You’ll need to prove your identity using Government Gateway"
+      - value: "govuk-verify"
+        text: "Use GOV.UK Verify"
+        conditional: "You’ll need to prove your identity using GOV.UK Verify"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '9.6.0'.freeze
+  VERSION = '9.7.0'.freeze
 end

data/node_modules/govuk-frontend/all.js

@@ -881,177 +881,6 @@ Details.prototype.destroy = function (node) {
   node.removeEventListener('click');
 };
 
-function Checkboxes ($module) {
-  this.$module = $module;
-  this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
-}
-
-Checkboxes.prototype.init = function () {
-  var $module = this.$module;
-  var $inputs = this.$inputs;
-
-  /**
-  * Loop over all items with [data-controls]
-  * Check if they have a matching conditional reveal
-  * If they do, assign attributes.
-  **/
-  nodeListForEach($inputs, function ($input) {
-    var controls = $input.getAttribute('data-aria-controls');
-
-    // Check if input controls anything
-    // Check if content exists, before setting attributes.
-    if (!controls || !$module.querySelector('#' + controls)) {
-      return
-    }
-
-    // If we have content that is controlled, set attributes.
-    $input.setAttribute('aria-controls', controls);
-    $input.removeAttribute('data-aria-controls');
-    this.setAttributes($input);
-  }.bind(this));
-
-  // Handle events
-  $module.addEventListener('click', this.handleClick.bind(this));
-};
-
-Checkboxes.prototype.setAttributes = function ($input) {
-  var inputIsChecked = $input.checked;
-  $input.setAttribute('aria-expanded', inputIsChecked);
-
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
-  $content.setAttribute('aria-hidden', !inputIsChecked);
-};
-
-Checkboxes.prototype.handleClick = function (event) {
-  var $target = event.target;
-
-  // If a checkbox with aria-controls, handle click
-  var isCheckbox = $target.getAttribute('type') === 'checkbox';
-  var hasAriaControls = $target.getAttribute('aria-controls');
-  if (isCheckbox && hasAriaControls) {
-    this.setAttributes($target);
-  }
-};
-
-function ErrorSummary ($module) {
-  this.$module = $module;
-}
-
-ErrorSummary.prototype.init = function () {
-  var $module = this.$module;
-  if (!$module) {
-    return
-  }
-  window.addEventListener('load', function () {
-    $module.focus();
-  });
-};
-
-function Header ($module) {
-  this.$module = $module;
-}
-
-Header.prototype.init = function () {
-  // Check for module
-  var $module = this.$module;
-  if (!$module) {
-    return
-  }
-
-  // Check for button
-  var $toggleButton = $module.querySelector('.js-header-toggle');
-  if (!$toggleButton) {
-    return
-  }
-
-  // Handle $toggleButton click events
-  $toggleButton.addEventListener('click', this.handleClick.bind(this));
-};
-
-/**
-* Toggle class
-* @param {object} node element
-* @param {string} className to toggle
-*/
-Header.prototype.toggleClass = function (node, className) {
-  if (node.className.indexOf(className) > 0) {
-    node.className = node.className.replace(' ' + className, '');
-  } else {
-    node.className += ' ' + className;
-  }
-};
-
-/**
-* An event handler for click event on $toggleButton
-* @param {object} event event
-*/
-Header.prototype.handleClick = function (event) {
-  var $module = this.$module;
-  var $toggleButton = event.target || event.srcElement;
-  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'));
-
-  // If a button with aria-controls, handle click
-  if ($toggleButton && $target) {
-    this.toggleClass($target, 'govuk-header__navigation--open');
-    this.toggleClass($toggleButton, 'govuk-header__menu-button--open');
-
-    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true');
-    $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false');
-  }
-};
-
-function Radios ($module) {
-  this.$module = $module;
-  this.$inputs = $module.querySelectorAll('input[type="radio"]');
-}
-
-Radios.prototype.init = function () {
-  var $module = this.$module;
-  var $inputs = this.$inputs;
-
-  /**
-  * Loop over all items with [data-controls]
-  * Check if they have a matching conditional reveal
-  * If they do, assign attributes.
-  **/
-  nodeListForEach($inputs, function ($input) {
-    var controls = $input.getAttribute('data-aria-controls');
-
-    // Check if input controls anything
-    // Check if content exists, before setting attributes.
-    if (!controls || !$module.querySelector('#' + controls)) {
-      return
-    }
-
-    // If we have content that is controlled, set attributes.
-    $input.setAttribute('aria-controls', controls);
-    $input.removeAttribute('data-aria-controls');
-    this.setAttributes($input);
-  }.bind(this));
-
-  // Handle events
-  $module.addEventListener('click', this.handleClick.bind(this));
-};
-
-Radios.prototype.setAttributes = function ($input) {
-  var inputIsChecked = $input.checked;
-  $input.setAttribute('aria-expanded', inputIsChecked);
-
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
-  $content.setAttribute('aria-hidden', !inputIsChecked);
-};
-
-Radios.prototype.handleClick = function (event) {
-  nodeListForEach(this.$inputs, function ($input) {
-    // If a radio with aria-controls, handle click
-    var isRadio = $input.getAttribute('type') === 'radio';
-    var hasAriaControls = $input.getAttribute('aria-controls');
-    if (isRadio && hasAriaControls) {
-      this.setAttributes($input);
-    }
-  }.bind(this));
-};
-
 (function(undefined) {
 
     // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js
@@ -1407,12 +1236,183 @@ Radios.prototype.handleClick = function (event) {
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+function Checkboxes ($module) {
+  this.$module = $module;
+  this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
+}
+
+Checkboxes.prototype.init = function () {
+  var $module = this.$module;
+  var $inputs = this.$inputs;
+
+  /**
+  * Loop over all items with [data-controls]
+  * Check if they have a matching conditional reveal
+  * If they do, assign attributes.
+  **/
+  nodeListForEach($inputs, function ($input) {
+    var controls = $input.getAttribute('data-aria-controls');
+
+    // Check if input controls anything
+    // Check if content exists, before setting attributes.
+    if (!controls || !$module.querySelector('#' + controls)) {
+      return
+    }
+
+    // If we have content that is controlled, set attributes.
+    $input.setAttribute('aria-controls', controls);
+    $input.removeAttribute('data-aria-controls');
+    this.setAttributes($input);
+  }.bind(this));
+
+  // Handle events
+  $module.addEventListener('click', this.handleClick.bind(this));
+};
+
+Checkboxes.prototype.setAttributes = function ($input) {
+  var inputIsChecked = $input.checked;
+  $input.setAttribute('aria-expanded', inputIsChecked);
+
+  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
+  $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+};
+
+Checkboxes.prototype.handleClick = function (event) {
+  var $target = event.target;
+
+  // If a checkbox with aria-controls, handle click
+  var isCheckbox = $target.getAttribute('type') === 'checkbox';
+  var hasAriaControls = $target.getAttribute('aria-controls');
+  if (isCheckbox && hasAriaControls) {
+    this.setAttributes($target);
+  }
+};
+
+function ErrorSummary ($module) {
+  this.$module = $module;
+}
+
+ErrorSummary.prototype.init = function () {
+  var $module = this.$module;
+  if (!$module) {
+    return
+  }
+  window.addEventListener('load', function () {
+    $module.focus();
+  });
+};
+
+function Header ($module) {
+  this.$module = $module;
+}
+
+Header.prototype.init = function () {
+  // Check for module
+  var $module = this.$module;
+  if (!$module) {
+    return
+  }
+
+  // Check for button
+  var $toggleButton = $module.querySelector('.js-header-toggle');
+  if (!$toggleButton) {
+    return
+  }
+
+  // Handle $toggleButton click events
+  $toggleButton.addEventListener('click', this.handleClick.bind(this));
+};
+
+/**
+* Toggle class
+* @param {object} node element
+* @param {string} className to toggle
+*/
+Header.prototype.toggleClass = function (node, className) {
+  if (node.className.indexOf(className) > 0) {
+    node.className = node.className.replace(' ' + className, '');
+  } else {
+    node.className += ' ' + className;
+  }
+};
+
+/**
+* An event handler for click event on $toggleButton
+* @param {object} event event
+*/
+Header.prototype.handleClick = function (event) {
+  var $module = this.$module;
+  var $toggleButton = event.target || event.srcElement;
+  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'));
+
+  // If a button with aria-controls, handle click
+  if ($toggleButton && $target) {
+    this.toggleClass($target, 'govuk-header__navigation--open');
+    this.toggleClass($toggleButton, 'govuk-header__menu-button--open');
+
+    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true');
+    $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false');
+  }
+};
+
+function Radios ($module) {
+  this.$module = $module;
+  this.$inputs = $module.querySelectorAll('input[type="radio"]');
+}
+
+Radios.prototype.init = function () {
+  var $module = this.$module;
+  var $inputs = this.$inputs;
+
+  /**
+  * Loop over all items with [data-controls]
+  * Check if they have a matching conditional reveal
+  * If they do, assign attributes.
+  **/
+  nodeListForEach($inputs, function ($input) {
+    var controls = $input.getAttribute('data-aria-controls');
+
+    // Check if input controls anything
+    // Check if content exists, before setting attributes.
+    if (!controls || !$module.querySelector('#' + controls)) {
+      return
+    }
+
+    // If we have content that is controlled, set attributes.
+    $input.setAttribute('aria-controls', controls);
+    $input.removeAttribute('data-aria-controls');
+    this.setAttributes($input);
+  }.bind(this));
+
+  // Handle events
+  $module.addEventListener('click', this.handleClick.bind(this));
+};
+
+Radios.prototype.setAttributes = function ($input) {
+  var inputIsChecked = $input.checked;
+  $input.setAttribute('aria-expanded', inputIsChecked);
+
+  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
+  $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+};
+
+Radios.prototype.handleClick = function (event) {
+  nodeListForEach(this.$inputs, function ($input) {
+    // If a radio with aria-controls, handle click
+    var isRadio = $input.getAttribute('type') === 'radio';
+    var hasAriaControls = $input.getAttribute('aria-controls');
+    if (isRadio && hasAriaControls) {
+      this.setAttributes($input);
+    }
+  }.bind(this));
+};
+
 function Tabs ($module) {
   this.$module = $module;
   this.$tabs = $module.querySelectorAll('.govuk-tabs__tab');
 
   this.keys = { left: 37, right: 39, up: 38, down: 40 };
-  this.jsHiddenClass = 'js-hidden';
+  this.jsHiddenClass = 'govuk-tabs__panel--hidden';
 }
 
 Tabs.prototype.init = function () {