@ons/design-system 73.0.4 → 73.3.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/list/_list.scss

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

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/phase-banner/_macro.njk

@@ -8,7 +8,16 @@
                     </div>
                 {% endif %}
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
-                    <p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">{{ params.html | safe }}</p>
+                    <p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">
+                        {% if params.html %}
+                            {{ params.html | safe }}
+                        {% else %}
+                            {{ params.text }}
+                            {% if params.feedbackLink %}
+                                {{ params.feedbackLink | safe }}
+                            {% endif %}
+                        {% endif %}
+                    </p>
                 </div>
             </div>
         </div>

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

@@ -24,6 +24,33 @@ describe('macro: phase-banner', () => {
         expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
     });
 
+    it('renders text content when `text` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('phase-banner', {
+                text: 'Example text content',
+            }),
+        );
+
+        const textContent = $('.ons-phase-banner__desc').text().trim();
+        expect(textContent).toBe('Example text content');
+    });
+
+    it('renders feedbackLink when provided with text', () => {
+        const $ = cheerio.load(
+            renderComponent('phase-banner', {
+                text: 'Example text content',
+                feedbackLink: '<a href="#">give feedback</a>',
+            }),
+        );
+
+        const textContent = $('.ons-phase-banner__desc').text().replace(/\s+/g, ' ').trim();
+        expect(textContent).toBe('Example text content give feedback');
+
+        const link = $('.ons-phase-banner__desc a');
+        expect(link.length).toBe(1);
+        expect(link.text()).toBe('give feedback');
+    });
+
     it('has the "Beta" badge by default', () => {
         const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
 

package/components/phase-banner/example-phase-banner-beta-with-feedback-link.njk

@@ -0,0 +1,18 @@
+{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+{% set feedbackLink %}
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "text": "give feedback"
+        })
+    }}
+{% endset %}
+
+{{
+    onsPhaseBanner({
+        "text": "This is a new service. To help us improve it,",
+        "feedbackLink": feedbackLink
+    })
+}}

package/components/phase-banner/example-phase-banner-beta-without-feedback-link.njk

@@ -0,0 +1,7 @@
+{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+
+{{
+    onsPhaseBanner({
+        "text": "This is a new service"
+    })
+}}

package/components/question/_question.scss

@@ -7,6 +7,7 @@
         mark,
         .ons-instruction {
             background-color: var(--ons-color-instruction);
+            background-image: none;
             color: var(--ons-color-text-inverse);
             margin-right: 0.5rem;
             padding: 0 0.5rem;

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/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/_macro.njk

@@ -35,7 +35,7 @@
                             {% for th in headerCols.ths %}
                                 <th
                                     scope="col"
-                                    class="ons-table__header{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric' if th.numeric }}"
+                                    class="ons-table__header  ons-table__header--{{ th.valign | default('top') }}{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric' if th.numeric }}"
                                     {% if th.colspan %}colspan="{{ th.colspan }}"{% endif %}
                                     {% if th.rowspan %}rowspan="{{ th.rowspan }}"{% endif %}
                                     {% if 'sortable' in variants %}aria-sort="{{ th.ariaSort | default('none') }}"{% endif %}
@@ -73,7 +73,8 @@
                                 {% set isFirstRow = loop.index == 0 and td.rowspan %}
                                 {% set rowSpan = isFirstRow and loop.index0 == rowspanCount %}
                                 {{ openingTag | safe }}
-                                class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
+                                class="ons-table__cell
+                                ons-table__cell--{{ td.valign | default('top') }}{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
                                 {% if td.id %}id="{{ td.id }}"{% endif %}
                                 {% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
                                 {% if td.colspan %}colspan="{{ td.colspan }}"{% endif %}
@@ -107,7 +108,9 @@
                     <tfoot class="ons-table__foot">
                         <tr class="ons-table__row">
                             {% for tfootCell in params.tfoot %}
-                                <td class="ons-table__cell ons-u-fs-s">{{ tfootCell.value }}</td>
+                                <td class="ons-table__cell ons-table__cell--{{ tfootCell.valign | default('top') }} ons-u-fs-s">
+                                    {{ tfootCell.value }}
+                                </td>
                             {% endfor %}
                         </tr>
                     </tfoot>

package/components/table/_macro.spec.js

@@ -90,6 +90,51 @@ describe('macro: table', () => {
         expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Special table');
     });
 
+    describe('Vertical Alignment', () => {
+        it('adds "ons-table__header--middle" class to column header when valign is set', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    ths: [
+                        {
+                            value: 'Column 1',
+                            valign: 'middle',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__header').hasClass('ons-table__header--middle')).toBe(true);
+        });
+
+        it('adds "ons-table__header--top" class to column header when valign is not set', () => {
+            const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+            expect($('.ons-table__header').hasClass('ons-table__header--top')).toBe(true);
+        });
+
+        it('adds "ons-table__cell--middle" class to row when valign is middle', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    trs: [
+                        {
+                            tds: [{ value: 'Row 1 Cell 1', valign: 'middle' }],
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__cell').hasClass('ons-table__cell--middle')).toBe(true);
+        });
+
+        it('adds "ons-table__cell--top" class to row when valign is not set', () => {
+            const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+            expect($('.ons-table__cell').hasClass('ons-table__cell--top')).toBe(true);
+        });
+    });
+
     describe('header row', () => {
         it('renders header cells with expected text', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -529,6 +574,19 @@ describe('macro: table', () => {
             const footerCellValues = mapAll($('.ons-table__foot .ons-table__cell'), (node) => node.text().trim());
             expect(footerCellValues).toEqual(['Footer Cell 1', 'Footer Cell 2', 'Footer Cell 3']);
         });
+        it('adds "ons-table__cell--middle" class to row when valign is middle', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    tfoot: [
+                        { value: 'Footer Cell 1', valign: 'middle' },
+                        { value: 'Footer Cell 2', valign: 'middle' },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__cell').hasClass('ons-table__cell--middle')).toBe(true);
+        });
     });
 
     describe('sortable variant', () => {