@ons/design-system 70.0.7 → 70.0.9

package/components/header/example-header-default.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-for-survey-with-description.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-for-surveys.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-welsh.njk

@@ -1,14 +1,14 @@
 ---
 fullWidth: true
-layout: ~
 ---
-{% extends "layout/_template.njk" %}
 
-{% set pageConfig = {
-    "header": {
-        "mastheadLogoUrl": '#0',
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
         "title": 'Gwasanaeth Cymraeg',
         "titleUrl": '#0',
+        "mastheadLogoUrl": '#0',
         "language": {
             "languages": [
                 {
@@ -25,5 +25,5 @@ layout: ~
                 }
             ]
         }
-    }
-} %}
+    })
+}}

package/components/header/example-header-external-with-navigation-and-search.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{
@@ -38,7 +39,7 @@
                 "ariaLabel": 'Toggle main menu'
             }
         },
-           'siteSearchAutosuggest': {
+        "siteSearchAutosuggest": {
             "autosuggestData":  "/examples/data/country-of-birth.json",
             "label": "search",
             "instructions": "instructions",

package/components/header/example-header-external-with-navigation.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-with-service-links.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-with-sub-navigation-removed.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-with-sub-navigation.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{
@@ -130,4 +131,4 @@
             }
         }
     })
-}}
+}}

package/components/header/example-header-internal.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-multiple-logos.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/{example-header-neutral-for-multicoloured-logo.njk → example-header-neutral.njk}

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/helpers/_grid.scss

@@ -1,6 +1,6 @@
 .ons-pl-grid-col {
-  background: var(--ons-color-grey-5);
-  font-size: 0.8rem;
-  margin: 0 0 1rem;
-  padding: 1rem;
+    background: var(--ons-color-grey-5);
+    font-size: 0.8rem;
+    margin: 0 0 1rem;
+    padding: 1rem;
 }

package/components/helpers/grid.njk

@@ -1,19 +1,20 @@
-{% macro patternLibExampleGrid(params) %}
-    {% if params.container -%}
-        <div class="ons-container">
-    {% endif -%}
+{% macro dsExampleGrid(params) %}
 
-    <div class="ons-grid">
-        {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
-            {% for i in range(0, item.repeat | default(1) ) -%}
-                <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
-                    <div class="ons-pl-grid-col">{{ item.col }} col</div>
-                </div>
-            {%- endfor %}
-        {%- endfor %}
-    </div>
-
-    {% if params.container -%}
+    {% set grid %}
+        <div class="ons-grid">
+            {%- for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+                {%- for i in range(0, item.repeat | default(1) ) -%}
+                    <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
+                        <div class="ons-pl-grid-col">{{ item.col }} col</div>
+                    </div>
+                {%- endfor -%}
+            {%- endfor -%}
         </div>
-    {% endif -%}
+    {% endset %}
+
+    {%- if params.container -%}
+        <div class="ons-container">{{ grid | safe }}</div>
+    {% else %}
+        {{ grid | safe }}
+    {%- endif -%}
 {% endmacro %}

package/components/hero/_hero.scss

@@ -1,67 +1,67 @@
 // Default
 .ons-hero {
-  background-color: var(--ons-color-hero-bg);
-  display: flex;
-  overflow: hidden;
-  padding: 0;
-  position: relative;
-
-  &--dark {
-    background-color: var(--ons-color-hero-bg-dark);
-  }
-
-  &__container {
-    align-items: center;
+    background-color: var(--ons-color-hero-bg);
     display: flex;
-    min-height: 300px;
+    overflow: hidden;
+    padding: 0;
     position: relative;
 
-    &--has-details {
-      align-items: flex-start; // Prevents undesired shift if not enough content
+    &--dark {
+        background-color: var(--ons-color-hero-bg-dark);
     }
-  }
 
-  &__content {
-    height: 100%;
-  }
+    &__container {
+        align-items: center;
+        display: flex;
+        min-height: 300px;
+        position: relative;
 
-  &__pre-title {
-    margin-bottom: 0.5rem;
+        &--has-details {
+            align-items: flex-start; // Prevents undesired shift if not enough content
+        }
+    }
 
-    @include mq(xxs, m) {
-      max-width: 145px;
+    &__content {
+        height: 100%;
     }
-  }
 
-  &__title {
-    font-size: 2.3rem;
-    line-height: 1.2;
-  }
+    &__pre-title {
+        margin-bottom: 0.5rem;
 
-  &__details {
-    padding-bottom: 3rem;
-    padding-top: 2rem;
-    position: relative;
-    z-index: 5;
-  }
+        @include mq(xxs, m) {
+            max-width: 145px;
+        }
+    }
+
+    &__title {
+        font-size: 2.3rem;
+        line-height: 1.2;
+    }
 
-  &--dark & {
     &__details {
-      color: var(--ons-color-text-inverse) !important;
+        padding-bottom: 3rem;
+        padding-top: 2rem;
+        position: relative;
+        z-index: 5;
+    }
+
+    &--dark & {
+        &__details {
+            color: var(--ons-color-text-inverse) !important;
 
-      a {
-        color: inherit;
-        text-decoration: underline solid var(--ons-color-text-inverse-link) 1px;
-      }
+            a {
+                color: inherit;
+                text-decoration: underline solid var(--ons-color-text-inverse-link) 1px;
+            }
 
-      a:hover {
-        color: var(--ons-color-text-inverse-link-hover);
-        text-decoration-thickness: 2px;
-      }
+            a:hover {
+                color: var(--ons-color-text-inverse-link-hover);
+                text-decoration-thickness: 2px;
+            }
 
-      .ons-details__heading {
-        color: inherit;
-      }
+            .ons-details__heading {
+                color: inherit;
+            }
+        }
     }
-  }
 }

package/components/hero/_macro.njk

@@ -3,10 +3,10 @@
     {# Set number of columns used for hero content after medium breakpoint #}
     {% set detailsColumns = params.detailsColumns | default ('8') %}
 
-    <section class="ons-hero ons-grid--gutterless{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-hero--{{ variant }}{% endfor %}{% else %} ons-hero--{{ params.variants }}{% endif %}{% endif %}">
-
+    <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 %}"
+    >
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
-
             <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
                 <header>
                     <h1 class="ons-hero__title ons-u-fs-xxxl">{{ params.title }}</h1>
@@ -21,7 +21,7 @@
 
                 {% if params.button %}
                     {% from "components/button/_macro.njk" import onsButton %}
-                    {% set btnClasses = params.button.classes if params.button.classes else '' %}
+                    {% set btnClasses = params.button.classes if params.button.classes %}
                     {% if params.variants and 'dark' in params.variants %}
                         {% set btnClasses = btnClasses + ' ons-btn--ghost' %}
                     {% endif %}
@@ -35,17 +35,12 @@
                     }}
                 {% endif %}
                 {% if caller %}
-                    <div class="ons-hero__additional-content">
-                        {{- caller() -}}
-                    </div>
+                    <div class="ons-hero__additional-content">{{- caller() -}}</div>
                 {% endif %}
             </div>
             {% if params.html %}
-                <div class="ons-hero__additional-html">
-                    {{- params.html | safe -}}
-                </div>
+                <div class="ons-hero__additional-html">{{- params.html | safe -}}</div>
             {% endif %}
         </div>
-
     </section>
 {% endmacro %}

package/components/hero/_macro.spec.js

@@ -6,85 +6,85 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_HERO = {
-  title: 'Hero title',
-  subtitle: 'Hero subtitle',
-  text: 'Hero text',
-  button: {
-    url: '#0',
-    text: 'Get started',
-  },
+    title: 'Hero title',
+    subtitle: 'Hero subtitle',
+    text: 'Hero text',
+    button: {
+        url: '#0',
+        text: 'Get started',
+    },
 };
 
 describe('macro: hero', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has provided variant style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('hero', {
-        variants: ['variant-a', 'variant-b'],
-      }),
-    );
+    it('has provided variant style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                variants: ['variant-a', 'variant-b'],
+            }),
+        );
 
-    expect($('.ons-hero--variant-a').length).toBe(1);
-    expect($('.ons-hero--variant-b').length).toBe(1);
-  });
+        expect($('.ons-hero--variant-a').length).toBe(1);
+        expect($('.ons-hero--variant-b').length).toBe(1);
+    });
 
-  it('has expected `title`', () => {
-    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+    it('has expected `title`', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    const title = $('.ons-hero__title').html().trim();
-    expect(title).toBe('Hero title');
-  });
+        const title = $('.ons-hero__title').html().trim();
+        expect(title).toBe('Hero title');
+    });
 
-  it('has expected `subtitle`', () => {
-    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+    it('has expected `subtitle`', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    const title = $('.ons-hero__subtitle').html().trim();
-    expect(title).toBe('Hero subtitle');
-  });
+        const title = $('.ons-hero__subtitle').html().trim();
+        expect(title).toBe('Hero subtitle');
+    });
 
-  it('has expected `text`', () => {
-    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+    it('has expected `text`', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    const title = $('.ons-hero__text').html().trim();
-    expect(title).toBe('Hero text');
-  });
+        const title = $('.ons-hero__text').html().trim();
+        expect(title).toBe('Hero text');
+    });
 
-  it('has expected `html`', () => {
-    const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, html: '<span class="some-html">some html</span>' }));
+    it('has expected `html`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, html: '<span class="some-html">some html</span>' }));
 
-    const htmlOutput = $('.ons-hero__additional-html').html();
-    expect(htmlOutput).toBe('<span class="some-html">some html</span>');
-  });
+        const htmlOutput = $('.ons-hero__additional-html').html();
+        expect(htmlOutput).toBe('<span class="some-html">some html</span>');
+    });
 
-  it('outputs the expected button', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
+    it('outputs the expected button', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-    faker.renderComponent('hero', EXAMPLE_HERO);
+        faker.renderComponent('hero', EXAMPLE_HERO);
 
-    expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Get started');
-    expect(buttonSpy.occurrences[0]).toHaveProperty('url', '#0');
-  });
+        expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Get started');
+        expect(buttonSpy.occurrences[0]).toHaveProperty('url', '#0');
+    });
 
-  it('outputs the correct button class with `dark` variant', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
+    it('outputs the correct button class with `dark` variant', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-    faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });
+        faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });
 
-    expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
-  });
+        expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
+    });
 
-  it('calls with content', () => {
-    const $ = cheerio.load(renderComponent('hero', { EXAMPLE_HERO }, 'Example content...'));
+    it('calls with content', () => {
+        const $ = cheerio.load(renderComponent('hero', { EXAMPLE_HERO }, 'Example content...'));
 
-    const content = $('.ons-hero__additional-content').text().trim();
-    expect(content).toEqual(expect.stringContaining('Example content...'));
-  });
+        const content = $('.ons-hero__additional-content').text().trim();
+        expect(content).toEqual(expect.stringContaining('Example content...'));
+    });
 });

package/components/hero/example-hero-dark.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/hero/_macro.njk" import onsHero %}
 {{
     onsHero({

package/components/hero/example-hero-default.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/hero/_macro.njk" import onsHero %}
 {{
     onsHero({

package/components/icon/_icon.scss

@@ -1,60 +1,60 @@
 .ons-icon {
-  height: 1rem;
-  vertical-align: middle;
-  width: 1rem;
-
-  &--xxxl {
-    height: 1.7rem;
-    width: 1.7rem;
-
-    @include mq(m) {
-      height: 2.6rem;
-      width: 2.6rem;
+    height: 1rem;
+    vertical-align: middle;
+    width: 1rem;
+
+    &--xxxl {
+        height: 1.7rem;
+        width: 1.7rem;
+
+        @include mq(m) {
+            height: 2.6rem;
+            width: 2.6rem;
+        }
     }
-  }
 
-  &--xxl {
-    height: 1.5rem;
-    width: 1.5rem;
+    &--xxl {
+        height: 1.5rem;
+        width: 1.5rem;
 
-    @include mq(m) {
-      height: 2rem;
-      width: 2rem;
+        @include mq(m) {
+            height: 2rem;
+            width: 2rem;
+        }
     }
-  }
 
-  &--xl {
-    height: 1.4rem;
-    width: 1.4rem;
+    &--xl {
+        height: 1.4rem;
+        width: 1.4rem;
 
-    @include mq(m) {
-      height: 1.6rem;
-      width: 1.6rem;
+        @include mq(m) {
+            height: 1.6rem;
+            width: 1.6rem;
+        }
     }
-  }
 
-  &--l {
-    height: 1.3rem;
-    width: 1.3rem;
+    &--l {
+        height: 1.3rem;
+        width: 1.3rem;
 
-    @include mq(m) {
-      height: 1.4rem;
-      width: 1.4rem;
+        @include mq(m) {
+            height: 1.4rem;
+            width: 1.4rem;
+        }
     }
-  }
 
-  &--m {
-    height: 1.1rem;
-    width: 1.1rem;
+    &--m {
+        height: 1.1rem;
+        width: 1.1rem;
 
-    @include mq(m) {
-      height: 1.2rem;
-      width: 1.2rem;
+        @include mq(m) {
+            height: 1.2rem;
+            width: 1.2rem;
+        }
     }
-  }
 
-  &--s {
-    height: 0.7rem;
-    width: 0.7rem;
-  }
+    &--s {
+        height: 0.7rem;
+        width: 0.7rem;
+    }
 }