@ons/design-system 50.0.1 → 53.0.0

package/components/breadcrumbs/_macro.spec.js

@@ -0,0 +1,129 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { mapAll } from '../../tests/helpers/cheerio';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_BREADCRUMBS_MINIMAL = {
+  itemsList: [
+    {
+      url: 'https://example.com/',
+      text: 'Home',
+    },
+    {
+      url: 'https://example.com/guide/',
+      text: 'Guide',
+    },
+  ],
+};
+
+const EXAMPLE_BREADCRUMBS = {
+  classes: 'extra-class another-extra-class',
+  ariaLabel: 'Breadcrumbs label',
+  id: 'example-breadcrumbs',
+  itemsList: [
+    {
+      itemClasses: 'item-extra-class item-another-extra-class',
+      linkClasses: 'link-extra-class link-another-extra-class',
+      url: 'https://example.com/',
+      text: 'Home',
+      attributes: {
+        'data-a': '123',
+        'data-b': '456',
+      },
+      id: 'first-breadcrumb',
+    },
+    {
+      url: 'https://example.com/guide/',
+      text: 'Guide',
+      id: 'second-breadcrumb',
+      attributes: {
+        'data-a': '789',
+        'data-b': 'ABC',
+      },
+    },
+  ],
+};
+
+describe('macro: breadcrumbs', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb').hasClass('extra-class')).toBe(true);
+    expect($('.ons-breadcrumb').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has a default `aria-label` of "Breadcrumbs"', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
+
+    expect($('.ons-breadcrumb').attr('aria-label')).toBe('Breadcrumbs');
+  });
+
+  it('has the provided `ariaLabel` for `aria-label`', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb').attr('aria-label')).toBe('Breadcrumbs label');
+  });
+
+  it('has the provided `id`', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb').attr('id')).toBe('example-breadcrumbs');
+  });
+
+  it('has additionally provided style classes on `item` element', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb__item:first').hasClass('item-extra-class')).toBe(true);
+    expect($('.ons-breadcrumb__item:first').hasClass('item-another-extra-class')).toBe(true);
+  });
+
+  it('has additionally provided style classes on `link` element', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb__link:first').hasClass('link-extra-class')).toBe(true);
+    expect($('.ons-breadcrumb__link:first').hasClass('link-another-extra-class')).toBe(true);
+  });
+
+  it('has provided `url` on `link` elements', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    const urls = mapAll($('.ons-breadcrumb__link'), node => node.attr('href'));
+    expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+  });
+
+  it('has provided `text` on `link` elements', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    const labels = mapAll($('.ons-breadcrumb__link'), node => node.text().trim());
+    expect(labels).toEqual(['Home', 'Guide']);
+  });
+
+  it('has provided `attributes` on `link` elements', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    const testValuesA = mapAll($('.ons-breadcrumb__link'), node => node.attr('data-a'));
+    expect(testValuesA).toEqual(['123', '789']);
+    const testValuesB = mapAll($('.ons-breadcrumb__link'), node => node.attr('data-b'));
+    expect(testValuesB).toEqual(['456', 'ABC']);
+  });
+
+  it('has a "chevron" icon for each breadcrumb item', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
+
+    const iconTypes = iconsSpy.occurrences.map(occurrence => occurrence.iconType);
+    expect(iconTypes).toEqual(['chevron', 'chevron']);
+  });
+});

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

@@ -49,8 +49,8 @@
         {% endif %}
         class="ons-btn{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url is defined and params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if params.buttonStyle == "download" %} ons-btn--download{% endif %}{% if params.buttonStyle == "print" %} ons-btn--print ons-u-d-no ons-js-print-btn{% endif %}{% if params.submitType == "loader" %} ons-btn--loader ons-js-loader ons-js-submit-btn{% endif %}{% if params.submitType == "timer" %} ons-js-timer ons-js-submit-btn{% endif %}"
         {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
-        {% 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.value is defined and params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
+        {% if params.name is defined and params.name and tag != "a" %}name="{{ 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" 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 %}
@@ -65,7 +65,7 @@
                         })
                     }}
                 {% endif -%}
-                {{- params.html | safe if params.html is defined and params.html else params.text -}}
+                <span class="ons-btn__text">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
                 {%- if iconPosition == "after" %}
                 {{
                     onsIcon({
@@ -80,13 +80,13 @@
                         "iconType": iconType
                     })
                 }}
-                <span class="ons-u-vh@xxs@s">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
+                <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
             {% else -%}
-                {{- params.html | safe if params.html is defined and params.html else params.text -}}
+                <span class="ons-btn__text">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
             {% 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>