@ons/design-system 70.0.6 → 70.0.8

package/components/address-input/example-address-input-editable.njk

@@ -9,7 +9,7 @@
     },
     "isEditable": true,
     "mandatory": true,
-    "APIDomain": "#",
+    "APIDomain": "https://mock-address-api.gcp.onsdigital.uk",
     'APIDomainBearerToken': "some_token",
     "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
     "ariaYouHaveSelected": "You have selected",

package/components/address-input/example-address-input.njk

@@ -11,7 +11,7 @@
     "mandatory": true,
     "externalInitialiser": true,
     "autocomplete": "off",
-    "APIDomain": "#",
+    "APIDomain": "https://mock-address-api.gcp.onsdigital.uk",
     'APIDomainBearerToken': "some_token",
     "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
     "ariaYouHaveSelected": "You have selected",

package/components/address-output/_address-output.scss

@@ -1,5 +1,5 @@
 .ons-address-output {
-  &__lines {
-    margin-bottom: 0;
-  }
+    &__lines {
+        margin-bottom: 0;
+    }
 }

package/components/address-output/_macro.spec.js

@@ -6,93 +6,93 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_ADDRESS_OUTPUT_FULL = {
-  unit: 'Unit 5',
-  organisation: 'Trescos',
-  line1: 'Abingdon Road',
-  line2: 'Goathill',
-  town: 'Barry',
-  postcode: 'AB12 6UH',
+    unit: 'Unit 5',
+    organisation: 'Trescos',
+    line1: 'Abingdon Road',
+    line2: 'Goathill',
+    town: 'Barry',
+    postcode: 'AB12 6UH',
 };
 
 const EXAMPLE_ADDRESS_OUTPUT_NONE = {};
 
 describe('macro: address-output', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has additionally provided container style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('address-output', {
-        ...EXAMPLE_ADDRESS_OUTPUT_FULL,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
-    expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('renders no lines when no parameters are provided', () => {
-    const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));
-
-    expect($('.ons-address-output__lines *').length).toBe(0);
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { unit: 'Unit 5' }],
-  ])('renders `unit` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { organisation: 'Trescos' }],
-  ])('renders `organisation` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { line1: 'Abingdon Road' }],
-  ])('renders `line1` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { line2: 'Goathill' }],
-  ])('renders `line2` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { town: 'Barry' }],
-  ])('renders `town` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__town').text().trim()).toBe('Barry');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { postcode: 'AB12 6UH' }],
-  ])('renders `postcode` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
-  });
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has additionally provided container style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('address-output', {
+                ...EXAMPLE_ADDRESS_OUTPUT_FULL,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
+        expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('renders no lines when no parameters are provided', () => {
+        const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));
+
+        expect($('.ons-address-output__lines *').length).toBe(0);
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { unit: 'Unit 5' }],
+    ])('renders `unit` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { organisation: 'Trescos' }],
+    ])('renders `organisation` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { line1: 'Abingdon Road' }],
+    ])('renders `line1` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { line2: 'Goathill' }],
+    ])('renders `line2` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { town: 'Barry' }],
+    ])('renders `town` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__town').text().trim()).toBe('Barry');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { postcode: 'AB12 6UH' }],
+    ])('renders `postcode` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
+    });
 });

package/components/autosuggest/_autosuggest.scss

@@ -1,137 +1,137 @@
 .ons-autosuggest {
-  position: relative;
+    position: relative;
 
-  &__combobox {
-    border-radius: $input-radius;
-    display: inline-block;
+    &__combobox {
+        border-radius: $input-radius;
+        display: inline-block;
 
-    @include mq(xxs, s) {
-      width: 100%;
+        @include mq(xxs, s) {
+            width: 100%;
+        }
     }
-  }
-
-  &__results {
-    border: 1px solid var(--ons-color-input-border);
-    border-radius: $input-radius;
-    display: none;
-    margin: 0.5rem 0 0;
-    overflow: hidden;
-    padding: 0;
-    width: 100%;
-  }
-
-  &__group {
-    color: var(--ons-color-text-link);
-    text-decoration: underline;
-  }
-
-  &__results-title {
-    background: var(--ons-color-grey-15);
-    border-bottom: 1px solid var(--ons-color-input-border);
-    padding: 0.25rem 0.5rem;
-  }
-
-  &__listbox {
-    background: var(--ons-color-white);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &__option {
-    cursor: pointer;
-    margin: 0;
-    outline: none;
-    padding: $input-padding-vertical $input-padding-horizontal;
 
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--ons-color-input-border);
+    &__results {
+        border: 1px solid var(--ons-color-input-border);
+        border-radius: $input-radius;
+        display: none;
+        margin: 0.5rem 0 0;
+        overflow: hidden;
+        padding: 0;
+        width: 100%;
     }
 
-    &:not(&--no-results, &--more-results):hover,
-    &--focused:not(&--no-results) {
-      background: var(--ons-color-text-link-hover);
-      border-color: var(--ons-color-text-link-hover);
-      color: var(--ons-color-white);
-
-      .ons-autosuggest__group,
-      .ons-autosuggest__category {
-        color: var(--ons-color-white);
-      }
+    &__group {
+        color: var(--ons-color-text-link);
+        text-decoration: underline;
     }
 
-    &:active:not(&--no-results, &--more-results) {
-      background: var(--ons-color-focus);
-      color: var(--ons-color-text-link-focus);
+    &__results-title {
+        background: var(--ons-color-grey-15);
+        border-bottom: 1px solid var(--ons-color-input-border);
+        padding: 0.25rem 0.5rem;
+    }
 
-      .ons-autosuggest__group,
-      .ons-autosuggest__category {
-        color: var(--ons-color-text-link-focus);
-      }
+    &__listbox {
+        background: var(--ons-color-white);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        &:focus {
+            outline: none;
+        }
     }
 
-    &--no-results,
-    &--more-results {
-      background: var(--ons-color-grey-15);
-      cursor: not-allowed;
-      padding: 0.25rem 0.5rem;
+    &__option {
+        cursor: pointer;
+        margin: 0;
+        outline: none;
+        padding: $input-padding-vertical $input-padding-horizontal;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--ons-color-input-border);
+        }
+
+        &:not(&--no-results, &--more-results):hover,
+        &--focused:not(&--no-results) {
+            background: var(--ons-color-text-link-hover);
+            border-color: var(--ons-color-text-link-hover);
+            color: var(--ons-color-white);
+
+            .ons-autosuggest__group,
+            .ons-autosuggest__category {
+                color: var(--ons-color-white);
+            }
+        }
+
+        &:active:not(&--no-results, &--more-results) {
+            background: var(--ons-color-focus);
+            color: var(--ons-color-text-link-focus);
+
+            .ons-autosuggest__group,
+            .ons-autosuggest__category {
+                color: var(--ons-color-text-link-focus);
+            }
+        }
+
+        &--no-results,
+        &--more-results {
+            background: var(--ons-color-grey-15);
+            cursor: not-allowed;
+            padding: 0.25rem 0.5rem;
+        }
     }
-  }
 
-  &__warning {
-    background: #f0f0f0;
-    margin: 0;
-    padding-left: 0.5rem;
+    &__warning {
+        background: #f0f0f0;
+        margin: 0;
+        padding-left: 0.5rem;
 
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--ons-color-input-border);
-    }
-  }
-
-  &__panel.ons-panel--warn {
-    background: none;
-    border: 0;
-    margin: 0;
-    .ons-panel__icon {
-      font-size: 21px;
-      line-height: 25px;
-      margin-top: 0;
-      min-height: 24px;
-      min-width: 26px;
-      top: 17px;
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--ons-color-input-border);
+        }
     }
 
-    .ons-panel__body {
-      font-weight: $font-weight-bold;
-      padding: 0.8rem 0.8rem 0.8rem 2rem;
+    &__panel.ons-panel--warn {
+        background: none;
+        border: 0;
+        margin: 0;
+        .ons-panel__icon {
+            font-size: 21px;
+            line-height: 25px;
+            margin-top: 0;
+            min-height: 24px;
+            min-width: 26px;
+            top: 17px;
+        }
+
+        .ons-panel__body {
+            font-weight: $font-weight-bold;
+            padding: 0.8rem 0.8rem 0.8rem 2rem;
+        }
     }
-  }
-
-  // Modifiers
-  &:not(&--initialised) & {
-    &__instructions,
-    &__listbox,
-    &__status {
-      display: none;
+
+    // Modifiers
+    &:not(&--initialised) & {
+        &__instructions,
+        &__listbox,
+        &__status {
+            display: none;
+        }
     }
-  }
 
-  &--has-results & {
-    &__results {
-      display: block;
+    &--has-results & {
+        &__results {
+            display: block;
+        }
     }
-  }
-
-  &--header {
-    .ons-autosuggest__results {
-      border: none;
-      box-shadow: 0 0 5px 0 rgb(34 34 34 / 60%);
-      left: 0;
-      position: absolute;
-      z-index: 10;
+
+    &--header {
+        .ons-autosuggest__results {
+            border: 0;
+            box-shadow: 0 0 5px 0 rgb(34 34 34 / 60%);
+            left: 0;
+            position: absolute;
+            z-index: 10;
+        }
     }
-  }
 }