@ons/design-system 50.0.1 → 53.0.0

package/components/icons/_macro.spec.js

@@ -0,0 +1,140 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+describe('macro: icons', () => {
+  describe.each([
+    'arrow-forward',
+    'arrow-next',
+    'arrow-previous',
+    'check',
+    'chevron',
+    'download',
+    'exit',
+    'external-link',
+    'lock',
+    'person',
+    'print',
+    'quote',
+    'search',
+    'sort-sprite',
+    'facebook',
+    'twitter',
+    'instagram',
+    'linkedin',
+    'loader',
+    'census-logo-cy',
+    'census-logo-en',
+    'ons-logo-en',
+    'ons-logo-cy',
+    'ons-logo-stacked-en',
+    'ons-logo-stacked-cy',
+    'nisra-logo',
+    'nisra-logo-mobile',
+    'ni-finance-logo',
+    'ni-finance-logo-mobile',
+    'crest',
+    'ogl',
+    'circle-lined',
+  ])('icon type: %s', iconType => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('icons', { iconType }));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has an svg element', () => {
+      const $ = cheerio.load(renderComponent('icons', { iconType }));
+
+      expect($('svg').length).toBe(1);
+    });
+
+    it('has additionally provided style classes', () => {
+      const $ = cheerio.load(
+        renderComponent('icons', {
+          iconType,
+          classes: 'extra-class another-extra-class',
+        }),
+      );
+
+      expect($('svg').hasClass('extra-class')).toBe(true);
+      expect($('svg').hasClass('another-extra-class')).toBe(true);
+    });
+  });
+
+  describe.each([
+    'arrow-next',
+    'arrow-previous',
+    'check',
+    'chevron',
+    'download',
+    'exit',
+    'external-link',
+    'lock',
+    'person',
+    'print',
+    'quote',
+    'search',
+    'facebook',
+    'twitter',
+    'instagram',
+    'linkedin',
+  ])('icon type: %s', iconType => {
+    it('has style variation class for provided icon size', () => {
+      const $ = cheerio.load(
+        renderComponent('icons', {
+          iconType,
+          iconSize: 'xxl',
+        }),
+      );
+
+      expect($('svg').hasClass('ons-svg-icon--xxl')).toBe(true);
+    });
+  });
+
+  describe.each([
+    ['census-logo-cy', 'Logo Cyfrifiad 2021'],
+    ['census-logo-en', 'Census 2021 logo'],
+    ['ons-logo-en', 'Office for National Statistics logo'],
+    ['ons-logo-cy', 'Logo Swyddfa Ystadegau Gwladol'],
+    ['ons-logo-stacked-en', 'Office for National Statistics logo'],
+    ['ons-logo-stacked-cy', 'Logo Swyddfa Ystadegau Gwladol'],
+    ['nisra-logo', 'Nisra logo'],
+    ['nisra-logo-mobile', 'Nisra logo'],
+    ['ni-finance-logo', 'Northern Ireland Department of Finance logo'],
+    ['ni-finance-logo-mobile', 'Northern Ireland Department of Finance logo'],
+    ['crest', 'Royal coat of arms of the United Kingdom'],
+    ['ogl', 'Open Government License logo'],
+    ['hm-gov-logo-en', 'HM Government logo'],
+    ['hm-gov-logo-cy', 'Logo Llywodraeth EM'],
+  ])('icon type: %s', (iconType, expectedAltText) => {
+    it(`has default alt text '${expectedAltText}'`, () => {
+      const $ = cheerio.load(renderComponent('icons', { iconType }));
+
+      expect(
+        $('title')
+          .text()
+          .trim(),
+      ).toBe(expectedAltText);
+    });
+
+    it('has provided alt text', () => {
+      const $ = cheerio.load(
+        renderComponent('icons', {
+          iconType,
+          altText: 'Example alt text',
+        }),
+      );
+
+      expect(
+        $('title')
+          .text()
+          .trim(),
+      ).toBe('Example alt text');
+    });
+  });
+});

package/components/images/_macro.njk

@@ -2,7 +2,7 @@
     <figure class="ons-figure">
         
         {% if params.image is defined and params.image %}
-            <img class="ons-figure__image" srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" src="{{ params.image.smallSrc }}" alt="{{ params.alt }}">
+            <img class="ons-figure__image" {% if params.image.largeSrc is defined and params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}" alt="{{ params.alt if params.alt is defined and params.alt else '' }}">
         {% else %}
             <img class="ons-figure__image" src="{{ params.url }}" alt="{{ params.alt }}">
         {% endif %}

package/components/images/_macro.spec.js

@@ -0,0 +1,121 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_IMAGE_URL_MINIMAL = {
+  url: 'example.png',
+};
+
+const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
+  image: {
+    smallSrc: 'example-small.png',
+    largeSrc: 'example-large.png',
+  },
+};
+
+describe('macro: images', () => {
+  it('outputs a `figure` element', () => {
+    const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+
+    expect($('.ons-figure')[0].tagName).toBe('figure');
+  });
+
+  it('outputs a `figurecaption` element when `caption` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('images', {
+        ...EXAMPLE_IMAGE_URL_MINIMAL,
+        caption: 'Example image caption',
+      }),
+    );
+
+    expect($('.ons-figure__caption')[0].tagName).toBe('figcaption');
+  });
+
+  it('outputs a `figurecaption` element with provided `caption` text', () => {
+    const $ = cheerio.load(
+      renderComponent('images', {
+        ...EXAMPLE_IMAGE_URL_MINIMAL,
+        caption: 'Example image caption',
+      }),
+    );
+
+    expect(
+      $('.ons-figure__caption')
+        .text()
+        .trim(),
+    ).toBe('Example image caption');
+  });
+
+  describe('mode: url', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('outputs an `img` element', () => {
+      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+
+      expect($('.ons-figure__image')[0].tagName).toBe('img');
+    });
+
+    it('outputs an `img` element with the expected `src`', () => {
+      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+
+      expect($('.ons-figure__image').attr('src')).toBe('example.png');
+    });
+
+    it('outputs an `img` element with the expected alt text', () => {
+      const $ = cheerio.load(
+        renderComponent('images', {
+          ...EXAMPLE_IMAGE_URL_MINIMAL,
+          alt: 'Example alt text',
+        }),
+      );
+
+      expect($('.ons-figure__image').attr('alt')).toBe('Example alt text');
+    });
+  });
+
+  describe('mode: image', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('outputs an `img` element', () => {
+      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+      expect($('.ons-figure__image')[0].tagName).toBe('img');
+    });
+
+    it('outputs an `img` element with the expected `srcset`', () => {
+      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+      expect($('.ons-figure__image').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+    });
+
+    it('outputs an `img` element with the expected `src`', () => {
+      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+      expect($('.ons-figure__image').attr('src')).toBe('example-small.png');
+    });
+
+    it('outputs an `img` element with the expected alt text', () => {
+      const $ = cheerio.load(
+        renderComponent('images', {
+          ...EXAMPLE_IMAGE_IMAGE_MINIMAL,
+          alt: 'Example alt text',
+        }),
+      );
+
+      expect($('.ons-figure__image').attr('alt')).toBe('Example alt text');
+    });
+  });
+});

package/components/input/_input-type.scss

@@ -18,9 +18,8 @@
     }
   }
 
-  &__type[title] {
+  &__type {
     background-color: $color-button-secondary;
-    border: 1px solid $color-input;
     display: block;
     flex: 0 0 auto;
     font-size: 1rem;
@@ -28,11 +27,19 @@
     line-height: normal;
     padding: $input-padding-vertical $input-padding-horizontal * 2;
     text-align: center;
-    text-decoration: none;
     white-space: nowrap;
+
+    &[title] {
+      text-decoration: none;
+    }
   }
 
-  &__input:focus + &__type[title]::after {
+  &__type,
+  &__type[title] {
+    border: 1px solid $color-input;
+  }
+
+  &__input:focus + &__type::after {
     border-radius: $input-radius;
     bottom: 0;
     box-shadow: 0 0 0 3px $color-focus;
@@ -45,7 +52,7 @@
   }
 
   &:not(&--prefix) & {
-    &__type[title] {
+    &__type {
       border-left: 0;
       border-radius: 0 $input-radius $input-radius 0;
     }

package/components/input/_input.scss

@@ -128,6 +128,7 @@
 
 .ons-input-search {
   @extend .ons-input--block;
+  @extend .ons-input--ghost;
 
   &--icon {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z'/%3E%3C/svg%3E");
@@ -147,4 +148,11 @@
       box-shadow: 0 0 0 3px $color-focus;
     }
   }
+
+  &--dark {
+    border: 2px solid $color-black;
+    &.ons-input-search--icon {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z'/%3E%3C/svg%3E");
+    }
+  }
 }

package/components/input/_macro.njk

@@ -27,7 +27,7 @@
             type="{{ type }}"
             id="{{ params.id }}"
             class="ons-input ons-input--text ons-input-type__input{% if params.error is defined and params.error %} ons-input--error{% endif %}{% if params.searchButton is defined and params.searchButton %} ons-search__input{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.width is defined and params.width %} ons-input{% if params.type is defined and (params.type == 'number' or params.type == 'tel') %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
-            {% if params.prefix is defined and params.prefix or params.suffix is defined and params.suffix %}title="{{ params.prefix.title if params.prefix }}{{ params.suffix.title if params.suffix }}"{% endif %}
+            {% if params.prefix is defined and params.prefix or params.suffix is defined and params.suffix %}aria-labelledby="{{ params.prefix.id if params.prefix }}{{ params.suffix.id if params.suffix }}"{% endif %}
             {% if params.name is defined and params.name %}name="{{ params.name }}"{% endif %}
             {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
             {% if params.accept is defined and params.accept %}accept="{{ params.accept }}"{% endif %}
@@ -53,7 +53,7 @@
             </script>
         {% endif %}
         {% if params.postTextboxLinkText is defined and params.postTextboxLinkText %}
-            <a class="ons-u-fs-s" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
+            <a class="ons-u-fs-s ons-input__post-link" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
         {% endif %}
     {% endset %}
     {% set field %}
@@ -80,10 +80,9 @@
                     {{ input | safe }}
                     {% set abbr = params.prefix or params.suffix %}
                     <abbr
+                        {% if abbr.id is defined and abbr.id %}id="{{ abbr.id }}" {% endif %}
                         class="ons-input-type__type ons-js-input-abbr"
-                        aria-hidden="true"
-                        title="{{ abbr.title }}"
-                        {% if abbr.id is defined and abbr.id %} id="{{ abbr.id }}"{% endif %}
+                         title="{{ abbr.title }}"
                         >{{ abbr.text or abbr.title }}</abbr>
                 </span>
             </span>