@ons/design-system 62.2.4 → 63.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/access-code/example-access-code-error.njk +1 -1
- package/components/accordion/_macro.njk +1 -1
- package/components/breadcrumbs/_macro.njk +2 -2
- package/components/breadcrumbs/_macro.spec.js +1 -1
- package/components/button/_macro.njk +1 -1
- package/components/button/_macro.spec.js +6 -6
- package/components/card/_macro.njk +1 -1
- package/components/card/_macro.spec.js +1 -1
- package/components/collapsible/_macro.spec.js +1 -1
- package/components/content-pagination/_macro.njk +2 -2
- package/components/content-pagination/_macro.spec.js +2 -2
- package/components/details/_macro.njk +1 -1
- package/components/details/_macro.spec.js +1 -1
- package/components/document-list/_macro.njk +1 -1
- package/components/footer/_macro.njk +2 -2
- package/components/footer/_macro.spec.js +7 -7
- package/components/header/_macro.njk +3 -3
- package/components/header/_macro.spec.js +5 -6
- package/components/{icons → icon}/_macro.spec.js +7 -7
- package/components/{images → image}/_macro.spec.js +13 -13
- package/components/{images/example-images-for-regular-screens.njk → image/example-image-for-regular-screens.njk} +1 -1
- package/components/{images/example-images-for-retina-screens.njk → image/example-image-for-retina-screens.njk} +1 -1
- package/components/{lists → list}/_macro.njk +3 -3
- package/components/{lists → list}/_macro.spec.js +42 -42
- package/components/message/_macro.njk +2 -2
- package/components/message/_macro.spec.js +0 -1
- package/components/metadata/_macro.njk +1 -1
- package/components/navigation/_macro.njk +3 -3
- package/components/pagination/_macro.njk +65 -69
- package/components/pagination/_macro.spec.js +18 -16
- package/components/pagination/example-pagination-first.njk +5 -5
- package/components/pagination/example-pagination-last.njk +5 -5
- package/components/pagination/example-pagination-with-no-range-indicator.njk +11 -11
- package/components/pagination/example-pagination.njk +2 -2
- package/components/panel/_macro.njk +2 -2
- package/components/panel/_macro.spec.js +2 -2
- package/components/panel/example-panel-with-error-summary.njk +1 -1
- package/components/phase-banner/_phase-banner.scss +2 -1
- package/components/question/_macro.njk +1 -1
- package/components/question/_macro.spec.js +1 -1
- package/components/quote/_macro.njk +1 -1
- package/components/quote/_macro.spec.js +1 -1
- package/components/related-content/_macro.njk +1 -1
- package/components/related-content/_macro.spec.js +1 -1
- package/components/related-content/example-related-content-general.njk +1 -1
- package/components/relationships/example-relationships-error.njk +1 -1
- package/components/section-navigation/_macro.njk +2 -2
- package/components/share-page/_macro.njk +1 -1
- package/components/share-page/_macro.spec.js +5 -5
- package/components/summary/_macro.njk +4 -4
- package/components/summary/_macro.spec.js +1 -1
- package/components/table/_macro.njk +3 -3
- package/components/table/_macro.spec.js +1 -1
- package/components/table/example-table-basic.njk +1 -2
- package/components/table-of-contents/_macro.njk +1 -1
- package/components/table-of-contents/_macro.spec.js +2 -2
- package/components/tabs/_macro.njk +2 -2
- package/components/tabs/_macro.spec.js +2 -2
- package/components/timeline/_macro.njk +1 -1
- package/components/timeline/_macro.spec.js +1 -1
- package/css/main.css +3 -3
- package/css/print.css +1 -1
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/main.scss +3 -3
- /package/components/{icons/_icons.scss → icon/_icon.scss} +0 -0
- /package/components/{icons → icon}/_macro.njk +0 -0
- /package/components/{images/_images.scss → image/_image.scss} +0 -0
- /package/components/{images → image}/_macro.njk +0 -0
- /package/components/{lists → list}/_list.scss +0 -0
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
{% from "components/
|
|
1
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
2
2
|
|
|
3
3
|
{% macro onsBreadcrumbs(params) %}
|
|
4
4
|
<nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>
|
|
5
5
|
<ol class="ons-breadcrumb__items ons-u-fs-s">
|
|
6
|
-
{% for item in
|
|
6
|
+
{% for item in params.itemsList %}
|
|
7
7
|
<li class="ons-breadcrumb__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
|
|
8
8
|
<a class="ons-breadcrumb__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
|
|
9
9
|
{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
|
|
@@ -119,7 +119,7 @@ describe('macro: breadcrumbs', () => {
|
|
|
119
119
|
|
|
120
120
|
it('has a "chevron" icon for each breadcrumb item', () => {
|
|
121
121
|
const faker = templateFaker();
|
|
122
|
-
const iconsSpy = faker.spy('
|
|
122
|
+
const iconsSpy = faker.spy('icon');
|
|
123
123
|
|
|
124
124
|
faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
|
|
125
125
|
|
|
@@ -60,7 +60,7 @@ describe('macro: button', () => {
|
|
|
60
60
|
|
|
61
61
|
it('has `download` icon when `variants` contains "download"', () => {
|
|
62
62
|
const faker = templateFaker();
|
|
63
|
-
const iconsSpy = faker.spy('
|
|
63
|
+
const iconsSpy = faker.spy('icon');
|
|
64
64
|
|
|
65
65
|
faker.renderComponent('button', {
|
|
66
66
|
url: 'http://example.com',
|
|
@@ -84,7 +84,7 @@ describe('macro: button', () => {
|
|
|
84
84
|
|
|
85
85
|
it('has `print` icon when `variants` contains "print"', () => {
|
|
86
86
|
const faker = templateFaker();
|
|
87
|
-
const iconsSpy = faker.spy('
|
|
87
|
+
const iconsSpy = faker.spy('icon');
|
|
88
88
|
|
|
89
89
|
faker.renderComponent('button', {
|
|
90
90
|
url: 'http://example.com',
|
|
@@ -108,7 +108,7 @@ describe('macro: button', () => {
|
|
|
108
108
|
|
|
109
109
|
it('has `loader` icon when `variants` contains "loader"', () => {
|
|
110
110
|
const faker = templateFaker();
|
|
111
|
-
const iconsSpy = faker.spy('
|
|
111
|
+
const iconsSpy = faker.spy('icon');
|
|
112
112
|
|
|
113
113
|
faker.renderComponent('button', {
|
|
114
114
|
variants: 'loader',
|
|
@@ -119,7 +119,7 @@ describe('macro: button', () => {
|
|
|
119
119
|
|
|
120
120
|
it('has `chevron` icon when `variants` contains "mobile"', () => {
|
|
121
121
|
const faker = templateFaker();
|
|
122
|
-
const iconsSpy = faker.spy('
|
|
122
|
+
const iconsSpy = faker.spy('icon');
|
|
123
123
|
|
|
124
124
|
faker.renderComponent('button', {
|
|
125
125
|
variants: 'mobile',
|
|
@@ -346,7 +346,7 @@ describe('macro: button', () => {
|
|
|
346
346
|
|
|
347
347
|
it('has `arrow-next` icon by default', () => {
|
|
348
348
|
const faker = templateFaker();
|
|
349
|
-
const iconsSpy = faker.spy('
|
|
349
|
+
const iconsSpy = faker.spy('icon');
|
|
350
350
|
|
|
351
351
|
faker.renderComponent('button', {
|
|
352
352
|
url: 'http://example.com',
|
|
@@ -369,7 +369,7 @@ describe('macro: button', () => {
|
|
|
369
369
|
|
|
370
370
|
it('has `external-link` icon when `newWindow` is `true`', () => {
|
|
371
371
|
const faker = templateFaker();
|
|
372
|
-
const iconsSpy = faker.spy('
|
|
372
|
+
const iconsSpy = faker.spy('icon');
|
|
373
373
|
|
|
374
374
|
faker.renderComponent('button', {
|
|
375
375
|
url: 'http://example.com',
|
|
@@ -87,7 +87,7 @@ describe('macro: card', () => {
|
|
|
87
87
|
|
|
88
88
|
it('renders the provided `itemsList` using the `list` component', () => {
|
|
89
89
|
const faker = templateFaker();
|
|
90
|
-
const listsSpy = faker.spy('
|
|
90
|
+
const listsSpy = faker.spy('list');
|
|
91
91
|
|
|
92
92
|
faker.renderComponent('card', {
|
|
93
93
|
...EXAMPLE_CARD_WITHOUT_IMAGE,
|
|
@@ -134,7 +134,7 @@ describe('macro: collapsible', () => {
|
|
|
134
134
|
|
|
135
135
|
it('has `chevron` icon', () => {
|
|
136
136
|
const faker = templateFaker();
|
|
137
|
-
const iconsSpy = faker.spy('
|
|
137
|
+
const iconsSpy = faker.spy('icon');
|
|
138
138
|
faker.renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC);
|
|
139
139
|
|
|
140
140
|
expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<a href="{{ contentPaginationItem.url }}" class="ons-content-pagination__link" rel="{{ contentPaginationItem.rel }}">
|
|
7
7
|
<span class="ons-content-pagination__link-title">
|
|
8
8
|
{% if contentPaginationItem.rel == 'prev' %}
|
|
9
|
-
{% from "components/
|
|
9
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
10
10
|
{{
|
|
11
11
|
onsIcon({
|
|
12
12
|
"iconType": 'arrow-previous',
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
})
|
|
15
15
|
}}
|
|
16
16
|
{% else %}
|
|
17
|
-
{% from "components/
|
|
17
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
18
18
|
{{
|
|
19
19
|
onsIcon({
|
|
20
20
|
"iconType": 'arrow-next',
|
|
@@ -81,7 +81,7 @@ describe('macro: content-pagination', () => {
|
|
|
81
81
|
|
|
82
82
|
it('renders the `arrow-previous` icon for the previous link entry', () => {
|
|
83
83
|
const faker = templateFaker();
|
|
84
|
-
const iconsSpy = faker.spy('
|
|
84
|
+
const iconsSpy = faker.spy('icon');
|
|
85
85
|
|
|
86
86
|
faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_PREV_ONLY);
|
|
87
87
|
|
|
@@ -91,7 +91,7 @@ describe('macro: content-pagination', () => {
|
|
|
91
91
|
|
|
92
92
|
it('renders the `arrow-next` icon for the next link entry', () => {
|
|
93
93
|
const faker = templateFaker();
|
|
94
|
-
const iconsSpy = faker.spy('
|
|
94
|
+
const iconsSpy = faker.spy('icon');
|
|
95
95
|
|
|
96
96
|
faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NEXT_ONLY);
|
|
97
97
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
{% set titleTag = params.titleTag | default("h2") %}
|
|
15
15
|
<{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
|
|
16
16
|
<span class="ons-details__icon">
|
|
17
|
-
{% from "components/
|
|
17
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
18
18
|
{{
|
|
19
19
|
onsIcon({
|
|
20
20
|
"iconType": "chevron"
|
|
@@ -134,7 +134,7 @@ describe('macro: details', () => {
|
|
|
134
134
|
|
|
135
135
|
it('has `chevron` icon', () => {
|
|
136
136
|
const faker = templateFaker();
|
|
137
|
-
const iconsSpy = faker.spy('
|
|
137
|
+
const iconsSpy = faker.spy('icon');
|
|
138
138
|
faker.renderComponent('details', EXAMPLE_DETAILS_BASIC);
|
|
139
139
|
|
|
140
140
|
expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{% macro onsDocumentList(params) %}
|
|
2
2
|
<ul{% if params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
|
|
3
|
-
{% for document in
|
|
3
|
+
{% for document in params.documents %}
|
|
4
4
|
|
|
5
5
|
<li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
|
|
6
6
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{% macro onsFooter(params) %}
|
|
2
2
|
|
|
3
|
-
{% from "components/
|
|
4
|
-
{% from "components/
|
|
3
|
+
{% from "components/list/_macro.njk" import onsList %}
|
|
4
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
5
5
|
|
|
6
6
|
{% if params.lang %}
|
|
7
7
|
{% set lang = params.lang %}
|
|
@@ -137,7 +137,7 @@ describe('macro: footer', () => {
|
|
|
137
137
|
|
|
138
138
|
it('renders OGL icon', () => {
|
|
139
139
|
const faker = templateFaker();
|
|
140
|
-
const iconsSpy = faker.spy('
|
|
140
|
+
const iconsSpy = faker.spy('icon');
|
|
141
141
|
|
|
142
142
|
faker.renderComponent('footer', params);
|
|
143
143
|
|
|
@@ -284,7 +284,7 @@ describe('macro: footer', () => {
|
|
|
284
284
|
|
|
285
285
|
it('renders expected lists using list component', () => {
|
|
286
286
|
const faker = templateFaker();
|
|
287
|
-
const listsSpy = faker.spy('
|
|
287
|
+
const listsSpy = faker.spy('list');
|
|
288
288
|
|
|
289
289
|
faker.renderComponent('footer', params);
|
|
290
290
|
|
|
@@ -312,7 +312,7 @@ describe('macro: footer', () => {
|
|
|
312
312
|
|
|
313
313
|
it('renders expected lists using list component', () => {
|
|
314
314
|
const faker = templateFaker();
|
|
315
|
-
const listsSpy = faker.spy('
|
|
315
|
+
const listsSpy = faker.spy('list');
|
|
316
316
|
|
|
317
317
|
faker.renderComponent('footer', params);
|
|
318
318
|
|
|
@@ -340,7 +340,7 @@ describe('macro: footer', () => {
|
|
|
340
340
|
|
|
341
341
|
it('renders expected lists using list component', () => {
|
|
342
342
|
const faker = templateFaker();
|
|
343
|
-
const listsSpy = faker.spy('
|
|
343
|
+
const listsSpy = faker.spy('list');
|
|
344
344
|
|
|
345
345
|
faker.renderComponent('footer', params);
|
|
346
346
|
|
|
@@ -379,7 +379,7 @@ describe('macro: footer', () => {
|
|
|
379
379
|
};
|
|
380
380
|
it('renders the expected icon', () => {
|
|
381
381
|
const faker = templateFaker();
|
|
382
|
-
const iconsSpy = faker.spy('
|
|
382
|
+
const iconsSpy = faker.spy('icon');
|
|
383
383
|
|
|
384
384
|
faker.renderComponent('footer', params);
|
|
385
385
|
|
|
@@ -403,7 +403,7 @@ describe('macro: footer', () => {
|
|
|
403
403
|
};
|
|
404
404
|
it('renders the expected icon', () => {
|
|
405
405
|
const faker = templateFaker();
|
|
406
|
-
const iconsSpy = faker.spy('
|
|
406
|
+
const iconsSpy = faker.spy('icon');
|
|
407
407
|
|
|
408
408
|
faker.renderComponent('footer', params);
|
|
409
409
|
|
|
@@ -544,7 +544,7 @@ describe('macro: footer', () => {
|
|
|
544
544
|
|
|
545
545
|
it('renders crest icon when `crest` parameter is provided', () => {
|
|
546
546
|
const faker = templateFaker();
|
|
547
|
-
const iconsSpy = faker.spy('
|
|
547
|
+
const iconsSpy = faker.spy('icon');
|
|
548
548
|
|
|
549
549
|
faker.renderComponent('footer', params);
|
|
550
550
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{% macro onsHeader(params) %}
|
|
2
2
|
{% from "components/button/_macro.njk" import onsButton %}
|
|
3
|
-
{% from "components/
|
|
3
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
4
4
|
{% from "components/navigation/_macro.njk" import onsNavigation %}
|
|
5
5
|
{% from "components/browser-banner/_macro.njk" import onsBrowserBanner %}
|
|
6
6
|
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
|
|
89
89
|
<nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
|
|
90
90
|
<ul class="ons-header-service-nav__list">
|
|
91
|
-
{% for item in
|
|
91
|
+
{% for item in params.serviceLinks.itemsList %}
|
|
92
92
|
<li class="ons-header-service-nav__item">
|
|
93
93
|
{% if item.iconType %}
|
|
94
94
|
{{
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
{% if params.serviceLinks %}
|
|
140
140
|
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
|
|
141
141
|
<ul class="ons-header-service-nav__list">
|
|
142
|
-
{% for item in
|
|
142
|
+
{% for item in params.serviceLinks.itemsList %}
|
|
143
143
|
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
|
|
144
144
|
{% if item.iconType %}
|
|
145
145
|
{{
|
|
@@ -214,7 +214,7 @@ describe('macro: header', () => {
|
|
|
214
214
|
|
|
215
215
|
it('has the default masthead logo icon', () => {
|
|
216
216
|
const faker = templateFaker();
|
|
217
|
-
const iconsSpy = faker.spy('
|
|
217
|
+
const iconsSpy = faker.spy('icon');
|
|
218
218
|
|
|
219
219
|
faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
|
|
220
220
|
|
|
@@ -223,7 +223,7 @@ describe('macro: header', () => {
|
|
|
223
223
|
|
|
224
224
|
it('has the default masthead mobile logo icon', () => {
|
|
225
225
|
const faker = templateFaker();
|
|
226
|
-
const iconsSpy = faker.spy('
|
|
226
|
+
const iconsSpy = faker.spy('icon');
|
|
227
227
|
|
|
228
228
|
faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
|
|
229
229
|
|
|
@@ -232,7 +232,7 @@ describe('macro: header', () => {
|
|
|
232
232
|
|
|
233
233
|
it('has the default masthead logo icon alt text', () => {
|
|
234
234
|
const faker = templateFaker();
|
|
235
|
-
const iconsSpy = faker.spy('
|
|
235
|
+
const iconsSpy = faker.spy('icon');
|
|
236
236
|
|
|
237
237
|
faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
|
|
238
238
|
|
|
@@ -241,7 +241,7 @@ describe('macro: header', () => {
|
|
|
241
241
|
|
|
242
242
|
it('has the default masthead mobile logo icon alt text', () => {
|
|
243
243
|
const faker = templateFaker();
|
|
244
|
-
const iconsSpy = faker.spy('
|
|
244
|
+
const iconsSpy = faker.spy('icon');
|
|
245
245
|
|
|
246
246
|
faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
|
|
247
247
|
|
|
@@ -549,7 +549,7 @@ describe('macro: header', () => {
|
|
|
549
549
|
|
|
550
550
|
it('has the correct list item icon', () => {
|
|
551
551
|
const faker = templateFaker();
|
|
552
|
-
const iconsSpy = faker.spy('
|
|
552
|
+
const iconsSpy = faker.spy('icon');
|
|
553
553
|
|
|
554
554
|
faker.renderComponent('header', {
|
|
555
555
|
...EXAMPLE_HEADER_BASIC,
|
|
@@ -736,7 +736,6 @@ describe('macro: header', () => {
|
|
|
736
736
|
...EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG,
|
|
737
737
|
}),
|
|
738
738
|
);
|
|
739
|
-
console.log($.html());
|
|
740
739
|
|
|
741
740
|
const subNavContainer = $('.ons-navigation--sub .ons-container');
|
|
742
741
|
expect($(subNavContainer).hasClass('ons-container--full-width')).toBe(true);
|
|
@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
|
|
|
5
5
|
import axe from '../../tests/helpers/axe';
|
|
6
6
|
import { renderComponent } from '../../tests/helpers/rendering';
|
|
7
7
|
|
|
8
|
-
describe('macro:
|
|
8
|
+
describe('macro: icon', () => {
|
|
9
9
|
describe.each([
|
|
10
10
|
'arrow-forward',
|
|
11
11
|
'arrow-next',
|
|
@@ -35,21 +35,21 @@ describe('macro: icons', () => {
|
|
|
35
35
|
'circle-lined',
|
|
36
36
|
])('icon type: %s', iconType => {
|
|
37
37
|
it('passes jest-axe checks', async () => {
|
|
38
|
-
const $ = cheerio.load(renderComponent('
|
|
38
|
+
const $ = cheerio.load(renderComponent('icon', { iconType }));
|
|
39
39
|
|
|
40
40
|
const results = await axe($.html());
|
|
41
41
|
expect(results).toHaveNoViolations();
|
|
42
42
|
});
|
|
43
43
|
|
|
44
44
|
it('has an svg element', () => {
|
|
45
|
-
const $ = cheerio.load(renderComponent('
|
|
45
|
+
const $ = cheerio.load(renderComponent('icon', { iconType }));
|
|
46
46
|
|
|
47
47
|
expect($('svg').length).toBe(1);
|
|
48
48
|
});
|
|
49
49
|
|
|
50
50
|
it('has additionally provided style classes', () => {
|
|
51
51
|
const $ = cheerio.load(
|
|
52
|
-
renderComponent('
|
|
52
|
+
renderComponent('icon', {
|
|
53
53
|
iconType,
|
|
54
54
|
classes: 'extra-class another-extra-class',
|
|
55
55
|
}),
|
|
@@ -80,7 +80,7 @@ describe('macro: icons', () => {
|
|
|
80
80
|
])('icon type: %s', iconType => {
|
|
81
81
|
it('has style variation class for provided icon size', () => {
|
|
82
82
|
const $ = cheerio.load(
|
|
83
|
-
renderComponent('
|
|
83
|
+
renderComponent('icon', {
|
|
84
84
|
iconType,
|
|
85
85
|
iconSize: 'xxl',
|
|
86
86
|
}),
|
|
@@ -99,7 +99,7 @@ describe('macro: icons', () => {
|
|
|
99
99
|
['ogl', 'Open Government License logo'],
|
|
100
100
|
])('icon type: %s', (iconType, expectedAltText) => {
|
|
101
101
|
it(`has default alt text '${expectedAltText}'`, () => {
|
|
102
|
-
const $ = cheerio.load(renderComponent('
|
|
102
|
+
const $ = cheerio.load(renderComponent('icon', { iconType }));
|
|
103
103
|
|
|
104
104
|
expect(
|
|
105
105
|
$('title')
|
|
@@ -110,7 +110,7 @@ describe('macro: icons', () => {
|
|
|
110
110
|
|
|
111
111
|
it('has provided alt text', () => {
|
|
112
112
|
const $ = cheerio.load(
|
|
113
|
-
renderComponent('
|
|
113
|
+
renderComponent('icon', {
|
|
114
114
|
iconType,
|
|
115
115
|
altText: 'Example alt text',
|
|
116
116
|
}),
|
|
@@ -16,16 +16,16 @@ const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
|
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
describe('macro:
|
|
19
|
+
describe('macro: image', () => {
|
|
20
20
|
it('outputs a `figure` element', () => {
|
|
21
|
-
const $ = cheerio.load(renderComponent('
|
|
21
|
+
const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
|
|
22
22
|
|
|
23
23
|
expect($('.ons-figure')[0].tagName).toBe('figure');
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
it('outputs a `figurecaption` element when `caption` is provided', () => {
|
|
27
27
|
const $ = cheerio.load(
|
|
28
|
-
renderComponent('
|
|
28
|
+
renderComponent('image', {
|
|
29
29
|
...EXAMPLE_IMAGE_URL_MINIMAL,
|
|
30
30
|
caption: 'Example image caption',
|
|
31
31
|
}),
|
|
@@ -36,7 +36,7 @@ describe('macro: images', () => {
|
|
|
36
36
|
|
|
37
37
|
it('outputs a `figurecaption` element with provided `caption` text', () => {
|
|
38
38
|
const $ = cheerio.load(
|
|
39
|
-
renderComponent('
|
|
39
|
+
renderComponent('image', {
|
|
40
40
|
...EXAMPLE_IMAGE_URL_MINIMAL,
|
|
41
41
|
caption: 'Example image caption',
|
|
42
42
|
}),
|
|
@@ -51,27 +51,27 @@ describe('macro: images', () => {
|
|
|
51
51
|
|
|
52
52
|
describe('mode: url', () => {
|
|
53
53
|
it('passes jest-axe checks', async () => {
|
|
54
|
-
const $ = cheerio.load(renderComponent('
|
|
54
|
+
const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
|
|
55
55
|
|
|
56
56
|
const results = await axe($.html());
|
|
57
57
|
expect(results).toHaveNoViolations();
|
|
58
58
|
});
|
|
59
59
|
|
|
60
60
|
it('outputs an `img` element', () => {
|
|
61
|
-
const $ = cheerio.load(renderComponent('
|
|
61
|
+
const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
|
|
62
62
|
|
|
63
63
|
expect($('.ons-figure__image')[0].tagName).toBe('img');
|
|
64
64
|
});
|
|
65
65
|
|
|
66
66
|
it('outputs an `img` element with the expected `src`', () => {
|
|
67
|
-
const $ = cheerio.load(renderComponent('
|
|
67
|
+
const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
|
|
68
68
|
|
|
69
69
|
expect($('.ons-figure__image').attr('src')).toBe('example.png');
|
|
70
70
|
});
|
|
71
71
|
|
|
72
72
|
it('outputs an `img` element with the expected alt text', () => {
|
|
73
73
|
const $ = cheerio.load(
|
|
74
|
-
renderComponent('
|
|
74
|
+
renderComponent('image', {
|
|
75
75
|
...EXAMPLE_IMAGE_URL_MINIMAL,
|
|
76
76
|
alt: 'Example alt text',
|
|
77
77
|
}),
|
|
@@ -83,33 +83,33 @@ describe('macro: images', () => {
|
|
|
83
83
|
|
|
84
84
|
describe('mode: image', () => {
|
|
85
85
|
it('passes jest-axe checks', async () => {
|
|
86
|
-
const $ = cheerio.load(renderComponent('
|
|
86
|
+
const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
|
|
87
87
|
|
|
88
88
|
const results = await axe($.html());
|
|
89
89
|
expect(results).toHaveNoViolations();
|
|
90
90
|
});
|
|
91
91
|
|
|
92
92
|
it('outputs an `img` element', () => {
|
|
93
|
-
const $ = cheerio.load(renderComponent('
|
|
93
|
+
const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
|
|
94
94
|
|
|
95
95
|
expect($('.ons-figure__image')[0].tagName).toBe('img');
|
|
96
96
|
});
|
|
97
97
|
|
|
98
98
|
it('outputs an `img` element with the expected `srcset`', () => {
|
|
99
|
-
const $ = cheerio.load(renderComponent('
|
|
99
|
+
const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
|
|
100
100
|
|
|
101
101
|
expect($('.ons-figure__image').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
|
|
102
102
|
});
|
|
103
103
|
|
|
104
104
|
it('outputs an `img` element with the expected `src`', () => {
|
|
105
|
-
const $ = cheerio.load(renderComponent('
|
|
105
|
+
const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
|
|
106
106
|
|
|
107
107
|
expect($('.ons-figure__image').attr('src')).toBe('example-small.png');
|
|
108
108
|
});
|
|
109
109
|
|
|
110
110
|
it('outputs an `img` element with the expected alt text', () => {
|
|
111
111
|
const $ = cheerio.load(
|
|
112
|
-
renderComponent('
|
|
112
|
+
renderComponent('image', {
|
|
113
113
|
...EXAMPLE_IMAGE_IMAGE_MINIMAL,
|
|
114
114
|
alt: 'Example alt text',
|
|
115
115
|
}),
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
{% set listEl = 'ul' %}
|
|
22
22
|
{% endif %}
|
|
23
23
|
<{{listEl}} {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes %} {{ params.classes -}}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
|
|
24
|
-
{%- for item in
|
|
24
|
+
{%- for item in params.itemsList -%}
|
|
25
25
|
{% if listLength > 1 or listEl == 'ul' %}
|
|
26
26
|
<li class="ons-list__item{% if item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current %} aria-current="true"{% endif %}>
|
|
27
27
|
{% endif %}
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
{%- if item.prefix -%}
|
|
41
41
|
{{- item.prefix -}}.
|
|
42
42
|
{% elif params.iconPosition == 'before' %}
|
|
43
|
-
{% from "components/
|
|
43
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
44
44
|
{{
|
|
45
45
|
onsIcon({
|
|
46
46
|
"iconType": itemIconType,
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
{%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
|
|
76
76
|
{{- loop.index -}}
|
|
77
77
|
{% elif params.iconPosition == 'after' %}
|
|
78
|
-
{% from "components/
|
|
78
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
79
79
|
{{
|
|
80
80
|
onsIcon({
|
|
81
81
|
"iconType": itemIconType,
|