Merge branch 'main' of https://github.com/alphagov/govuk-design-guide …

…into Amends-to-feedback-component-page

_includes/macros/unordered-list-item-with-link.njk

@@ -11,7 +11,7 @@
 {% endmacro %}
 
 {% macro listItemsWithExternalLink(listClass, listItem) %}
-  <ul class="{{ listClass }} govuk-list">
+  <ul class="{{ listClass }} govuk-list govuk-list--bullet">
     {% for i in range(0, listItem | length ) %}
       {% if listItem[i].link and listItem[i].title %}
         <li>

_includes/partials/examples.njk

@@ -4,7 +4,7 @@
   <section class="doc-examples">
     {% if (examples | length ) > 1 %}
       <h2 class="doc-examples__title govuk-heading-l">Live examples</h2>
-      {{ listItemsWithExternalLink("doc-examples__list", examples) }}
+      {{ listItemsWithExternalLink("doc-examples__list govuk-list--spaced", examples) }}
       {% if contentDataLink %}
         <p class="govuk-body">Complete list of examples available and page data on <a href="{{ contentDataLink }}" class="govuk-link govuk-link--no-visited-state" rel="noopener noreferrer" target="_blank">Content Data  (opens in a new tab)</a>.</p>
       {% endif %}

_includes/partials/help-improve.njk

@@ -1,4 +1,4 @@
 <section class="doc-help-improve">
-  <h2 class="govuk-heading-l">Help improve this {% if layout == "component-documentation" %}component{% elif layout == "pattern-documentation" %}pattern{% elif layout == "frontend-template-documentation" %}frontend template{% endif %}</h2>
+  <h2 class="govuk-heading-l">Help improve this page</h2>
   <p class="govuk-body">To help make sure that this page is useful, relevant and up to date, submit a <a class="govuk-link" {% if layout == "component-documentation" %} href="https://github.com/alphagov/govuk-design-guide/issues/new?assignees=&labels=component%2Cupdate+documentation&projects=alphagov%2F99&template=04-update-component.yml&title=Update+%5BEnter+the+name+of+the+component%5D" {% elif layout == "pattern-documentation" %}  href="https://github.com/alphagov/govuk-design-guide/issues/new?assignees=&labels=pattern%2Cupdate+documentation&projects=alphagov%2F99&template=05-update-pattern.yml&title=Update+%5BEnter+the+name+of+the+pattern%5D" {% elif layout == "frontend-template-documentation" %} href="https://github.com/alphagov/govuk-design-guide/issues/new?assignees=&labels=frontend+template%2Cupdate+documentation&projects=alphagov%2F99&template=06-update-frontend-template.yml&title=Update+%5BEnter+the+name+of+the+frontend+template%5D" {% endif %} rel="noopener noreferrer" target="_blank">GitHub issue (opens in a new tab)</a> with your proposed updates.</p>
 </section>

_includes/partials/insights.njk

@@ -1,4 +1,4 @@
-{% if insights[0].title and insights[0].link %}
+{% if insights[0].description %}
   <section class="doc-evidence-and-insights">
     <table class="govuk-table">
       <caption class="govuk-table__caption govuk-table__caption--l">History and insights</caption>
@@ -12,12 +12,14 @@
       </thead>
       <tbody class="govuk-table__body">
         {% for i in range(0, insights | length ) | reverse %}
-          {% if insights[i].link and insights[i].title %}
+          {% if insights[i].description %}
             <tr class="govuk-table__row">
               <th scope="row" class="govuk-table__header">{{ insights[i].date }}</th>
               <td class="govuk-table__cell">{{ insights[i].description | markdown }}</td>
               <td class="govuk-table__cell">
-                <a href="{{ insights[i].link }}" class="govuk-link" rel="noopener noreferrer" target="_blank">{{ insights[i].title }} (opens in a new tab)</a>
+                {% if insights[i].link and insights[i].title %}
+                  <a href="{{ insights[i].link }}" class="govuk-link" rel="noopener noreferrer" target="_blank">{{ insights[i].title }} (opens in a new tab)</a>
+                {% endif %}
               </td>
               <td class="govuk-table__cell">{{ insights[i].documentFormat }}</td>
             </tr>

_includes/partials/issues.njk

@@ -11,7 +11,7 @@
       {% elif sectionKey === "Patterns" %}
         <h2 class="doc-issues__title govuk-heading-l">Existing issues with this pattern</h2>
       {% endif %}
-      {{ listItemsWithExternalLink("doc-issues__list", issues) }}
+      {{ listItemsWithExternalLink("doc-issues__list govuk-list--spaced", issues) }}
       {{ reportIssue("h3", "m") }}
       {% include "./instructions-report-issue.njk" %}
     {% else %}

docs/components/*component-documentation-template.md

@@ -59,7 +59,7 @@ variations:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: #Delete this comment before entering the date when the document was published.
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/components/attachment.md

@@ -155,7 +155,7 @@ howItWorks:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: #Delete this comment before entering the date when the document was published.
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/components/breadcrumbs.md

@@ -103,7 +103,7 @@ howItWorks:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: March 2022
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/components/content-list.md

@@ -129,15 +129,15 @@ howItWorks:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: November 2021
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
       'A research project in context of a new page level design explored “How are users who need to *advise on a thing* orientating themselves and navigating at a content page level?”. Under “Chapter scanning and hopping” it summarises that “Participants displayed a strong inclination to engage with table-of-contents style links, which allow them to move across different sections within a piece of content.” The research was done on users that advise others on building works.'
     title: Navigational behaviours – Chapter scanning and hopping – GOV.UK Explore – Research Round 5
     link: https://docs.google.com/presentation/d/1wsiH0OJPyS9DtxvUXri-tNkqFhU6N00xjdsWSAHK2Fw/edit#slide=id.g1006224b8f4_0_85
   1:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: August 2022
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
@@ -146,7 +146,7 @@ insights:
     link: https://docs.google.com/document/d/1Gb3P2lQVGjdfhBnz19FDX4coWTpbKGIpZABNnQ7iLl0/edit#heading=h.llzp42bd0b76
     documentFormat: Google Docs
   2:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: May 2024
     description:
      'A research and design project on travel advice identified that the contents list contributes to users struggling to find information they need. In the given context, working with users enabled the team to streamline the content list from 10 items down to 5. This resulted in less confusion, fewer places to look, and Emergency content info more easily found.'

docs/components/feedback.md

@@ -74,7 +74,7 @@ howItWorks:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: #Delete this comment before entering the date when the document was published.
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/components/global-banner.md

@@ -66,7 +66,7 @@ variations:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: May 2020
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
@@ -75,7 +75,7 @@ insights:
     link: https://docs.google.com/document/d/1ltH8ydXj_W_clYimAtf1MGwQksITxz-q5Yk9E9H5yBY/edit?usp=sharing
     documentFormat: Google Docs
   1:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: May 2024
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/components/print-link.md

@@ -30,7 +30,7 @@ figmaLink: #Delete this comment before entering the Figma embed URL of the Figma
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
 whenToUse:
-  #Delete this comment before entering when to use this component.
+  This component is used to print a single page. In the context of <a class="govuk-link" href="https://www.gov.uk/universal-credit" rel="noopener noreferrer" target="_blank">a multi-page guide (opens in a new tab)</a> a “View a printable version of the whole guide” link is instead added at the bottom of the page. This link leads to <a class="govuk-link" href="https://www.gov.uk/universal-credit/print" rel="noopener noreferrer" target="_blank">a print version (opens in a new tab)</a> of the complete guide which thes has the print link component at the top of the page.
 
 # When not to use this component
 # Briefly describe the situation(s) when not to use this component.
@@ -42,7 +42,13 @@ whenNotToUse:
 # Briefly descibe how this component works. For instance, listing out what happens when an end-user interacts with this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
 howItWorks:
-  'This component renders two different outputs depending on whether a `href` is specified. By default, when no `href` is given, the component renders as a button and triggers a print action via JavaScript. In this case the component is hidden in environments where JavaScript is disabled and can be used as a progressive enhancement. When a `href` is specified the component renders as an anchor tag and navigates to that `href` without JavaScript, suitable for applications which have paths that trigger a print event on load.
+  'When user selects the button the browser’s print modal appears.
+
+
+  For multi-paged content the end-user is directed to a new page that compiles the multi-page content into a single webpage, followed by the appearance of the browser’s print.
+
+
+  This component renders two different outputs depending on whether a `href` is specified. By default, when no `href` is given, the component renders as a button and triggers a print action via JavaScript. In this case the component is hidden in environments where JavaScript is disabled and can be used as a progressive enhancement. When a `href` is specified the component renders as an anchor tag and navigates to that `href` without JavaScript, suitable for applications which have paths that trigger a print event on load.
   
   
   View this component and all its variations in the <a class="govuk-link" href="https://components.publishing.service.gov.uk/component-guide/print_link" rel="noopener noreferrer" target="_blank">Component Guide (opens in a new tab)</a>.'
@@ -77,14 +83,14 @@ variations:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
-    date: #Delete this comment before entering the date when the document was published.
-    description:
+    # A description is REQUIRED in order for this information to render on the page.
+    date: February 2024
+    description: 'The border colour was changed to a darker shade of grey to address accessibility concerns as the earlier border had little colour contrast'
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
       #Delete this comment before entering a brief summary about the document being referred.
-    title: #Delete this comment before entering the name of the insight document.
-    link: #Delete this comment before entering the URL of the insight document.
-    documentFormat: #Delete this comment before entering the format of the insight document. Example: (1) Google Docs, (2) Google Sheets, and (3) Google Slides.
+    title:
+    link:
+    documentFormat:
 
 # Accessibilty criteria for this component
 # List out the accessibility for this component.

docs/components/single-page-notification-button.md

@@ -66,7 +66,7 @@ variations:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: February 2024
     description:
       'A write up of the Email notification sign-up journey.'

docs/frontend-templates/*frontend-template-documentation-template.md

@@ -123,7 +123,7 @@ components:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: #Delete this comment before entering the date when the document was published.
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/frontend-templates/answer.md

@@ -246,7 +246,7 @@ components:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: June 2024
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
@@ -255,7 +255,7 @@ insights:
     link: https://docs.google.com/spreadsheets/d/1f4fSsIxkCfWiKNV9qgE_sep61f5EbKxU58wTWCsGw60/edit?gid=2140166644#gid=2140166644
     documentFormat: Google Sheets
   1:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: June 2024
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
@@ -264,7 +264,7 @@ insights:
     link: https://docs.google.com/spreadsheets/d/1rJTOD69386X1lnpUpih3eXZoeX54kNB4u7dqIQA2oBg/edit?gid=132520947#gid=132520947
     documentFormat: Google Sheets
   2:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: August 2024
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).
@@ -273,7 +273,7 @@ insights:
     link: https://docs.google.com/spreadsheets/d/1bxdQQvSUIfNdmuyF1Ws7RwZARIdgU9eQTN5jYrJeXkU/edit?gid=1433864911#gid=1433864911
     documentFormat: Google Sheets
   3:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: September 2024
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/frontend-templates/calendar.md

@@ -300,7 +300,7 @@ components:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: #Delete this comment before entering the date when the document was published.
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/frontend-templates/completed-transaction.md

@@ -308,7 +308,7 @@ components:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: #Delete this comment before entering the date when the document was published.
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

docs/frontend-templates/detailed-guide.md

@@ -385,7 +385,7 @@ components:
 insights:
   # To add additional insights duplicate the the fields below (adhering to the formating) but increase the count by one integer.
   0:
-    # Both title and link are REQUIRED in order for this information to render on the page.
+    # A description is REQUIRED in order for this information to render on the page.
     date: #Delete this comment before entering the date when the document was published.
     description:
       # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).