@aurodesignsystem/auro-accordion 5.1.3 → 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.
- package/CHANGELOG.md +18 -0
- package/README.md +1 -1
- package/apiExamples/disabled.html +15 -0
- package/apiExamples/disabledGroup.html +47 -0
- package/coverage/lcov-report/auro-accordion-button.js.html +10 -10
- package/coverage/lcov-report/auro-accordion-group.js.html +107 -41
- package/coverage/lcov-report/auro-accordion.js.html +161 -95
- package/coverage/lcov-report/color-css.js.html +2 -2
- package/coverage/lcov-report/iconVersion.js.html +1 -1
- package/coverage/lcov-report/index.html +18 -18
- package/coverage/lcov-report/style-button-css.js.html +2 -2
- package/coverage/lcov-report/style-css.js.html +2 -2
- package/coverage/lcov-report/tokens-css.js.html +1 -1
- package/coverage/lcov.info +310 -252
- package/demo/api.md +163 -0
- package/demo/api.min.js +50 -6
- package/demo/index.min.js +50 -6
- package/dist/auro-accordion-group.d.ts +11 -0
- package/dist/auro-accordion-group.d.ts.map +1 -1
- package/dist/auro-accordion.d.ts +11 -0
- package/dist/auro-accordion.d.ts.map +1 -1
- package/dist/auro-accordion__bundled.js +50 -6
- package/package.json +3 -3
- package/src/auro-accordion-group.js +22 -0
- package/src/auro-accordion.js +23 -1
- package/src/color-css.js +1 -1
- package/src/color.css +4 -0
- package/src/color.scss +5 -0
- package/src/style-button-css.js +1 -1
- package/src/style-button.css +11 -5
- package/src/style-button.scss +10 -5
- package/src/style-css.js +1 -1
- package/src/style.css +0 -1
- package/src/style.scss +0 -1
- package/test/auro-accordion-group.test.js +17 -0
- package/test/auro-accordion.test.js +40 -0
|
@@ -125,6 +125,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
125
125
|
*
|
|
126
126
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
127
127
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
128
|
+
* @attr {Boolean} disabled - If set, the whole accordion inside the group are disabled and have reduced opacity.
|
|
128
129
|
* @attr {Boolean} noToggleExpanded - If set, multiple accordions can be open at the same time.
|
|
129
130
|
*/
|
|
130
131
|
|
|
@@ -153,6 +154,10 @@ class AuroAccordionGroup extends i$2 {
|
|
|
153
154
|
variant: {
|
|
154
155
|
type: String,
|
|
155
156
|
reflect: true
|
|
157
|
+
},
|
|
158
|
+
disabled: {
|
|
159
|
+
type: Boolean,
|
|
160
|
+
reflect: true
|
|
156
161
|
}
|
|
157
162
|
};
|
|
158
163
|
}
|
|
@@ -174,6 +179,23 @@ class AuroAccordionGroup extends i$2 {
|
|
|
174
179
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion-group');
|
|
175
180
|
}
|
|
176
181
|
|
|
182
|
+
updated(changedProperties) {
|
|
183
|
+
if (changedProperties.has('disabled')) {
|
|
184
|
+
this.updateDisabledState();
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Updates the disabled state of all child <auro-accordion> elements
|
|
190
|
+
* to match the disabled state of the <auro-accordion-group> element.
|
|
191
|
+
*/
|
|
192
|
+
updateDisabledState() {
|
|
193
|
+
const accordions = this.querySelectorAll('auro-accordion');
|
|
194
|
+
accordions.forEach((accordion) => {
|
|
195
|
+
accordion.disabled = this.disabled;
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
|
|
177
199
|
handleSlotContentChange() {
|
|
178
200
|
this.addEventListener('toggleExpanded', this.handleToggleExpanded);
|
|
179
201
|
|
|
@@ -238,9 +260,9 @@ class AuroAccordionGroup extends i$2 {
|
|
|
238
260
|
}
|
|
239
261
|
}
|
|
240
262
|
|
|
241
|
-
var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .
|
|
263
|
+
var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset;cursor:pointer}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);box-sizing:border-box}:host .auro-button:focus,:host .auro-button:focus-visible,:host .auro-button:focus-within{outline:0}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host([disabled]){cursor:not-allowed}:host([disabled]) .auro-button{pointer-events:none}:host(.sm) .auro-button{padding-top:var(--ds-size-150, 0.75rem);padding-bottom:var(--ds-size-150, 0.75rem)}:host(.lg) .auro-button{padding-top:var(--ds-size-250, 1.25rem);padding-bottom:var(--ds-size-250, 1.25rem)}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
|
|
242
264
|
|
|
243
|
-
var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, AS Circular);font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight,
|
|
265
|
+
var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);line-height:var(--ds-basic-text-body-default-line-height, 24px);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible{outline:none}.auro-button:focus-visible:not([variant=flat]){outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=flat]):not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-family:var(--ds-basic-text-body-sm-font-family, "AS Circular");font-size:var(--ds-basic-text-body-sm-font-size, 14px);font-weight:var(--ds-basic-text-body-sm-font-weight, 450);line-height:var(--ds-basic-text-body-sm-line-height, 20px);letter-spacing:var(--ds-basic-text-body-sm-letter-spacing, 0);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after{border-radius:100px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
244
266
|
|
|
245
267
|
/**
|
|
246
268
|
* @license
|
|
@@ -674,7 +696,7 @@ class AuroButton extends i$2 {
|
|
|
674
696
|
/**
|
|
675
697
|
* Returns the form element that this button is associated with.
|
|
676
698
|
* @private
|
|
677
|
-
* @returns {HTMLFormElement|null}
|
|
699
|
+
* @returns {HTMLFormElement | null}
|
|
678
700
|
*/
|
|
679
701
|
get form() {
|
|
680
702
|
return this.internals ? this.internals.form : null;
|
|
@@ -1088,9 +1110,9 @@ var chevronUp = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"
|
|
|
1088
1110
|
|
|
1089
1111
|
var chevronDown = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-down__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-down__desc\">Directional indicator; down.</desc><path d=\"m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
|
|
1090
1112
|
|
|
1091
|
-
var styleCss = i$5`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;
|
|
1113
|
+
var styleCss = i$5`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, 0.5rem)}:host([chevron=right]) .contentWrapper{padding-left:var(--ds-size-400, 2rem)}:host([chevron=right]:not([emphasis])) ::slotted([slot=trigger]){padding-left:var(--ds-size-250, 1.25rem)}:host([chevron=right]:not([emphasis])) .contentWrapper{padding-left:var(--ds-size-250, 1.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right:var(--ds-size-200, 1rem)}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;--trigger-padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis][variant=lg]) .trigger,:host([emphasis][variant=lg]) .contentWrapper{padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
|
|
1092
1114
|
|
|
1093
|
-
var colorCss = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
|
|
1115
|
+
var colorCss = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host([disabled]){--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-disabled, $ds-basic-color-texticon-disabled)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
|
|
1094
1116
|
|
|
1095
1117
|
var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
1096
1118
|
|
|
@@ -1107,6 +1129,7 @@ var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;-
|
|
|
1107
1129
|
* @attr {Boolean} expanded - If set, the accordion is expanded.
|
|
1108
1130
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
1109
1131
|
* @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
|
|
1132
|
+
* @attr {Boolean} disabled - If set, the accordion is disabled and have reduced opacity.
|
|
1110
1133
|
* @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
|
|
1111
1134
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
1112
1135
|
* @slot - Default slot for the accordion content.
|
|
@@ -1178,6 +1201,10 @@ class AuroAccordion extends i$2 {
|
|
|
1178
1201
|
variant: {
|
|
1179
1202
|
type: String,
|
|
1180
1203
|
reflect: true
|
|
1204
|
+
},
|
|
1205
|
+
disabled: {
|
|
1206
|
+
type: Boolean,
|
|
1207
|
+
reflect: true
|
|
1181
1208
|
}
|
|
1182
1209
|
};
|
|
1183
1210
|
}
|
|
@@ -1256,6 +1283,19 @@ class AuroAccordion extends i$2 {
|
|
|
1256
1283
|
}));
|
|
1257
1284
|
}
|
|
1258
1285
|
|
|
1286
|
+
/**
|
|
1287
|
+
* Toggles the visibility of the accordion content when button gets clicked.
|
|
1288
|
+
* @private
|
|
1289
|
+
* @param {Event} event - The event object.
|
|
1290
|
+
*/
|
|
1291
|
+
handleButtonClick(event) {
|
|
1292
|
+
if (this.disabled) {
|
|
1293
|
+
event.preventDefault();
|
|
1294
|
+
return;
|
|
1295
|
+
}
|
|
1296
|
+
this.toggle();
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1259
1299
|
// function that renders the HTML and CSS into the scope of the component
|
|
1260
1300
|
render() {
|
|
1261
1301
|
const buttonClasses = {
|
|
@@ -1273,7 +1313,9 @@ class AuroAccordion extends i$2 {
|
|
|
1273
1313
|
id="accordionTrigger"
|
|
1274
1314
|
aria-controls="accordionContent"
|
|
1275
1315
|
?ariaexpanded="${this.expanded}"
|
|
1276
|
-
|
|
1316
|
+
?aria-disabled="${this.disabled}"
|
|
1317
|
+
?disabled="${this.disabled}"
|
|
1318
|
+
@click="${this.handleButtonClick}"
|
|
1277
1319
|
part="trigger">
|
|
1278
1320
|
${this.chevron === 'none' ? undefined : u`
|
|
1279
1321
|
<${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
|
|
@@ -1295,4 +1337,6 @@ class AuroAccordion extends i$2 {
|
|
|
1295
1337
|
}
|
|
1296
1338
|
}
|
|
1297
1339
|
|
|
1340
|
+
customElements.define('auro-accordion', AuroAccordion);
|
|
1341
|
+
|
|
1298
1342
|
AuroAccordion.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem/auro-accordion",
|
|
10
|
-
"version": "5.
|
|
10
|
+
"version": "5.2.0",
|
|
11
11
|
"description": "auro-accordion HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@alaskaairux/icons": "5.3.0",
|
|
24
|
-
"@aurodesignsystem/auro-button": "9.3.
|
|
24
|
+
"@aurodesignsystem/auro-button": "9.3.3",
|
|
25
25
|
"@aurodesignsystem/auro-icon": "8.0.2",
|
|
26
26
|
"@aurodesignsystem/auro-library": "4.4.1",
|
|
27
27
|
"chalk": "^5.4.1",
|
|
28
28
|
"lit": "^3.2.1",
|
|
29
|
-
"@aurodesignsystem/webcorestylesheets": "6.
|
|
29
|
+
"@aurodesignsystem/webcorestylesheets": "6.5.0",
|
|
30
30
|
"@aurodesignsystem/design-tokens": "5.14.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
@@ -15,6 +15,7 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
|
|
|
15
15
|
*
|
|
16
16
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
17
17
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
18
|
+
* @attr {Boolean} disabled - If set, the whole accordion inside the group are disabled and have reduced opacity.
|
|
18
19
|
* @attr {Boolean} noToggleExpanded - If set, multiple accordions can be open at the same time.
|
|
19
20
|
*/
|
|
20
21
|
|
|
@@ -43,6 +44,10 @@ export class AuroAccordionGroup extends LitElement {
|
|
|
43
44
|
variant: {
|
|
44
45
|
type: String,
|
|
45
46
|
reflect: true
|
|
47
|
+
},
|
|
48
|
+
disabled: {
|
|
49
|
+
type: Boolean,
|
|
50
|
+
reflect: true
|
|
46
51
|
}
|
|
47
52
|
};
|
|
48
53
|
}
|
|
@@ -64,6 +69,23 @@ export class AuroAccordionGroup extends LitElement {
|
|
|
64
69
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion-group');
|
|
65
70
|
}
|
|
66
71
|
|
|
72
|
+
updated(changedProperties) {
|
|
73
|
+
if (changedProperties.has('disabled')) {
|
|
74
|
+
this.updateDisabledState();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Updates the disabled state of all child <auro-accordion> elements
|
|
80
|
+
* to match the disabled state of the <auro-accordion-group> element.
|
|
81
|
+
*/
|
|
82
|
+
updateDisabledState() {
|
|
83
|
+
const accordions = this.querySelectorAll('auro-accordion');
|
|
84
|
+
accordions.forEach((accordion) => {
|
|
85
|
+
accordion.disabled = this.disabled;
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
|
|
67
89
|
handleSlotContentChange() {
|
|
68
90
|
this.addEventListener('toggleExpanded', this.handleToggleExpanded);
|
|
69
91
|
|
package/src/auro-accordion.js
CHANGED
|
@@ -36,6 +36,7 @@ import tokensCss from "./tokens-css.js";
|
|
|
36
36
|
* @attr {Boolean} expanded - If set, the accordion is expanded.
|
|
37
37
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
38
38
|
* @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
|
|
39
|
+
* @attr {Boolean} disabled - If set, the accordion is disabled and have reduced opacity.
|
|
39
40
|
* @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
|
|
40
41
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
41
42
|
* @slot - Default slot for the accordion content.
|
|
@@ -107,6 +108,10 @@ export class AuroAccordion extends LitElement {
|
|
|
107
108
|
variant: {
|
|
108
109
|
type: String,
|
|
109
110
|
reflect: true
|
|
111
|
+
},
|
|
112
|
+
disabled: {
|
|
113
|
+
type: Boolean,
|
|
114
|
+
reflect: true
|
|
110
115
|
}
|
|
111
116
|
};
|
|
112
117
|
}
|
|
@@ -185,6 +190,19 @@ export class AuroAccordion extends LitElement {
|
|
|
185
190
|
}));
|
|
186
191
|
}
|
|
187
192
|
|
|
193
|
+
/**
|
|
194
|
+
* Toggles the visibility of the accordion content when button gets clicked.
|
|
195
|
+
* @private
|
|
196
|
+
* @param {Event} event - The event object.
|
|
197
|
+
*/
|
|
198
|
+
handleButtonClick(event) {
|
|
199
|
+
if (this.disabled) {
|
|
200
|
+
event.preventDefault();
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
this.toggle();
|
|
204
|
+
}
|
|
205
|
+
|
|
188
206
|
// function that renders the HTML and CSS into the scope of the component
|
|
189
207
|
render() {
|
|
190
208
|
const buttonClasses = {
|
|
@@ -202,7 +220,9 @@ export class AuroAccordion extends LitElement {
|
|
|
202
220
|
id="accordionTrigger"
|
|
203
221
|
aria-controls="accordionContent"
|
|
204
222
|
?ariaexpanded="${this.expanded}"
|
|
205
|
-
|
|
223
|
+
?aria-disabled="${this.disabled}"
|
|
224
|
+
?disabled="${this.disabled}"
|
|
225
|
+
@click="${this.handleButtonClick}"
|
|
206
226
|
part="trigger">
|
|
207
227
|
${this.chevron === 'none' ? undefined : html`
|
|
208
228
|
<${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
|
|
@@ -223,3 +243,5 @@ export class AuroAccordion extends LitElement {
|
|
|
223
243
|
`;
|
|
224
244
|
}
|
|
225
245
|
}
|
|
246
|
+
|
|
247
|
+
customElements.define('auro-accordion', AuroAccordion);
|
package/src/color-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
|
|
2
|
+
export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host([disabled]){--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-disabled, $ds-basic-color-texticon-disabled)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
|
package/src/color.css
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
color:var(--ds-auro-accordion-trigger-icon-color);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
:host([disabled]){
|
|
10
|
+
--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-disabled, $ds-basic-color-texticon-disabled);
|
|
11
|
+
}
|
|
12
|
+
|
|
9
13
|
:host(:focus){
|
|
10
14
|
--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a);
|
|
11
15
|
}
|
package/src/color.scss
CHANGED
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
|
|
24
|
+
:host([disabled]) {
|
|
25
|
+
--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-disabled, $ds-basic-color-texticon-disabled);
|
|
26
|
+
}
|
|
27
|
+
|
|
23
28
|
:host(:focus) {
|
|
24
29
|
--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #{$ds-advanced-color-state-focused});
|
|
25
30
|
}
|
package/src/style-button-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .
|
|
2
|
+
export default css`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset;cursor:pointer}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);box-sizing:border-box}:host .auro-button:focus,:host .auro-button:focus-visible,:host .auro-button:focus-within{outline:0}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host([disabled]){cursor:not-allowed}:host([disabled]) .auro-button{pointer-events:none}:host(.sm) .auro-button{padding-top:var(--ds-size-150, 0.75rem);padding-bottom:var(--ds-size-150, 0.75rem)}:host(.lg) .auro-button{padding-top:var(--ds-size-250, 1.25rem);padding-bottom:var(--ds-size-250, 1.25rem)}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
|
package/src/style-button.css
CHANGED
|
@@ -3,19 +3,18 @@
|
|
|
3
3
|
}
|
|
4
4
|
:host{
|
|
5
5
|
border:unset;
|
|
6
|
+
cursor:pointer;
|
|
6
7
|
}
|
|
7
|
-
:host .
|
|
8
|
+
:host .auro-button{
|
|
8
9
|
all:unset;
|
|
9
10
|
width:100%;
|
|
10
11
|
padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);
|
|
11
12
|
box-sizing:border-box;
|
|
12
|
-
cursor:pointer;
|
|
13
|
-
pointer-events:none;
|
|
14
13
|
}
|
|
15
|
-
:host .
|
|
14
|
+
:host .auro-button:focus, :host .auro-button:focus-visible, :host .auro-button:focus-within{
|
|
16
15
|
outline:0;
|
|
17
16
|
}
|
|
18
|
-
:host .
|
|
17
|
+
:host .auro-button:after{
|
|
19
18
|
border-color:transparent;
|
|
20
19
|
}
|
|
21
20
|
:host .contentWrapper{
|
|
@@ -27,6 +26,13 @@
|
|
|
27
26
|
flex:1;
|
|
28
27
|
}
|
|
29
28
|
|
|
29
|
+
:host([disabled]){
|
|
30
|
+
cursor:not-allowed;
|
|
31
|
+
}
|
|
32
|
+
:host([disabled]) .auro-button{
|
|
33
|
+
pointer-events:none;
|
|
34
|
+
}
|
|
35
|
+
|
|
30
36
|
:host(.sm) .auro-button{
|
|
31
37
|
padding-top:var(--ds-size-150, 0.75rem);
|
|
32
38
|
padding-bottom:var(--ds-size-150, 0.75rem);
|
package/src/style-button.scss
CHANGED
|
@@ -12,18 +12,15 @@
|
|
|
12
12
|
|
|
13
13
|
:host {
|
|
14
14
|
border: unset;
|
|
15
|
+
cursor: pointer;
|
|
15
16
|
|
|
16
|
-
.
|
|
17
|
+
.auro-button {
|
|
17
18
|
all: unset;
|
|
18
19
|
width: 100%;
|
|
19
20
|
padding: var(--ds-size-200, $ds-size-200) var(--trigger-padding-right, 0)
|
|
20
21
|
var(--ds-size-200, $ds-size-200) var(--trigger-padding-left, 0);
|
|
21
22
|
box-sizing: border-box;
|
|
22
23
|
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
|
|
25
|
-
pointer-events: none;
|
|
26
|
-
|
|
27
24
|
&:focus,
|
|
28
25
|
&:focus-visible,
|
|
29
26
|
&:focus-within {
|
|
@@ -46,6 +43,14 @@
|
|
|
46
43
|
}
|
|
47
44
|
}
|
|
48
45
|
|
|
46
|
+
:host([disabled]) {
|
|
47
|
+
cursor: not-allowed;
|
|
48
|
+
|
|
49
|
+
.auro-button {
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
49
54
|
:host(.sm) {
|
|
50
55
|
.auro-button {
|
|
51
56
|
padding-top: var(--ds-size-150, $ds-size-150);
|
package/src/style-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;
|
|
2
|
+
export default css`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, 0.5rem)}:host([chevron=right]) .contentWrapper{padding-left:var(--ds-size-400, 2rem)}:host([chevron=right]:not([emphasis])) ::slotted([slot=trigger]){padding-left:var(--ds-size-250, 1.25rem)}:host([chevron=right]:not([emphasis])) .contentWrapper{padding-left:var(--ds-size-250, 1.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right:var(--ds-size-200, 1rem)}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;--trigger-padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis][variant=lg]) .trigger,:host([emphasis][variant=lg]) .contentWrapper{padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
|
package/src/style.css
CHANGED
package/src/style.scss
CHANGED
|
@@ -80,6 +80,23 @@ describe('auro-accordion-group', () => {
|
|
|
80
80
|
await expect(firstAccordion.hasAttribute('expanded')).to.be.true;
|
|
81
81
|
await expect(secondAccordion.hasAttribute('expanded')).to.be.true;
|
|
82
82
|
});
|
|
83
|
+
|
|
84
|
+
it('render with disabled attribute', async () => {
|
|
85
|
+
const el = await fixture(html`
|
|
86
|
+
<auro-accordion-group disabled>
|
|
87
|
+
<auro-accordion>
|
|
88
|
+
<span slot="trigger">Trigger</span>
|
|
89
|
+
<p>
|
|
90
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
91
|
+
</p>
|
|
92
|
+
</auro-accordion>
|
|
93
|
+
</auro-accordion-group>
|
|
94
|
+
`);
|
|
95
|
+
|
|
96
|
+
const accordion = el.querySelector('auro-accordion');
|
|
97
|
+
|
|
98
|
+
await expect(accordion.disabled).to.be.true;
|
|
99
|
+
});
|
|
83
100
|
});
|
|
84
101
|
|
|
85
102
|
async function defaultFixture() {
|
|
@@ -41,6 +41,46 @@ describe('auro-accordion', () => {
|
|
|
41
41
|
await expect(trigger.hasAttribute('ariaexpanded')).to.be.false;
|
|
42
42
|
await expect(shadowButton.getAttribute('aria-expanded')).to.equal('false');
|
|
43
43
|
});
|
|
44
|
+
|
|
45
|
+
it('render the disabled attribute', async () => {
|
|
46
|
+
const el = await fixture(html`
|
|
47
|
+
<auro-accordion disabled>
|
|
48
|
+
<span slot="trigger">Trigger</span>
|
|
49
|
+
<p>
|
|
50
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
51
|
+
</p>
|
|
52
|
+
</auro-accordion>
|
|
53
|
+
`);
|
|
54
|
+
|
|
55
|
+
const trigger = el.shadowRoot.querySelector('.trigger');
|
|
56
|
+
|
|
57
|
+
await expect(trigger.hasAttribute('aria-disabled')).to.not.null;
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
it('test toggle event when disabled is true', async () => {
|
|
61
|
+
const el = await defaultFixture();
|
|
62
|
+
el.disabled = true;
|
|
63
|
+
const trigger = el.shadowRoot.querySelector('.trigger');
|
|
64
|
+
trigger.click();
|
|
65
|
+
|
|
66
|
+
await elementUpdated(trigger);
|
|
67
|
+
await expect(trigger.hasAttribute('aria-expanded')).to.not.null;
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
it('render with chevron attribute value "none"', async () => {
|
|
71
|
+
const el = await fixture(html`
|
|
72
|
+
<auro-accordion chevron="none">
|
|
73
|
+
<span slot="trigger">Trigger</span>
|
|
74
|
+
<p>
|
|
75
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
76
|
+
</p>
|
|
77
|
+
</auro-accordion>
|
|
78
|
+
`);
|
|
79
|
+
|
|
80
|
+
const trigger = el.shadowRoot.querySelector('.trigger');
|
|
81
|
+
|
|
82
|
+
await expect(trigger.hasAttribute('chevron')).to.be.false;
|
|
83
|
+
});
|
|
44
84
|
});
|
|
45
85
|
|
|
46
86
|
async function defaultFixture() {
|