@ons/design-system 70.0.10 → 70.0.12

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

@@ -21,7 +21,7 @@
 
                 {% if params.button %}
                     {% from "components/button/_macro.njk" import onsButton %}
-                    {% set btnClasses = params.button.classes if params.button.classes %}
+                    {% set btnClasses = params.button.classes if params.button.classes else '' %}
                     {% if params.variants and 'dark' in params.variants %}
                         {% set btnClasses = btnClasses + ' ons-btn--ghost' %}
                     {% endif %}

package/components/input/_macro.njk

@@ -103,7 +103,7 @@
                             aria-label="{{ abbr.title }}" role="figure"
                         {% endif %}
                         {% if abbr.title %}title="{{ abbr.title }}"{% endif %}
-                        >{{ abbr.text }}
+                        >{{- abbr.text -}}
                         {{ endTag | safe }}
                     </span>
                 </span>

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;
         }
     }
 
@@ -104,6 +107,12 @@
             @extend .ons-u-pb-s;
             @extend .ons-u-m-no;
         }
+        .ons-list__prefix,
+        .ons-list__suffix {
+            &--icon-check .ons-icon {
+                fill: var(--ons-color-leaf-green) !important;
+            }
+        }
     }
 }
 

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 = '' %}
@@ -22,7 +22,6 @@
     {% endif %}
     {% set openingTag = "<" + listEl %}
     {% set closingTag = "</" + listEl + ">" %}
-
     {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %}
     class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
     {%- for item in params.itemsList -%}
@@ -48,7 +47,10 @@
             {% endif %}
 
             {%- if item.prefix or (params.iconPosition == 'before') -%}
-                <span class="ons-list__prefix" {% if listEl != 'ol' %}aria-hidden="true"{% endif %}>
+                <span
+                    class="ons-list__prefix {{ 'ons-list__prefix--icon-check' if params.variants == 'summary' and params.iconType == 'check' }}"
+                    {% if listEl != 'ol' %}aria-hidden="true"{% endif %}
+                >
                     {%- if item.prefix -%}
                         {{- item.prefix -}}.
                     {% elif params.iconPosition == 'before' %}
@@ -87,7 +89,10 @@
                 {{- itemText | safe -}}
             {%- endif -%}
             {%- if item.suffix or (params.iconPosition == 'after') -%}
-                <span class="ons-list__suffix" {% if listEl != 'ol' %}aria-hidden="true"{% endif %}>
+                <span
+                    class="ons-list__suffix {{ 'ons-list__suffix--icon-check' if params.variants == 'summary' and params.iconType == 'check' }}"
+                    {% if listEl != 'ol' %}aria-hidden="true"{% endif %}
+                >
                     {%- if item.suffix -%}
                         {{- item.suffix -}}
                     {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}

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,10 +106,35 @@ describe('macro: list', () => {
                 }),
             );
 
-            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
             expect($('.ons-list').hasClass('ons-list--icons')).toBe(true);
         });
 
+        it('has the correct icon class when variants is `summary`, `iconType` is `check` and `iconPosition` is before', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    iconPosition: 'before',
+                    iconType: 'check',
+                    variants: 'summary',
+                }),
+            );
+
+            expect($('.ons-list__prefix').hasClass('ons-list__prefix--icon-check')).toBe(true);
+        });
+
+        it('has the correct icon class when variants is `summary`, `iconType` is `check` and `iconPosition` is `after`', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    iconPosition: 'after',
+                    iconType: 'check',
+                    variants: 'summary',
+                }),
+            );
+
+            expect($('.ons-list__suffix').hasClass('ons-list__suffix--icon-check')).toBe(true);
+        });
+
         it('renders a <ul> element by default', () => {
             const $ = cheerio.load(renderComponent('list', EXAMPLE_LIST_TEXT_ITEMS));
 

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": [