@ons/design-system 70.0.9 → 70.0.11

package/components/header/_test_examples.js

@@ -0,0 +1,157 @@
+export {
+  EXAMPLE_HEADER_BASIC,
+  EXAMPLE_SERVICE_LINKS_CONFIG,
+  EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE,
+  EXAMPLE_HEADER_SERVICE_LINKS_SINGLE,
+  EXAMPLE_HEADER_LANGUAGE_CONFIG,
+  EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG,
+  EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
+};
+
+const EXAMPLE_HEADER_BASIC = {
+  title: 'Header title',
+};
+const EXAMPLE_SERVICE_LINKS_CONFIG = {
+  id: 'service-links',
+  ariaLabel: 'Services menu',
+  classes: 'custom-class',
+  toggleServicesButton: {
+    text: 'Menu',
+    ariaLabel: 'Toggle services menu',
+  },
+};
+const EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE = {
+  ...EXAMPLE_HEADER_BASIC,
+  serviceLinks: {
+    ...EXAMPLE_SERVICE_LINKS_CONFIG,
+    itemsList: [
+      {
+        title: 'Title 1',
+        url: '#1',
+      },
+      {
+        title: 'Title 2',
+        url: '#2',
+      },
+      {
+        title: 'Title 3',
+        url: '#3',
+      },
+    ],
+  },
+};
+const EXAMPLE_HEADER_SERVICE_LINKS_SINGLE = {
+  ...EXAMPLE_HEADER_BASIC,
+  serviceLinks: {
+    ...EXAMPLE_SERVICE_LINKS_CONFIG,
+    itemsList: [
+      {
+        title: 'Title',
+        url: '#0',
+      },
+    ],
+  },
+};
+const EXAMPLE_HEADER_LANGUAGE_CONFIG = {
+  language: {
+    languages: [
+      {
+        url: '#0',
+        ISOCode: 'en',
+        text: 'English',
+        buttonAriaLabel: 'Language selector. Current language: English',
+        chooseLanguage: 'Choose language',
+        current: true,
+      },
+      {
+        url: '#0',
+        ISOCode: 'cy',
+        text: 'Cymraeg',
+        buttonAriaLabel: 'Dewisydd iaith. Iaith gyfredol: Cymraeg',
+        chooseLanguage: 'Dewiswch iaith',
+        current: false,
+      },
+    ],
+  },
+};
+const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#1',
+    currentPageTitle: 'Guidance',
+    itemsList: [
+      {
+        title: 'Home',
+        url: '#0',
+      },
+      {
+        title: 'Guidance',
+        url: '#1',
+      },
+    ],
+    toggleNavigationButton: {
+      text: 'Menu',
+      ariaLabel: 'Toggle main menu',
+    },
+    subNavigation: {
+      id: 'sub-nav',
+      overviewURL: '#overview',
+      overviewText: 'Overview',
+      ariaLabel: 'Section menu',
+      currentPath: '#1',
+      itemsList: [
+        {
+          title: 'Sub nav item 1',
+          url: '#0',
+          classes: 'custom-class-sub-item-1',
+          id: 'sub-item-1',
+        },
+        {
+          title: 'Sub nav item 2',
+          url: '#1',
+          classes: 'custom-class-sub-item-2',
+          id: 'sub-item-2',
+        },
+      ],
+    },
+  },
+};
+const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#home',
+    itemsList: [
+      {
+        title: 'Home',
+        url: '#home',
+      },
+      {
+        title: 'Guidance',
+        url: '#0',
+      },
+    ],
+    toggleNavigationButton: {
+      text: 'Menu',
+      ariaLabel: 'Toggle main menu',
+    },
+  },
+  siteSearchAutosuggest: {
+    label: 'label',
+    instructions: 'Use up and down keys to navigate.',
+    ariaYouHaveSelected: 'You have selected',
+    ariaMinChars: 'Enter 3 or more characters for suggestions.',
+    minChars: 3,
+    ariaResultsLabel: 'Country suggestions',
+    ariaOneResult: 'There is one suggestion available.',
+    ariaNResults: 'There are {n} suggestions available.',
+    ariaLimitedResults: 'Type more characters to improve your search',
+    moreResults: 'Continue entering to improve suggestions',
+    resultsTitle: 'Suggestions',
+    resultsTitleId: 'country-of-birth-suggestions',
+    noResults: 'No suggestions found.',
+    typeMore: 'Continue entering to get suggestions',
+    language: 'en-gb',
+  },
+};

package/components/label/_label.scss

@@ -19,7 +19,7 @@
     &--placeholder {
         font-size: 1rem;
         font-weight: $font-weight-regular;
-        color: var(--ons-color-text-placeholder);
+        color: var(--ons-color-placeholder);
         left: 10px;
         position: absolute;
         top: 6px;

package/components/list/_list.scss

@@ -54,23 +54,26 @@
         margin-left: 0.5rem;
     }
 
-    &__prefix,
-    &__suffix {
-        font-family: $font-mono;
-    }
-
-    &--prefix &,
-    &--suffix &,
     &--icons & {
         &__item {
-            align-items: flex-start;
-            display: flex;
+            margin-top: 0;
         }
     }
 
-    &--social & {
-        &__item {
+    &__prefix,
+    &__suffix {
+        font-family: $font-mono;
+    }
+
+    &--prefix,
+    &--suffix,
+    &--icons {
+        margin-bottom: 0;
+        @extend .ons-list--bare;
+        .ons-list__item {
+            margin-bottom: 0.5rem;
             align-items: center;
+            display: flex;
         }
     }
 

package/components/list/_macro.njk

@@ -3,11 +3,11 @@
     {% set listLength = params.itemsList | length %}
 
     {% if params.itemsList[0].prefix %}
-        {% set otherClasses = 'ons-list--bare ons-list--prefix' %}
+        {% set otherClasses = 'ons-list--prefix' %}
     {% elif params.itemsList[0].suffix %}
-        {% set otherClasses = 'ons-list--bare ons-list--suffix' %}
+        {% set otherClasses = 'ons-list--suffix' %}
     {% elif params.iconPosition %}
-        {% set otherClasses = 'ons-list--bare ons-list--icons' %}
+        {% set otherClasses = 'ons-list--icons' %}
         {% set iconType = params.iconType if params.iconType %}
     {% else %}
         {% set otherClasses = '' %}

package/components/list/_macro.spec.js

@@ -77,29 +77,27 @@ describe('macro: list', () => {
             expect($('.ons-list').hasClass('ons-list--inline')).toBe(true);
         });
 
-        it('assumes the "bare" variant with a prefix modifier class when the first list item has a prefix', () => {
+        it('assumes a prefix modifier class when the first list item has a prefix', () => {
             const $ = cheerio.load(
                 renderComponent('list', {
                     itemsList: [{ text: 'Item text', prefix: 'Abc' }],
                 }),
             );
 
-            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
             expect($('.ons-list').hasClass('ons-list--prefix')).toBe(true);
         });
 
-        it('assumes the "bare" variant with a suffix modifier class when the first list item has a suffix', () => {
+        it('assumes a suffix modifier class when the first list item has a suffix', () => {
             const $ = cheerio.load(
                 renderComponent('list', {
                     itemsList: [{ text: 'Item text', suffix: 'Abc' }],
                 }),
             );
 
-            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
             expect($('.ons-list').hasClass('ons-list--suffix')).toBe(true);
         });
 
-        it('assumes the "bare" variant with a icons modifier class when the first list item has an icon', () => {
+        it('assumes a icons modifier class when the first list item has an icon', () => {
             const $ = cheerio.load(
                 renderComponent('list', {
                     ...EXAMPLE_LIST_TEXT_ITEMS,
@@ -108,7 +106,6 @@ describe('macro: list', () => {
                 }),
             );
 
-            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
             expect($('.ons-list').hasClass('ons-list--icons')).toBe(true);
         });
 

package/components/list/example-bare-list.njk

@@ -0,0 +1,21 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "variants": 'bare',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Who we are'
+            },
+            {
+                "url": '#0',
+                "text": 'What we do'
+            },
+            {
+                "url": 'https://goo.gl/maps/ULnVRd16zfFLZWdt7',
+                "text": 'Where to find us',
+                "external": true
+            }
+        ]
+    })
+}}

package/components/list/example-bulleted-list.njk

@@ -0,0 +1,17 @@
+{% from "components/list/_macro.njk" import onsList %}
+<p>You will need to show <strong>one</strong> of the following forms of ID:</p>
+{{
+    onsList({
+        "itemsList": [
+            {
+                "text": 'birth certificate'
+            },
+            {
+                "text": 'national insurance number'
+            },
+            {
+                "text": 'passport'
+            }
+        ]
+    })
+}}

package/components/list/example-dashed-list.njk

@@ -0,0 +1,20 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "variants": 'dashed',
+        "itemsList": [
+            {
+                "text": 'Overview',
+                "current": true
+            },
+            {
+                "url": '#0',
+                "text": 'About Census 2021'
+            },
+            {
+                "url": '#0',
+                "text": 'Why should I take part in the census?'
+            }
+        ]
+    })
+}}

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

@@ -0,0 +1,42 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "variants": 'inline',
+        "iconPosition": 'before',
+        "iconSize": 'xxl',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Twitter',
+                "iconType": 'twitter',
+                "attributes": {
+                    "rel": 'noreferrer external'
+                }
+            },
+            {
+                "url": '#0',
+                "text": 'Facebook',
+                "iconType": 'facebook',
+                "attributes": {
+                    "rel": 'noreferrer external'
+                }
+            },
+            {
+                "url": '#0',
+                "text": 'Instagram',
+                "iconType": 'instagram',
+                "attributes": {
+                    "rel": 'noreferrer external'
+                }
+            },
+            {
+                "url": '#0',
+                "text": 'LinkedIn',
+                "iconType": 'linkedin',
+                "attributes": {
+                    "rel": 'noreferrer external'
+                }
+            }
+        ]
+    })
+}}

package/components/list/example-inline-list.njk

@@ -0,0 +1,20 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "variants": ['bare', 'inline'],
+        "itemsList": [
+            {
+                "text": 'Contact us',
+                "url": '#0'
+            },
+            {
+                "text": 'Cookies and privacy',
+                "url": '#0'
+            },
+            {
+                "text": 'Terms and conditions',
+                "url": '#0'
+            }
+        ]
+    })
+}}

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

@@ -0,0 +1,18 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "iconPosition": "before",
+        "iconType": "check",
+        "itemsList": [
+            {
+                "text": "birth certificate"
+            },
+            {
+                "text": "national insurance number"
+            },
+            {
+                "text": "passport"
+            }
+        ]
+    })
+}}

package/components/list/example-list-with-icon-suffix.njk

@@ -0,0 +1,18 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "iconPosition": "after",
+        "iconType": "check",
+        "itemsList": [
+            {
+                "text": "birth certificate"
+            },
+            {
+                "text": "national insurance number"
+            },
+            {
+                "text": "passport"
+            }
+        ]
+    })
+}}

package/components/list/example-nested-list.njk

@@ -0,0 +1,39 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "variants": 'dashed',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Who we are',
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'Our Mission'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Core Values',
+                        "itemsList": [
+                            {
+                                "url": '#0',
+                                "text": 'Integrity'
+                            },
+                            {
+                                "url": '#0',
+                                "text": 'Excellence'
+                            }]
+                    }]
+            },
+            {
+                "url": '#0',
+                "text": 'What we do'
+            },
+            {
+                "url": 'https://goo.gl/maps/ULnVRd16zfFLZWdt7',
+                "text": 'Where to find us',
+                "external": true
+            }
+        ]
+    })
+}}

package/components/list/example-numbered-list.njk

@@ -0,0 +1,17 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "element": 'ol',
+        "itemsList": [
+            {
+                "text": 'Introduction'
+            },
+            {
+                "text": 'Questionnaire'
+            },
+            {
+                "text": 'Summary'
+            }
+        ]
+    })
+}}

package/components/list/example-prefixed-list.njk

@@ -0,0 +1,19 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "itemsList": [
+            {
+                "text": 'birth certificate',
+                "prefix": 'H1'
+            },
+            {
+                "text": 'national insurance number',
+                "prefix": 'H2'
+            },
+            {
+                "text": 'passport',
+                "prefix": 'H3'
+            }
+        ]
+    })
+}}

package/components/list/example-suffixed-list.njk

@@ -0,0 +1,19 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "itemsList": [
+            {
+                "text": 'birth certificate',
+                "suffix": 'A'
+            },
+            {
+                "text": 'national insurance number',
+                "suffix": 'B'
+            },
+            {
+                "text": 'passport',
+                "suffix": 'C'
+            }
+        ]
+    })
+}}

package/components/list/example-summary-list.njk

@@ -0,0 +1,17 @@
+{% from "components/list/_macro.njk" import onsList %}
+{{
+    onsList({
+        "variants": "summary",
+        "itemsList": [
+            {
+              "text": 'birth certificate'
+            },
+            {
+                "text": 'national insurance number'
+            },
+            {
+                "text": 'passport'
+            }
+        ]
+    })
+}}

package/components/navigation/_macro.njk

@@ -8,7 +8,7 @@
             {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
-                    {% set autosuggestLabelClasses = "ons-u-pl-m" %}
+                    {% set autosuggestLabelClasses = "ons-u-pl-l" %}
                     {% if params.variants == "neutral" %}
                         {% set autosuggestClasses = autosuggestClasses + ' ons-input-search--dark' %}
                     {% else %}

package/components/navigation/_macro.spec.js

@@ -138,7 +138,7 @@ describe('macro: navigation', () => {
                     classes: 'ons-input-search ons-input-search--icon',
                     label: {
                         id: 'ons-site-search-label',
-                        classes: 'ons-u-pl-m ons-label--white',
+                        classes: 'ons-u-pl-l ons-label--white',
                     },
                 },
             });

package/components/quote/example-quote.njk

@@ -0,0 +1,7 @@
+{% from "components/quote/_macro.njk" import onsQuote %}
+{{-
+    onsQuote({
+        "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        "ref": 'A N Other'
+    })
+-}}

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

@@ -7,7 +7,6 @@
             {
                 "id": 'follow-us',
                 "title": 'Follow us',
-                "variants": 'social',
                 "iconPosition": 'before',
                 "iconSize": 'xxl',
                 "itemsList": [

package/components/section-navigation/_macro.njk

@@ -57,7 +57,7 @@
             {% if params.title %}
                 {{ openingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
                 class="ons-u-fs-r--b
-                ons-u-mb-s">{{ params.title }}{{ closingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) }}
+                ons-u-mb-s">{{ params.title }}{{ closingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
             {% endif %}
             <ul class="ons-section-nav__list">
                 {% for item in params.itemsList %}

package/components/section-navigation/example-section-navigation-single-vertical-with-title.njk

@@ -0,0 +1,23 @@
+{% from "components/section-navigation/_macro.njk" import onsSectionNavigation %}
+{{
+    onsSectionNavigation({
+        "id": "section-menu",
+        "variants": "vertical",
+        "currentPath": "#section-1",
+        "title": "Sections title",
+        "itemsList": [
+            {
+                "title": "Section 1",
+                "url": "#section-1"
+            },
+            {
+                "title": "Section 2",
+                "url": "#0"
+            },
+            {
+                "title": "Section 3",
+                "url": "#0"
+            }
+        ]
+    })
+}}

package/components/summary/_macro.njk

@@ -135,7 +135,7 @@
 
                     {% if group.summaryLink %}
                         <div
-                            class="ons-summary__link{{ ' ons-u-pt-s' if group.placeholderText or group.rows }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
+                            class="ons-summary__link{{ ' ons-u-pt-s' if params.variant != 'card' and (group.placeholderText or group.rows) }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
                         >
                             {% set link %}
                                 <a

package/components/text-indent/example-text-indent.njk

@@ -0,0 +1,6 @@
+{% from "components/text-indent/_macro.njk" import onsTextIndent %}
+{{-
+    onsTextIndent({
+        text: '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
+    })
+-}}