@ons/design-system 53.1.0 → 54.0.1

package/components/cookies-banner/cookies-banner.spec.js

@@ -1,10 +1,6 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
-const EXAMPLE_COOKIES_BANNER_PAGE = renderComponent('cookies-banner', {
-  statementTitle: 'Tell us whether you accept cookies',
-  statementText: 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk.',
-  confirmationText: 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
-});
+const EXAMPLE_COOKIES_BANNER_PAGE = renderComponent('cookies-banner', {});
 
 describe('script: cookies-banner', () => {
   beforeEach(async () => {
@@ -18,73 +14,81 @@ describe('script: cookies-banner', () => {
     const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
     expect(displayStyle).toBe('block');
   });
+  describe.each([
+    ['accepting cookies', 'accept', true],
+    ['rejecting cookies', 'reject', false],
+  ])('action: %s', (_, action, value) => {
+    it(`sets all cookies to ${value} when ${_}`, async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+
+      await page.click(`.ons-js-${action}-cookies`);
+
+      const cookies = await page.cookies();
+      const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
+      const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+
+      expect(policy).toEqual({
+        essential: true,
+        settings: value,
+        usage: value,
+        campaigns: value,
+      });
+    });
 
-  it('sets all cookies to true when accepting cookies', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+    it(`sets seen cookie message when ${_}`, async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
+      await page.click(`.ons-js-${action}-cookies`);
 
-    const cookies = await page.cookies();
-    const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
-    const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+      const cookies = await page.cookies();
+      const ons_cookie_message_displayed = cookies.find(cookie => cookie.name === 'ons_cookie_message_displayed');
 
-    expect(policy).toEqual({
-      essential: true,
-      settings: true,
-      usage: true,
-      campaigns: true,
+      expect(ons_cookie_message_displayed.value).toBe('true');
     });
-  });
-
-  it('sets seen cookie message when accepting cookies', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
+    it(`should hide the primary message when pressing the ${action} button`, async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    const cookies = await page.cookies();
-    const ons_cookie_message_displayed = cookies.find(cookie => cookie.name === 'ons_cookie_message_displayed');
+      await page.click(`.ons-js-${action}-cookies`);
 
-    expect(ons_cookie_message_displayed.value).toBe('true');
-  });
+      const displayStyle = await page.$eval('.ons-cookies-banner__primary', node =>
+        window.getComputedStyle(node).getPropertyValue('display'),
+      );
+      expect(displayStyle).toBe('none');
+    });
 
-  it('should hide the primary message when pressing the accept button', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+    it(`should show the secondary message when pressing the ${action} button`, async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
+      await page.click(`.ons-js-${action}-cookies`);
 
-    const displayStyle = await page.$eval('.ons-cookies-banner__primary', node =>
-      window.getComputedStyle(node).getPropertyValue('display'),
-    );
-    expect(displayStyle).toBe('none');
+      const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', node =>
+        window.getComputedStyle(node).getPropertyValue('display'),
+      );
+      expect(displayStyle).not.toBe('none');
+    });
   });
 
-  it('should show the secondary message when pressing the accept button', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
-
-    await page.click('.ons-js-accept-cookies');
-
-    const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', node =>
-      window.getComputedStyle(node).getPropertyValue('display'),
-    );
-    expect(displayStyle).not.toBe('none');
-  });
-  //...
-  it('should hide the secondary message when pressing the hide button', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+  describe('confirmation banner', () => {
+    it('should hide the confirmation message when pressing the hide button', async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
-    await page.click('.ons-js-hide-button');
+      await page.click('.ons-js-accept-cookies');
+      await page.click('.ons-js-hide-button');
 
-    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
-    expect(displayStyle).toBe('none');
+      const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+      expect(displayStyle).toBe('none');
+    });
   });
 
-  it('does not show the banner if user has acknowledged the banner previously and consent cookie is present', async () => {
-    await page.setCookie({ name: 'ons_cookie_message_displayed', value: 'true' });
+  describe('cookie preferences confirmed', () => {
+    it('does not show the banner if user has acknowledged the banner previously and consent cookie is present', async () => {
+      await page.setCookie({ name: 'ons_cookie_message_displayed', value: 'true' });
 
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
-    expect(displayStyle).toBe('none');
+      const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+      expect(displayStyle).toBe('none');
+    });
   });
 });

package/components/duration/_macro.njk

@@ -84,7 +84,7 @@
             "id": params.id,
             "legend": params.legendOrLabel,
             "description": params.description,
-            "legendClasses": 'ons-u-mb-xs ' + (params.legendClasses if params.legendClasses else ''),
+            "legendClasses": params.legendClasses,
             "error": params.error,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
             "dontWrap": params.dontWrap

package/components/duration/_macro.spec.js

@@ -127,7 +127,7 @@ describe('macro: duration', () => {
         id: 'duration',
         legend: 'How long have you lived at this address?',
         description: 'Enter “0” into the years field if you have lived at this address for less than a year',
-        legendClasses: 'ons-u-mb-xs custom-legend-class',
+        legendClasses: 'custom-legend-class',
         dontWrap: true,
         legendIsQuestionTitle: true,
         error: false,

package/components/fieldset/_fieldset.scss

@@ -1,6 +1,7 @@
 .ons-fieldset {
   &__legend {
-    @extend .ons-label;
+    font-weight: $font-weight-bold;
+    margin: 0 0 0.6rem;
   }
 
   &__description:not(&__description--title) {
@@ -11,14 +12,10 @@
     font-weight: normal;
   }
 
-  .ons-fieldset {
-    &__legend {
-      margin: 0 0 0.6rem;
-    }
+  > * .ons-fieldset {
     .ons-fieldset {
       &__legend {
         font-weight: normal;
-        margin: 0;
       }
     }
   }

package/components/input/_input-type.scss

@@ -14,7 +14,14 @@
     z-index: 1;
 
     &:focus {
-      box-shadow: inset 0 0 0 1px $color-input;
+      // Overide default input focus so it can wrap prefix/suffix too
+      box-shadow: none;
+    }
+
+    // Overide default input error style so it can wrap prefix/suffix too
+    &.ons-input--error:not(:focus) {
+      border-right: $input-border-width solid $color-input-border;
+      box-shadow: none;
     }
   }
 
@@ -36,13 +43,15 @@
 
   &__type,
   &__type[title] {
-    border: 1px solid $color-input;
+    border: 1px solid $color-input-border;
   }
 
   &__input:focus + &__type::after {
+    // Style input + prefix/suffix on focus
+    @extend %ons-input-focus;
+
     border-radius: $input-radius;
     bottom: 0;
-    box-shadow: 0 0 0 3px $color-focus;
     content: '';
     display: block;
     left: 0;
@@ -75,3 +84,25 @@
     }
   }
 }
+
+// Errors
+.ons-input--error:not(:focus) {
+  & + .ons-input-type__type,
+  & + .ons-input-type__type[title] {
+    border-color: $color-errors;
+  }
+
+  & + .ons-input-type__type::after {
+    border-radius: $input-radius;
+    bottom: 0;
+
+    // Style input + prefix/suffix for errors
+    box-shadow: 0 0 0 1px $color-errors;
+    content: '';
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}

package/components/input/_input.scss

@@ -1,10 +1,10 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 1px $color-input;
+  box-shadow: 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
   outline: none;
 }
 
 .ons-input {
-  border: $input-border-width solid $color-input;
+  border: $input-border-width solid $color-input-border;
   border-radius: $input-radius;
   color: inherit;
   display: block;
@@ -45,8 +45,8 @@
   }
 
   &--error:not(:focus) {
-    border: 1px solid $color-errors;
-    box-shadow: inset 0 0 0 1px $color-errors;
+    border: $input-border-width solid $color-errors;
+    box-shadow: 0 0 0 $input-border-width $color-errors;
   }
 
   &--with-description {
@@ -73,7 +73,7 @@
 
 .ons-input--select {
   appearance: none;
-  background: $color-white url('#{$static}/img/icons--chevron-down.svg') no-repeat center right 10px;
+  background: $color-input-bg url('#{$static}/img/icons--chevron-down.svg') no-repeat center right 10px;
   background-size: 1rem;
   line-height: 1.3rem;
   padding: 0.39rem 2rem 0.39rem $input-padding-horizontal;
@@ -100,10 +100,10 @@
     color: transparent;
   }
   &:valid:not(:placeholder-shown) {
-    background-color: $color-white;
+    background-color: $color-input-bg;
   }
   &:focus {
-    background-color: $color-white;
+    background-color: $color-input-bg;
   }
 }
 
@@ -122,7 +122,7 @@
 .ons-input--ghost {
   border: 2px solid rgba(255, 255, 255, 0.6);
   &:focus {
-    border: 2px solid $color-input;
+    border: 2px solid $color-input-border;
   }
 }
 
@@ -156,3 +156,11 @@
     }
   }
 }
+
+// Search type inputs - removes the 'X' clear button from webkit browsers
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  display: none;
+}

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 %}aria-labelledby="{{ params.prefix.id if params.prefix }}{{ params.suffix.id if params.suffix }}"{% endif %}
+            {% if params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id %}aria-labelledby="{{ params.suffix.id }}"{% 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 %}
@@ -71,21 +71,24 @@
         {% endif %}
 
         {% if params.prefix is defined and params.prefix or params.suffix is defined and params.suffix %}
-            {% if params.prefix is defined and params.prefix %}
-                {% set prefixClass = " ons-input-type--prefix" %}
-            {% endif %}
+            {% if (params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id and params.prefix.title is defined and params.prefix.title) or (params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id and params.suffix.title is defined and params.suffix.title) %}
+                {% if params.prefix is defined and params.prefix %}
+                    {% set prefixClass = " ons-input-type--prefix" %}
+                {% endif %}
 
-            <span class="ons-input-type{{ prefixClass }}">
-                <span class="ons-input-type__inner">
-                    {{ 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"
-                         title="{{ abbr.title }}"
-                        >{{ abbr.text or abbr.title }}</abbr>
+                <span class="ons-input-type{{ prefixClass }}">
+                    <span class="ons-input-type__inner">
+                        {{ input | safe }}
+
+                        {% set abbr = params.prefix or params.suffix %}
+                        <abbr
+                            id="{{ abbr.id }}"
+                            class="ons-input-type__type ons-js-input-abbr"
+                            title="{{ abbr.title }}"
+                            >{{ abbr.text or abbr.title }}</abbr>
+                    </span>
                 </span>
-            </span>
+            {% endif %}
         {% elif params.searchButton is defined and params.searchButton %}
             <span class="ons-grid--flex ons-search">
                 {% call onsSearch({

package/components/input/_macro.spec.js

@@ -429,6 +429,34 @@ describe('macro: input', () => {
       ).toBe('Example prefix text');
     });
 
+    it('does not render prefix element when `prefix.id` not set', () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_MINIMAL,
+          prefix: {
+            title: 'Example prefix title',
+            text: 'Example prefix text',
+          },
+        }),
+      );
+
+      expect($('.ons-input-type--prefix').length).toBe(0);
+    });
+
+    it('does not render prefix element when `prefix.title` not set', () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_MINIMAL,
+          prefix: {
+            text: 'Example prefix text',
+            id: 'example-prefix-id',
+          },
+        }),
+      );
+
+      expect($('.ons-input-type--prefix').length).toBe(0);
+    });
+
     it('adds `aria-labelledby` attribute when `suffix` is provided', () => {
       const $ = cheerio.load(
         renderComponent('input', {
@@ -485,6 +513,34 @@ describe('macro: input', () => {
     });
   });
 
+  it('does not render suffix element when `suffix.id` not set', () => {
+    const $ = cheerio.load(
+      renderComponent('input', {
+        ...EXAMPLE_INPUT_MINIMAL,
+        suffix: {
+          title: 'Example suffix title',
+          text: 'Example suffix text',
+        },
+      }),
+    );
+
+    expect($('.ons-input').length).toBe(0);
+  });
+
+  it('does not render suffix element when `suffix.title` not set', () => {
+    const $ = cheerio.load(
+      renderComponent('input', {
+        ...EXAMPLE_INPUT_MINIMAL,
+        suffix: {
+          text: 'Example suffix text',
+          id: 'example-suffix-id',
+        },
+      }),
+    );
+
+    expect($('.ons-input').length).toBe(0);
+  });
+
   describe('search', () => {
     it('renders `search` component', () => {
       const faker = templateFaker();

package/components/label/_label.scss

@@ -2,7 +2,7 @@
   color: inherit;
   display: block;
   font-weight: $font-weight-bold;
-  margin-bottom: 0.4rem;
+  margin: 0 0 0.6rem;
 
   &__description {
     @extend .ons-u-fs-s;

package/components/mutually-exclusive/mutually-exclusive.duration.spec.js

@@ -11,6 +11,7 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
     name: 'address-duration-years',
     suffix: {
       text: 'Years',
+      id: 'address-duration-years-suffix',
     },
     attributes: {
       min: 0,
@@ -22,6 +23,7 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
     name: 'address-duration-months',
     suffix: {
       text: 'Months',
+      id: 'address-duration-months-suffix',
     },
     attributes: {
       min: 0,

package/components/mutually-exclusive/mutually-exclusive.number.spec.js

@@ -16,6 +16,7 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS = {
   prefix: {
     title: 'Pounds',
     text: '£',
+    id: 'currency-prefix',
   },
   mutuallyExclusive: {
     or: 'Or',

package/components/radios/_radio.scss

@@ -9,7 +9,7 @@
     box-shadow: inset 0 0 0 3px $color-white;
 
     &:checked {
-      background: $color-input;
+      background: $color-input-border;
     }
   }
 
@@ -27,7 +27,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 3px $color-white;
+        box-shadow: inset 0 0 0 3px $color-input-bg, 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
       }
     }
   }

package/components/relationships/_relationships.scss

@@ -1,7 +1,7 @@
 .ons-relationships {
   &__playback {
-    border-bottom: 1px solid $color-input;
-    border-top: 1px solid $color-input;
+    border-bottom: 1px solid $color-input-border;
+    border-top: 1px solid $color-input-border;
     margin: 2rem 0 0;
     padding: 1rem 0;
 

package/components/table/_table.scss

@@ -107,8 +107,8 @@
       overflow-x: scroll;
       width: 100%;
       &:focus {
-        outline: 3px solid $color-focus;
-        outline-offset: 3px;
+        box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
+        outline: none;
       }
       .ons-table__header,
       .ons-table__cell {
@@ -119,6 +119,7 @@
       .ons-table__right-shadow,
       .ons-table__left-shadow {
         height: 100%;
+        padding: 2px;
         position: absolute;
         top: 0;
         width: 5px;

package/components/tabs/_tabs.scss

@@ -1,17 +1,33 @@
 .ons-tabs {
   margin-bottom: 1rem;
-}
 
-// Tabs - list
-.ons-tabs__list {
-  border-bottom: 0;
-  margin: 0 0 1rem;
-  overflow: visible;
-  padding: 0;
+  &__title {
+    @extend .ons-u-fs-r--b;
+  }
 
-  &--row {
-    border-bottom: 1px solid $color-borders;
-    margin: 0;
+  // Anchor links list
+  &__list {
+    border-bottom: 0;
+    margin: 0 0 1rem;
+    overflow: visible;
+    padding: 0;
+
+    // Tabs
+    &--row {
+      margin: 0;
+      position: relative;
+
+      &::after {
+        background: $color-borders;
+        bottom: 0;
+        box-shadow: 0 1px 0 0 $color-page-light;
+        content: '';
+        height: 1px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+    }
   }
 }
 
@@ -32,7 +48,7 @@
   border-radius: 3px 3px 0 0;
   color: $color-text;
   display: inline-block;
-  height: 2.5rem;
+  height: 2.55rem;
   line-height: 2.3rem;
   margin: 0 0.1rem 0 0;
   overflow: visible;
@@ -47,47 +63,52 @@
     text-decoration: underline solid $color-text 2px;
   }
 
+  &:focus {
+    background-color: $color-focus;
+    border-bottom: 1px solid $color-borders;
+    box-shadow: inset 0 0 0 9px $color-button-secondary,
+      inset 17px 0 0 0 $color-button-secondary,
+      inset -17px 0 0 0 $color-button-secondary,
+      inset 0 -13px 0 0 $color-text-link-focus;
+    color: $color-text-link-focus;
+    outline: none;
+    text-decoration: underline solid $color-text 2px;
+  }
+
+  // Tab when selected
   &[aria-selected='true'] {
-    background-color: $color-white;
+    background-color: $color-page-light;
+    border-bottom: none;
     border-color: $color-borders;
-    // Tab when selected
     border-radius: 3px 3px 0 0;
-    font-weight: 700;
     text-decoration: none;
+    z-index: 1;
 
-    &::after {
-      background: $color-white;
-      bottom: -2px;
-      box-shadow: none;
-      content: '';
-      height: 0.09rem;
-      left: 0;
-      // hides the lower border of the active tab.
-      position: absolute;
-      right: 0;
-      z-index: 3;
+    &:focus {
+      background-color: $color-focus;
+      border-bottom: 1px solid $color-page-light;
+      box-shadow: inset 0 0 0 9px $color-page-light,
+        inset 17px 0 0 0 $color-page-light,
+        inset -17px 0 0 0 $color-page-light,
+        inset 0 -13px 0 0 $color-text-link-focus;
+      text-decoration: none;
     }
   }
-
-  &:focus {
-    background-color: $color-focus;
-    color: $color-text-link-focus;
-    outline: none;
-  }
 }
 
 // Tabs - Panels
 .ons-tabs__panel {
-  margin-bottom: 1rem;
+  padding-bottom: 1rem;
   padding-top: 1rem;
   position: relative;
-  z-index: 10;
 
   &--hidden {
     display: none;
   }
 
   &:focus {
-    outline: 4px solid $color-focus;
+    box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
+    outline: none;
+    z-index: 1;
   }
 }

package/components/tabs/tabs.js

@@ -30,8 +30,6 @@ export default class Tabs {
     this.jsTabItemAsRowClass = 'ons-tab__list-item--row';
     this.jsTabAsListClass = 'ons-tab--row';
 
-    this.tabsTitle.classList.add('ons-u-vh');
-
     if (matchMediaUtil.hasMatchMedia()) {
       this.setupViewportChecks();
     } else {
@@ -61,6 +59,8 @@ export default class Tabs {
     this.tabList[0].setAttribute('role', 'tablist');
     this.tabList[0].classList.add(this.jsTabListAsRowClass);
 
+    this.tabsTitle.classList.add('ons-u-vh');
+
     this.tabPanels.forEach(panel => {
       panel.setAttribute('tabindex', '0');
     });
@@ -90,6 +90,8 @@ export default class Tabs {
     this.tabList[0].removeAttribute('role');
     this.tabList[0].classList.remove(this.jsTabListAsRowClass);
 
+    this.tabsTitle.classList.remove('ons-u-vh');
+
     this.tabPanels.forEach(panel => {
       panel.removeAttribute('tabindex', '0');
     });