@ons/design-system 70.0.7 → 70.0.8

package/components/section-navigation/_macro.spec.js

@@ -7,251 +7,251 @@ import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_SECTION_NAVIGATION = {
-  id: 'section-menu',
-  currentPath: '/results',
-  itemsList: [
-    {
-      title: 'Results',
-      url: '/results',
-    },
-    {
-      title: 'Dashboard',
-      url: '/results/dashboard',
-    },
-  ],
+    id: 'section-menu',
+    currentPath: '/results',
+    itemsList: [
+        {
+            title: 'Results',
+            url: '/results',
+        },
+        {
+            title: 'Dashboard',
+            url: '/results/dashboard',
+        },
+    ],
 };
 
 const EXAMPLE_SECTION_NAVIGATION_VERTICAL = {
-  variants: 'vertical',
-  currentPath: '#section-2',
-  itemsList: [
-    {
-      title: 'Section 1',
-      url: '#section-1',
-    },
-    {
-      title: 'Section 2',
-      url: '#section-2',
-      anchors: [
+    variants: 'vertical',
+    currentPath: '#section-2',
+    itemsList: [
         {
-          title: 'Sub section 1',
-          url: '#sub-section-1',
+            title: 'Section 1',
+            url: '#section-1',
         },
         {
-          title: 'Sub section 2',
-          url: '#sub-section-2',
+            title: 'Section 2',
+            url: '#section-2',
+            anchors: [
+                {
+                    title: 'Sub section 1',
+                    url: '#sub-section-1',
+                },
+                {
+                    title: 'Sub section 2',
+                    url: '#sub-section-2',
+                },
+                {
+                    title: 'Sub section 3',
+                    url: '#sub-section-3',
+                },
+            ],
         },
         {
-          title: 'Sub section 3',
-          url: '#sub-section-3',
+            title: 'Section 3',
+            url: '#0',
         },
-      ],
-    },
-    {
-      title: 'Section 3',
-      url: '#0',
-    },
-  ],
+    ],
 };
 
 const EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS = {
-  variants: 'vertical',
-  currentPath: '#section-2',
-  sections: [
-    {
-      title: 'Section Title',
-      itemsList: [
+    variants: 'vertical',
+    currentPath: '#section-2',
+    sections: [
         {
-          title: 'Section 1',
-          url: '#section-1',
+            title: 'Section Title',
+            itemsList: [
+                {
+                    title: 'Section 1',
+                    url: '#section-1',
+                },
+                {
+                    title: 'Section 2',
+                    url: '#section-2',
+                    anchors: [
+                        {
+                            title: 'Sub section 1',
+                            url: '#sub-section-1',
+                        },
+                        {
+                            title: 'Sub section 2',
+                            url: '#sub-section-2',
+                        },
+                        {
+                            title: 'Sub section 3',
+                            url: '#sub-section-3',
+                        },
+                    ],
+                },
+                {
+                    title: 'Section 3',
+                    url: '#0',
+                },
+            ],
         },
-        {
-          title: 'Section 2',
-          url: '#section-2',
-          anchors: [
-            {
-              title: 'Sub section 1',
-              url: '#sub-section-1',
-            },
-            {
-              title: 'Sub section 2',
-              url: '#sub-section-2',
-            },
-            {
-              title: 'Sub section 3',
-              url: '#sub-section-3',
-            },
-          ],
-        },
-        {
-          title: 'Section 3',
-          url: '#0',
-        },
-      ],
-    },
-  ],
+    ],
 };
 
 describe('macro: section-navigation', () => {
-  describe('variant: horizontal', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
-
-    it('does not have the `vertical` modifier class', async () => {
-      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
-
-      expect($('.ons-section-nav').hasClass('ons-section-nav--vertical')).toBe(false);
-    });
-  });
-
-  describe('variant: vertical', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
-
-    it('has the `vertical` modifier class', async () => {
-      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
-
-      expect($('.ons-section-nav').hasClass('ons-section-nav--vertical')).toBe(true);
-    });
-  });
-
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
-
-    expect($('.ons-section-nav').attr('id')).toBe('section-menu');
-  });
-
-  it('has the provided custom `classes`', () => {
-    const $ = cheerio.load(renderComponent('section-navigation', { ...EXAMPLE_SECTION_NAVIGATION, classes: 'custom-class' }));
-
-    expect($('.ons-section-nav').hasClass('custom-class')).toBe(true);
-  });
+    describe('variant: horizontal', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-  it('assumes a default `hiddenTitleId` of "Section menu"', () => {
-    const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-    expect($('.ons-section-nav').attr('aria-labelledby')).toBe('section-menu-nav-title');
-  });
-
-  describe('navigation items', () => {
-    it('renders top level navigation items', () => {
-      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
-
-      const itemLabels = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.text().trim());
-      expect(itemLabels).toEqual(['Results', 'Dashboard']);
-
-      const itemLinks = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.attr('href'));
-      expect(itemLinks).toEqual(['/results', '/results/dashboard']);
-    });
+        it('does not have the `vertical` modifier class', async () => {
+            const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-    it('has additionally provided style classes', () => {
-      const $ = cheerio.load(
-        renderComponent('section-navigation', {
-          currentPath: '#section-1',
-          itemsList: [
-            {
-              classes: 'extra-class another-extra-class',
-              title: 'Section 1',
-              url: '#section-1',
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-section-nav__item').hasClass('extra-class')).toBe(true);
-      expect($('.ons-section-nav__item').hasClass('another-extra-class')).toBe(true);
+            expect($('.ons-section-nav').hasClass('ons-section-nav--vertical')).toBe(false);
+        });
     });
 
-    it('marks the current item with a class when `currentPath` is provided', () => {
-      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+    describe('variant: vertical', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
 
-      expect($('.ons-section-nav__item--active').text().trim()).toBe('Results');
-    });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-    it('marks the current item with a class when `tabQuery` is provided', () => {
-      const $ = cheerio.load(
-        renderComponent('section-navigation', {
-          ...EXAMPLE_SECTION_NAVIGATION,
-          currentPath: undefined,
-          tabQuery: 'dashboard',
-        }),
-      );
+        it('has the `vertical` modifier class', async () => {
+            const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
 
-      expect($('.ons-section-nav__item--active').text().trim()).toBe('Dashboard');
+            expect($('.ons-section-nav').hasClass('ons-section-nav--vertical')).toBe(true);
+        });
     });
 
-    it('marks the current item with `aria-current` when `currentPath` is provided', () => {
-      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-      expect($('.ons-section-nav__item--active .ons-section-nav__link').attr('aria-current')).toBe('location');
+        expect($('.ons-section-nav').attr('id')).toBe('section-menu');
     });
 
-    it('marks the current item with `aria-current` when `tabQuery` is provided', () => {
-      const $ = cheerio.load(
-        renderComponent('section-navigation', {
-          ...EXAMPLE_SECTION_NAVIGATION,
-          currentPath: undefined,
-          tabQuery: 'dashboard',
-        }),
-      );
+    it('has the provided custom `classes`', () => {
+        const $ = cheerio.load(renderComponent('section-navigation', { ...EXAMPLE_SECTION_NAVIGATION, classes: 'custom-class' }));
 
-      expect($('.ons-section-nav__item--active .ons-section-nav__link').attr('aria-current')).toBe('location');
+        expect($('.ons-section-nav').hasClass('custom-class')).toBe(true);
     });
 
-    describe('nested anchor navigation items', () => {
-      it('renders anchor navigation list for top-level items that define `anchors`', () => {
-        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
-
-        expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(1) .ons-section-nav__sub-items').length).toBe(0);
-        expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(2) .ons-section-nav__sub-items').length).toBe(1);
-        expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(3) .ons-section-nav__sub-items').length).toBe(0);
-      });
-
-      it('renders the expected anchor navigation items', () => {
-        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
+    it('assumes a default `hiddenTitleId` of "Section menu"', () => {
+        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-        const itemLabels = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
-          node.text().trim(),
-        );
-        expect(itemLabels).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
-
-        const itemLinks = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
-          node.attr('href'),
-        );
-        expect(itemLinks).toEqual(['#sub-section-1', '#sub-section-2', '#sub-section-3']);
-      });
+        expect($('.ons-section-nav').attr('aria-labelledby')).toBe('section-menu-nav-title');
     });
 
-    describe('Section Items', () => {
-      it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-      });
-
-      it('renders itemsLists, anchors and heading for each section', () => {
-        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS));
-
-        const anchors = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
-          node.text().trim(),
-        );
-        expect(anchors).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
-
-        const itemLists = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.text().trim());
-        expect(itemLists).toEqual(['Section 1', 'Section 2', 'Sub section 1', 'Sub section 2', 'Sub section 3', 'Section 3']);
-
-        const headings = mapAll($('h3'), (node) => $(node).text().trim());
-        expect(headings).toEqual(['Section Title']);
-      });
+    describe('navigation items', () => {
+        it('renders top level navigation items', () => {
+            const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+            const itemLabels = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.text().trim());
+            expect(itemLabels).toEqual(['Results', 'Dashboard']);
+
+            const itemLinks = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.attr('href'));
+            expect(itemLinks).toEqual(['/results', '/results/dashboard']);
+        });
+
+        it('has additionally provided style classes', () => {
+            const $ = cheerio.load(
+                renderComponent('section-navigation', {
+                    currentPath: '#section-1',
+                    itemsList: [
+                        {
+                            classes: 'extra-class another-extra-class',
+                            title: 'Section 1',
+                            url: '#section-1',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-section-nav__item').hasClass('extra-class')).toBe(true);
+            expect($('.ons-section-nav__item').hasClass('another-extra-class')).toBe(true);
+        });
+
+        it('marks the current item with a class when `currentPath` is provided', () => {
+            const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+            expect($('.ons-section-nav__item--active').text().trim()).toBe('Results');
+        });
+
+        it('marks the current item with a class when `tabQuery` is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('section-navigation', {
+                    ...EXAMPLE_SECTION_NAVIGATION,
+                    currentPath: undefined,
+                    tabQuery: 'dashboard',
+                }),
+            );
+
+            expect($('.ons-section-nav__item--active').text().trim()).toBe('Dashboard');
+        });
+
+        it('marks the current item with `aria-current` when `currentPath` is provided', () => {
+            const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+            expect($('.ons-section-nav__item--active .ons-section-nav__link').attr('aria-current')).toBe('location');
+        });
+
+        it('marks the current item with `aria-current` when `tabQuery` is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('section-navigation', {
+                    ...EXAMPLE_SECTION_NAVIGATION,
+                    currentPath: undefined,
+                    tabQuery: 'dashboard',
+                }),
+            );
+
+            expect($('.ons-section-nav__item--active .ons-section-nav__link').attr('aria-current')).toBe('location');
+        });
+
+        describe('nested anchor navigation items', () => {
+            it('renders anchor navigation list for top-level items that define `anchors`', () => {
+                const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
+
+                expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(1) .ons-section-nav__sub-items').length).toBe(0);
+                expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(2) .ons-section-nav__sub-items').length).toBe(1);
+                expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(3) .ons-section-nav__sub-items').length).toBe(0);
+            });
+
+            it('renders the expected anchor navigation items', () => {
+                const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
+
+                const itemLabels = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
+                    node.text().trim(),
+                );
+                expect(itemLabels).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
+
+                const itemLinks = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
+                    node.attr('href'),
+                );
+                expect(itemLinks).toEqual(['#sub-section-1', '#sub-section-2', '#sub-section-3']);
+            });
+        });
+
+        describe('Section Items', () => {
+            it('passes jest-axe checks', async () => {
+                const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS));
+
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            it('renders itemsLists, anchors and heading for each section', () => {
+                const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS));
+
+                const anchors = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
+                    node.text().trim(),
+                );
+                expect(anchors).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
+
+                const itemLists = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.text().trim());
+                expect(itemLists).toEqual(['Section 1', 'Section 2', 'Sub section 1', 'Sub section 2', 'Sub section 3', 'Section 3']);
+
+                const headings = mapAll($('h3'), (node) => $(node).text().trim());
+                expect(headings).toEqual(['Section Title']);
+            });
+        });
     });
-  });
 });

package/components/section-navigation/_section-navigation.scss

@@ -1,92 +1,92 @@
 .ons-section-nav {
-  &:not(&--vertical) {
-    border-bottom: 1px solid var(--ons-color-borders);
-  }
-
-  &__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__sub {
-    padding-bottom: 0.5rem;
-    padding-top: 0.5rem;
-  }
+    &:not(&--vertical) {
+        border-bottom: 1px solid var(--ons-color-borders);
+    }
 
-  &__link {
-    text-decoration: none;
-    &:hover {
-      color: var(--ons-color-text-link-hover);
-      text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+    &__list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
     }
-  }
 
-  &__item {
-    font-size: 1rem;
-    padding: 0;
-    &--active {
-      border-left: 4px solid var(--ons-color-text-link-active);
-      font-weight: $font-weight-bold;
-      margin-left: -18px;
-      padding-left: 14px;
-      a,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: var(--ons-color-text-link-active);
-      }
+    &__sub {
+        padding-bottom: 0.5rem;
+        padding-top: 0.5rem;
     }
-    & & {
-      margin-bottom: 0.3rem;
+
+    &__link {
+        text-decoration: none;
+        &:hover {
+            color: var(--ons-color-text-link-hover);
+            text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+        }
     }
-  }
 
-  &__item-header {
-    @extend .ons-u-mb-no;
+    &__item {
+        font-size: 1rem;
+        padding: 0;
+        &--active {
+            border-left: 4px solid var(--ons-color-text-link-active);
+            font-weight: $font-weight-bold;
+            margin-left: -18px;
+            padding-left: 14px;
+            a,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+                color: var(--ons-color-text-link-active);
+            }
+        }
+        & & {
+            margin-bottom: 0.3rem;
+        }
+    }
 
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1.6;
-  }
+    &__item-header {
+        @extend .ons-u-mb-no;
 
-  &__sub-items {
-    a {
-      color: var(--ons-color-text-link);
-      font-weight: $font-weight-regular;
+        font-size: 1rem;
+        font-weight: 700;
+        line-height: 1.6;
     }
-  }
 
-  &:not(&--vertical) & {
-    &__item {
-      border: none;
-      border-bottom: 4px solid transparent;
-      display: inline-block;
-      margin: 0 1rem 0 0;
-      text-align: center;
-      &--active,
-      &:hover {
-        border-color: var(--ons-color-text-link-active);
-        margin: 0 1rem 0 0;
-        padding: 0;
-        a,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          color: var(--ons-color-text-link-active);
+    &__sub-items {
+        a {
+            color: var(--ons-color-text-link);
+            font-weight: $font-weight-regular;
         }
-      }
     }
 
-    &__link {
-      text-decoration: none;
-      &:hover {
-        text-decoration: none;
-      }
+    &:not(&--vertical) & {
+        &__item {
+            border: 0;
+            border-bottom: 4px solid transparent;
+            display: inline-block;
+            margin: 0 1rem 0 0;
+            text-align: center;
+            &--active,
+            &:hover {
+                border-color: var(--ons-color-text-link-active);
+                margin: 0 1rem 0 0;
+                padding: 0;
+                a,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    color: var(--ons-color-text-link-active);
+                }
+            }
+        }
+
+        &__link {
+            text-decoration: none;
+            &:hover {
+                text-decoration: none;
+            }
+        }
     }
-  }
 }