@ukic/web-components 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/collection/components/ic-divider/ic-divider.js

@@ -1,18 +1,80 @@
-import { h, Host } from "@stencil/core";
-import { getThemeForegroundColor } from "../../utils/helpers";
-import { IcThemeForegroundEnum, } from "../../utils/types";
+import { h, Host, } from "@stencil/core";
+import { getThemeForegroundColor, isPropDefined, slotHasContent, } from "../../utils/helpers";
 export class Divider {
     constructor() {
         this.foregroundColor = getThemeForegroundColor();
+        this.borderStyle = "solid";
+        this.label = undefined;
+        this.labelPlacement = "center";
+        this.monochrome = false;
+        this.orientation = "horizontal";
+        this.theme = "inherit";
+        this.weight = "thin";
     }
     themeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.foregroundColor = theme.mode;
+        this.foregroundColor = ev.detail.mode;
+    }
+    updateMonochromeState() {
+        const isBottomSideNav = this.el.parentElement.classList.contains("bottom-side-nav");
+        const isBottomWrapper = this.el.parentElement.parentElement.classList.contains("bottom-wrapper");
+        if (this.el.parentElement.tagName === "IC-SIDE-NAVIGATION" ||
+            (isBottomSideNav && isBottomWrapper)) {
+            this.el.classList.add("ic-side-navigation-keyline");
+            if (this.foregroundColor === "light") {
+                this.theme = "dark";
+            }
+            else {
+                this.theme = "light";
+            }
+        }
+    }
+    componentWillRender() {
+        this.updateMonochromeState();
     }
     render() {
-        return (h(Host, { "aria-hidden": "true" }, h("hr", { class: {
-                ["light"]: this.foregroundColor === IcThemeForegroundEnum.Light,
-            } })));
+        const { borderStyle, label, labelPlacement, monochrome, orientation, weight, } = this;
+        const { theme } = this;
+        const invalidPropCombination = (placement) => {
+            console.error(`${placement.charAt(0).toUpperCase() + placement.slice(1)} label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`);
+        };
+        if (((labelPlacement === "left" || labelPlacement === "right") &&
+            orientation === "vertical") ||
+            ((labelPlacement === "top" || labelPlacement === "bottom") &&
+                orientation === "horizontal")) {
+            invalidPropCombination(labelPlacement);
+        }
+        const getTypographyVariant = (weight) => {
+            switch (weight) {
+                case "very-thick":
+                    return "h4";
+                case "thick":
+                    return "subtitle-large";
+                default:
+                    return "label";
+            }
+        };
+        const renderLabel = () => {
+            if (slotHasContent(this.el, "label")) {
+                return (h("div", { class: "ic-divider-label-container" }, h("slot", { name: "label" })));
+            }
+            else if (isPropDefined(label)) {
+                return (h("ic-typography", { class: "ic-divider-label", variant: getTypographyVariant(weight) }, h("p", null, label)));
+            }
+            return null;
+        };
+        return (h(Host, Object.assign({ class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-divider-monochrome`]: monochrome,
+                [`ic-divider-${orientation}`]: true,
+                [`ic-divider-${weight}`]: true,
+                [`ic-divider-${borderStyle}`]: true,
+            } }, ((orientation === "vertical" ||
+            (!!renderLabel() && !!isPropDefined(labelPlacement))) && {
+            "aria-orientation": orientation,
+            role: "separator",
+        })), orientation === "horizontal" &&
+            (!renderLabel() || !isPropDefined(labelPlacement)) && h("hr", null), !!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel(), orientation === "vertical" &&
+            (!renderLabel() || !isPropDefined(labelPlacement)) && (h("div", { class: "vertical-divider" }))));
     }
     static get is() { return "ic-divider"; }
     static get encapsulation() { return "scoped"; }
@@ -26,11 +88,176 @@ export class Divider {
             "$": ["ic-divider.css"]
         };
     }
+    static get properties() {
+        return {
+            "borderStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDividerStyles",
+                    "resolved": "\"dashed\" | \"solid\"",
+                    "references": {
+                        "IcDividerStyles": {
+                            "location": "import",
+                            "path": "./ic-divider.types",
+                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The line style of the divider."
+                },
+                "attribute": "border-style",
+                "reflect": false,
+                "defaultValue": "\"solid\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the divider. The label placement will need to be set for the label to be displayed correctly."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDividerLabelPlacement",
+                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "IcDividerLabelPlacement": {
+                            "location": "import",
+                            "path": "./ic-divider.types",
+                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerLabelPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations."
+                },
+                "attribute": "label-placement",
+                "reflect": false,
+                "defaultValue": "\"center\""
+            },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the divider will be displayed in a grey colour."
+                },
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "IcOrientation": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The orientation of the divider."
+                },
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "\"horizontal\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcThemeMode | IcThemeForeground",
+                    "resolved": "\"dark\" | \"default\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        },
+                        "IcThemeForeground": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeForeground"
+                        }
+                    }
+                },
+                "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\""
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDividerWeights",
+                    "resolved": "\"medium\" | \"thick\" | \"thin\" | \"very-thick\"",
+                    "references": {
+                        "IcDividerWeights": {
+                            "location": "import",
+                            "path": "./ic-divider.types",
+                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerWeights"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The thickness of the divider."
+                },
+                "attribute": "weight",
+                "reflect": false,
+                "defaultValue": "\"thin\""
+            }
+        };
+    }
     static get states() {
         return {
             "foregroundColor": {}
         };
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
                 "name": "themeChange",

package/dist/collection/components/ic-divider/ic-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-divider.js","sourceRoot":"","sources":["../../../src/components/ic-divider/ic-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAGL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,OAAO;;+BAC4B,uBAAuB,EAAE;;IAGvE,kBAAkB,CAAC,EAAe;QAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mBAAa,MAAM;YACtB,UACE,KAAK,EAAE;oBACL,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,KAAK,qBAAqB,CAAC,KAAK;iBAChE,GACD,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Host, Listen, State } from \"@stencil/core\";\n\nimport { getThemeForegroundColor } from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  render() {\n    return (\n      <Host aria-hidden=\"true\">\n        <hr\n          class={{\n            [\"light\"]: this.foregroundColor === IcThemeForegroundEnum.Light,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-divider.js","sourceRoot":"","sources":["../../../src/components/ic-divider/ic-divider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  h,\n  Component,\n  Host,\n  Listen,\n  State,\n  Prop,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  isPropDefined,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nimport {\n  IcOrientation,\n  IcThemeForeground,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n  IcDividerLabelPlacement,\n  IcDividerStyles,\n  IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @Element() el: HTMLIcDividerElement;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The line style of the divider.\n   */\n  @Prop() borderStyle: IcDividerStyles = \"solid\";\n\n  /**\n   * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n   */\n  @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n  /** If `true`, the divider will be displayed in a grey colour. */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The orientation of the divider.\n   */\n  @Prop() orientation: IcOrientation = \"horizontal\";\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({ mutable: true }) theme?: IcThemeMode | IcThemeForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight: IcDividerWeights = \"thin\";\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private updateMonochromeState(): void {\n    const isBottomSideNav =\n      this.el.parentElement.classList.contains(\"bottom-side-nav\");\n    const isBottomWrapper =\n      this.el.parentElement.parentElement.classList.contains(\"bottom-wrapper\");\n\n    if (\n      this.el.parentElement.tagName === \"IC-SIDE-NAVIGATION\" ||\n      (isBottomSideNav && isBottomWrapper)\n    ) {\n      this.el.classList.add(\"ic-side-navigation-keyline\");\n      if (this.foregroundColor === \"light\") {\n        this.theme = \"dark\";\n      } else {\n        this.theme = \"light\";\n      }\n    }\n  }\n\n  componentWillRender(): void {\n    this.updateMonochromeState();\n  }\n\n  render() {\n    const {\n      borderStyle,\n      label,\n      labelPlacement,\n      monochrome,\n      orientation,\n      weight,\n    } = this;\n\n    const { theme } = this;\n\n    const invalidPropCombination = (\n      placement: IcDividerLabelPlacement\n    ): void => {\n      console.error(\n        `${\n          placement.charAt(0).toUpperCase() + placement.slice(1)\n        } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n      );\n    };\n\n    if (\n      ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n        orientation === \"vertical\") ||\n      ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n        orientation === \"horizontal\")\n    ) {\n      invalidPropCombination(labelPlacement);\n    }\n\n    const getTypographyVariant = (weight: string) => {\n      switch (weight) {\n        case \"very-thick\":\n          return \"h4\";\n        case \"thick\":\n          return \"subtitle-large\";\n        default:\n          return \"label\";\n      }\n    };\n\n    const renderLabel = () => {\n      if (slotHasContent(this.el, \"label\")) {\n        return (\n          <div class=\"ic-divider-label-container\">\n            <slot name=\"label\"></slot>\n          </div>\n        );\n      } else if (isPropDefined(label)) {\n        return (\n          <ic-typography\n            class=\"ic-divider-label\"\n            variant={getTypographyVariant(weight)}\n          >\n            <p>{label}</p>\n          </ic-typography>\n        );\n      }\n      return null;\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-divider-monochrome`]: monochrome,\n          [`ic-divider-${orientation}`]: true,\n          [`ic-divider-${weight}`]: true,\n          [`ic-divider-${borderStyle}`]: true,\n        }}\n        {...((orientation === \"vertical\" ||\n          (!!renderLabel() && !!isPropDefined(labelPlacement))) && {\n          \"aria-orientation\": orientation,\n          role: \"separator\",\n        })}\n      >\n        {orientation === \"horizontal\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n        {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n        {orientation === \"vertical\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && (\n            <div class=\"vertical-divider\"></div>\n          )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-divider/ic-divider.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-divider.types.js.map

package/dist/collection/components/ic-divider/ic-divider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-divider.types.js","sourceRoot":"","sources":["../../../src/components/ic-divider/ic-divider.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcDividerStyles = \"solid\" | \"dashed\";\nexport type IcDividerWeights = \"thin\" | \"medium\" | \"thick\" | \"very-thick\";\nexport type IcDividerLabelPlacement =\n  | \"left\"\n  | \"center\"\n  | \"right\"\n  | \"top\"\n  | \"bottom\";\n"]}

package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js

@@ -1,5 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Divider } from "../../ic-divider";
+import { Typography } from "../../../ic-typography/ic-typography";
 describe("ic-divider", () => {
     it("should render", async () => {
         const page = await newSpecPage({
@@ -8,17 +9,101 @@ describe("ic-divider", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
+    it("should render with a slotted label", async () => {
+        const page = await newSpecPage({
+            components: [Divider],
+            html: `<ic-divider label-placement="left">
+        <ic-typography variant="label" slot="label">
+          <p style="width: max-content;">Slotted label left</p>
+        </ic-typography>
+      </ic-divider>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render a label with the label typography variant when weight is not set to thick or very-thick and a label is provided", async () => {
+        const page = await newSpecPage({
+            components: [Divider, Typography],
+            html: `<ic-divider weight="medium" label="Test label"></ic-divider>`,
+        });
+        const label = page.root.querySelector("ic-typography");
+        expect(label.variant).toBe("label");
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render a label with the subtitle-large typography variant when weight is set to thick and a label is provided", async () => {
+        const page = await newSpecPage({
+            components: [Divider, Typography],
+            html: `<ic-divider weight="thick" label="Test label"></ic-divider>`,
+        });
+        const label = page.root.querySelector("ic-typography");
+        expect(label.variant).toBe("subtitle-large");
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render a label with the h4 typography variant when weight is set to very-thick and a label is provided", async () => {
+        const page = await newSpecPage({
+            components: [Divider, Typography],
+            html: `<ic-divider weight="very-thick" label="Test label"></ic-divider>`,
+        });
+        const label = page.root.querySelector("ic-typography");
+        expect(label.variant).toBe("h4");
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should console error if there's an invalid prop combination of the placement prop and the orientation", async () => {
+        console.error = jest.fn();
+        const page = await newSpecPage({
+            components: [Divider],
+            html: `<ic-divider orientation="vertical" label-placement="left" label="Test label"></ic-divider>`,
+        });
+        await page.waitForChanges();
+        expect(console.error).toHaveBeenCalledWith("Left label placement is not applicable for a vertical ic-divider (web-components) / IcDivider (react)");
+    });
     it("correctly sets foregroundColor on theme change", async () => {
         const page = await newSpecPage({
             components: [Divider],
-            html: `<ic-divider></ic-divider>`,
+            html: `<ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME">
+      <ic-navigation-item slot="primary-navigation" href="/" label="Home">
+            <svg
+              slot="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+                fill="currentColor"
+              />
+            </svg>
+          </ic-navigation-item>
+      <ic-divider slot="primary-navigation"></ic-divider>
+        <ic-navigation-item slot="primary-navigation" href="/" label="a11y">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        </ic-side-navigation>`,
         });
+        expect(page.rootInstance.foregroundColor).toEqual("light");
+        expect(page.rootInstance.theme).toEqual("dark");
+        expect(page.root).toMatchSnapshot("theme-change-light");
         await page.rootInstance.themeChangeHandler({
-            detail: { mode: "light" },
+            detail: { mode: "dark" },
         });
+        await page.rootInstance.updateMonochromeState();
         await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-        expect(page.rootInstance.foregroundColor).toEqual("light");
+        expect(page.rootInstance.foregroundColor).toEqual("dark");
+        expect(page.rootInstance.theme).toEqual("light");
+        expect(page.root).toMatchSnapshot("theme-change-dark");
     });
 });
 //# sourceMappingURL=ic-divider.spec.js.map

package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-divider.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-divider/test/basic/ic-divider.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC;YACzC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC1B,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Divider } from \"../../ic-divider\";\n\ndescribe(\"ic-divider\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider></ic-divider>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"correctly sets foregroundColor on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider></ic-divider>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({\n      detail: { mode: \"light\" },\n    });\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.rootInstance.foregroundColor).toEqual(\"light\");\n  });\n});\n"]}
+{"version":3,"file":"ic-divider.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-divider/test/basic/ic-divider.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Divider } from \"../../ic-divider\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\n\ndescribe(\"ic-divider\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider></ic-divider>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a slotted label\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider label-placement=\"left\">\n        <ic-typography variant=\"label\" slot=\"label\">\n          <p style=\"width: max-content;\">Slotted label left</p>\n        </ic-typography>\n      </ic-divider>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a label with the label typography variant when weight is not set to thick or very-thick and a label is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Divider, Typography],\n      html: `<ic-divider weight=\"medium\" label=\"Test label\"></ic-divider>`,\n    });\n\n    const label = page.root.querySelector(\"ic-typography\");\n\n    expect(label.variant).toBe(\"label\");\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a label with the subtitle-large typography variant when weight is set to thick and a label is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Divider, Typography],\n      html: `<ic-divider weight=\"thick\" label=\"Test label\"></ic-divider>`,\n    });\n\n    const label = page.root.querySelector(\"ic-typography\");\n\n    expect(label.variant).toBe(\"subtitle-large\");\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a label with the h4 typography variant when weight is set to very-thick and a label is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Divider, Typography],\n      html: `<ic-divider weight=\"very-thick\" label=\"Test label\"></ic-divider>`,\n    });\n\n    const label = page.root.querySelector(\"ic-typography\");\n\n    expect(label.variant).toBe(\"h4\");\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should console error if there's an invalid prop combination of the placement prop and the orientation\", async () => {\n    console.error = jest.fn();\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-divider orientation=\"vertical\" label-placement=\"left\" label=\"Test label\"></ic-divider>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(console.error).toHaveBeenCalledWith(\n      \"Left label placement is not applicable for a vertical ic-divider (web-components) / IcDivider (react)\"\n    );\n  });\n\n  it(\"correctly sets foregroundColor on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Divider],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-navigation-item>\n      <ic-divider slot=\"primary-navigation\"></ic-divider>\n        <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"a11y\">\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n        </ic-side-navigation>`,\n    });\n\n    expect(page.rootInstance.foregroundColor).toEqual(\"light\");\n    expect(page.rootInstance.theme).toEqual(\"dark\");\n\n    expect(page.root).toMatchSnapshot(\"theme-change-light\");\n\n    await page.rootInstance.themeChangeHandler({\n      detail: { mode: \"dark\" },\n    });\n\n    await page.rootInstance.updateMonochromeState();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.foregroundColor).toEqual(\"dark\");\n    expect(page.rootInstance.theme).toEqual(\"light\");\n\n    expect(page.root).toMatchSnapshot(\"theme-change-dark\");\n  });\n});\n"]}

package/dist/collection/components/ic-footer/ic-footer.css

@@ -459,16 +459,17 @@ video {
   --footer-link-inner-flex-direction: column;
 }
 
-:host(.ic-footer-foreground-light) {
-  --footer-theme-secondary: var(--ic-theme-secondary);
-  --footer-theme-tertiary: var(--ic-theme-tertiary);
-  --footer-keyline: var(--ic-border-keyline-lighten);
-}
-
 :host(.ic-footer-foreground-dark) {
-  --footer-theme-secondary: var(--ic-theme-secondary-light);
-  --footer-theme-tertiary: var(--ic-theme-tertiary-light);
-  --footer-keyline: var(--ic-border-keyline-darken);
+  --ic-footer-background: var(--ic-theme-secondary-light);
+  --ic-footer-bottom-background: var(--ic-theme-tertiary-light);
+  --ic-footer-keyline: var(--ic-state-layer-darken-20);
+  --ic-footer-text: var(--ic-color-text-primary-light);
+  --ic-footer-link: var(--ic-color-text-primary-light);
+  --ic-footer-icon: var(--ic-color-icon-neutral);
+  --ic-footer-chevron-icon: var(--ic-color-icon-neutral);
+  --ic-footer-logo: var(--ic-color-icon-neutral);
+  --ic-footer-hover: var(--ic-architectural-700-state-layer-10);
+  --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);
 }
 
 :host(.ic-footer-small.ic-footer-ungrouped) {
@@ -485,12 +486,12 @@ footer {
 /* Description */
 
 .footer-description {
-  background-color: var(--footer-theme-secondary);
-  color: var(--ic-theme-text);
+  background-color: var(--ic-footer-background);
+  color: var(--ic-footer-text);
 
-  --ic-typography-color: var(--ic-theme-text);
+  --ic-typography-color: var(--ic-footer-text);
 
-  border-bottom: var(--footer-keyline);
+  border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);
 }
 
 .footer-description-inner {
@@ -501,10 +502,10 @@ footer {
 
 .footer-links {
   padding: var(--footer-links-padding);
-  background-color: var(--footer-theme-secondary);
-  color: var(--ic-theme-text);
+  background-color: var(--ic-footer-background);
+  color: var(--ic-footer-link);
 
-  --ic-typography-color: var(--ic-theme-text);
+  --ic-typography-color: var(--ic-footer-link);
 }
 
 .footer-links-inner {
@@ -515,10 +516,10 @@ footer {
 /* Compliance */
 
 .footer-compliance {
-  background-color: var(--footer-theme-tertiary);
-  color: var(--ic-theme-text);
+  background-color: var(--ic-footer-bottom-background);
+  color: var(--ic-footer-text);
 
-  --ic-typography-color: var(--ic-theme-text);
+  --ic-typography-color: var(--ic-footer-text);
 }
 
 .footer-compliance-inner {

package/dist/collection/components/ic-footer-link/ic-footer-link.css

@@ -526,12 +526,12 @@ video {
 
 :host(.footer-link-light) ::part(link),
 :host(.footer-link-dark) ::part(link) {
-  color: var(--ic-theme-text);
+  color: var(--ic-footer-link);
 }
 
 :host(.footer-link-light) ::slotted(svg),
 :host(.footer-link-dark) ::slotted(svg) {
-  fill: var(--ic-theme-text);
+  fill: var(--ic-footer-icon);
 }
 
 @media (forced-colors: active) {

package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.css

@@ -456,12 +456,9 @@ video {
   --footer-link-group-links-padding-bottom: var(--ic-space-md);
 }
 
-:host(.footer-link-group-light.footer-link-group-small) {
-  --footer-link-group-border-bottom: var(--ic-border-keyline-lighten);
-}
-
-:host(.footer-link-group-dark.footer-link-group-small) {
-  --footer-link-group-border-bottom: var(--ic-border-keyline-darken);
+:host(.footer-link-group-small) {
+  --footer-link-group-border-bottom: var(--ic-space-1px) solid
+    var(--ic-footer-keyline);
 }
 
 :host(.footer-link-group) {
@@ -469,13 +466,8 @@ video {
   border-bottom: var(--footer-link-group-border-bottom);
 }
 
-:host(.footer-link-group-small.footer-link-group-light:hover) {
-  background-color: var(--ic-action-light-bg-hover);
-  cursor: pointer;
-}
-
-:host(.footer-link-group-small.footer-link-group-dark:hover) {
-  background-color: var(--ic-action-dark-bg-hover);
+:host(.footer-link-group-small:hover) {
+  background-color: var(--ic-footer-hover);
   cursor: pointer;
 }
 
@@ -493,12 +485,12 @@ video {
   z-index: 1;
 }
 
-:host(.footer-link-group-small.footer-link-group-light:active) {
-  background-color: var(--ic-action-light-bg-pressed);
+:host(.footer-link-group-small:active) {
+  background-color: var(--ic-footer-pressed);
 }
 
-:host(.footer-link-group-small.footer-link-group-dark:active) {
-  background-color: var(--ic-action-dark-bg-pressed);
+:host ic-section-container {
+  outline: none;
 }
 
 .footer-link-label {
@@ -508,7 +500,7 @@ video {
 }
 
 .footer-link-group-toggle {
-  fill: white !important;
+  fill: var(--ic-footer-chevron-icon) !important;
 }
 
 .footer-link-group-links {
@@ -522,5 +514,5 @@ video {
 }
 
 ic-typography {
-  --ic-typography-color: var(--ic-theme-text);
+  --ic-typography-color: var(--ic-footer-link);
 }

package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js

@@ -50,7 +50,7 @@ export class FooterLinkGroup {
             }, role: "listitem" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "subtitle-small" }, label)), h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null)))) : (h(Host, { class: {
                 ["footer-link-group footer-link-group-small"]: true,
                 [`footer-link-group-${this.dropdownIconStyle}`]: true,
-            }, tabIndex: "1", onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded }, h("ic-section-container", { fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "label" }, label)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
+            }, onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded, role: "listitem" }, h("ic-section-container", { tabindex: "0", fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "label" }, label)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
     }
     static get is() { return "ic-footer-link-group"; }
     static get encapsulation() { return "shadow"; }