@aurodesignsystem/auro-accordion 5.1.2 → 5.2.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.
Files changed (36) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +1 -1
  3. package/apiExamples/disabled.html +15 -0
  4. package/apiExamples/disabledGroup.html +47 -0
  5. package/coverage/lcov-report/auro-accordion-button.js.html +10 -10
  6. package/coverage/lcov-report/auro-accordion-group.js.html +107 -41
  7. package/coverage/lcov-report/auro-accordion.js.html +161 -95
  8. package/coverage/lcov-report/color-css.js.html +2 -2
  9. package/coverage/lcov-report/iconVersion.js.html +1 -1
  10. package/coverage/lcov-report/index.html +18 -18
  11. package/coverage/lcov-report/style-button-css.js.html +2 -2
  12. package/coverage/lcov-report/style-css.js.html +2 -2
  13. package/coverage/lcov-report/tokens-css.js.html +1 -1
  14. package/coverage/lcov.info +310 -252
  15. package/demo/api.md +163 -0
  16. package/demo/api.min.js +50 -6
  17. package/demo/index.min.js +50 -6
  18. package/dist/auro-accordion-group.d.ts +11 -0
  19. package/dist/auro-accordion-group.d.ts.map +1 -1
  20. package/dist/auro-accordion.d.ts +11 -0
  21. package/dist/auro-accordion.d.ts.map +1 -1
  22. package/dist/auro-accordion__bundled.js +50 -6
  23. package/package.json +3 -3
  24. package/src/auro-accordion-group.js +22 -0
  25. package/src/auro-accordion.js +23 -1
  26. package/src/color-css.js +1 -1
  27. package/src/color.css +4 -0
  28. package/src/color.scss +5 -0
  29. package/src/style-button-css.js +1 -1
  30. package/src/style-button.css +11 -5
  31. package/src/style-button.scss +10 -5
  32. package/src/style-css.js +1 -1
  33. package/src/style.css +7 -1
  34. package/src/style.scss +10 -1
  35. package/test/auro-accordion-group.test.js +17 -0
  36. package/test/auro-accordion.test.js +40 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ # [5.2.0](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.1.3...v5.2.0) (2025-05-13)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * rename click handler and disable button on disabled state ([0c91a55](https://github.com/AlaskaAirlines/auro-accordion/commit/0c91a55499f53876e45fce986a0c4acb45cbeb4a))
9
+
10
+
11
+ ### Features
12
+
13
+ * **accordion:** add disabled state [#123](https://github.com/AlaskaAirlines/auro-accordion/issues/123) ([4c027d9](https://github.com/AlaskaAirlines/auro-accordion/commit/4c027d9bef2b4208526d7ed5acd722dc4a9cf783))
14
+
15
+
16
+ ### Performance Improvements
17
+
18
+ * remove `disabled` attr on icon ([00443bc](https://github.com/AlaskaAirlines/auro-accordion/commit/00443bc812f0bb60815a935ca1e12d3dbb1ca901))
19
+ * update disabled color's token ([c0254e9](https://github.com/AlaskaAirlines/auro-accordion/commit/c0254e965ae70b5f9fad3c49f051dea772db2ad4))
20
+
21
+ ## [5.1.3](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.1.2...v5.1.3) (2025-05-08)
22
+
23
+
24
+ ### Bug Fixes
25
+
26
+ * update chevron-right non-emphasis styling ([2c8dd1a](https://github.com/AlaskaAirlines/auro-accordion/commit/2c8dd1ac40311ed8e7e8bd860dc93fd00b8b0691))
27
+
3
28
  ## [5.1.2](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.1.1...v5.1.2) (2025-05-01)
4
29
 
5
30
 
package/README.md CHANGED
@@ -125,7 +125,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
125
125
  ```html
126
126
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@/dist/auro-classic/CSSCustomProperties.css" />
127
127
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@/dist/bundled/essentials.css" />
128
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@5.1.2/dist/auro-accordion__bundled.js" type="module"></script>
128
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@5.2.0/dist/auro-accordion__bundled.js" type="module"></script>
129
129
  ```
130
130
 
131
131
  <!-- AURO-GENERATED-CONTENT:END -->
package/apiExamples/disabled.html ADDED
@@ -0,0 +1,15 @@
1
+ <auro-accordion disabled>
2
+ <span slot="trigger">Trigger</span>
3
+ <p>
4
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
5
+ </p>
6
+ <p>
7
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
8
+ </p>
9
+ <p>
10
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
11
+ </p>
12
+ <p>
13
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
14
+ </p>
15
+ </auro-accordion>
package/apiExamples/disabledGroup.html ADDED
@@ -0,0 +1,47 @@
1
+ <auro-accordion-group disabled>
2
+ <auro-accordion>
3
+ <span slot="trigger">Trigger</span>
4
+ <p>
5
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
6
+ </p>
7
+ <p>
8
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
9
+ </p>
10
+ <p>
11
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
12
+ </p>
13
+ <p>
14
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
15
+ </p>
16
+ </auro-accordion>
17
+ <auro-accordion>
18
+ <span slot="trigger">Trigger</span>
19
+ <p>
20
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
21
+ </p>
22
+ <p>
23
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
24
+ </p>
25
+ <p>
26
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
27
+ </p>
28
+ <p>
29
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
30
+ </p>
31
+ </auro-accordion>
32
+ <auro-accordion>
33
+ <span slot="trigger">Trigger</span>
34
+ <p>
35
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
36
+ </p>
37
+ <p>
38
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
39
+ </p>
40
+ <p>
41
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
42
+ </p>
43
+ <p>
44
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
45
+ </p>
46
+ </auro-accordion>
47
+ </auro-accordion-group>
package/coverage/lcov-report/auro-accordion-button.js.html CHANGED
@@ -125,17 +125,17 @@
125
125
  <span class="cline-any cline-yes">2x</span>
126
126
  <span class="cline-any cline-yes">2x</span>
127
127
  <span class="cline-any cline-yes">2x</span>
128
- <span class="cline-any cline-yes">10x</span>
129
- <span class="cline-any cline-yes">10x</span>
130
- <span class="cline-any cline-yes">10x</span>
131
- <span class="cline-any cline-yes">10x</span>
128
+ <span class="cline-any cline-yes">14x</span>
129
+ <span class="cline-any cline-yes">14x</span>
130
+ <span class="cline-any cline-yes">14x</span>
131
+ <span class="cline-any cline-yes">14x</span>
132
132
  <span class="cline-any cline-yes">2x</span>
133
133
  <span class="cline-any cline-yes">2x</span>
134
- <span class="cline-any cline-yes">12x</span>
135
- <span class="cline-any cline-yes">12x</span>
136
- <span class="cline-any cline-yes">12x</span>
137
- <span class="cline-any cline-yes">12x</span>
138
- <span class="cline-any cline-yes">12x</span>
134
+ <span class="cline-any cline-yes">16x</span>
135
+ <span class="cline-any cline-yes">16x</span>
136
+ <span class="cline-any cline-yes">16x</span>
137
+ <span class="cline-any cline-yes">16x</span>
138
+ <span class="cline-any cline-yes">16x</span>
139
139
  <span class="cline-any cline-yes">2x</span>
140
140
  <span class="cline-any cline-yes">2x</span>
141
141
  <span class="cline-any cline-yes">2x</span>
@@ -199,7 +199,7 @@ export class AuroAccordionButton extends AuroButton {
199
199
  <div class='footer quiet pad2 space-top1 center small'>
200
200
  Code coverage generated by
201
201
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
202
- at 2025-05-01T21:04:15.207Z
202
+ at 2025-05-13T18:28:58.969Z
203
203
  </div>
204
204
  <script src="prettify.js"></script>
205
205
  <script>
package/coverage/lcov-report/auro-accordion-group.js.html CHANGED
@@ -25,28 +25,28 @@
25
25
  <div class='fl pad1y space-right2'>
26
26
  <span class="strong">100% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>129/129</span>
28
+ <span class='fraction'>151/151</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>19/19</span>
35
+ <span class='fraction'>23/23</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>8/8</span>
42
+ <span class='fraction'>10/10</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
47
  <span class="strong">100% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>129/129</span>
49
+ <span class='fraction'>151/151</span>
50
50
  </div>
51
51
 
52
52
 
@@ -192,7 +192,29 @@
192
192
  <a name='L127'></a><a href='#L127'>127</a>
193
193
  <a name='L128'></a><a href='#L128'>128</a>
194
194
  <a name='L129'></a><a href='#L129'>129</a>
195
- <a name='L130'></a><a href='#L130'>130</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a>
207
+ <a name='L142'></a><a href='#L142'>142</a>
208
+ <a name='L143'></a><a href='#L143'>143</a>
209
+ <a name='L144'></a><a href='#L144'>144</a>
210
+ <a name='L145'></a><a href='#L145'>145</a>
211
+ <a name='L146'></a><a href='#L146'>146</a>
212
+ <a name='L147'></a><a href='#L147'>147</a>
213
+ <a name='L148'></a><a href='#L148'>148</a>
214
+ <a name='L149'></a><a href='#L149'>149</a>
215
+ <a name='L150'></a><a href='#L150'>150</a>
216
+ <a name='L151'></a><a href='#L151'>151</a>
217
+ <a name='L152'></a><a href='#L152'>152</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
196
218
  <span class="cline-any cline-yes">2x</span>
197
219
  <span class="cline-any cline-yes">2x</span>
198
220
  <span class="cline-any cline-yes">2x</span>
@@ -215,13 +237,18 @@
215
237
  <span class="cline-any cline-yes">2x</span>
216
238
  <span class="cline-any cline-yes">2x</span>
217
239
  <span class="cline-any cline-yes">2x</span>
218
- <span class="cline-any cline-yes">6x</span>
219
- <span class="cline-any cline-yes">6x</span>
220
- <span class="cline-any cline-yes">6x</span>
221
- <span class="cline-any cline-yes">6x</span>
222
- <span class="cline-any cline-yes">6x</span>
223
- <span class="cline-any cline-yes">6x</span>
224
- <span class="cline-any cline-yes">6x</span>
240
+ <span class="cline-any cline-yes">2x</span>
241
+ <span class="cline-any cline-yes">7x</span>
242
+ <span class="cline-any cline-yes">7x</span>
243
+ <span class="cline-any cline-yes">7x</span>
244
+ <span class="cline-any cline-yes">7x</span>
245
+ <span class="cline-any cline-yes">7x</span>
246
+ <span class="cline-any cline-yes">7x</span>
247
+ <span class="cline-any cline-yes">7x</span>
248
+ <span class="cline-any cline-yes">2x</span>
249
+ <span class="cline-any cline-yes">2x</span>
250
+ <span class="cline-any cline-yes">2x</span>
251
+ <span class="cline-any cline-yes">2x</span>
225
252
  <span class="cline-any cline-yes">2x</span>
226
253
  <span class="cline-any cline-yes">2x</span>
227
254
  <span class="cline-any cline-yes">2x</span>
@@ -254,32 +281,49 @@
254
281
  <span class="cline-any cline-yes">3x</span>
255
282
  <span class="cline-any cline-yes">2x</span>
256
283
  <span class="cline-any cline-yes">2x</span>
257
- <span class="cline-any cline-yes">6x</span>
258
- <span class="cline-any cline-yes">6x</span>
259
- <span class="cline-any cline-yes">6x</span>
284
+ <span class="cline-any cline-yes">7x</span>
285
+ <span class="cline-any cline-yes">7x</span>
286
+ <span class="cline-any cline-yes">7x</span>
260
287
  <span class="cline-any cline-yes">2x</span>
261
288
  <span class="cline-any cline-yes">2x</span>
262
- <span class="cline-any cline-yes">6x</span>
263
- <span class="cline-any cline-yes">6x</span>
264
- <span class="cline-any cline-yes">6x</span>
265
- <span class="cline-any cline-yes">6x</span>
266
- <span class="cline-any cline-yes">6x</span>
267
- <span class="cline-any cline-yes">8x</span>
289
+ <span class="cline-any cline-yes">7x</span>
268
290
  <span class="cline-any cline-yes">1x</span>
269
291
  <span class="cline-any cline-yes">1x</span>
292
+ <span class="cline-any cline-yes">7x</span>
293
+ <span class="cline-any cline-yes">2x</span>
294
+ <span class="cline-any cline-yes">2x</span>
295
+ <span class="cline-any cline-yes">2x</span>
296
+ <span class="cline-any cline-yes">2x</span>
297
+ <span class="cline-any cline-yes">2x</span>
298
+ <span class="cline-any cline-yes">2x</span>
270
299
  <span class="cline-any cline-yes">1x</span>
271
- <span class="cline-any cline-yes">8x</span>
272
- <span class="cline-any cline-yes">8x</span>
273
300
  <span class="cline-any cline-yes">1x</span>
274
301
  <span class="cline-any cline-yes">1x</span>
275
- <span class="cline-any cline-yes">8x</span>
276
- <span class="cline-any cline-yes">8x</span>
277
302
  <span class="cline-any cline-yes">1x</span>
278
303
  <span class="cline-any cline-yes">1x</span>
279
- <span class="cline-any cline-yes">8x</span>
280
- <span class="cline-any cline-yes">8x</span>
281
- <span class="cline-any cline-yes">6x</span>
282
- <span class="cline-any cline-yes">6x</span>
304
+ <span class="cline-any cline-yes">2x</span>
305
+ <span class="cline-any cline-yes">2x</span>
306
+ <span class="cline-any cline-yes">7x</span>
307
+ <span class="cline-any cline-yes">7x</span>
308
+ <span class="cline-any cline-yes">7x</span>
309
+ <span class="cline-any cline-yes">7x</span>
310
+ <span class="cline-any cline-yes">7x</span>
311
+ <span class="cline-any cline-yes">9x</span>
312
+ <span class="cline-any cline-yes">1x</span>
313
+ <span class="cline-any cline-yes">1x</span>
314
+ <span class="cline-any cline-yes">1x</span>
315
+ <span class="cline-any cline-yes">9x</span>
316
+ <span class="cline-any cline-yes">9x</span>
317
+ <span class="cline-any cline-yes">1x</span>
318
+ <span class="cline-any cline-yes">1x</span>
319
+ <span class="cline-any cline-yes">9x</span>
320
+ <span class="cline-any cline-yes">9x</span>
321
+ <span class="cline-any cline-yes">1x</span>
322
+ <span class="cline-any cline-yes">1x</span>
323
+ <span class="cline-any cline-yes">9x</span>
324
+ <span class="cline-any cline-yes">9x</span>
325
+ <span class="cline-any cline-yes">7x</span>
326
+ <span class="cline-any cline-yes">7x</span>
283
327
  <span class="cline-any cline-yes">2x</span>
284
328
  <span class="cline-any cline-yes">2x</span>
285
329
  <span class="cline-any cline-yes">2x</span>
@@ -306,20 +350,20 @@
306
350
  <span class="cline-any cline-yes">2x</span>
307
351
  <span class="cline-any cline-yes">2x</span>
308
352
  <span class="cline-any cline-yes">2x</span>
309
- <span class="cline-any cline-yes">6x</span>
310
- <span class="cline-any cline-yes">6x</span>
311
- <span class="cline-any cline-yes">6x</span>
312
- <span class="cline-any cline-yes">6x</span>
313
- <span class="cline-any cline-yes">6x</span>
353
+ <span class="cline-any cline-yes">7x</span>
354
+ <span class="cline-any cline-yes">7x</span>
355
+ <span class="cline-any cline-yes">7x</span>
356
+ <span class="cline-any cline-yes">7x</span>
357
+ <span class="cline-any cline-yes">7x</span>
314
358
  <span class="cline-any cline-yes">2x</span>
315
359
  <span class="cline-any cline-yes">2x</span>
316
360
  <span class="cline-any cline-yes">2x</span>
317
- <span class="cline-any cline-yes">6x</span>
318
- <span class="cline-any cline-yes">6x</span>
319
- <span class="cline-any cline-yes">6x</span>
320
- <span class="cline-any cline-yes">6x</span>
321
- <span class="cline-any cline-yes">6x</span>
322
- <span class="cline-any cline-yes">6x</span>
361
+ <span class="cline-any cline-yes">7x</span>
362
+ <span class="cline-any cline-yes">7x</span>
363
+ <span class="cline-any cline-yes">7x</span>
364
+ <span class="cline-any cline-yes">7x</span>
365
+ <span class="cline-any cline-yes">7x</span>
366
+ <span class="cline-any cline-yes">7x</span>
323
367
  <span class="cline-any cline-yes">2x</span>
324
368
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
325
369
  // See LICENSE in the project root for license information.
@@ -338,6 +382,7 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
338
382
  *
339
383
  * @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
340
384
  * @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
385
+ * @attr {Boolean} disabled - If set, the whole accordion inside the group are disabled and have reduced opacity.
341
386
  * @attr {Boolean} noToggleExpanded - If set, multiple accordions can be open at the same time.
342
387
  */
343
388
  &nbsp;
@@ -366,6 +411,10 @@ export class AuroAccordionGroup extends LitElement {
366
411
  variant: {
367
412
  type: String,
368
413
  reflect: true
414
+ },
415
+ disabled: {
416
+ type: Boolean,
417
+ reflect: true
369
418
  }
370
419
  };
371
420
  }
@@ -386,6 +435,23 @@ export class AuroAccordionGroup extends LitElement {
386
435
  // Add the tag name as an attribute if it is different than the component name
387
436
  this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion-group');
388
437
  }
438
+ &nbsp;
439
+ updated(changedProperties) {
440
+ if (changedProperties.has('disabled')) {
441
+ this.updateDisabledState();
442
+ }
443
+ }
444
+ &nbsp;
445
+ /**
446
+ * Updates the disabled state of all child &lt;auro-accordion&gt; elements
447
+ * to match the disabled state of the &lt;auro-accordion-group&gt; element.
448
+ */
449
+ updateDisabledState() {
450
+ const accordions = this.querySelectorAll('auro-accordion');
451
+ accordions.forEach((accordion) =&gt; {
452
+ accordion.disabled = this.disabled;
453
+ });
454
+ }
389
455
  &nbsp;
390
456
  handleSlotContentChange() {
391
457
  this.addEventListener('toggleExpanded', this.handleToggleExpanded);
@@ -457,7 +523,7 @@ export class AuroAccordionGroup extends LitElement {
457
523
  <div class='footer quiet pad2 space-top1 center small'>
458
524
  Code coverage generated by
459
525
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
460
- at 2025-05-01T21:04:15.207Z
526
+ at 2025-05-13T18:28:58.969Z
461
527
  </div>
462
528
  <script src="prettify.js"></script>
463
529
  <script>