govuk_publishing_components 6.4.0 → 6.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93f509e545e321d18c1ffbc1107cdb70dd011ee1dba8c5619759a7aa472a2db7
-  data.tar.gz: ed7ef2fec6f995d6a04b599c9c813f323d1768ceff04823a3e4451d4ee764c81
+  metadata.gz: 07a0593663e9c5f0382e38e40b4cdd4e83e5c87b1010f040add2f9272763bc47
+  data.tar.gz: 81dab152fcdf00ab3f9ac78aaa97119c08eaf167c2324710043fda7e5c511524
 SHA512:
-  metadata.gz: 87d4fa9ae3d5e51598a46d656317e6c8211df10716f1d03a7916a32ee763e2c961ce54ee82e8c142db7fedb453c067a357905aa27e8daadaf804b7731cd6ae16
-  data.tar.gz: b655caa3d93a9599c20a26e3519434e02db51fc2e1110b760c2d3d770917efa0a443b7d23660c9e9b867dd4b9ac2f034b03bda3d562b6a91b77aa67ee07bfecc
+  metadata.gz: 475babd9cbe5265f77983b1ee83b56f782751ed02799c85cf9928210ed32db56e8f9244323fedb3bfc55fe1d781397c3cd11e468f6f9e7e09263edcb5597fb2c
+  data.tar.gz: 159320d6deaabaa6e72df96b941fae40ba97e5e4fa6c31336e16c0ca39ee9ddaf830e0bdf0c27365e76315050f48cb5939ed989f3240a440c7834e72c2460f42

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -1,29 +1,10 @@
-// Most of this is originally from the service manual but has changed considerably since then
-
 (function (Modules) {
   "use strict";
   window.GOVUK = window.GOVUK || {};
 
   Modules.Gemstepnav = function () {
 
-    var actions = {
-      showLinkText: "Show",
-      hideLinkText: "Hide"
-    };
-
-    var bulkActions = {
-      showAll: {
-        buttonText: "Show all",
-        eventLabel: "Show All",
-        linkText: "Show"
-      },
-      hideAll: {
-        buttonText: "Hide all",
-        eventLabel: "Hide All",
-        linkText: "Hide"
-      }
-    };
-
+    var actions = {}; // stores text for JS appended elements 'show' and 'hide' on steps, and 'show/hide all' button
     var rememberShownStep = false;
     var stepNavSize;
     var sessionStoreLink = 'govuk-step-nav-active-link';
@@ -52,6 +33,7 @@
       var uniqueId = $element.data('id') || false;
       var stepNavTracker = new StepNavTracker(totalSteps, totalLinks, uniqueId);
 
+      getTextForInsertedElements();
       addButtonstoSteps();
       addShowHideAllButton();
       addShowHideToggle();
@@ -65,6 +47,13 @@
       bindToggleShowHideAllButton(stepNavTracker);
       bindComponentLinkClicks(stepNavTracker);
 
+      function getTextForInsertedElements() {
+        actions.showText = $element.attr('data-show-text');
+        actions.hideText = $element.attr('data-hide-text');
+        actions.showAllText = $element.attr('data-show-all-text');
+        actions.hideAllText = $element.attr('data-hide-all-text');
+      }
+
       // When navigating back in browser history to the step nav, the browser will try to be "clever" and return
       // the user to their previous scroll position. However, since we collapse all but the currently-anchored
       // step, the content length changes and the user is returned to the wrong position (often the footer).
@@ -84,15 +73,15 @@
       }
 
       function addShowHideAllButton() {
-        $element.prepend('<div class="gem-c-step-nav__controls"><button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' + bulkActions.showAll.buttonText + '</button></div>');
+        $element.prepend('<div class="gem-c-step-nav__controls"><button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' + actions.showAllText + '</button></div>');
       }
 
       function addShowHideToggle() {
         $stepHeaders.each(function() {
-          var linkText = actions.showLinkText;
+          var linkText = actions.showText;
 
           if (headerIsOpen($(this))) {
-            linkText = actions.hideLinkText;
+            linkText = actions.hideText;
           }
           if (!$(this).find('.js-toggle-link').length) {
             $(this).find('.js-step-title-button').append('<span class="gem-c-step-nav__toggle-link js-toggle-link" aria-hidden="true">' + linkText + '</span>');
@@ -254,21 +243,21 @@
         $showOrHideAllButton.on('click', function () {
           var shouldshowAll;
 
-          if ($showOrHideAllButton.text() == bulkActions.showAll.buttonText) {
-            $showOrHideAllButton.text(bulkActions.hideAll.buttonText);
-            $element.find('.js-toggle-link').text(actions.hideLinkText)
+          if ($showOrHideAllButton.text() == actions.showAllText) {
+            $showOrHideAllButton.text(actions.hideAllText);
+            $element.find('.js-toggle-link').text(actions.hideText)
             shouldshowAll = true;
 
             stepNavTracker.track('pageElementInteraction', 'stepNavAllShown', {
-              label: bulkActions.showAll.eventLabel + ": " + stepNavSize
+              label: actions.showAllText + ": " + stepNavSize
             });
           } else {
-            $showOrHideAllButton.text(bulkActions.showAll.buttonText);
-            $element.find('.js-toggle-link').text(actions.showLinkText);
+            $showOrHideAllButton.text(actions.showAllText);
+            $element.find('.js-toggle-link').text(actions.showText);
             shouldshowAll = false;
 
             stepNavTracker.track('pageElementInteraction', 'stepNavAllHidden', {
-              label: bulkActions.hideAll.eventLabel + ": " + stepNavSize
+              label: actions.hideAllText + ": " + stepNavSize
             });
           }
 
@@ -285,9 +274,9 @@
         var shownSteps = $element.find('.step-is-shown').length;
         // Find out if the number of is-opens == total number of steps
         if (shownSteps === totalSteps) {
-          $showOrHideAllButton.text(bulkActions.hideAll.buttonText);
+          $showOrHideAllButton.text(actions.hideAllText);
         } else {
-          $showOrHideAllButton.text(bulkActions.showAll.buttonText);
+          $showOrHideAllButton.text(actions.showAllText);
         }
       }
 
@@ -332,7 +321,7 @@
         $stepElement.toggleClass('step-is-shown', isShown);
         $stepContent.toggleClass('js-hidden', !isShown);
         $titleLink.attr("aria-expanded", isShown);
-        $stepElement.find('.js-toggle-link').text(isShown ? actions.hideLinkText : actions.showLinkText);
+        $stepElement.find('.js-toggle-link').text(isShown ? actions.hideText : actions.showText);
 
         if (shouldUpdateHash) {
           updateHash($stepElement);

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

@@ -8,6 +8,7 @@
 @import "colours";
 
 @import "components/back-link";
+@import "components/button";
 @import "components/document-list";
 @import "components/error-summary";
 @import "components/fieldset";

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

@@ -0,0 +1,58 @@
+@import "design-patterns/buttons";
+@import "mixins/media-down";
+@import "mixins/margins";
+
+%gem-c-button,
+.gem-c-button {
+  @include button;
+
+  @media(max-width: 425px) {
+    box-sizing: border-box;
+    width: 100%;
+    text-align: center;
+  }
+
+  &:focus {
+    outline: 3px solid $focus-colour;
+  }
+}
+
+// this will be moved and extended into a model for general component spacing
+// once this has been decided upon and other work completed, see:
+// https://trello.com/c/KEkNsxG3/142-3-implement-customisable-spacing-for-components
+.gem-c-button--bottom-margin {
+  @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("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("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;
+}
+// scss-lint:enable SelectorFormat

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

@@ -1,5 +1,5 @@
 @import "helpers/variables";
-@import "helpers/clearfix";
+@import "mixins/clearfix";
 
 .gem-c-fieldset {
   margin: 0 0 $gem-spacing-scale-4;

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss

@@ -0,0 +1,20 @@
+@mixin responsive-bottom-margin {
+  margin-bottom: $gutter-half;
+
+  @include media(tablet) {
+    margin-bottom: $gutter * 1.5;
+  }
+}
+
+@mixin responsive-top-margin {
+  margin-top: $gutter-half;
+
+  @include media(tablet) {
+    margin-top: $gutter * 1.5;
+  }
+}
+
+@mixin responsive-vertical-margins {
+  @include responsive-bottom-margin;
+  @include responsive-top-margin;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss

@@ -0,0 +1,22 @@
+// Media query helpers. These make producing IE layouts
+// super easy.
+
+// These are desktop and down media queries
+
+// There is also a local version of this in Smartanswers.
+
+$is-ie: false !default;
+
+@mixin media-down($size: false, $max-width: false, $min-width: false) {
+  @if $is-ie == false {
+    @if $size == mobile {
+      @media (max-width: 640px){
+        @content;
+      }
+    } @else if $size == tablet {
+      @media (max-width: 800px){
+        @content;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+<%
+  start ||= false
+  href ||= false
+  info_text ||= false
+  rel ||= false
+  text ||= ""
+  margin_bottom ||= false
+  data_attributes ||= false
+  title ||= false
+  css_classes = %w(gem-c-button)
+  css_classes << "gem-c-button--start" if start
+  css_classes << "gem-c-button--bottom-margin" if margin_bottom
+  css_classes = css_classes.join(" ")
+  html_options = { class: css_classes }
+  html_options[:role] = "button" if href
+  html_options[:rel] = rel if rel
+  html_options[:data] = data_attributes if data_attributes
+  html_options[:title] = title if title
+%>
+<% if href %>
+  <%= link_to(text, href.try(:html_safe), html_options) %>
+<% else %>
+  <%= button_tag(text, html_options) %>
+<% end %>
+<% if info_text %>
+  <span class="gem-c-button__info-text">
+    <%= info_text.try(:html_safe) %>
+  </span>
+<% end %>

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

@@ -22,6 +22,10 @@
     class="gem-c-step-nav js-hidden <% unless small %>gem-c-step-nav--large<% end %>"
     <%= "data-remember" if remember_last_step %>
     <%= "data-id=#{tracking_id}" if tracking_id %>
+    data-show-text="<%= t("govuk_component.step_by_step_nav.show", default: "Show") %>"
+    data-hide-text="<%= t("govuk_component.step_by_step_nav.hide", default: "Hide") %>"
+    data-show-all-text="<%= t("govuk_component.step_by_step_nav.show_all", default: "Show all") %>"
+    data-hide-all-text="<%= t("govuk_component.step_by_step_nav.hide_all", default: "Hide all") %>"
   >
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>

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

@@ -0,0 +1,73 @@
+name: Button
+description: Use buttons to move though a transaction, aim to use only one button per page.
+body: |
+  Button text should be short and describe the action the button performs.
+
+  [GOV.UK Elements has more information](https://govuk-elements.herokuapp.com/buttons/) on how buttons should be used.
+
+  Note: We do not consume GOV.UK Elements directly due to the naming conventions being leaky,
+  in time this component will be a wrapper for the [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) project's button component.
+
+  This component is also [extended for use in govspeak](https://govuk-static.herokuapp.com/component-guide/govspeak/button).
+
+  These instances of buttons are added by Content Designers, ideally this duplication would not exist but we currently don't have shared markup
+  via our components within the generated [govspeak](https://github.com/alphagov/govspeak).
+  (This is a challenge to the reader)
+accessibility_criteria: |
+  The button must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - indicate when it has focus
+  - activate when focused and space is pressed
+  - activate when focused and enter is pressed
+  - have a role of button
+  - have an accessible label
+examples:
+  default:
+    data:
+      text: "Submit"
+  link_button:
+    data:
+      text: "I'm really a link sssh"
+      href: "#"
+  start_now_button:
+    data:
+      text: "Start now"
+      href: "#"
+      start: true
+      rel: "external"
+  start_now_button_with_info_text:
+    data:
+      text: "Start now"
+      href: "#"
+      start: true
+      info_text: "Sometimes you want to explain where a user is going to."
+  with_margin_bottom:
+    description: "Sometimes it's useful to break up a page, for example if a button is at the bottom of a page."
+    data:
+      text: "Submit"
+      margin_bottom: true
+  extreme_text:
+    data:
+      text: "I'm a button with lots of text to test how the component scales at extremes."
+      href: "#"
+  extreme_text_start_now_button:
+    data:
+      text: "I'm a start now button with lots of text to test how the component scales at extremes."
+      start: true
+      href: "#"
+  with_data_attributes:
+    data:
+      text: "Track this!"
+      margin_bottom: true
+      data_attributes: {
+        "module": "cross-domain-tracking",
+        "tracking-code": "GA-123ABC",
+        "tracking-name": "transactionTracker"
+      }
+  with_title_attribute:
+    data:
+      text: "Click me"
+      margin_bottom: true
+      title: "A button to click"

data/config/locales/en.yml

@@ -36,6 +36,11 @@ en:
       topics: "Explore the topic"
       topical_events: "Topical event"
       world_locations: "World locations"
+    step_by_step_nav:
+      show: "Show"
+      hide: "Hide"
+      show_all: "Show all"
+      hide_all: "Hide all"
     step_by_step_nav_related:
       part_of: "Part of"
     taxonomy_navigation:

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '6.4.0'.freeze
+  VERSION = '6.5.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 6.4.0
+  version: 6.5.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-04-06 00:00:00.000000000 Z
+date: 2018-04-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -319,6 +319,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/_all_components.scss
 - app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_button.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
@@ -334,9 +335,11 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-navigation.scss
-- app/assets/stylesheets/govuk_publishing_components/components/helpers/_clearfix.scss
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_px-to-em.scss
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss
+- app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss
+- app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss
+- app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_feedback.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav-header.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss
@@ -355,6 +358,7 @@ files:
 - app/views/govuk_publishing_components/component_guide/preview.html.erb
 - app/views/govuk_publishing_components/component_guide/show.html.erb
 - app/views/govuk_publishing_components/components/_back_link.html.erb
+- app/views/govuk_publishing_components/components/_button.html.erb
 - app/views/govuk_publishing_components/components/_contextual_breadcrumbs.html.erb
 - app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb
 - app/views/govuk_publishing_components/components/_document_list.html.erb
@@ -373,6 +377,7 @@ files:
 - app/views/govuk_publishing_components/components/_success_alert.html.erb
 - app/views/govuk_publishing_components/components/_taxonomy_navigation.html.erb
 - app/views/govuk_publishing_components/components/docs/back_link.yml
+- app/views/govuk_publishing_components/components/docs/button.yml
 - app/views/govuk_publishing_components/components/docs/contextual_breadcrumbs.yml
 - app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml
 - app/views/govuk_publishing_components/components/docs/document_list.yml