govuk_publishing_components 9.7.0 → 9.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f3131ba99a3b7dd9d31bf4334388ab00549d24e094139aa9ca894fe992bdbb1
-  data.tar.gz: 9649c4163ee5badbcb2ad66fe321293c106010068bad671db17a59b625075a22
+  metadata.gz: a5448e205e6135944563a216db12b37c143b57016d6bafd80ade3b31bdb8625e
+  data.tar.gz: d108ec91620a235bb335674ffa4549a76a253867c7f18d460be47689babc507c
 SHA512:
-  metadata.gz: f393badabcf4a976abc0fa696026351809a10c7158b6ea5146c6c105dcf1c2cc80e2c5c66717a06cd7dc5d83b6c8514619c1413fb3bb919cf70ff068b054b240
-  data.tar.gz: 45801c06bfda33cd98104c7031a308ff9459a522a8879c4cd2486f6f85244b1953b2c03648d110e4bcdef9e57802ca1b7c2e3ce0d99c6e3040d0fe462e48c752
+  metadata.gz: 0dcd90698c861c27e9f3fd036526ad256a20f5896096b8b7b99bc63464f2f754be2267cabb07772686b794b785f68958510e7158fe21cdebadd23412c00f9932
+  data.tar.gz: 40c868822baa69b8d497dcfc3408e8c1c96c677cb0d5a830e232bb8fcf9a2b2f94e214fd0dbb0c84b8763a4ef8106908a1d210a626fab9187391c5785652ae26

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

@@ -51,11 +51,8 @@
       bindComponentLinkClicks(stepNavTracker);
 
       function getTextForInsertedElements() {
-        var openBracket = '<span class="visuallyhidden">(</span>';
-        var closeBracket = '<span class="visuallyhidden">)</span>';
-
-        actions.showText = openBracket + $element.attr('data-show-text') + closeBracket;
-        actions.hideText = openBracket + $element.attr('data-hide-text') + closeBracket;
+        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');
       }

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

@@ -0,0 +1 @@
+// This component relies on styles from GOV.UK Frontend

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

@@ -1,3 +1,12 @@
+// `govuk_frontend_toolkit`
+@import "typography";
+
+.gem-c-document-list {
+  @include core-19;
+  margin: 0;
+  padding: 0;
+}
+
 .gem-c-document-list__item {
   overflow: hidden;
   margin-bottom: $gutter-one-third;
@@ -32,6 +41,10 @@
   margin-bottom: 5px;
 }
 
+.gem-c-document-list__item-metadata {
+  padding: 0;
+}
+
 .gem-c-document-list__attribute {
   @include core-14;
   display: inline-block;

data/app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss

@@ -0,0 +1,6 @@
+// This component relies on styles from GOV.UK Frontend
+
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-font-url-function: "font-url";
+
+@import "../../../../node_modules/govuk-frontend/components/error-message/error-message";

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

@@ -1,6 +1,5 @@
 // govuk_frontend_toolkit
-@import 'grid_layout';
-@import 'design-patterns/buttons';
+@import "grid_layout";
 
 .gem-c-feedback {
   max-width: 960px;
@@ -178,6 +177,11 @@
   }
 }
 
-.gem-c-feedback__submit {
-  @include button;
+// static.css on GOV.UK overwrites the component styles using input[type="text"]
+// so we need to apply  govuk-input styles using a stronger selector
+.gem-c-feedback input[type="text"] {
+  // scss-lint:disable PlaceholderInExtend
+  @extend .govuk-input;
+  // scss-lint:enable PlaceholderInExtend
+  margin: 0;
 }

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

@@ -0,0 +1,6 @@
+// This component relies on styles from GOV.UK Frontend
+
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-font-url-function: "font-url";
+
+@import "../../../../node_modules/govuk-frontend/components/hint/hint";

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

@@ -4,3 +4,4 @@
 $govuk-font-url-function: "font-url";
 
 @import "../../../../node_modules/govuk-frontend/components/input/input";
+@import "../../../../node_modules/govuk-frontend/objects/form-group";

data/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss

@@ -0,0 +1 @@
+// This component relies on styles from GOV.UK Frontend

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

@@ -5,3 +5,4 @@ $govuk-image-url-function: "image-url";
 $govuk-font-url-function: "font-url";
 
 @import "../../../../node_modules/govuk-frontend/components/radios/radios";
+@import "../../../../node_modules/govuk-frontend/objects/form-group";

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

@@ -0,0 +1 @@
+// This component relies on styles from GOV.UK Frontend

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

@@ -1,10 +1,17 @@
 <% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request.path) %>
+<% prioritise_taxon_breadcrumbs ||= false %>
 
 <div class='gem-c-contextual-breadcrumbs'>
   <% if navigation.content_tagged_to_single_step_by_step? %>
     <!-- Rendering step by step nav breadcrumbs because there's 1 step by step -->
     <%= render 'govuk_publishing_components/components/step_by_step_nav_header',
       navigation.step_nav_helper.header %>
+  <% elsif navigation.content_is_tagged_to_a_live_taxon? && prioritise_taxon_breadcrumbs %>
+    <!-- Rendering taxonomy breadcrumbs because the page is tagged to live taxons
+          and we want to prioritise them over all other breadcrumbs -->
+    <%= render 'govuk_publishing_components/components/breadcrumbs',
+               breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
+               collapse_on_mobile: true %>
   <% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
     <!-- Rendering parent-based breadcrumbs because the page is tagged to mainstream browse -->
     <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs %>

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

@@ -0,0 +1,10 @@
+<details class="gem-c-details govuk-details">
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      <%= title %>
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+    <%= yield %>
+  </div>
+</details>

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

@@ -35,7 +35,7 @@
         <% end %>
 
         <% if item[:metadata] %>
-          <ul>
+          <ul class="gem-c-document-list__item-metadata">
             <% item[:metadata].each do |item_metadata_key, item_metadata_value| %>
               <li class="gem-c-document-list__attribute">
                 <% if item_metadata_key.to_s.eql?("public_updated_at") %>

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

@@ -0,0 +1,10 @@
+<%
+  id ||= "error-message-#{SecureRandom.hex(4)}"
+  classes ||= ''
+  css_classes = %w( gem-c-error-message govuk-error-message )
+  css_classes << classes if classes
+%>
+
+<%= tag.span id: id, class: css_classes do %>
+  <%= text %>
+<% end %>

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

@@ -93,8 +93,9 @@
           name: "what_wrong"
         } %>
 
-        <%# TODO: use button component once available in gem %>
-        <input class="gem-c-feedback__submit" type="submit" value="Send">
+        <%= render "govuk_publishing_components/components/button", {
+          text: "Send"
+        } %>
       </div>
     </div>
   </form>
@@ -136,8 +137,9 @@
           describedby: "survey_explanation"
         } %>
 
-        <%# TODO: use button component once available in gem %>
-        <input class="gem-c-feedback__submit" type="submit" value="Send me the survey">
+        <%= render "govuk_publishing_components/components/button", {
+          text: "Send me the survey"
+        } %>
         <a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=<%= stripped_url -%>&amp;gcl=1627485790.1515403243" class="gem-c-feedback__email-link" id="take-survey" target="_blank" rel="noopener noreferrer">Don’t have an email address?</a>
       </div>
     </div>

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

@@ -0,0 +1,10 @@
+<%
+  id ||= "hint-#{SecureRandom.hex(4)}"
+  classes ||= ''
+  css_classes = %w( gem-c-hint govuk-hint )
+  css_classes << classes if classes
+%>
+
+<%= tag.span id: id, class: css_classes do %>
+  <%= text %>
+<% end %>

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

@@ -1,32 +1,52 @@
 <%
   id ||= "input-#{SecureRandom.hex(4)}"
-  hint_id ||= "hint-#{SecureRandom.hex(4)}"
   value ||= nil
-  error_message ||= false
-  label ||= {}
   type ||= "text"
   describedby ||= false
-  ariadescribedby ||= nil
+
+  label ||= nil
+  hint ||= nil
+  error_message ||= nil
+  hint_id = "hint-#{SecureRandom.hex(4)}" if hint
+  error_message_id = "error-message-#{SecureRandom.hex(4)}" if error_message
+
   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
+  form_group_css_classes = %w(govuk-form-group)
+  form_group_css_classes << "govuk-form-group--error" if error_message
 
-  if error_message
-    ariadescribedby = hint_id
-  elsif describedby
-    ariadescribedby = describedby
+  aria_described_by ||= nil
+  if hint || error_message || describedby
+    aria_described_by = []
+    aria_described_by << hint_id if hint
+    aria_described_by << error_message_id if error_message
+    aria_described_by << describedby if describedby
+    aria_described_by = aria_described_by.join(" ")
   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,
-  } %>
+<%= content_tag :div, class: form_group_css_classes do %>
+  <% if label %>
+    <%= render "govuk_publishing_components/components/label", {
+      text: label[:text],
+      html_for: id
+    } %>
+  <% end %>
+
+  <% if hint %>
+    <%= render "govuk_publishing_components/components/hint", {
+      id: hint_id,
+      text: hint
+    } %>
+  <% end %>
+
+  <% if error_message %>
+    <%= render "govuk_publishing_components/components/error_message", {
+      id: error_message_id,
+      text: error_message
+    } %>
+  <% end %>
 
   <%= text_field_tag name,
     value,
@@ -35,7 +55,7 @@
       id: id,
       type: type,
       aria: {
-        describedby: ariadescribedby
+        describedby: aria_described_by
       }
     }
   %>

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

@@ -0,0 +1,10 @@
+<%
+  id ||= "inset-text-#{SecureRandom.hex(4)}"
+  classes ||= ''
+  css_classes = %w( gem-c-inset-text govuk-inset-text )
+  css_classes << classes if classes
+%>
+
+<%= tag.div id: id, class: css_classes do %>
+  <%= text %>
+<% end %>

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

@@ -2,10 +2,34 @@
   id_prefix ||= "radio-#{SecureRandom.hex(4)}"
   items ||= []
 
+  label ||= nil
+  hint ||= nil
+  error_message ||= nil
+  hint_id = "hint-#{SecureRandom.hex(4)}" if hint
+  error_message_id = "error-message-#{SecureRandom.hex(4)}" if error_message
+
+  form_group_css_classes = %w(govuk-form-group)
+  form_group_css_classes << "govuk-form-group--error" if error_message
+
   # check if any item is set as being conditional
   has_conditional = items.any? { |item| item["conditional"] }
 %>
-<%= content_tag :div, class: "govuk-form-group" do %>
+<%= content_tag :div, class: form_group_css_classes do %>
+
+  <% if hint %>
+    <%= render "govuk_publishing_components/components/hint", {
+      id: hint_id,
+      text: hint
+    } %>
+  <% end %>
+
+  <% if error_message %>
+    <%= render "govuk_publishing_components/components/error_message", {
+      id: error_message_id,
+      text: error_message
+    } %>
+  <% end %>
+
   <%= content_tag :div, class: "govuk-radios",
     data: {
       module: ('radios' if has_conditional)

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

@@ -0,0 +1,56 @@
+<%
+  id ||= "textarea-#{SecureRandom.hex(4)}"
+  value ||= nil
+  rows ||= 5
+
+  label ||= nil
+  hint ||= nil
+  error_message ||= nil
+  hint_id = "hint-#{SecureRandom.hex(4)}" if hint
+  error_message_id = "error-message-#{SecureRandom.hex(4)}" if error_message
+
+  css_classes = %w(gem-c-textarea govuk-textarea)
+  css_classes << "govuk-textarea--error" if error_message
+  form_group_css_classes = %w(govuk-form-group)
+  form_group_css_classes << "govuk-form-group--error" if error_message
+
+  aria_described_by ||= nil
+  if hint || error_message
+    aria_described_by = []
+    aria_described_by << hint_id if hint
+    aria_described_by << error_message_id if error_message
+    aria_described_by = aria_described_by.join(" ")
+  end
+%>
+
+<%= content_tag :div, class: form_group_css_classes do %>
+  <% if label %>
+    <%= render "govuk_publishing_components/components/label", {
+      text: label[:text],
+      html_for: id
+    } %>
+  <% end %>
+
+  <% if hint %>
+    <%= render "govuk_publishing_components/components/hint", {
+      id: hint_id,
+      text: hint
+    } %>
+  <% end %>
+
+  <% if error_message %>
+    <%= render "govuk_publishing_components/components/error_message", {
+      id: error_message_id,
+      text: error_message
+    } %>
+  <% end %>
+
+  <%= tag.textarea name: name,
+    value: value,
+    class: css_classes,
+    id: id,
+    rows: rows,
+    aria: {
+      describedby: aria_described_by
+    } do %><%= value %><% end %>
+<% end %>

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

@@ -4,6 +4,8 @@ accessibility_criteria: |
   - has a touch area easy for users to touch
 shared_accessibility_criteria:
 - link
+govuk_frontend_components:
+  - back-link
 examples:
   default:
     data:

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

@@ -3,11 +3,6 @@ description: Use buttons to move though a transaction, aim to use only one butto
 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-publishing-components.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
@@ -23,6 +18,8 @@ accessibility_criteria: |
   - activate when focused and enter is pressed
   - have a role of button
   - have an accessible label
+govuk_frontend_components:
+  - button
 examples:
   default:
     data:

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

@@ -0,0 +1,24 @@
+name: Details
+description: Make a page easier to scan by letting users reveal more detailed information only if they need it
+shared_accessibility_criteria:
+  - link
+accessibility_criteria: |
+  The component must:
+
+  * accept focus
+  * be focusable with a keyboard
+  * be usable with a keyboard
+  * be usable with touch
+  * indicate when it has focus
+  * toggle the visibility of the details element's content when interacted with
+  * indicate the expanded state when details' content is visible
+  * indicate the collapsed state when details' content is hidden
+part_of_admin_layout: true
+govuk_frontend_components:
+  - header
+examples:
+  default:
+    data:
+      title: Help with nationality
+      block: |
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

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

@@ -0,0 +1,16 @@
+name: Form error message
+description: Use error messages for any form fields.
+govuk_frontend_components:
+  - error-message
+accessibility_criteria: |
+  All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+
+  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.
+
+  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"

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

@@ -0,0 +1,16 @@
+name: Form hint text
+description: Use hints for any form fields.
+govuk_frontend_components:
+  - hint
+accessibility_criteria: |
+  All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+
+  Hint text must:
+
+  - be associated with an input. The `hint_id` must match the `aria-describedby` property on the input your label is associated with.
+
+  If hint text is within a label it will be announced in its entirety by screen readers. By associating hints 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: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."

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

@@ -1,7 +1,5 @@
 name: Form input
 description: A form input field and an associated label.
-body: |
-  [Forked from GOV.UK Frontend](https://govuk-frontend-review.herokuapp.com/components/input)
 accessibility_criteria: |
   Inputs in the component must:
 
@@ -15,6 +13,8 @@ accessibility_criteria: |
   * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
 
   Labels use the [label component](/component-guide/label).
+govuk_frontend_components:
+  - input
 examples:
   default:
     data:
@@ -38,6 +38,12 @@ examples:
         text: "This might not work"
       name: "labelledby"
       describedby: "wrapper"
+  with_hint:
+    data:
+      label:
+        text: "What is your name?"
+      name: "name"
+      hint: "Please provide your first and last name"
   with_error:
     data:
       label:

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

@@ -0,0 +1,11 @@
+name: Inset text (experimental)
+description: Use the inset text component to differentiate a block of text from the content that surrounds it.
+part_of_admin_layout: true
+govuk_frontend_components:
+  - inset-text
+accessibility_criteria: |
+  All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+examples:
+  default:
+    data:
+      text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."

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

@@ -2,8 +2,6 @@ name: Form label
 description: Use labels for all form fields.
 body: |
   For use with other form inputs e.g. [Radio buttons](/component-guide/radio)
-
-  Forked from the upcoming [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), when GOV.UK Frontend release we can replace these source files.
 accessibility_criteria: |
   All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
 
@@ -16,6 +14,8 @@ accessibility_criteria: |
   - be associated with an input. The `hint_id` must match the `aria-describedby` property on the input your label is associated with.
 
   If hint text is within a label it will be announced in its entirity by screen readers. By putting the hint alongside labels and associating hints 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. [A discussion of this approach](https://github.com/alphagov/govuk_elements/issues/574).
+govuk_frontend_components:
+  - label
 examples:
   default:
     data:

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

@@ -1,5 +1,5 @@
-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.
+name: Form radio button
+description: A radio button is an 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: |
   You can also use 'or' as an item to break up radios.
 
@@ -33,6 +33,8 @@ 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.
+govuk_frontend_components:
+  - radios
 examples:
   default:
     data:
@@ -118,6 +120,26 @@ 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
+  with_hint_on_form_group:
+    data:
+      name: "radio-group-error"
+      id_prefix: "hint"
+      hint: "You’ll need to prove your identity using one of the following methods"
+      items:
+      - value: "government-gateway"
+        text: "Use Government Gateway"
+      - value: "govuk-verify"
+        text: "Use GOV.UK Verify"
+  with_error_on_form_group:
+    data:
+      name: "radio-group-error"
+      id_prefix: "error"
+      error_message: "Please select one option"
+      items:
+      - value: "government-gateway"
+        text: "Use Government Gateway"
+      - value: "govuk-verify"
+        text: "Use GOV.UK Verify"
   conditional:
     data:
       name: "radio-group-conditional"

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

@@ -0,0 +1,48 @@
+name: Form textarea (experimental)
+description: A textarea field and an associated label
+part_of_admin_layout: true
+govuk_frontend_components:
+  - textarea
+accessibility_criteria: |
+  The component must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - be usable with touch
+  - indicate when they have focus
+  - be recognisable as form textarea elements
+  - have correctly associated labels
+
+  Labels use the [label component](/component-guide/label).
+examples:
+  default:
+    data:
+      label:
+        text: "Can you provide more detail?"
+      name: "more-detail"
+  specific_rows:
+    description: Textarea with 10 rows
+    data:
+      label:
+        text: "Can you provide more detail?"
+      name: "more-detail-rows"
+      rows: 10
+  with_hint:
+    data:
+      label:
+        text: "Can you provide more detail?"
+      name: "with-hint"
+      hint: "Please include as much information as possible."
+  with_error:
+    data:
+      label:
+        text: "Can you provide more detail?"
+      name: "more-detail-error"
+      error_message: "Please could you provide more detail"
+  with_value:
+    data:
+      label:
+        text: "Can you provide more detail?"
+      name: "more-detail-value"
+      value: "More detail"

data/lib/govuk_publishing_components/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 9.7.0
+  version: 9.8.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-07-27 00:00:00.000000000 Z
+date: 2018-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -341,7 +341,9 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_button.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_details.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss
@@ -349,8 +351,10 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_heading.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_hint.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_input.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_label.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss
@@ -374,6 +378,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.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/_textarea.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_title.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss
@@ -436,7 +441,9 @@ files:
 - app/views/govuk_publishing_components/components/_contents_list.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/_details.html.erb
 - app/views/govuk_publishing_components/components/_document_list.html.erb
+- app/views/govuk_publishing_components/components/_error_message.html.erb
 - app/views/govuk_publishing_components/components/_error_summary.html.erb
 - app/views/govuk_publishing_components/components/_feedback.html.erb
 - app/views/govuk_publishing_components/components/_fieldset.html.erb
@@ -445,8 +452,10 @@ files:
 - app/views/govuk_publishing_components/components/_govspeak_html_publication.html.erb
 - app/views/govuk_publishing_components/components/_heading.html.erb
 - app/views/govuk_publishing_components/components/_highlight_boxes.html.erb
+- app/views/govuk_publishing_components/components/_hint.html.erb
 - app/views/govuk_publishing_components/components/_image_card.html.erb
 - app/views/govuk_publishing_components/components/_input.html.erb
+- app/views/govuk_publishing_components/components/_inset_text.html.erb
 - app/views/govuk_publishing_components/components/_inverse_header.html.erb
 - app/views/govuk_publishing_components/components/_label.html.erb
 - app/views/govuk_publishing_components/components/_layout_footer.html.erb
@@ -472,6 +481,7 @@ files:
 - app/views/govuk_publishing_components/components/_subscription-links.html.erb
 - 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/_textarea.html.erb
 - app/views/govuk_publishing_components/components/_title.html.erb
 - app/views/govuk_publishing_components/components/_translation-nav.html.erb
 - app/views/govuk_publishing_components/components/docs/back_link.yml
@@ -480,7 +490,9 @@ files:
 - app/views/govuk_publishing_components/components/docs/contents_list.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/details.yml
 - app/views/govuk_publishing_components/components/docs/document_list.yml
+- app/views/govuk_publishing_components/components/docs/error_message.yml
 - app/views/govuk_publishing_components/components/docs/error_summary.yml
 - app/views/govuk_publishing_components/components/docs/feedback.yml
 - app/views/govuk_publishing_components/components/docs/fieldset.yml
@@ -489,8 +501,10 @@ files:
 - app/views/govuk_publishing_components/components/docs/govspeak_html_publication.yml
 - app/views/govuk_publishing_components/components/docs/heading.yml
 - app/views/govuk_publishing_components/components/docs/highlight_boxes.yml
+- app/views/govuk_publishing_components/components/docs/hint.yml
 - app/views/govuk_publishing_components/components/docs/image_card.yml
 - app/views/govuk_publishing_components/components/docs/input.yml
+- app/views/govuk_publishing_components/components/docs/inset_text.yml
 - app/views/govuk_publishing_components/components/docs/inverse_header.yml
 - app/views/govuk_publishing_components/components/docs/label.yml
 - app/views/govuk_publishing_components/components/docs/layout_footer.yml
@@ -516,6 +530,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/subscription-links.yml
 - app/views/govuk_publishing_components/components/docs/success_alert.yml
 - app/views/govuk_publishing_components/components/docs/taxonomy_navigation.yml
+- app/views/govuk_publishing_components/components/docs/textarea.yml
 - app/views/govuk_publishing_components/components/docs/title.yml
 - app/views/govuk_publishing_components/components/docs/translation-nav.yml
 - app/views/govuk_publishing_components/components/metadata/_sentence.html.erb