govuk_publishing_components 21.2.0 → 21.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 622487f061b5e3ce6b708c87a4ff7ef21044fcce36df2b7fd195a093dcd94dc0
-  data.tar.gz: '0164998fd0707382bab460b9dd702e985d7ebc50d76270870f6f2fa5174fe2be'
+  metadata.gz: fbcad820792648c45683e5b4226a47f17353ec7c8018089dd375e239db1ee43e
+  data.tar.gz: 30e3861a060a0c9c476a3f0d0ee2628753e7fcd7972ce638f2ea7ec5ea33a5de
 SHA512:
-  metadata.gz: 2f63af3bdcc9fadf1653a7070627ac89e914f9ff32828cb60eb1ea17ba3cac7e6941e5a46075b95275d707a33dcde372a8225648a0aa0eb0bd340a3309164755
-  data.tar.gz: 51463c1b48991a4b5db28a663e2bb271d0baa6b5cf88457b073d463612129cca5bc86d6ee44ae4cd40787510cb6b91b8d83b62079fb9fed59e579e132c5e6ae9
+  metadata.gz: 2a77463ccd09451691c92bcf2a10fac990b9ce93d37320a1a9b300626b9902d6c054ac8afd26aae9b330f37460f0113e9e1f8a75297fb7f4a89438a4a64a0b5f
+  data.tar.gz: 8dccc6978ed550e5ee4718ab0e3bdd08752b1738dc1cefa3b914eff872ae6ce541e965b1548315ac7a102be4fb9251bf08dbb0bf2ae90b426980dfd9d05ecb85

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

@@ -3,13 +3,33 @@
   describedby ||= nil
   role ||= nil
   heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  error_message ||= nil
+  error_id ||= nil
+
+  if error_message
+    error_id = "error-#{SecureRandom.hex(4)}" unless error_id
+    describedby = error_id
+  end
+
+  css_classes = %w(gem-c-fieldset govuk-form-group)
+  css_classes << "govuk-form-group--error" if error_message
+
+  fieldset_classes = %w(govuk-fieldset)
 
   legend_classes = %w(govuk-fieldset__legend)
   legend_classes << "govuk-fieldset__legend--#{heading_size}" if heading_size
 %>
-<%= tag.fieldset class: "gem-c-fieldset govuk-fieldset", aria: { describedby: describedby }, role: role do %>
-  <%= tag.legend class: legend_classes do %>
-    <%= legend_text %>
+<%= tag.div class: css_classes do %>
+  <%= tag.fieldset class: fieldset_classes, aria: { describedby: describedby }, role: role do %>
+    <%= tag.legend class: legend_classes do %>
+      <%= legend_text %>
+    <% end %>
+    <% if error_message %>
+      <%= render "govuk_publishing_components/components/error_message", {
+        text: error_message,
+        id: error_id
+      } %>
+    <% end %>
+    <%= text %>
   <% end %>
-  <%= text %>
 <% end %>

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

@@ -21,6 +21,7 @@
   hint_id = "hint-#{SecureRandom.hex(4)}"
   error_id = "error-#{SecureRandom.hex(4)}"
   search_icon ||= nil
+  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
 
   css_classes = %w(gem-c-input govuk-input)
   css_classes << "govuk-input--error" if has_error
@@ -42,7 +43,8 @@
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
     <%= render "govuk_publishing_components/components/label", {
-      html_for: id
+      html_for: id,
+      heading_size: heading_size
     }.merge(label.symbolize_keys) %>
   <% end %>
 

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

@@ -2,10 +2,12 @@
   hint_text ||= ''
   is_radio_label ||= false
   bold ||= false
+  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
 
   css_classes = %w( gem-c-label govuk-label )
   css_classes << "govuk-label--s" if bold
   css_classes << "govuk-radios__label" if is_radio_label
+  css_classes << "govuk-label--#{heading_size}" if heading_size
 
   hint_text_css_classes = %w( govuk-hint )
   hint_text_css_classes << "govuk-radios__hint" if is_radio_label

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

@@ -5,18 +5,38 @@
   full_width ||= false
   name ||= id
   heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  error_message ||= nil
+  error_id ||= nil
+
+  if error_message || error_id
+    error_id = "error-#{SecureRandom.hex(4)}" unless error_id
+    aria_describedby = { describedby: error_id }
+  end
+
+  css_classes = %w(govuk-form-group gem-c-select)
+  css_classes << "govuk-form-group--error" if error_message
+
+  select_classes = %w(govuk-select)
+  select_classes << "gem-c-select__select--full-width" if full_width
+  select_classes << "govuk-select--error" if error_id
 
   label_classes = %w(govuk-label)
   label_classes << "govuk-label--#{heading_size}" if heading_size
 
   select_helper = GovukPublishingComponents::Presenters::SelectHelper.new(options)
-  data_module = "data-module=track-select-change" unless select_helper.data_tracking?.eql?(false)
+  data_module = { module: "track-select-change" } unless select_helper.data_tracking?.eql?(false)
 %>
 <% if options.any? && id && label %>
-  <div class="govuk-form-group gem-c-select">
+  <%= content_tag :div, class: css_classes do %>
     <%= label_tag(id, label, class: label_classes) %>
-    <select class="govuk-select <%= 'gem-c-select__select--full-width' if full_width %>" id="<%= id %>" name="<%= name %>" <%= data_module %> >
-      <%= options_for_select(select_helper.option_markup, select_helper.selected_option) %>
-    </select>
-  </div>
+
+    <% if error_message %>
+      <%= render "govuk_publishing_components/components/error_message", {
+        id: error_id,
+        text: error_message
+      } %>
+    <% end %>
+
+    <%= select_tag name, options_for_select(select_helper.option_markup, select_helper.selected_option), id: id, class: select_classes, data: data_module, aria: aria_describedby %>
+  <% end %>
 <% end %>

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

@@ -7,13 +7,14 @@ accessibility_criteria: |
 
   Error message must:
 
-  - be associated with an input. The `error_message_id` must match the `aria-describedby` property on the input your label is associated with.
+  - be associated with an input. The `error_message_id` must match the `aria-describedby` property on the input your label is associated with. Note that if `id` is not passed to the component an id will be generated automatically.
 
   If error message is within a label it will be announced in its entirety by screen readers. By associating error messages with inputs using `aria-describedby`, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight.
 examples:
   default:
     data:
       text: "Please enter your National Insurance Number"
+      id: "error_id"
   with_items:
     description: Error items are a common pattern where a collection of error is passed with each item having a text attribute of the error
     data:

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

@@ -12,10 +12,10 @@ examples:
       legend_text: 'Do you have a passport?'
       text: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="default-yes" name="default"t>
+        <input type="radio" id="default-yes" name="default">
         <label for="default-yes">Yes</label>
 
-        <input type="radio" id="default-no" name="default"t>
+        <input type="radio" id="default-no" name="default">
         <label for="default-no">No</label>
   with_custom_legend_size:
     description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'.
@@ -24,10 +24,10 @@ examples:
       heading_size: 'l'
       text: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="size-yes" name="default"t>
+        <input type="radio" id="size-yes" name="default">
         <label for="size-yes">Yes</label>
 
-        <input type="radio" id="size-no" name="default"t>
+        <input type="radio" id="size-no" name="default">
         <label for="size-no">No</label>
   with_html_legend:
     description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://components.publishing.service.gov.uk/component-guide/title)'
@@ -44,3 +44,15 @@ examples:
 
         <input type="radio" id="html-legend-no" name="html-legend">
         <label for="html-legend-no">No</label>
+  with_error_message:
+    description: The component also accepts an error_id, or generates one automatically.
+    data:
+      legend_text: 'Do you have a passport?'
+      error_message: 'Please choose an option'
+      text: |
+        <!-- Use the radio component, this is hardcoded only for this example -->
+        <input type="radio" id="default2-yes" name="default2">
+        <label for="default2-yes">Yes</label>
+
+        <input type="radio" id="default2-no" name="default2">
+        <label for="default2-no">No</label>

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

@@ -69,9 +69,7 @@ examples:
       name: "name"
       error_items:
       - text: Descriptive link to the question with an error 1
-        href: '#example-error-1'
       - text: Descriptive link to the question with an error 2
-        href: '#example-error-2'
   with_value:
     data:
       label:
@@ -120,3 +118,10 @@ examples:
       name: "search-box"
       type: "search"
       search_icon: true
+  with_custom_label_size:
+    description: Make the label different sizes. Valid options are 's', 'm', 'l' and 'xl'.
+    data:
+      label:
+        text: "What is your name?"
+      name: "name"
+      heading_size: "l"

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

@@ -27,6 +27,12 @@ examples:
       html_for: "id-that-matches-input"
       hint_id: "should-match-aria-describedby-input"
       hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+  with_custom_label_size:
+    description: Make the label different sizes. Valid options are 's', 'm', 'l' and 'xl'.
+    data:
+      text: "Surname"
+      html_for: "id-that-matches-input"
+      heading_size: "xl"
   bold_with_hint:
     data:
       bold: true

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

@@ -90,6 +90,33 @@ examples:
         value: 'option2'
       - text: 'Option three'
         value: 'option3'
+  with_error:
+    description: If the user has to select an option, it is recommended that a radio button is used instead of a select, but this is not always possible. Note that error_id is optional, if it is not passed one will be generated automatically.
+    data:
+      id: 'dropdown4-1'
+      label: 'How will you be travelling to the conference?'
+      error_message: 'Please choose an option'
+      error_id: 'error_id'
+      options:
+      - text: ""
+        value: ""
+      - text: 'Public transport'
+        value: 'option1'
+      - text: 'Will make own arrangements'
+        value: 'option2'
+  with_error_id_but_no_message:
+    description: For some selects the error message should be rendered separately but an error state is still required (currently required in smart answers). In this scenario an error_id can be passed without an error_message to highlight the component and set aria-describedby correctly.
+    data:
+      id: 'dropdown4-2'
+      label: 'What lunch option would you like?'
+      error_id: 'error_id'
+      options:
+      - text: ""
+        value: ""
+      - text: 'Vegetarian'
+        value: 'option1'
+      - text: 'Meat'
+        value: 'option2'
   full_width:
     description: Make the select width 100%. This is used for facets in finder-frontend's search.
     data:

data/lib/govuk_publishing_components/presenters/machine_readable/faq_page_schema.rb

@@ -24,7 +24,9 @@ module GovukPublishingComponents
       end
 
       def questions_and_answers_markup
-        question_and_answers(page.body).map do |question, value|
+        question_and_answers(page.body)
+          .select { |_, value| value[:answer].present? }
+          .map do |question, value|
           q_and_a_url = section_url(value[:anchor])
 
           {
@@ -42,7 +44,7 @@ module GovukPublishingComponents
 
       # Generates a hash of questions and associated information:
       # - question: the text in the h2 tag preceding other markup. Questions are
-      #             used to key the hash. "Summary" is set as the default, as
+      #             used to key the hash. The page title is set as the default, as
       #             there is often a preamble in guides before any h2 is set.
       #
       # - :answer: the markup that is not an h2 tag. It is associated with the
@@ -53,7 +55,7 @@ module GovukPublishingComponents
       def question_and_answers(html)
         doc = Nokogiri::HTML(html)
 
-        question = "Summary"
+        question = page.title
 
         # rubocop:disable Style/IfInsideElse
         doc.xpath("html/body").children.each_with_object({}) do |element, q_and_as|

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '21.2.0'.freeze
+  VERSION = '21.3.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.2.0
+  version: 21.3.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-09-25 00:00:00.000000000 Z
+date: 2019-09-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: gds-api-adapters