@ons/design-system 66.0.0 → 66.0.1

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.
Files changed (5) hide show
  1. package/components/navigation/_macro.njk +32 -12
  2. package/components/navigation/_macro.spec.js +22 -18
  3. package/package.json +1 -1
  4. package/scripts/main.es5.js +1 -1
  5. package/scripts/main.js +1 -1
package/components/navigation/_macro.njk CHANGED
@@ -15,14 +15,16 @@
15
15
  {{ onsAutosuggest({
16
16
  "id": "ons-site-search",
17
17
  "containerClasses": "ons-autosuggest--header",
18
- "classes": autosuggestClasses,
19
- "label": {
20
- "text": params.siteSearchAutosuggest.label,
21
- "id": "ons-site-search-label",
22
- "classes": autosuggestLabelClasses
18
+ "input": {
19
+ "classes": autosuggestClasses,
20
+ "accessiblePlaceholder": true,
21
+ "autocomplete": "off",
22
+ "label": {
23
+ "text": params.siteSearchAutosuggest.label,
24
+ "id": "ons-site-search-label",
25
+ "classes": autosuggestLabelClasses
26
+ }
23
27
  },
24
- "accessiblePlaceholder": true,
25
- "autocomplete": "off",
26
28
  "instructions": params.siteSearchAutosuggest.instructions,
27
29
  "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
28
30
  "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
@@ -42,7 +44,11 @@
42
44
  <ul class="ons-navigation__list">
43
45
  {% for item in params.navigation.itemsList %}
44
46
  <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
45
- <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
47
+ <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>
48
+ {% if item.title %}{{ item.title }}
49
+ {% elif item.text %}{{ item.text }}
50
+ {% endif %}
51
+ </a>
46
52
  </li>
47
53
  {% endfor %}
48
54
  </ul>
@@ -55,7 +61,11 @@
55
61
  <ul class="ons-navigation__list ons-navigation__list">
56
62
  {% for item in params.navigation.subNavigation.itemsList %}
57
63
  <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
58
- <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
64
+ <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>
65
+ {% if item.title %}{{ item.title }}
66
+ {% elif item.text %}{{ item.text }}
67
+ {% endif %}
68
+ </a>
59
69
  </li>
60
70
  {% endfor %}
61
71
  </ul>
@@ -81,14 +91,24 @@
81
91
  </li>
82
92
  {% for item in params.navigation.subNavigation.itemsList %}
83
93
  <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
84
- <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
94
+ <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>
95
+ {% if item.title %}{{ item.title }}
96
+ {% elif item.text %}{{ item.text }}
97
+ {% endif %}
98
+ </a>
85
99
  {% if item.sections %}
86
100
  {% for section in item.sections %}
87
- {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
101
+ {% if section.sectionTitle %}
102
+ <h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>
103
+ {% endif %}
88
104
  <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
89
105
  {% for child in section.children %}
90
106
  <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and child.url in params.navigation.currentPath) }}">
91
- <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{% if child.title %}{{ child.title }}{% elif child.text %}{{ child.text }}{% endif %}</a>
107
+ <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>
108
+ {% if child.title %}{{ child.title }}
109
+ {% elif child.text %}{{ child.text }}
110
+ {% endif %}
111
+ </a>
92
112
  </li>
93
113
  {% endfor %}
94
114
  </ul>
package/components/navigation/_macro.spec.js CHANGED
@@ -71,7 +71,6 @@ const PARAMS = {
71
71
  };
72
72
 
73
73
  const SITE_SEARCH_AUTOSUGGEST = {
74
- label: 'Search the design system',
75
74
  instructions:
76
75
  "Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.",
77
76
  ariaYouHaveSelected: 'You have selected',
@@ -122,20 +121,25 @@ describe('macro: navigation', () => {
122
121
  navigation: PARAMS,
123
122
  siteSearchAutosuggest: {
124
123
  ...SITE_SEARCH_AUTOSUGGEST,
124
+ input: {
125
+ label: 'Search the design system',
126
+ },
125
127
  },
126
128
  });
127
129
 
128
130
  expect(autosuggestSpy.occurrences[0]).toEqual({
129
131
  ...SITE_SEARCH_AUTOSUGGEST,
130
- accessiblePlaceholder: true,
131
- autocomplete: 'off',
132
132
  id: 'ons-site-search',
133
133
  containerClasses: 'ons-autosuggest--header',
134
- classes: 'ons-input-search ons-input-search--icon',
135
- label: {
136
- text: 'Search the design system',
137
- id: 'ons-site-search-label',
138
- classes: 'ons-u-pl-m ons-label--white',
134
+ input: {
135
+ accessiblePlaceholder: true,
136
+ autocomplete: 'off',
137
+ label: 'Search the design system',
138
+ classes: 'ons-input-search ons-input-search--icon',
139
+ label: {
140
+ id: 'ons-site-search-label',
141
+ classes: 'ons-u-pl-m ons-label--white',
142
+ },
139
143
  },
140
144
  });
141
145
  });
@@ -157,21 +161,21 @@ describe('macro: navigation', () => {
157
161
  it('has the correct link href for each list item', () => {
158
162
  const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
159
163
 
160
- const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('href'));
164
+ const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.attr('href'));
161
165
  expect(values).toEqual(['#0', '#1']);
162
166
  });
163
167
 
164
168
  it('has the correct link text for each list item', () => {
165
169
  const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
166
170
 
167
- const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.text().trim());
171
+ const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.text().trim());
168
172
  expect(values).toEqual(['Main nav item 1', 'Main nav item 2']);
169
173
  });
170
174
 
171
175
  it('has the correct aria-label for each list item', () => {
172
176
  const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
173
177
 
174
- const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('aria-label'));
178
+ const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.attr('aria-label'));
175
179
  expect(values).toEqual(['Main nav ariaLabel 1', 'Main nav ariaLabel 2']);
176
180
  });
177
181
 
@@ -249,21 +253,21 @@ describe('macro: navigation', () => {
249
253
  it('has the correct link href for each list item', () => {
250
254
  const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
251
255
 
252
- const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('href'));
256
+ const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.attr('href'));
253
257
  expect(values).toEqual(['/sub-item-1', '/sub-item-2']);
254
258
  });
255
259
 
256
260
  it('has the correct link text for each list item', () => {
257
261
  const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
258
262
 
259
- const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.text().trim());
263
+ const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.text().trim());
260
264
  expect(values).toEqual(['Sub nav item 1', 'Sub nav item 2']);
261
265
  });
262
266
 
263
267
  it('has the correct aria-label for each list item', () => {
264
268
  const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
265
269
 
266
- const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('aria-label'));
270
+ const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.attr('aria-label'));
267
271
  expect(values).toEqual(['Sub nav ariaLabel 1', 'Sub nav ariaLabel 2']);
268
272
  });
269
273
 
@@ -322,7 +326,7 @@ describe('macro: navigation', () => {
322
326
 
323
327
  const values = mapAll(
324
328
  $('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
325
- node => node.attr('href'),
329
+ (node) => node.attr('href'),
326
330
  );
327
331
  expect(values).toEqual(['#overview', '/sub-item-1', '/sub-item-2']);
328
332
  });
@@ -332,7 +336,7 @@ describe('macro: navigation', () => {
332
336
 
333
337
  const values = mapAll(
334
338
  $('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
335
- node => node.text().trim(),
339
+ (node) => node.text().trim(),
336
340
  );
337
341
  expect(values).toEqual(['Overview', 'Sub nav item 1', 'Sub nav item 2']);
338
342
  });
@@ -364,14 +368,14 @@ describe('macro: navigation', () => {
364
368
  it('has the correct link href for each child list item', () => {
365
369
  const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
366
370
 
367
- const values = mapAll($('.ons-navigation__list--child > li a'), node => node.attr('href'));
371
+ const values = mapAll($('.ons-navigation__list--child > li a'), (node) => node.attr('href'));
368
372
  expect(values).toEqual(['/sub-item-2/child-item-1', '/sub-item-2/child-item-2']);
369
373
  });
370
374
 
371
375
  it('has the correct link text for each child list item', () => {
372
376
  const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
373
377
 
374
- const values = mapAll($('.ons-navigation__list--child > li a'), node => node.text().trim());
378
+ const values = mapAll($('.ons-navigation__list--child > li a'), (node) => node.text().trim());
375
379
  expect(values).toEqual(['Child item 1', 'Child item 2']);
376
380
  });
377
381
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ons/design-system",
3
3
  "description": "ONS Design System built CSS, JS, and Nunjucks templates",
4
- "version": "66.0.0",
4
+ "version": "66.0.1",
5
5
  "main": "index.js",
6
6
  "license": "MIT",
7
7
  "author": {