@ons/design-system 54.0.1 → 55.2.0

package/components/duration/_macro.njk

@@ -7,26 +7,26 @@
 {% macro onsDuration(params) %}
     {% set numberOfFields = 0 %}
 
-    {% if params.field1 is defined and params.field1 %}
+    {% if params.field1 %}
         {% set numberOfFields = numberOfFields + 1 %}
     {% endif %}
 
-    {% if params.field2 is defined and params.field2 %}
+    {% if params.field2 %}
         {% set numberOfFields = numberOfFields + 1 %}
     {% endif %}
 
     {% set fields %}
-        {% if params.field1 is defined and params.field1 %}
+        {% if params.field1 %}
             {{ onsInput({
                 "id": params.field1.id,
-                "classes": (" ons-input--error" if (params.error is defined and params.error and params.field1.error is defined and params.field1.error) or (numberOfFields > 1 and params.error is defined and params.error and not params.field1.error and not params.field2.error) else "") + (" ons-js-exclusive-group-item" if params.mutuallyExclusive else ""),
+                "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 | default(params.field1.suffix.text),
+                    "title": params.field1.suffix.title,
                     "id": params.field1.suffix.id
                 },
                 "label": {
@@ -39,17 +39,17 @@
             }) }}
         {% endif %}
 
-        {% if params.field2 is defined and params.field2 %}
+        {% if params.field2 %}
             {{ onsInput({
                 "id": params.field2.id,
-                "classes": (" ons-input--error" if (params.error is defined and params.error and params.field2.error is defined and params.field2.error) or (numberOfFields > 1 and params.error is defined and params.error and not params.field1.error and not params.field2.error) else "") + (" ons-js-exclusive-group-item" if params.mutuallyExclusive else ""),
+                "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 | default(params.field2.suffix.text),
+                    "title": params.field2.suffix.title,
                     "id": params.field2.suffix.id
                 },
                 "label": {
@@ -63,7 +63,7 @@
         {% endif %}
     {% endset %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% set mutuallyExclusive = params.mutuallyExclusive | setAttributes({
             "id": params.id,
             "legend": params.legendOrLabel,

package/components/duration/_macro.spec.js

@@ -78,7 +78,6 @@ describe('macro: duration', () => {
         suffix: {
           id: 'address-duration-years-suffix',
           text: 'Years',
-          title: 'Years',
         },
       });
 
@@ -100,7 +99,6 @@ describe('macro: duration', () => {
         suffix: {
           id: 'address-duration-months-suffix',
           text: 'Months',
-          title: 'Months',
         },
       });
     });
@@ -228,7 +226,6 @@ describe('macro: duration', () => {
         suffix: {
           id: 'address-duration-years-suffix',
           text: 'Years',
-          title: 'Years',
         },
       });
     });

package/components/error/_macro.njk

@@ -4,7 +4,7 @@
     {% set content %}
         <p
             class="ons-panel__error"
-            {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% 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 %}
         >
             <strong>{{ params.text }}</strong>
         </p>

package/components/external-link/_macro.njk

@@ -1,10 +1,10 @@
 {# Icon needed to be directly put here instead of calling macro to solve an issue with extra space on the end of links being underlined #}
 {% macro onsExternalLink(params) %}
-    <a href="{{ params.url }}" class="ons-external-link{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}" target="_blank" rel="noopener">
+    <a href="{{ params.url }}" class="ons-external-link{% if params.classes %} {{ params.classes }}{% endif %}" target="_blank" rel="noopener">
         <span class="ons-external-link__text">
         {{- params.linkText | safe -}}
         </span><span class="ons-external-link__icon">&nbsp;<svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
         <path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)"/>
         <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"/>
-    </svg></span><span class="ons-external-link__new-window-description ons-u-vh">({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>
+    </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> ({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>
 {% endmacro %}

package/components/external-link/_macro.spec.js

@@ -54,7 +54,7 @@ describe('macro: external-link', () => {
   it('has a default new window description', async () => {
     const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
 
-    expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
+    expect($('.ons-external-link__new-window-description').text()).toBe(' (opens in a new tab)');
   });
 
   it('has a custom new window description when `newWindowDescription` is provided', () => {
@@ -65,7 +65,7 @@ describe('macro: external-link', () => {
       }),
     );
 
-    expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
+    expect($('.ons-external-link__new-window-description').text()).toBe(' (custom opens in a new tab text)');
   });
 
   it('has an "external-link" icon', async () => {

package/components/feedback/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsFeedback(params) %}
     {% set headingLevel = params.headingLevel | default("2") %}
-    <div {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %} class="ons-feedback{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}">
-        <h{{ headingLevel }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses is defined and params.headingClasses }}">
+    <div {% if params.id %} id="{{ params.id }}"{% endif %} class="ons-feedback{% if params.classes %} {{ params.classes }}{% endif %}">
+        <h{{ headingLevel }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses }}">
             {{ params.heading }}
         </h{{ headingLevel }}>
         <p class="ons-feedback__content">{{- params.content | safe -}}</p>

package/components/field/_macro.njk

@@ -6,20 +6,20 @@
     {% endif %}
 
     {% set field %}
-        {% if params.dontWrap is defined and params.dontWrap %}
+        {% if params.dontWrap %}
             {{- caller() if caller -}}
         {% else %}
             <div
-                {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
-                class="ons-field{% if params.inline is defined and params.inline %} ons-field--inline{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
-                {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+                {% if params.id %}id="{{ params.id }}"{% endif %}
+                class="ons-field{% if params.inline %} ons-field--inline{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
+                {% 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 %}
             >
                 {{- caller() if caller -}}
             </div>
         {% endif %}
     {% endset %}
 
-    {% if params.error is defined and params.error %}
+    {% if params.error %}
         {% call onsError(params.error) %}
             {{ field | safe }}
         {% endcall %}

package/components/fieldset/_fieldset.scss

@@ -1,11 +1,21 @@
 .ons-fieldset {
   &__legend {
     font-weight: $font-weight-bold;
-    margin: 0 0 0.6rem;
+    margin: 0;
+    &:not(&--with-description) {
+      margin-bottom: 0.55rem;
+    }
+    &-title {
+      display: block;
+      margin: 0;
+      padding: 0 0 1.5rem;
+    }
   }
 
   &__description:not(&__description--title) {
     @extend .ons-label__description;
+
+    margin-bottom: 0.55rem;
   }
 
   &__description--title {

package/components/fieldset/_macro.njk

@@ -1,37 +1,38 @@
 {% from "components/error/_macro.njk" import onsError %}
 
 {% macro onsFieldset(params) %}
+    {% set descriptionID = (params.id ~ "-" if params.id else "") ~ "legend-description" %}
     {% set fieldset -%}
-        {% if params.dontWrap is defined and params.dontWrap -%}
+        {% if params.dontWrap -%}
             <div class="ons-input-items">
                 {{- caller() if caller -}}
             </div>
-        {%- elif (params.legend is defined and params.legend) or (params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle) -%}
+        {%- elif params.legend or params.legendIsQuestionTitle -%}
             <fieldset
-                {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
-                class="ons-fieldset{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
-                {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+                {% if params.id %}id="{{ params.id }}"{% endif %}
+                class="ons-fieldset{% if params.classes %} {{ params.classes }}{% endif %}"
+                {% 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 %}
             >
-                <legend class="ons-fieldset__legend{% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
+                <legend{% if params.description %} aria-describedBy="{{ descriptionID }}"{% endif %} class="ons-fieldset__legend{% if params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses %} {{ params.legendClasses }}{% endif %}{% if params.description %} ons-fieldset__legend--with-description{% endif %}">
                     {%- if params.legendIsQuestionTitle -%}
-                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-u-mb-m{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
+                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title{% if params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
                             {{- params.legend | safe -}}
                         </h1>
                     {%- else -%}
-                        <span class="ons-fieldset__legend-title">{{- params.legend | safe -}}</span>
-                    {%- endif -%}
-                    {%- if params.description is defined and params.description -%}
-                        <div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
-                            {{- params.description | safe -}}
-                        </div>
+                        <span class="ons-fieldset__legend-title ons-u-pb-no">{{- params.legend | safe -}}</span>
                     {%- endif -%}
                 </legend>
+                {%- if params.description -%}
+                    <div id="{{ descriptionID }}" class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
+                        {{- params.description | safe -}}
+                    </div>
+                {%- endif -%}
                 {{- caller() if caller -}}
             </fieldset>
         {%- endif %}
     {%- endset %}
 
-    {% if params.error is defined and params.error -%}
+    {% if params.error -%}
         {% call onsError(params.error) %}
             {{- fieldset | safe -}}
         {% endcall %}

package/components/fieldset/_macro.spec.js

@@ -32,6 +32,13 @@ describe('macro: fieldset', () => {
     expect(title).toBe('Fieldset legend');
   });
 
+  it('has the correct `aria-decribedby` value', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
+    expect(ariaDescByVal).toBe('example-fieldset-legend-description');
+  });
+
   it('has the `description` text', () => {
     const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
 
@@ -41,6 +48,26 @@ describe('macro: fieldset', () => {
     expect(title).toBe('A fieldset description');
   });
 
+  it('has the correct `description` `id` when no `fieldset `id` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, id: undefined }));
+
+    const id = $('.ons-fieldset__description').attr('id');
+    expect(id).toBe('legend-description');
+  });
+
+  it('has the correct `description` `id` when `fieldset `id` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const id = $('.ons-fieldset__description').attr('id');
+    expect(id).toBe('example-fieldset-legend-description');
+  });
+
+  it('has the correct `legend` class when `description` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true);
+  });
+
   it('has additionally provided style classes', () => {
     const $ = cheerio.load(
       renderComponent('fieldset', {
@@ -123,11 +150,6 @@ describe('macro: fieldset', () => {
       expect(results).toHaveNoViolations();
     });
 
-    it('has the correct class', () => {
-      const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
-      expect($('.ons-fieldset__legend').hasClass('ons-u-mb-no')).toBe(true);
-    });
-
     it('renders the legend in a H1', () => {
       const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
       const titleTag = $('.ons-fieldset__legend-title')[0].tagName;

package/components/footer/_footer.scss

@@ -17,6 +17,7 @@
 
   &__warning {
     background-color: $color-banner-bg-dark;
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
   }
 
   &__license {

package/components/footer/_macro.njk

@@ -3,7 +3,7 @@
     {% from "components/lists/_macro.njk" import onsList %}
     {% from "components/icons/_macro.njk" import onsIcon %}
 
-    {% if params.lang is defined and params.lang %}
+    {% if params.lang %}
         {% set lang = params.lang %}
     {% else %}
         {% set lang = 'en' %}
@@ -30,7 +30,7 @@
     {% endset %}
 
     {% set poweredByLogo %}
-        {% if params.poweredBy is defined and params.poweredBy and params.poweredBy.logo is defined and params.poweredBy.logo %}
+        {% if params.poweredBy and params.poweredBy.logo %}
             {{
                 onsIcon({
                     "iconType": params.poweredBy.logo,
@@ -43,7 +43,7 @@
 
     <footer class="ons-footer">
 
-        {% if params.footerWarning is defined and params.footerWarning %}
+        {% if params.footerWarning %}
             {% from "components/panel/_macro.njk" import onsPanel %}
             <div class="ons-footer__warning">
                 <div class="ons-container">
@@ -58,7 +58,7 @@
             </div>
         {% endif %}
 
-        {% if params.button is defined and params.button %}
+        {% if params.button %}
             {% from "components/button/_macro.njk" import onsButton %}
             <div class="ons-footer__button-container ons-u-d-no@m">
                 {{
@@ -81,16 +81,16 @@
             </div>
         {% endif %}
 
-        <div class="ons-footer__body{{ ' ' + params.classes if params.classes else '' }}" data-analytics="footer" {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>
-            <div class="ons-container{{ ' ons-container--wide' if params.wide }}">
+        <div class="ons-footer__body{{ ' ' + params.classes if params.classes else '' }}" data-analytics="footer" {% if params.attributes %}{% for attribute, value in (params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>
+            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-grid">
-                    {% if params.newTabWarning is defined and params.newTabWarning %}
+                    {% if params.newTabWarning %}
                         <div class="ons-grid__col">
                             <p class="ons-u-fs-s ons-u-mb-m ons-footer__new-tab-warning">{{ params.newTabWarning | safe }}</p>
                         </div>
                     {% endif %}
 
-                    {% if params.cols is defined and params.cols %}
+                    {% if params.cols %}
                         {% for col in params.cols %}
                             <!-- Full footer columns -->
                             <div class="ons-grid__col ons-col-4@m{{ ' ons-u-mt-m@xxs@m' if loop.index > 1 }}">
@@ -106,7 +106,7 @@
                                 }}
                             </div>
                         {% endfor %}
-                    {% elif params.rows is defined and params.rows %}
+                    {% elif params.rows %}
                         {% for row in params.rows %}
                             <!-- Transactional footer row -->
                             <div class="ons-grid__col">
@@ -121,7 +121,7 @@
                         {% endfor %}
                     {% endif %}
 
-                    {% if (params.cols is defined and params.cols) or (params.rows is defined and params.rows) %}
+                    {% if (params.cols) or (params.rows) %}
                         <div class="ons-grid__col ons-u-mb-m">
                             <hr class="ons-footer__hr">
                         </div>
@@ -131,7 +131,7 @@
 
                     <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
                         <div class="ons-grid__col">
-                            {% if params.legal is defined and params.legal %}
+                            {% if params.legal %}
                                 <!-- Legal -->
                                 {% for legal in params.legal %}
                                     {{
@@ -144,7 +144,7 @@
                                 {% endfor %}
                             {% endif %}
 
-                            {% if params.OGLLink == true or params.OGLLink is defined %}
+                            {% if params.OGLLink %}
                                 <!-- OGL -->
                                 <div class="ons-footer__license ons-u-mb-m">
                                     {{
@@ -152,9 +152,9 @@
                                             "iconType": 'ogl'
                                         })
                                     }}
-                                    {% if params.OGLLink.HTML is defined and params.OGLLink.HTML %}
+                                    {% if params.OGLLink.HTML %}
                                         {{ params.OGLLink.HTML | safe }}
-                                    {% elif params.OGLLink == true or params.OGLLink is defined %}
+                                    {% elif params.OGLLink %}
                                         {% from "components/external-link/_macro.njk" import onsExternalLink %}
                                         {% if params.lang == 'cy' %}
                                             {{ params.OGLLink.pre | default('Mae’r holl gynnwys ar gael o dan y') }} {{
@@ -175,7 +175,7 @@
                                 </div>
                             {% endif %}
 
-                            {% if params.poweredBy is defined and params.poweredBy %}
+                            {% if params.poweredBy %}
                                 {% if not params.poweredBy.partnership %}
                                     <div class="ons-footer__poweredby ons-u-mb-m">
                                         {{ poweredByLogo | safe }}
@@ -188,7 +188,7 @@
                             {% endif %}
                         </div>
 
-                        {% if params.crest is defined and params.crest %}
+                        {% if params.crest %}
                             <!-- Crest -->
                             <div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
                                 {{
@@ -200,7 +200,7 @@
                         {% endif %}
                     </div>
 
-                {% if (params.poweredBy is defined and params.poweredBy) and (params.poweredBy.partnership is defined and params.poweredBy.partnership) %}
+                {% if (params.poweredBy) and (params.poweredBy.partnership) %}
                     <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between ons-u-mt-l">
                         <div class="ons-grid__col ons-footer__poweredby ons-u-mb-m">
                             {{ poweredByLogo | safe }}
@@ -229,7 +229,7 @@
                     </div>
                 {% endif %}
 
-                {% if params.copyrightDeclaration is defined and params.copyrightDeclaration %}
+                {% if params.copyrightDeclaration %}
                 <!-- Copyright -->
                 <div class="ons-grid">
                     <div class="ons-grid__col">

package/components/footer/_macro.spec.js

@@ -102,6 +102,24 @@ describe('macro: footer', () => {
     expect(hasClass).toBe(false);
   });
 
+  it('decorates container block with `fullWidth` modifier when the `fullWidth` parameter is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('footer', {
+        fullWidth: true,
+      }),
+    );
+
+    const hasClass = $('.ons-container').hasClass('ons-container--full-width');
+    expect(hasClass).toBe(true);
+  });
+
+  it('does not decorate container block with `fullWidth` modifier when the `fullWidth` parameter is not provided', () => {
+    const $ = cheerio.load(renderComponent('footer', {}));
+
+    const hasClass = $('.ons-container').hasClass('ons-container--full-width');
+    expect(hasClass).toBe(false);
+  });
+
   it('has additionally provided `attributes` on the `body` element', () => {
     const $ = cheerio.load(
       renderComponent('footer', {

package/components/header/_header.scss

@@ -101,11 +101,12 @@
       }
     }
     &__grid-top {
+      color: $color-text-inverse;
       min-height: 36px;
       a {
-        color: $color-white;
+        color: $color-text-inverse;
         &:hover {
-          text-decoration: underline solid $color-white 3px;
+          text-decoration: underline solid $color-text-inverse-link-hover 3px;
         }
       }
     }
@@ -208,6 +209,10 @@
       &:first-child {
         margin-left: 0;
       }
+      .ons-svg-icon {
+        clip-path: circle(9px at center);
+        margin-right: 0.5rem;
+      }
     }
 
     .ons-language-links {