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

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", () => {