@ons/design-system 67.0.5 → 67.1.0

package/components/duration/_macro.njk

@@ -1,12 +1,7 @@
-
-{% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
-{% from "components/fieldset/_macro.njk" import onsFieldset %}
-{% from "components/field/_macro.njk" import onsField %}
-{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/date-field-input/_macro.njk" import onsDateFieldInput %}
 
 {% macro onsDuration(params) %}
     {% set numberOfFields = 0 %}
-
     {% if params.field1 %}
         {% set numberOfFields = numberOfFields + 1 %}
     {% endif %}
@@ -15,85 +10,65 @@
         {% set numberOfFields = numberOfFields + 1 %}
     {% endif %}
 
-    {% set fields %}
-        {% if params.field1 %}
-            {{ onsInput({
-                "id": params.field1.id,
-                "classes": (" ons-input--error" if (params.error and params.field1.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + (" ons-js-exclusive-group-item" if params.mutuallyExclusive else ""),
-                "width": "2",
-                "type": "number",
-                "name": params.field1.name,
-                "value": params.field1.value,
-                "suffix": {
-                    "text": params.field1.suffix.text,
-                    "title": params.field1.suffix.title,
-                    "id": params.field1.suffix.id
-                },
-                "label": {
-                    "text": params.legendOrLabel if numberOfFields < 2,
-                    "description": params.description if numberOfFields < 2
-                },
-                "attributes": params.field1.attributes,
-                "fieldId": params.id if numberOfFields < 2,
-                "error": params.error if numberOfFields < 2
-            }) }}
-        {% endif %}
-
-        {% if params.field2 %}
-            {{ onsInput({
-                "id": params.field2.id,
-                "classes": (" ons-input--error" if (params.error and params.field2.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + (" ons-js-exclusive-group-item" if params.mutuallyExclusive else ""),
-                "width": "2",
-                "type": "number",
-                "name": params.field2.name,
-                "value": params.field2.value,
-                "suffix": {
-                    "text": params.field2.suffix.text,
-                    "title": params.field2.suffix.title,
-                    "id": params.field2.suffix.id
-                },
-                "label": {
-                    "text": params.legendOrLabel if numberOfFields < 2,
-                    "description": params.description if numberOfFields < 2
-                },
-                "attributes": params.field2.attributes,
-                "fieldId": params.id if numberOfFields < 2,
-                "error": params.error if numberOfFields < 2
-            }) }}
-        {% endif %}
-    {% endset %}
-
-    {% if params.mutuallyExclusive %}
-        {% set mutuallyExclusive = params.mutuallyExclusive | setAttributes({
-            "id": params.id,
-            "legend": params.legendOrLabel,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "error": params.error,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "dontWrap": params.dontWrap
-        }) %}
+    {% set fields = [] %}
+    {% if params.field1 %}
+        {% set field1 = {
+            "id": params.field1.id,
+            "name": params.field1.name,
+            "attributes": params.field1.attributes,
+            "label": {
+                "text": params.legendOrLabel if numberOfFields < 2,
+                "description": params.description if numberOfFields < 2
+            },
+            "suffix": {
+                "text": params.field1.suffix.text,
+                "title": params.field1.suffix.title,
+                "id": params.field1.suffix.id
+            },
+            "width": "2",
+            "fieldId": params.id if numberOfFields < 2,
+            "value": params.field1.value, 
+            "error": params.error if numberOfFields < 2,
+            "classes": (" ons-input--error" if (params.error and params.field1.error) or (params.error and not params.field1.error and not params.field2.error) else "") + (" ons-js-exclusive-group-item" if params.mutuallyExclusive else "")
+        } %}
+        {% set fields = (fields.push(field1), fields) %}
+    {% endif %}
 
-        {% call onsMutuallyExclusive(mutuallyExclusive) %}
-            <div class="ons-field-group">
-                {{ fields | safe }}
-            </div>
-        {% endcall %}
-    {% elif numberOfFields > 1 %}
-        {% call onsFieldset({
-            "id": params.id,
-            "legend": params.legendOrLabel,
-            "description": params.description,
-            "legendClasses": params.legendClasses,
-            "error": params.error,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "dontWrap": params.dontWrap
-        }) %}
-            <div class="ons-field-group">
-                {{ fields | safe }}
-            </div>
-        {% endcall %}
-    {% else %}
-        {{ fields | safe }}
+    {% if params.field2 %}
+        {% set field2 = {
+            "id": params.field2.id,
+            "name": params.field2.name,
+            "attributes": params.field2.attributes,
+            "width": "2",
+            "label": { 
+                "text": params.legendOrLabel if numberOfFields < 2,
+                "description": params.description if numberOfFields < 2
+            },  
+            "suffix": {
+                "text": params.field2.suffix.text,
+                "title": params.field2.suffix.title,
+                "id": params.field2.suffix.id
+            },
+            "value": params.field2.value,
+            "error": params.error if numberOfFields < 2,
+            "fieldId": params.id if numberOfFields < 2,
+            "classes": (" ons-input--error" if (params.error and params.field2.error) or (params.error and not params.field1.error and not params.field2.error) else "") + (" ons-js-exclusive-group-item" if params.mutuallyExclusive else "")
+        } %}
+        {% set fields = (fields.push(field2), fields) %}
     {% endif %}
+  
+    {{ onsDateFieldInput({
+        "id": params.id,
+        "legendOrLabel": params.legendOrLabel,
+        "description": params.description,
+        "mutuallyExclusive": params.mutuallyExclusive,
+        "numberOfFields": numberOfFields,
+        "fields": fields,
+        "error": params.error,
+        "legend": params.legendOrLabel,
+        "dontWrap": params.dontWrap,
+        "classes": params.classes,
+        "legendClasses": params.legendClasses,
+        "legendIsQuestionTitle": params.legendIsQuestionTitle
+    }) }}
 {% endmacro %}

package/components/header/_header.scss

@@ -13,6 +13,7 @@
   }
   &__grid-top {
     padding: 1rem 0;
+    row-gap: 0.5rem;
 
     @include mq(xs) {
       padding: 0.75rem 0;
@@ -142,6 +143,7 @@
 
   .ons-icon--logo {
     display: block;
+    width: 100%;
   }
 
   &__org-logo-link,
@@ -176,6 +178,12 @@
     }
   }
 
+  &__org-logo--multi {
+    display: inline-flex;
+    column-gap: 1rem;
+    align-items: center;
+  }
+
   &-service-nav {
     display: inline-block;
 

package/components/header/_macro.njk

@@ -32,45 +32,69 @@
         {% endif %}
         <div class="ons-header__top">
             <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{% if params.mastheadLogo.classes %} {{ params.mastheadLogo.classes }}{% endif %}">
+                <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center{% if params.mastheadLogo.classes %} {{ params.mastheadLogo.classes }}{% endif %}{% if not params.mastheadLogo.multipleLogos %} ons-grid--no-wrap ons-grid--gutterless{% endif%}">
                     <div class="ons-grid__col ons-col-auto">
-                        {%-if params.mastheadLogoUrl %}
-                            <a class="ons-header__org-logo-link" href="{{ params.mastheadLogoUrl }}">
-                        {% endif -%}
-                        <div class="ons-header__org-logo ons-header__org-logo--large">
-                            {% if params.mastheadLogo.large %}
-                                {{ params.mastheadLogo.large | safe }}
-                            {% else %}
-                                {{-
-                                    onsIcon({
-                                        "iconType": 'ons-logo-' + currentLanguageISOCode,
-                                        "altText": 'Office for National Statistics logo'
-                                    })
-                                -}}
-                            {% endif %}
-                        </div>
-                        <div class="ons-header__org-logo ons-header__org-logo--small">
-                            {% if params.mastheadLogo.small %}
-                                {{ params.mastheadLogo.small | safe }}
-                            {% elif params.mastheadLogo.large %}
-                                {{ params.mastheadLogo.large | safe }}
-                            {% else %}
-                                {{-
-                                    onsIcon({
-                                        "iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
-                                        "altText": 'Office for National Statistics logo'
-                                    })
-                                -}}
+                        {%- if not params.mastheadLogo.multipleLogos %}
+                            {%-if params.mastheadLogoUrl %}
+                                <a class="ons-header__org-logo-link" href="{{ params.mastheadLogoUrl }}">
+                            {% endif -%}
+                            <div class="ons-header__org-logo ons-header__org-logo--large">
+                                {% if params.mastheadLogo.large %}
+                                    {{ params.mastheadLogo.large | safe }}
+                                {% else %}
+                                    {{-
+                                        onsIcon({
+                                            "iconType": 'ons-logo-' + currentLanguageISOCode,
+                                            "altText": 'Office for National Statistics logo'
+                                        })
+                                    -}}
+                                {% endif %}
+                            </div>
+                            <div class="ons-header__org-logo ons-header__org-logo--small">
+                                {% if params.mastheadLogo.small %}
+                                    {{ params.mastheadLogo.small | safe }}
+                                {% elif params.mastheadLogo.large %}
+                                    {{ params.mastheadLogo.large | safe }}
+                                {% else %}
+                                    {{-
+                                        onsIcon({
+                                         "iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
+                                            "altText": 'Office for National Statistics logo'
+                                        })
+                                    -}}
+                                {% endif %}
+                            </div>
+                            {% if params.mastheadLogoUrl %}
+                                </a>
                             {% endif %}
-                        </div>
-                        {% if params.mastheadLogoUrl %}
-                            </a>
-                        {% endif %}
+                        {% else %}
+                            <div class="ons-header__org-logo ons-header__org-logo--multi">
+                                {% set logos = [params.mastheadLogo.multipleLogos.logo1, params.mastheadLogo.multipleLogos.logo2, params.mastheadLogo.multipleLogos.logo3] %}
+                                {% for logo in logos %}
+                                    {% if logo.logoURL %}
+                                        <a class="ons-header__org-logo-link" href="{{ logo.logoURL }}">
+                                    {% endif %}
+                                    {% if logo.logoImage != "ONS Logo" %}
+                                        {{ logo.logoImage | safe }}
+                                    {% else %}
+                                        {{-
+                                            onsIcon({
+                                                "iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
+                                                "altText": 'Office for National Statistics logo'
+                                            })
+                                        -}}
+                                    {% endif %}
+                                    {% if logo.logoURL %}
+                                        </a>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                        {% endif -%}
                     </div>
                     {% if params.language or params.serviceLinks %}
-                        <div class="ons-header__links ons-grid__col ons-col-auto">
+                        <div class="ons-header__links ons-grid__col ons-u-ml-auto">
                             {% if params.language %}
-                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks else '' }}">
+                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks else '' }}">
                                     {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                     {{ onsLanguageSelector(params.language) }}
                                 </div>
@@ -169,7 +193,7 @@
         </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--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
+                <div class="ons-grid{{ ' ons-grid--gutterless' if not params.button }} ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                         {% if params.titleLogo.large %}
                             {% if params.titleUrl %}

package/components/header/_macro.spec.js

@@ -318,6 +318,93 @@ describe('macro: header', () => {
       expect($('.ons-header__org-logo--small img').attr('src')).toBe('another-logo-small.svg');
     });
 
+    describe('mode: with multiple logos', () => {
+      it('has the default ONS icon when requested', () => {
+        const faker = templateFaker();
+        const iconsSpy = faker.spy('icon');
+
+        faker.renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          mastheadLogo: {
+            multipleLogos: {
+              logo1: {
+                logoImage: 'ONS Logo',
+              },
+            },
+          },
+        });
+        expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-stacked-en');
+      });
+
+      it('has the provided link', () => {
+        const $ = cheerio.load(
+          renderComponent('header', {
+            ...EXAMPLE_HEADER_BASIC,
+            mastheadLogo: {
+              multipleLogos: {
+                logo1: {
+                  logoImage: '<img src="a-logo.svg">',
+                  logoURL: '#0',
+                },
+              },
+            },
+          }),
+        );
+
+        expect($('.ons-header__org-logo-link').attr('href')).toBe('#0');
+      });
+
+      it('when multiple images are provided all show', () => {
+        const $ = cheerio.load(
+          renderComponent('header', {
+            ...EXAMPLE_HEADER_BASIC,
+            mastheadLogo: {
+              multipleLogos: {
+                logo1: {
+                  logoImage: '<img src="a-logo.svg">',
+                },
+                logo2: {
+                  logoImage: '<img src="a-second-logo.svg">',
+                },
+                logo3: {
+                  logoImage: '<img src="a-third-logo.svg">',
+                },
+              },
+            },
+          }),
+        );
+
+        expect($('.ons-header__org-logo--multi img').attr('src')).toBe('a-logo.svg');
+        expect($('.ons-header__org-logo--multi img:nth-of-type(2)').attr('src')).toBe('a-second-logo.svg');
+        expect($('.ons-header__org-logo--multi img:nth-of-type(3)').attr('src')).toBe('a-third-logo.svg');
+      });
+
+      it('renders multiple logos even when small/large parameters are used', () => {
+        const $ = cheerio.load(
+          renderComponent('header', {
+            ...EXAMPLE_HEADER_BASIC,
+            mastheadLogo: {
+              small: '<img src="small-logo.svg">',
+              large: '<img src="big-logo.svg">',
+              multipleLogos: {
+                logo1: {
+                  logoImage: '<img src="a-logo.svg">',
+                },
+                logo2: {
+                  logoImage: '<img src="a-second-logo.svg">',
+                },
+                logo3: {
+                  logoImage: '<img src="a-third-logo.svg">',
+                },
+              },
+            },
+          }),
+        );
+        expect($('.ons-header__org-logo--large').attr('src')).toBe(undefined);
+        expect($('.ons-header__org-logo--multi img').attr('src')).toBe('a-logo.svg');
+      });
+    });
+
     it('displays the `title` text', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_BASIC));
 
@@ -407,6 +494,34 @@ describe('macro: header', () => {
       });
     });
 
+    it('has gutterless class if there is no button present', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+        }),
+      );
+
+      const titleGridDiv = $('.ons-header__main .ons-container .ons-grid');
+      expect($(titleGridDiv).hasClass('ons-grid--gutterless')).toBe(true);
+    });
+
+    it('has does not have gutterless class if there is a button present', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          button: {
+            text: 'Save and sign out',
+            url: '#0',
+            iconType: 'exit',
+            iconPosition: 'after',
+          },
+        }),
+      );
+
+      const titleGridDiv = $('.ons-header__main .ons-container .ons-grid');
+      expect($(titleGridDiv).hasClass('ons-grid--gutterless')).toBe(false);
+    });
+
     it('renders the phase banner with expected parameters', () => {
       const faker = templateFaker();
       const phaseSpy = faker.spy('phase-banner');