Merge branch 'update-glob' of github.com:ONSdigital/design-system int…

…o update-glob

.babelrc

@@ -2,7 +2,7 @@
     "presets": [
         ["@babel/preset-env", {
             "targets": {
-                "node": "16"
+                "node": "18"
             }
         }]
     ]

.github/workflows/tests.yml

@@ -48,10 +48,13 @@ 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: "16"
+          node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}"
       - name: Install dependencies
         run: yarn install
       - name: Install Docker
@@ -78,4 +81,3 @@ jobs:
             { "title": "By", "value": "${{ github.actor }}", "short": true },
             { "title": "Branch", "value": "${{ github.head_ref }}", "short": true },
             { "title": "View job", "value": "${env.GITHUB_SERVER_URL}/${env.GITHUB_REPOSITORY}/actions/runs/${env.GITHUB_RUN_ID}"}]
-            

.nvmrc

@@ -1 +1 @@
-v16.16.0
+v18.17.1

ci/common.js

@@ -3,7 +3,7 @@ import * as fs from 'fs-extra';
 export async function copyComponents(componentsPath, newComponentsPath) {
   await fs.ensureDir(newComponentsPath);
 
-  const items = (await fs.readdir(componentsPath)).filter(path => !path.includes('.njk'));
+  const items = (await fs.readdir(componentsPath)).filter((path) => !path.includes('.njk'));
   for (let item of items) {
     await copyComponent(item, componentsPath, newComponentsPath);
   }
@@ -14,7 +14,7 @@ async function copyComponent(componentName, componentsPath, newComponentsPath) {
   const newComponentPath = `${newComponentsPath}/${componentName}`;
 
   const items = (await fs.readdir(componentPath)).filter(
-    item => !item.includes('.md') && !item.includes('_test-') && !item.includes('index') && item !== 'examples',
+    (item) => !item.includes('.md') && !item.includes('_test-') && !item.includes('index') && item !== 'examples',
   );
 
   if (items.length) {
@@ -29,7 +29,7 @@ async function copyComponent(componentName, componentsPath, newComponentsPath) {
 export async function copyTemplates(templatesPath, newTemplatesPath) {
   await fs.ensureDir(newTemplatesPath);
 
-  const items = (await fs.readdir(templatesPath)).filter(path => path.includes('.njk') && path.includes('_'));
+  const items = (await fs.readdir(templatesPath)).filter((path) => path.includes('.njk') && path.includes('_'));
   for (let item of items) {
     await copyTemplate(item, templatesPath, newTemplatesPath);
   }

lighthouse/lighthouse.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 node ./lighthouse/lighthouse-get-urls.js
 npx http-server -p 9000 ./build &
-npm install -g @lhci/cli@0.7.x
+npm install -g @lhci/cli@0.12.x
 lhci healthcheck --fatal
 for url in $(jq '.urls[]' ./lighthouse/urls.json); do sem
     lhci collect "--url=$url" --additive --config=./lighthouse/lighthouserc.js &

package.json

@@ -80,11 +80,11 @@
     "dialog-polyfill": "^0.5.6",
     "eslint": "^8.45.0",
     "eslint-cli": "^1.1.1",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "express": "^4.17.1",
     "front-matter": "^4.0.2",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^11.1.1",
     "fuse.js": "^3.6.1",
     "glob": "^9.3.5",
     "gulp": "^4.0.2",
@@ -95,14 +95,14 @@
     "gulp-postcss": "^9.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-terser": "^2.0.1",
-    "http-server": "^0.12.3",
+    "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.6.1",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.6.1",
     "jest-puppeteer": "^9.0.0",
     "js-beautify": "^1.11.0",
-    "lighthouse": "^10.4.0",
+    "lighthouse": "^11.0.0",
     "lint-staged": "^8.1.0",
     "lodash": "^4.17.21",
     "mdn-polyfills": "^5.14.0",
@@ -111,14 +111,13 @@
     "nunjucks": "^3.2.3",
     "pinst": "^3.0.0",
     "postcss": "^8.3.5",
-    "postcss-url": "^8.0.0",
+    "postcss-url": "^10.1.3",
     "prepend-file": "^1.3.1",
     "prettier": "^3.0.0",
     "puppeteer": "^21.0.2",
     "remark-cli": "^11.0.0",
     "remark-lint": "^9.1.2",
     "remark-preset-lint-recommended": "^6.1.3",
-    "replace-in-file": "^6.1.0",
     "stylelint": "^15.10.1",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
@@ -127,12 +126,10 @@
     "stylelint-scss": "^5.0.1",
     "through2": "^4.0.2",
     "tick-manager": "^1.0.3",
-    "url-search-params-polyfill": "^5.0.0",
     "util": "^0.12.3",
-    "viewport-details": "^1.5.0",
+    "viewport-details": "^3.0.4",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "watchify": "^3.0.0",
     "whatwg-fetch": "^3.0.0"
   },
   "publishConfig": {

src/components/navigation/navigation.js

@@ -1,5 +1,3 @@
-import { GetViewportDetails } from 'viewport-details';
-
 import onViewportChange from '../../js/utils/viewport-change';
 
 const attrExpanded = 'aria-expanded';

src/components/tabs/_macro.njk

@@ -24,6 +24,6 @@
                 {% if tab.showTitle %}<h2 id="{{ tab.title|trim|replace(' ','-')|lower + '-content-title' }}" class="ons-u-vh">{{ tab.title }}</h2>{% endif %}
                 {{ tab.content | safe }}
             </section>
-        {% endfor %}    
+        {% endfor %}
     </section>
 {% endmacro %}

src/components/tabs/_macro.spec.js

@@ -76,11 +76,7 @@ describe('macro: tabs', () => {
   it('has the provided `title`', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect(
-      $('.ons-tabs__title')
-        .text()
-        .trim(),
-    ).toBe('Example tabs');
+    expect($('.ons-tabs__title').text().trim()).toBe('Example tabs');
   });
 
   it('has title with provided tag override', () => {
@@ -113,11 +109,7 @@ describe('macro: tabs', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
     expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-vh">for Example</span>');
-    expect(
-      $('.ons-tab:last')
-        .text()
-        .trim(),
-    ).toBe('Tab 2');
+    expect($('.ons-tab:last').text().trim()).toBe('Tab 2');
   });
 
   it('has Google Analytics integration on tab links', () => {
@@ -133,16 +125,8 @@ describe('macro: tabs', () => {
   it('has expected content in tab panels', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect(
-      $('.ons-tabs__panel:first')
-        .html()
-        .trim(),
-    ).toBe('Example content...');
-    expect(
-      $('.ons-tabs__panel:last')
-        .html()
-        .trim(),
-    ).toBe('Some nested <strong>strong element</strong>...');
+    expect($('.ons-tabs__panel:first').html().trim()).toBe('Example content...');
+    expect($('.ons-tabs__panel:last').html().trim()).toBe('Some nested <strong>strong element</strong>...');
   });
 
   it('displays a h2 when showTitle set to true', () => {

src/js/utils/viewport-change.js

@@ -1,5 +1,5 @@
 import { AddTick } from 'tick-manager';
-import { GetViewportDetails } from 'viewport-details';
+import { getViewportDetails } from 'viewport-details';
 
 const callbacks = [];
 let running = false;
@@ -14,9 +14,9 @@ export default function onViewportChange(callback) {
 }
 
 function tick() {
-  const viewportDetails = GetViewportDetails();
+  const viewportDetails = getViewportDetails();
 
   if (viewportDetails.resized) {
-    callbacks.forEach(callback => callback(viewportDetails));
+    callbacks.forEach((callback) => callback(viewportDetails));
   }
 }