@ons/design-system 72.1.2 → 72.2.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': '#'
                     }
                 ]
             }

package/components/hero/_hero.scss

@@ -28,6 +28,35 @@
         }
     }
 
+    &--grey {
+        background-color: var(--ons-color-grey-10);
+        &::before {
+            content: '';
+            background-color: var(--ons-color-banner-bg);
+            border-radius: 0 0 50% 50%;
+            inset: 0;
+            left: -40%;
+            position: absolute;
+            width: 150%;
+            @include mq(l) {
+                border-radius: 0 0 300% 150%;
+                left: 0;
+                width: 100%;
+            }
+        }
+    }
+    &__badge {
+        @include mq(xs, l) {
+            margin-top: 2.5rem;
+            margin-bottom: 1rem;
+        }
+    }
+
+    &--topic {
+        color: var(--ons-color-branded);
+        @extend .ons-u-mb-no;
+    }
+
     &__container {
         align-items: center;
         display: flex;
@@ -43,10 +72,6 @@
         height: 100%;
     }
 
-    &__text:has(+ .ons-btn) {
-        margin-bottom: 2rem;
-    }
-
     &__pre-title {
         margin-bottom: 0.5rem;
 
@@ -62,6 +87,10 @@
         z-index: 5;
     }
 
+    &__details:has(.ons-breadcrumbs) {
+        padding-top: 1rem;
+    }
+
     &--dark & {
         &__details {
             color: var(--ons-color-text-inverse) !important;
@@ -299,4 +328,16 @@
             }
         }
     }
+
+    &__title-container {
+        @include mq(l) {
+            display: grid;
+            align-items: start;
+            justify-content: space-between;
+
+            &.ons-hero__title-badge {
+                grid-template-columns: 1fr auto;
+            }
+        }
+    }
 }

package/components/hero/_macro.njk

@@ -15,16 +15,41 @@
         {% endif %}
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
-                <header>
-                    <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
-                    {% if params.subtitle %}
-                        <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
-                    {% endif %}
-                </header>
-
-                {% if params.text %}
-                    <p class="ons-hero__text">{{ params.text | safe }}</p>
+                {% if params.breadcrumbs %}
+                    {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+                    {{
+                        onsBreadcrumbs({
+                            "itemsList": params.breadcrumbs.itemsList,
+                            "ariaLabel": params.breadcrumbs.ariaLabel,
+                            "id": params.breadcrumbs.id,
+                            "classes": 'ons-u-pt-no' ~ (' ' + params.breadcrumbs.classes if params.breadcrumbs.classes else '')
+                        })
+                    }}
+                {% endif %}
+                {% if params.topic %}
+                    <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
                 {% endif %}
+                <div class="ons-hero__title-container {% if params.officialStatisticsBadge %}ons-hero__title-badge{% endif %}">
+                    <header>
+                        <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
+                        {% if params.subtitle %}
+                            <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
+                        {% endif %}
+                    </header>
+                    {% if params.officialStatisticsBadge == true %}
+                        {% from "components/icon/_macro.njk" import onsIcon %}
+                        <div class="ons-hero__badge">
+                            {{-
+                                onsIcon({
+                                    "iconType": 'official-statistics'
+                                })
+                            -}}
+                        </div>
+                    {% endif %}
+                    {% if params.text %}
+                        <p class="ons-hero__text">{{ params.text | safe }}</p>
+                    {% endif %}
+                </div>
 
                 {% if params.button %}
                     {% from "components/button/_macro.njk" import onsButton %}
@@ -34,7 +59,7 @@
                     {% endif %}
                     {{
                         onsButton({
-                            "classes": btnClasses,
+                            "classes": 'ons-u-mt-s' + btnClasses,
                             "type": 'button',
                             "text": params.button.text,
                             "url": params.button.url
@@ -44,7 +69,21 @@
                 {% if caller %}
                     <div class="ons-hero__additional-content">{{- caller() -}}</div>
                 {% endif %}
+
+                {% if params.descriptionList %}
+                    {% from "components/description-list/_macro.njk" import onsDescriptionList %}
+                    {{
+                        onsDescriptionList({
+                            "classes": "ons-u-mb-no",
+                            "variant": 'inline',
+                            "termCol": params.descriptionList.termCol,
+                            "descriptionCol": params.descriptionList.descriptionCol,
+                            "itemsList": params.descriptionList.itemsList
+                        })
+                    }}
+                {% endif %}
             </div>
+
             {% if params.html %}
                 <div class="ons-hero__additional-html">{{- params.html | safe -}}</div>
             {% endif %}

package/components/hero/_macro.spec.js

@@ -78,7 +78,7 @@ describe('macro: hero', () => {
 
         faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });
 
-        expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
+        expect(buttonSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mt-s ons-btn--ghost');
     });
 
     it('calls with content', () => {
@@ -92,4 +92,87 @@ describe('macro: hero', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'navy-blue' }));
         expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
     });
+
+    it('outputs the correct topic when set', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, topic: 'Topic Text' }));
+
+        const content = $('.ons-hero--topic').text().trim();
+        expect(content).toBe('Topic Text');
+    });
+
+    it('outputs the official statistics badge when officialStatisticsBadge is set to true', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, officialStatisticsBadge: true }));
+
+        expect($('.ons-hero__badge').length).toBe(1);
+        expect($('.ons-hero__badge svg title').text().trim()).toBe('Offical Statistics Badge');
+    });
+
+    it('renders curved gradient when variant is `grey`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey' }));
+        expect($('.ons-hero--grey').length).toBe(1);
+    });
+
+    it('outputs the correct breadcrumbs', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                variants: 'grey',
+                breadcrumbs: {
+                    ariaLabel: 'Breadcrumbs',
+                    itemsList: [
+                        {
+                            url: '/breadcrumb-1',
+                            text: 'Breadcrumbs 1',
+                        },
+                        {
+                            url: '/breadcrumb-2',
+                            text: 'Breadcrumbs 2',
+                        },
+                    ],
+                },
+            }),
+        );
+
+        const breadcrumbs = $('.ons-breadcrumbs__link');
+        expect($(breadcrumbs).length).toBe(2);
+        expect($(breadcrumbs[0]).attr('href')).toBe('/breadcrumb-1');
+        expect($(breadcrumbs[0]).text().trim()).toBe('Breadcrumbs 1');
+        expect($(breadcrumbs[1]).attr('href')).toBe('/breadcrumb-2');
+        expect($(breadcrumbs[1]).text().trim()).toBe('Breadcrumbs 2');
+    });
+
+    it('outputs the correct description list value', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                variants: 'grey',
+                descriptionList: {
+                    termCol: '4',
+                    descriptionCol: '8',
+                    itemsList: [
+                        {
+                            term: 'term1:',
+                            descriptions: [
+                                {
+                                    description: 'description1',
+                                },
+                            ],
+                        },
+                        {
+                            term: 'term2:',
+                            descriptions: [
+                                {
+                                    description: 'description2',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            }),
+        );
+
+        const descriptionText = $('.ons-description-list__value');
+        expect($(descriptionText[0]).text().trim()).toBe('description1');
+        expect($(descriptionText[1]).text().trim()).toBe('description2');
+    });
 });

package/components/hero/example-hero-grey.njk

@@ -0,0 +1,78 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "variants": 'grey',
+        "detailsColumns": '12',
+        "officialStatisticsBadge": true,
+        "topic": 'Statistical article',
+        "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate',
+        "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.',
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                },
+                {
+                    "url": '/',
+                    "text": 'Business, industry and trade'
+                },
+                {
+                    "url": '/',
+                    "text": 'Retail industry'
+                }
+            ]
+        },
+        "descriptionList": {
+            "termCol": "5",
+            "descriptionCol": "7",
+            "itemsList": [
+                {
+                    "term": "Release date:",
+                    "descriptions": [
+                        {
+                            "description": "16 August 2024"
+                        }
+                    ]
+                },
+                {
+                    "term": "Edition:",
+                    "descriptions": [
+                        {
+                            "description": "Latest"
+                        }
+                    ]
+                },
+                {
+                    "term": "Contact:",
+                    "descriptions": [
+                        {
+                            "description": "Retail Sales team"
+                        }
+                    ]
+                },
+                {
+                    "term": "Next release:",
+                    "descriptions": [
+                        {
+                            "description": "20 September 2024"
+                        }
+                    ]
+                },
+                {
+                    "term": "Releases:",
+                    "descriptions": [
+                        {
+                            "description": "View previous releases"
+                        }
+                    ]
+                }
+            ]
+        }
+    })
+}}