@ons/design-system 70.0.4 → 70.0.5

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.
@@ -62,8 +62,6 @@
62
62
  "accessiblePlaceholder": params.input.accessiblePlaceholder,
63
63
  "name": params.input.name,
64
64
  "autosuggestResults": autosuggestResults,
65
- "min": params.input.min,
66
- "max": params.input.max,
67
65
  "minLength": params.input.minLength,
68
66
  "maxLength": params.input.maxLength,
69
67
  "prefix": params.input.prefix,
@@ -157,9 +157,7 @@ describe('macro: autosuggest', () => {
157
157
  },
158
158
  mutuallyExclusive: null,
159
159
  accessiblePlaceholder: true,
160
- name: 'country-of-birth-test',
161
- min: 1,
162
- max: 10,
160
+ name: 'test-params',
163
161
  minLength: 1,
164
162
  maxLength: 10,
165
163
  prefix: {
@@ -210,10 +208,8 @@ describe('macro: autosuggest', () => {
210
208
  expect(inputSpy.occurrences[0]).toHaveProperty('error.text', 'An error occurred.');
211
209
  expect(inputSpy.occurrences[0]).toHaveProperty('mutuallyExclusive', null);
212
210
  expect(inputSpy.occurrences[0]).toHaveProperty('accessiblePlaceholder', true);
213
- expect(inputSpy.occurrences[0]).toHaveProperty('name', 'country-of-birth-test');
211
+ expect(inputSpy.occurrences[0]).toHaveProperty('name', 'test-params');
214
212
  expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string');
215
- expect(inputSpy.occurrences[0]).toHaveProperty('min', 1);
216
- expect(inputSpy.occurrences[0]).toHaveProperty('max', 10);
217
213
  expect(inputSpy.occurrences[0]).toHaveProperty('minLength', 1);
218
214
  expect(inputSpy.occurrences[0]).toHaveProperty('maxLength', 10);
219
215
  expect(inputSpy.occurrences[0]).toHaveProperty('prefix.title', 'Great British Pounds');
@@ -25,8 +25,6 @@
25
25
  "name": params.day.name,
26
26
  "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
27
27
  "width": "2",
28
- "min": 1,
29
- "max": 31,
30
28
  "maxLength": 2,
31
29
  "attributes": params.day.attributes,
32
30
  "label": {
@@ -46,8 +44,6 @@
46
44
  "name": params.month.name,
47
45
  "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
48
46
  "width": "2",
49
- "min": 1,
50
- "max": 12,
51
47
  "maxLength": 2,
52
48
  "attributes": params.month.attributes,
53
49
  "label": {
@@ -67,8 +63,6 @@
67
63
  "name": params.year.name,
68
64
  "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
69
65
  "width": "4",
70
- "min": 1000,
71
- "max": 3000,
72
66
  "maxLength": 4,
73
67
  "attributes": params.year.attributes,
74
68
  "label": {
@@ -173,8 +173,6 @@ describe('macro: date input', () => {
173
173
  type: 'number',
174
174
  name: 'day',
175
175
  width: '2',
176
- min: 1,
177
- max: 31,
178
176
  maxLength: 2,
179
177
  classes: '',
180
178
  error: '',
@@ -201,8 +199,6 @@ describe('macro: date input', () => {
201
199
  type: 'number',
202
200
  name: 'month',
203
201
  width: '2',
204
- min: 1,
205
- max: 12,
206
202
  maxLength: 2,
207
203
  classes: '',
208
204
  error: '',
@@ -229,8 +225,6 @@ describe('macro: date input', () => {
229
225
  type: 'number',
230
226
  name: 'year',
231
227
  width: '4',
232
- min: 1000,
233
- max: 3000,
234
228
  maxLength: 4,
235
229
  classes: '',
236
230
  error: '',
@@ -349,8 +343,6 @@ describe('macro: date input', () => {
349
343
  type: 'number',
350
344
  name: 'year',
351
345
  width: '4',
352
- min: 1000,
353
- max: 3000,
354
346
  maxLength: 4,
355
347
  classes: '',
356
348
  label: {
@@ -32,10 +32,11 @@
32
32
  <a href="{{ document.url }}">{{ document.title }}
33
33
  {%- if document.metadata and document.metadata.file %}
34
34
  <span class="ons-u-vh">
35
- {% set fileMetadataItems = [] %}
36
- {% if document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType + ' document download'), fileMetadataItems) %}{% endif %}
37
- {% if document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
38
- {% if document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
35
+ {% set fileMetadataItems = [
36
+ document.metadata.file.fileType + ' document download' if document.metadata.file.fileType,
37
+ document.metadata.file.fileSize if document.metadata.file.fileSize,
38
+ document.metadata.file.filePages if document.metadata.file.filePages ]
39
+ %}
39
40
 
40
41
  , {{ fileMetadataItems | join(', ') }}
41
42
 
@@ -76,12 +77,11 @@
76
77
  {%- if document.metadata.file and document.metadata.file.fileType %}
77
78
 
78
79
  <li class="ons-document-list__item-attribute" aria-hidden="true">
79
- {% set fileMetadataItems = [] %}
80
-
81
- {% if document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType), fileMetadataItems) %}{% endif %}
82
- {% if document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
83
- {% if document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
84
-
80
+ {% set fileMetadataItems = [
81
+ document.metadata.file.fileType if document.metadata.file.fileType,
82
+ document.metadata.file.fileSize if document.metadata.file.fileSize,
83
+ document.metadata.file.filePages if document.metadata.file.filePages ]
84
+ %}
85
85
  {{ fileMetadataItems | join(', ') }}
86
86
  </li>
87
87
 
@@ -3,7 +3,7 @@
3
3
  color: var(--ons-color-text-banner-link);
4
4
  text-decoration: underline;
5
5
 
6
- &:hover {
6
+ &:hover:not(:focus) {
7
7
  color: var(--ons-color-text-banner-link-hover);
8
8
  text-decoration: underline solid var(--ons-color-text-banner-link-hover) 2px;
9
9
  }
@@ -1,13 +1,11 @@
1
1
  {% from "components/input/_macro.njk" import onsInput %}
2
+
2
3
  {{
3
4
  onsInput({
4
5
  "id": "number-example-input",
5
6
  "type": "number",
6
7
  "width": "2",
7
8
  "autocomplete": "off",
8
- "attributes": {
9
- "min": 0
10
- },
11
9
  "label": {
12
10
  "text": "Number of bedrooms"
13
11
  }
@@ -5,9 +5,6 @@
5
5
  "type": "number",
6
6
  "width": "2",
7
7
  "autocomplete": "off",
8
- "attributes": {
9
- "min": 0
10
- },
11
8
  "label": {
12
9
  "text": "Number of bedrooms"
13
10
  }
@@ -11,9 +11,6 @@
11
11
  "dontWrap": true,
12
12
  "type": "number",
13
13
  "width": "4",
14
- "attributes": {
15
- "min": 0
16
- },
17
14
  "label": {
18
15
  "text": "Gross annual income"
19
16
  },
@@ -13,10 +13,6 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
13
13
  text: 'Years',
14
14
  id: 'address-duration-years-suffix',
15
15
  },
16
- attributes: {
17
- min: 0,
18
- max: 100,
19
- },
20
16
  },
21
17
  field2: {
22
18
  id: 'address-duration-months',
@@ -25,10 +21,6 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
25
21
  text: 'Months',
26
22
  id: 'address-duration-months-suffix',
27
23
  },
28
- attributes: {
29
- min: 0,
30
- max: 11,
31
- },
32
24
  },
33
25
  mutuallyExclusive: {
34
26
  or: 'Or',
@@ -59,10 +51,6 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS = {
59
51
  text: 'Years',
60
52
  id: 'address-duration-years-suffix',
61
53
  },
62
- attributes: {
63
- min: 0,
64
- max: 100,
65
- },
66
54
  },
67
55
  mutuallyExclusive: {
68
56
  or: 'Or',
@@ -7,9 +7,6 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS = {
7
7
  type: 'number',
8
8
  legend: 'What is your annual income before tax in 2018/19?',
9
9
  width: '5',
10
- attributes: {
11
- min: 0,
12
- },
13
10
  label: {
14
11
  text: 'Gross annual income',
15
12
  },
@@ -6,7 +6,6 @@
6
6
  <{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
7
7
  {% endif %}
8
8
 
9
- {% set list = [] %}
10
9
  {% if params.facebook and params.facebook == true %}
11
10
  {% set facebook =
12
11
  {
@@ -17,8 +16,6 @@
17
16
  "target": '_blank'
18
17
  }
19
18
  %}
20
-
21
- {% set list = (list.push(facebook), list) %}
22
19
  {% endif %}
23
20
  {% if params.twitter and params.twitter == true %}
24
21
  {% set twitter =
@@ -30,17 +27,13 @@
30
27
  "target": '_blank'
31
28
  }
32
29
  %}
33
-
34
- {% set list = (list.push(twitter), list) %}
35
-
36
30
  {% endif %}
37
-
38
31
  {{
39
32
  onsList({
40
33
  "variants": 'inline',
41
34
  "iconPosition": 'before',
42
35
  "iconSize": params.iconSize | default("xxl"),
43
- "itemsList": list
36
+ "itemsList": [facebook, twitter]
44
37
  })
45
38
  }}
46
39
  {% endmacro %}
@@ -12,7 +12,7 @@
12
12
  {% if params.classes %}
13
13
  {% set className = className + " " + params.classes %}
14
14
  {% endif %}
15
-
15
+
16
16
  <div class="{{ className }}">
17
17
  {% for summary in params.summaries %}
18
18
  {% if summary.summaryTitle %}
@@ -51,6 +51,9 @@
51
51
  "iconType": rowItem.iconType
52
52
  })
53
53
  -}}
54
+ {% if rowItem.iconVisuallyHiddenText %}
55
+ <span class="ons-u-vh">{{ rowItem.iconVisuallyHiddenText }}</span>
56
+ {% endif %}
54
57
  </span>
55
58
  {% endif %}
56
59
 
@@ -22,6 +22,7 @@ const EXAMPLE_SUMMARY_ROWS = {
22
22
  b: 'bbb',
23
23
  },
24
24
  iconType: 'check',
25
+ iconVisuallyHiddenText: 'Section completed',
25
26
  id: 'item-id-1',
26
27
  valueList: [
27
28
  {
@@ -432,6 +433,12 @@ describe('macro: summary', () => {
432
433
  expect($('.ons-summary__item-title-icon').hasClass('ons-summary__item-title-icon--check')).toBe(true);
433
434
  });
434
435
 
436
+ it('has the visually hidden text <span> text when `iconType` is `check`', () => {
437
+ const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
438
+
439
+ expect($('.ons-summary__item-title-icon').text().trim()).toBe('Section completed');
440
+ });
441
+
435
442
  it('has the correct item text class when `iconType` is provided', () => {
436
443
  const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
437
444
 
@@ -0,0 +1,75 @@
1
+ {% from "components/summary/_macro.njk" import onsSummary %}
2
+
3
+ {{ onsSummary({
4
+ "variant": "hub",
5
+ "summaries": [
6
+ {
7
+ "groups": [
8
+ {
9
+ "rows": [
10
+ {
11
+ "rowTitle": "People who live here",
12
+ "rowItems": [
13
+ {
14
+ "iconType": "check",
15
+ "iconVisuallyHiddenText": "Section complete",
16
+ "actions": [
17
+ {
18
+ "text": "View answers",
19
+ "visuallyHiddenText": "View answers for People who live here",
20
+ "url": "#0"
21
+ }
22
+ ]
23
+ }
24
+ ]
25
+ },
26
+ {
27
+ "rowTitle": "Mary Smith (You)",
28
+ "rowItems": [
29
+ {
30
+ "iconType": "check",
31
+ "iconVisuallyHiddenText": "Section complete",
32
+ "actions": [
33
+ {
34
+ "text": "View answers",
35
+ "visuallyHiddenText": "View answers for Mary Smith",
36
+ "url": "#0"
37
+ }
38
+ ]
39
+ }
40
+ ]
41
+ },
42
+ {
43
+ "rowTitle": "John Smith",
44
+ "rowItems": [
45
+ {
46
+ "actions": [
47
+ {
48
+ "text": "Continue with section",
49
+ "visuallyHiddenText": "Continue with John Smith's section",
50
+ "url": "#0"
51
+ }
52
+ ]
53
+ }
54
+ ]
55
+ },
56
+ {
57
+ "rowTitle": "Billy Smith",
58
+ "rowItems": [
59
+ {
60
+ "actions": [
61
+ {
62
+ "text": "Start section",
63
+ "visuallyHiddenText": "Start Billy Smith's section",
64
+ "url": "#0"
65
+ }
66
+ ]
67
+ }
68
+ ]
69
+ }
70
+ ]
71
+ }
72
+ ]
73
+ }
74
+ ]
75
+ }) }}