Merge branch 'main' into feature/165/analysis-hero

src/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.');
+            });
+        });
     });
 });

src/components/char-check-limit/_test-examples.js

@@ -0,0 +1,7 @@
+export 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',
+};

src/components/description-list/_macro-options.md

@@ -21,3 +21,4 @@
 | ----------- | ------ | -------- | ----------------------------------------------------- |
 | id          | string | false    | The HTML `id` for the description of the related term |
 | description | string | true     | The value of the description of the related term      |
+| url         | string | false    | The url of the description of the related term        |

src/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 %}

src/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([

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

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

src/components/panel/_macro-options.md

@@ -1,13 +1,13 @@
-| Name                | Type    | Required | Description                                                                                                                                                                                                                                                                    |
-| ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| body                | string  | true     | The contents of the panel. This can contain HTML.                                                                                                                                                                                                                              |
-| title               | string  | false    | The title for the error summary panel                                                                                                                                                                                                                                          |
-| headingLevel        | int     | false    | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2`                                                                                                                                     |
-| type                | string  | false    | A single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement”                                                                                                                    |
-| spacious            | boolean | false    | Set to “true” to double the padding spacing surrounding the body content if required                                                                                                                                                                                           |
-| classes             | string  | false    | Custom classes to add to the panel                                                                                                                                                                                                                                             |
-| id                  | string  | false    | The HTML `id` for the panel                                                                                                                                                                                                                                                    |
-| attributes          | object  | false    | HTML attributes to apply to the panel (for example, data attributes)                                                                                                                                                                                                           |
-| assistiveTextPrefix | string  | false    | Sets the visually hidden prefix text for screen readers. Default values for each panel type: <ul><li>`information` and `branded` – “Important information: ”</li><li>`success` – “Completed: ”</li><li>`warn` and `warn-branded` – “Warning: ”</li><li>`error`– “Error: ”</li> |
-| iconType            | string  | false    | Adds an icon to the panel, before the body content, by setting the [icon type](/foundations/icons#icon-type)                                                                                                                                                                   |
-| iconSize            | string  | false    | Icon size can be set to match the size of the body content text as detailed in the [typography type scale](/foundations/typography/#type-scale)                                                                                                                                |
+| Name                | Type    | Required | Description                                                                                                                                                                                                                                                                                             |
+| ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| body                | string  | true     | The contents of the panel. This can contain HTML.                                                                                                                                                                                                                                                       |
+| title               | string  | false    | The title for the error summary panel (not supported for the warn, warn-branded, announcement and bare panels )                                                                                                                                                                                         |
+| headingLevel        | int     | false    | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2`                                                                                                                                                              |
+| variant             | string  | false    | A single value to adjust the component using available variants: "info", “success”, “bare”, “error”, “warn”, “warn-branded”, and “announcement”                                                                                                                                                         |
+| spacious            | boolean | false    | Set to “true” to double the padding spacing surrounding the body content if required                                                                                                                                                                                                                    |
+| classes             | string  | false    | Custom classes to add to the panel                                                                                                                                                                                                                                                                      |
+| id                  | string  | false    | The HTML `id` for the panel                                                                                                                                                                                                                                                                             |
+| attributes          | object  | false    | HTML attributes to apply to the panel (for example, data attributes)                                                                                                                                                                                                                                    |
+| assistiveTextPrefix | string  | false    | Sets the visually hidden prefix text for screen readers. Default values for each panel type: <ul><li>`info` – “Important information: ”</li><li>`success` – “Completed: ”</li><li>`warn` and `warn-branded` – “Warning: ”</li><li>`error`– “Error: ”</li><li>`announcement`– “Announcement: ”</li></ul> |
+| iconType            | string  | false    | Adds an icon to the panel, before the body content, by setting the [icon type](/foundations/icons#icon-type)                                                                                                                                                                                            |
+| iconSize            | string  | false    | Icon size can be set to match the size of the body content text as detailed in the [typography type scale](/foundations/typography/#type-scale)                                                                                                                                                         |

src/components/panel/_macro.njk

@@ -50,7 +50,7 @@
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
             {% endif %}
 
-            {% if params.title %}
+            {% if params.title and (params.variant not in ['bare', 'warn', 'warn-branded', 'announcement'] ) %}
                 {% if params.variant == 'error' %}
                     {% set defaultTitleTag = "h" ~ 2 %}
                 {% else %}

src/components/panel/_macro.spec.js

@@ -32,7 +32,7 @@ describe('macro: panel', () => {
             expect(results).toHaveNoViolations();
         });
 
-        it('has correct class', () => {
+        it('has correct panel variant class', () => {
             const $ = cheerio.load(
                 renderComponent('panel', {
                     ...EXAMPLE_PANEL_BASIC,
@@ -173,6 +173,20 @@ describe('macro: panel', () => {
         });
     });
 
+    describe.each(['bare', 'warn', 'warn-branded', 'announcement'])('mode: %s', (panelVariant) => {
+        it('does not render a title when `title` is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('panel', {
+                    ...EXAMPLE_PANEL_BASIC,
+                    title: 'Panel title',
+                    variant: panelVariant,
+                }),
+            );
+
+            expect($('.ons-panel__title').length).toBe(0);
+        });
+    });
+
     describe.each([
         ['error', 'h2'],
         ['success', 'div'],