govuk_publishing_components 24.4.1 → 24.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b37372eea898cc35257f4c1eb22682eca8b7c52c3a33ad974d68ba708d0c1bb
-  data.tar.gz: 84f9e46d8224bc5a3bc1d472c965926a4bea81ce64a7a88b01be4a56c20ae171
+  metadata.gz: d3b0fa1ddc43a2e926edce2c1f0417db5cbb0b1924caa41f91b817f3fc0d5647
+  data.tar.gz: 9e165fe5648aa0d6be420b8a00517c5295b58d5c6050b4b55646c8924272338f
 SHA512:
-  metadata.gz: 75ff1497d81807ec11c3f7fd667835204de9db7a1efec78445e82a097d71406874687d6563d91667e5362578484892db688feefcbfa94968975033022c69d82f
-  data.tar.gz: 012e764ff160ecfa9527f2a20bc37ec33a956eb1644da5f66c93eb42b706134a8ae8fe722989027545741b36f28cb59afe4339b28a94169de2331b0f05165914
+  metadata.gz: 75bb0f5311883c23c5b83cfb18cf619acc923fed727d174f4d72ea8cae9aacd99e1a701889b72779cc76d72b2596a2e0d4765fa8c11a150c01c7554f95e76719
+  data.tar.gz: 51c83f3aadc86d2ed048e34c739c4d2a976524855152890a392c1f633e8e371914bdf64525c6297c310b2855bd6062dddb80930923f994c61ca469dbbba88953

data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js

@@ -0,0 +1,108 @@
+//= require sortablejs/Sortable.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ReorderableList () { }
+
+  ReorderableList.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$upButtons = this.$module.querySelectorAll('.js-reorderable-list-up')
+    this.$downButtons = this.$module.querySelectorAll('.js-reorderable-list-down')
+
+    this.sortable = window.Sortable.create(this.$module, { // eslint-disable-line new-cap
+      chosenClass: 'gem-c-reorderable-list__item--chosen',
+      dragClass: 'gem-c-reorderable-list__item--drag',
+      onSort: function () {
+        this.updateOrderIndexes()
+        this.triggerEvent(this.$module, 'reorder-drag')
+      }.bind(this)
+    })
+
+    if (typeof window.matchMedia === 'function') {
+      this.setupResponsiveChecks()
+    } else {
+      this.sortable.option('disabled', true)
+    }
+
+    var boundOnClickUpButton = this.onClickUpButton.bind(this)
+    this.$upButtons.forEach(function (button) {
+      button.addEventListener('click', boundOnClickUpButton)
+    })
+
+    var boundOnClickDownButton = this.onClickDownButton.bind(this)
+    this.$downButtons.forEach(function (button) {
+      button.addEventListener('click', boundOnClickDownButton)
+    })
+  }
+
+  ReorderableList.prototype.setupResponsiveChecks = function () {
+    var tabletBreakpoint = '40.0625em' // ~640px
+    this.mediaQueryList = window.matchMedia('(min-width: ' + tabletBreakpoint + ')')
+    this.mediaQueryList.addListener(this.checkMode.bind(this))
+    this.checkMode()
+  }
+
+  ReorderableList.prototype.checkMode = function () {
+    this.sortable.option('disabled', !this.mediaQueryList.matches)
+  }
+
+  ReorderableList.prototype.onClickUpButton = function (e) {
+    var item = e.target.closest('.gem-c-reorderable-list__item')
+    var previousItem = item.previousElementSibling
+    if (item && previousItem) {
+      item.parentNode.insertBefore(item, previousItem)
+      this.updateOrderIndexes()
+    }
+    // if triggered by keyboard preserve focus on button
+    if (e.detail === 0) {
+      if (item !== item.parentNode.firstElementChild) {
+        e.target.focus()
+      } else {
+        e.target.nextElementSibling.focus()
+      }
+    }
+    this.triggerEvent(e.target, 'reorder-move-up')
+  }
+
+  ReorderableList.prototype.onClickDownButton = function (e) {
+    var item = e.target.closest('.gem-c-reorderable-list__item')
+    var nextItem = item.nextElementSibling
+    if (item && nextItem) {
+      item.parentNode.insertBefore(item, nextItem.nextElementSibling)
+      this.updateOrderIndexes()
+    }
+    // if triggered by keyboard preserve focus on button
+    if (e.detail === 0) {
+      if (item !== item.parentNode.lastElementChild) {
+        e.target.focus()
+      } else {
+        e.target.previousElementSibling.focus()
+      }
+    }
+    this.triggerEvent(e.target, 'reorder-move-down')
+  }
+
+  ReorderableList.prototype.updateOrderIndexes = function () {
+    var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
+    $orderInputs.forEach(function (input, index) {
+      input.setAttribute('value', index + 1)
+    })
+  }
+
+  ReorderableList.prototype.triggerEvent = function (element, eventName) {
+    var params = { bubbles: true, cancelable: true }
+    var event
+
+    if (typeof window.CustomEvent === 'function') {
+      event = new window.CustomEvent(eventName, params)
+    } else {
+      event = document.createEvent('CustomEvent')
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+    }
+
+    element.dispatchEvent(event)
+  }
+
+  Modules.ReorderableList = ReorderableList
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+
 // used by the header navigation from govuk_template
 
 (function () {
@@ -14,6 +16,8 @@
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
         var isSearchToggle = sourceClass.match('search-toggle')
+        var showText = this.getAttribute('data-show-text') || 'Show search'
+        var hideText = this.getAttribute('data-hide-text') || 'Hide search'
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
@@ -23,12 +27,12 @@
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
           if (isSearchToggle) {
-            this.innerText = 'Show search'
+            this.innerText = showText
           }
         } else {
           this.setAttribute('class', sourceClass + ' js-visible')
           if (isSearchToggle) {
-            this.innerText = 'Hide search'
+            this.innerText = hideText
           }
         }
         this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')

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

@@ -56,6 +56,7 @@
 @import "components/print-link";
 @import "components/radio";
 @import "components/related-navigation";
+@import "components/reorderable-list";
 @import "components/search";
 @import "components/select";
 @import "components/share-links";

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

@@ -1,7 +1,7 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
-@import "components/helpers/govuk-frontend-settings";
+@import "govuk_frontend_support";
 
 @import "components/print/accordion";
 @import "components/print/attachment";

data/app/assets/stylesheets/govuk_publishing_components/components/_reorderable-list.scss

@@ -0,0 +1,117 @@
+.gem-c-reorderable-list {
+  @include govuk-font(19, bold);
+
+  list-style-type: none;
+  margin-bottom: govuk-spacing(6);
+  margin-top: 0;
+  padding-left: 0;
+  position: relative;
+
+  .govuk-form-group {
+    margin-bottom: 0;
+  }
+}
+
+.gem-c-reorderable-list__item {
+  margin-bottom: govuk-spacing(3);
+  border: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(3);
+}
+
+.gem-c-reorderable-list__item--chosen {
+  background-color: govuk-colour('light-grey');
+  outline: 2px dotted $govuk-border-colour;
+}
+
+.gem-c-reorderable-list__item--drag {
+  background-color: govuk-colour('white');
+  list-style-type: none;
+
+  .gem-c-reorderable-list__actions {
+    visibility: hidden;
+  }
+}
+
+.gem-c-reorderable-list__wrapper {
+  display: block;
+
+  @include govuk-media-query($from: desktop) {
+    display: inline-flex;
+    width: 100%;
+  }
+}
+
+.gem-c-reorderable-list__content {
+  margin-bottom: govuk-spacing(2);
+  @include govuk-media-query($from: desktop) {
+    margin-bottom: 0;
+    flex: 0 1 auto;
+    min-width: 65%;
+  }
+}
+
+.gem-c-reorderable-list__title {
+  margin: 0;
+}
+
+.gem-c-reorderable-list__description {
+  @include govuk-font(16, regular);
+  margin: 0;
+}
+
+.gem-c-reorderable-list__actions {
+  display: block;
+
+  @include govuk-media-query($from: desktop) {
+    flex: 1 0 auto;
+    text-align: right;
+  }
+
+  .gem-c-button {
+    display: none;
+  }
+}
+
+.js-enabled {
+  .gem-c-reorderable-list__item {
+    @include govuk-media-query($from: desktop) {
+      cursor: move;
+    }
+  }
+
+  .gem-c-reorderable-list__actions .govuk-form-group {
+    display: none;
+  }
+
+  .gem-c-reorderable-list__actions .gem-c-button {
+    display: inline-block;
+    margin-left: govuk-spacing(3);
+    width: 80px;
+  }
+
+  .gem-c-reorderable-list__actions .gem-c-button:first-of-type {
+    margin-left: 0;
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(3);
+    }
+  }
+
+  .gem-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
+  .gem-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
+    display: none;
+
+    @include govuk-media-query($from: desktop) {
+      display: inline-block;
+      visibility: hidden;
+    }
+  }
+
+  .gem-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
+    margin-left: 0;
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(3);
+    }
+  }
+}

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

@@ -1,12 +1,12 @@
 <%
-  id ||= nil
+  aria_label ||= nil
   extra_spacing ||= nil
+  id ||= nil
+  items ||= []
   list_type ||= "unordered"
   visible_counters ||= nil
-  items ||= []
-  aria_label ||= nil
 
-  classes = %w(gem-c-list govuk-list)
+  classes = %w[gem-c-list govuk-list]
   classes << "govuk-list--bullet" if visible_counters && list_type === "unordered"
   classes << "govuk-list--number" if visible_counters && list_type === "number"
   classes << "govuk-list--spaced" if extra_spacing
@@ -20,7 +20,7 @@
 <% if items.any? %>
   <%= content_tag list_tag, class: classes, id: id, "aria-label": aria_label do %>
     <% items.each do |item| %>
-      <li><%= sanitize(item) %></li>
+      <li><%= raw(item) %></li>
     <% end %>
   <% end %>
 <% end %>

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

@@ -0,0 +1,45 @@
+<%
+  items ||= []
+  input_name ||= "ordering"
+  data_attributes ||= {}
+  data_attributes[:module] = "reorderable-list"
+%>
+
+<%= tag.ol class: "gem-c-reorderable-list", data: data_attributes do %>
+  <% items.each_with_index do |item, index| %>
+    <%= tag.li class: "gem-c-reorderable-list__item" do %>
+      <%= tag.div class: "gem-c-reorderable-list__wrapper" do %>
+        <%= tag.div class: "gem-c-reorderable-list__content" do %>
+          <%= tag.p item[:title], class: "gem-c-reorderable-list__title" %>
+          <%= tag.p(item[:description], class: "gem-c-reorderable-list__description") if item[:description].present? %>
+        <% end %>
+        <%= tag.div class: "gem-c-reorderable-list__actions" do %>
+          <% label_text = capture do %>
+            Position<span class='govuk-visually-hidden'> for <%= item[:title] %></span>
+          <% end %>
+          <%= render "govuk_publishing_components/components/input", {
+            label: { text: label_text },
+            name: "#{input_name}[#{item[:id]}]",
+            type: "number",
+            value: index + 1,
+            width: 2
+          } %>
+          <%= render "govuk_publishing_components/components/button", {
+            text: "Up",
+            type: "button",
+            aria_label: "Move \"#{item[:title]}\" up",
+            classes: "js-reorderable-list-up",
+            secondary_solid: true
+          } %>
+          <%= render "govuk_publishing_components/components/button", {
+            text: "Down",
+            type: "button",
+            aria_label: "Move \"#{item[:title]}\" down",
+            classes: "js-reorderable-list-down",
+            secondary_solid: true
+          } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -1,11 +1,19 @@
 <%
-  size ||= ""
-  no_border ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(gem-c-search)
+
+  aria_controls ||= nil
+  button_text ||= t("components.search_box.search_button")
+  id ||= "search-main-" + SecureRandom.hex(4)
+  label_text ||= t("components.search_box.label")
+  name ||= "q"
+  no_border ||= false
+  size ||= ""
+  value ||= ""
+
+  classes = %w[gem-c-search]
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
-  classes << "gem-c-search--large" if size == 'large'
+  classes << "gem-c-search--large" if size == "large"
   classes << "gem-c-search--no-border" if no_border
   if local_assigns[:on_govuk_blue].eql?(true)
     classes << "gem-c-search--on-govuk-blue"
@@ -13,25 +21,28 @@
     classes << "gem-c-search--on-white"
   end
   classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label)
-
-  value ||= ""
-  id ||= "search-main-" + SecureRandom.hex(4)
-  label_text ||= "Search on GOV.UK"
-  name ||= 'q'
-  aria_controls ||= nil
 %>
 
-<div class="<%= classes.join(' ') %>" data-module="gem-toggle-input-class-on-focus">
+<div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
   <label for="<%= id %>" class="gem-c-search__label">
     <%= label_text %>
   </label>
   <div class="gem-c-search__item-wrapper">
-    <input type="search" value="<%= value %>"
-      id="<%= id %>" name="<%= name %>" title="Search"
-      aria-controls="<%= aria_controls %>"
-      class="gem-c-search__item gem-c-search__input js-class-toggle">
+    <%= tag.input(
+      aria: {
+        controls: aria_controls,
+      },
+      class: "gem-c-search__item gem-c-search__input js-class-toggle",
+      id: id,
+      name: name,
+      title: t("components.search_box.input_title"),
+      type: "search",
+      value: value,
+    ) %>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
-      <button type="submit" class="gem-c-search__submit">Search</button>
+      <button class="gem-c-search__submit" type="submit">
+        <%= button_text %>
+      </button>
     </div>
   </div>
 </div>

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

@@ -15,32 +15,51 @@
   <%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless}", id: id do %>
     <% if title %>
       <%= content_tag(shared_helper.get_heading_level, title, class: "govuk-heading-#{heading_size} gem-c-summary-list__group-title") %>
-      <% if edit.any? || delete.any? %>
+
+      <% if edit.any? %>
+        <% edit_main_link = capture do %>
+          <% edit_section_link_text = edit[:link_text] || t("components.summary_list.edit") %>
+          <%= link_to edit.fetch(:href),
+                    class: "govuk-link",
+                    title: "#{edit_section_link_text} #{title}",
+                    data: edit.fetch(:data_attributes, {}) do %>
+            <%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if delete.any? %>
+        <% delete_main_link = capture do %>
+          <% delete_section_link_text = delete[:link_text] || t("components.summary_list.delete") %>
+          <%= link_to delete.fetch(:href),
+                    class: "govuk-link gem-link--destructive",
+                    title: "#{delete_section_link_text} #{title}",
+                    data: delete.fetch(:data_attributes, {}) do %>
+            <%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if edit_main_link && delete_main_link %>
         <%= tag.ul class: "govuk-summary-list__actions-list gem-c-summary-list__group-actions-list" do %>
           <%- if edit.any? %>
-            <% edit_section_link_text = edit[:link_text] || t("components.summary_list.edit") %>
             <%= tag.li class: "govuk-summary-list__actions-list-item" do -%>
-              <%= link_to edit.fetch(:href),
-                        class: "govuk-link",
-                        title: "#{edit_section_link_text} #{title}",
-                        data: edit.fetch(:data_attributes, {}) do %>
-                <%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
-              <% end %>
+              <%= edit_main_link %>
             <% end %>
           <% end %>
           <% if delete.any? %>
-            <% delete_section_link_text = delete[:link_text] || t("components.summary_list.delete") %>
             <%= tag.li class: "govuk-summary-list__actions-list-item" do -%>
-              <%= link_to delete.fetch(:href),
-                        class: "govuk-link gem-link--destructive",
-                        title: "#{delete_section_link_text} #{title}",
-                        data: delete.fetch(:data_attributes, {}) do %>
-                <%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
-              <% end %>
+              <%= delete_main_link %>
             <% end %>
           <% end %>
         <% end %>
+      <% else %>
+        <%= tag.div class: "govuk-summary-list__actions-list gem-c-summary-list__group-actions-list" do %>
+          <%= edit_main_link %>
+          <%= delete_main_link %>
+        <% end %>
       <% end %>
+
     <% end %>
 
     <% if items.any? %>
@@ -51,34 +70,52 @@
             <%= tag.dt item[:field], class: "govuk-summary-list__key" %>
             <%= tag.dd item[:value], class: "govuk-summary-list__value" %>
 
-            <% if item.fetch(:edit, {}).any? || item.fetch(:delete, {}).any? %>
+            <% if item.fetch(:edit, {}).any? %>
+              <% edit_link = capture do %>
+                <% edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit") %>
+                <%= link_to item[:edit].fetch(:href),
+                            class: "govuk-link",
+                            title: "#{edit_link_text} #{item[:field]}",
+                            data: item[:edit].fetch(:data_attributes, {}) do %>
+                  <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
+                <% end %>
+              <% end %>
+            <% end %>
+
+            <% if item.fetch(:delete, {}).any? %>
+              <% delete_link = capture do %>
+                <% delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete") %>
+                <%= link_to item[:delete].fetch(:href),
+                            class: "govuk-link gem-link--destructive",
+                            title: "#{delete_link_text} #{item[:field]}",
+                            data: item[:delete].fetch(:data_attributes, {}) do %>
+                  <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
+                <% end %>
+              <% end %>
+            <% end %>
+
+            <% if edit_link && delete_link %>
               <%= tag.dd class: "govuk-summary-list__actions" do %>
                 <%= tag.ul class: "govuk-summary-list__actions-list" do %>
                   <% if item.fetch(:edit, {}).any? %>
                     <%= tag.li class: "govuk-summary-list__actions-list-item" do %>
-                      <% edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit") %>
-                      <%= link_to item[:edit].fetch(:href),
-                                  class: "govuk-link",
-                                  title: "#{edit_link_text} #{item[:field]}",
-                                  data: item[:edit].fetch(:data_attributes, {}) do %>
-                        <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
-                      <% end %>
+                      <%= edit_link %>
                     <% end %>
                   <% end %>
                   <% if item.fetch(:delete, {}).any? %>
                     <%= tag.li class: "govuk-summary-list__actions-list-item" do %>
-                      <% delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete") %>
-                      <%= link_to item[:delete].fetch(:href),
-                                  class: "govuk-link gem-link--destructive",
-                                  title: "#{delete_link_text} #{item[:field]}",
-                                  data: item[:delete].fetch(:data_attributes, {}) do %>
-                        <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
-                      <% end %>
+                      <%= delete_link %>
                     <% end %>
                   <% end %>
                 <% end %>
               <% end %>
+            <% else %>
+              <%= tag.dd class: "govuk-summary-list__actions" do %>
+                <%= edit_link %>
+                <%= delete_link %>
+              <% end %>
             <% end %>
+
           <% end %>
         <% end %>
       <% end %>