@ons/design-system 72.1.0 → 72.1.2

package/components/field/_macro.spec.js

@@ -5,91 +5,128 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
-const EXAMPLE_FIELD_BASIC = {
-    id: 'example-field',
-};
-
-describe('macro: field', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+describe('FOR: Macro: Field', () => {
+    describe('GIVEN: Params: none', () => {
+        describe('WHEN: no params are provided', () => {
+            const $ = cheerio.load(renderComponent('field'));
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
 
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
-
-        expect($('.ons-field').attr('id')).toBe('example-field');
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    id: 'example-field',
+                }),
+            );
+            test('THEN: renders with the provided id', () => {
+                expect($('.ons-field').attr('id')).toBe('example-field');
+            });
+        });
     });
 
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-field').hasClass('extra-class')).toBe(true);
-        expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-field').hasClass('extra-class')).toBe(true);
+                expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it('has correct class when `inline` is provided', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                inline: true,
-            }),
-        );
-
-        expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
+    describe('GIVEN: Params: inline', () => {
+        describe('WHEN: inline is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    inline: true,
+                }),
+            );
+            test('THEN: renders with the inline class', () => {
+                expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
+            });
+        });
     });
 
-    it('has additionally provided `attributes`', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                attributes: {
-                    a: 123,
-                    b: 456,
-                },
-            }),
-        );
-
-        expect($('.ons-field').attr('a')).toBe('123');
-        expect($('.ons-field').attr('b')).toBe('456');
+    describe('GIVEN: Params: attributes', () => {
+        describe('WHEN: custom attributes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                }),
+            );
+            test('THEN: renders with additionally provided attributes', () => {
+                expect($('.ons-field').attr('a')).toBe('123');
+                expect($('.ons-field').attr('b')).toBe('456');
+            });
+        });
     });
 
-    it('has the correct element with `dontWrap`', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                dontWrap: true,
-            }),
-        );
-
-        expect($('.ons-field').length).toBe(0);
-    });
+    describe('GIVEN: Params: dontWrap', () => {
+        describe('WHEN: dontWrap is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    dontWrap: true,
+                }),
+            );
+            test('THEN: renders the content without being wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(0);
+            });
+        });
 
-    it('calls with content', () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
+        describe('WHEN: dontWrap is set to false', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    dontWrap: false,
+                }),
+            );
+            test('THEN: renders the content wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(1);
+            });
+        });
 
-        const content = $('.ons-field').html().trim();
-        expect(content).toEqual(expect.stringContaining('Example content...'));
+        describe('WHEN: dontWrap is not provided', () => {
+            const $ = cheerio.load(renderComponent('field', {}));
+            test('THEN: renders the content wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(1);
+            });
+        });
     });
 
-    it('calls the error component when `error` is provided', () => {
-        const faker = templateFaker();
-        const errorSpy = faker.spy('error');
-
-        faker.renderComponent('field', {
-            ...EXAMPLE_FIELD_BASIC,
-            error: { text: 'There is an error' },
+    describe('GIVEN: Params: error', () => {
+        describe('WHEN: error is provided', () => {
+            const faker = templateFaker();
+            const errorSpy = faker.spy('error');
+
+            faker.renderComponent('field', {
+                error: { text: 'There is an error' },
+            });
+            test('THEN" calls the error component', () => {
+                expect(errorSpy.occurrences[0]).toEqual({
+                    text: 'There is an error',
+                });
+            });
         });
+    });
 
-        expect(errorSpy.occurrences[0]).toEqual({
-            text: 'There is an error',
+    describe('GIVEN: Content', () => {
+        describe('WHEN: field is called with content provided', () => {
+            const $ = cheerio.load(renderComponent('field', {}, 'Example content...'));
+            const content = $('.ons-field').html().trim();
+            test('THEN: renders the field with the provided content', () => {
+                expect(content).toEqual(expect.stringContaining('Example content...'));
+            });
         });
     });
 });

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'
+    })
+}}