@aurodesignsystem-dev/auro-accordion 0.0.0-pr214.0 → 0.0.0-pr214.2

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 (9) hide show
  1. package/README.md +99 -41
  2. package/custom-elements.json +27 -12
  3. package/demo/api.js +2 -0
  4. package/demo/api.md +781 -59
  5. package/demo/api.min.js +16 -3
  6. package/demo/auro-accordion.min.js +5 -11
  7. package/demo/index.md +76 -74
  8. package/dist/index.d.ts +247 -125
  9. package/package.json +2 -2
package/demo/api.min.js CHANGED
@@ -2,22 +2,34 @@ import { A as AuroAccordion, a as AuroAccordionGroup } from './auro-accordion.mi
2
2
 
3
3
  function expandedExample() {
4
4
  const expandedExampleElem = document.querySelector(
5
- "#auroaccordionExpandedExample",
5
+ "#accordionExpandedExample",
6
6
  );
7
7
 
8
8
  document
9
- .querySelector("#auroaccordionExpandedExampleBtnTrue")
9
+ .querySelector("#accordionExpandedExampleBtnTrue")
10
10
  .addEventListener("click", () => {
11
11
  expandedExampleElem.expanded = true;
12
12
  });
13
13
 
14
14
  document
15
- .querySelector("#auroaccordionExpandedExampleBtnFalse")
15
+ .querySelector("#accordionExpandedExampleBtnFalse")
16
16
  .addEventListener("click", () => {
17
17
  expandedExampleElem.expanded = false;
18
18
  });
19
19
  }
20
20
 
21
+ function toggleExample() {
22
+ const expandedExampleElem = document.querySelector(
23
+ "#accordionToggleExample",
24
+ );
25
+
26
+ document
27
+ .querySelector("#accordionToggleExampleBtn")
28
+ .addEventListener("click", () => {
29
+ expandedExampleElem.toggle();
30
+ });
31
+ }
32
+
21
33
  AuroAccordion.register();
22
34
  AuroAccordionGroup.register();
23
35
 
@@ -27,6 +39,7 @@ function initExamples(initCount) {
27
39
 
28
40
  try {
29
41
  expandedExample();
42
+ toggleExample();
30
43
  } catch {
31
44
  if (initCount <= 20) {
32
45
  // setTimeout handles issue where content is sometimes loaded after the functions get called
package/demo/auro-accordion.min.js CHANGED
@@ -331,13 +331,8 @@ class AuroAccordionButton extends T {
331
331
 
332
332
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
333
333
  /**
334
- * Auro-accordion provides users a way to have collapsible content on a page.
335
- * Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
336
- *
337
334
  * @customElement auro-accordion-group
338
335
  */
339
-
340
- // build the component class
341
336
  class AuroAccordionGroup extends i$2 {
342
337
  constructor() {
343
338
  super();
@@ -409,8 +404,9 @@ class AuroAccordionGroup extends i$2 {
409
404
  }
410
405
 
411
406
  /**
412
- * Updates the disabled state of all child <auro-accordion> elements
413
- * to match the disabled state of the <auro-accordion-group> element.
407
+ * Updates the disabled state of all child `<auro-accordion>` elements
408
+ * to match the disabled state of the `<auro-accordion-group>` element.
409
+ * @private
414
410
  */
415
411
  updateDisabledState() {
416
412
  const accordions = this.querySelectorAll("auro-accordion");
@@ -509,8 +505,6 @@ var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color: transparent;
509
505
 
510
506
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
511
507
  /**
512
- * Auro-accordion provides users a way to have collapsible content on a page.
513
- * Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
514
508
  * @customElement auro-accordion
515
509
  *
516
510
  * @slot - Default slot for the accordion content.
@@ -580,7 +574,7 @@ class AuroAccordion extends i$2 {
580
574
  },
581
575
 
582
576
  /**
583
- * If set, emphasis styles will be applied to the auro-accordions.
577
+ * If set, emphasis styles will be applied to the auro-accordion. This feature is best used on the auro-accordion-group component.
584
578
  */
585
579
  emphasis: {
586
580
  type: Boolean,
@@ -629,7 +623,7 @@ class AuroAccordion extends i$2 {
629
623
 
630
624
  /**
631
625
  * This will register this element with the browser.
632
- * @param {string} [name="auro-accordion"] - The name of element that you want to register to.
626
+ * @param {string} [name="auro-accordion"] - The name of the element that you want to register.
633
627
  *
634
628
  * @example
635
629
  * AuroAccordion.register("custom-accordion") // this will register this element to <custom-accordion/>
package/demo/index.md CHANGED
@@ -47,33 +47,34 @@ The `<auro-accordion>` element should be used in situations where users may:
47
47
  </div>
48
48
  <auro-accordion alignRight>
49
49
  <span slot="trigger">See code</span>
50
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
51
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
52
- ```html
53
- <auro-accordion>
54
- <span slot="trigger">Trigger</span>
55
- <p>
56
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
57
- </p>
58
- <p>
59
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
60
- </p>
61
- <p>
62
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
63
- </p>
64
- <p>
65
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
66
- </p>
67
- </auro-accordion>
68
- ```
69
- <!-- AURO-GENERATED-CONTENT:END -->
50
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
51
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
52
+
53
+ ```html
54
+ <auro-accordion>
55
+ <span slot="trigger">Trigger</span>
56
+ <p>
57
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
58
+ </p>
59
+ <p>
60
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
61
+ </p>
62
+ <p>
63
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
64
+ </p>
65
+ <p>
66
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
67
+ </p>
68
+ </auro-accordion>
69
+ ```
70
+ <!-- AURO-GENERATED-CONTENT:END -->
70
71
  </auro-accordion>
71
72
 
72
73
  ### Accordion Group
73
74
 
74
75
  <div class="exampleWrapper">
75
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroup.html) -->
76
- <!-- The below content is automatically added from ./../apiExamples/accordionGroup.html -->
76
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordion-group.html) -->
77
+ <!-- The below content is automatically added from ./../apiExamples/accordion-group.html -->
77
78
  <auro-accordion-group>
78
79
  <auro-accordion>
79
80
  <span slot="trigger">Trigger</span>
@@ -125,56 +126,57 @@ The `<auro-accordion>` element should be used in situations where users may:
125
126
  </div>
126
127
  <auro-accordion alignRight>
127
128
  <span slot="trigger">See code</span>
128
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroup.html) -->
129
- <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroup.html -->
130
- ```html
131
- <auro-accordion-group>
132
- <auro-accordion>
133
- <span slot="trigger">Trigger</span>
134
- <p>
135
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
136
- </p>
137
- <p>
138
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
139
- </p>
140
- <p>
141
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
142
- </p>
143
- <p>
144
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
145
- </p>
146
- </auro-accordion>
147
- <auro-accordion>
148
- <span slot="trigger">Trigger</span>
149
- <p>
150
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
151
- </p>
152
- <p>
153
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
154
- </p>
155
- <p>
156
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
157
- </p>
158
- <p>
159
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
160
- </p>
161
- </auro-accordion>
162
- <auro-accordion>
163
- <span slot="trigger">Trigger</span>
164
- <p>
165
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
166
- </p>
167
- <p>
168
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
169
- </p>
170
- <p>
171
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
172
- </p>
173
- <p>
174
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
175
- </p>
176
- </auro-accordion>
177
- </auro-accordion-group>
178
- ```
179
- <!-- AURO-GENERATED-CONTENT:END -->
129
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordion-group.html) -->
130
+ <!-- The below code snippet is automatically added from ./../apiExamples/accordion-group.html -->
131
+
132
+ ```html
133
+ <auro-accordion-group>
134
+ <auro-accordion>
135
+ <span slot="trigger">Trigger</span>
136
+ <p>
137
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
138
+ </p>
139
+ <p>
140
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
141
+ </p>
142
+ <p>
143
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
144
+ </p>
145
+ <p>
146
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
147
+ </p>
148
+ </auro-accordion>
149
+ <auro-accordion>
150
+ <span slot="trigger">Trigger</span>
151
+ <p>
152
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
153
+ </p>
154
+ <p>
155
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
156
+ </p>
157
+ <p>
158
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
159
+ </p>
160
+ <p>
161
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
162
+ </p>
163
+ </auro-accordion>
164
+ <auro-accordion>
165
+ <span slot="trigger">Trigger</span>
166
+ <p>
167
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
168
+ </p>
169
+ <p>
170
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
171
+ </p>
172
+ <p>
173
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
174
+ </p>
175
+ <p>
176
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
177
+ </p>
178
+ </auro-accordion>
179
+ </auro-accordion-group>
180
+ ```
181
+ <!-- AURO-GENERATED-CONTENT:END -->
180
182
  </auro-accordion>