@ons/design-system 70.0.6 → 70.0.8

package/components/tabs/_macro.spec.js

@@ -6,122 +6,122 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TABS = {
-  title: 'Example tabs',
-  tabs: [
-    {
-      id: 'first-tab',
-      title: 'Tab 1',
-      content: 'Example content...',
-      hiddenSpan: 'for Example',
-    },
-    {
-      id: 'second-tab',
-      title: 'Tab 2',
-      content: 'Some nested <strong>strong element</strong>...',
-    },
-  ],
+    title: 'Example tabs',
+    tabs: [
+        {
+            id: 'first-tab',
+            title: 'Tab 1',
+            content: 'Example content...',
+            hiddenSpan: 'for Example',
+        },
+        {
+            id: 'second-tab',
+            title: 'Tab 2',
+            content: 'Some nested <strong>strong element</strong>...',
+        },
+    ],
 };
 
 const EXAMPLE_TABS_WITH_SHOWTITLE = {
-  title: 'Example tabs',
-  tabs: [
-    {
-      id: 'first-tab',
-      title: 'Tab 1',
-      showTitle: true,
-      content: 'Example content...',
-    },
-    {
-      id: 'second-tab',
-      title: 'Tab 2',
-      content: 'Some nested <strong>strong element</strong>...',
-    },
-  ],
+    title: 'Example tabs',
+    tabs: [
+        {
+            id: 'first-tab',
+            title: 'Tab 1',
+            showTitle: true,
+            content: 'Example content...',
+        },
+        {
+            id: 'second-tab',
+            title: 'Tab 2',
+            content: 'Some nested <strong>strong element</strong>...',
+        },
+    ],
 };
 
 const EXAMPLE_TABS_WITHOUT_TAB_IDS = {
-  title: 'Example tabs',
-  tabs: [
-    {
-      title: 'Tab 1',
-      content: 'Example content...',
-    },
-    {
-      title: 'Tab 2',
-      content: 'Some nested <strong>strong element</strong>...',
-    },
-  ],
+    title: 'Example tabs',
+    tabs: [
+        {
+            title: 'Tab 1',
+            content: 'Example content...',
+        },
+        {
+            title: 'Tab 2',
+            content: 'Some nested <strong>strong element</strong>...',
+        },
+    ],
 };
 
 describe('macro: tabs', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided variant classes', () => {
-    const $ = cheerio.load(
-      renderComponent('tabs', {
-        ...EXAMPLE_TABS,
-        variants: ['details', 'example-variant'],
-      }),
-    );
+    it('has the provided variant classes', () => {
+        const $ = cheerio.load(
+            renderComponent('tabs', {
+                ...EXAMPLE_TABS,
+                variants: ['details', 'example-variant'],
+            }),
+        );
 
-    expect($('.ons-tabs').hasClass('ons-tabs--details')).toBe(true);
-    expect($('.ons-tabs').hasClass('ons-tabs--example-variant')).toBe(true);
-  });
+        expect($('.ons-tabs').hasClass('ons-tabs--details')).toBe(true);
+        expect($('.ons-tabs').hasClass('ons-tabs--example-variant')).toBe(true);
+    });
 
-  it('has the provided `title`', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+    it('has the provided `title`', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect($('.ons-tabs__title').text().trim()).toBe('Example tabs');
-  });
+        expect($('.ons-tabs__title').text().trim()).toBe('Example tabs');
+    });
 
-  it('has title with provided tag override', () => {
-    const $ = cheerio.load(
-      renderComponent('tabs', {
-        ...EXAMPLE_TABS,
-        titleTag: 'h4',
-      }),
-    );
+    it('has title with provided tag override', () => {
+        const $ = cheerio.load(
+            renderComponent('tabs', {
+                ...EXAMPLE_TABS,
+                titleTag: 'h4',
+            }),
+        );
 
-    const titleTag = $('.ons-tabs__title')[0].tagName;
-    expect(titleTag).toBe('h4');
-  });
+        const titleTag = $('.ons-tabs__title')[0].tagName;
+        expect(titleTag).toBe('h4');
+    });
 
-  it('has the provided tab id attributes', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+    it('has the provided tab id attributes', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect($('.ons-tabs__panel:first').attr('id')).toBe('first-tab');
-    expect($('.ons-tabs__panel:last').attr('id')).toBe('second-tab');
-  });
+        expect($('.ons-tabs__panel:first').attr('id')).toBe('first-tab');
+        expect($('.ons-tabs__panel:last').attr('id')).toBe('second-tab');
+    });
 
-  it('has default tab id attribute values when identifiers are not provided', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITHOUT_TAB_IDS));
+    it('has default tab id attribute values when identifiers are not provided', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITHOUT_TAB_IDS));
 
-    expect($('.ons-tabs__panel:first').attr('id')).toBe('tab-1');
-    expect($('.ons-tabs__panel:last').attr('id')).toBe('tab-2');
-  });
+        expect($('.ons-tabs__panel:first').attr('id')).toBe('tab-1');
+        expect($('.ons-tabs__panel:last').attr('id')).toBe('tab-2');
+    });
 
-  it('has expected label text in tab links and visually hidden span in tab 1', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+    it('has expected label text in tab links and visually hidden span in tab 1', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-vh">for Example</span>');
-    expect($('.ons-tab:last').text().trim()).toBe('Tab 2');
-  });
+        expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-vh">for Example</span>');
+        expect($('.ons-tab:last').text().trim()).toBe('Tab 2');
+    });
 
-  it('has expected content in tab panels', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
+    it('has expected content in tab panels', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect($('.ons-tabs__panel:first').html().trim()).toBe('Example content...');
-    expect($('.ons-tabs__panel:last').html().trim()).toBe('Some nested <strong>strong element</strong>...');
-  });
+        expect($('.ons-tabs__panel:first').html().trim()).toBe('Example content...');
+        expect($('.ons-tabs__panel:last').html().trim()).toBe('Some nested <strong>strong element</strong>...');
+    });
 
-  it('displays a h2 when showTitle set to true', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITH_SHOWTITLE));
+    it('displays a h2 when showTitle set to true', () => {
+        const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITH_SHOWTITLE));
 
-    expect($('.ons-tabs__panel:first').find('h2').length).toBe(1);
-  });
+        expect($('.ons-tabs__panel:first').find('h2').length).toBe(1);
+    });
 });

package/components/tabs/_tabs.scss

@@ -1,144 +1,149 @@
 .ons-tabs {
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
 
-  &__title {
-    @extend .ons-u-fs-r--b;
-  }
+    &__title {
+        @extend .ons-u-fs-r--b;
+    }
 
-  // Anchor links list
-  &__list {
-    border-bottom: 0;
-    margin: 0 0 1rem;
-    overflow: visible;
-    padding: 0;
-    width: max-content;
-    // Tabs
-    &--row {
-      margin: 0;
-      position: relative;
+    // Anchor links list
+    &__list {
+        border-bottom: 0;
+        margin: 0 0 1rem;
+        overflow: visible;
+        padding: 0;
+        width: max-content;
+        // Tabs
+        &--row {
+            margin: 0;
+            position: relative;
+        }
+    }
+    &__container {
+        border-bottom: 1px solid var(--ons-color-borders);
+        margin: 0;
+        padding: 0;
+        z-index: -2;
     }
-  }
-  &__container {
-    border-bottom: 1px solid var(--ons-color-borders);
-    margin: 0;
-    padding: 0;
-    z-index: -2;
-  }
 }
 
 .ons-tab__list-item {
-  box-sizing: border-box;
-  display: list-item;
-  list-style: none;
-  margin: 0 0 0.3rem;
-
-  &--row {
-    display: inline;
-  }
+    box-sizing: border-box;
+    display: list-item;
+    list-style: none;
+    margin: 0 0 0.3rem;
+
+    &--row {
+        display: inline;
+    }
 }
 
 .ons-tab--row {
-  background: var(--ons-color-button-secondary);
-  border: 1px solid var(--ons-color-button-secondary);
-  border-radius: 3px 3px 0 0;
-  color: var(--ons-color-text);
-  display: inline-block;
-  height: 2.55rem;
-  line-height: 2.3rem;
-  margin: 0 0.4rem 0 0;
-  overflow: visible;
-  padding: 0 1rem;
-  position: relative;
-  text-decoration: underline;
-
-  &:hover:not(:focus) {
-    background-color: var(--ons-color-button-secondary-hover);
-    border-color: var(--ons-color-button-secondary-hover);
-    color: var(--ons-color-text);
-    text-decoration: underline solid var(--ons-color-text) 2px;
-  }
-
-  &:focus {
-    background-color: var(--ons-color-focus);
-    border-bottom: 1px solid var(--ons-color-borders);
-    box-shadow: inset 0 0 0 9px var(--ons-color-button-secondary),
-      inset 17px 0 0 0 var(--ons-color-button-secondary),
-      inset -17px 0 0 0 var(--ons-color-button-secondary),
-      inset 0 -13px 0 0 var(--ons-color-text-link-focus);
-    color: var(--ons-color-text-link-focus);
-
-    // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
-    outline: 3px solid transparent;
-    outline-offset: 1px;
-    text-decoration: underline solid var(--ons-color-text) 2px;
-  }
-
-  // Tab when selected
-  &[aria-selected='true'] {
-    background-color: var(--ons-color-page-light);
-    border-bottom: 2px white;
-    border-color: var(--ons-color-borders);
+    background: var(--ons-color-button-secondary);
+    border: 1px solid var(--ons-color-button-secondary);
     border-radius: 3px 3px 0 0;
+    color: var(--ons-color-text);
+    display: inline-block;
+    height: 2.55rem;
+    line-height: 2.3rem;
+    margin: 0 0.4rem 0 0;
+    overflow: visible;
+    padding: 0 1rem;
     position: relative;
-    text-decoration: none;
-    top: 1px;
-    z-index: 1;
+    text-decoration: underline;
+
+    &:hover:not(:focus) {
+        background-color: var(--ons-color-button-secondary-hover);
+        border-color: var(--ons-color-button-secondary-hover);
+        color: var(--ons-color-text);
+        text-decoration: underline solid var(--ons-color-text) 2px;
+    }
 
     &:focus {
-      background-color: var(--ons-color-focus);
-      box-shadow: inset 0 0 0 9px var(--ons-color-page-light),
-        inset 17px 0 0 0 var(--ons-color-page-light),
-        inset -17px 0 0 0 var(--ons-color-page-light),
-        inset 0 -13px 0 0 var(--ons-color-text-link-focus);
-      text-decoration: none;
+        background-color: var(--ons-color-focus);
+        border-bottom: 1px solid var(--ons-color-borders);
+        box-shadow:
+            inset 0 0 0 9px var(--ons-color-button-secondary),
+            inset 17px 0 0 0 var(--ons-color-button-secondary),
+            inset -17px 0 0 0 var(--ons-color-button-secondary),
+            inset 0 -13px 0 0 var(--ons-color-text-link-focus);
+        color: var(--ons-color-text-link-focus);
+
+        // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+        outline: 3px solid transparent;
+        outline-offset: 1px;
+        text-decoration: underline solid var(--ons-color-text) 2px;
+    }
+
+    // Tab when selected
+    &[aria-selected='true'] {
+        background-color: var(--ons-color-page-light);
+        border-bottom: 2px var(--ons-color-white);
+        border-color: var(--ons-color-borders);
+        border-radius: 3px 3px 0 0;
+        position: relative;
+        text-decoration: none;
+        top: 1px;
+        z-index: 1;
+
+        &:focus {
+            background-color: var(--ons-color-focus);
+            box-shadow:
+                inset 0 0 0 9px var(--ons-color-page-light),
+                inset 17px 0 0 0 var(--ons-color-page-light),
+                inset -17px 0 0 0 var(--ons-color-page-light),
+                inset 0 -13px 0 0 var(--ons-color-text-link-focus);
+            text-decoration: none;
+        }
     }
-  }
 }
 
 // Tabs - Panels
 .ons-tabs__panel {
-  padding-bottom: 1rem;
-  padding-top: 1rem;
-  position: relative;
-
-  &--hidden {
-    display: none;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 0 var(--ons-color-page-light), 0 0 0 2px var(--ons-color-text-link-focus), 0 0 0 6px var(--ons-color-focus);
-    outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
-    z-index: 1;
-  }
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+    position: relative;
+
+    &--hidden {
+        display: none;
+    }
+
+    &:focus {
+        box-shadow:
+            0 0 0 0 var(--ons-color-page-light),
+            0 0 0 2px var(--ons-color-text-link-focus),
+            0 0 0 6px var(--ons-color-focus);
+        outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+        z-index: 1;
+    }
 }
 
 .ons-tabs--details {
-  border-top: 1px solid var(--ons-color-borders);
-  margin: 0;
+    border-top: 1px solid var(--ons-color-borders);
+    margin: 0;
 
-  .ons-tab {
-    border-radius: 0;
-    border-top: none;
-  }
+    .ons-tab {
+        border-radius: 0;
+        border-top: 0;
+    }
 
-  .ons-tab__list-item:first-child .ons-tab {
-    border-left: none;
-  }
+    .ons-tab__list-item:first-child .ons-tab {
+        border-left: 0;
+    }
 
-  .ons-tabs__title {
-    padding: 1rem 1rem 0;
-  }
+    .ons-tabs__title {
+        padding: 1rem 1rem 0;
+    }
 
-  .ons-tabs__list {
-    padding: 0 1rem;
-  }
+    .ons-tabs__list {
+        padding: 0 1rem;
+    }
 
-  .ons-tabs__list--row {
-    padding: 0;
-  }
+    .ons-tabs__list--row {
+        padding: 0;
+    }
 
-  .ons-tabs__panel {
-    margin-top: 1px;
-    padding: 1rem;
-  }
+    .ons-tabs__panel {
+        margin-top: 1px;
+        padding: 1rem;
+    }
 }

package/components/tabs/tabs.dom.js

@@ -1,13 +1,13 @@
 import domready from '../../js/domready';
 
 async function tabs() {
-  const tabs = [...document.querySelectorAll('.ons-tabs')];
+    const tabs = [...document.querySelectorAll('.ons-tabs')];
 
-  if (tabs.length) {
-    const Tabs = (await import('./tabs')).default;
+    if (tabs.length) {
+        const Tabs = (await import('./tabs')).default;
 
-    tabs.forEach((component) => new Tabs(component));
-  }
+        tabs.forEach((component) => new Tabs(component));
+    }
 }
 
 domready(tabs);