@ons/design-system 70.0.7 → 70.0.9

package/components/feedback/_feedback.scss

@@ -1,33 +1,33 @@
 .ons-feedback {
-  border: 3px solid var(--ons-color-branded);
-  margin-bottom: 2rem;
-  padding: 1rem;
-  position: relative;
-  &__link {
-    font-weight: $font-weight-bold;
-  }
-  &::before {
-    border-bottom: 15px solid transparent;
-    border-left: 15px solid var(--ons-color-branded);
-    border-right: 15px solid transparent;
-    border-top: 15px solid var(--ons-color-branded);
-    bottom: -30px;
-    content: '';
-    height: 0;
-    left: 17px;
-    position: absolute;
-    width: 0;
-  }
-  &::after {
-    border-bottom: 12px solid transparent;
-    border-left: 12px solid #fff;
-    border-right: 12px solid transparent;
-    border-top: 12px solid #fff;
-    bottom: -23px;
-    content: '';
-    height: 0;
-    left: 20px;
-    position: absolute;
-    width: 0;
-  }
+    border: 3px solid var(--ons-color-branded);
+    margin-bottom: 2rem;
+    padding: 1rem;
+    position: relative;
+    &__link {
+        font-weight: $font-weight-bold;
+    }
+    &::before {
+        border-bottom: 15px solid transparent;
+        border-left: 15px solid var(--ons-color-branded);
+        border-right: 15px solid transparent;
+        border-top: 15px solid var(--ons-color-branded);
+        bottom: -30px;
+        content: '';
+        height: 0;
+        left: 17px;
+        position: absolute;
+        width: 0;
+    }
+    &::after {
+        border-bottom: 12px solid transparent;
+        border-left: 12px solid #fff;
+        border-right: 12px solid transparent;
+        border-top: 12px solid #fff;
+        bottom: -23px;
+        content: '';
+        height: 0;
+        left: 20px;
+        position: absolute;
+        width: 0;
+    }
 }

package/components/feedback/_macro.njk

@@ -1,9 +1,11 @@
 {% macro onsFeedback(params) %}
-    {% set headingLevel = params.headingLevel | default(2) %}
-    <div {% if params.id %} id="{{ params.id }}"{% endif %} class="ons-feedback{% if params.classes %} {{ params.classes }}{% endif %}">
-        <h{{ headingLevel }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses }}">
-            {{ params.heading }}
-        </h{{ headingLevel }}>
+    {% set headingLevel = params.headingLevel | default(2) | string %}
+    {% set openingHeadingTag = "<h" + headingLevel %}
+    {% set closingHeadingTag = "</h" + headingLevel + ">" %}
+    <div {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-feedback{{ ' ' + params.classes if params.classes else '' }}">
+        {{ openingHeadingTag | safe }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses else '' }}">
+        {{ params.heading }}
+        {{ closingHeadingTag | safe }}
         <p class="ons-feedback__content">{{- params.content | safe -}}</p>
         <a href="{{ params.url }}" class="ons-feedback__link">{{- params.linkText -}}</a>
     </div>

package/components/feedback/_macro.spec.js

@@ -6,101 +6,101 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_FEEDBACK_MINIMAL = {
-  heading: 'Feedback heading',
-  content: 'Feedback content...',
-  url: 'http://example.com',
-  linkText: 'Feedback link text',
+    heading: 'Feedback heading',
+    content: 'Feedback content...',
+    url: 'http://example.com',
+    linkText: 'Feedback link text',
 };
 
 const EXAMPLE_FEEDBACK_FULL = {
-  id: 'example-feedback',
-  classes: 'extra-class',
-  heading: 'Feedback heading',
-  headingLevel: 5,
-  headingClasses: 'extra-heading-class another-extra-heading-class',
-  content: 'Feedback content...',
-  url: 'http://example.com',
-  linkText: 'Feedback link text',
+    id: 'example-feedback',
+    classes: 'extra-class',
+    heading: 'Feedback heading',
+    headingLevel: 5,
+    headingClasses: 'extra-heading-class another-extra-heading-class',
+    content: 'Feedback content...',
+    url: 'http://example.com',
+    linkText: 'Feedback link text',
 };
 
 describe('macro: feedback', () => {
-  it('passes jest-axe checks with minimum parameters', async () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('passes jest-axe checks with minimum parameters', async () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('passes jest-axe checks with full parameters', async () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
+    it('passes jest-axe checks with full parameters', async () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('feedback', {
-        id: 'example-id',
-      }),
-    );
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('feedback', {
+                id: 'example-id',
+            }),
+        );
 
-    expect($('#example-id').length).toBe(1);
-  });
+        expect($('#example-id').length).toBe(1);
+    });
 
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('feedback', {
-        classes: 'extra-class another-extra-class',
-      }),
-    );
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('feedback', {
+                classes: 'extra-class another-extra-class',
+            }),
+        );
 
-    expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
-    expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
-  });
+        expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
+        expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
+    });
 
-  it.each([
-    [1, 'h1'],
-    [4, 'h4'],
-  ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-    const $ = cheerio.load(
-      renderComponent('feedback', {
-        ...EXAMPLE_FEEDBACK_MINIMAL,
-        headingLevel,
-      }),
-    );
+    it.each([
+        [1, 'h1'],
+        [4, 'h4'],
+    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
+        const $ = cheerio.load(
+            renderComponent('feedback', {
+                ...EXAMPLE_FEEDBACK_MINIMAL,
+                headingLevel,
+            }),
+        );
 
-    expect($(`${expectedTitleTag}.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
-  });
+        expect($(`${expectedTitleTag}.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+    });
 
-  it('has a default `headingLevel` of 2', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('has a default `headingLevel` of 2', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
-  });
+        expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+    });
 
-  it('has additional heading style classes', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
+    it('has additional heading style classes', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
 
-    expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
-    expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
-  });
+        expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
+        expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
+    });
 
-  it('has a paragraph with the provided `content`', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('has a paragraph with the provided `content`', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect($('p').text().trim()).toBe('Feedback content...');
-  });
+        expect($('p').text().trim()).toBe('Feedback content...');
+    });
 
-  it('has a link with the provided `url`', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('has a link with the provided `url`', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
-  });
+        expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
+    });
 
-  it('has a link with the provided `linkText`', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('has a link with the provided `linkText`', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
-  });
+        expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
+    });
 });

package/components/field/_field-group.scss

@@ -1,13 +1,13 @@
 .ons-field-group {
-  font-size: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
+    font-size: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
 
-  .ons-field {
-    display: inline-block;
-    font-size: 1rem;
-    margin-top: 0;
-    vertical-align: top;
-  }
+    .ons-field {
+        display: inline-block;
+        font-size: 1rem;
+        margin-top: 0;
+        vertical-align: top;
+    }
 }

package/components/field/_field.scss

@@ -1,26 +1,26 @@
 .ons-field {
-  position: relative;
+    position: relative;
 
-  &__other {
-    background-color: var(--ons-color-grey-5);
-    clear: both;
-    display: none;
-    padding: 0 0.5rem 0.5rem;
+    &__other {
+        background-color: var(--ons-color-grey-5);
+        clear: both;
+        display: none;
+        padding: 0 0.5rem 0.5rem;
 
-    input:checked ~ & {
-      display: block;
+        input:checked ~ & {
+            display: block;
+        }
     }
-  }
 
-  &--inline {
-    align-items: center;
-    display: flex;
+    &--inline {
+        align-items: center;
+        display: flex;
 
-    .ons-label {
-      margin-bottom: 0;
-      margin-right: 0.5rem;
+        .ons-label {
+            margin-bottom: 0;
+            margin-right: 0.5rem;
+        }
     }
-  }
 }
 
 @include input-width('ons-field__item--w-{x}');

package/components/field/_macro.njk

@@ -11,8 +11,8 @@
         {% else %}
             <div
                 {% if params.id %}id="{{ params.id }}"{% endif %}
-                class="ons-field{% if params.inline %} ons-field--inline{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
-                {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+                class="ons-field{{ ' ons-field--inline' if params.inline }}{{ ' ' + params.classes if params.classes else '' }}"
+                {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
             >
                 {{- caller() if caller -}}
             </div>

package/components/field/_macro.spec.js

@@ -6,90 +6,90 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_FIELD_BASIC = {
-  id: 'example-field',
+    id: 'example-field',
 };
 
 describe('macro: field', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
-
-    expect($('.ons-field').attr('id')).toBe('example-field');
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('field', {
-        ...EXAMPLE_FIELD_BASIC,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-field').hasClass('extra-class')).toBe(true);
-    expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('has correct class when `inline` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('field', {
-        ...EXAMPLE_FIELD_BASIC,
-        inline: true,
-      }),
-    );
-
-    expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
-  });
-
-  it('has additionally provided `attributes`', () => {
-    const $ = cheerio.load(
-      renderComponent('field', {
-        ...EXAMPLE_FIELD_BASIC,
-        attributes: {
-          a: 123,
-          b: 456,
-        },
-      }),
-    );
-
-    expect($('.ons-field').attr('a')).toBe('123');
-    expect($('.ons-field').attr('b')).toBe('456');
-  });
-
-  it('has the correct element with `dontWrap`', () => {
-    const $ = cheerio.load(
-      renderComponent('field', {
-        ...EXAMPLE_FIELD_BASIC,
-        dontWrap: true,
-      }),
-    );
-
-    expect($('.ons-field').length).toBe(0);
-  });
-
-  it('calls with content', () => {
-    const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
-
-    const content = $('.ons-field').html().trim();
-    expect(content).toEqual(expect.stringContaining('Example content...'));
-  });
-
-  it('calls the error component when `error` is provided', () => {
-    const faker = templateFaker();
-    const errorSpy = faker.spy('error');
-
-    faker.renderComponent('field', {
-      ...EXAMPLE_FIELD_BASIC,
-      error: { text: 'There is an error' },
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
+
+        expect($('.ons-field').attr('id')).toBe('example-field');
+    });
+
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('field', {
+                ...EXAMPLE_FIELD_BASIC,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-field').hasClass('extra-class')).toBe(true);
+        expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has correct class when `inline` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('field', {
+                ...EXAMPLE_FIELD_BASIC,
+                inline: true,
+            }),
+        );
+
+        expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
     });
 
-    expect(errorSpy.occurrences[0]).toEqual({
-      text: 'There is an error',
+    it('has additionally provided `attributes`', () => {
+        const $ = cheerio.load(
+            renderComponent('field', {
+                ...EXAMPLE_FIELD_BASIC,
+                attributes: {
+                    a: 123,
+                    b: 456,
+                },
+            }),
+        );
+
+        expect($('.ons-field').attr('a')).toBe('123');
+        expect($('.ons-field').attr('b')).toBe('456');
+    });
+
+    it('has the correct element with `dontWrap`', () => {
+        const $ = cheerio.load(
+            renderComponent('field', {
+                ...EXAMPLE_FIELD_BASIC,
+                dontWrap: true,
+            }),
+        );
+
+        expect($('.ons-field').length).toBe(0);
+    });
+
+    it('calls with content', () => {
+        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
+
+        const content = $('.ons-field').html().trim();
+        expect(content).toEqual(expect.stringContaining('Example content...'));
+    });
+
+    it('calls the error component when `error` is provided', () => {
+        const faker = templateFaker();
+        const errorSpy = faker.spy('error');
+
+        faker.renderComponent('field', {
+            ...EXAMPLE_FIELD_BASIC,
+            error: { text: 'There is an error' },
+        });
+
+        expect(errorSpy.occurrences[0]).toEqual({
+            text: 'There is an error',
+        });
     });
-  });
 });

package/components/fieldset/_fieldset.scss

@@ -1,36 +1,36 @@
 .ons-fieldset {
-  &__legend {
-    font-weight: $font-weight-bold;
-    margin: 0;
-    &:not(&--with-description) {
-      margin-bottom: 0.55rem;
-    }
-    &-title {
-      display: block;
-      margin: 0;
-      padding: 0 0 1.5rem;
+    &__legend {
+        font-weight: $font-weight-bold;
+        margin: 0;
+        &:not(&--with-description) {
+            margin-bottom: 0.55rem;
+        }
+        &-title {
+            display: block;
+            margin: 0;
+            padding: 0 0 1.5rem;
 
-      strong {
-        @extend .ons-highlight;
-      }
+            strong {
+                @extend .ons-highlight;
+            }
+        }
     }
-  }
-
-  &__description:not(&__description--title) {
-    @extend .ons-label__description;
 
-    margin-bottom: 0.55rem;
-  }
+    &__description:not(&__description--title) {
+        @extend .ons-label__description;
 
-  &__description--title {
-    font-weight: $font-weight-regular;
-  }
+        margin-bottom: 0.55rem;
+    }
 
-  > * .ons-fieldset {
-    .ons-fieldset {
-      &__legend {
+    &__description--title {
         font-weight: $font-weight-regular;
-      }
     }
-  }
+
+    > * .ons-fieldset {
+        .ons-fieldset {
+            &__legend {
+                font-weight: $font-weight-regular;
+            }
+        }
+    }
 }

package/components/fieldset/_macro.njk

@@ -1,42 +1,49 @@
 {% from "components/error/_macro.njk" import onsError %}
 
 {% macro onsFieldset(params) %}
-    {% set descriptionID = (params.id ~ "-" if params.id else "") ~ "legend-description" %}
-    {% set fieldset -%}
-        {% if params.dontWrap -%}
-            <div class="ons-input-items">
-                {{- caller() if caller -}}
-            </div>
+    {% set descriptionId = (params.id ~ "-" if params.id) ~ "legend-description" %}
+    {%- set fieldset -%}
+        {%- if params.dontWrap -%}
+            <div class="ons-input-items">{{- caller() if caller -}}</div>
         {%- elif params.legend or params.legendIsQuestionTitle -%}
             <fieldset
                 {% if params.id %}id="{{ params.id }}"{% endif %}
-                class="ons-fieldset{% if params.classes %} {{ params.classes }}{% endif %}"
-                {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+                class="ons-fieldset{{ ' ' + params.classes if params.classes else '' }}"
+                {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
             >
-                <legend{% if params.description %} aria-describedBy="{{ descriptionID }}"{% endif %} class="ons-fieldset__legend{% if params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses %} {{ params.legendClasses }}{% endif %}{% if params.description %} ons-fieldset__legend--with-description{% endif %}">
+                <legend
+                    {% if params.description %}aria-describedBy="{{ descriptionId }}"{% endif %}
+                    class="ons-fieldset__legend{{ ' ons-u-mb-no' if params.legendIsQuestionTitle }}{{ ' ' + params.legendClasses if params.legendClasses else '' }}{{ ' ons-fieldset__legend--with-description' if params.description }}"
+                >
                     {%- if params.legendIsQuestionTitle -%}
-                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title{% if params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
+                        <h1
+                            id="fieldset-legend-title"
+                            class="ons-fieldset__legend-title{{ ' ' + params.legendTitleClasses if params.legendTitleClasses else '' }}"
+                        >
                             {{- params.legend | safe -}}
                         </h1>
                     {%- else -%}
-                        <span class="ons-fieldset__legend-title ons-u-pb-no">{{- params.legend | safe -}}</span>
+                        <span class="ons-fieldset__legend-title ons-u-pb-no"> {{- params.legend | safe -}} </span>
                     {%- endif -%}
                 </legend>
                 {%- if params.description -%}
-                    <div id="{{ descriptionID }}" class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
+                    <div
+                        id="{{ descriptionId }}"
+                        class="ons-fieldset__description{{ ' ons-fieldset__description--title ons-u-mb-m' if params.legendIsQuestionTitle }}"
+                    >
                         {{- params.description | safe -}}
                     </div>
                 {%- endif -%}
                 {{- caller() if caller -}}
             </fieldset>
-        {%- endif %}
-    {%- endset %}
+        {%- endif -%}
+    {%- endset -%}
 
-    {% if params.error -%}
+    {%- if params.error -%}
         {% call onsError(params.error) %}
             {{- fieldset | safe -}}
         {% endcall %}
     {%- else -%}
         {{- fieldset | safe -}}
-    {%- endif %}
+    {%- endif -%}
 {% endmacro %}