@ons/design-system 51.0.0 → 53.0.1

package/README.md

@@ -2,8 +2,6 @@
 
 [![GitHub release](https://img.shields.io/github/release/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/releases)
 [![Tests](https://github.com/ONSdigital/design-system/actions/workflows/tests.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/tests.yml)
-[![codecov](https://codecov.io/gh/ONSdigital/design-system/branch/master/graph/badge.svg)](https://codecov.io/gh/ONSdigital/design-system)
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/e8f9a091991d4d5a85d0b0b85e26dde6)](https://www.codacy.com/app/bameyrick/design-system)
 [![GitHub pull requests](https://img.shields.io/github/issues-pr-raw/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/pulls)
 [![Github last commit](https://img.shields.io/github/last-commit/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/commits)
 [![Github contributors](https://img.shields.io/github/contributors/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/graphs/contributors)

package/components/address-input/autosuggest.address.setter.js

@@ -104,14 +104,18 @@ export default class AddressSetter {
 
   clearManualInputs() {
     this.manualInputs.forEach(input => {
-      input.value = '';
+      if (input) {
+        input.value = '';
+      }
     });
   }
 
   checkManualInputsValues(onLoad) {
     if (onLoad) {
       this.originalValues = this.manualInputs.map(input => {
-        return input.value;
+        if (input) {
+          return input.value;
+        }
       });
     } else if (this.uprn.value !== '' && this.originalValues.length) {
       this.newValues = this.manualInputs.map(input => {

package/components/button/_button.scss

@@ -230,9 +230,9 @@ $button-shadow-size: 3px;
 
   &--text-link-inverse & {
     &__inner {
-      color: $color-white;
+      color: $color-text-inverse-link;
       .ons-svg-icon {
-        fill: $color-white;
+        fill: $color-text-inverse-link;
       }
     }
   }
@@ -253,9 +253,9 @@ $button-shadow-size: 3px;
   &--text-link-inverse:active &,
   &--text-link-inverse.active & {
     &__inner {
-      color: $color-branded-tint;
+      color: $color-text-inverse-link-hover;
       .ons-svg-icon {
-        fill: $color-branded-tint;
+        fill: $color-text-inverse-link-hover;
       }
     }
   }
@@ -279,8 +279,7 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--ghost &,
-  &--mobile & {
+  &--ghost & {
     &__inner {
       background: transparent;
       border: 2px solid rgba(255, 255, 255, 0.6);
@@ -293,36 +292,51 @@ $button-shadow-size: 3px;
   }
 
   &--ghost-dark & {
-    @extend .ons-btn--secondary;
     &__inner {
       background: transparent;
-      border: 2px solid rgba(0, 0, 0, 0.6);
+      border: 2px solid $color-black;
+      box-shadow: none;
       color: $color-text;
+      .ons-svg-icon {
+        fill: $color-black;
+      }
     }
   }
 
   &--ghost,
-  &--text-link,
-  &--mobile {
+  &--ghost-dark,
+  &--dropdown,
+  &--text-link {
     &:active,
     .active {
       top: 0;
     }
   }
 
-  &--ghost:active:focus {
+  &--ghost:active:focus,
+  &--ghost-dark:active:focus {
     box-shadow: none;
     outline: 3px solid transparent;
   }
 
   &--ghost:focus:hover,
-  &--text-link:focus:hover,
-  &--mobile:focus:hover {
+  &--ghost-dark:focus:hover,
+  &--dropdown:focus:hover,
+  &--text-link:focus:hover {
     outline: none;
   }
 
-  &--ghost:hover &,
-  &--mobile:hover & {
+  &--ghost-dark:focus:hover &,
+  &--dropdown:focus:hover & {
+    &__inner {
+      color: $color-text;
+      .ons-svg-icon {
+        fill: $color-text;
+      }
+    }
+  }
+
+  &--ghost:hover & {
     &__inner {
       background: rgba(0, 0, 0, 0.1);
       border-color: $color-white;
@@ -330,11 +344,8 @@ $button-shadow-size: 3px;
   }
 
   &--ghost:active &,
-  &--mobile:active &,
   &--ghost:active:focus &,
-  &--mobile:active:focus &,
-  &--ghost.active &,
-  &--mobile.active & {
+  &--ghost.active & {
     &__inner {
       background: rgba(0, 0, 0, 0.2);
       border-color: rgba(255, 255, 255, 0.6);
@@ -345,8 +356,23 @@ $button-shadow-size: 3px;
     }
   }
 
+  &--ghost-dark:hover &,
+  &--ghost-dark:active &,
+  &--ghost-dark:active:focus &,
+  &--ghost-dark.active & {
+    &__inner {
+      background: $color-black;
+      border-color: $color-black;
+      color: $color-white;
+      .ons-svg-icon {
+        fill: $color-white;
+      }
+    }
+  }
+
   &--ghost.active:focus &,
-  &--mobile.active:focus & {
+  &--ghost-dark.active:focus &,
+  &--dropdown.active:focus & {
     &__inner {
       background: $color-focus;
       color: $color-text-link-focus;
@@ -357,7 +383,8 @@ $button-shadow-size: 3px;
   }
 
   &--ghost:focus &,
-  &--mobile:focus & {
+  &--ghost-dark:focus &,
+  &--dropdown:focus & {
     &__inner {
       box-shadow: none;
       .ons-svg-icon {
@@ -395,17 +422,22 @@ $button-shadow-size: 3px;
   }
 
   &--dropdown {
-    @extend .ons-btn--ghost;
     @extend .ons-btn--mobile;
 
     width: 100%;
+  }
 
-    .ons-btn__inner {
+  &--dropdown & {
+    @extend .ons-btn--mobile;
+
+    width: 100%;
+
+    &__inner {
       background: $color-branded-tint;
       border: none;
       border-radius: 0;
       box-shadow: none;
-      color: $color-text-link;
+      color: $color-branded-text;
       display: block;
       font-size: 1rem;
       font-weight: normal;
@@ -413,20 +445,30 @@ $button-shadow-size: 3px;
       text-align: left;
 
       .ons-svg-icon {
-        fill: $color-text-link;
+        fill: $color-branded-text;
         float: right;
         margin-top: 3px;
       }
     }
+  }
 
-    &:active,
-    &:active:focus {
-      .ons-btn__inner {
-        background: $color-branded-secondary;
-        color: $color-white;
-        .ons-svg-icon {
-          fill: $color-white;
-        }
+  &--dropdown:hover & {
+    &__inner {
+      background: $color-branded-secondary;
+      color: $color-white;
+      .ons-svg-icon {
+        fill: $color-white;
+      }
+    }
+  }
+
+  &--dropdown:active &,
+  &--dropdown:active:focus & {
+    &__inner {
+      background: $color-branded-secondary;
+      color: $color-white;
+      .ons-svg-icon {
+        fill: $color-white;
       }
     }
   }

package/components/button/_macro.njk

@@ -86,7 +86,7 @@
             {% endif -%}
         </span>
         {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
-            <span class="ons-btn__new-window-description ons-u-vh">{{ params.newWindowDescription | default("opens in a new window") }}</span>
+            <span class="ons-btn__new-window-description ons-u-vh">({{ params.newWindowDescription | default("opens in a new tab") }})</span>
         {% endif %}
         {% if params.buttonContext is defined and params.buttonContext %}
             <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>

package/components/button/_macro.spec.js

@@ -407,7 +407,7 @@ describe('macro: button', () => {
         }),
       );
 
-      expect($('.ons-btn__new-window-description').text()).toBe('opens in a new window');
+      expect($('.ons-btn__new-window-description').text()).toBe('(opens in a new tab)');
     });
 
     it('has a custom new window description when `newWindow` is `true` and `newWindowDescription` is provided', () => {
@@ -419,7 +419,7 @@ describe('macro: button', () => {
         }),
       );
 
-      expect($('.ons-btn__new-window-description').text()).toBe('custom opens in a new window text');
+      expect($('.ons-btn__new-window-description').text()).toBe('(custom opens in a new window text)');
     });
 
     it('has the `download` attribute when `buttonStyle` is "download"', () => {

package/components/checkboxes/checkbox-with-autoselect.js

@@ -21,7 +21,8 @@ export default class CheckboxWithAutoSelect {
     this.unselectAllText = this.button.getAttribute('data-unselect-all');
   }
 
-  handleButtonEvent() {
+  handleButtonEvent(event) {
+    event.preventDefault();
     this.checkboxes.forEach(checkbox => {
       checkbox.checked = this.allChecked === false ? true : false;
     });

package/components/external-link/_macro.njk

@@ -1,7 +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">{{- params.linkText | safe -}}<span class="ons-external-link__icon">&nbsp;<svg id="external-link" class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+    <a href="{{ params.url }}" class="ons-external-link{% if params.classes is defined and 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></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

@@ -47,10 +47,27 @@ describe('macro: external-link', () => {
   it('has the expected link text', async () => {
     const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
 
-    const $hyperlink = $('a.ons-external-link');
+    const $hyperlink = $('a.ons-external-link .ons-external-link__text');
     expect($hyperlink.text().trim()).toBe('Example 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)');
+  });
+
+  it('has a custom new window description when `newWindowDescription` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('external-link', {
+        ...EXAMPLE_EXTERNAL_LINK,
+        newWindowDescription: '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 () => {
     const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
 

package/components/footer/_footer.scss

@@ -19,6 +19,10 @@
     background-color: $color-banner-bg-dark;
   }
 
+  &__license {
+    @extend .ons-u-fs-s;
+  }
+
   &__ogl-img {
     margin: 0 0.5rem 0.2rem 0;
     max-width: 100%;
@@ -37,10 +41,6 @@
     .ons-list__link {
       margin-right: 0;
     }
-
-    .ons-poweredbylogo {
-      min-height: 1.5rem;
-    }
   }
 
   &--rows {
@@ -48,4 +48,19 @@
       margin-bottom: 0.5rem !important;
     }
   }
+
+  &__poweredby,
+  &__crest,
+  &__partnership {
+    font-size: 0;
+  }
+
+  &__partnership {
+    &-prefix {
+      @extend .ons-u-fs-s;
+
+      margin-bottom: 0.2rem;
+      margin-top: -0.3rem;
+    }
+  }
 }

package/components/footer/_macro.njk

@@ -9,33 +9,38 @@
         {% set lang = 'en' %}
     {% endif %}
 
+    {% set onsLogo %}
+        {% if params.lang == 'cy' %}
+            {{
+                onsIcon({
+                    "iconType": 'ons-logo-cy',
+                    "altText": 'Swyddfa Ystadegau Gwladol',
+                    "altTextId": 'ons-logo-cy-footer-alt'
+                })
+            }}
+        {% else %}
+            {{
+                onsIcon({
+                    "iconType": 'ons-logo-en',
+                    "altText": 'Office for National Statistics',
+                    "altTextId": 'ons-logo-en-footer-alt'
+                })
+            }}
+        {% endif %}
+    {% endset %}
+
     {% set poweredByLogo %}
-   
         {% if params.poweredBy is defined and params.poweredBy and params.poweredBy.logo is defined and params.poweredBy.logo %}
             {{
                 onsIcon({
                     "iconType": params.poweredBy.logo,
-                    "altText": params.poweredBy.alt | default("Office for National Statistics")
+                    "altText": params.poweredBy.alt,
+                    "altTextId": 'poweredby-alt'
                 })
             }}
         {% else %}
-            {% if params.lang == 'cy' %}
-                {{
-                    onsIcon({
-                        "iconType": 'ons-logo-cy',
-                        "altText": params.poweredBy.alt | default('Swyddfa Ystadegau Gwladol')
-                    })
-                }}
-            {% else %}
-                {{
-                    onsIcon({
-                        "iconType": 'ons-logo-en',
-                        "altText": params.poweredBy.alt | default('Office for National Statistics')
-                    })
-                }}
-            {% endif %}
+            {{ onsLogo | safe }}
         {% endif %}
-   
     {% endset %}
 
     <footer class="ons-footer">
@@ -81,12 +86,6 @@
         <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-grid">
-                    {% if params.poweredBy is defined and params.poweredBy and params.OGLLink is defined and params.OGLLink %}
-                        <div class="ons-grid__col ons-u-mb-m">
-                            {{ poweredByLogo | safe }}
-                        </div>
-                    {% endif %}
-
                     {% if params.newTabWarning is defined and 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>
@@ -95,6 +94,7 @@
 
                     {% if params.cols is defined and 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 }}">
                                 {% if col.title %}
                                     <h2 class="ons-footer__heading ons-u-fs-r--b">{{ col.title }}</h2>
@@ -108,17 +108,9 @@
                                 }}
                             </div>
                         {% endfor %}
-                    {% endif %}
-
-                    {% if params.cols is defined and params.cols and params.rows is defined and params.rows %}
-                        <div class="ons-grid__col ons-u-mb-m">
-                            <hr class="ons-footer__hr">
-                        </div>
-                    {% endif %}
-
-                    {% if params.rows is defined and params.rows %}
+                    {% elif params.rows is defined and params.rows %}
                         {% for row in params.rows %}
-                            <!-- Rows -->
+                            <!-- Transactional footer row -->
                             <div class="ons-grid__col">
                                 {{
                                     onsList({
@@ -128,105 +120,119 @@
                                     })
                                 }}
                             </div>
-                            {% if loop.length > 1 %}
-                                {% if not loop.last %}
-                                    <div class="ons-grid__col ons-u-mb-m">
-                                        <hr class="ons-footer__hr">
-                                    </div>
-                                {% endif %}
-                            {% endif %}
                         {% endfor %}
                     {% endif %}
 
-                    {% if params.OGLLink is defined and params.OGLLink %}
-                        <!-- OGL -->
+                    {% if (params.cols is defined and params.cols) or (params.rows is defined and params.rows) %}
                         <div class="ons-grid__col ons-u-mb-m">
                             <hr class="ons-footer__hr">
                         </div>
-
-                        <div class="ons-grid__col">
-                            <div class="ons-footer__license">
-                                {{
-                                    onsIcon({
-                                        "iconType": 'ogl'
-                                    })
-                                }}
-                                {% if params.OGLLink.HTML is defined and params.OGLLink.HTML %}
-                                    {{ params.OGLLink.HTML | safe }}
-                                {% else %}
-                                    {% from "components/external-link/_macro.njk" import onsExternalLink %}
-                                    {{ params.OGLLink.pre }} {{
-                                        onsExternalLink({
-                                            "url": params.OGLLink.url,
-                                            "linkText": params.OGLLink.link
-                                        })
-                                    }}{{ params.OGLLink.post }}
-                                {% endif %}
-                            </div>
-                        </div>
                     {% endif %}
 
-                    {% if params.legal is defined and params.legal or params.rows is defined and params.rows and params.OGLLink is not defined or params.OGLLink is not defined and params.legal is not defined and (params.rows is defined and params.rows or params.cols is defined and params.cols) %}
-                        <div class="ons-grid__col ons-u-mb-m">
-                            <hr class="ons-footer__hr">
-                        </div>
-                    {% endif %}
-
-                    {% if params.OGLLink is not defined and params.legal is not defined %}
-                        <div class="ons-grid__col">
-                            {{ poweredByLogo | safe }}
-                        </div>
-                    {% endif %}
                 </div>
 
-                {% if params.legal is defined and params.legal or params.rows is defined and params.rows and params.OGLLink is not defined or params.cols is defined and params.cols and params.OGLLink is not defined %}
                     <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
-                        {% if params.legal is defined and params.legal %}
-                            <!-- Legal -->
-                            {% for legal in params.legal %}
-                                <div class="ons-grid__col">
+                        <div class="ons-grid__col">
+                            {% if params.legal is defined and params.legal %}
+                                <!-- Legal -->
+                                {% for legal in params.legal %}
                                     {{
                                         onsList({
-                                            "classes": 'ons-u-mb-m ons-footer--rows',
+                                            "classes": 'ons-u-mb-s ons-footer--rows',
                                             "variants": ['bare', 'inline'],
                                             "itemsList": legal.itemsList
                                         })
                                     }}
-                                    {% if params.crest is defined and params.crest %}
-                                        <div class="ons-poweredbylogo ons-u-mb-m">{{ poweredByLogo | safe }}</div>
+                                {% endfor %}
+                            {% endif %}
+
+                            {% if params.OGLLink == true or params.OGLLink is defined %}
+                                <!-- OGL -->
+                                <div class="ons-footer__license ons-u-mb-m">
+                                    {{
+                                        onsIcon({
+                                            "iconType": 'ogl'
+                                        })
+                                    }}
+                                    {% if params.OGLLink.HTML is defined and params.OGLLink.HTML %}
+                                        {{ params.OGLLink.HTML | safe }}
+                                    {% elif params.OGLLink == true or params.OGLLink is defined %}
+                                        {% 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') }} {{
+                                            onsExternalLink({
+                                                "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
+                                                "linkText": params.OGLLink.link | default('Drwydded Llywodraeth Leol v3.0')
+                                            })
+                                            }}{{ params.OGLLink.post | default(', oni bai y nodir fel arall') }}
+                                        {% else %}
+                                            {{ params.OGLLink.pre | default('All content is available under the') }} {{
+                                                onsExternalLink({
+                                                    "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
+                                                    "linkText": params.OGLLink.link | default('Open Government Licence v3.0')
+                                                })
+                                            }}{{ params.OGLLink.post | default(', except where otherwise stated') }}
+                                        {% endif %}
                                     {% endif %}
                                 </div>
-                            {% endfor %}
-                        {% endif %}
+                            {% endif %}
+
+                            {% if not params.poweredBy.partnership %}
+                                <div class="ons-footer__poweredby ons-u-mb-m">
+                                    {{ poweredByLogo | safe }}
+                                </div>
+                            {% endif %}
+                        </div>
 
                         {% if params.crest is defined and params.crest %}
                             <!-- Crest -->
-                            <div class="ons-grid__col ons-footer__crest">
+                            <div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
                                 {{
                                     onsIcon({
                                         "iconType": 'crest'
                                     })
                                 }}
                             </div>
-                        {% elif params.legal is defined and params.legal %}
-                            <!-- Powered by -->
-                            <div class="ons-grid__col">
-                                <div class="ons-poweredbylogo">{{ poweredByLogo | safe }}</div>
-                            </div>
                         {% endif %}
+                    </div>
+
+                {% if (params.poweredBy is defined and params.poweredBy) and (params.poweredBy.partnership is defined 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 }}
+                        </div>
 
+                        <div class="ons-grid__col ons-footer__partnership ons-u-mb-m">
+                            <div class="ons-footer__partnership-prefix">{{ params.poweredBy.partnership }}</div>
+                            {% if params.lang == 'cy' %}
+                                {{
+                                    onsIcon({
+                                        "iconType": 'ons-logo-cy',
+                                        "altText": 'Swyddfa Ystadegau Gwladol',
+                                        "altTextId": 'ons-logo-cy-footer-alt'
+                                    })
+                                }}
+                            {% else %}
+                                {{
+                                    onsIcon({
+                                        "iconType": 'ons-logo-en',
+                                        "altText": 'Office for National Statistics',
+                                        "altTextId": 'ons-logo-en-footer-alt'
+                                    })
+                                }}
+                            {% endif %}
+                        </div>
                     </div>
                 {% endif %}
 
                 {% if params.copyrightDeclaration is defined and params.copyrightDeclaration %}
-                    <!-- Copyright -->
-                    <div class="ons-grid"> 
-                        <div class="ons-grid__col ons-u-mt-s">
-                            <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
-                        </div>
+                <!-- Copyright -->
+                <div class="ons-grid">
+                    <div class="ons-grid__col">
+                        <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
                     </div>
+                </div>
                 {% endif %}
-
             </div>
         </div>
     </footer>