@ons/design-system 70.0.14 → 70.0.16
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/address-input/autosuggest.address.spec.js +2 -0
- package/components/browser-banner/_macro.spec.js +92 -93
- package/components/header/_macro.spec.js +1 -1
- package/components/list/_list.scss +2 -0
- package/components/list/_macro.njk +2 -1
- package/components/list/example-summary-list.njk +3 -1
- package/components/summary/_summary.scss +1 -4
- package/css/main.css +1 -1
- package/package.json +1 -1
- package/components/header/_test_examples.js +0 -157
|
@@ -602,6 +602,8 @@ describe('script: address-input', () => {
|
|
|
602
602
|
beforeEach(async () => {
|
|
603
603
|
await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
|
|
604
604
|
await page.evaluate(() => document.documentElement.setAttribute('lang', 'cy'));
|
|
605
|
+
|
|
606
|
+
await setTimeout(50);
|
|
605
607
|
});
|
|
606
608
|
|
|
607
609
|
it('then the fetch url should contain the favour Welsh parameter', async () => {
|
|
@@ -5,102 +5,101 @@ import * as cheerio from 'cheerio';
|
|
|
5
5
|
import axe from '../../tests/helpers/axe';
|
|
6
6
|
import { renderComponent } from '../../tests/helpers/rendering';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
describe('
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
8
|
+
describe('FOR: browser-banner', () => {
|
|
9
|
+
describe('GIVEN: Params: default', () => {
|
|
10
|
+
describe('WHEN: params are at default state', () => {
|
|
11
|
+
const $ = cheerio.load(renderComponent('browser-banner', {}));
|
|
12
|
+
|
|
13
|
+
it('THEN: passes jest-axe checks', async () => {
|
|
14
|
+
const results = await axe($.html());
|
|
15
|
+
expect(results).toHaveNoViolations();
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
it('THEN: has the english default bannerLeadingText', () => {
|
|
19
|
+
const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
|
|
20
|
+
expect(bannerLeadingText).toBe('This website no longer supports your browser.');
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('THEN: has the english default bannerCTA', () => {
|
|
24
|
+
const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
|
|
25
|
+
expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
it('THEN: has the english default bannerLinkUrl', () => {
|
|
29
|
+
expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
describe('WHEN: params are at default and language is set to welsh', () => {
|
|
34
|
+
const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
|
|
35
|
+
|
|
36
|
+
it('THEN: has the welsh default bannerLeadingText', () => {
|
|
37
|
+
const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
|
|
38
|
+
expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
it('THEN: has the welsh default bannerCTA', () => {
|
|
42
|
+
const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
|
|
43
|
+
expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
it('THEN: has the welsh default bannerLinkUrl', () => {
|
|
47
|
+
expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
|
|
48
|
+
});
|
|
49
|
+
});
|
|
47
50
|
});
|
|
48
51
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}),
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
|
|
52
|
+
describe('GIVEN: Params: wide', () => {
|
|
53
|
+
describe('WHEN: wide is set to true', () => {
|
|
54
|
+
it('THEN: has container--wide class', () => {
|
|
55
|
+
const $ = cheerio.load(
|
|
56
|
+
renderComponent('browser-banner', {
|
|
57
|
+
...{},
|
|
58
|
+
wide: true,
|
|
59
|
+
}),
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
|
|
63
|
+
});
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
describe('WHEN: wide is not set', () => {
|
|
67
|
+
it('THEN: does not have container--wide class', () => {
|
|
68
|
+
const $ = cheerio.load(
|
|
69
|
+
renderComponent('browser-banner', {
|
|
70
|
+
...{},
|
|
71
|
+
}),
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
|
|
75
|
+
});
|
|
76
|
+
});
|
|
78
77
|
});
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
describe('mode: Welsh language', () => {
|
|
82
|
-
it('has the welsh version of default `bannerLeadingText`', () => {
|
|
83
|
-
const $ = cheerio.load(
|
|
84
|
-
renderComponent('browser-banner', {
|
|
85
|
-
...EXAMPLE_BROWSER_BANNER_DEFAULT,
|
|
86
|
-
lang: 'cy',
|
|
87
|
-
}),
|
|
88
|
-
);
|
|
89
|
-
|
|
90
|
-
const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
|
|
91
|
-
expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
it('has the welsh version of default `bannerCTA`', () => {
|
|
95
|
-
const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
|
|
96
|
-
|
|
97
|
-
const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
|
|
98
|
-
expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
it('has the welsh version of default `bannerLinkUrl`', () => {
|
|
102
|
-
const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
|
|
103
78
|
|
|
104
|
-
|
|
79
|
+
describe('GIVEN: Params: fullWidth', () => {
|
|
80
|
+
describe('WHEN: fullWidth is set to true', () => {
|
|
81
|
+
it('THEN: has container--full-width class', () => {
|
|
82
|
+
const $ = cheerio.load(
|
|
83
|
+
renderComponent('browser-banner', {
|
|
84
|
+
...{},
|
|
85
|
+
fullWidth: true,
|
|
86
|
+
}),
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
describe('WHEN: fullWidth is not set', () => {
|
|
94
|
+
it('THEN: does not have container--full-width class', () => {
|
|
95
|
+
const $ = cheerio.load(
|
|
96
|
+
renderComponent('browser-banner', {
|
|
97
|
+
...{},
|
|
98
|
+
}),
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
|
|
102
|
+
});
|
|
103
|
+
});
|
|
105
104
|
});
|
|
106
105
|
});
|
|
@@ -14,7 +14,7 @@ import {
|
|
|
14
14
|
EXAMPLE_HEADER_LANGUAGE_CONFIG,
|
|
15
15
|
EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG,
|
|
16
16
|
EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
|
|
17
|
-
} from './
|
|
17
|
+
} from './_test-examples';
|
|
18
18
|
|
|
19
19
|
describe('FOR: Header', () => {
|
|
20
20
|
describe('GIVEN: Params: none', () => {
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
{% set listEl = 'ul' %}
|
|
22
22
|
{% endif %}
|
|
23
23
|
|
|
24
|
-
{
|
|
24
|
+
{# Remove "and not params.itemsList[0].url" in future update #}
|
|
25
|
+
{% if listLength < 2 and not params.attributes and not params.itemsList[0].url %}
|
|
25
26
|
{% set attributes = params.itemsList[0].attributes %}
|
|
26
27
|
{% else %}
|
|
27
28
|
{% set attributes = params.attributes %}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{% from "components/list/_macro.njk" import onsList %}
|
|
2
2
|
{{
|
|
3
3
|
onsList({
|
|
4
|
+
"iconPosition": "before",
|
|
4
5
|
"variants": "summary",
|
|
5
6
|
"itemsList": [
|
|
6
7
|
{
|
|
7
|
-
|
|
8
|
+
"text": 'birth certificate',
|
|
9
|
+
"iconType": "check"
|
|
8
10
|
},
|
|
9
11
|
{
|
|
10
12
|
"text": 'national insurance number'
|
|
@@ -88,10 +88,6 @@ $hub-row-spacing: 1.3rem;
|
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
&__actions {
|
|
92
|
-
white-space: nowrap;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
91
|
&__spacer {
|
|
96
92
|
background: var(--ons-color-black);
|
|
97
93
|
display: inline-block;
|
|
@@ -190,6 +186,7 @@ $hub-row-spacing: 1.3rem;
|
|
|
190
186
|
|
|
191
187
|
&__button {
|
|
192
188
|
align-self: flex-start;
|
|
189
|
+
text-align: right;
|
|
193
190
|
}
|
|
194
191
|
|
|
195
192
|
&__values--2 {
|