@ukic/web-components 3.0.0 → 3.1.0

package/dist/collection/components/ic-status-tag/ic-status-tag.js

@@ -2,23 +2,43 @@ import { Host, h } from "@stencil/core";
 import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class StatusTag {
     constructor() {
+        /**
+         * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
+         * Screen readers will announce changes to the `label`, but not the initial value.
+         */
         this.announced = false;
-        this.label = undefined;
-        this.size = "default";
+        /**
+         * The size of the status tag component.
+         */
+        this.size = "medium";
+        /**
+         * The colour of the status tag.
+         */
         this.status = "neutral";
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
+        /**
+         * The letter case of the status tag's label.
+         */
+        this.uppercase = true;
+        /**
+         * The emphasis of the status tag.
+         */
         this.variant = "filled";
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Status Tag");
     }
     render() {
-        const { label, status, variant, size, announced } = this;
-        return (h(Host, { role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { class: {
+        const { label, status, variant, size, announced, theme, uppercase } = this;
+        return (h(Host, { key: '2ac2523a20a7520be1219cb32374b08a9bb6db57', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '9098c32e9038dc2eb76ca5425537f0f9e5dc3947', class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { variant: "label-uppercase", "apply-vertical-margins": false }, h("span", null, label)))));
+            } }, h("ic-typography", { key: 'e54d4ef968acc6ccfa85fca33cb6c76b62c2ce51', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '5dae654cf0367927bb3a89fb075dd2b467f66dcf' }, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -39,7 +59,7 @@ export class StatusTag {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -48,6 +68,8 @@ export class StatusTag {
                     "tags": [],
                     "text": "If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\nScreen readers will announce changes to the `label`, but not the initial value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "announced",
                 "reflect": false,
                 "defaultValue": "false"
@@ -66,6 +88,8 @@ export class StatusTag {
                     "tags": [],
                     "text": "The content rendered within the status tag."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -74,7 +98,7 @@ export class StatusTag {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -89,16 +113,18 @@ export class StatusTag {
                     "tags": [],
                     "text": "The size of the status tag component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
             "status": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IcStatusTagStatuses",
-                    "resolved": "\"danger\" | \"neutral\" | \"success\" | \"warning\"",
+                    "resolved": "\"danger\" | \"neutral\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "IcStatusTagStatuses": {
                             "location": "import",
@@ -113,16 +139,58 @@ export class StatusTag {
                     "tags": [],
                     "text": "The colour of the status tag."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": false,
                 "defaultValue": "\"neutral\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dark\" | \"light\" | \"inherit\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {}
+                },
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
+            "uppercase": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The letter case of the status tag's label."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "uppercase",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IcEmphasisType",
-                    "resolved": "\"filled\" | \"outlined\"",
+                    "resolved": "\"filled\" | \"outlined\" | undefined",
                     "references": {
                         "IcEmphasisType": {
                             "location": "import",
@@ -137,6 +205,8 @@ export class StatusTag {
                     "tags": [],
                     "text": "The emphasis of the status tag."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "\"filled\""

package/dist/collection/components/ic-status-tag/ic-status-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AASvE,MAAM,OAAO,SAAS;;yBAKU,KAAK;;oBAUV,SAAS;sBAKK,SAAS;uBAKb,QAAQ;;IAE3C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACzD,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBAAa,QAAQ;YAC1D,cACE,KAAK,EAAE;oBACL,CAAC,KAAK,CAAC,EAAE,IAAI;oBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;oBAC9B,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,UAAU;oBACpC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;iBAClB;gBAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;oBAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   * Screen readers will announce changes to the `label`, but not the initial value.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the status tag component.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, variant, size, announced } = this;\n    return (\n      <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${variant}-${status}`]: true,\n            [\"outlined\"]: variant === \"outlined\",\n            [`${size}`]: true,\n          }}\n        >\n          <ic-typography\n            variant=\"label-uppercase\"\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AASvE,MAAM,OAAO,SAAS;IALtB;QAME;;;WAGG;QACK,cAAS,GAAa,KAAK,CAAC;QAOpC;;WAEG;QACK,SAAI,GAAa,QAAQ,CAAC;QAElC;;WAEG;QACK,WAAM,GAAyB,SAAS,CAAC;QAEjD;;WAEG;QACK,UAAK,GAAkC,SAAS,CAAC;QAEzD;;WAEG;QACK,cAAS,GAAa,IAAI,CAAC;QAEnC;;WAEG;QACK,YAAO,GAAoB,QAAQ,CAAC;KAmC7C;IAjCC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3E,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS,EAAE,EACrD,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBACtB,QAAQ;YAEnB,+DACE,KAAK,EAAE;oBACL,CAAC,KAAK,CAAC,EAAE,IAAI;oBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;oBAC9B,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,UAAU;oBACpC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;iBAClB;gBAED,sEACE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,4BACxB,KAAK;oBAE7B,+DAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   * Screen readers will announce changes to the `label`, but not the initial value.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the status tag component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\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?: \"dark\" | \"light\" | \"inherit\" = \"inherit\";\n\n  /**\n   * The letter case of the status tag's label.\n   */\n  @Prop() uppercase?: boolean = true;\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, variant, size, announced, theme, uppercase } = this;\n    return (\n      <Host\n        class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n        role={announced ? \"status\" : null}\n        aria-label=\"Status\"\n      >\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${variant}-${status}`]: true,\n            [\"outlined\"]: variant === \"outlined\",\n            [`${size}`]: true,\n          }}\n        >\n          <ic-typography\n            variant={uppercase ? \"label-uppercase\" : \"label\"}\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-status-tag/ic-status-tag.stories.js

@@ -0,0 +1,196 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  announced: false,
+  label: "Status tag label",
+  size: "medium",
+  status: "neutral",
+  variant: "filled",
+  theme: "inherit",
+  uppercase: true,
+};
+
+export default {
+  title: "Web Components/Status tag",
+  component: "ic-status-tag",
+};
+
+export const Neutral = {
+  render: () => html`
+    <ic-status-tag label="Neutral"></ic-status-tag>
+    <ic-status-tag label="Neutral" variant="outlined"></ic-status-tag>
+  `,
+
+  name: "Neutral",
+};
+
+export const Success = {
+  render: () => html`
+    <ic-status-tag label="Success" status="success"></ic-status-tag>
+    <ic-status-tag
+      label="Success"
+      status="success"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Success",
+};
+
+export const Warning = {
+  render: () => html`
+    <ic-status-tag label="Warning" status="warning"></ic-status-tag>
+    <ic-status-tag
+      label="Warning"
+      status="warning"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Warning",
+};
+
+export const Danger = {
+  render: () => html`
+    <ic-status-tag label="Danger" status="danger"></ic-status-tag>
+    <ic-status-tag
+      label="Danger"
+      status="danger"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Danger",
+};
+
+export const LetterCase = {
+  render: () => html`
+    <ic-status-tag label="Uppercase status tag"></ic-status-tag>
+    <ic-status-tag
+      label="Uppercase status tag"
+      variant="outlined"
+    ></ic-status-tag>
+    <ic-status-tag
+      label="Sentence case status tag"
+      uppercase="false"
+    ></ic-status-tag>
+    <ic-status-tag
+      label="Sentence case status tag"
+      variant="outlined"
+      uppercase="false"
+    ></ic-status-tag>
+  `,
+
+  name: "Letter case",
+};
+
+export const Size = {
+  render: () => html`
+    <ic-status-tag label="Small" size="small"></ic-status-tag>
+    <ic-status-tag
+      label="Small"
+      variant="outlined"
+      size="small"
+    ></ic-status-tag>
+    <ic-status-tag label="Default" size="medium"></ic-status-tag>
+    <ic-status-tag
+      label="Default"
+      variant="outlined"
+      size="medium"
+    ></ic-status-tag>
+    <ic-status-tag label="Large" size="large"></ic-status-tag>
+    <ic-status-tag
+      label="Large"
+      variant="outlined"
+      size="large"
+    ></ic-status-tag>
+  `,
+
+  name: "Size",
+};
+
+export const Announced = {
+  render: () => html`
+    <ic-status-tag
+      label="Warning"
+      status="warning"
+      id="tag"
+      announced="false"
+    ></ic-status-tag>
+    <br />
+    <br />
+    <ic-button variant="primary" size="small" onClick="onClick()" id="btn"
+      >Toggle announced prop</ic-button
+    >
+    <script>
+      const tag = document.getElementById("tag");
+      const btn = document.getElementById("btn");
+      btn.addEventListener("click", onClick);
+      function onClick(e) {
+        e.preventDefault();
+        tag.announced
+          ? ((tag.announced = "false"),
+            (tag.status = "warning"),
+            (tag.label = "Warning"))
+          : ((tag.announced = "true"),
+            (tag.status = "success"),
+            (tag.label = "Success"));
+      }
+    </script>
+  `,
+
+  name: "Announced",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-status-tag
+      label=${args.label}
+      size=${args.size}
+      status=${args.status}
+      variant=${args.variant}
+      announced=${args.announced}
+      theme=${args.theme}
+      uppercase=${args.uppercase}
+    ></ic-status-tag>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    size: {
+      options: ["medium", "small", "large"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    status: {
+      options: ["neutral", "success", "warning", "danger"],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    variant: {
+      options: ["filled", "outlined"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+
+  name: "Playground",
+};