@ons/design-system 73.0.3 → 73.2.0

package/components/header/example-header-basic-with-search-and-language-DEPRECATED.njk

@@ -0,0 +1,207 @@
+---
+'fullWidth': true
+---
+
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "variants": 'basic',
+        "language": {
+            "languages": [
+                {
+                    "url": '#0',
+                    "isoCode": 'en',
+                    "text": 'English',
+                    "current": false
+                },
+                {
+                    "url": '#0',
+                    "isoCode": 'cy',
+                    "text": 'Cymraeg',
+                    "current": true
+                }
+            ]
+        },
+        "menuLinks": {
+            "id": "menu-links",
+            "keyLinks": [
+                {
+                    'heading': 'Taking part in a survey?',
+                    'description': 'It’s never been more important.'
+                },
+                {
+                    'heading': 'Release calendar',
+                    'description': 'View our latest and upcoming releases.'
+                },
+                {
+                    'heading': 'Explore local statistics',
+                    'url': '#0',
+                    'description': 'Explore statistics across the UK.'
+                }
+            ],
+            "columns": [
+                {
+                    "groups": [
+                        {
+                            "heading": "People, population and community",
+                            "groupItems": [
+                                {
+                                    "text": "Armed forces community"
+                                },
+                                {
+                                    "text": "Births, deaths and marriages"
+                                },
+                                {
+                                    "text": "Crime and justice"
+                                },
+                                {
+                                    "text": "Cultural identity"
+                                },
+                                {
+                                    "text": "Education and childcare"
+                                },
+                                {
+                                    "text": "Elections"
+                                },
+                                {
+                                    "text": "Health and social care"
+                                },
+                                {
+                                    "text": "Household characteristics"
+                                },
+                                {
+                                    "text": "Housing"
+                                },
+                                {
+                                    "text": "Leisure and tourism"
+                                },
+                                {
+                                    "text": "Personal and household finances"
+                                },
+                                {
+                                    "text": "Population and migration"
+                                },
+                                {
+                                    "text": "Well-being"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "groups": [
+                        {
+                            "heading": "Business, industry and trade",
+                            "groupItems": [
+                                {
+                                    "text": "Business"
+                                },
+                                {
+                                    "text": "Changes to business"
+                                },
+                                {
+                                    "text": "Construction industry"
+                                },
+                                {
+                                    "text": "International trade"
+                                },
+                                {
+                                    "text": "IT and internet industry"
+                                },
+                                {
+                                    "text": "Manufacturing and production industry"
+                                },
+                                {
+                                    "text": "Retail industry",
+                                    "url": "#0"
+                                },
+                                {
+                                    "text": "Tourism industry"
+                                }
+                            ]
+                        },
+                        {
+                            "heading": "Employment and labour market",
+                            "url": "#0",
+                            "groupItems":
+                            [
+                                {
+                                    "text": "People in work"
+                                },
+                                {
+                                    "text": "People not in work"
+                                }
+                            ]
+
+                        }
+                    ]
+                },
+                {
+                    "groups": [
+                        {
+                            "heading": "Economy",
+                            "groupItems": [
+                                {
+                                    "text": "Economic output and productivity"
+                                },
+                                {
+                                    "text": "Government, public sector and taxes"
+                                },
+                                {
+                                    "text": "Gross Value Added (GVA)"
+                                },
+                                {
+                                    "text": "Investments, pensions and trusts"
+                                },
+                                {
+                                    "text": "Regional accounts"
+                                },
+                                {
+                                    "text": "Environmental accounts"
+                                },
+                                {
+                                    "text": "Gross Domestic Product (GDP)"
+                                },
+                                {
+                                    "text": "Inflation and price indices"
+                                },
+                                {
+                                    "text": "National accounts"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        "searchLinks": {
+            "id": "search-links",
+            "searchNavigationAriaLabel": 'Nav Search',
+            "searchButtonAriaLabel": 'Toggle search',
+            'heading': 'Popular searches',
+            "itemsList": [
+                {
+                    "url": '#1',
+                    "text": 'Cost of living'
+                },
+                {
+                    "url": '#1',
+                    "text": 'Inflation'
+                },
+                {
+                    "url": '#3',
+                    "text": 'NHS waiting times'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Wellbeing'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Baby names'
+                }
+            ]
+        }
+    })
+}}

package/components/header/example-header-basic-with-search-and-language.njk

@@ -175,33 +175,42 @@
                 }
             ]
         },
-        "searchLinks": {
-            "id": "search-links",
-            "searchNavigationAriaLabel": 'Nav Search',
-            "searchButtonAriaLabel": 'Toggle search',
-            'heading': 'Popular searches',
-            "itemsList": [
-                {
-                    "url": '#1',
-                    "text": 'Cost of living'
-                },
-                {
-                    "url": '#1',
-                    "text": 'Inflation'
-                },
-                {
-                    "url": '#3',
-                    "text": 'NHS waiting times'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Wellbeing'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Baby names'
-                }
-            ]
+        "search": {
+            "id": "search",
+            "navAriaLabel": 'Nav Search',
+            "toggleAriaLabel": 'Toggle search',
+            "form": {
+                "action":  "https://www.ons.gov.uk/search" ,
+                "inputName": "q",
+                "inputLabel": "Search the ONS",
+                "buttonText": "Search",
+                "buttonAriaLabel": "Submit search"
+             },
+            "links": {
+                'heading': 'Popular searches',
+                "itemsList": [
+                    {
+                        "url": '#1',
+                        "text": 'Cost of living'
+                    },
+                    {
+                        "url": '#1',
+                        "text": 'Inflation'
+                    },
+                    {
+                        "url": '#3',
+                        "text": 'NHS waiting times'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Wellbeing'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Baby names'
+                    }
+                ]
+            }
         }
     })
 }}

package/components/header/example-header-basic-with-search-button.njk

@@ -159,33 +159,41 @@
                 }
             ]
         },
-        "searchLinks": {
-            "id": "search-links",
-            "searchNavigationAriaLabel": 'Nav Search',
-            "searchButtonAriaLabel": 'Toggle search',
-            'heading': 'Popular searches',
-            "itemsList": [
-                {
-                    "url": '#1',
-                    "text": 'Cost of living'
-                },
-                {
-                    "url": '#1',
-                    "text": 'Inflation'
-                },
-                {
-                    "url": '#3',
-                    "text": 'NHS waiting times'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Wellbeing'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Baby names'
-                }
-            ]
+        "search": {
+            "id": "search",
+            "navAriaLabel": 'Nav Search',
+            "toggleAriaLabel": 'Toggle search',
+            "form": {
+                "action":  "https://www.ons.gov.uk/search" ,
+                "inputName": "q",
+                "inputLabel": "Search the ONS",
+                "buttonText": "Search"
+             },
+            "links": {
+                'heading': 'Popular searches',
+                "itemsList": [
+                    {
+                        "url": '#1',
+                        "text": 'Cost of living'
+                    },
+                    {
+                        "url": '#1',
+                        "text": 'Inflation'
+                    },
+                    {
+                        "url": '#3',
+                        "text": 'NHS waiting times'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Wellbeing'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Baby names'
+                    }
+                ]
+            }
         }
     })
 }}

package/components/hero/_macro.njk

@@ -6,7 +6,7 @@
     {% set detailsColumns = params.detailsColumns | default ('8') %}
 
     <section
-        class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
+        class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% elif params.variants %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
     >
         {% if params.variants == 'navy-blue' %}
             <div class="ons-hero__circles" aria-hidden="true">
@@ -41,7 +41,10 @@
 
                         {% if params.text %}
                             <p class="ons-hero__text">{{ params.text | safe }}</p>
+                        {% elif params.richText %}
+                            <div class="ons-hero__richtext">{{ params.richText | safe }}</div>
                         {% endif %}
+
                     </div>
 
                     {% if params.variants == "grey" and params.officialStatisticsBadge == true %}

package/components/hero/_macro.spec.js

@@ -55,6 +55,32 @@ describe('macro: hero', () => {
         expect(title).toBe('Hero text');
     });
 
+    it('has expected `richText` when `text` is not provided', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                text: undefined,
+                richText: '<p>Hero <strong>rich</strong> text</p>',
+            }),
+        );
+
+        expect($('.ons-hero__text').length).toBe(0);
+        expect($('.ons-hero__richtext').length).toBe(1);
+        expect($('.ons-hero__richtext').html().trim()).toBe('<p>Hero <strong>rich</strong> text</p>');
+    });
+
+    it('does not render `richText` when `text` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                richText: '<p>Hero rich text</p>',
+            }),
+        );
+
+        expect($('.ons-hero__text').length).toBe(1);
+        expect($('.ons-hero__richtext').length).toBe(0);
+    });
+
     it('has expected `html`', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, html: '<span class="some-html">some html</span>' }));
 

package/components/icon/_macro.njk

@@ -241,10 +241,10 @@
                 d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z"
             />
         </svg>
-    {%- elif params.iconType == "twitter" -%}
+    {%- elif params.iconType == "x" -%}
         <svg
             class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}"
-            id="icon-twitter"
+            id="icon-x"
             viewBox="0 0 90.01 90.01"
             xmlns="http://www.w3.org/2000/svg"
             focusable="false"

package/components/icon/_macro.spec.js

@@ -22,7 +22,7 @@ describe('macro: icon', () => {
         'search',
         'sort-sprite',
         'facebook',
-        'twitter',
+        'x',
         'instagram',
         'linkedin',
         'loader',
@@ -80,7 +80,7 @@ describe('macro: icon', () => {
         'quote',
         'search',
         'facebook',
-        'twitter',
+        'x',
         'instagram',
         'linkedin',
     ])('icon type: %s', (iconType) => {

package/components/list/_list.scss

@@ -90,9 +90,6 @@
 
     &--p {
         padding: 0;
-        .ons-list__item {
-            margin: 0;
-        }
     }
 
     &--summary {

package/components/list/example-inline-list-with-social-icon-prefix.njk

@@ -7,8 +7,8 @@
         "itemsList": [
             {
                 "url": '#0',
-                "text": 'Twitter',
-                "iconType": 'twitter',
+                "text": 'X',
+                "iconType": 'x',
                 "attributes": {
                     "rel": 'noreferrer external'
                 }

package/components/panel/_panel.scss

@@ -107,6 +107,11 @@
         &.ons-icon-margin--s {
             padding-left: 1.7rem !important;
         }
+        .ons-list--p {
+            .ons-list__item {
+                margin: 0;
+            }
+        }
     }
 
     &__error {

package/components/radios/_macro.njk

@@ -18,7 +18,7 @@
         <div class="ons-radios__items">
             {% for radio in params.radios %}
                 {% if params.or and loop.revindex0 == 0 %}
-                    <span class="ons-radios__label ons-u-mt-s ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    <span class="ons-radios__label ons-u-mt-2xs ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
                 {% endif %}
                 <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
                     <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">

package/components/related-content/example-related-content-social-media.njk

@@ -12,8 +12,8 @@
                 "itemsList": [
                     {
                         "url": '#0',
-                        "text": 'Twitter',
-                        "iconType": 'twitter',
+                        "text": 'X',
+                        "iconType": 'x',
                         "rel": 'noreferrer external'
                     },
                     {

package/components/share-page/_macro.njk

@@ -21,13 +21,13 @@
             }
         %}
     {% endif %}
-    {% if params.twitter and params.twitter == true %}
+    {% if params.x and params.x == true %}
         {%
-            set twitter =
+            set x =
             {
-                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageUrl|urlencode,
-                "text": 'Twitter',
-                "iconType": 'twitter',
+                "url": 'https://x.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageUrl|urlencode,
+                "text": 'X',
+                "iconType": 'x',
                 "rel": 'noreferrer external',
                 "target": '_blank'
             }
@@ -38,7 +38,7 @@
             "variants": 'inline',
             "iconPosition": 'before',
             "iconSize": params.iconSize | default("2xl"),
-            "itemsList": [facebook, twitter]
+            "itemsList": [facebook, x]
         })
     }}
 {% endmacro %}

package/components/share-page/_macro.spec.js

@@ -10,7 +10,7 @@ const EXAMPLE_SHARE_PAGE = {
     pageTitle: 'An example page',
     pageUrl: 'https://example.com/an-example-page',
     facebook: true,
-    twitter: true,
+    x: true,
 };
 
 describe('macro: share-page', () => {
@@ -50,16 +50,16 @@ describe('macro: share-page', () => {
         expect(listsSpy.occurrences[0].iconSize).toBe('xl');
     });
 
-    describe('Share on Twitter', () => {
+    describe('Share on X', () => {
         it('has a link with the expected url', () => {
             const faker = templateFaker();
             const listsSpy = faker.spy('list');
 
             faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-            const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
-            expect(twitterItem.url).toBe(
-                'https://twitter.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
+            const xItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'X');
+            expect(xItem.url).toBe(
+                'https://x.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
             );
         });
 
@@ -69,10 +69,10 @@ describe('macro: share-page', () => {
 
             faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-            const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
-            expect(twitterItem.rel).toContain('noreferrer');
-            expect(twitterItem.rel).toContain('external');
-            expect(twitterItem.target).toBe('_blank');
+            const xItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'X');
+            expect(xItem.rel).toContain('noreferrer');
+            expect(xItem.rel).toContain('external');
+            expect(xItem.target).toBe('_blank');
         });
     });
 

package/components/share-page/example-share-page.njk

@@ -6,6 +6,6 @@
         "pageTitle": 'A page to share',
         "pageUrl": 'https://example.com/a-page-to-share',
         "facebook": true,
-        "twitter": true
+        "x": true
     })
 }}

package/components/skip-to-content/_macro.njk

@@ -1,4 +1,4 @@
 {% macro onsSkipToContent(params) %}
     {% set text = params.text | default('Skip to content') %}
-    <a class="ons-skip-to-content" href="{{ params.url }}">{{ text }}</a>
+    <a class="ons-skip-to-content ons-u-fs-r--b" href="{{ params.url }}">{{ text }}</a>
 {% endmacro %}

package/components/skip-to-content/_skip.scss

@@ -2,8 +2,6 @@
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
     display: block;
-    font-size: 1.1rem;
-    font-weight: $font-weight-bold;
     height: 1px;
     margin: 0;
     overflow: hidden;

package/components/table-of-contents/example-table-of-contents-grouped-with-single-list-item.njk

@@ -0,0 +1,34 @@
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
+
+{{-
+    onsTableOfContents({
+        "title": 'Contents',
+        "ariaLabel": 'Links to page sections',
+        "skipLink": {
+            "url": '#0',
+            "text": 'Skip to guide content'
+        },
+        "lists": [
+            {
+                "listHeading": 'Household questions',
+                "listHeadingHidden": 'help topics',
+                "itemsList": [
+                    {
+                        "url": '#household1',
+                        "text": 'Household and who lives here'
+                    }
+                ]
+            },
+            {
+                "listHeading": 'Individual questions',
+                "listHeadingHidden": 'help topics',
+                "itemsList": [
+                    {
+                        "url": '#individual1',
+                        "text": 'Name, date of birth and marital status'
+                    }
+                ]
+            }
+        ]
+    })
+-}}