@ons/design-system 53.0.1 → 53.0.4

package/components/footer/_macro.njk

@@ -38,8 +38,6 @@
                     "altTextId": 'poweredby-alt'
                 })
             }}
-        {% else %}
-            {{ onsLogo | safe }}
         {% endif %}
     {% endset %}
 
@@ -177,9 +175,15 @@
                                 </div>
                             {% endif %}
 
-                            {% if not params.poweredBy.partnership %}
+                            {% if params.poweredBy is defined and params.poweredBy %}
+                                {% if not params.poweredBy.partnership %}
+                                    <div class="ons-footer__poweredby ons-u-mb-m">
+                                        {{ poweredByLogo | safe }}
+                                    </div>
+                                {% endif %}
+                            {% else %}
                                 <div class="ons-footer__poweredby ons-u-mb-m">
-                                    {{ poweredByLogo | safe }}
+                                    {{ onsLogo | safe }}
                                 </div>
                             {% endif %}
                         </div>

package/components/navigation/_macro.njk

@@ -42,7 +42,7 @@
                 <ul class="ons-navigation__list">
                     {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
-                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -55,7 +55,7 @@
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
-                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -81,14 +81,14 @@
                         </li>
                         {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                             <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
-                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id is defined and item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
                                 {% if item.sections %}
                                     {% for section in item.sections %}
                                         {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
                                         <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
                                             {% for child in section.children %}
                                                 <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.subNavigation.currentPath) or (child.url != (params.navigation.subNavigation.sitsiteBasePatheBasePath | default('/')) and child.url in params.navigation.subNavigation.currentPath) }}">
-                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
+                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel is defined and child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
                                                 </li>
                                             {% endfor %}
                                         </ul>

package/components/navigation/_macro.spec.js

@@ -14,12 +14,14 @@ const PARAMS = {
   itemsList: [
     {
       title: 'Main nav item 1',
+      ariaLabel: 'Main nav ariaLabel 1',
       url: '#0',
       classes: 'custom-class-main-item-1',
       id: 'main-item-1',
     },
     {
       title: 'Main nav item 2',
+      ariaLabel: 'Main nav ariaLabel 2',
       url: '#1',
       classes: 'custom-class-main-item-2',
       id: 'main-item-2',
@@ -34,12 +36,14 @@ const PARAMS = {
     itemsList: [
       {
         title: 'Sub nav item 1',
+        ariaLabel: 'Sub nav ariaLabel 1',
         url: '#0',
         classes: 'custom-class-sub-item-1',
         id: 'sub-item-1',
       },
       {
         title: 'Sub nav item 2',
+        ariaLabel: 'Sub nav ariaLabel 2',
         url: '#1',
         classes: 'custom-class-sub-item-2',
         id: 'sub-item-2',
@@ -49,10 +53,12 @@ const PARAMS = {
             children: [
               {
                 title: 'Child item 1',
+                ariaLabel: 'Child item ariaLabel 1',
                 url: '#0',
               },
               {
                 title: 'Child item 2',
+                ariaLabel: 'Child item ariaLabel 2',
                 url: '#1',
               },
             ],
@@ -157,6 +163,13 @@ describe('macro: navigation', () => {
       expect(values).toEqual(['Main nav item 1', 'Main nav item 2']);
     });
 
+    it('has the correct aria-label for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
+
+      const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('aria-label'));
+      expect(values).toEqual(['Main nav ariaLabel 1', 'Main nav ariaLabel 2']);
+    });
+
     it('has the provided custom class for each list item', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
@@ -230,6 +243,13 @@ describe('macro: navigation', () => {
       expect(values).toEqual(['Sub nav item 1', 'Sub nav item 2']);
     });
 
+    it('has the correct aria-label for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
+
+      const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('aria-label'));
+      expect(values).toEqual(['Sub nav ariaLabel 1', 'Sub nav ariaLabel 2']);
+    });
+
     it('has the provided custom class for each list item', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 

package/favicons/ids/cy/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png"/>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <square310x310logo src="/mstile-310x310.png"/>
+            <wide310x150logo src="/mstile-310x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

package/favicons/ids/cy/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Integrated Data Service",
+  "short_name": "IDS",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "content_security_policy": "script-src 'self' https://cdn.ons.gov.uk; object-src 'self' https://cdn.ons.gov.uk;",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

package/favicons/ids/cy/safari-pinned-tab.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3455 3371 c-16 -10 -251 -241 -522 -512 -431 -433 -492 -499 -498
+-531 -26 -143 110 -258 236 -200 33 15 172 149 536 513 435 437 492 498 499
+532 16 89 -16 161 -86 197 -51 26 -125 26 -165 1z"/>
+<path d="M3681 2996 c-43 -24 -1003 -989 -1017 -1023 -20 -46 -17 -92 9 -143
+26 -53 59 -78 116 -91 94 -21 86 -28 549 434 l422 421 423 -421 c462 -462 454
+-455 548 -434 57 13 90 38 117 91 24 49 28 100 9 143 -14 33 -980 1002 -1019
+1023 -34 18 -125 18 -157 0z"/>
+<path d="M1040 2744 c-39 -16 -741 -710 -766 -756 -20 -39 -18 -121 5 -167 23
+-45 53 -66 115 -83 90 -24 99 -18 424 305 l292 292 288 -287 c341 -342 354
+-350 469 -292 40 19 57 35 72 68 23 46 27 109 10 153 -15 42 -715 741 -764
+764 -48 22 -98 23 -145 3z"/>
+<path d="M1656 2750 c-16 -5 -42 -22 -59 -37 -64 -61 -76 -150 -28 -224 16
+-24 186 -200 377 -390 269 -267 358 -349 387 -359 69 -22 153 8 200 72 30 41
+34 124 9 174 -30 56 -717 739 -764 759 -41 16 -77 18 -122 5z"/>
+</g>
+</svg>

package/favicons/ids/cy/site.webmanifest

@@ -0,0 +1,54 @@
+{
+    "name": "IDS",
+    "short_name": "IDS",
+    "icons": [
+        {
+            "src": "/android-chrome-36x36.png",
+            "sizes": "36x36",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-48x48.png",
+            "sizes": "48x48",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-72x72.png",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-96x96.png",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

package/favicons/ids/en/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png"/>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <square310x310logo src="/mstile-310x310.png"/>
+            <wide310x150logo src="/mstile-310x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

package/favicons/ids/en/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Integrated Data Service",
+  "short_name": "IDS",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "content_security_policy": "script-src 'self' https://cdn.ons.gov.uk; object-src 'self' https://cdn.ons.gov.uk;",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

package/favicons/ids/en/safari-pinned-tab.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3455 3371 c-16 -10 -251 -241 -522 -512 -431 -433 -492 -499 -498
+-531 -26 -143 110 -258 236 -200 33 15 172 149 536 513 435 437 492 498 499
+532 16 89 -16 161 -86 197 -51 26 -125 26 -165 1z"/>
+<path d="M3681 2996 c-43 -24 -1003 -989 -1017 -1023 -20 -46 -17 -92 9 -143
+26 -53 59 -78 116 -91 94 -21 86 -28 549 434 l422 421 423 -421 c462 -462 454
+-455 548 -434 57 13 90 38 117 91 24 49 28 100 9 143 -14 33 -980 1002 -1019
+1023 -34 18 -125 18 -157 0z"/>
+<path d="M1040 2744 c-39 -16 -741 -710 -766 -756 -20 -39 -18 -121 5 -167 23
+-45 53 -66 115 -83 90 -24 99 -18 424 305 l292 292 288 -287 c341 -342 354
+-350 469 -292 40 19 57 35 72 68 23 46 27 109 10 153 -15 42 -715 741 -764
+764 -48 22 -98 23 -145 3z"/>
+<path d="M1656 2750 c-16 -5 -42 -22 -59 -37 -64 -61 -76 -150 -28 -224 16
+-24 186 -200 377 -390 269 -267 358 -349 387 -359 69 -22 153 8 200 72 30 41
+34 124 9 174 -30 56 -717 739 -764 759 -41 16 -77 18 -122 5z"/>
+</g>
+</svg>

package/favicons/ids/en/site.webmanifest

@@ -0,0 +1,54 @@
+{
+    "name": "IDS",
+    "short_name": "IDS",
+    "icons": [
+        {
+            "src": "/android-chrome-36x36.png",
+            "sizes": "36x36",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-48x48.png",
+            "sizes": "48x48",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-72x72.png",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-96x96.png",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

package/js/cookies-settings.js

@@ -33,12 +33,14 @@ export default class CookiesSettings {
       let radioButton;
 
       if (currentConsentCookieJSON[cookieType]) {
-        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=on]');
+        radioButton = document.querySelector(`input[name=cookies-${cookieType}][value=on]`);
       } else {
-        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=off]');
+        radioButton = document.querySelector(`input[name=cookies-${cookieType}][value=off]`);
       }
 
-      radioButton.checked = true;
+      if (radioButton) {
+        radioButton.checked = true;
+      }
     }
   }
 

package/js/cookies-settings.spec.js

@@ -22,6 +22,20 @@ const EXAMPLE_COOKIES_SETTINGS_PAGE = `
   </div>
 `;
 
+const EXAMPLE_PART_COOKIES_SETTINGS_PAGE = `
+  <form data-module="cookie-settings">
+    <input type="radio" class="ons-js-radio" name="cookies-settings" value="on">
+    <input type="radio" class="ons-js-radio" name="cookies-settings" value="off">
+    <input type="radio" class="ons-js-radio" name="cookies-campaigns" value="on">
+    <input type="radio" class="ons-js-radio" name="cookies-campaigns" value="off">
+    <button id="submit-button" type="submit">Submit</button>
+  </form>
+
+  <div class="ons-cookies-confirmation-message ons-u-d-no">
+    <a class="ons-js-return-link" href="#0">Return to previous page</a>
+  </div>
+`;
+
 describe('script: cookies-settings', () => {
   beforeEach(async () => {
     const client = await page.target().createCDPSession();
@@ -43,7 +57,7 @@ describe('script: cookies-settings', () => {
     });
   });
 
-  it('sets all radio buttons to the default values', async () => {
+  it('sets all radio buttons to the default values of every `cookieType`', async () => {
     await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
     const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', node => node.checked);
@@ -55,6 +69,16 @@ describe('script: cookies-settings', () => {
     expect(cookiesCampaignsOffRadio).toBe(true);
   });
 
+  it('sets the provided radio buttons to the default values of every matched `cookieType`', async () => {
+    await setTestPage('/test', EXAMPLE_PART_COOKIES_SETTINGS_PAGE);
+
+    const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', node => node.checked);
+    const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', node => node.checked);
+
+    expect(cookiesSettingsOffRadio).toBe(true);
+    expect(cookiesCampaignsOffRadio).toBe(true);
+  });
+
   it('sets all radios to on from off when accepting cookies', async () => {
     await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 

package/layout/_template.njk

@@ -149,6 +149,7 @@
                             onsHeader({
                                 "title": pageConfig.header.title | default(pageConfig.title),
                                 "classes": pageConfig.header.classes,
+                                "variants": pageConfig.header.variants,
                                 "wide": pageConfig.wide,
                                 "language": pageConfig.language,
                                 "button": pageConfig.signoutButton,
@@ -164,8 +165,8 @@
                                 "orgLogoHref": pageConfig.header.orgLogoHref,
                                 "titleLogo": pageConfig.header.titleLogo,
                                 "titleLogoClasses": pageConfig.header.titleLogoClasses,
-                                "titleMobileLogo": pageConfig.header.titleMobileLogo,
-                                "titleMobileLogoClasses": pageConfig.header.titleMobileLogoClasses,
+                                "titleLogoMobile": pageConfig.header.titleLogoMobile,
+                                "titleLogoMobileClasses": pageConfig.header.titleLogoMobileClasses,
                                 "titleLogoAlt": pageConfig.header.titleLogoAlt,
                                 "titleLogoHref": pageConfig.header.titleLogoHref,
                                 "customHeaderLogo": pageConfig.header.customHeaderLogo

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "53.0.1",
+  "version": "53.0.4",
   "main": "index.js",
   "license": "MIT",
   "author": {