Merge branch 'main' into fix/2871/spinning-up-the-ds-locally-on-port-…

…3000-hangs

.github/workflows/lighthouse-ci.yml

@@ -12,13 +12,10 @@ jobs:
       - uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.sha }}
-      - name: Read .nvmrc file
-        id: read-nvmrc-file
-        run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}"
+          node-version-file: ".nvmrc"
       - name: Install dependencies
         run: yarn install
       - name: Build pages

.github/workflows/macro-and-script-tests.yml

@@ -12,13 +12,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Read .nvmrc file
-        id: read-nvmrc-file
-        run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}"
+          node-version-file: ".nvmrc"
       - name: Install dependencies
         run: yarn install
       - name: Run macro and script tests

.github/workflows/npm-bundle.yml

@@ -10,17 +10,14 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Read .nvmrc file
-        id: read-nvmrc-file
-        run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT
       - name: Use Node.js
         uses: actions/checkout@v3
         with:
           ref: ${{ github.event.release.target_commitish }}
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}"
+          node-version-file: ".nvmrc"
           registry-url: https://registry.npmjs.org/
       - run: yarn install
       - run: git config --global user.name "${{ github.actor }}"

.github/workflows/release.yml

@@ -8,13 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Read .nvmrc file
-        id: read-nvmrc-file
-        run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}"
+          node-version-file: ".nvmrc"
       - name: Install dependencies
         run: yarn install
       - name: Build templates

.github/workflows/visual-regression-tests.yml

@@ -15,13 +15,10 @@ jobs:
         with:
           lfs: true
           url: https://github.com/ONSdigital/design-system.git
-      - name: Read .nvmrc file
-        id: read-nvmrc-file
-        run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}"
+          node-version-file: ".nvmrc"
       - name: Install dependencies
         run: yarn install
       - name: Install Docker

src/components/accordion/example-accordion-open.njk

@@ -62,7 +62,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}
@@ -98,7 +98,7 @@
                         "text": "Disability (67)"
                     },
                     "value": "disability"
-                }       
+                }
             ]
         })
     }}

src/components/checkboxes/_macro.njk

@@ -7,7 +7,7 @@
     {% set fields %}
     {% if params.checkboxesLabel is defined %}
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
-    {% endif %}    
+    {% endif %}
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
             {% if checkbox.other %}

src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk

@@ -82,7 +82,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}

src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk

@@ -80,7 +80,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}

src/components/footer/_macro.njk

@@ -179,7 +179,7 @@
                 {% endif %}
                 {% if params.copyrightDeclaration %}
                     <!-- Copyright -->
-                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">                                
+                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">
                         <div class="ons-grid__col">
                             <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
                         </div>

src/components/label/_macro.njk

@@ -1,8 +1,8 @@
 {% macro onsLabel(params) %}
     {% if params.id %}
-        {% set descriptionID = params.id ~ "-description-hint" %}  
+        {% set descriptionID = params.id ~ "-description-hint" %}
     {% else %}
-        {% set descriptionID = "description-hint" %}  
+        {% set descriptionID = "description-hint" %}
     {% endif %}
 
     {% if params.inputType == "checkbox" or params.inputType == "radio" %}

src/components/related-content/_macro.njk

@@ -1,36 +1,34 @@
 {% macro onsRelatedContent(params) %}
 
-  {% if params.classes %}
-    {% set classes = ' ' + params.classes %}
-  {% endif %}
+    {% if params.classes %}
+        {% set classes = ' ' + params.classes %}
+    {% endif %}
 
-  <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
-    {% if params.rows %}
-      {% for row in params.rows %}
-        {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
-        {% call onsRelatedContentSection(
-          {
-            "title": row.title,
-            "id": row.id
-          }
-        ) %}            
-          <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
+    <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
+        {% if params.rows %}
+            {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
             {% from "components/list/_macro.njk" import onsList %}
-            {{
-              onsList({
-                "variants": 'bare',
-                "iconType": row.iconType,
-                "iconPosition": row.iconPosition,
-                "iconSize": row.iconSize,
-                "itemsList": row.itemsList
-              })
-            }}
-          </nav>
-        {% endcall %}
-      {% endfor %}
-    {% else %}
-      {{ caller() if caller }}
-    {% endif %}
-  </aside>
+            {% for row in params.rows %}
+                {% call onsRelatedContentSection({
+                    "title": row.title,
+                    "id": row.id
+                }) %}
+                    <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
+                        {{
+                            onsList({
+                                "variants": 'bare',
+                                "iconType": row.iconType,
+                                "iconPosition": row.iconPosition,
+                                "iconSize": row.iconSize,
+                                "itemsList": row.itemsList
+                            })
+                        }}
+                    </nav>
+                {% endcall %}
+            {% endfor %}
+        {% else %}
+            {{ caller() if caller }}
+        {% endif %}
+    </aside>
 
 {% endmacro %}

src/components/section-navigation/_macro.njk

@@ -1,59 +1,60 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-  <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
-    {% if params.sections %}
-      {% for section in params.sections %}
-        <div class="ons-section-nav__sub">
-          {% if section.title %}
-            <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>{% endif %}
-              <ul class="ons-section-nav__list">
-                {% for item in section.itemsList %}
-                  {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
-                    {% set isCurrent = true %}
-                  {% else %}
-                    {% set isCurrent = false %}
-                  {% endif %}
-                  <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                    <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
-                      {% if item.anchors and isCurrent == true %}
-                          <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
-                              {% for anchor in item.anchors %}
-                                  <li class="ons-section-nav__item ons-list__item">
-                                      <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
-                                  </li>
-                              {% endfor %}
-                          </ul>
-                      {% endif %}
-                  </li>
-                {% endfor %}
-              </ul>
-        </div>
-      {% endfor %} 
-      {% else %} 
-        {% if params.title %}
-          <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
-        {% endif %}
+    <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
+    <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
+        {% if params.sections %}
+            {% for section in params.sections %}
+                <div class="ons-section-nav__sub">
+                    {% if section.title %}
+                        <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>
+                    {% endif %}
+                    <ul class="ons-section-nav__list">
+                        {% for item in section.itemsList %}
+                            {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                                {% set isCurrent = true %}
+                            {% else %}
+                                {% set isCurrent = false %}
+                            {% endif %}
+                            <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                                <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
+                                {% if item.anchors and isCurrent == true %}
+                                    <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                                        {% for anchor in item.anchors %}
+                                            <li class="ons-section-nav__item ons-list__item">
+                                                <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endif %}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            {% endfor %}
+        {% else %}
+            {% if params.title %}
+                <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
+            {% endif %}
             <ul class="ons-section-nav__list">
-              {% for item in params.itemsList %}
-                {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
-                  {% set isCurrent = true %}
-                {% else %}
-                  {% set isCurrent = false %}
-                {% endif %}
-                <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                  <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
-                    {% if item.anchors %}
-                        <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
-                            {% for anchor in item.anchors %}
-                                <li class="ons-section-nav__item ons-list__item">
-                                    <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
+                {% for item in params.itemsList %}
+                    {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                        {% set isCurrent = true %}
+                    {% else %}
+                        {% set isCurrent = false %}
                     {% endif %}
-                </li>
-              {% endfor %}
-            </ul>  
-    {% endif %}  
-  </nav>
+                    <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                        <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
+                        {% if item.anchors %}
+                            <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                                {% for anchor in item.anchors %}
+                                    <li class="ons-section-nav__item ons-list__item">
+                                        <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </nav>
 {% endmacro %}

src/components/video/_macro.njk

@@ -2,20 +2,20 @@
 {%- macro onsVideo(params) -%}
 
     {% set linkContents %}
-      {% if params.image.smallSrc %}
-        <img class="ons-video__img ons-u-mb-xs" {% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-      {% endif %}            
-      <span class="ons-video__link-text ons-u-mt-xs">{{ params.linkText }}</span>
+        {% if params.image.smallSrc %}
+            <img class="ons-video__img ons-u-mb-xs" {% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+        {% endif %}
+        <span class="ons-video__link-text ons-u-mt-xs">{{ params.linkText }}</span>
     {% endset %}
 
     <div class="ons-video ons-js-video">
-      {{
-          onsExternalLink({
-              "url": params.videoLinkURL,
-              "classes": "ons-video__link ons-js-video-placeholder ons-u-db",
-              "linkText": linkContents
-          })
-      }}
+        {{
+            onsExternalLink({
+                "url": params.videoLinkURL,
+                "classes": "ons-video__link ons-js-video-placeholder ons-u-db",
+                "linkText": linkContents
+            })
+        }}
         <iframe data-src="{{ params.videoEmbedUrl }}" title="{{ params.title }}" class="ons-video__iframe ons-js-video-iframe ons-u-d-no" src="about:blank" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
 {%- endmacro -%}