@ons/design-system 66.0.1 → 66.0.2

package/components/autosuggest/_macro.spec.js

@@ -264,11 +264,7 @@ describe('macro: autosuggest', () => {
     it('renders div with the provided title text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect(
-        $('.ons-autosuggest__results-title')
-          .text()
-          .trim(),
-      ).toBe('Suggestions');
+      expect($('.ons-autosuggest__results-title').text().trim()).toBe('Suggestions');
     });
 
     it('renders list with a generated identifier', () => {
@@ -298,11 +294,7 @@ describe('macro: autosuggest', () => {
     it('renders instructions text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect(
-        $('.ons-autosuggest__instructions')
-          .text()
-          .trim(),
-      ).toBe('Use up and down keys to navigate.');
+      expect($('.ons-autosuggest__instructions').text().trim()).toBe('Use up and down keys to navigate.');
     });
   });
 });

package/components/button/_button.scss

@@ -78,13 +78,15 @@ $button-shadow-size: 3px;
     }
   }
 
-  &:focus:hover:not(:active) &__inner {
+  &:focus:hover:not(:active, .active) &__inner {
     background: var(--ons-color-focus-dark);
   }
 
   // When down
   &:active &,
-  &:active:focus & {
+  &:active:focus &,
+  &.active &,
+  &.active:focus & {
     &__inner {
       background: var(--ons-color-button);
       box-shadow: none;
@@ -96,7 +98,8 @@ $button-shadow-size: 3px;
     }
   }
 
-  &:active {
+  &:active,
+  &.active {
     top: ems($button-shadow-size);
   }
 
@@ -132,7 +135,9 @@ $button-shadow-size: 3px;
 
   &--secondary &,
   &--secondary:active &,
-  &--secondary:active:focus & {
+  &--secondary.active &,
+  &--secondary:active:focus &,
+  &--secondary.active:focus & {
     &__inner {
       background: var(--ons-color-button-secondary);
       color: var(--ons-color-text);
@@ -169,8 +174,8 @@ $button-shadow-size: 3px;
     text-decoration: none;
   }
 
-  &--link:focus:not(:active, &--secondary) &,
-  &--link:focus:hover:not(:active, &--secondary) & {
+  &--link:focus:not(:active, .active, &--secondary) &,
+  &--link:focus:hover:not(:active, .active, &--secondary) & {
     outline: inherit;
 
     &__inner {
@@ -238,8 +243,8 @@ $button-shadow-size: 3px;
   }
 
   &--text-link:focus &,
-  &--text-link.active:focus &,
-  &--text-link:active:focus & {
+  &--text-link:active:focus &,
+  &--text-link.active:focus & {
     &__inner {
       background-color: var(--ons-color-focus);
       box-shadow: 0 -2px var(--ons-color-focus),
@@ -288,7 +293,9 @@ $button-shadow-size: 3px;
   }
 
   &--ghost:active:focus,
-  &--ghost-dark:active:focus {
+  &--ghost.active:focus
+  &--ghost-dark:active:focus
+  &--ghost-dark.active:focus {
     box-shadow: none;
     outline: 3px solid transparent;
   }
@@ -403,7 +410,8 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--loader.ons-is-loading:active & {
+  &--loader.ons-is-loading:active &, 
+  &--loader.ons-is-loading.active & {
     &__inner {
       box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
     }
@@ -448,7 +456,8 @@ $button-shadow-size: 3px;
     cursor: not-allowed;
   }
 
-  &--disabled:active & {
+  &--disabled:active &,
+  &--disabled.active & {
     &__inner {
       box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
     }
@@ -496,7 +505,9 @@ $button-shadow-size: 3px;
   }
 
   &--dropdown:active &,
-  &--dropdown:active:focus & {
+  &--dropdown.active &,
+  &--dropdown:active:focus &,
+  &--dropdown.active:focus & {
     &__inner {
       background: var(--ons-color-branded-secondary);
       color: var(--ons-color-white);

package/components/button/button.js

@@ -18,7 +18,8 @@ export default class SubmitButton {
         this.button.addEventListener('click', this.timerButton.bind(this));
       }
     } else if (this.submitType == 'link') {
-      this.button.addEventListener('keydown', this.linkButton.bind(this));
+      this.button.addEventListener('keydown', this.linkButtonDown.bind(this));
+      this.button.addEventListener('keyup', this.linkButtonUp.bind(this));
     }
   }
 
@@ -48,10 +49,18 @@ export default class SubmitButton {
     );
   }
 
-  linkButton(e) {
-    if (e.keyCode == 32) {
+  linkButtonDown(e){
+    if (e.keyCode == 32 || e.keyCode == 13){
+      this.button.classList.add("active");
+    }
+  }
+  
+  linkButtonUp(e){
+    if (e.keyCode == 32 || e.keyCode == 13) {
+      this.button.classList.remove("active"); 
       e.preventDefault();
       this.button.click();
     }
   }
+
 }

package/components/header/_macro.njk

@@ -88,7 +88,7 @@
                                 <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                     <nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                         <ul class="ons-header-service-nav__list">
-                                            {% for item in params.serviceLinks.itemsList %}                                                
+                                            {% for item in params.serviceLinks.itemsList %}
                                                 <li class="ons-header-service-nav__item">
                                                 {% if item.iconType %}
                                                     {{
@@ -139,7 +139,7 @@
             {% if params.serviceLinks %}
                 <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                     <ul class="ons-header-service-nav__list">
-                        {% for item in params.serviceLinks.itemsList %}                                                
+                        {% for item in params.serviceLinks.itemsList %}
                             <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                             {% if item.iconType %}
                                 {{

package/components/icon/_macro.njk

@@ -72,9 +72,10 @@
             <path d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z"/>
         </svg>
     {% elif params.iconType == "twitter" %}
-        <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-            <path d="M24.04,12.95c0,0.17,0,0.33,0,0.5c0.01,4.01-2.17,7.71-5.69,9.64c-3.52,1.93-7.81,1.78-11.19-0.38c0.31,0.04,0.61,0.05,0.92,0.05c1.73,0,3.42-0.58,4.78-1.65c-1.65-0.04-3.09-1.11-3.6-2.68c0.25,0.05,0.51,0.07,0.76,0.07c0.34,0,0.68-0.05,1.01-0.14C9.23,18,7.93,16.4,7.95,14.55v-0.05c0.54,0.29,1.13,0.46,1.74,0.48c-1.66-1.12-2.2-3.33-1.23-5.08c1.96,2.41,4.85,3.87,7.95,4.03c-0.07-0.29-0.1-0.58-0.1-0.88c0-1.58,0.97-3,2.44-3.59c1.47-0.58,3.15-0.21,4.23,0.94c0.86-0.17,1.69-0.49,2.45-0.94c-0.28,0.9-0.88,1.65-1.69,2.13c0.76-0.09,1.51-0.29,2.21-0.6C25.43,11.76,24.79,12.42,24.04,12.95zM16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>
-        </svg>
+        <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0 90.01 90.01" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+	        <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01"/>
+	        <path d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z"/>
+	    </svg>
     {% elif params.iconType == "instagram" %}
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-instagram" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
             <path d="M21.34,9.46c0.66,0,1.2,0.54,1.2,1.2c0,0.66-0.54,1.2-1.2,1.2c-0.66,0-1.2-0.54-1.2-1.2C20.14,10,20.68,9.46,21.34,9.46z M16,12.67c-1.84,0-3.33,1.49-3.33,3.33c0,1.84,1.49,3.33,3.33,3.33c1.84,0,3.33-1.49,3.33-3.33C19.33,14.16,17.84,12.67,16,12.67z M16,10.86c2.84,0,5.14,2.3,5.14,5.14c0,2.84-2.3,5.14-5.14,5.14c-2.84,0-5.14-2.3-5.14-5.14C10.86,13.16,13.16,10.86,16,10.86z M16.56,7.8h-1.11c-2.17,0-2.51,0.01-3.49,0.06c-0.97,0.04-1.5,0.21-1.86,0.34C9.64,8.39,9.3,8.6,8.95,8.95C8.6,9.3,8.39,9.64,8.2,10.1c-0.14,0.35-0.3,0.88-0.34,1.86c-0.04,0.98-0.06,1.32-0.06,3.49v1.11c0,2.17,0.01,2.51,0.06,3.49c0.04,0.97,0.21,1.5,0.34,1.86c0.18,0.47,0.4,0.8,0.75,1.15c0.35,0.35,0.68,0.57,1.15,0.75c0.35,0.14,0.88,0.3,1.86,0.34c0.94,0.04,1.29,0.06,3.23,0.06h1.61c1.94,0,2.3-0.02,3.23-0.06c0.97-0.04,1.5-0.21,1.86-0.34c0.47-0.18,0.8-0.4,1.15-0.75c0.35-0.35,0.57-0.68,0.75-1.15c0.14-0.35,0.3-0.88,0.34-1.86c0.04-0.94,0.06-1.29,0.06-3.23v-1.61c0-1.94-0.02-2.3-0.06-3.23c-0.04-0.97-0.21-1.5-0.34-1.86c-0.18-0.47-0.4-0.8-0.75-1.15C22.7,8.6,22.36,8.39,21.9,8.2c-0.35-0.14-0.88-0.3-1.86-0.34C19.06,7.82,18.72,7.8,16.56,7.8z M17.03,6c1.8,0,2.18,0.02,3.1,0.06c1.06,0.05,1.79,0.22,2.43,0.46c0.66,0.26,1.22,0.6,1.77,1.15c0.56,0.56,0.9,1.11,1.15,1.77c0.25,0.64,0.42,1.36,0.46,2.43c0.05,0.99,0.06,1.35,0.06,3.58v1.09c0,2.22-0.01,2.59-0.06,3.58c-0.05,1.06-0.22,1.79-0.46,2.43c-0.26,0.66-0.6,1.22-1.15,1.77c-0.56,0.56-1.11,0.9-1.77,1.15c-0.64,0.25-1.36,0.42-2.43,0.46C19.13,25.99,18.77,26,16.55,26h-1.09c-2.22,0-2.59-0.01-3.58-0.06c-1.06-0.05-1.79-0.22-2.43-0.46c-0.66-0.26-1.22-0.6-1.77-1.15c-0.56-0.56-0.9-1.11-1.15-1.77c-0.25-0.64-0.42-1.36-0.46-2.43C6.02,19.21,6,18.83,6,17.03v-2.06c0-1.8,0.02-2.18,0.06-3.1c0.05-1.06,0.22-1.79,0.46-2.43c0.26-0.66,0.6-1.22,1.15-1.77c0.56-0.56,1.11-0.9,1.77-1.15c0.64-0.25,1.36-0.42,2.43-0.46C12.79,6.02,13.17,6,14.97,6H17.03z M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>

package/components/list/_list.scss

@@ -77,6 +77,7 @@
   &--icons {
     margin-bottom: 0;
     .ons-list__item {
+      margin-top: 0;
       margin-bottom: 0.5rem;
     }
   }
@@ -99,7 +100,6 @@
     .ons-list__item {
       display: inline-block;
       margin: 0 1rem 0 0;
-      vertical-align: top;
     }
   }