govuk_publishing_components 29.14.0 → 29.15.2

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

@@ -23,16 +23,14 @@ examples:
       items:
       - text: Descriptive link to the question with an error 1
         href: '#example-error-1'
-        data_attributes:
-          tracking: GTM-123AA
       - text: Descriptive link to the question with an error 2
         href: '#example-error-2'
-        data_attributes:
-          tracking: GTM-123AB
       - text: Description of error without link
-        data_attributes:
-          tracking: GTM-123AC
   with_data_attributes:
+    description: |
+      The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
+      
+      Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       title: Message to alert the user to a problem goes here
       description: Optional description of the errors and how to correct them

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

@@ -181,6 +181,11 @@ examples:
           </tbody>
         </table>
   charts:
+    description: |
+      The Government Statistical Service (GSS) guidance recommends [a limit of four categories as best practice for basic data visualisations](https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5).
+
+      Note that charts which have up to 7 categories, [chart with colours](http://govuk-publishing-components.dev.gov.uk/component-guide/govspeak/chart_with_colours/preview), for example, will display subsequent bars in `#3d3d3d`, `#a285d1` and the 7th bar in the default colour of `#0b0c0c` and will still meet the colour contrast requirements for adjacent colours. 
+      Charts that have 8 or more categories will display additional bars in the default colour and will not meet colour contrast requirements for adjacent colours.
     data:
       block: |
         <table class='js-barchart-table mc-auto-outdent'>
@@ -214,8 +219,6 @@ examples:
               <th scope="col">Grapes</th>
               <th scope="col">Strawberries</th>
               <th scope="col">Plums</th>
-              <th scope="col">Apricots</th>
-              <th scope="col">Pineapples</th>
             </tr>
           </thead>
           <tbody>
@@ -228,8 +231,6 @@ examples:
               <td>24</td>
               <td>10</td>
               <td>62</td>
-              <td>29</td>
-              <td>81</td>
             </tr>
             <tr>
               <td>Numbers outside bar</td>
@@ -238,10 +239,8 @@ examples:
               <td>2</td>
               <td>1</td>
               <td>1</td>
-              <td>3</td>
-              <td>3</td>
-              <td>1</td>
               <td>2</td>
+              <td>1</td>
             </tr>
           </tbody>
         </table>

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

@@ -188,14 +188,15 @@ examples:
     data:
       large: true
       href: "/still-not-a-page"
-      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/91397/s712_SG_Swear_in_1_.jpg"
       image_alt: "some meaningful alt text please"
       context:
         date: 2017-06-14 11:30:00
         text: "Announcement"
       heading_text: "Something has happened nearby possibly"
       description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
-  with_tracking:
+  with_data_attributes:
+    description: Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       href: "/i-am-not-a-valid-link"
       href_data_attributes: {

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

@@ -20,31 +20,31 @@ shared_accessibility_criteria:
 examples:
   default:
     data:
-      suggestion_text: "You should renew your permit every 6 months."
+      suggestion_text: You should renew your permit every 6 months.
 
   with_suggestion_link:
     data:
-      suggestion_text: "Based on your browsing you might be interested in"
+      suggestion_text: Based on your browsing you might be interested in
       suggestion_link_text: "Travel abroad: step by step"
-      suggestion_link_url: "/travel-abroad"
+      suggestion_link_url: /travel-abroad
 
   with_dismiss_link:
     data:
-      suggestion_text: "You should renew your permit every 6 months."
-      dismiss_text: "Hide this suggestion"
+      suggestion_text: You should renew your permit every 6 months.
+      dismiss_text: Hide this suggestion
 
   with_suggestion_link_only:
     data:
-      suggestion_link_text: "You can now apply for a permit online."
-      suggestion_link_url: "/permit"
+      suggestion_link_text: You can now apply for a permit online.
+      suggestion_link_url: /permit
 
   with_hide:
     description: |
       This example is for when we want to hide by default and display to the user based on some logic,
       either in the backend or with Javascript.
     data:
-      suggestion_link_text: "You may be invited to fill in a questionnaire"
-      suggestion_link_url: "/questionnaire"
+      suggestion_link_text: You may be invited to fill in a questionnaire
+      suggestion_link_url: /questionnaire
       hide: true
 
   open_suggestion_link_in_new_tab:
@@ -54,30 +54,30 @@ examples:
       Link text should tell the user that the link opens in a new tab.
       Note: "(opens in a new tab)" is added to link text if the phrase isn't included.
     data:
-      suggestion_link_text: "You can now apply for a permit online"
-      suggestion_link_url: "www.google.com/permit"
+      suggestion_link_text: You can now apply for a permit online
+      suggestion_link_url: www.google.com/permit
       new_tab: true
 
   with_data_attributes:
     description: |
       This example shows the use of `suggestion_data_attributes` and
       `dismiss_data_attributes` for click tracking.
+
+      Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
-      suggestion_text: "Based on your browsing you might be interested in"
+      suggestion_text: Based on your browsing you might be interested in
       suggestion_link_text: "Travel abroad: step by step"
-      suggestion_link_url: "/travel-abroad"
+      suggestion_link_url: /travel-abroad
       suggestion_data_attributes:
-        module: "gem-track-click"
-        track-category: "interventionBanner"
-        track-action: "interventionClicked"
+        track-category: interventionBanner
+        track-action: interventionClicked
         track-dimension: "Travel abroad: step by step"
-        track-dimension-index: "29"
-        track-label: "clicked suggestion"
-      dismiss_text: "Hide this suggestion"
+        track-dimension-index: 29
+        track-label: clicked suggestion
+      dismiss_text: Hide this suggestion
       dismiss_data_attributes:
-        module: "gem-track-click"
-        track-category: "interventionBanner"
-        track-action: "interventionDismissed"
-        track-dimension: "Hide this suggestion"
-        track-dimension-index: "29"
-        track-label: "hid the intervention"
+        track-category: interventionBanner
+        track-action: interventionDismissed
+        track-dimension: Hide this suggestion
+        track-dimension-index: 29
+        track-label: hide the intervention

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

@@ -6,8 +6,6 @@ body: |
 
   Alternatively a custom organisation logo can be provided as an image.
 
-  Data tracking attributes can be provided to add tracking to each organisation logo. This will only apply to organisations with a link. Example here: [with_data_attributes](/component-guide/organisation_logo/with_data_attributes)
-
   The logo can optionally be wrapped in a heading.
 
   The logo can be set to not take up the full width of the parent container with the `inline` option.
@@ -147,6 +145,7 @@ examples:
           url: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/321/HMPS.jpg'
           alt_text: 'HM Prison Service'
   with_data_attributes:
+    description: Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       organisation:
         name: Cabinet Office

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

@@ -8,7 +8,7 @@ shared_accessibility_criteria:
   - link
 examples:
   default:
-    description: This component calls `print()` via the browser's DOM API. By default it relies on JavaScript and is not shown in environments where JavaScript is disabled. The \"link\" here is actually a button tag because this is not a navigation event. 
+    description: This component calls `print()` via the browser's DOM API. By default it relies on JavaScript and is not shown in environments where JavaScript is disabled. The \"link\" here is actually a button tag because this is not a navigation event.
   with_different_text:
     data:
       text: "Print this manual"
@@ -17,6 +17,10 @@ examples:
     data:
       href: "/print"
   with_data_attributes:
+    description: |
+      Data attributes can be passed to the component as shown.
+
+      Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       data_attributes:
         track-category: "printButton"

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

@@ -10,160 +10,163 @@ accessibility_criteria: |
 examples:
   default:
     data:
-      id: 'dropdown1'
-      label: 'My Dropdown'
+      id: dropdown1
+      label: My Dropdown
       options:
-      - text: 'Option one'
-        value: 'option1'
-      - text: 'Option two'
-        value: 'option2'
-      - text: 'Option three'
-        value: 'option3'
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
   with_different_id_and_name:
     description: If no name is provided, name defaults to the (required) value of id.
     data:
-      id: 'dropdown1-1'
-      label: 'My Dropdown'
-      name: 'dropdown[1]'
+      id: dropdown1-1
+      label: My Dropdown
+      name: dropdown[1]
       options:
-      - text: 'Option one'
-        value: 'option1'
-      - text: 'Option two'
-        value: 'option2'
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
   with_preselect:
     data:
-      id: 'dropdown2'
-      label: 'Option 2 preselected'
+      id: dropdown2
+      label: Option 2 preselected
       options:
-      - text: 'Option one'
-        value: 'option1'
-      - text: 'Option two'
-        value: 'option2'
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
         selected: true
-      - text: 'Option three'
-        value: 'option3'
+      - text: Option three
+        value: option3
   with_hint:
     description: When a hint is included the `aria-describedby` attribute of the select is included to point to the hint. When an error and a hint are present, that attribute includes the IDs of both the hint and the error.
     data:
-      id: 'dropdown2-1'
-      label: 'Choose your preferred thing'
-      hint: 'You might need some more information here'
-      hint_id: 'optional-hint-id'
+      id: dropdown2-1
+      label: Choose your preferred thing
+      hint: You might need some more information here
+      hint_id: optional-hint-id
       options:
-      - text: 'Something'
-        value: 'option1'
-      - text: 'Something else'
-        value: 'option2'
+      - text: Something
+        value: option1
+      - text: Something else
+        value: option2
   with_tracking:
-    description: 'Tracking can be enabled on the select component by passing a minimum of `data_track_category` and `data_track_action`. Other tracking attributes are optional. Note: tracking events do not currently fire within the component guide.'
+    description: |
+      Tracking can be enabled on the select component by passing a minimum of `data_track_category` and `data_track_action`. Other tracking attributes are optional. Tracking is provided by the [track-select-change](https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/javascripts/govuk_publishing_components/analytics/track-select-change.js) module.
+
+      Note: tracking events do not fire within the component guide.
     data:
-      id: 'dropdown3'
-      label: 'With tracking enabled'
+      id: dropdown3
+      label: With tracking enabled
       options:
-      - text: 'Option one'
-        value: 'option1'
+      - text: Option one
+        value: option1
         data_attributes:
-          track_category: 'relatedLinkClicked'
+          track_category: relatedLinkClicked
           track_action: 1.1
-          track_label: '/link-1'
+          track_label: /link-1
           track_options:
             dimension28: 1
-            dimension29: 'Link 1'
-      - text: 'Option two'
-        value: 'option2'
+            dimension29: Link 1
+      - text: Option two
+        value: option2
         data_attributes:
-          track_category: 'relatedLinkClicked'
+          track_category: relatedLinkClicked
           track_action: 1.2
-          track_label: '/link-2'
+          track_label: /link-2
           track_options:
             dimension28: 2
-            dimension29: 'Link 2'
-      - text: 'Option three'
-        value: 'option3'
+            dimension29: Link 2
+      - text: Option three
+        value: option3
         data_attributes:
-          track_category: 'relatedLinkClicked'
+          track_category: relatedLinkClicked
           track_action: 1.3
-          track_label: '/link-3'
+          track_label: /link-3
           track_options:
             dimension28: 3
-            dimension29: 'Link 3'
+            dimension29: Link 3
   with_data_attributes:
     description: Other data attributes can be passed to the component if needed.
     data:
-      id: 'dropdown4'
-      label: 'With data attributes'
+      id: dropdown4
+      label: With data attributes
       options:
-      - text: 'Option one'
-        value: 'option1'
+      - text: Option one
+        value: option1
         data_attributes:
-          another_attribute: "attribute 1"
-          something_else: "attribute 2"
-      - text: 'Option two'
-        value: 'option2'
-      - text: 'Option three'
-        value: 'option3'
+          another_attribute: attribute 1
+          something_else: attribute 2
+      - text: Option two
+        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'
+      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'
+      - 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'
+      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'
+      - 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:
-      id: 'dropdown5'
-      label: 'Really wide'
+      id: dropdown5
+      label: Really wide
       full_width: true
       options:
-      - text: 'Option one'
-        value: 'option1'
-      - text: 'Option two'
-        value: 'option2'
-      - text: 'Option three'
-        value: 'option3'
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
   with_custom_label_size:
     description: Make the label different sizes. Valid options are `s`, `m`, `l` and `xl`.
     data:
-      id: 'dropdown6'
-      label: 'Bigger!'
-      heading_size: 'xl'
+      id: dropdown6
+      label: Bigger!
+      heading_size: xl
       options:
-      - text: 'Option one'
-        value: 'option1'
-      - text: 'Option two'
-        value: 'option2'
-      - text: 'Option three'
-        value: 'option3'
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
   with_page_heading:
     description: This adds a `h1` element with a label element inside containing the text supplied.
     data:
-      id: 'select-with-heading'
-      label: 'This is a page heading'
-      heading_size: 'xl'
+      id: select-with-heading
+      label: This is a page heading
+      heading_size: xl
       is_page_heading: true
       options:
-      - text: 'Option one'
-        value: 'option1'
-      - text: 'Option two'
-        value: 'option2'
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2

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

@@ -87,7 +87,12 @@ examples:
         - text: £125
           format: numeric
   with_sortable_head:
-    description: This option allows links to be added to the table headers for sorting. Sorting must be handled server side, it is not done by the component.
+    description: |
+      This option allows links to be added to the table headers for sorting. Sorting must be handled server side, it is not done by the component.
+
+      The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
+
+      Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       sortable: true
       head:
@@ -134,3 +139,33 @@ examples:
           format: numeric
         - text: £80
           format: numeric
+  with_filter:
+    description: This option allows table rows to be filtered by user input. Since this filtering is implemented client-side the filter section is not displayed by default but displays only when JavaScript is enabled. The label for the input field can be set when the coponent is rendered via the `label` key. if this is not set a fallback value will display.
+    data:
+      filterable: true
+      label: Filter months
+      head:
+        - text: Month you apply
+        - text: Rate for bicycles
+          format: numeric
+        - text: Rate for vehicles
+          format: numeric
+      rows:
+      -
+        - text: January
+        - text: £85
+          format: numeric
+        - text: £95
+          format: numeric
+      -
+        - text: February
+        - text: £75
+          format: numeric
+        - text: £55
+          format: numeric
+      -
+        - text: March
+        - text: £165
+          format: numeric
+        - text: £125
+          format: numeric

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

@@ -64,6 +64,10 @@ examples:
           content: |
             <p class="govuk-body-m">Here is a single piece of content, there should be no tabs.</p>
   with_data_attributes:
+    description: |
+      The example shown applies a tracking attribute specifically for use by Google Tag Manager in [Content Publisher](https://github.com/alphagov/content-publisher).
+
+      Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       tabs:
         - id: "tab-with-data-attributes-1"

data/config/locales/ar.yml

@@ -203,5 +203,9 @@ ar:
     summary_list:
       delete: حذف
       edit: تغيير
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: المحتويات

data/config/locales/az.yml

@@ -199,5 +199,9 @@ az:
     summary_list:
       delete: Sil
       edit: Dəyiş
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: Məzmunlar

data/config/locales/be.yml

@@ -206,5 +206,9 @@ be:
     summary_list:
       delete: Выдаліць
       edit: Змянiць
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: Змест

data/config/locales/bg.yml

@@ -204,5 +204,9 @@ bg:
     summary_list:
       delete: Изтриване
       edit: Промяна
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: Съдържание

data/config/locales/bn.yml

@@ -201,5 +201,9 @@ bn:
     summary_list:
       delete: মুছে ফেলুন
       edit: পরিবর্তন
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: বিষয়সূচী

data/config/locales/cs.yml

@@ -205,5 +205,9 @@ cs:
     summary_list:
       delete: Odstranit
       edit: Změna
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: Obsah

data/config/locales/cy.yml

@@ -204,5 +204,9 @@ cy:
     summary_list:
       delete: Dileu
       edit: Newid
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: Cynnwys

data/config/locales/da.yml

@@ -201,5 +201,9 @@ da:
     summary_list:
       delete: Slet
       edit: Ændre
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: Indhold

data/config/locales/de.yml

@@ -204,5 +204,9 @@ de:
     summary_list:
       delete: Löschen
       edit: Ändern
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: Inhalte

data/config/locales/dr.yml

@@ -202,5 +202,9 @@ dr:
     summary_list:
       delete: حذف کردن
       edit: تغییر دادن
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: محتویات

data/config/locales/el.yml

@@ -200,5 +200,9 @@ el:
     summary_list:
       delete: Διαγραφή
       edit: Αλλαγή
+    table:
+      filter_count:
+      filter_label:
+      filter_message:
     tabs:
       contents: Περιεχόμενα