@ons/design-system 74.0.0-next.1 → 74.0.0-next.11

package/components/hero/example-hero-pale-blue-with-external-breadcrumbs.njk

@@ -4,170 +4,165 @@ layout: ~
 ---
 
 {% from "components/hero/_macro.njk" import onsHero %}
-{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
 {% extends "layout/_template.njk" %}
 {%
     set pageConfig = {
         "header": {
             "variants": 'basic',
             "menuLinks": {
-            "id": "menu-links",
-            "keyLinks": [
-                {
-                    'heading': 'Taking part in a survey?',
-                    'description': 'It’s never been more important.'
-                },
-                {
-                    'heading': 'Release calendar',
-                    'description': 'View our latest and upcoming releases.'
-                },
-                {
-                    'heading': 'Explore local statistics',
-                    'url': '#0',
-                    'description': 'Explore statistics across the UK.'
-                }
-            ],
-            "columns": [
-                {
-                    "groups": [
-                        {
-                            "heading": "People, population and community",
-                            "groupItems": [
-                                {
-                                    "text": "Armed forces community"
-                                },
-                                {
-                                    "text": "Births, deaths and marriages"
-                                },
-                                {
-                                    "text": "Crime and justice"
-                                },
-                                {
-                                    "text": "Cultural identity"
-                                },
-                                {
-                                    "text": "Education and childcare"
-                                },
-                                {
-                                    "text": "Elections"
-                                },
-                                {
-                                    "text": "Health and social care"
-                                },
-                                {
-                                    "text": "Household characteristics"
-                                },
-                                {
-                                    "text": "Housing"
-                                },
-                                {
-                                    "text": "Leisure and tourism"
-                                },
-                                {
-                                    "text": "Personal and household finances"
-                                },
-                                {
-                                    "text": "Population and migration"
-                                },
-                                {
-                                    "text": "Well-being"
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    "groups": [
-                        {
-                            "heading": "Business, industry and trade",
-                            "groupItems": [
-                                {
-                                    "text": "Business"
-                                },
-                                {
-                                    "text": "Changes to business"
-                                },
-                                {
-                                    "text": "Construction industry"
-                                },
-                                {
-                                    "text": "International trade"
-                                },
-                                {
-                                    "text": "IT and internet industry"
-                                },
-                                {
-                                    "text": "Manufacturing and production industry"
-                                },
-                                {
-                                    "text": "Retail industry",
-                                    "url": "#0"
-                                },
-                                {
-                                    "text": "Tourism industry"
-                                }
-                            ]
-                        },
-                        {
-                            "heading": "Employment and labour market",
-                            "url": "#0",
-                            "groupItems":
-                            [
-                                {
-                                    "text": "People in work"
-                                },
-                                {
-                                    "text": "People not in work"
-                                }
-                            ]
+                "id": "menu-links",
+                "keyLinks": [
+                    {
+                        'heading': 'Taking part in a survey?',
+                        'description': 'It’s never been more important.'
+                    },
+                    {
+                        'heading': 'Release calendar',
+                        'description': 'View our latest and upcoming releases.'
+                    },
+                    {
+                        'heading': 'Explore local statistics',
+                        'url': '#0',
+                        'description': 'Explore statistics across the UK.'
+                    }
+                ],
+                "columns": [
+                    {
+                        "groups": [
+                            {
+                                "heading": "People, population and community",
+                                "groupItems": [
+                                    {
+                                        "text": "Armed forces community"
+                                    },
+                                    {
+                                        "text": "Births, deaths and marriages"
+                                    },
+                                    {
+                                        "text": "Crime and justice"
+                                    },
+                                    {
+                                        "text": "Cultural identity"
+                                    },
+                                    {
+                                        "text": "Education and childcare"
+                                    },
+                                    {
+                                        "text": "Elections"
+                                    },
+                                    {
+                                        "text": "Health and social care"
+                                    },
+                                    {
+                                        "text": "Household characteristics"
+                                    },
+                                    {
+                                        "text": "Housing"
+                                    },
+                                    {
+                                        "text": "Leisure and tourism"
+                                    },
+                                    {
+                                        "text": "Personal and household finances"
+                                    },
+                                    {
+                                        "text": "Population and migration"
+                                    },
+                                    {
+                                        "text": "Well-being"
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "groups": [
+                            {
+                                "heading": "Business, industry and trade",
+                                "groupItems": [
+                                    {
+                                        "text": "Business"
+                                    },
+                                    {
+                                        "text": "Changes to business"
+                                    },
+                                    {
+                                        "text": "Construction industry"
+                                    },
+                                    {
+                                        "text": "International trade"
+                                    },
+                                    {
+                                        "text": "IT and internet industry"
+                                    },
+                                    {
+                                        "text": "Manufacturing and production industry"
+                                    },
+                                    {
+                                        "text": "Retail industry",
+                                        "url": "#0"
+                                    },
+                                    {
+                                        "text": "Tourism industry"
+                                    }
+                                ]
+                            },
+                            {
+                                "heading": "Employment and labour market",
+                                "url": "#0",
+                                "groupItems":
+                                [
+                                    {
+                                        "text": "People in work"
+                                    },
+                                    {
+                                        "text": "People not in work"
+                                    }
+                                ]
 
-                        }
-                    ]
-                },
-                {
-                    "groups": [
-                        {
-                            "heading": "Economy",
-                            "groupItems": [
-                                {
-                                    "text": "Economic output and productivity"
-                                },
-                                {
-                                    "text": "Government, public sector and taxes"
-                                },
-                                {
-                                    "text": "Gross Value Added (GVA)"
-                                },
-                                {
-                                    "text": "Investments, pensions and trusts"
-                                },
-                                {
-                                    "text": "Regional accounts"
-                                },
-                                {
-                                    "text": "Environmental accounts"
-                                },
-                                {
-                                    "text": "Gross Domestic Product (GDP)"
-                                },
-                                {
-                                    "text": "Inflation and price indices"
-                                },
-                                {
-                                    "text": "National accounts"
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-        }
-    }
-%}
-{% block pageContent %}
-    {{
-        onsBreadcrumbs({
+                            }
+                        ]
+                    },
+                    {
+                        "groups": [
+                            {
+                                "heading": "Economy",
+                                "groupItems": [
+                                    {
+                                        "text": "Economic output and productivity"
+                                    },
+                                    {
+                                        "text": "Government, public sector and taxes"
+                                    },
+                                    {
+                                        "text": "Gross Value Added (GVA)"
+                                    },
+                                    {
+                                        "text": "Investments, pensions and trusts"
+                                    },
+                                    {
+                                        "text": "Regional accounts"
+                                    },
+                                    {
+                                        "text": "Environmental accounts"
+                                    },
+                                    {
+                                        "text": "Gross Domestic Product (GDP)"
+                                    },
+                                    {
+                                        "text": "Inflation and price indices"
+                                    },
+                                    {
+                                        "text": "National accounts"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        breadcrumbs: {
             "ariaLabel": 'Breadcrumbs',
             "variant": "pale-blue",
             "itemsList": [
@@ -184,18 +179,19 @@ layout: ~
                     "text": 'Retail industry'
                 }
             ]
+        }
+    }
+%}
+
+{% block hero %}
+    {{
+        onsHero({
+            "topic": 'Topic',
+            "title": 'Retail Industry',
+            "text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
+                    (Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
+                    of how the wider economy is performing and the strength of consumer spending.',
+            "variants": 'pale-blue'
         })
     }}
-    <main id="main-content">
-        {{
-            onsHero({
-                "topic": 'Topic',
-                "title": 'Retail Industry',
-                "text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
-                        (Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
-                        of how the wider economy is performing and the strength of consumer spending.',
-                "variants": 'pale-blue'
-            })
-        }}
-    </main>
 {% endblock %}

package/components/image/_image.scss

@@ -7,11 +7,4 @@
         display: block;
         max-width: 100%;
     }
-
-    &__caption {
-        @extend .ons-u-fs-s;
-
-        display: block;
-        padding: 0.5rem 0 0;
-    }
 }

package/components/image/_macro.njk

@@ -1,17 +1,28 @@
 {%- macro onsImage(params) -%}
-    <figure class="ons-image">
-        {% if params.image %}
-            <img
-                class="ons-image__img"
-                {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}"
-                alt="{{ params.alt if params.alt }}"
-            />
-        {% else %}
-            <img class="ons-image__img" src="{{ params.src }}" alt="{{ params.alt }}" />
-        {% endif %}
+    {% from "components/figure/_macro.njk" import onsFigure %}
 
-        {% if params.caption %}
-            <figcaption class="ons-image__caption">{{ params.caption }}</figcaption>
-        {% endif %}
-    </figure>
+    {%
+        call onsFigure({
+            "id": params.id,
+            "headingLevel": params.headingLevel,
+            "figureNumber": params.figureNumber,
+            "title": params.title,
+            "subtitle": params.subtitle,
+            "caption": params.caption,
+            "footnotes": params.footnotes,
+            "download": params.download
+        })
+    %}
+        <div class="ons-image">
+            {% if params.image %}
+                <img
+                    class="ons-image__img"
+                    {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}"
+                    alt="{{ params.alt if params.alt }}"
+                />
+            {% else %}
+                <img class="ons-image__img" src="{{ params.src }}" alt="{{ params.alt }}" />
+            {% endif %}
+        </div>
+    {% endcall %}
 {%- endmacro -%}

package/components/image/_macro.spec.js

@@ -3,7 +3,7 @@
 import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
-import { renderComponent } from '../../tests/helpers/rendering';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_IMAGE_SRC_URL_MINIMAL = {
     src: 'example.png',
@@ -17,13 +17,14 @@ const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
 };
 
 describe('macro: image', () => {
-    it('outputs a `figure` element', () => {
+    it('outputs a `figure` element wrapping the image', () => {
         const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_SRC_URL_MINIMAL));
 
-        expect($('.ons-image')[0].tagName).toBe('figure');
+        expect($('.ons-figure')[0].tagName).toBe('figure');
+        expect($('.ons-figure .ons-image').length).toBe(1);
     });
 
-    it('outputs a `figurecaption` element when `caption` is provided', () => {
+    it('outputs a `figcaption` element when `caption` is provided', () => {
         const $ = cheerio.load(
             renderComponent('image', {
                 ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
@@ -31,10 +32,10 @@ describe('macro: image', () => {
             }),
         );
 
-        expect($('.ons-image__caption')[0].tagName).toBe('figcaption');
+        expect($('.ons-figure__caption')[0].tagName).toBe('figcaption');
     });
 
-    it('outputs a `figurecaption` element with provided `caption` text', () => {
+    it('outputs a `figcaption` element with provided `caption` text', () => {
         const $ = cheerio.load(
             renderComponent('image', {
                 ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
@@ -42,7 +43,121 @@ describe('macro: image', () => {
             }),
         );
 
-        expect($('.ons-image__caption').text().trim()).toBe('Example image caption');
+        expect($('.ons-figure__caption').text().trim()).toBe('Example image caption');
+    });
+
+    describe('figure params', () => {
+        it('passes `id` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                id: 'my-image',
+            });
+
+            expect(figureSpy.occurrences[0].id).toBe('my-image');
+        });
+
+        it('passes `headingLevel` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                headingLevel: 4,
+            });
+
+            expect(figureSpy.occurrences[0].headingLevel).toBe(4);
+        });
+
+        it('passes `figureNumber` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                figureNumber: 'Image 1',
+            });
+
+            expect(figureSpy.occurrences[0].figureNumber).toBe('Image 1');
+        });
+
+        it('passes `title` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                title: 'Image title',
+            });
+
+            expect(figureSpy.occurrences[0].title).toBe('Image title');
+        });
+
+        it('passes `subtitle` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                subtitle: 'Image subtitle',
+            });
+
+            expect(figureSpy.occurrences[0].subtitle).toBe('Image subtitle');
+        });
+
+        it('passes `caption` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                caption: 'A caption',
+            });
+
+            expect(figureSpy.occurrences[0].caption).toBe('A caption');
+        });
+
+        it('passes `footnotes` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            const footnotes = {
+                title: 'Footnotes',
+                content: 'Some notes about this image.',
+            };
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                footnotes,
+            });
+
+            expect(figureSpy.occurrences[0].footnotes).toEqual(footnotes);
+        });
+
+        it('passes `download` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            const download = {
+                title: 'Download this image',
+                itemsList: [
+                    {
+                        text: 'High resolution image (JPG, 1.2MB)',
+                        url: '/img/example.jpg',
+                        download: 'file',
+                    },
+                ],
+            };
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                download,
+            });
+
+            expect(figureSpy.occurrences[0].download).toEqual(download);
+        });
     });
 
     describe('mode: src', () => {

package/components/image/example-image-with-figure-fields.njk

@@ -0,0 +1,25 @@
+{% from "components/image/_macro.njk" import onsImage %}
+{{
+    onsImage({
+        "id": "image-with-extra-fields",
+        "src": '/img/small/woman-in-purple-dress-shirt.jpg',
+        "alt": 'Woman in a purple dress shirt using a laptop',
+        "title": "Image 1: Working from home",
+        "subtitle": "A growing proportion of the workforce now works remotely",
+        "caption": "Image 1 - Woman in a purple dress shirt using a laptop",
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "Image is for illustrative purposes only."
+        },
+        "download": {
+            "title": "Download this image",
+            "itemsList": [
+                {
+                    "text": "High resolution image (JPG format, 1.2MB)",
+                    "url": "/img/small/woman-in-purple-dress-shirt.jpg",
+                    "download": "file"
+                }
+            ]
+        }
+    })
+}}

package/components/input/_input.scss

@@ -43,6 +43,10 @@
     &--textarea {
         // Prevent inner shadow on iOS
         appearance: none;
+
+        &:not(.ons-input--header-search, [class*='--w-']) {
+            @include reading-width;
+        }
     }
 
     &:focus {

package/components/input/_macro.njk

@@ -60,7 +60,10 @@
             <!-- prettier-ignore-end -->
         {% endif %}
         {% if params.postTextboxLinkText %}
-            <a class="ons-u-fs-s ons-input__post-link" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
+            {# p tag ensures reading width is applied #}
+            <p class="ons-u-mb-no">
+                <a class="ons-u-fs-s ons-input__post-link" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
+            </p>
         {% endif %}
     {% endset %}
 

package/components/label/_label.scss

@@ -1,4 +1,6 @@
 .ons-label {
+    @include reading-width;
+
     color: inherit;
     display: block;
     font-weight: $font-weight-bold;
@@ -6,6 +8,7 @@
 
     &__description {
         @extend .ons-u-fs-s;
+        @include reading-width;
 
         display: block;
     }