@ons/design-system 70.0.7 → 70.0.9

package/components/language-selector/_macro.njk

@@ -2,10 +2,19 @@
     {% set alternativeLanguages = params.languages | rejectattr("current") %}
     {% set languageNumber = params.languages | length %}
 
-    <ul class="ons-language-links{% if languageNumber and languageNumber != 2 %} ons-u-d-no@xxs@m{% endif %}">
+    <ul class="ons-language-links{{ ' ons-u-d-no@xxs@m' if languageNumber and languageNumber != 2 }}">
         {% for language in alternativeLanguages %}
             <li class="ons-language-links__item">
-                <a href="{{ language.url }}" lang="{{ language.ISOCode }}" {% if language.attributes %}{% for attribute, value in (language.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>{% if language.abbrText %}<span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@xxs@s">{{ language.text }}</span>{% else %}{{ language.text }}{% endif %}</a>
+                <a
+                    href="{{ language.url }}"
+                    lang="{{ language.ISOCode }}"
+                    {% if language.attributes %}{% for attribute, value in (language.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                    >{% if language.abbrText %}
+                        <span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@xxs@s">{{- language.text -}}</span>
+                    {% else %}
+                        {{- language.text -}}
+                    {% endif %}</a
+                >
             </li>
         {% endfor %}
     </ul>

package/components/language-selector/_macro.spec.js

@@ -6,132 +6,132 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_WITH_TWO_LANGUAGES = {
-  languages: [
-    {
-      url: '/english',
-      ISOCode: 'en',
-      text: 'English',
-      abbrText: 'EN',
-      current: true,
-    },
-    {
-      url: '/cymraeg',
-      ISOCode: 'cy',
-      text: 'Cymraeg',
-      abbrText: 'CY',
-      current: false,
-      attributes: {
-        a: 123,
-        b: 456,
-      },
-    },
-  ],
+    languages: [
+        {
+            url: '/english',
+            ISOCode: 'en',
+            text: 'English',
+            abbrText: 'EN',
+            current: true,
+        },
+        {
+            url: '/cymraeg',
+            ISOCode: 'cy',
+            text: 'Cymraeg',
+            abbrText: 'CY',
+            current: false,
+            attributes: {
+                a: 123,
+                b: 456,
+            },
+        },
+    ],
 };
 
 const EXAMPLE_WITH_THREE_LANGUAGES = {
-  languages: [
-    {
-      url: '/english',
-      ISOCode: 'en',
-      text: 'English',
-      current: false,
-    },
-    {
-      url: '/cymraeg',
-      ISOCode: 'cy',
-      text: 'Cymraeg',
-      current: true,
-    },
-    {
-      url: '/polski',
-      ISOCode: 'pl',
-      text: 'Polski',
-      current: false,
-    },
-  ],
+    languages: [
+        {
+            url: '/english',
+            ISOCode: 'en',
+            text: 'English',
+            current: false,
+        },
+        {
+            url: '/cymraeg',
+            ISOCode: 'cy',
+            text: 'Cymraeg',
+            current: true,
+        },
+        {
+            url: '/polski',
+            ISOCode: 'pl',
+            text: 'Polski',
+            current: false,
+        },
+    ],
 };
 
 describe('macro: language-selector', () => {
-  describe('mode: with two languages', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+    describe('mode: with two languages', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-    it('has one language selector displayed', () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+        it('has one language selector displayed', () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      const $items = $('.ons-language-links__item');
-      expect($items.length).toBe(1);
-    });
+            const $items = $('.ons-language-links__item');
+            expect($items.length).toBe(1);
+        });
 
-    it('does not show the current language', () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+        it('does not show the current language', () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      expect($('.ons-language-links__item a span:last-child').text()).toBe('Cymraeg');
-    });
+            expect($('.ons-language-links__item a span:last-child').text()).toBe('Cymraeg');
+        });
 
-    it('has the expected hyperlink URL', async () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+        it('has the expected hyperlink URL', async () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      const $hyperlink = $('.ons-language-links__item a');
-      expect($hyperlink.attr('href')).toBe('/cymraeg');
-    });
+            const $hyperlink = $('.ons-language-links__item a');
+            expect($hyperlink.attr('href')).toBe('/cymraeg');
+        });
 
-    it('has the expected lang attribute value', async () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+        it('has the expected lang attribute value', async () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      expect($('.ons-language-links__item a').attr('lang')).toBe('cy');
-    });
+            expect($('.ons-language-links__item a').attr('lang')).toBe('cy');
+        });
 
-    it('has additionally provided `attributes`', () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+        it('has additionally provided `attributes`', () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      expect($('.ons-language-links__item a').attr('a')).toBe('123');
-      expect($('.ons-language-links__item a').attr('b')).toBe('456');
-    });
+            expect($('.ons-language-links__item a').attr('a')).toBe('123');
+            expect($('.ons-language-links__item a').attr('b')).toBe('456');
+        });
 
-    it('does not have a visibility class applied', () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+        it('does not have a visibility class applied', () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(false);
-    });
+            expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(false);
+        });
 
-    it('has the `abbrText` rendered', () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+        it('has the `abbrText` rendered', () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-      expect($('.ons-language-links__item a span:first-child').text()).toBe('CY');
+            expect($('.ons-language-links__item a span:first-child').text()).toBe('CY');
+        });
     });
-  });
 
-  describe('mode: with three languages', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
+    describe('mode: with three languages', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-    it('has two language selectors displayed', () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
+        it('has two language selectors displayed', () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
 
-      const $items = $('.ons-language-links__item');
-      expect($items.length).toBe(2);
-    });
+            const $items = $('.ons-language-links__item');
+            expect($items.length).toBe(2);
+        });
 
-    it('does not show the current language', () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
+        it('does not show the current language', () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
 
-      expect($('.ons-language-links__item:first-child a').text()).toBe('English');
-      expect($('.ons-language-links__item:last-child a').text()).toBe('Polski');
-    });
+            expect($('.ons-language-links__item:first-child a').text()).toBe('English');
+            expect($('.ons-language-links__item:last-child a').text()).toBe('Polski');
+        });
 
-    it('has the visibility class applied', () => {
-      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
+        it('has the visibility class applied', () => {
+            const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
 
-      expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(true);
+            expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(true);
+        });
     });
-  });
 });

package/components/language-selector/language.scss

@@ -1,10 +1,10 @@
 .ons-language-links {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 
-  &__item {
-    display: inline-block;
-    margin: 0 0 0 0.5rem;
-  }
+    &__item {
+        display: inline-block;
+        margin: 0 0 0 0.5rem;
+    }
 }

package/components/list/_list.scss

@@ -1,111 +1,124 @@
 .ons-list {
-  margin: 0;
-  padding: 0 0 0 1.5rem;
-
-  &__item {
-    &:first-child {
-      margin-top: 0.5rem;
-    }
-    &:last-child {
-      margin-bottom: -0.5;
-    }
-  }
-
-  &--spacious {
-    .ons-list__item {
-      margin: 0 0 1.5rem;
-    }
-  }
-
-  &--bare {
-    list-style: none;
-    padding-left: 0;
-  }
-
-  &--dashed {
-    @extend .ons-list--bare;
-    .ons-list__item {
-      margin-left: 25px;
-      position: relative;
-      &::before {
-        border-top: 1px solid var(--ons-color-black);
-        content: '';
-        left: 0;
-        margin-left: -25px;
-        position: absolute;
-        top: 14px;
-        width: 15px;
-      }
-    }
-  }
-
-  &__link {
-    display: inline-block;
-    margin-right: 1rem;
-    vertical-align: top;
-    white-space: normal;
-  }
-
-  &__prefix {
-    margin-right: 0.5rem;
-  }
-
-  &__suffix {
-    margin-left: 0.5rem;
-  }
-
-  &__prefix,
-  &__suffix {
-    font-family: $font-mono;
-  }
-
-  &--prefix &,
-  &--suffix &,
-  &--icons & {
+    margin: 0;
+    padding: 0 0 0 1.5rem;
+
     &__item {
-      align-items: flex-start;
-      display: flex;
+        &:first-child {
+            margin-top: 0.5rem;
+        }
+        &:last-child {
+            margin-bottom: -0.5;
+        }
     }
-  }
 
-  &--social & {
-    &__item {
-      align-items: center;
+    &--spacious {
+        .ons-list__item {
+            margin: 0 0 1.5rem;
+        }
+    }
+
+    &--bare {
+        list-style: none;
+        padding-left: 0;
+    }
+
+    &--dashed {
+        @extend .ons-list--bare;
+        .ons-list__item {
+            margin-left: 25px;
+            position: relative;
+            &::before {
+                border-top: 1px solid var(--ons-color-black);
+                content: '';
+                left: 0;
+                margin-left: -25px;
+                position: absolute;
+                top: 14px;
+                width: 15px;
+            }
+        }
+    }
+
+    &__link {
+        display: inline-block;
+        margin-right: 1rem;
+        vertical-align: top;
+        white-space: normal;
+    }
+
+    &__prefix {
+        margin-right: 0.5rem;
+    }
+
+    &__suffix {
+        margin-left: 0.5rem;
     }
-  }
 
-  &--icons {
-    margin-bottom: 0;
-    .ons-list__item {
-      margin-top: 0;
-      margin-bottom: 0.5rem;
+    &__prefix,
+    &__suffix {
+        font-family: $font-mono;
     }
-  }
 
-  &--languages {
-    margin-bottom: 0;
-    .ons-list__link {
-      margin-right: 0;
+    &--prefix &,
+    &--suffix &,
+    &--icons & {
+        &__item {
+            align-items: flex-start;
+            display: flex;
+        }
     }
-  }
 
-  &--p {
-    padding: 0;
-  }
+    &--social & {
+        &__item {
+            align-items: center;
+        }
+    }
+
+    &--icons {
+        margin-bottom: 0;
+        .ons-list__item {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+        }
+    }
+
+    &--languages {
+        margin-bottom: 0;
+        .ons-list__link {
+            margin-right: 0;
+        }
+    }
+
+    &--p {
+        padding: 0;
+    }
+
+    &--summary {
+        list-style: none;
+        @extend .ons-u-pl-no;
+        .ons-list__item:not(:last-child) {
+            @extend .ons-u-bb;
+        }
+        .ons-list__item {
+            @extend .ons-u-pt-s;
+            @extend .ons-u-pb-s;
+            @extend .ons-u-m-no;
+        }
+    }
 }
 
 @include bp-suffix('ons-list--inline') {
-  &:not(.ons-list--icons) {
-    margin: 0 1rem 0 0;
-    .ons-list__item {
-      display: inline-block;
-      margin: 0 1rem 0 0;
-    }
-  }
-
-  &.ons-list--icons {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-  }
+    &:not(.ons-list--icons) {
+        margin: 0 1rem 0 0;
+        .ons-list__item {
+            display: inline-block;
+            margin: 0 1rem 0 0;
+        }
+    }
+
+    &.ons-list--icons {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+    }
 }