@ons/design-system 70.0.6 → 70.0.8

package/components/panel/_panel.scss

@@ -1,253 +1,254 @@
 @mixin panel-variant($name, $color, $color-bg) {
-  .ons-panel {
-    &--#{$name} {
-      background: $color-bg;
-      border-color: $color;
-      outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+    .ons-panel {
+        &--#{$name} {
+            background: $color-bg;
+            border-color: $color;
+            outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+        }
+
+        &--#{$name} & {
+            &__header {
+                background: $color;
+            }
+        }
     }
-
-    &--#{$name} & {
-      &__header {
-        background: $color;
-      }
-    }
-  }
 }
 
 .ons-branded-warning {
-  background: var(--ons-color-branded-tertiary);
+    background: var(--ons-color-branded-tertiary);
 }
 
 .ons-announcement {
-  background-color: var(--ons-color-black);
+    background-color: var(--ons-color-black);
 }
 
 .ons-branded-warning,
 .ons-announcement {
-  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 }
 
 .ons-panel {
-  border-radius: 0;
-  position: relative;
-
-  // Removes inherited bottom margin to make whitespace inside panel equal
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  .ons-field {
-    margin-bottom: 0;
-  }
-
-  &:focus {
-    box-shadow: none;
-    outline: 4px solid var(--ons-color-focus) !important;
-  }
-
-  &__header {
     border-radius: 0;
-    color: var(--ons-color-text-inverse);
-    margin: 0;
-    padding: 0.75rem 1rem;
-  }
-
-  &__timer {
-    white-space: nowrap;
-  }
-
-  &__title {
-    margin: 0;
-  }
-
-  &__body {
-    padding: 1rem;
+    position: relative;
 
     // Removes inherited bottom margin to make whitespace inside panel equal
-    > *:last-child,
-    strong > *:last-child {
-      margin-bottom: 0;
+    > *:last-child {
+        margin-bottom: 0;
     }
 
-    &.ons-icon-margin--xxxl {
-      padding-left: 2.7rem !important;
-
-      @include mq(m) {
-        padding-left: 3.5rem !important;
-      }
+    .ons-field {
+        margin-bottom: 0;
     }
-    &.ons-icon-margin--xxl {
-      padding-left: 2.45rem !important;
 
-      @include mq(m) {
-        padding-left: 2.9rem !important;
-      }
+    &:focus {
+        box-shadow: none;
+        outline: 4px solid var(--ons-color-focus) !important;
     }
-    &.ons-icon-margin--xl {
-      padding-left: 2.35rem !important;
 
-      @include mq(m) {
-        padding-left: 2.55rem !important;
-      }
+    &__header {
+        border-radius: 0;
+        color: var(--ons-color-text-inverse);
+        margin: 0;
+        padding: 0.75rem 1rem;
     }
-    &.ons-icon-margin--l {
-      padding-left: 2.25rem !important;
 
-      @include mq(m) {
-        padding-left: 2.35rem !important;
-      }
+    &__timer {
+        white-space: nowrap;
     }
-    &.ons-icon-margin--m {
-      padding-left: 2.05rem !important;
 
-      @include mq(m) {
-        padding-left: 2.2rem !important;
-      }
-    }
-    &.ons-icon-margin--s {
-      padding-left: 1.7rem !important;
+    &__title {
+        margin: 0;
     }
-  }
-
-  &__error {
-    color: var(--ons-color-errors);
-  }
-
-  &--warn {
-    border: 0 !important;
-    margin-bottom: 1rem;
-    outline: none !important;
-    padding: 0;
-
-    &--footer {
-      background-color: var(--ons-color-grey-15) !important;
-      margin-bottom: 0;
-      padding: 1rem 0 !important;
+
+    &__body {
+        padding: 1rem;
+
+        // Removes inherited bottom margin to make whitespace inside panel equal
+        > *:last-child,
+        strong > *:last-child {
+            margin-bottom: 0;
+        }
+
+        &.ons-icon-margin--xxxl {
+            padding-left: 2.7rem !important;
+
+            @include mq(m) {
+                padding-left: 3.5rem !important;
+            }
+        }
+        &.ons-icon-margin--xxl {
+            padding-left: 2.45rem !important;
+
+            @include mq(m) {
+                padding-left: 2.9rem !important;
+            }
+        }
+        &.ons-icon-margin--xl {
+            padding-left: 2.35rem !important;
+
+            @include mq(m) {
+                padding-left: 2.55rem !important;
+            }
+        }
+        &.ons-icon-margin--l {
+            padding-left: 2.25rem !important;
+
+            @include mq(m) {
+                padding-left: 2.35rem !important;
+            }
+        }
+        &.ons-icon-margin--m {
+            padding-left: 2.05rem !important;
+
+            @include mq(m) {
+                padding-left: 2.2rem !important;
+            }
+        }
+        &.ons-icon-margin--s {
+            padding-left: 1.7rem !important;
+        }
     }
-  }
-
-  &--warn-branded,
-  &--announcement {
-    border: 0 !important;
-    color: var(--ons-color-white);
-    margin-bottom: 0;
-    outline: none !important;
-    padding: 1rem 0 !important;
-    a {
-      color: inherit;
-      text-decoration: underline solid var(--ons-color-white) 1px;
+
+    &__error {
+        color: var(--ons-color-errors);
     }
-    a:hover {
-      text-decoration-thickness: 2px;
+
+    &--warn {
+        border: 0 !important;
+        margin-bottom: 1rem;
+        outline: none !important;
+        padding: 0;
+
+        &--footer {
+            background-color: var(--ons-color-grey-15) !important;
+            margin-bottom: 0;
+            padding: 1rem 0 !important;
+        }
     }
-  }
 
-  &--announcement {
-    a:focus {
-      box-shadow: 0 -2px var(--ons-color-focus),
-        0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
+    &--warn-branded,
+    &--announcement {
+        border: 0 !important;
+        color: var(--ons-color-white);
+        margin-bottom: 0;
+        outline: none !important;
+        padding: 1rem 0 !important;
+        a {
+            color: inherit;
+            text-decoration: underline solid var(--ons-color-white) 1px;
+        }
+        a:hover {
+            text-decoration-thickness: 2px;
+        }
     }
-  }
-
-  &--no-title {
-    border-left: 8px solid transparent;
-    padding: 1rem;
-    .ons-panel__body {
-      background: none;
-      padding: 0;
+
+    &--announcement {
+        a:focus {
+            box-shadow:
+                0 -2px var(--ons-color-focus),
+                0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
+        }
     }
-    &.ons-panel--warn {
-      padding: 0;
+
+    &--no-title {
+        border-left: 8px solid transparent;
+        padding: 1rem;
+        .ons-panel__body {
+            background: none;
+            padding: 0;
+        }
+        &.ons-panel--warn {
+            padding: 0;
+        }
     }
-  }
 
-  &--spacious {
-    padding: 1rem;
+    &--spacious {
+        padding: 1rem;
 
-    @include mq(m) {
-      padding: 2rem;
+        @include mq(m) {
+            padding: 2rem;
+        }
     }
-  }
 
-  &--warn &,
-  &--warn-branded &,
-  &--announcement & {
-    &__body {
-      font-weight: $font-weight-bold;
-      min-height: 2rem; // Height of icon
-      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
+    &--warn &,
+    &--warn-branded &,
+    &--announcement & {
+        &__body {
+            font-weight: $font-weight-bold;
+            min-height: 2rem; // Height of icon
+            padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
+        }
+        &__icon {
+            background: var(--ons-color-black);
+            border-radius: 50%;
+            color: var(--ons-color-white);
+            font-size: 1.5rem;
+            font-weight: $font-weight-bold;
+            line-height: 2rem;
+            min-height: 2rem;
+            min-width: 2rem;
+            outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+            text-align: center;
+        }
     }
-    &__icon {
-      background: var(--ons-color-black);
-      border-radius: 50%;
-      color: var(--ons-color-white);
-      font-size: 1.5rem;
-      font-weight: $font-weight-bold;
-      line-height: 2rem;
-      min-height: 2rem;
-      min-width: 2rem;
-      outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
-      text-align: center;
-    }
-  }
 
-  &--announcement & {
-    &__body div > *:last-child {
-      margin-bottom: 0;
+    &--announcement & {
+        &__body div > *:last-child {
+            margin-bottom: 0;
+        }
+
+        &__icon {
+            background-color: var(--ons-color-white);
+            color: var(--ons-color-black);
+            display: flex;
+            svg {
+                margin: auto;
+            }
+        }
     }
 
-    &__icon {
-      background-color: var(--ons-color-white);
-      color: var(--ons-color-black);
-      display: flex;
-      svg {
-        margin: auto;
-      }
+    &--warn-branded & {
+        &__icon {
+            background-color: var(--ons-color-white);
+            color: var(--ons-color-branded-tertiary);
+        }
     }
-  }
 
-  &--warn-branded & {
-    &__icon {
-      background-color: var(--ons-color-white);
-      color: var(--ons-color-branded-tertiary);
-    }
-  }
-
-  &--success & {
-    &__icon {
-      left: 0;
-      padding-left: 1rem;
-      .ons-icon {
-        fill: var(--ons-color-success) !important;
-        margin-top: -15% !important;
-      }
+    &--success & {
+        &__icon {
+            left: 0;
+            padding-left: 1rem;
+            .ons-icon {
+                fill: var(--ons-color-success) !important;
+                margin-top: -15% !important;
+            }
+        }
     }
-  }
-
-  &__icon + &__body {
-    padding-left: 2rem;
-  }
 
-  &--bare & {
-    &__icon {
-      height: 1.3rem;
-      width: 1.3rem;
+    &__icon + &__body {
+        padding-left: 2rem;
     }
-    &__body {
-      padding: 0 0 0 1.5rem;
+
+    &--bare & {
+        &__icon {
+            height: 1.3rem;
+            width: 1.3rem;
+        }
+        &__body {
+            padding: 0 0 0 1.5rem;
+        }
     }
-  }
-
-  &--info,
-  &--bare,
-  &--success,
-  &--warn,
-  &--warn-branded,
-  &--announcement {
-    .ons-panel__icon {
-      position: absolute;
+
+    &--info,
+    &--bare,
+    &--success,
+    &--warn,
+    &--warn-branded,
+    &--announcement {
+        .ons-panel__icon {
+            position: absolute;
+        }
     }
-  }
 }
 
 @include panel-variant(error, var(--ons-color-errors), var(--ons-color-errors-tint));

package/components/password/_macro.spec.js

@@ -6,132 +6,132 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_PASSWORD_MINIMAL = {
-  id: 'example-password',
-  name: 'example-password-name',
-  label: {
-    text: 'Label text',
-    description: 'Description text',
-    classes: 'extra-label-class',
-  },
-  showPasswordText: 'Show password',
+    id: 'example-password',
+    name: 'example-password-name',
+    label: {
+        text: 'Label text',
+        description: 'Description text',
+        classes: 'extra-label-class',
+    },
+    showPasswordText: 'Show password',
 };
 
 const EXAMPLE_PASSWORD = {
-  ...EXAMPLE_PASSWORD_MINIMAL,
-  fieldId: 'example-password-field',
-  fieldClasses: 'extra-field-class',
+    ...EXAMPLE_PASSWORD_MINIMAL,
+    fieldId: 'example-password-field',
+    fieldClasses: 'extra-field-class',
 };
 
 const EXAMPLE_PASSWORD_WITH_ERROR = {
-  ...EXAMPLE_PASSWORD,
-  error: {
-    id: 'example-error',
-    text: 'Error text...',
-  },
+    ...EXAMPLE_PASSWORD,
+    error: {
+        id: 'example-error',
+        text: 'Error text...',
+    },
 };
 
 describe('macro: password', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('passes jest-axe checks when error is shown', async () => {
-    const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+    it('passes jest-axe checks when error is shown', async () => {
+        const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('provides expected parameters to the inner `field` component', () => {
-    const faker = templateFaker();
-    const fieldSpy = faker.spy('field');
+    it('provides expected parameters to the inner `field` component', () => {
+        const faker = templateFaker();
+        const fieldSpy = faker.spy('field');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
 
-    expect(fieldSpy.occurrences[0]).toEqual({
-      id: 'example-password-field',
-      classes: 'ons-js-password extra-field-class',
-      error: undefined,
+        expect(fieldSpy.occurrences[0]).toEqual({
+            id: 'example-password-field',
+            classes: 'ons-js-password extra-field-class',
+            error: undefined,
+        });
     });
-  });
 
-  it('provides expected parameters to the inner `field` component when there is an error', () => {
-    const faker = templateFaker();
-    const fieldSpy = faker.spy('field');
+    it('provides expected parameters to the inner `field` component when there is an error', () => {
+        const faker = templateFaker();
+        const fieldSpy = faker.spy('field');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
 
-    expect(fieldSpy.occurrences[0]).toEqual({
-      id: 'example-password-field',
-      classes: 'ons-js-password extra-field-class',
-      error: {
-        id: 'example-error',
-        text: 'Error text...',
-      },
+        expect(fieldSpy.occurrences[0]).toEqual({
+            id: 'example-password-field',
+            classes: 'ons-js-password extra-field-class',
+            error: {
+                id: 'example-error',
+                text: 'Error text...',
+            },
+        });
     });
-  });
 
-  it('provides expected parameters to the inner `label` component', () => {
-    const faker = templateFaker();
-    const labelSpy = faker.spy('label');
+    it('provides expected parameters to the inner `label` component', () => {
+        const faker = templateFaker();
+        const labelSpy = faker.spy('label');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
 
-    expect(labelSpy.occurrences[0]).toEqual({
-      for: 'example-password',
-      text: 'Label text',
-      description: 'Description text',
-      classes: 'extra-label-class',
+        expect(labelSpy.occurrences[0]).toEqual({
+            for: 'example-password',
+            text: 'Label text',
+            description: 'Description text',
+            classes: 'extra-label-class',
+        });
     });
-  });
-
-  it('provides expected parameters to the inner `checkbox` component', () => {
-    const faker = templateFaker();
-    const checkboxSpy = faker.spy('checkboxes/checkbox');
-
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
-
-    expect(checkboxSpy.occurrences[0]).toEqual({
-      id: 'example-password-toggle',
-      classes: 'ons-js-password-toggle-wrap ons-checkbox--toggle ons-u-d-no',
-      inputClasses: 'ons-js-password-toggle',
-      name: 'show-password',
-      label: {
-        text: 'Show password',
-      },
+
+    it('provides expected parameters to the inner `checkbox` component', () => {
+        const faker = templateFaker();
+        const checkboxSpy = faker.spy('checkboxes/checkbox');
+
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+
+        expect(checkboxSpy.occurrences[0]).toEqual({
+            id: 'example-password-toggle',
+            classes: 'ons-js-password-toggle-wrap ons-checkbox--toggle ons-u-d-no',
+            inputClasses: 'ons-js-password-toggle',
+            name: 'show-password',
+            label: {
+                text: 'Show password',
+            },
+        });
     });
-  });
 
-  it('provides expected parameters to the inner `input` component', () => {
-    const faker = templateFaker();
-    const inputSpy = faker.spy('input');
+    it('provides expected parameters to the inner `input` component', () => {
+        const faker = templateFaker();
+        const inputSpy = faker.spy('input');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
 
-    expect(inputSpy.occurrences[0]).toEqual({
-      id: 'example-password',
-      name: 'example-password-name',
-      type: 'password',
-      classes: 'ons-u-mt-xs ons-js-password-input',
-      dontWrap: true,
+        expect(inputSpy.occurrences[0]).toEqual({
+            id: 'example-password',
+            name: 'example-password-name',
+            type: 'password',
+            classes: 'ons-u-mt-xs ons-js-password-input',
+            dontWrap: true,
+        });
     });
-  });
 
-  it('provides expected parameters to the inner `input` component when error is shown', () => {
-    const faker = templateFaker();
-    const inputSpy = faker.spy('input');
+    it('provides expected parameters to the inner `input` component when error is shown', () => {
+        const faker = templateFaker();
+        const inputSpy = faker.spy('input');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
 
-    expect(inputSpy.occurrences[0]).toEqual({
-      id: 'example-password',
-      name: 'example-password-name',
-      type: 'password',
-      classes: 'ons-u-mt-xs ons-js-password-input ons-input--error',
-      dontWrap: true,
+        expect(inputSpy.occurrences[0]).toEqual({
+            id: 'example-password',
+            name: 'example-password-name',
+            type: 'password',
+            classes: 'ons-u-mt-xs ons-js-password-input ons-input--error',
+            dontWrap: true,
+        });
     });
-  });
 });