@ons/design-system 45.1.2 → 45.2.0

package/components/button/_macro.njk

@@ -49,7 +49,7 @@
         {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
         {% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% elif params.name is defined and params.name and tag == "a" %}id="{{ params.name }}"{% endif %}
         {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}target="_blank" rel="noopener"{% endif %}
-        {% if params.buttonStyle == "download" %} download{% endif %}
+        {% if params.buttonStyle == "download" and (params.removeDownloadAttribute is not defined or not params.removeDownloadAttribute or params.removeDownloadAttribute != true) %} download{% 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}}="{{value}}"{% endfor %}{% endif %}
         >
         <span class="ons-btn__inner{% if params.innerClasses is defined and params.innerClasses %} {{ params.innerClasses }}{% endif %}">

package/components/footer/_footer.scss

@@ -26,8 +26,8 @@
   }
 
   .ons-svg-logo,
-  .ons-svg-logo--accent {
-    fill: $color-black;
+  .ons-svg-logo__group {
+    fill: $color-black !important;
   }
 
   &__body {

package/components/header/_header.scss

@@ -30,7 +30,7 @@
       height: 46px;
     }
   }
-  &__grid-top-nisra {
+  &__grid-top-tall {
     @include mq(xs) {
       height: 76px;
     }
@@ -119,9 +119,9 @@
       background: $color-header-top-internal;
       .ons-svg-logo {
         display: block;
-        fill: $color-white;
-        &--accent {
-          fill: $color-ons-logo-secondary;
+        .ons-svg-logo__group--text,
+        .ons-svg-logo__group--primary {
+          fill: $color-white;
         }
       }
     }
@@ -129,6 +129,9 @@
       background-color: transparent;
       box-shadow: none;
       outline: 3px solid $color-focus;
+      .ons-svg-logo {
+        fill: $color-text-link-focus;
+      }
     }
     &__grid-top {
       min-height: 36px;
@@ -141,45 +144,13 @@
     }
   }
 
-  .ons-svg-logo,
-  .ons-nisra-svg-logo {
-    display: block;
-  }
-
   .ons-svg-logo {
-    fill: $color-ons-logo-primary;
-    &--accent {
-      fill: $color-ons-logo-secondary;
-    }
-  }
-
-  .ons-nisra-svg-logo {
-    .ons-st0 {
-      fill: $color-nisra-logo-primary;
-    }
-    .ons-st1 {
-      fill: $color-nisra-logo-secondary;
-    }
-    .ons-st2 {
-      fill: $color-nisra-logo-tertiary;
-    }
+    display: block;
   }
 
   &__logo-link:focus {
     .ons-svg-logo {
-      fill: $color-black !important;
-      &--accent {
-        fill: $color-black !important;
-      }
-    }
-    .ons-nisra-svg-logo {
-      .ons-st0 {
-        fill: $color-black !important;
-      }
-      .ons-st1 {
-        fill: $color-black !important;
-      }
-      .ons-st2 {
+      .ons-svg-logo__group {
         fill: $color-black !important;
       }
     }
@@ -199,6 +170,7 @@
 
   &__logo-link,
   &__logo-link:hover {
+    font-size: 0;
     text-decoration: none;
   }
 

package/components/header/_macro.njk

@@ -18,18 +18,18 @@
         {% 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 {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
+                <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{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
 
                     <div class="ons-grid__col ons-col-auto">
                         <div class="ons-header__logo--large">
-                            {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
+                            {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
                             {{
                                 onsIcon({
                                     "iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
                                     "altText": params.logoAlt | default('Office for National Statistics logo')
                                 })
                             }}
-                            {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
+                            {%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
                         </div>
                         <div class="ons-header__logo--small">
                             {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}