npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.2 → 3.0.0-alpha.4 - Mend

@ukic/web-components 3.0.0-alpha.2 → 3.0.0-alpha.4

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 (613) hide show

package/dist/collection/components/ic-accordion/ic-accordion.css CHANGED Viewed

@@ -443,27 +443,15 @@ video {
 :host {
   display: block;
-  border-bottom: var(--ic-border-default);
-  --ic-typography-color: currentcolor;
+  border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);
 }
-:host ic-typography,
 :host .expand-chevron {
-  color: var(--ic-color-text-primary);
-}
-:host(.ic-accordion-light) ic-typography,
-:host(.ic-accordion-light) .expanded-content,
-:host(.ic-accordion-light) .icon-container,
-:host(.ic-accordion-light) .expand-chevron {
-  color: var(--ic-architectural-white);
+  color: var(--ic-accordion-chevron);
 }
-:host(.ic-accordion-disabled) ic-typography,
-:host(.ic-accordion-disabled) .icon-container,
 :host(.ic-accordion-disabled) .expand-chevron {
-  color: var(--ic-architectural-500);
+  color: var(--ic-accordion-chevron-disabled);
 }
 .section-button.small {
@@ -475,7 +463,7 @@ video {
 }
 :host(:first-of-type) {
-  border-top: var(--ic-border-default);
+  border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);
 }
 :focus {
@@ -493,17 +481,24 @@ video {
 }
 .section-header {
+  --ic-typography-color: var(--ic-accordion-heading-text);
+  color: var(--ic-accordion-heading-text);
   text-align: left;
   flex: 1 0;
 }
-button:hover:enabled {
-  background-color: var(--ic-action-dark-bg-hover);
+:host(.ic-accordion-disabled) .section-header {
+  --ic-typography-color: var(--ic-accordion-heading-text-disabled);
+  color: var(--ic-accordion-heading-text-disabled);
+}
+button:hover {
+  background-color: var(--ic-accordion-background-hover);
   cursor: pointer;
 }
 button:active {
-  background-color: var(--ic-action-dark-bg-pressed);
+  background-color: var(--ic-accordion-background-pressed);
 }
 button:focus {
@@ -522,6 +517,11 @@ button:disabled {
   align-items: center;
   width: var(--ic-space-lg);
   height: var(--ic-space-lg);
+  color: var(--ic-accordion-icon);
+}
+:host(.ic-accordion-disabled) .icon-container {
+  color: var(--ic-accordion-icon-disabled);
 }
 ::slotted(svg) {
@@ -542,6 +542,8 @@ button:disabled {
 }
 .expanded-content {
+  --ic-typography-color: var(--ic-accordion-body-text);
+  color: var(--ic-accordion-body-text);
   height: 0;
   overflow: hidden;
   display: flex;

package/dist/collection/components/ic-accordion/ic-accordion.js CHANGED Viewed

@@ -53,12 +53,12 @@ export class Accordion {
                 });
             }
         };
-        this.appearance = "default";
         this.disabled = false;
         this.expanded = false;
         this.heading = "";
         this.message = "";
         this.size = "medium";
+        this.theme = "inherit";
     }
     // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close
     handleExpandedWatch() {
@@ -86,10 +86,10 @@ export class Accordion {
         }
     }
     render() {
-        const { appearance, size, disabled, expanded } = this;
+        const { size, disabled, expanded, theme } = this;
         return (h(Host, { id: this.accordionId, class: {
-                [`ic-accordion-${appearance}`]: true,
                 ["ic-accordion-disabled"]: disabled,
+                [`ic-theme-${theme}`]: theme !== "inherit",
             }, "aria-disabled": disabled ? "true" : "false" }, h("button", { ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
                 [`${size}`]: true,
                 ["section-button"]: true,
@@ -115,33 +115,6 @@ export class Accordion {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcThemeForeground",
-                    "resolved": "\"dark\" | \"default\" | \"light\"",
-                    "references": {
-                        "IcThemeForeground": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForeground"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Determines whether the light or dark variant of the accordion should be displayed."
-                        }],
-                    "text": ""
-                },
-                "attribute": "appearance",
-                "reflect": false,
-                "defaultValue": "\"default\""
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -237,6 +210,30 @@ export class Accordion {
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }

package/dist/collection/components/ic-accordion/ic-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAGxD,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;GAGG;AAOH,MAAM,OAAO,SAAS;;QACZ,gBAAW,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;QAG/C,gCAA2B,GAAG,kCAAkC,CAAC;QAgFjE,mBAAc,GAAG,GAAS,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC;QAEF,0BAA0B;QAClB,0BAAqB,GAAG,CAC9B,EAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,EAAE;YACF,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,GAAG,QAAQ,IAAI,CAAC;YAC9C,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,QAAQ,CAAC;YACvC,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;QACnC,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAChC,EAAmB,EACnB,eAA+B,EAC/B,EAAE;YACF,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;gBACrE,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;gBACzD,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACxC,CAAC;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAC5B,EAAmB,EACnB,eAA+B,EAC/B,EAAE;YACF,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;gBACvE,eAAe,CAAC,KAAK,CAAC,WAAW,CAC/B,IAAI,CAAC,2BAA2B,EAChC,QAAQ,CACT,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC;YAC1D,IAAI,aAAa,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACvC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;gBACF,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;gBAC3D,IAAI,CAAC,qBAAqB,CACxB,IAAI,CAAC,iBAAiB,EACtB,KAAK,EACL,QAAQ,EACR,UAAU,CACX,CAAC;gBAEF,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CACrC,eAAe,EACf,CAAC,CAAkB,EAAE,EAAE;oBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBAC1D,CAAC,CACF,CAAC;YACJ,CAAC;iBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC1B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,YAAY,IAAI,CAAC;gBACjF,IAAI,IAAI,CAAC,iBAAiB,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAC9D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;oBAC1C,IAAI,CAAC,qBAAqB,CACxB,IAAI,CAAC,iBAAiB,EACtB,KAAK,EACL,QAAQ,EACR,SAAS,CACV,CAAC;oBACF,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC;gBACrE,CAAC;gBACD,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBAC7D,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;0BAtJuC,SAAS;wBAKrB,KAAK;wBAKW,KAAK;uBAKvB,EAAE;uBAKF,EAAE;oBAKJ,QAAQ;;IAOjC,4FAA4F;IAE5F,mBAAmB;QACjB,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;QACZ,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CACxC,eAAe,EACf,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAC9D,IAAI,CACL,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CACxC,eAAe,EACf,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAC1D,IAAI,CACL,CAAC;QACJ,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,wDAAwD;QACxD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC7C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;QACJ,CAAC;IACH,CAAC;IAgFD,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACtD,OAAO,CACL,EAAC,IAAI,IACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,EAAE;gBACL,CAAC,gBAAgB,UAAU,EAAE,CAAC,EAAE,IAAI;gBACpC,CAAC,uBAAuB,CAAC,EAAE,QAAQ;aACpC,mBACc,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE1C,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EAC5C,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,SAAS,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,KAAK,EAAE;oBACL,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;oBACjB,CAAC,gBAAgB,CAAC,EAAE,IAAI;oBACxB,CAAC,qBAAqB,CAAC,EAAE,QAAQ,IAAI,CAAC,QAAQ;iBAC/C,mBACc,GAAG,QAAQ,EAAE,mBACd,uBAAuB,EACrC,OAAO,EAAE,IAAI,CAAC,cAAc;gBAE3B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,WAAK,KAAK,EAAC,gBAAgB;oBACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;gBACD,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,gBAAgB,IAC3D,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAChC,YAAM,IAAI,EAAC,SAAS,GAAG,CACxB,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,OAAO,CACb,CACa;gBAChB,YACE,KAAK,EAAE;wBACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;wBACxB,CAAC,0BAA0B,CAAC,EAAE,QAAQ,IAAI,CAAC,QAAQ;qBACpD,iBACW,MAAM,EAClB,SAAS,EAAE,WAAW,GACtB,CACK;YACT,WACE,KAAK,EAAE;oBACL,CAAC,kBAAkB,CAAC,EAAE,IAAI;iBAC3B,qBACgB,GAAG,IAAI,CAAC,WAAW,SAAS,EAC7C,IAAI,EAAC,QAAQ,iBACA,GAAG,CAAC,QAAQ,EAAE,EAC3B,EAAE,EAAC,uBAAuB,EAC1B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;gBAE1C,WAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,qBAAe,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,CAAiB,CAC7D,CAAC,CAAC,CAAC,CACF,eAAQ,CACT,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/*\n @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl: HTMLDivElement;\n private accordionBtnHeading: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n /\n @internal Determines whether the light or dark variant of the accordion should be displayed.\n /\n @Prop() appearance?: IcThemeForeground = \"default\";\n\n /\n If `true`, the accordion will be disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the accordion appears expanded.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n The section header outlining section content.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the accordion.\n /\n @Prop() message?: string = \"\";\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n @internal Emitted when accordion is clicked.\n /\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /\n Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.accordionBtnHeading) {\n this.accordionBtnHeading.focus();\n }\n }\n\n disconnectedCallback(): void {\n if (this.expandedContentEl) {\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n true\n );\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, this.expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(\"expanded-content-opened\");\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n const elementHeight = this.expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n this.expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, this.expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n this.expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n }\n this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, this.expandedContentEl);\n });\n }\n };\n\n render() {\n const { appearance, size, disabled, expanded } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [`ic-accordion-${appearance}`]: true,\n [\"ic-accordion-disabled\"]: disabled,\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/*\n @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl: HTMLDivElement;\n private accordionBtnHeading: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n\n /\n If `true`, the accordion will be disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the accordion appears expanded.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n The section header outlining section content.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the accordion.\n /\n @Prop() message?: string = \"\";\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal Emitted when accordion is clicked.\n /\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /\n Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.accordionBtnHeading) {\n this.accordionBtnHeading.focus();\n }\n }\n\n disconnectedCallback(): void {\n if (this.expandedContentEl) {\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n true\n );\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, this.expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(\"expanded-content-opened\");\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n const elementHeight = this.expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n this.expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, this.expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n this.expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n }\n this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, this.expandedContentEl);\n });\n }\n };\n\n render() {\n const { size, disabled, expanded, theme } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [\"ic-accordion-disabled\"]: disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js CHANGED Viewed

@@ -14,17 +14,17 @@ describe("ic-accordion snapshots", () => {
         });
         expect(page.root).toMatchSnapshot("renders as default");
     });
-    it("should match light snapshot", async () => {
+    it("should match dark snapshot", async () => {
         const page = await newSpecPage({
             components: [Accordion],
             html: `
-      <ic-accordion heading="Accordion 1">
+      <ic-accordion heading="Accordion 1" theme="dark">
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
         });
-        expect(page.root).toMatchSnapshot("renders as light");
+        expect(page.root).toMatchSnapshot("renders as dark");
     });
     it("should match with icon snapshot", async () => {
         const page = await newSpecPage({

package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-accordion.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion/test/basic/ic-accordion.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Accordion } from \"../../ic-accordion\";\n\ndescribe(\"ic-accordion snapshots\", () => {\n it(\"should match default snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n `,\n });\n expect(page.root).toMatchSnapshot(\"renders as default\");\n });\n\n it(\"should match light snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders as light\");\n });\n\n it(\"should match with icon snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <svg\n slot=\"icon\"\n width=\"20\"\n height=\"1em\"\n viewBox=\"0 0 512 512\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\"\n />\n </svg>\n <ic-typography variant=\"body\">\n This is an example of the main body text\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders with icon\");\n });\n\n it(\"should render with slot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" size=\"small\">\n <slot>This is an example of the main body text.</slot>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders small accordion\");\n });\n\n it(\"should match small snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" size=\"small\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders small accordion\");\n });\n\n it(\"should match large snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion size=\"large\" heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders large accordion\");\n });\n\n it(\"should render with a heading slot when supplied\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: ` \n <ic-accordion>\n <slot name=\"heading\"/></slot>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders with heading slot\");\n });\n\n it(\"should render in a disabled state\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"disabled\");\n });\n\n describe(\"ic-accordion component\", () => {\n it(\"it should test the toggleExpanded function\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n expect(page.root.expanded).toBe(false);\n await page.rootInstance.toggleExpanded();\n await page.waitForChanges();\n expect(page.root.expanded).toBe(true);\n });\n\n it(\"should test id number is added to accordion\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const eventSpy = jest.fn();\n\n const accordionId = page.root.id;\n page.root.addEventListener(\"accordionClicked\", eventSpy);\n await page.waitForChanges();\n await page.rootInstance.toggleExpanded();\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: expect.objectContaining({\n id: accordionId,\n }),\n })\n );\n });\n\n it(\"it should test the disabled function\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root.disabled).toBe(true);\n });\n\n it(\"it should add transition styling to the element\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const div = document.createElement(\"div\");\n page.rootInstance.setAccordionAnimation(div, \"300\", \"height\", \"ease-out\");\n expect(div.style.transitionDuration).toBe(\"300ms\");\n expect(div.style.transitionProperty).toBe(\"height\");\n expect(div.style.transitionDelay).toBe(\"ease-out\");\n });\n\n it(\"it should call setAccordionAnimation if scroll height > 0 and expanded = true\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" expanded>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const spySetAccordionAnimation = jest.spyOn(\n page.rootInstance,\n \"setAccordionAnimation\"\n );\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n Object.defineProperty(\n page.rootInstance.expandedContentEl,\n \"scrollHeight\",\n { configurable: true, value: 500 }\n );\n page.rootInstance.animateExpandedContent();\n\n expect(spySetAccordionAnimation).toHaveBeenCalled();\n });\n\n it(\"it should call setAccordionAnimation if scroll height = '500' and expanded = 'false'\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const spySetAccordionAnimation = jest.spyOn(\n page.rootInstance,\n \"setAccordionAnimation\"\n );\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n\n Object.defineProperty(\n page.rootInstance.expandedContentEl,\n \"scrollHeight\",\n { configurable: true, value: 500 }\n );\n page.rootInstance.animateExpandedContent();\n expect(spySetAccordionAnimation).toHaveBeenCalled();\n });\n\n it(\"should set height and .expanded-content-opened on expanded content\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 50;\n\n await page.rootInstance.setExpandedContentStyle(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n page.rootInstance.expandedContentEl.className.split(\" \")\n ).toContain(\"expanded-content-opened\");\n expect(page.rootInstance.expandedContentEl.style.height).toBe(\"auto\");\n });\n\n it(\"should not set height and .expanded-content-opened on expanded content\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 0;\n\n await page.rootInstance.setExpandedContentStyle(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n page.rootInstance.expandedContentEl.className.split(\" \")\n ).not.toContain(\"expanded-content-opened\");\n expect(page.rootInstance.expandedContentEl.style.height).toBe(\"\");\n\n await page.rootInstance.disconnectedCallback();\n });\n\n it(\"should set visibility on expanded content to hidden\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 0;\n\n await page.rootInstance.hideExpandedContent(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n (\n page.rootInstance.expandedContentEl as HTMLDivElement\n ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n ).toBe(\"hidden\");\n });\n\n it(\"should set visibility to undefined if client height is greater than 0\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 50;\n\n await page.rootInstance.hideExpandedContent(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n (\n page.rootInstance.expandedContentEl as HTMLDivElement\n ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n ).toBe(\"\");\n });\n\n it(\"should call 'setFocus' when accordion can be focused\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n //Can't expect anything in this test - this is to increase code coverage only\n await page.rootInstance.setFocus().toHaveBeenCalled;\n });\n\n it(\"should call setExpandedContentStyle when transitionend in animateExpandedContent and expanded is true\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const setExpandedContentStyleSpy = jest.spyOn(\n page.rootInstance,\n \"setExpandedContentStyle\"\n );\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.scrollHeight = 50;\n page.rootInstance.expanded = true;\n\n await page.rootInstance.animateExpandedContent();\n\n const event = new Event(\"transitionend\");\n page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n expect(setExpandedContentStyleSpy).toHaveBeenCalled();\n });\n\n it(\"should call hideExpandedContent when transitionend in animateExpandedContent and expanded is false\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const hideExpandedContentSpy = jest.spyOn(\n page.rootInstance,\n \"hideExpandedContent\"\n );\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.scrollHeight = 50;\n page.rootInstance.expanded = false;\n\n await page.rootInstance.animateExpandedContent();\n\n const event = new Event(\"transitionend\");\n page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n expect(hideExpandedContentSpy).toHaveBeenCalled();\n });\n });\n});\n"]}
1	+ {"version":3,"file":"ic-accordion.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion/test/basic/ic-accordion.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Accordion } from \"../../ic-accordion\";\n\ndescribe(\"ic-accordion snapshots\", () => {\n it(\"should match default snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n `,\n });\n expect(page.root).toMatchSnapshot(\"renders as default\");\n });\n\n it(\"should match dark snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" theme=\"dark\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders as dark\");\n });\n\n it(\"should match with icon snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <svg\n slot=\"icon\"\n width=\"20\"\n height=\"1em\"\n viewBox=\"0 0 512 512\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\"\n />\n </svg>\n <ic-typography variant=\"body\">\n This is an example of the main body text\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders with icon\");\n });\n\n it(\"should render with slot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" size=\"small\">\n <slot>This is an example of the main body text.</slot>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders small accordion\");\n });\n\n it(\"should match small snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" size=\"small\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders small accordion\");\n });\n\n it(\"should match large snapshot\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion size=\"large\" heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders large accordion\");\n });\n\n it(\"should render with a heading slot when supplied\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: ` \n <ic-accordion>\n <slot name=\"heading\"/></slot>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"renders with heading slot\");\n });\n\n it(\"should render in a disabled state\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root).toMatchSnapshot(\"disabled\");\n });\n\n describe(\"ic-accordion component\", () => {\n it(\"it should test the toggleExpanded function\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n expect(page.root.expanded).toBe(false);\n await page.rootInstance.toggleExpanded();\n await page.waitForChanges();\n expect(page.root.expanded).toBe(true);\n });\n\n it(\"should test id number is added to accordion\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const eventSpy = jest.fn();\n\n const accordionId = page.root.id;\n page.root.addEventListener(\"accordionClicked\", eventSpy);\n await page.waitForChanges();\n await page.rootInstance.toggleExpanded();\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalledWith(\n expect.objectContaining({\n detail: expect.objectContaining({\n id: accordionId,\n }),\n })\n );\n });\n\n it(\"it should test the disabled function\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n expect(page.root.disabled).toBe(true);\n });\n\n it(\"it should add transition styling to the element\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" disabled>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const div = document.createElement(\"div\");\n page.rootInstance.setAccordionAnimation(div, \"300\", \"height\", \"ease-out\");\n expect(div.style.transitionDuration).toBe(\"300ms\");\n expect(div.style.transitionProperty).toBe(\"height\");\n expect(div.style.transitionDelay).toBe(\"ease-out\");\n });\n\n it(\"it should call setAccordionAnimation if scroll height > 0 and expanded = true\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" expanded>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const spySetAccordionAnimation = jest.spyOn(\n page.rootInstance,\n \"setAccordionAnimation\"\n );\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n Object.defineProperty(\n page.rootInstance.expandedContentEl,\n \"scrollHeight\",\n { configurable: true, value: 500 }\n );\n page.rootInstance.animateExpandedContent();\n\n expect(spySetAccordionAnimation).toHaveBeenCalled();\n });\n\n it(\"it should call setAccordionAnimation if scroll height = '500' and expanded = 'false'\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n const spySetAccordionAnimation = jest.spyOn(\n page.rootInstance,\n \"setAccordionAnimation\"\n );\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n\n Object.defineProperty(\n page.rootInstance.expandedContentEl,\n \"scrollHeight\",\n { configurable: true, value: 500 }\n );\n page.rootInstance.animateExpandedContent();\n expect(spySetAccordionAnimation).toHaveBeenCalled();\n });\n\n it(\"should set height and .expanded-content-opened on expanded content\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 50;\n\n await page.rootInstance.setExpandedContentStyle(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n page.rootInstance.expandedContentEl.className.split(\" \")\n ).toContain(\"expanded-content-opened\");\n expect(page.rootInstance.expandedContentEl.style.height).toBe(\"auto\");\n });\n\n it(\"should not set height and .expanded-content-opened on expanded content\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 0;\n\n await page.rootInstance.setExpandedContentStyle(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n page.rootInstance.expandedContentEl.className.split(\" \")\n ).not.toContain(\"expanded-content-opened\");\n expect(page.rootInstance.expandedContentEl.style.height).toBe(\"\");\n\n await page.rootInstance.disconnectedCallback();\n });\n\n it(\"should set visibility on expanded content to hidden\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 0;\n\n await page.rootInstance.hideExpandedContent(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n (\n page.rootInstance.expandedContentEl as HTMLDivElement\n ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n ).toBe(\"hidden\");\n });\n\n it(\"should set visibility to undefined if client height is greater than 0\", async () => {\n const transitionEvent = {\n propertyName: \"height\",\n } as TransitionEvent;\n\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.clientHeight = 50;\n\n await page.rootInstance.hideExpandedContent(\n transitionEvent,\n page.rootInstance.expandedContentEl\n );\n\n expect(\n (\n page.rootInstance.expandedContentEl as HTMLDivElement\n ).style.getPropertyValue(\"--ic-expanded-content-visibility\")\n ).toBe(\"\");\n });\n\n it(\"should call 'setFocus' when accordion can be focused\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n //Can't expect anything in this test - this is to increase code coverage only\n await page.rootInstance.setFocus().toHaveBeenCalled;\n });\n\n it(\"should call setExpandedContentStyle when transitionend in animateExpandedContent and expanded is true\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const setExpandedContentStyleSpy = jest.spyOn(\n page.rootInstance,\n \"setExpandedContentStyle\"\n );\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.scrollHeight = 50;\n page.rootInstance.expanded = true;\n\n await page.rootInstance.animateExpandedContent();\n\n const event = new Event(\"transitionend\");\n page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n expect(setExpandedContentStyleSpy).toHaveBeenCalled();\n });\n\n it(\"should call hideExpandedContent when transitionend in animateExpandedContent and expanded is false\", async () => {\n const page = await newSpecPage({\n components: [Accordion],\n html: `\n <ic-accordion heading=\"Accordion 1\" >\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>`,\n });\n\n const hideExpandedContentSpy = jest.spyOn(\n page.rootInstance,\n \"hideExpandedContent\"\n );\n\n const accordionExpanded =\n page.root.shadowRoot.querySelector(\".expanded-content\");\n page.rootInstance.expandedContentEl = accordionExpanded;\n page.rootInstance.expandedContentEl.scrollHeight = 50;\n page.rootInstance.expanded = false;\n\n await page.rootInstance.animateExpandedContent();\n\n const event = new Event(\"transitionend\");\n page.rootInstance.expandedContentEl.dispatchEvent(event);\n\n expect(hideExpandedContentSpy).toHaveBeenCalled();\n });\n });\n});\n"]}

package/dist/collection/components/ic-accordion-group/ic-accordion-group.css CHANGED Viewed

@@ -442,6 +442,8 @@ video {
 .label-container {
+  --ic-typography-color: var(--ic-accordion-group-title-text);
+  color: var(--ic-accordion-group-title-text);
   padding: var(--ic-space-xs);
   display: flex;
   justify-content: space-between;
@@ -455,15 +457,3 @@ video {
 :host(.ic-accordion-group-large) .label-container {
   padding: var(--ic-space-sm) var(--ic-space-xs);
 }
-:host(.ic-accordion-group-light) {
-  color: var(--ic-color-white-text);
-  --ic-typography-color: var(--ic-color-white-text);
-}
-:host(.ic-accordion-group.ic-accordion-group-dark) ::slotted(ic-accordion) {
-  color: var(--ic-color-white-text);
-  --ic-typography-color: var(--ic-color-white-text);
-}

package/dist/collection/components/ic-accordion-group/ic-accordion-group.js CHANGED Viewed

@@ -36,15 +36,15 @@ export class AccordionGroup {
         this.accordions = undefined;
         this.areAllAccordionsOpen = undefined;
         this.accessibleButtonLabel = "accordions";
-        this.appearance = "default";
+        this.theme = "inherit";
         this.expanded = false;
         this.label = "";
         this.singleExpansion = false;
         this.size = "medium";
     }
-    watchAppearanceHandler() {
+    watchThemeHandler() {
         this.accordions.forEach((acc) => {
-            acc.appearance = this.appearance;
+            acc.theme = this.theme;
         });
     }
     watchExpandedHandler() {
@@ -55,7 +55,7 @@ export class AccordionGroup {
         this.accordions = Array.from(accordionDirectChildren).filter((child) => child.tagName === "IC-ACCORDION");
         this.linkAccordions();
         this.accordions.forEach((acc) => {
-            acc.appearance = this.appearance;
+            acc.theme = this.theme;
         });
         this.accordions.forEach((acc) => {
             acc.size = this.size;
@@ -95,12 +95,12 @@ export class AccordionGroup {
         focusEl.setFocus();
     }
     render() {
-        const { appearance, size, label, singleExpansion, accessibleButtonLabel } = this;
+        const { size, label, singleExpansion, accessibleButtonLabel, theme } = this;
         return (h(Host, { "context-id": this.accordionGroupId, class: {
-                [`ic-accordion-group-${appearance}`]: true,
                 [`ic-accordion-group-${size}`]: true,
                 ["ic-accordion-group"]: true,
-            } }, h("div", { class: "label-container" }, h("ic-typography", { variant: "h4" }, h("h3", null, isSlotUsed(this.el, "label") ? h("slot", { name: "label" }) : label)), !singleExpansion && (h("ic-button", { ref: (el) => (this.allButtonEl = el), appearance: appearance === "light" ? "light" : "default", onClick: this.handleExpanded, variant: "tertiary", "aria-label": `${this.accordionOpenBtnText()} ${accessibleButtonLabel}` }, this.accordionOpenBtnText()))), h("slot", null)));
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("div", { class: "label-container" }, h("ic-typography", { variant: "h4" }, h("h3", null, isSlotUsed(this.el, "label") ? h("slot", { name: "label" }) : label)), !singleExpansion && (h("ic-button", { ref: (el) => (this.allButtonEl = el), onClick: this.handleExpanded, variant: "tertiary", "aria-label": `${this.accordionOpenBtnText()} ${accessibleButtonLabel}` }, this.accordionOpenBtnText()))), h("slot", null)));
     }
     static get is() { return "ic-accordion-group"; }
     static get encapsulation() { return "shadow"; }
@@ -134,29 +134,29 @@ export class AccordionGroup {
                 "reflect": false,
                 "defaultValue": "\"accordions\""
             },
-            "appearance": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcThemeForeground",
-                    "resolved": "\"dark\" | \"default\" | \"light\"",
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                     "references": {
-                        "IcThemeForeground": {
+                        "IcThemeMode": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForeground"
+                            "id": "src/utils/types.ts::IcThemeMode"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The appearance of the accordion group, e.g dark, or light."
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "appearance",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"inherit\""
             },
             "expanded": {
                 "type": "boolean",
@@ -268,8 +268,8 @@ export class AccordionGroup {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "appearance",
-                "methodName": "watchAppearanceHandler"
+                "propName": "theme",
+                "methodName": "watchThemeHandler"
             }, {
                 "propName": "expanded",
                 "methodName": "watchExpandedHandler"

package/dist/collection/components/ic-accordion-group/ic-accordion-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-accordion-group.js","sourceRoot":"","sources":["../../../src/components/ic-accordion-group/ic-accordion-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;GAEG;AAMH,MAAM,OAAO,cAAc;;QACjB,qBAAgB,GAAG,sBAAsB,iBAAiB,EAAE,EAAE,CAAC;QAkG/D,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC9B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC9B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC9B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,CAAC,iCAAiC,EAAE,CAAC;QAC3C,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;gBACpC,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC9D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,sCAAiC,GAAG,GAAG,EAAE;YAC/C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAC/C,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CACpC,CAAC;QACJ,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAG,EAAE;YAClC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;QAC7D,CAAC,CAAC;;;qCAnHsC,YAAY;~~0BAKZ~~,SAAS;~~wBAWJ~~,KAAK;qBAS1B,EAAE;+BAKS,KAAK;oBAKf,QAAQ;;IA5BjC,~~sBAAsB~~;~~QACpB~~,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAC9B,GAAG,CAAC,~~UAAU~~,GAAG,IAAI,CAAC,~~UAAU~~,CAAC;~~QACnC~~,CAAC,CAAC,CAAC;IACL,CAAC;IAOD,oBAAoB;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAiBD,gBAAgB;QACd,MAAM,uBAAuB,GAAI,IAAI,CAAC,EAAkB,CAAC,QAAQ,CAAC;QAClE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,MAAM,CAC1D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,cAAc,CAChB,CAAC;QAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAC9B,GAAG,CAAC,~~UAAU~~,GAAG,IAAI,CAAC,~~UAAU~~,CAAC;~~QACnC~~,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAC9B,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,CAAC,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC9B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;YACtB,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,iCAAiC,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iCAAiC,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAC5C,CAAC;IACH,CAAC;IAGD,sBAAsB,CAAC,KAAkB;QACvC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,+FAA+F;YAC/F,IAAI,CAAC,iCAAiC,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC9B,IAAI,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC;oBAC/C,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACvB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,QAAQ;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe;YAClC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACpB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QACrB,OAAO,CAAC,QAAQ,EAAE,CAAC;IACrB,CAAC;IAiCD,MAAM;QACJ,MAAM,EAAE,~~UAAU,EAAE,~~IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,~~GACvE~~,IAAI,CAAC;~~QACP~~,OAAO,CACL,EAAC,IAAI,kBACS,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAE;gBACL,CAAC,sBAAsB,~~UAAU~~,EAAE,CAAC,EAAE,IAAI;~~gBAC1C~~,CAAC,~~sBAAsB~~,~~IAAI,EAAE,~~CAAC,EAAE,IAAI;~~gBACpC~~,CAAC,~~oBAAoB~~,CAAC,EAAE,~~IAAI~~;~~aAC7B~~;YAED,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,qBAAe,OAAO,EAAC,IAAI;oBACzB,cACG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,CAC1D,CACS;gBACf,CAAC,eAAe,IAAI,CACnB,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,~~UAAU,EAAE,UAAU,KAAK,~~OAAO,~~CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACxD,OAAO,~~EAAE,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAC,UAAU,gBACN,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,qBAAqB,EAAE,IAEpE,IAAI,CAAC,oBAAoB,EAAE,CAClB,CACb,CACG;YACN,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { ~~IcThemeForeground~~, ~~IcSizes~~ } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/*\n @slot label - Content is placed as the accordion group title.\n /\n@Component({\n tag: \"ic-accordion-group\",\n styleUrl: \"ic-accordion-group.css\",\n shadow: true,\n})\nexport class AccordionGroup {\n private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n private allButtonEl: HTMLIcButtonElement;\n\n @Element() el: HTMLIcAccordionGroupElement;\n\n @State() accordions: HTMLIcAccordionElement[];\n\n @State() areAllAccordionsOpen: boolean;\n\n /\n The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n /\n @Prop() accessibleButtonLabel: string = \"accordions\";\n\n /\n ~~The~~ ~~appearance~~ of the ~~accordion~~ ~~group,~~ e.g ~~dark,~~ or ~~light~~.\n /\n @Prop() ~~appearance:~~ ~~IcThemeForeground~~ = \"~~default~~\";\n @Watch(\"~~appearance~~\")\n ~~watchAppearanceHandler~~() {\n this.accordions.forEach((acc) => {\n acc.~~appearance~~ = this.~~appearance~~;\n });\n }\n\n /\n If `true`, the accordion will load in an expanded state.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler() {\n this.handleExpanded();\n }\n\n /\n The header for the accordion group.\n /\n @Prop() label: string = \"\";\n\n /\n If `true`, only one accordion will open at a time.\n /\n @Prop() singleExpansion: boolean = false;\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n componentDidLoad(): void {\n const accordionDirectChildren = (this.el as HTMLElement).children;\n this.accordions = Array.from(accordionDirectChildren).filter(\n (child) => child.tagName === \"IC-ACCORDION\"\n ) as HTMLIcAccordionElement[];\n this.linkAccordions();\n this.accordions.forEach((acc) => {\n acc.~~appearance~~ = this.~~appearance~~;\n });\n this.accordions.forEach((acc) => {\n acc.size = this.size;\n });\n if (this.expanded) {\n this.accordions.forEach((acc) => {\n acc.expanded = true;\n });\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.setExpandedToAreAllAccordionsOpen();\n this.expanded = this.areAllAccordionsOpen;\n }\n }\n\n @Listen(\"accordionClicked\")\n handleAccordionClicked(event: CustomEvent): void {\n if (!this.singleExpansion) {\n // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.accordions.forEach((acc) => {\n if (acc.expanded && event.detail.id !== acc.id) {\n acc.expanded = false;\n }\n });\n }\n }\n\n /\n Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n * Otherwise, the first accordion will be focused.\n */\n @Method()\n async setFocus(): Promise<void> {\n const focusEl = this.singleExpansion\n ? this.accordions[0]\n : this.allButtonEl;\n focusEl.setFocus();\n }\n\n private handleExpanded = () => {\n if (this.areAllAccordionsOpen) {\n this.expanded = false;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n } else {\n this.expanded = true;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n }\n this.setExpandedToAreAllAccordionsOpen();\n };\n\n private linkAccordions = () => {\n this.accordions.forEach((accordion) => {\n accordion.setAttribute(\"context-id\", this.accordionGroupId);\n });\n };\n\n private setExpandedToAreAllAccordionsOpen = () => {\n this.areAllAccordionsOpen = this.accordions.every(\n (accordion) => !!accordion.expanded\n );\n };\n\n private accordionOpenBtnText = () => {\n return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n };\n\n render() {\n const { ~~appearance,~~ size, label, singleExpansion, accessibleButtonLabel } ~~=\n~~ this;\n return (\n <Host\n context-id={this.accordionGroupId}\n class={{\n [`ic-accordion-group-${~~appearance~~}`]: true,\n [`ic-accordion-group~~-${size}`~~]: true,\n [\"ic-~~accordion-group\"~~]: ~~true~~,\n }}\n >\n <div class=\"label-container\">\n <ic-typography variant=\"h4\">\n <h3>\n {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n </h3>\n </ic-typography>\n {!singleExpansion && (\n <ic-button\n ref={(el) => (this.allButtonEl = el)}\n ~~appearance={appearance === \"light\" ? \"light\" : \"default\"}\n~~ onClick={this.handleExpanded}\n variant=\"tertiary\"\n aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n >\n {this.accordionOpenBtnText()}\n </ic-button>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-accordion-group.js","sourceRoot":"","sources":["../../../src/components/ic-accordion-group/ic-accordion-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/*\n @slot label - Content is placed as the accordion group title.\n /\n@Component({\n tag: \"ic-accordion-group\",\n styleUrl: \"ic-accordion-group.css\",\n shadow: true,\n})\nexport class AccordionGroup {\n private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n private allButtonEl: HTMLIcButtonElement;\n\n @Element() el: HTMLIcAccordionGroupElement;\n\n @State() accordions: HTMLIcAccordionElement[];\n\n @State() areAllAccordionsOpen: boolean;\n\n /\n The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n /\n @Prop() accessibleButtonLabel: string = \"accordions\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n }\n\n /\n If `true`, the accordion will load in an expanded state.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler() {\n this.handleExpanded();\n }\n\n /\n The header for the accordion group.\n /\n @Prop() label: string = \"\";\n\n /\n If `true`, only one accordion will open at a time.\n /\n @Prop() singleExpansion: boolean = false;\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n componentDidLoad(): void {\n const accordionDirectChildren = (this.el as HTMLElement).children;\n this.accordions = Array.from(accordionDirectChildren).filter(\n (child) => child.tagName === \"IC-ACCORDION\"\n ) as HTMLIcAccordionElement[];\n this.linkAccordions();\n this.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n this.accordions.forEach((acc) => {\n acc.size = this.size;\n });\n if (this.expanded) {\n this.accordions.forEach((acc) => {\n acc.expanded = true;\n });\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.setExpandedToAreAllAccordionsOpen();\n this.expanded = this.areAllAccordionsOpen;\n }\n }\n\n @Listen(\"accordionClicked\")\n handleAccordionClicked(event: CustomEvent): void {\n if (!this.singleExpansion) {\n // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.accordions.forEach((acc) => {\n if (acc.expanded && event.detail.id !== acc.id) {\n acc.expanded = false;\n }\n });\n }\n }\n\n /\n Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n * Otherwise, the first accordion will be focused.\n */\n @Method()\n async setFocus(): Promise<void> {\n const focusEl = this.singleExpansion\n ? this.accordions[0]\n : this.allButtonEl;\n focusEl.setFocus();\n }\n\n private handleExpanded = () => {\n if (this.areAllAccordionsOpen) {\n this.expanded = false;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n } else {\n this.expanded = true;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n }\n this.setExpandedToAreAllAccordionsOpen();\n };\n\n private linkAccordions = () => {\n this.accordions.forEach((accordion) => {\n accordion.setAttribute(\"context-id\", this.accordionGroupId);\n });\n };\n\n private setExpandedToAreAllAccordionsOpen = () => {\n this.areAllAccordionsOpen = this.accordions.every(\n (accordion) => !!accordion.expanded\n );\n };\n\n private accordionOpenBtnText = () => {\n return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n };\n\n render() {\n const { size, label, singleExpansion, accessibleButtonLabel, theme } = this;\n return (\n <Host\n context-id={this.accordionGroupId}\n class={{\n [`ic-accordion-group-${size}`]: true,\n [\"ic-accordion-group\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"label-container\">\n <ic-typography variant=\"h4\">\n <h3>\n {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n </h3>\n </ic-typography>\n {!singleExpansion && (\n <ic-button\n ref={(el) => (this.allButtonEl = el)}\n onClick={this.handleExpanded}\n variant=\"tertiary\"\n aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n >\n {this.accordionOpenBtnText()}\n </ic-button>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.spec.js CHANGED Viewed

@@ -13,12 +13,12 @@ describe("ic-accordion-group snapshots", () => {
         });
         expect(page.root).toMatchSnapshot("renders as default");
     });
-    it("should match light snapshot", async () => {
+    it("should match dark snapshot", async () => {
         const page = await newSpecPage({
             components: [AccordionGroup],
-            html: `<ic-accordion-group appearance="light" label="Test heading"></ic-accordion-group>`,
+            html: `<ic-accordion-group theme="dark" label="Test heading"></ic-accordion-group>`,
         });
-        expect(page.root).toMatchSnapshot("renders as light");
+        expect(page.root).toMatchSnapshot("renders as dark");
     });
 });
 describe("ic-accordion-group functions unit test", () => {