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

package/components/featured-article/macro.spec.js

@@ -3,12 +3,12 @@
 import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
-import { EXAMPLE_FEATURED_ARTICLE_WITH_CHART, EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE } from './_test-examples';
+import { EXAMPLE_FEATURED_ARTICLE_PARAMS, EXAMPLE_CHART_CALLER_CONTENT, EXAMPLE_IMAGE_CALLER_CONTENT } from './_test-examples';
 
 describe('Macro: Featured Article', () => {
     describe('GIVEN: Params: required', () => {
-        describe('WHEN: chart is provided and image is not', () => {
-            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_CHART));
+        describe('WHEN: chart content is provided via caller', () => {
+            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_PARAMS, EXAMPLE_CHART_CALLER_CONTENT));
 
             test('THEN: it passes accessibility checks', async () => {
                 const results = await axe($.html());
@@ -23,8 +23,8 @@ describe('Macro: Featured Article', () => {
                 expect($('.ons-featured__title a').attr('href')).toBe('/economy/economic-trends-2024');
             });
 
-            test('THEN: it renders the onsChart component', () => {
-                expect($('[data-highcharts-base-chart]').length).toBe(1);
+            test('THEN: it renders the caller content in the media area', () => {
+                expect($('.ons-featured__media [data-highcharts-base-chart]').length).toBe(1);
             });
 
             test('THEN: the chart has the correct id', () => {
@@ -36,8 +36,8 @@ describe('Macro: Featured Article', () => {
             });
         });
 
-        describe('WHEN: image is provided and chart is not', () => {
-            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE));
+        describe('WHEN: image content is provided via caller', () => {
+            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_PARAMS, EXAMPLE_IMAGE_CALLER_CONTENT));
 
             test('THEN: it passes accessibility checks', async () => {
                 const results = await axe($.html());
@@ -45,78 +45,50 @@ describe('Macro: Featured Article', () => {
             });
 
             test('THEN: it displays the correct title text', () => {
-                expect($('.ons-featured__title').text().trim()).toBe('Population Insights');
+                expect($('.ons-featured__title').text().trim()).toBe('Economic Trends 2024');
             });
 
             test('THEN: the title has the correct url link', () => {
-                expect($('.ons-featured__title a').attr('href')).toBe('/people/population/insights');
+                expect($('.ons-featured__title a').attr('href')).toBe('/economy/economic-trends-2024');
             });
 
             test('THEN: it renders image with correct src attribute', () => {
-                expect($('.ons-image__img').attr('src')).toBe('example.png');
+                expect($('.ons-featured__media .ons-image__img').attr('src')).toBe('example.png');
             });
 
             test('THEN: it renders image with correct alt text', () => {
-                expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
+                expect($('.ons-featured__media .ons-image__img').attr('alt')).toBe('Example alt text');
             });
         });
 
-        describe('WHEN: both chart and image is provided', () => {
-            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_CHART));
+        describe('WHEN: no caller content is provided', () => {
+            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_PARAMS));
 
-            test('THEN: it renders the onsChart component', () => {
-                expect($('[data-highcharts-base-chart]').length).toBe(1);
-            });
-            test('THEN: it does not render the onsImage component', () => {
-                expect($('.ons-image__img').length).toBe(0);
+            test('THEN: the media area is empty', () => {
+                expect($('.ons-featured__media').html().trim()).toBe('');
             });
         });
     });
 
     describe('GIVEN: Param: metadata', () => {
-        describe('WHEN: chart is provided', () => {
-            const $ = cheerio.load(
-                renderComponent('featured-article', {
-                    ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
-                    metadata: {
-                        date: {
-                            prefix: 'Released',
-                            showPrefix: true,
-                            iso: '2024-05-01',
-                            short: '1 May 2024',
-                        },
-                        text: 'Bulletin',
-                    },
-                }),
-            );
-
-            test('THEN: it renders ISO date value correctly', () => {
-                expect($('time').attr('datetime')).toBe('2024-05-01');
-            });
-
-            test('THEN: it renders short date label correctly', () => {
-                expect($('time').text()).toBe('1 May 2024');
-            });
-
-            test('THEN: it displays metadata text', () => {
-                expect($('.ons-featured__item-attribute span').text()).toContain('Bulletin');
-            });
-        });
-
-        describe('WHEN: image is provided', () => {
+        describe('WHEN: metadata is provided', () => {
             const $ = cheerio.load(
-                renderComponent('featured-article', {
-                    ...EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE,
-                    metadata: {
-                        date: {
-                            prefix: 'Released',
-                            showPrefix: true,
-                            iso: '2024-05-01',
-                            short: '1 May 2024',
+                renderComponent(
+                    'featured-article',
+                    {
+                        ...EXAMPLE_FEATURED_ARTICLE_PARAMS,
+                        metadata: {
+                            date: {
+                                prefix: 'Released',
+                                showPrefix: true,
+                                iso: '2024-05-01',
+                                short: '1 May 2024',
+                            },
+                            text: 'Bulletin',
                         },
-                        text: 'Bulletin',
                     },
-                }),
+                    EXAMPLE_CHART_CALLER_CONTENT,
+                ),
             );
 
             test('THEN: it renders ISO date value correctly', () => {
@@ -133,10 +105,7 @@ describe('Macro: Featured Article', () => {
         });
 
         describe('WHEN: metadata is not provided', () => {
-            const articleWithoutMetadata = {
-                ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
-            };
-            const $ = cheerio.load(renderComponent('featured-article', articleWithoutMetadata));
+            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_PARAMS, EXAMPLE_CHART_CALLER_CONTENT));
 
             test('THEN: metadata section is not rendered', () => {
                 expect($('.ons-featured__item-metadata').length).toBe(0);
@@ -148,7 +117,11 @@ describe('Macro: Featured Article', () => {
         describe('WHEN: description is provided', () => {
             test('THEN: has expected description', () => {
                 const $ = cheerio.load(
-                    renderComponent('featured-article', { ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART, description: 'Some description' }),
+                    renderComponent(
+                        'featured-article',
+                        { ...EXAMPLE_FEATURED_ARTICLE_PARAMS, description: 'Some description' },
+                        EXAMPLE_CHART_CALLER_CONTENT,
+                    ),
                 );
                 const title = $('.ons-featured__description').html().trim();
                 expect(title).toBe('Some description');
@@ -159,10 +132,14 @@ describe('Macro: Featured Article', () => {
     describe('GIVEN: Param: headingLevel', () => {
         describe('WHEN: heading level is provided', () => {
             const $ = cheerio.load(
-                renderComponent('featured-article', {
-                    ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
-                    headingLevel: 3,
-                }),
+                renderComponent(
+                    'featured-article',
+                    {
+                        ...EXAMPLE_FEATURED_ARTICLE_PARAMS,
+                        headingLevel: 3,
+                    },
+                    EXAMPLE_CHART_CALLER_CONTENT,
+                ),
             );
 
             test('THEN: title is rendered using correct heading tag', () => {

package/components/figure/_figure.scss

@@ -0,0 +1,31 @@
+.ons-figure {
+    margin: 0;
+
+    &__number {
+        color: var(--ons-color-text-light);
+        font-size: 1.125rem;
+        font-weight: $font-weight-bold;
+        line-height: 1.3;
+    }
+
+    &__title {
+        font-size: 1.25rem;
+        line-height: 1.6;
+        font-weight: $font-weight-bold;
+        margin-bottom: 0.5rem;
+    }
+
+    &__subtitle {
+        font-size: 1.125rem;
+        line-height: 1.6;
+        font-weight: $font-weight-regular;
+    }
+
+    &__caption {
+        color: var(--ons-color-text-light);
+        font-size: 0.875rem;
+        line-height: 1.7;
+        display: block;
+        margin-bottom: 1.5rem;
+    }
+}

package/components/figure/_macro.njk

@@ -0,0 +1,98 @@
+{% from "components/list/_macro.njk" import onsList %}
+{% from "components/details/_macro.njk" import onsDetails %}
+
+{% macro onsFigure(params) %}
+    {# The heading levels are configurable so the figure slots into the correct place in the
+       document outline, but the title and subtitle always render at the same visual size
+       via the utility font-size classes below. #}
+    {% set headingLevel = params.headingLevel | default(2, true) %}
+    {% set openingTitleTag = '<h' ~ headingLevel ~ ' class="ons-figure__title">' %}
+    {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
+    {% set openingSubtitleTag = '<h' ~ (headingLevel + 1) ~ ' class="ons-figure__subtitle">' %}
+    {% set closingSubtitleTag = "</h" ~ (headingLevel + 1) ~ ">" %}
+    {% if params.title and params.subtitle %}
+        {% set childHeadingLevel = headingLevel + 2 %}
+    {% elif params.title %}
+        {% set childHeadingLevel = headingLevel + 1 %}
+    {% else %}
+        {% set childHeadingLevel = headingLevel %}
+    {% endif %}
+    {% set audioDescriptionId = "figure-audio-description-" ~ params.id %}
+    {% set rootElement = 'div' if params.useDivForRootElement else 'figure' %}
+    {% set openingRootTag = '<' ~ rootElement %}
+    {% if params.audioDescription %}
+        {% set openingRootTag = openingRootTag ~ ' aria-describedby="' ~ audioDescriptionId ~ '"' %}
+    {% endif %}
+    {% set openingRootTag = openingRootTag ~ ' class="ons-figure' ~ (' ' ~ params.classes if params.classes else '') ~ '"' %}
+    {% if params.id %}
+        {% set openingRootTag = openingRootTag ~ ' id="' ~ params.id ~ '"' %}
+    {% endif %}
+    {% set openingRootTag = openingRootTag ~ '>' %}
+    {% set closingRootTag = '</' ~ rootElement ~ '>' %}
+    {% set contentHasTopMargin = true if params.figureNumber or params.title or params.subtitle else false %}
+    {% set contentHasBottomMargin = true if params.caption or params.footnotes or params.download else false %}
+
+    {{ openingRootTag | safe }}
+    {% if params.figureNumber %}
+        <span class="ons-figure__number">{{ params.figureNumber }}</span>
+    {% endif %}
+    {% if params.title %}
+        {{ openingTitleTag | safe }}{{ params.title }}{{ closingTitleTag | safe }}
+    {% endif %}
+    {% if params.subtitle and params.title %}
+        {{ openingSubtitleTag | safe }}{{ params.subtitle }}{{ closingSubtitleTag | safe }}
+    {% endif %}
+
+    {# A visually-hidden description of the nested content for screen reader users. #}
+    {% if params.audioDescription %}
+        <p class="ons-u-vh" id="{{ audioDescriptionId }}">{{ params.audioDescription }}</p>
+    {% endif %}
+
+    <div
+        class="
+                ons-figure__content
+                {% if contentHasTopMargin %}ons-u-mt-l{% endif %}
+                {% if contentHasBottomMargin %}ons-u-mb-l{% endif %}
+            "
+    >
+        {# The nested content appears here #}
+        {{ caller() if caller else '' }}
+    </div>
+
+    {% if params.caption %}
+        {% if rootElement == 'figure' %}
+            <figcaption class="ons-figure__caption">{{ params.caption }}</figcaption>
+        {% else %}
+            <span class="ons-figure__caption">{{ params.caption }}</span>
+        {% endif %}
+    {% endif %}
+    {{ closingRootTag | safe }}
+
+    {% if params.footnotes %}
+        {% set footnotesId = ["figure-footnotes--", params.id] | join %}
+        {{
+            onsDetails({
+                "id": footnotesId,
+                "title": params.footnotes.title,
+                "content": params.footnotes.content,
+                "headingLevel": childHeadingLevel,
+                "classes": "ons-u-mb-l"
+            })
+        }}
+    {% endif %}
+
+    {% if params.download.title and params.download.itemsList | length > 0 %}
+        {% set downloadsId = ["figure-downloads--", params.id] | join %}
+        {{
+            onsDetails({
+                "id": downloadsId,
+                "title": params.download.title,
+                "content": onsList({
+                    "itemsList": params.download.itemsList,
+                    "variants": "bare"
+                }),
+                "headingLevel": childHeadingLevel
+            })
+        }}
+    {% endif %}
+{% endmacro %}