@ons/design-system 72.10.9 → 72.11.0

package/README.md

@@ -14,26 +14,30 @@ Nunjucks macros for components and templates are available from npm. Built CSS a
 yarn add @ons/design-system
 ```
 
-## Run Locally
+## Running the DS Locally
 
-You'll need [Git](https://help.github.com/articles/set-up-git/), [Node.js](https://nodejs.org/en/), and [Yarn](https://yarnpkg.com/en/docs/getting-started) to run this project locally.
+You'll need to install:
+
+-   [Git](https://help.github.com/articles/set-up-git/)
+-   [Node.js](https://nodejs.org/en/)
+-   [Yarn](https://yarnpkg.com/en/docs/getting-started) (When installing yarn be sure to install yarn through brew using `brew install yarn` not using npm)
 
 The version of node required is outlined in [.nvmrc](./.nvmrc).
 
-### Using nvm (optional)
+### Using NVM
 
 If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.
 
 To enable this we use [nvm (Node Version Manager)](https://github.com/creationix/nvm) to switch between versions easily.
 
 1. [install nvm](https://github.com/creationix/nvm#installation)
-2. Run nvm install in the project directory (this will use .nvmrc)
+2. Run `nvm install` in the project directory (this will use .nvmrc)
 
 ### Install dependencies
 
 ```bash
 yarn install
-yarn husky install
+yarn husky
 ```
 
 ### Start a local server

package/components/announcement-banner/_announcement-banner.scss

@@ -0,0 +1,24 @@
+.ons-announcement-banner {
+    color: var(--ons-color-text-inverse);
+    padding: 1rem;
+    &--black {
+        background-color: var(--ons-color-gov-black);
+    }
+
+    &--teal {
+        background-color: var(--ons-color-gov-teal);
+    }
+
+    &--red {
+        background-color: var(--ons-color-gov-red);
+    }
+
+    &__link {
+        color: var(--ons-color-text-inverse);
+
+        &:hover {
+            color: var(--ons-color-text-inverse);
+            text-decoration: underline solid var(--ons-color-text-inverse) 2px;
+        }
+    }
+}

package/components/announcement-banner/_macro.njk

@@ -0,0 +1,33 @@
+{% macro onsAnnouncementBanner(params) %}
+
+    {% if params.variants %}
+        {% if 'wide' in params.variants %}
+            {% set width = "wide" %}
+        {% endif %}
+    {% endif %}
+
+    {% set content %}
+        <div
+            class="ons-announcement-banner{% if params.variants %}{% if params.variants == 'wide' or params.variants | length == 1 and 'wide' in params.variants %}{{ ' ' }}ons-announcement-banner--black{% elif params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-announcement-banner--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-announcement-banner--{{ params.variants }}{% endif %}{% else %}{{ ' ' }}ons-announcement-banner--black{% endif %}"
+        >
+            <h2 class="ons-announcement-banner__title">{{ params.title }}</h2>
+            <p class="ons-announcement-banner__description">{{ params.description }}</p>
+            <a
+                class="ons-announcement-banner__link"
+                {% if params.link.attributes %}{% for attribute, value in (params.link.attributes.items() if params.link.attributes is mapping and params.link.attributes.items else params.link.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                href="{{ params.link.url }}"
+                >{{ params.link.text }}</a
+            >
+        </div>
+    {% endset %}
+
+    {% if width != "wide" %}
+        <div
+            class="ons-announcement-banner__container{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-announcement-banner--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-announcement-banner--{{ params.variants }}{% endif %}{% else %}{{ ' ' }}ons-announcement-banner--black{% endif %}"
+        >
+            <div class="ons-container">{{ content | safe }}</div>
+        </div>
+    {% else %}
+        {{ content | safe }}
+    {% endif %}
+{% endmacro %}

package/components/announcement-banner/_macro.spec.js

@@ -0,0 +1,106 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+import { EXAMPLE_FULL_ANNOUNCEMENT_BANNER, EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER } from './_test_examples';
+
+describe('FOR: Macro: Announcement-banner', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('announcement-banner', EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: the title has the provided text', async () => {
+                const title = $('.ons-announcement-banner__title');
+                expect(title.text().trim()).toBe('This is a black banner');
+            });
+
+            test('THEN: the description has the provided text', async () => {
+                const description = $('.ons-announcement-banner__description');
+                expect(description.text().trim()).toBe('This is a description for the black banner');
+            });
+
+            test('THEN: the link points to the provided URL', async () => {
+                const linkUrl = $('.ons-announcement-banner__link');
+                expect(linkUrl.attr('href')).toBe('http://example.com');
+            });
+
+            test('THEN: the link has the provided link text', async () => {
+                const linkText = $('.ons-announcement-banner__link');
+                expect(linkText.text().trim()).toBe('Find out more');
+            });
+
+            test('THEN: it defaults to the black variant', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--black')).toBe(true);
+            });
+
+            test('THEN: containers are created', () => {
+                expect($('.ons-announcement-banner--black > .ons-container').length).toBe(1);
+            });
+        });
+    });
+
+    describe('GIVEN: Params: link attributes', () => {
+        const $ = cheerio.load(renderComponent('announcement-banner', EXAMPLE_FULL_ANNOUNCEMENT_BANNER));
+        describe('WHEN: link attributes are provided', () => {
+            test('THEN: the link has the provided attributes', async () => {
+                const link = $('.ons-announcement-banner__link');
+                expect(link.attr('abc')).toBe('123');
+                expect(link.attr('def')).toBe('456');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: variants', () => {
+        describe('WHEN: variants is provided as a string', () => {
+            const $ = cheerio.load(renderComponent('announcement-banner', EXAMPLE_FULL_ANNOUNCEMENT_BANNER));
+            test('THEN: the banner has the correct variant class', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--red')).toBe(true);
+            });
+        });
+        describe('WHEN: wide is provided as one of the variants', () => {
+            const $ = cheerio.load(
+                renderComponent('announcement-banner', { ...EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER, variants: ['wide', 'red'] }),
+            );
+            test('THEN: containers are not created with the correct classes', () => {
+                expect($('.ons-announcement-banner--red > .ons-container').length).toBe(0);
+            });
+        });
+        describe('WHEN: red is provided alongside other variants', () => {
+            const $ = cheerio.load(
+                renderComponent('announcement-banner', { ...EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER, variants: ['wide', 'red'] }),
+            );
+            test('THEN: the banner has the correct variant class', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--red')).toBe(true);
+            });
+        });
+        describe('WHEN: wide is provided as the only variant as a string', () => {
+            const $ = cheerio.load(renderComponent('announcement-banner', { ...EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER, variants: 'wide' }));
+            test('THEN: it defaults to the black variant', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--black')).toBe(true);
+            });
+            test('THEN: containers are not created with the correct classes', () => {
+                expect($('.ons-announcement-banner--black > .ons-container').length).toBe(0);
+            });
+        });
+        describe('WHEN: wide is provided as the only variant in an array', () => {
+            const $ = cheerio.load(renderComponent('announcement-banner', { ...EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER, variants: ['wide'] }));
+            test('THEN: it defaults to the black variant', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--black')).toBe(true);
+            });
+            test('THEN: containers are not created with the correct classes', () => {
+                expect($('.ons-announcement-banner--black > .ons-container').length).toBe(0);
+            });
+        });
+    });
+});

package/components/announcement-banner/_test_examples.js

@@ -0,0 +1,22 @@
+export const EXAMPLE_FULL_ANNOUNCEMENT_BANNER = {
+    variants: 'red',
+    title: 'This is a red banner',
+    description: 'This is a description for the red banner',
+    link: {
+        text: 'Find out more',
+        url: 'http://example.com',
+        attributes: {
+            abc: '123',
+            def: '456',
+        },
+    },
+};
+
+export const EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER = {
+    title: 'This is a black banner',
+    description: 'This is a description for the black banner',
+    link: {
+        text: 'Find out more',
+        url: 'http://example.com',
+    },
+};

package/components/announcement-banner/example-banner-black.njk

@@ -0,0 +1,12 @@
+{% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
+
+{{
+    onsAnnouncementBanner({
+        "title": 'His Royal Highness Henry VIII',
+        "description": '1491 to 1547',
+        "link": {
+            "text": 'Find out more',
+            "url": '#0'
+        }
+    })
+}}

package/components/announcement-banner/example-banner-red.njk

@@ -0,0 +1,13 @@
+{% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
+
+{{
+    onsAnnouncementBanner({
+        "variants": ['red', 'wide'],
+        "title": 'National emergency',
+        "description": 'This is a level 1 incident',
+        "link": {
+            "text": 'More information',
+            "url": '#0'
+        }
+    })
+}}

package/components/announcement-banner/example-banner-teal.njk

@@ -0,0 +1,13 @@
+{% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
+
+{{
+    onsAnnouncementBanner({
+        "variants": 'teal',
+        "title": 'Local emergency',
+        "description": 'This is a level 2 incident',
+        "link": {
+            "text": 'More information',
+            "url": '#0'
+        }
+    })
+}}

package/components/button/_button.scss

@@ -99,7 +99,7 @@ $button-shadow-size: 3px;
         }
     }
 
-    // When preceded by another button (for example, in a group)
+    // When preceded by another button (for example in a group)
     & + & {
         margin-left: 0.5rem;
     }
@@ -576,6 +576,34 @@ $button-shadow-size: 3px;
         }
     }
 
+    .ons-navigation--neutral &--dropdown {
+        .ons-btn__inner {
+            background: var(--ons-color-grey-15);
+            color: var(--ons-color-black);
+            .ons-icon {
+                fill: var(--ons-color-black);
+            }
+        }
+        &:focus {
+            .ons-btn__inner {
+                background: var(--ons-color-focus);
+            }
+        }
+    }
+
+    .ons-navigation--neutral &--dropdown:active &,
+    .ons-navigation--neutral &--dropdown.active &,
+    .ons-navigation--neutral &--dropdown:active:focus &,
+    .ons-navigation--neutral &--dropdown.active:focus & {
+        &__inner {
+            background: var(--ons-color-grey-100);
+            color: var(--ons-color-white);
+            .ons-icon {
+                fill: var(--ons-color-white);
+            }
+        }
+    }
+
     &--neutral &,
     &--neutral:hover &,
     &--neutral:active &,

package/components/chart/_chart.scss

@@ -126,6 +126,7 @@
 
     &__iframe {
         width: 100%;
+        aspect-ratio: 16 / 9; // Default aspect ratio
 
         @media (scripting: none) {
             // Approximately matches the aspect ratio of the fallback image inside the iframe
@@ -140,6 +141,8 @@
     }
 }
 
+@include iframe-aspect-ratio('ons-chart__iframe--{x}');
+
 // This is a workaround to position the axis title to the left
 .highcharts-axis-title {
     width: 100%;

package/components/chart/_macro.njk

@@ -7,6 +7,7 @@
     {% set supportedChartTypesWithScatter = ['columnrange'] %}
     {% set supportedChartTypesWithXAxisMinAndMax = ['scatter'] %}
     {% set supportedChartTypesWithYAxisMinAndMax = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
+    {% set supportedAspectRatios = ['16-9', '4-3', '21-9', '1-1', '3-2', '9-16'] %}
     {% set headingLevel = params.headingLevel | default(2) %}
     {% set openingTitleTag = "<h" ~ headingLevel %}
     {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
@@ -16,6 +17,7 @@
     {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
     {% set audioDescriptionId = "chart-audio-description-" ~ params.id %}
     {% set instructionsId = "chart-instructions-" ~ params.id %}
+    {% set iframeAspectRatio = params.iframeAspectRatio if params.iframeAspectRatio in supportedAspectRatios else '16-9' %}
     {% set instructions = params.instructions | default('Use the Tab key to move focus into the chart. Once inside, use the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point. Touch device users, explore by touch or with swipe gestures.') %}
 
     <div
@@ -65,10 +67,14 @@
                 <div
                     class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
                     id="{{ params.id }}"
-                    data-url="{{ params.iframeUrl }}"
-                    data-title="{{ params.title }}"
                 >
-                    <iframe src="{{ params.iframeUrl }}" title="{{ params.title }}" class="ons-chart__iframe"></iframe>
+                    <iframe
+                        src="{{ params.iframeUrl }}"
+                        title="{{ params.title }}"
+                        class="ons-chart__iframe ons-chart__iframe--{{ iframeAspectRatio }}"
+                        frameborder="0"
+                        scrolling="no"
+                    ></iframe>
                 </div>
             {% else %}
                 {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
@@ -250,7 +256,7 @@
                 }
             %}
 
-            <!-- Set scripts to pass the config values as json to the javascript -->
+            <!-- Set scripts to pass the config values as json to the JavaScript -->
             <!-- prettier-ignore-start -->
             <script type="application/json" data-highcharts-config--{{ params.id }}>
                 {{ config | tojson }}