@ons/design-system 68.0.0 → 68.0.2

package/components/back-to-top/example-full-page-back-to-top.njk

@@ -0,0 +1,192 @@
+---
+title: "Example: Long Page"
+layout: ~
+---
+{% extends "layout/_template.njk" %}
+{% from "components/list/_macro.njk" import onsList %}
+{% from "components/back-to-top/_macro.njk" import onsBackToTop %}
+{% from "components/related-content/_macro.njk" import onsRelatedContent %}
+{% from "components/content-pagination/_macro.njk" import onsContentPagination %}
+
+{% set pageConfig = {
+    "header": {
+        "title": 'Service name'
+    },
+    "breadcrumbs": {
+        "ariaLabel": 'Breadcrumbs',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Home'
+            },
+            {
+                "url": '#0',
+                "text": 'News'
+            }
+        ]
+    },
+    "footer": {}
+} %}
+
+
+
+{% block main %}
+
+    <h1 class="ons-u-fs-xxl">
+        <span class="ons-u-fs-m ons-u-db ons-u-mb-xs ons-u-lighter">Press releases</span>
+        <span class="ons-u-vh">: </span>
+        <span class="ons-u-fs-xxl ons-u-db">ONS launches Integrated Data Service to boost government collaboration on data sharing</span>
+    </h1>
+
+    <div class="ons-grid ons-grid--column@xs@s">
+
+        <div class="ons-grid__col ons-col-7@m">
+
+            <div class="ons-page__body ons-u-mt-m">
+
+                <p>In a groundbreaking move, the Office for National Statistics (ONS) has embarked on a transformative journey with the introduction of the Integrated Data Service (IDS). This sophisticated, cloud-based platform is meticulously crafted to empower analysts and researchers, providing them with unprecedented access to a diverse array of data sources. The overarching goal of the IDS is nothing short of unlocking the boundless potential inherent in data, thereby contributing significantly to evidence-based policymaking while fostering a culture of collaboration across various government departments.</p>
+
+                <p>The inaugural phase of the IDS has now been unveiled through the exclusive introduction of a private beta version. This exclusive access is extended to a carefully curated group of government analysts, offering them a unique opportunity to delve into the intricacies of comparing and combining data held not only by the ONS but also by other government departments. The emphasis here is on fostering a collaborative ecosystem that transcends traditional boundaries, a move poised to play a pivotal role in maximizing the utility of data for the collective benefit of the government's policy formulation and decision-making processes.</p>
+
+                <p>Launching next spring, a public beta will open the door for accredited researchers outside of government to use the new service.</p>
+
+                <p>The three projects selected for the private beta and will focus on some of the government’s top priorities:</p>
+
+                {{
+                    onsList({
+                        "itemsList": [
+                            {
+                                "text": '<p>wage growth - an ONS and HM Treasury collaboration will investigate in detail how wages change across the country, helping inform the government’s “Levelling Up” policy agenda</p>'
+                            },
+                            {
+                                "text": '<p>energy efficiency - working with the Valuation Office Agency to provide better information on the energy efficiency of homes around the country as part of wider work to help measure the UK’s progress towards reaching net zero by 2050</p>'
+                            },
+                            {
+                                "text": '<p>regional issues - a collaboration with Department for Business, Energy, and Industrial Strategy to analyse how text from local news sources across the UK can be used to understand concerns of communities around the country</p>'
+                            }
+                        ]
+                    })
+                }}
+
+                <p>DCMS Minister for State Julia Lopez said: "The Integrated Data Service is a crucial part of our National Data Strategy and will make it easier and quicker for policy makers to access robust evidence for making the decisions that can improve the lives of people across the country.</p>
+
+                <p>"Unlocking the power of data will boost the economy, create jobs and help us build back better from the pandemic.” </p><p>Joanna Davinson, Executive Director at the Central Digital and Data Office, said: “The Integrated Data Service will provide the public sector with secure access to high-quality data for better research and analysis.</p>
+
+                <p>“This is aligned to our vision of having increased availability of data for decision-makers to ensure more data driven policies. In this way, we can enable transformation of the Government’s use of data and support the delivery of efficient public services for users.”</p>
+
+                <p>Alison Pritchard, Deputy National Statistician for Data Capability, said: "The Service demonstrates how data held, managed and accessed in a trusted and secure environment can benefit us all by providing essential insight on social and economic factors. I am particularly looking forward to engaging widely to explain how we are protecting the data appropriately and making sure it is put to use for the public good."</p>
+                
+                
+
+                <div class="ons-u-mt-l ons-u-mt-xl@m">
+                    {{
+                        onsContentPagination({
+                            "ariaLabel": 'Article pagination',
+                            "contentPaginationItems": [
+                                {
+                                    "rel": 'prev',
+                                    "text": 'Previous',
+                                    "url": '#0',
+                                    "label": 'Office for National Statistics win top Royal Statistical Society award'
+                                },
+                                {
+                                    "rel": 'next',
+                                    "text": 'Next',
+                                    "url": '#0',
+                                    "label": 'Five Office for National Statistics names in New Year’s Honours'
+                                }
+                            ]
+                        })
+                    }}
+
+                    {{ onsBackToTop() }}
+                    
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="ons-grid__col ons-col-4@m ons-push-1@m">
+
+            {% call onsRelatedContent({
+                "ariaLabel": 'Related content',
+                "rows": [
+                    {
+                        "id": 'published-date',
+                        "title": 'Published on',
+                        "itemsList": [
+                            {
+                                "text": '<time datetime="2021-08-01">1 August 2021</time>'
+                            }
+                        ]
+                    },
+                    {
+                        "id": 'published-in',
+                        "title": 'Published in',
+                        "classes": 'ons-u-mb-no',
+                        "variants": 'bare',
+                        "itemsList": [
+                            {
+                                "text": 'Press releases',
+                                "url": '#0'
+                            }
+                        ]
+                    },
+                    {
+                        "id": 'tags',
+                        "title": 'Tags',
+                        "itemsList": [
+                            {
+                                "text": 'Integrated data',
+                                "url": '#0'
+                            },
+                            {
+                                "text": 'Census 2021',
+                                "url": '#0'
+                            },
+                            {
+                                "text": 'Survey',
+                                "url": '#0'
+                            }
+                        ]
+                    },
+                    {
+                        "id": 'share-this-article',
+                        "title": 'Share this article',
+                        "variants": 'social',
+                        "iconPosition": 'before',
+                        "iconSize": 'xxl',
+                        "itemsList": [
+                            {
+                                "url": '#0',
+                                "text": 'Facebook',
+                                "iconType": 'facebook',
+                                "rel": 'noreferrer external'
+                            },
+                            {
+                                "url": '#0',
+                                "text": 'Twitter',
+                                "iconType": 'twitter',
+                                "rel": 'noreferrer external'
+                            }
+                        ]
+                    }
+                ]
+            }) %}
+
+            {% endcall %}
+
+        </div>
+
+    </div>
+
+{% endblock %}
+
+
+
+    
+    
+
+
+

package/components/browser-banner/_macro.spec.js

@@ -18,18 +18,14 @@ describe('macro: browser-banner', () => {
   it('has the default `bannerLeadingText`', () => {
     const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
 
-    const bannerLeadingText = $('.ons-browser-banner__lead')
-      .text()
-      .trim();
+    const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
     expect(bannerLeadingText).toBe('This website no longer supports your browser.');
   });
 
   it('has the default `bannerCTA`', () => {
     const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
 
-    const bannerCtaHtml = $('.ons-browser-banner__cta')
-      .text()
-      .trim();
+    const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
     expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
   });
 
@@ -91,18 +87,14 @@ describe('mode: Welsh language', () => {
       }),
     );
 
-    const bannerLeadingText = $('.ons-browser-banner__lead')
-      .text()
-      .trim();
+    const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
     expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
   });
 
   it('has the welsh version of default `bannerCTA`', () => {
     const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
 
-    const bannerCtaHtml = $('.ons-browser-banner__cta')
-      .text()
-      .trim();
+    const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
     expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
   });
 

package/components/button/_macro.njk

@@ -93,12 +93,12 @@
                 {% endif -%}
                 <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
                 {%- if iconPosition == "after" %}
-                {{-
-                    onsIcon({
-                        "iconType": iconType,
-                        "classes": 'ons-u-ml-xs'
-                    })
-                -}}
+                    {{-
+                        onsIcon({
+                            "iconType": iconType,
+                            "classes": 'ons-u-ml-xs'
+                        })
+                    -}}
                 {% endif -%}
             {% elif iconPosition == "only" -%}
                 {{-

package/components/button/_macro.spec.js

@@ -212,11 +212,7 @@ describe('macro: button', () => {
       }),
     );
 
-    expect(
-      $('.ons-btn__text + .ons-icon')
-        .prev()
-        .text(),
-    ).toBe('Click me!');
+    expect($('.ons-btn__text + .ons-icon').prev().text()).toBe('Click me!');
   });
 
   describe('mode: standard', () => {

package/components/button/button.js

@@ -40,7 +40,7 @@ export default class SubmitButton {
       timerButtonEl.setAttribute('disabled', true);
     }
     setTimeout(
-      timerButtonEl => {
+      (timerButtonEl) => {
         timerButtonEl.removeAttribute('disabled');
         i = 0;
       },
@@ -49,18 +49,17 @@ export default class SubmitButton {
     );
   }
 
-  linkButtonDown(e){
-    if (e.keyCode == 32 || e.keyCode == 13){
-      this.button.classList.add("active");
+  linkButtonDown(e) {
+    if (e.keyCode == 32 || e.keyCode == 13) {
+      this.button.classList.add('active');
     }
   }
-  
-  linkButtonUp(e){
+
+  linkButtonUp(e) {
     if (e.keyCode == 32 || e.keyCode == 13) {
-      this.button.classList.remove("active"); 
+      this.button.classList.remove('active');
       e.preventDefault();
       this.button.click();
     }
   }
-
 }

package/components/button/button.spec.js

@@ -26,16 +26,14 @@ describe('script: button', () => {
         '/test',
         `
         <form>
-          ${renderComponent('button', {
-            id: 'test-button',
-          })}
+          ${renderComponent('button', { id: 'test-button' })}
         </form>
-      `,
+        `,
       );
 
       await page.evaluate(() => {
         window.__COUNTER = 0;
-        document.querySelector('form').addEventListener('submit', event => {
+        document.querySelector('form').addEventListener('submit', (event) => {
           window.__COUNTER++;
           event.preventDefault();
         });
@@ -101,13 +99,9 @@ describe('script: button', () => {
         '/test',
         `
         <form onsubmit="return false;">
-          ${renderComponent('button', {
-            id: 'test-button',
-            text: 'Submit',
-            variants: 'loader',
-          })}
+          ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
         </form>
-      `,
+        `,
       );
 
       await page.click('#test-button');
@@ -121,13 +115,9 @@ describe('script: button', () => {
         '/test',
         `
         <form>
-          ${renderComponent('button', {
-            id: 'test-button',
-            text: 'Submit',
-            variants: 'loader',
-          })}
+          ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
         </form>
-      `,
+        `,
       );
 
       const hasIsLoadingClass = await page.evaluate(() => document.querySelector('#test-button').classList.contains('ons-is-loading'));
@@ -139,13 +129,9 @@ describe('script: button', () => {
         '/test',
         `
         <form onsubmit="return false;">
-          ${renderComponent('button', {
-            id: 'test-button',
-            text: 'Submit',
-            variants: 'loader',
-          })}
+          ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
         </form>
-      `,
+        `,
       );
 
       await page.click('#test-button');
@@ -168,7 +154,7 @@ describe('script: button', () => {
 
       await page.evaluate(() => {
         window.__COUNTER = 0;
-        document.querySelector('#test-button').addEventListener('click', event => {
+        document.querySelector('#test-button').addEventListener('click', (event) => {
           window.__COUNTER++;
           event.preventDefault();
         });
@@ -193,7 +179,7 @@ describe('script: button', () => {
 
       await page.evaluate(() => {
         window.__COUNTER = 0;
-        document.querySelector('#test-button').addEventListener('click', event => {
+        document.querySelector('#test-button').addEventListener('click', (event) => {
           window.__COUNTER++;
           event.preventDefault();
         });
@@ -211,18 +197,14 @@ describe('script: button', () => {
         '/test',
         `
         <form>
-          ${renderComponent('button', {
-            id: 'test-button',
-            variants: 'timer',
-            text: 'Submit',
-          })}
+          ${renderComponent('button', { id: 'test-button', variants: 'timer', text: 'Submit' })}
         </form>
-      `,
+        `,
       );
 
       await page.evaluate(() => {
         window.__COUNTER = 0;
-        document.querySelector('form').addEventListener('submit', event => {
+        document.querySelector('form').addEventListener('submit', (event) => {
           window.__COUNTER++;
           event.preventDefault();
         });
@@ -240,18 +222,14 @@ describe('script: button', () => {
         '/test',
         `
         <form>
-          ${renderComponent('button', {
-            id: 'test-button',
-            variants: 'timer',
-            text: 'Submit',
-          })}
+          ${renderComponent('button', { id: 'test-button', variants: 'timer', text: 'Submit' })}
         </form>
-      `,
+        `,
       );
 
       await page.evaluate(() => {
         window.__COUNTER = 0;
-        document.querySelector('form').addEventListener('submit', event => {
+        document.querySelector('form').addEventListener('submit', (event) => {
           window.__COUNTER++;
           event.preventDefault();
         });

package/components/call-to-action/_macro.spec.js

@@ -25,18 +25,14 @@ describe('macro: call-to-action', () => {
   it('has the provided `headingText`', () => {
     const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
 
-    const headingText = $('.ons-call-to-action__heading')
-      .text()
-      .trim();
+    const headingText = $('.ons-call-to-action__heading').text().trim();
     expect(headingText).toBe('Call to action heading.');
   });
 
   it('has the provided `paragraphText`', () => {
     const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
 
-    const paragraphText = $('.ons-call-to-action__text')
-      .text()
-      .trim();
+    const paragraphText = $('.ons-call-to-action__text').text().trim();
     expect(paragraphText).toBe('Descriptive text about call to action');
   });
 

package/components/card/_macro.njk

@@ -1,33 +1,33 @@
 {%- macro onsCard(params) -%}
 
-  {% from "components/list/_macro.njk" import onsList %}
+    {% set headingLevel = params.headingLevel | default(2) %}
 
-  {% set titleSize = params.titleSize | default('2') %}
+    <div class="ons-card">
+        <a href="{{ params.url }}" class="ons-card__link">
+            {%- if params.image -%}
+                {% if params.image.smallSrc %}
+                    <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+                {% elif params.image == true or params.image.placeholderURL %}
+                    <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+                {% endif %}
+            {%- endif -%}
+            <h{{ headingLevel }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
+                {{ params.title }}
+            </h{{ headingLevel }}>
+        </a>
 
-  <div class="ons-card">
-    <a href="{{ params.url }}" class="ons-card__link">
-      {%- if params.image -%}
-        {% if params.image.smallSrc %}
-          <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-        {% elif params.image == true or params.image.placeholderURL %}
-          <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
-        {% endif %}
-      {%- endif -%}
-      <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
-          {{ params.title }}
-      </h{{ titleSize }}>
-    </a>
+        <p id="{{ params.textId }}">{{ params.text }}</p>
 
-    <p id="{{ params.textId }}">{{ params.text }}</p>
+        {% if params.itemsList -%}
+            {% from "components/list/_macro.njk" import onsList %}
+            {{
+                onsList({
+                    "variants": 'dashed',
+                    "itemsList": params.itemsList
+                })
+            }}
+        {% endif %}
 
-    {% if params.itemsList -%}
-      {{
-          onsList({
-              "variants": 'dashed',
-              "itemsList": params.itemsList
-          })
-      }}
-    {% endif %}
+    </div>
 
-  </div>
 {%- endmacro -%}

package/components/card/_macro.spec.js

@@ -50,39 +50,27 @@ describe('macro: card', () => {
     it('has the provided `title` text', () => {
       const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
 
-      expect(
-        $('.ons-card__title')
-          .text()
-          .trim(),
-      ).toBe('Example card title');
+      expect($('.ons-card__title').text().trim()).toBe('Example card title');
     });
 
     it.each([
       [1, 'h1'],
       [4, 'h4'],
-    ])('has the correct element type for the provided `titleSize` (%i -> %s)', (titleSize, expectedTitleTag) => {
+    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
       const $ = cheerio.load(
         renderComponent('card', {
           ...EXAMPLE_CARD_WITHOUT_IMAGE,
-          titleSize,
+          headingLevel,
         }),
       );
 
-      expect(
-        $(`${expectedTitleTag}.ons-card__title`)
-          .text()
-          .trim(),
-      ).toBe('Example card title');
+      expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
     });
 
     it('has the provided `text` accessible via the `textId` identifier', () => {
       const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
 
-      expect(
-        $('#example-text-id')
-          .text()
-          .trim(),
-      ).toBe('Example card text.');
+      expect($('#example-text-id').text().trim()).toBe('Example card text.');
     });
 
     it('renders the provided `itemsList` using the `list` component', () => {
@@ -123,29 +111,21 @@ describe('macro: card', () => {
     it('has the provided `title` text', () => {
       const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
 
-      expect(
-        $('.ons-card__title')
-          .text()
-          .trim(),
-      ).toBe('Example card title');
+      expect($('.ons-card__title').text().trim()).toBe('Example card title');
     });
 
     it.each([
       [1, 'h1'],
       [4, 'h4'],
-    ])('has the correct element type for the provided `titleSize` (%i -> %s)', (titleSize, expectedTitleTag) => {
+    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
       const $ = cheerio.load(
         renderComponent('card', {
           ...EXAMPLE_CARD_WITH_IMAGE,
-          titleSize,
+          headingLevel,
         }),
       );
 
-      expect(
-        $(`${expectedTitleTag}.ons-card__title`)
-          .text()
-          .trim(),
-      ).toBe('Example card title');
+      expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
     });
 
     it('has the provided `text`', () => {
@@ -155,11 +135,7 @@ describe('macro: card', () => {
         }),
       );
 
-      expect(
-        $('#example-text-id')
-          .text()
-          .trim(),
-      ).toBe('Example card text.');
+      expect($('#example-text-id').text().trim()).toBe('Example card text.');
     });
 
     it('outputs a hyperlink with the provided `url`', () => {

package/components/char-check-limit/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsCharLimit(params) %}
-    {% if params.type == "check" %}
+    {% if params.variant == "check" %}
         {% set content = caller() %}
         <span class="ons-js-char-check-input">
             {{ content | safe }}

package/components/char-check-limit/_macro.spec.js

@@ -27,7 +27,7 @@ describe('macro: char-check-limit', () => {
         'char-check-limit',
         {
           ...EXAMPLE_CHAR_CHECK_LIMIT,
-          type: 'check',
+          variant: 'check',
         },
         ['<p>Test content.</p>'],
       ),
@@ -58,16 +58,12 @@ describe('macro: char-check-limit', () => {
         'char-check-limit',
         {
           ...EXAMPLE_CHAR_CHECK_LIMIT,
-          type: 'check',
+          variant: 'check',
         },
         ['<p>Test content.</p>'],
       ),
     );
 
-    expect(
-      $('.ons-js-char-check-input')
-        .html()
-        .trim(),
-    ).toBe('<p>Test content.</p>');
+    expect($('.ons-js-char-check-input').html().trim()).toBe('<p>Test content.</p>');
   });
 });