@ons/design-system 70.0.6 → 70.0.8

package/components/description-list/_description-list.scss

@@ -1,32 +1,32 @@
 .ons-description-list {
-  &__items {
-    margin: 0 0 2rem;
-  }
+    &__items {
+        margin: 0 0 2rem;
+    }
 
-  &__term {
-    clear: both;
-    float: left;
-    font-weight: $font-weight-bold;
+    &__term {
+        clear: both;
+        float: left;
+        font-weight: $font-weight-bold;
 
-    &:not(:first-child) {
-      margin-top: 0.5rem;
+        &:not(:first-child) {
+            margin-top: 0.5rem;
+        }
     }
-  }
 
-  &__value {
-    float: right;
-    margin-left: 0; /* As normalize adds a 40px left margin */
+    &__value {
+        float: right;
+        margin-left: 0; /* As normalize adds a 40px left margin */
 
-    &:not(:nth-of-type(1)) {
-      @include mq(m) {
-        margin-top: 0.5rem;
-      }
-    }
+        &:not(:nth-of-type(1)) {
+            @include mq(m) {
+                margin-top: 0.5rem;
+            }
+        }
 
-    & + & {
-      @include mq(m) {
-        margin-top: 0;
-      }
+        & + & {
+            @include mq(m) {
+                margin-top: 0;
+            }
+        }
     }
-  }
 }

package/components/description-list/_macro.spec.js

@@ -6,162 +6,162 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_DESCRIPTION_LIST_FULL = {
-  id: 'example-id',
-  classes: 'ons-u-mb-no',
-  descriptionListLabel: 'This is an example of the description list component',
-  termCol: 2,
-  descriptionCol: 10,
-  itemsList: [
-    {
-      term: 'Survey:',
-      descriptions: [
+    id: 'example-id',
+    classes: 'ons-u-mb-no',
+    descriptionListLabel: 'This is an example of the description list component',
+    termCol: 2,
+    descriptionCol: 10,
+    itemsList: [
         {
-          id: 'description-1',
-          description: 'Bricks & Blocks',
+            term: 'Survey:',
+            descriptions: [
+                {
+                    id: 'description-1',
+                    description: 'Bricks & Blocks',
+                },
+            ],
         },
-      ],
-    },
-    {
-      term: 'RU Refs:',
-      descriptions: [
         {
-          id: 'description-2',
-          description: '49900000118',
+            term: 'RU Refs:',
+            descriptions: [
+                {
+                    id: 'description-2',
+                    description: '49900000118',
+                },
+                {
+                    id: 'description-3',
+                    description: '49300005832',
+                },
+            ],
         },
-        {
-          id: 'description-3',
-          description: '49300005832',
-        },
-      ],
-    },
-  ],
+    ],
 };
 
 const EXAMPLE_DESCRIPTION_LIST_MINIMAL = {
-  itemsList: [
-    {
-      term: 'Survey:',
-      descriptions: [
-        {
-          description: 'Bricks & Blocks',
-        },
-      ],
-    },
-    {
-      term: 'RU Refs:',
-      descriptions: [
+    itemsList: [
         {
-          description: '49900000118',
+            term: 'Survey:',
+            descriptions: [
+                {
+                    description: 'Bricks & Blocks',
+                },
+            ],
         },
         {
-          description: '49300005832',
+            term: 'RU Refs:',
+            descriptions: [
+                {
+                    description: '49900000118',
+                },
+                {
+                    description: '49300005832',
+                },
+            ],
         },
-      ],
-    },
-  ],
+    ],
 };
 
 describe('macro: description-list', () => {
-  it('passes jest-axe checks when all parameters are provided', async () => {
-    const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('passes jest-axe checks when minimal parameters are provided', async () => {
-    const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_MINIMAL));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('description-list', {
-        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
-        id: 'example-id',
-      }),
-    );
-
-    expect($('#example-id').length).toBe(1);
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('description-list', {
-        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-description-list').hasClass('extra-class')).toBe(true);
-    expect($('.ons-description-list').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('outputs `title` and `aria-label` attributes when `descriptionListLabel` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('description-list', {
-        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
-        descriptionListLabel: 'This is an example of the description list component',
-      }),
-    );
-
-    expect($('.ons-description-list').attr('title')).toBe('This is an example of the description list component');
-    expect($('.ons-description-list').attr('aria-label')).toBe('This is an example of the description list component');
-  });
-
-  it('outputs list items as expected', () => {
-    const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL));
-
-    const $listElements = $('.ons-description-list__term, .ons-description-list__value');
-
-    expect($listElements[0].tagName).toBe('dt');
-    expect($($listElements[0]).text()).toBe('Survey:');
-
-    expect($listElements[1].tagName).toBe('dd');
-    expect($($listElements[1]).attr('id')).toBe('description-1');
-    expect($($listElements[1]).text()).toBe('Bricks & Blocks');
-
-    expect($listElements[2].tagName).toBe('dt');
-    expect($($listElements[2]).text()).toBe('RU Refs:');
-
-    expect($listElements[3].tagName).toBe('dd');
-    expect($($listElements[3]).attr('id')).toBe('description-2');
-    expect($($listElements[3]).text()).toBe('49900000118');
-
-    expect($listElements[4].tagName).toBe('dd');
-    expect($($listElements[4]).attr('id')).toBe('description-3');
-    expect($($listElements[4]).text()).toBe('49300005832');
-  });
-
-  it.each([
-    [1, 'ons-col-1\\@m'],
-    [4, 'ons-col-4\\@m'],
-  ])('applies class for the provided `termCol` (%i -> %s)', (termCol, expectedClass) => {
-    const $ = cheerio.load(
-      renderComponent('description-list', {
-        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
-        termCol,
-      }),
-    );
-
-    const $termElements = $(`.ons-description-list__term.${expectedClass}`);
-    expect($termElements.length).toBe(2);
-  });
-
-  it.each([
-    [1, 'ons-col-1\\@m'],
-    [4, 'ons-col-4\\@m'],
-  ])('applies class for the provided `descriptionCol` (%i -> %s)', (descriptionCol, expectedClass) => {
-    const $ = cheerio.load(
-      renderComponent('description-list', {
-        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
-        descriptionCol,
-      }),
-    );
-
-    const $valueElements = $(`.ons-description-list__value.${expectedClass}`);
-    expect($valueElements.length).toBe(3);
-  });
+    it('passes jest-axe checks when all parameters are provided', async () => {
+        const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('passes jest-axe checks when minimal parameters are provided', async () => {
+        const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_MINIMAL));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('description-list', {
+                ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+                id: 'example-id',
+            }),
+        );
+
+        expect($('#example-id').length).toBe(1);
+    });
+
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('description-list', {
+                ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-description-list').hasClass('extra-class')).toBe(true);
+        expect($('.ons-description-list').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('outputs `title` and `aria-label` attributes when `descriptionListLabel` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('description-list', {
+                ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+                descriptionListLabel: 'This is an example of the description list component',
+            }),
+        );
+
+        expect($('.ons-description-list').attr('title')).toBe('This is an example of the description list component');
+        expect($('.ons-description-list').attr('aria-label')).toBe('This is an example of the description list component');
+    });
+
+    it('outputs list items as expected', () => {
+        const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL));
+
+        const $listElements = $('.ons-description-list__term, .ons-description-list__value');
+
+        expect($listElements[0].tagName).toBe('dt');
+        expect($($listElements[0]).text()).toBe('Survey:');
+
+        expect($listElements[1].tagName).toBe('dd');
+        expect($($listElements[1]).attr('id')).toBe('description-1');
+        expect($($listElements[1]).text()).toBe('Bricks & Blocks');
+
+        expect($listElements[2].tagName).toBe('dt');
+        expect($($listElements[2]).text()).toBe('RU Refs:');
+
+        expect($listElements[3].tagName).toBe('dd');
+        expect($($listElements[3]).attr('id')).toBe('description-2');
+        expect($($listElements[3]).text()).toBe('49900000118');
+
+        expect($listElements[4].tagName).toBe('dd');
+        expect($($listElements[4]).attr('id')).toBe('description-3');
+        expect($($listElements[4]).text()).toBe('49300005832');
+    });
+
+    it.each([
+        [1, 'ons-col-1\\@m'],
+        [4, 'ons-col-4\\@m'],
+    ])('applies class for the provided `termCol` (%i -> %s)', (termCol, expectedClass) => {
+        const $ = cheerio.load(
+            renderComponent('description-list', {
+                ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+                termCol,
+            }),
+        );
+
+        const $termElements = $(`.ons-description-list__term.${expectedClass}`);
+        expect($termElements.length).toBe(2);
+    });
+
+    it.each([
+        [1, 'ons-col-1\\@m'],
+        [4, 'ons-col-4\\@m'],
+    ])('applies class for the provided `descriptionCol` (%i -> %s)', (descriptionCol, expectedClass) => {
+        const $ = cheerio.load(
+            renderComponent('description-list', {
+                ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+                descriptionCol,
+            }),
+        );
+
+        const $valueElements = $(`.ons-description-list__value.${expectedClass}`);
+        expect($valueElements.length).toBe(3);
+    });
 });

package/components/details/_details.scss

@@ -1,135 +1,135 @@
 $details-caret-width: 1.5rem;
 
 .ons-details {
-  &--initialised & {
-    &__heading {
-      color: var(--ons-color-text-link);
-      cursor: pointer;
-      display: inline-block;
-      outline: none;
-      padding: 0 0 0 $details-caret-width;
-      pointer-events: initial;
-      position: relative;
-
-      &::marker,
-      &::-webkit-details-marker {
-        display: none;
-      }
-
-      &:focus {
-        .ons-details__title {
-          @extend %a-focus;
-          // extend details focus background behind caret
-          margin-left: -$details-caret-width;
-          padding-left: $details-caret-width;
+    &--initialised & {
+        &__heading {
+            color: var(--ons-color-text-link);
+            cursor: pointer;
+            display: inline-block;
+            outline: none;
+            padding: 0 0 0 $details-caret-width;
+            pointer-events: initial;
+            position: relative;
+
+            &::marker,
+            &::-webkit-details-marker {
+                display: none;
+            }
+
+            &:focus {
+                .ons-details__title {
+                    @extend %a-focus;
+                    // extend details focus background behind caret
+                    margin-left: -$details-caret-width;
+                    padding-left: $details-caret-width;
+                }
+
+                .ons-details__icon .ons-icon {
+                    fill: var(--ons-color-text-link-focus);
+                }
+            }
+
+            &:hover:not(:focus) {
+                color: var(--ons-color-text-link-hover);
+
+                .ons-details__icon {
+                    fill: var(--ons-color-text-link-hover);
+                }
+
+                .ons-details__title {
+                    text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+                }
+            }
         }
 
-        .ons-details__icon .ons-icon {
-          fill: var(--ons-color-text-link-focus);
+        &__icon {
+            display: inline-block;
+            fill: var(--ons-color-text-link);
+            height: $details-caret-width;
+            left: -0.15rem;
+            position: absolute;
+            top: -0.2rem;
+            width: $details-caret-width;
         }
-      }
-
-      &:hover:not(:focus) {
-        color: var(--ons-color-text-link-hover);
 
-        .ons-details__icon {
-          fill: var(--ons-color-text-link-hover);
+        &__content {
+            display: none;
         }
 
-        .ons-details__title {
-          text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+        &__title {
+            display: inline-block;
+            font-size: 1rem;
+            font-weight: $font-weight-bold;
+            margin-bottom: 0;
+            text-underline-position: under;
+            transform: translateY(-1px);
+            pointer-events: none;
         }
-      }
     }
 
-    &__icon {
-      display: inline-block;
-      fill: var(--ons-color-text-link);
-      height: $details-caret-width;
-      left: -0.15rem;
-      position: absolute;
-      top: -0.2rem;
-      width: $details-caret-width;
-    }
-
-    &__content {
-      display: none;
-    }
+    &--open & {
+        &__icon {
+            left: -0.1rem;
+            top: 0.2rem;
+            transform: rotate(90deg);
+        }
 
-    &__title {
-      display: inline-block;
-      font-size: 1rem;
-      font-weight: $font-weight-bold;
-      margin-bottom: 0;
-      text-underline-position: under;
-      transform: translateY(-1px);
-      pointer-events: none;
+        &__content {
+            border-left: 4px solid var(--ons-color-borders-indent);
+            display: block;
+            margin: 1rem 0 0;
+            padding: 0 0 0 1.3em;
+        }
     }
-  }
 
-  &--open & {
-    &__icon {
-      left: -0.1rem;
-      top: 0.2rem;
-      transform: rotate(90deg);
-    }
+    &--accordion & {
+        &__heading {
+            border-top: 1px solid var(--ons-color-borders);
+            margin: 0;
+            padding-bottom: 0.9rem;
+            padding-top: 1rem;
+            width: 100%;
+
+            &:focus {
+                outline: none;
+            }
+        }
 
-    &__content {
-      border-left: 4px solid var(--ons-color-borders-indent);
-      display: block;
-      margin: 1rem 0 0;
-      padding: 0 0 0 1.3em;
-    }
-  }
-
-  &--accordion & {
-    &__heading {
-      border-top: 1px solid var(--ons-color-borders);
-      margin: 0;
-      padding-bottom: 0.9rem;
-      padding-top: 1rem;
-      width: 100%;
-
-      &:focus {
-        outline: none;
-      }
-    }
+        &__title {
+            margin: 0 1rem 0 0;
+        }
 
-    &__title {
-      margin: 0 1rem 0 0;
-    }
+        &__icon {
+            top: 0.8rem;
+        }
 
-    &__icon {
-      top: 0.8rem;
-    }
+        &__controls {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+        }
 
-    &__controls {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-    }
+        &__btn {
+            align-self: flex-start;
+            width: auto;
+        }
 
-    &__btn {
-      align-self: flex-start;
-      width: auto;
+        &__content {
+            border-left: 0;
+            margin: 0;
+            padding: 0;
+        }
     }
 
-    &__content {
-      border-left: 0;
-      margin: 0;
-      padding: 0;
+    &--accordion.ons-details--open {
+        .ons-details__icon {
+            position: absolute;
+            top: 1.2rem;
+        }
     }
-  }
 
-  &--accordion.ons-details--open {
-    .ons-details__icon {
-      position: absolute;
-      top: 1.2rem;
+    &__icon {
+        display: none;
+        pointer-events: none;
     }
-  }
-
-  &__icon {
-    display: none;
-    pointer-events: none;
-  }
 }