@ons/design-system 72.1.1 → 72.2.0

package/components/button/_button.scss

@@ -569,6 +569,6 @@ $button-shadow-size: 3px;
 
     .ons-btn,
     a {
-        margin: 0 1rem 1rem 0;
+        margin: 0 1.5rem 1rem 0;
     }
 }

package/components/char-check-limit/_macro.spec.js

@@ -5,65 +5,57 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-const EXAMPLE_CHAR_CHECK_LIMIT = {
-    id: 'example-char-check-limit',
-    charCountSingular: 'You have {x} character remaining',
-    charCountPlural: 'You have {x} characters remaining',
-    charCountOverLimitSingular: '{x} character too many',
-    charCountOverLimitPlural: '{x} characters too many',
-};
-
-describe('macro: char-check-limit', () => {
-    it('passes jest-axe checks without check', async () => {
-        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('passes jest-axe checks with check', async () => {
-        const $ = cheerio.load(
-            renderComponent(
-                'char-check-limit',
-                {
-                    ...EXAMPLE_CHAR_CHECK_LIMIT,
-                    variant: 'check',
-                },
-                ['<p>Test content.</p>'],
-            ),
-        );
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
-
-        expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
-    });
-
-    it('has the provided data attributes', () => {
-        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
-
-        expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
-        expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
-        expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
-        expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
+import { EXAMPLE_CHAR_CHECK_LIMIT } from './_test-examples';
+
+describe('FOR: Macro: CharCheckLimit', () => {
+    describe('GIVEN: Params: Required', () => {
+        describe('WHEN: required params are provided', () => {
+            const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+
+                expect(results).toHaveNoViolations();
+            });
+            test('THEN: has the provided id attribute', () => {
+                expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
+            });
+            test('THEN: has the data attribute which defines charCountPlural', () => {
+                expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+            });
+            test('THEN: has the data attribute which defines charCountSingular', () => {
+                expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
+            });
+            test('THEN: has the data attribute which defines charCountOverLimitSingular', () => {
+                expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
+            });
+            test('THEN: has the data attribute which defines charCountOverLimitPlural', () => {
+                expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
+            });
+        });
     });
 
-    it('has expected nested content', () => {
-        const $ = cheerio.load(
-            renderComponent(
-                'char-check-limit',
-                {
-                    ...EXAMPLE_CHAR_CHECK_LIMIT,
-                    variant: 'check',
-                },
-                ['<p>Test content.</p>'],
-            ),
-        );
-
-        expect($('.ons-js-char-check-input').html().trim()).toBe('<p>Test content.</p>');
+    describe('GIVEN: Params: variant', () => {
+        describe('WHEN: variant is provided', () => {
+            const $ = cheerio.load(
+                renderComponent(
+                    'char-check-limit',
+                    {
+                        ...EXAMPLE_CHAR_CHECK_LIMIT,
+                        variant: 'check',
+                    },
+                    ['<p>Test content.</p>'],
+                ),
+            );
+
+            test('THEN: passes jest-axe checks with variant set to check', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: renders the passed content', () => {
+                expect($('.ons-js-char-check-input').text()).toBe('Test content.');
+            });
+        });
     });
 });

package/components/description-list/_description-list.scss

@@ -7,25 +7,56 @@
         clear: both;
         float: left;
         font-weight: $font-weight-bold;
-
-        &:not(:first-child) {
-            margin-top: 0.5rem;
-        }
     }
 
     &__value {
         float: right;
         margin-left: 0; /* As normalize adds a 40px left margin */
+    }
 
-        &:not(:nth-of-type(1)) {
-            @include mq(m) {
+    &__item {
+        &:not(:first-child) {
+            .ons-description-list__term {
                 margin-top: 0.5rem;
             }
+
+            .ons-description-list__value:nth-of-type(1) {
+                @include mq(m) {
+                    margin-top: 0.5rem;
+                }
+            }
+
+            .ons-description-list--inline & {
+                .ons-description-list__value:nth-of-type(1),
+                .ons-description-list__term {
+                    @include mq(l) {
+                        margin-top: 0;
+                    }
+                    @include mq(xs, l) {
+                        margin-top: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
+
+    &--inline {
+        .ons-description-list__term {
+            padding-right: 1rem;
         }
 
-        & + & {
-            @include mq(m) {
-                margin-top: 0;
+        @include mq(l) {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0.5rem 2.5rem;
+
+            .ons-description-list__value {
+                grid-column-start: 2;
+            }
+
+            .ons-description-list__item {
+                display: grid;
+                grid-template-columns: auto 1fr;
             }
         }
     }

package/components/description-list/_macro.njk

@@ -1,23 +1,37 @@
 {% macro onsDescriptionList(params) %}
     <dl
-        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-cf{{ " " + params.classes if params.classes else "" }}"
-        {% if params.id %}id="{{ params.id }}"{% endif %}{% if params.descriptionListLabel %}
+        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.id %}id="{{ params.id }}"{% endif %}
+        {% if params.descriptionListLabel %}
             title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"
         {% endif %}
     >
         {% for item in params.itemsList %}
-            {% if item.term | length %}
-                <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
-            {% endif %}
-            {% for descriptionItem in item.descriptions %}
-                {% if descriptionItem.description | length %}
-                    <dd
-                        {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m"
+            <div class="ons-description-list__item">
+                {% if item.term | length %}
+                    <dt
+                        class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
                     >
-                        {{- descriptionItem.description -}}
-                    </dd>
+                        {{- item.term -}}
+                    </dt>
                 {% endif %}
-            {% endfor %}
+                {% for descriptionItem in item.descriptions %}
+                    {% if descriptionItem.description | length %}
+                        <dd
+                            {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}
+                            class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
+                        >
+                            {%- if descriptionItem.url -%}
+                                <a class="ons-description-list__link" href="{{ descriptionItem.url }}">
+                                    {{- descriptionItem.description -}}
+                                </a>
+                            {%- else -%}
+                                {{- descriptionItem.description -}}
+                            {%- endif -%}
+                        </dd>
+                    {% endif %}
+                {% endfor %}
+            </div>
         {% endfor %}
     </dl>
 {% endmacro %}

package/components/description-list/_macro.spec.js

@@ -1,7 +1,6 @@
 /** @jest-environment jsdom */
 
 import * as cheerio from 'cheerio';
-
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
@@ -31,6 +30,7 @@ const EXAMPLE_DESCRIPTION_LIST_FULL = {
                 {
                     id: 'description-3',
                     description: '49300005832',
+                    url: '#',
                 },
             ],
         },
@@ -87,6 +87,17 @@ describe('macro: description-list', () => {
         expect($('#example-id').length).toBe(1);
     });
 
+    it('has the provided variant style class when variant is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('description-list', {
+                ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+                variant: 'inline',
+            }),
+        );
+
+        expect($('.ons-description-list').hasClass('ons-description-list--inline')).toBe(true);
+    });
+
     it('has additionally provided style classes', () => {
         const $ = cheerio.load(
             renderComponent('description-list', {
@@ -132,7 +143,9 @@ describe('macro: description-list', () => {
 
         expect($listElements[4].tagName).toBe('dd');
         expect($($listElements[4]).attr('id')).toBe('description-3');
-        expect($($listElements[4]).text()).toBe('49300005832');
+        const $link = $($listElements[4]).find('a');
+        expect($link.attr('href')).toBe('#');
+        expect($link.text()).toBe('49300005832');
     });
 
     it.each([

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

@@ -0,0 +1,59 @@
+{% from "components/description-list/_macro.njk" import onsDescriptionList %}
+{{
+    onsDescriptionList({
+        "classes": "ons-u-mb-no",
+        "descriptionListLabel": "Information about this business and its survey requirements",
+        "variant": 'inline',
+        "termCol": "4",
+        "descriptionCol": "8",
+        "itemsList": [
+            {
+                "term": "Survey:",
+                "descriptions": [
+                    {
+                        "description": "Bricks & Blocks"
+                    }
+                ]
+            },
+            {
+                "term": "RU Refs:",
+                "descriptions": [
+                    {
+                        "description": "49900000118"
+                    },
+                    {
+                        "description": "49300005832"
+                    }
+                ]
+            },
+            {
+                "term": "Business:",
+                "descriptions": [
+                    {
+                        "description": "Bolts & Ratchets Ltd."
+                    }
+                ]
+            },
+            {
+                "term": "Trading as:",
+                "descriptions": [
+                    {
+                        "description": "Bolts & Ratchets"
+                    }
+                ]
+            },
+            {
+                "term": "To:",
+                "descriptions": [
+                    {
+                        "description": "Jacky Turner"
+                    },
+                    {
+                        "description": "Louise Goodland",
+                        'url': '#'
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/header/_macro.njk

@@ -218,118 +218,120 @@
                 </nav>
             {% endif %}
         </div>
-        <div class="ons-header__main">
-            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-                <div
-                    class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap{{ ' ons-grid--gutterless' if not params.button }}"
-                >
-                    <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
-                        {% if params.titleLogo.large %}
+        {% if params.variants != "basic" %}
+            <div class="ons-header__main">
+                <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
+                    <div
+                        class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap{{ ' ons-grid--gutterless' if not params.button }}"
+                    >
+                        <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
+                            {% if params.titleLogo.large %}
 
-                            {% set title %}
-                                <div
-                                    class="ons-header__title-logo ons-header__title-logo--large{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}{{ ' ons-u-d-no@2xs@s' if params.titleLogo.small }}"
-                                >
-                                    {{ params.titleLogo.large | safe }}
-                                </div>
-                                {% if params.titleLogo.small %}
+                                {% set title %}
                                     <div
-                                        class="ons-header__title-logo ons-header__title-logo--small ons-u-d-no@s{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}"
+                                        class="ons-header__title-logo ons-header__title-logo--large{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}{{ ' ons-u-d-no@2xs@s' if params.titleLogo.small }}"
                                     >
-                                        {{ params.titleLogo.small | safe }}
+                                        {{ params.titleLogo.large | safe }}
                                     </div>
-                                {% endif %}
-                            {% endset %}
+                                    {% if params.titleLogo.small %}
+                                        <div
+                                            class="ons-header__title-logo ons-header__title-logo--small ons-u-d-no@s{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}"
+                                        >
+                                            {{ params.titleLogo.small | safe }}
+                                        </div>
+                                    {% endif %}
+                                {% endset %}
 
-                            {% if params.titleUrl %}
-                                <a class="ons-header__title-logo-link" href="{{ params.titleUrl }}">{{ title | safe }}</a>
+                                {% if params.titleUrl %}
+                                    <a class="ons-header__title-logo-link" href="{{ params.titleUrl }}">{{ title | safe }}</a>
+                                {% else %}
+                                    {{ title | safe }}
+                                {% endif %}
                             {% else %}
-                                {{ title | safe }}
-                            {% endif %}
-                        {% else %}
 
-                            {% set title %}
-                                {{ openingTag | safe }}
-                                class="ons-header__title">{{ params.title }}{{ closingTag | safe }}
-                            {% endset %}
+                                {% set title %}
+                                    {{ openingTag | safe }}
+                                    class="ons-header__title">{{ params.title }}{{ closingTag | safe }}
+                                {% endset %}
 
-                            {% if params.titleUrl %}
-                                <a class="ons-header__title-link" href="{{ params.titleUrl }}">{{ title | safe }}</a>
-                            {% else %}
-                                {{ title | safe }}
+                                {% if params.titleUrl %}
+                                    <a class="ons-header__title-link" href="{{ params.titleUrl }}">{{ title | safe }}</a>
+                                {% else %}
+                                    {{ title | safe }}
+                                {% endif %}
                             {% endif %}
-                        {% endif %}
-                        {% if params.description %}
-                            <p class="ons-header__description">{{ params.description }}</p>
-                        {% endif %}
-                    </div>
+                            {% if params.description %}
+                                <p class="ons-header__description">{{ params.description }}</p>
+                            {% endif %}
+                        </div>
 
-                    {% if params.button %}
-                        {% if params.variants == 'neutral' %}
-                            {% set buttonVariant = "ghost-dark" %}
-                        {% else %}
-                            {% set buttonVariant = "ghost" %}
+                        {% if params.button %}
+                            {% if params.variants == 'neutral' %}
+                                {% set buttonVariant = "ghost-dark" %}
+                            {% else %}
+                                {% set buttonVariant = "ghost" %}
+                            {% endif %}
+                            <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
+                                {{
+                                    onsButton({
+                                        "text": params.button.text,
+                                        "classes": "ons-u-d-no@2xs@l" if params.navigation else "ons-u-d-no@2xs@m",
+                                        "variants": buttonVariant,
+                                        "name": params.button.name,
+                                        "attributes": params.button.attributes,
+                                        "url": params.button.url,
+                                        "iconType": "exit",
+                                        "iconPosition": "after"
+                                    })
+                                }}
+                            </div>
                         {% endif %}
-                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
-                            {{
-                                onsButton({
-                                    "text": params.button.text,
-                                    "classes": "ons-u-d-no@2xs@l" if params.navigation else "ons-u-d-no@2xs@m",
-                                    "variants": buttonVariant,
-                                    "name": params.button.name,
-                                    "attributes": params.button.attributes,
-                                    "url": params.button.url,
-                                    "iconType": "exit",
-                                    "iconPosition": "after"
-                                })
-                            }}
-                        </div>
-                    {% endif %}
-                    {% if params.navigation or params.siteSearchAutosuggest %}
-                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
-                            {% if params.siteSearchAutosuggest %}
-                                {% if params.variants == 'neutral' %}
-                                    {% set buttonVariant = ["small", "ghost-dark"] %}
-                                {% else %}
-                                    {% set buttonVariant = ["small", "ghost"] %}
+                        {% if params.navigation or params.siteSearchAutosuggest %}
+                            <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
+                                {% if params.siteSearchAutosuggest %}
+                                    {% if params.variants == 'neutral' %}
+                                        {% set buttonVariant = ["small", "ghost-dark"] %}
+                                    {% else %}
+                                        {% set buttonVariant = ["small", "ghost"] %}
+                                    {% endif %}
+                                    <span class="ons-grid ons-u-d-no@2xs@xs ons-u-ml-no ons-u-d-no@l">
+                                        {{
+                                            onsButton({
+                                                "text": "Search",
+                                                "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
+                                                "variants": buttonVariant,
+                                                "iconType": "search",
+                                                "iconPosition": "only",
+                                                "attributes": {
+                                                    "aria-label": "Toggle search" ,
+                                                    "aria-controls": "ons-site-search",
+                                                    "aria-expanded": "false"
+                                                }
+                                            })
+                                        }}
+                                    </span>
                                 {% endif %}
-                                <span class="ons-grid ons-u-d-no@2xs@xs ons-u-ml-no ons-u-d-no@l">
+                                {% if params.navigation.toggleNavigationButton %}
+                                    {% set buttonVariant = ["mobile", "ghost"] %}
                                     {{
                                         onsButton({
-                                            "text": "Search",
-                                            "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
+                                            "text": params.navigation.toggleNavigationButton.text,
+                                            "classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
                                             "variants": buttonVariant,
-                                            "iconType": "search",
-                                            "iconPosition": "only",
                                             "attributes": {
-                                                "aria-label": "Toggle search" ,
-                                                "aria-controls": "ons-site-search",
+                                                "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
+                                                "aria-controls": params.navigation.id,
                                                 "aria-expanded": "false"
                                             }
                                         })
                                     }}
-                                </span>
-                            {% endif %}
-                            {% if params.navigation.toggleNavigationButton %}
-                                {% set buttonVariant = ["mobile", "ghost"] %}
-                                {{
-                                    onsButton({
-                                        "text": params.navigation.toggleNavigationButton.text,
-                                        "classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
-                                        "variants": buttonVariant,
-                                        "attributes": {
-                                            "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
-                                            "aria-controls": params.navigation.id,
-                                            "aria-expanded": "false"
-                                        }
-                                    })
-                                }}
-                            {% endif %}
-                        </div>
-                    {% endif %}
+                                {% endif %}
+                            </div>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
-        </div>
+        {% endif %}
         {% if params.navigation %}
             {{ onsNavigation(params) }}
         {% endif %}

package/components/header/_macro.spec.js

@@ -43,6 +43,16 @@ describe('FOR: Macro: Header', () => {
                 expect($('.ons-header--variant-b').length).toBe(1);
             });
         });
+        describe('WHEN: variants is set to basic', () => {
+            test('THEN: does not render the main part of the header', () => {
+                const $ = cheerio.load(
+                    renderComponent('header', {
+                        variants: 'basic',
+                    }),
+                );
+                expect($('.ons-header > .ons-header__main').length).toBe(0);
+            });
+        });
     });
     describe('GIVEN: Params: classes', () => {
         describe('WHEN: classes are provided', () => {

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

@@ -0,0 +1,11 @@
+---
+'fullWidth': true
+---
+
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "variants": 'basic'
+    })
+}}