@ons/design-system 72.1.2 → 72.2.1

package/components/address-input/_macro.spec.js

@@ -83,7 +83,6 @@ describe('FOR: Macro: Address-input', () => {
                 ariaYouHaveSelected: '[params.ariaYouHaveSelected]',
                 ariaMinChars: '[params.ariaMinChars]',
                 minChars: '[params.minChars]',
-                ariaResultsLabel: '[params.ariaResultsLabel]',
                 ariaOneResult: '[params.ariaOneResult]',
                 ariaNResults: '[params.ariaNResults]',
                 ariaLimitedResults: '[params.ariaLimitedResults]',

package/components/address-input/autosuggest.address.spec.js

@@ -15,7 +15,6 @@ const EXAMPLE_ADDRESS_INPUT = {
     ariaYouHaveSelected: 'You have selected',
     ariaMinChars: 'Enter 3 or more characters for suggestions.',
     minChars: 3,
-    ariaResultsLabel: 'Country suggestions',
     ariaOneResult: 'There is one suggestion available.',
     ariaNResults: 'There are {n} suggestions available.',
     ariaLimitedResults: 'Type more characters to improve your search',

package/components/autosuggest/autosuggest.spec.js

@@ -16,7 +16,6 @@ const EXAMPLE_AUTOSUGGEST = {
     ariaYouHaveSelected: 'You have selected',
     ariaMinChars: 'Enter 3 or more characters for suggestions.',
     minChars: 3,
-    ariaResultsLabel: 'Country suggestions',
     ariaOneResult: 'There is one suggestion available.',
     ariaNResults: 'There are {n} suggestions available.',
     ariaLimitedResults: 'Type more characters to improve your search',
@@ -40,7 +39,6 @@ const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = {
     ariaYouHaveSelected: 'You have selected',
     ariaMinChars: 'Enter 3 or more characters for suggestions.',
     minChars: 3,
-    ariaResultsLabel: 'Country suggestions',
     ariaOneResult: 'There is one suggestion available.',
     ariaNResults: 'There are {n} suggestions available.',
     ariaLimitedResults: 'Type more characters to improve your search',

package/components/button/_button.scss

@@ -28,8 +28,9 @@ $button-shadow-size: 3px;
 
     &--search {
         .ons-icon {
-            @include mq(s, l) {
-                margin-right: 0.5rem;
+            margin: 0.125rem 0.5rem 0.125rem 0;
+            @include mq(xs, s) {
+                margin-right: 0;
             }
         }
     }

package/components/char-check-limit/_macro.spec.js

@@ -5,65 +5,57 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-const EXAMPLE_CHAR_CHECK_LIMIT = {
-    id: 'example-char-check-limit',
-    charCountSingular: 'You have {x} character remaining',
-    charCountPlural: 'You have {x} characters remaining',
-    charCountOverLimitSingular: '{x} character too many',
-    charCountOverLimitPlural: '{x} characters too many',
-};
-
-describe('macro: char-check-limit', () => {
-    it('passes jest-axe checks without check', async () => {
-        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('passes jest-axe checks with check', async () => {
-        const $ = cheerio.load(
-            renderComponent(
-                'char-check-limit',
-                {
-                    ...EXAMPLE_CHAR_CHECK_LIMIT,
-                    variant: 'check',
-                },
-                ['<p>Test content.</p>'],
-            ),
-        );
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
-
-        expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
-    });
-
-    it('has the provided data attributes', () => {
-        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
-
-        expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
-        expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
-        expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
-        expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
+import { EXAMPLE_CHAR_CHECK_LIMIT } from './_test-examples';
+
+describe('FOR: Macro: CharCheckLimit', () => {
+    describe('GIVEN: Params: Required', () => {
+        describe('WHEN: required params are provided', () => {
+            const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+
+                expect(results).toHaveNoViolations();
+            });
+            test('THEN: has the provided id attribute', () => {
+                expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
+            });
+            test('THEN: has the data attribute which defines charCountPlural', () => {
+                expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+            });
+            test('THEN: has the data attribute which defines charCountSingular', () => {
+                expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
+            });
+            test('THEN: has the data attribute which defines charCountOverLimitSingular', () => {
+                expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
+            });
+            test('THEN: has the data attribute which defines charCountOverLimitPlural', () => {
+                expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
+            });
+        });
     });
 
-    it('has expected nested content', () => {
-        const $ = cheerio.load(
-            renderComponent(
-                'char-check-limit',
-                {
-                    ...EXAMPLE_CHAR_CHECK_LIMIT,
-                    variant: 'check',
-                },
-                ['<p>Test content.</p>'],
-            ),
-        );
-
-        expect($('.ons-js-char-check-input').html().trim()).toBe('<p>Test content.</p>');
+    describe('GIVEN: Params: variant', () => {
+        describe('WHEN: variant is provided', () => {
+            const $ = cheerio.load(
+                renderComponent(
+                    'char-check-limit',
+                    {
+                        ...EXAMPLE_CHAR_CHECK_LIMIT,
+                        variant: 'check',
+                    },
+                    ['<p>Test content.</p>'],
+                ),
+            );
+
+            test('THEN: passes jest-axe checks with variant set to check', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: renders the passed content', () => {
+                expect($('.ons-js-char-check-input').text()).toBe('Test content.');
+            });
+        });
     });
 });

package/components/description-list/_macro.njk

@@ -21,7 +21,13 @@
                             {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}
                             class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
                         >
-                            {{- descriptionItem.description -}}
+                            {%- if descriptionItem.url -%}
+                                <a class="ons-description-list__link" href="{{ descriptionItem.url }}">
+                                    {{- descriptionItem.description -}}
+                                </a>
+                            {%- else -%}
+                                {{- descriptionItem.description -}}
+                            {%- endif -%}
                         </dd>
                     {% endif %}
                 {% endfor %}

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

@@ -30,6 +30,7 @@ const EXAMPLE_DESCRIPTION_LIST_FULL = {
                 {
                     id: 'description-3',
                     description: '49300005832',
+                    url: '#',
                 },
             ],
         },
@@ -142,7 +143,9 @@ describe('macro: description-list', () => {
 
         expect($listElements[4].tagName).toBe('dd');
         expect($($listElements[4]).attr('id')).toBe('description-3');
-        expect($($listElements[4]).text()).toBe('49300005832');
+        const $link = $($listElements[4]).find('a');
+        expect($link.attr('href')).toBe('#');
+        expect($link.text()).toBe('49300005832');
     });
 
     it.each([

package/components/description-list/example-inline-description-list.njk

@@ -49,7 +49,8 @@
                         "description": "Jacky Turner"
                     },
                     {
-                        "description": "Louise Goodland"
+                        "description": "Louise Goodland",
+                        'url': '#'
                     }
                 ]
             }