@ons/design-system 65.2.1 → 65.2.3

package/components/tabs/tabs.spec.js

@@ -1,10 +1,12 @@
-import puppeteer from 'puppeteer';
-
+import { KnownDevices } from 'puppeteer';
 import { setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
+const iPhoneX = KnownDevices['iPhone X'];
+
 const EXAMPLE_TABS = {
   title: 'Example tabs',
+  titleClasses: 'ons-u-fs-m',
   tabs: [
     {
       id: 'tab.id.1',
@@ -74,44 +76,50 @@ describe('script: tabs', () => {
       await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS));
     });
 
+    it('has additionally provided `titleClasses`', async () => {
+      const hasClass = await page.$eval('.ons-tabs__title', (node) => node.classList.contains('ons-u-fs-m'));
+
+      expect(hasClass).toBe(true);
+    });
+
     it('has the "presentation" role assigned to tab list items', async () => {
-      const role = await page.$eval('.ons-tab__list-item', node => node.getAttribute('role'));
+      const role = await page.$eval('.ons-tab__list-item', (node) => node.getAttribute('role'));
       expect(role).toBe('presentation');
     });
 
     it('has the "tab" role assigned to each tab', async () => {
-      const tabRoleValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('role')));
+      const tabRoleValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('role')));
 
       expect(tabRoleValues).toEqual(['tab', 'tab', 'tab']);
     });
 
     it('has "aria-controls" assigned to each tab with the corresponding panel id', async () => {
-      const ariaControlsValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('aria-controls')));
+      const ariaControlsValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('aria-controls')));
 
       expect(ariaControlsValues).toEqual(['tab.id.1', 'tab.id.2', 'tab.id.3']);
     });
 
     it('has "aria-selected" assigned to the first tab', async () => {
-      const ariaSelectedValue = await page.$eval('.ons-tab', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-tab', (node) => node.getAttribute('aria-selected'));
 
       expect(ariaSelectedValue).toBe('true');
     });
 
     it('has the "ons-tab--selected" class assigned to the first tab', async () => {
-      const hasClass = await page.$eval('.ons-tab', node => node.classList.contains('ons-tab--selected'));
+      const hasClass = await page.$eval('.ons-tab', (node) => node.classList.contains('ons-tab--selected'));
 
       expect(hasClass).toBe(true);
     });
 
     it('has "tabindex" assigned to each tab', async () => {
-      const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+      const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
 
       expect(tabIndexValues).toEqual(['0', '-1', '-1']);
     });
 
     it('has only one visible tab panel', async () => {
-      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
-        nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
+        nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
       );
 
       expect(panelHiddenStates).toEqual([false, true, true]);
@@ -124,26 +132,26 @@ describe('script: tabs', () => {
       });
 
       it('is assigned a "tabindex" value', async () => {
-        const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+        const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
 
         expect(tabIndexValues).toEqual(['-1', '0', '-1']);
       });
 
       it('has the "aria-selected" attribute', async () => {
-        const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
+        const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', (node) => node.getAttribute('aria-selected'));
 
         expect(ariaSelectedValue).toBe('true');
       });
 
       it('has the "ons-tab--selected" class assigned', async () => {
-        const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
+        const hasClass = await page.$eval('a[href="#tab.id.2"]', (node) => node.classList.contains('ons-tab--selected'));
 
         expect(hasClass).toBe(true);
       });
 
       it('shows the corresponding panel', async () => {
-        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
-          nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
+          nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
         );
 
         expect(panelHiddenStates).toEqual([true, false, true]);
@@ -178,26 +186,26 @@ describe('script: tabs', () => {
     });
 
     it('is assigned a "tabindex" value', async () => {
-      const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+      const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
 
       expect(tabIndexValues).toEqual(['-1', '0', '-1']);
     });
 
     it('has the "aria-selected" attribute', async () => {
-      const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', (node) => node.getAttribute('aria-selected'));
 
       expect(ariaSelectedValue).toBe('true');
     });
 
     it('has the "ons-tab--selected" class assigned', async () => {
-      const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
+      const hasClass = await page.$eval('a[href="#tab.id.2"]', (node) => node.classList.contains('ons-tab--selected'));
 
       expect(hasClass).toBe(true);
     });
 
     it('shows the corresponding panel', async () => {
-      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
-        nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
+        nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
       );
 
       expect(panelHiddenStates).toEqual([true, false, true]);
@@ -206,7 +214,7 @@ describe('script: tabs', () => {
 
   describe('when the viewport is small', () => {
     beforeEach(async () => {
-      await page.emulate(puppeteer.devices['iPhone X']);
+      await page.emulate(iPhoneX);
 
       await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS_LONGER));
     });
@@ -214,27 +222,27 @@ describe('script: tabs', () => {
     it('has no aria attributes on tabs', async () => {
       const tabElements = await page.$$('.ons-tab');
       for (let i = 0; i < 3; ++i) {
-        const hasRoleAttribute = await tabElements[i].evaluate(node => node.getAttribute('role') !== null);
+        const hasRoleAttribute = await tabElements[i].evaluate((node) => node.getAttribute('role') !== null);
         expect(hasRoleAttribute).toBe(false);
 
-        const hasAriaControlsAttribute = await tabElements[i].evaluate(node => node.getAttribute('aria-controls') !== null);
+        const hasAriaControlsAttribute = await tabElements[i].evaluate((node) => node.getAttribute('aria-controls') !== null);
         expect(hasAriaControlsAttribute).toBe(false);
 
-        const hasAriaSelectedAttribute = await tabElements[i].evaluate(node => node.getAttribute('aria-selected') !== null);
+        const hasAriaSelectedAttribute = await tabElements[i].evaluate((node) => node.getAttribute('aria-selected') !== null);
         expect(hasAriaSelectedAttribute).toBe(false);
       }
     });
 
     it('has no hidden tab panels', async () => {
-      const panelCount = await page.$$eval('.ons-tabs__panel', nodes => nodes.length);
+      const panelCount = await page.$$eval('.ons-tabs__panel', (nodes) => nodes.length);
       expect(panelCount).toBe(5);
 
-      const hiddenPanelCount = await page.$$eval('.ons-tabs__panel--hidden', nodes => nodes.length);
+      const hiddenPanelCount = await page.$$eval('.ons-tabs__panel--hidden', (nodes) => nodes.length);
       expect(hiddenPanelCount).toBe(0);
     });
 
     it('displays a h2 element with a unique id', async () => {
-      const panelCount = await page.$$eval('#tab-1-content-title', nodes => nodes.length);
+      const panelCount = await page.$$eval('#tab-1-content-title', (nodes) => nodes.length);
       expect(panelCount).toBe(1);
     });
   });
@@ -246,13 +254,13 @@ describe('script: tabs', () => {
     });
 
     it('does not assign "aria-selected" to the first tab', async () => {
-      const ariaSelectedValue = await page.$eval('.ons-tab', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('.ons-tab', (node) => node.getAttribute('aria-selected'));
 
       expect(ariaSelectedValue).not.toBe('true');
     });
 
     it('does not assign the "ons-tab--selected" class to the first tab', async () => {
-      const hasClass = await page.$eval('.ons-tab', node => node.classList.contains('ons-tab--selected'));
+      const hasClass = await page.$eval('.ons-tab', (node) => node.classList.contains('ons-tab--selected'));
 
       expect(hasClass).toBe(false);
     });
@@ -264,26 +272,26 @@ describe('script: tabs', () => {
       });
 
       it('is assigned a "tabindex" value', async () => {
-        const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+        const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
 
         expect(tabIndexValues).toEqual(['0', '-1', '-1']);
       });
 
       it('has the "aria-selected" attribute', async () => {
-        const ariaSelectedValue = await page.$eval('a[href="#tab.id.1"]', node => node.getAttribute('aria-selected'));
+        const ariaSelectedValue = await page.$eval('a[href="#tab.id.1"]', (node) => node.getAttribute('aria-selected'));
 
         expect(ariaSelectedValue).toBe('true');
       });
 
       it('has the "ons-tab--selected" class assigned', async () => {
-        const hasClass = await page.$eval('a[href="#tab.id.1"]', node => node.classList.contains('ons-tab--selected'));
+        const hasClass = await page.$eval('a[href="#tab.id.1"]', (node) => node.classList.contains('ons-tab--selected'));
 
         expect(hasClass).toBe(true);
       });
 
       it('shows the corresponding panel', async () => {
-        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
-          nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
+          nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
         );
 
         expect(panelHiddenStates).toEqual([false, true, true]);
@@ -298,26 +306,26 @@ describe('script: tabs', () => {
       });
 
       it('is assigned a "tabindex" value', async () => {
-        const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+        const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
 
         expect(tabIndexValues).toEqual(['0', '-1', '-1']);
       });
 
       it('does not have the "aria-selected" attribute', async () => {
-        const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
+        const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', (node) => node.getAttribute('aria-selected'));
 
         expect(ariaSelectedValue).not.toBe('true');
       });
 
       it('does not have the "ons-tab--selected" class assigned', async () => {
-        const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
+        const hasClass = await page.$eval('a[href="#tab.id.2"]', (node) => node.classList.contains('ons-tab--selected'));
 
         expect(hasClass).toBe(false);
       });
 
       it('hides the corresponding panel', async () => {
-        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
-          nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
+          nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
         );
 
         expect(panelHiddenStates).toEqual([true, true, true]);
@@ -332,26 +340,26 @@ describe('script: tabs', () => {
     });
 
     it('is assigned a "tabindex" value', async () => {
-      const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+      const tabIndexValues = await page.$$eval('.ons-tab', (nodes) => nodes.map((node) => node.getAttribute('tabindex')));
 
       expect(tabIndexValues).toEqual(['-1', '0', '-1']);
     });
 
     it('has the "aria-selected" attribute', async () => {
-      const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
+      const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', (node) => node.getAttribute('aria-selected'));
 
       expect(ariaSelectedValue).toBe('true');
     });
 
     it('has the "ons-tab--selected" class assigned', async () => {
-      const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
+      const hasClass = await page.$eval('a[href="#tab.id.2"]', (node) => node.classList.contains('ons-tab--selected'));
 
       expect(hasClass).toBe(true);
     });
 
     it('shows the corresponding panel', async () => {
-      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
-        nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', (nodes) =>
+        nodes.map((node) => node.classList.contains('ons-tabs__panel--hidden')),
       );
 
       expect(panelHiddenStates).toEqual([true, false, true]);

package/layout/_template.njk

@@ -14,8 +14,9 @@
 {% if pageConfig.cdn or release_version or designSystemVersion %}
     {# Production #}
     {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
-    {% set slash = "" if cdn_url | last == "/" else "/" %}
-    {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version) or release_version or designSystemVersion) %}
+    {% set slash = "" if cdn_url | last == "/" else 
+        "/" %}
+    {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version)or release_version or designSystemVersion) %}
 {% elif pageConfig.assetsURL %}
     {# Runner Dev #}
     {% set assetsURL = pageConfig.assetsURL %}
@@ -43,9 +44,12 @@
 
 {# Page columns #}
 {% set pageColNumber = pageConfig.pageColNumber | default("12") %}
-{% set pageColClasses = pageConfig.pageColClasses if pageConfig.pageColClasses else '' %}
-{% set mainClasses = pageConfig.mainColClasses if pageConfig.mainColClasses else '' %}
-
+{% set pageColClasses = pageConfig.pageColClasses if pageConfig.pageColClasses else 
+    '' %}
+{% set mainClasses = pageConfig.mainColClasses if pageConfig.mainColClasses else 
+    '' %}
+{% set themeColor = pageConfig.themeColor if pageConfig.themeColor else 
+    "#206095" %}
 <!doctype html>
 <html lang="{{ currentLanguageISOCode }}">
     <head>
@@ -55,7 +59,7 @@
         <title>{{ page_title }}</title>
         <link rel="stylesheet" href="{{ assetsURL }}/css/main.css">
         <link rel="stylesheet" media="print" href="{{ assetsURL }}/css/print.css">
-        <meta name="theme-color" content="#206095"/>
+        <meta name="theme-color" content="{{ themeColor }}"/>
         {% block meta %}
             {% if pageConfig.meta %}
                 {% if pageConfig.meta.description or pageConfig.description %}
@@ -87,12 +91,13 @@
             <meta property="og:locale" content="{{ currentLanguageISOCode }}">
 
             {% if otherLanguageISOCode %}
-                <meta property="og:locale:alternate" content="{{ otherLanguageISOCode }}"> 
+                <meta property="og:locale:alternate" content="{{ otherLanguageISOCode }}">
             {% endif %}
 
             {% if pageConfig.social %}
 
-                {% set twitterImagePath = pageConfig.social.twitterImage if pageConfig.social.twitterImage else assetsURL + '/favicons/twitter.png' %}
+                {% set twitterImagePath = pageConfig.social.twitterImage if pageConfig.social.twitterImage else 
+                    assetsURL + '/favicons/twitter.png' %}
                 <!-- Twitter -->
                 <meta name="twitter:card" content="summary">
                 <meta name="twitter:site" content="{{ pageConfig.social.twitterSite }}">
@@ -132,37 +137,37 @@
                     {% block preHeader %}{% endblock %}
                     {% block skipLink %}
                         {{
-                            onsSkipToContent({
-                                "url": "#main-content",
-                                "text": "Skip to main content"
-                            })
-                        }}
+                        onsSkipToContent({
+                            "url": "#main-content",
+                            "text": "Skip to main content"
+                        })
+                    }}
                     {% endblock %}
                     {% block header %}
                         {{
-                            onsHeader({
-                                "wide": pageConfig.wide,
-                                "fullWidth": pageConfig.fullWidth,
-                                "language": pageConfig.header.language,
-                                "button": pageConfig.header.signoutButton,
-                                "toggleNavigationButton": pageConfig.header.toggleNavigationButton,
-                                "navigation": pageConfig.header.navigation,
-                                "siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest,
-                                "browserBanner": pageConfig.header.browserBanner,
-                                "phase": pageConfig.header.phase,
-                                "assetsURL": assetsURL,
-                                "serviceLinks": pageConfig.header.serviceLinks,
-                                "variants": pageConfig.header.variants,
-                                "classes": pageConfig.header.classes,
-                                "mastheadLogo": pageConfig.header.mastheadLogo,
-                                "mastheadLogoUrl": pageConfig.header.mastheadLogoUrl,
-                                "titleUrl": pageConfig.header.titleUrl,
-                                "title": pageConfig.header.title | default(pageConfig.title),
-                                "description": pageConfig.header.description,
-                                "titleAsH1": pageConfig.header.titleAsH1,
-                                "titleLogo": pageConfig.header.titleLogo
-                            })
-                        }}
+                        onsHeader({
+                            "wide": pageConfig.wide,
+                            "fullWidth": pageConfig.fullWidth,
+                            "language": pageConfig.header.language,
+                            "button": pageConfig.header.signoutButton,
+                            "toggleNavigationButton": pageConfig.header.toggleNavigationButton,
+                            "navigation": pageConfig.header.navigation,
+                            "siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest,
+                            "browserBanner": pageConfig.header.browserBanner,
+                            "phase": pageConfig.header.phase,
+                            "assetsURL": assetsURL,
+                            "serviceLinks": pageConfig.header.serviceLinks,
+                            "variants": pageConfig.header.variants,
+                            "classes": pageConfig.header.classes,
+                            "mastheadLogo": pageConfig.header.mastheadLogo,
+                            "mastheadLogoUrl": pageConfig.header.mastheadLogoUrl,
+                            "titleUrl": pageConfig.header.titleUrl,
+                            "title": pageConfig.header.title | default(pageConfig.title),
+                            "description": pageConfig.header.description,
+                            "titleAsH1": pageConfig.header.titleAsH1,
+                            "titleLogo": pageConfig.header.titleLogo
+                        })
+                    }}
                     {% endblock %}
                     {% block pageContent %}
                         <div class="ons-page__container ons-container{{ containerClasses }}">
@@ -170,12 +175,12 @@
                                 {% if pageConfig.breadcrumbs %}
                                     {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
                                     {{
-                                        onsBreadcrumbs({
-                                            "id": pageConfig.breadcrumbs.id,
-                                            "ariaLabel": pageConfig.breadcrumbs.ariaLabel,
-                                            "itemsList": pageConfig.breadcrumbs.itemsList
-                                        })
-                                    }}
+                                    onsBreadcrumbs({
+                                        "id": pageConfig.breadcrumbs.id,
+                                        "ariaLabel": pageConfig.breadcrumbs.ariaLabel,
+                                        "itemsList": pageConfig.breadcrumbs.itemsList
+                                    })
+                                }}
                                 {% endif %}
                             {% endblock %}
                             <div class="ons-grid">
@@ -243,4 +248,4 @@
 
         {% block scripts %}{% endblock %}
     </body>
-</html>
+</html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "65.2.1",
+  "version": "65.2.3",
   "main": "index.js",
   "license": "MIT",
   "author": {
@@ -97,9 +97,10 @@
     "gulp-terser": "^2.0.1",
     "http-server": "^0.12.3",
     "husky": "^8.0.3",
-    "jest": "^27.5.1",
-    "jest-axe": "^6.0.0",
-    "jest-puppeteer": "^6.1.0",
+    "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",
     "lint-staged": "^8.1.0",
@@ -113,7 +114,7 @@
     "postcss-url": "^8.0.0",
     "prepend-file": "^1.3.1",
     "prettier": "^3.0.0",
-    "puppeteer": "^13.5.1",
+    "puppeteer": "^21.0.2",
     "remark-cli": "^11.0.0",
     "remark-lint": "^9.1.2",
     "remark-preset-lint-recommended": "^6.1.3",