@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

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 { getBrandForegroundAppearance, isPropDefined, slotHasContent, } from "../../utils/helpers";
 export class Divider {
     constructor() {
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
+        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;
+    brandChangeHandler(ev) {
+        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,15 +88,180 @@ 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 | IcBrandForeground",
+                    "resolved": "\"dark\" | \"default\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        },
+                        "IcBrandForeground": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcBrandForeground"
+                        }
+                    }
+                },
+                "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",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false

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  getBrandForegroundAppearance,\n  isPropDefined,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nimport {\n  IcBrand,\n  IcOrientation,\n  IcBrandForeground,\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: IcBrandForeground = getBrandForegroundAppearance();\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 | IcBrandForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight: IcDividerWeights = \"thin\";\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): 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"]}