@ukic/web-components 2.4.1 → 2.5.0

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

@@ -0,0 +1,374 @@
+import { Host, h, } from "@stencil/core";
+import { IcThemeForegroundEnum, } from "../../utils/types";
+import { getCssProperty, getParentElement, getParentElementType, hexToRgba, rgbaStrToObj, } from "../../utils/helpers";
+export class Badge {
+  constructor() {
+    this.setBadgeColour = () => {
+      let colorRGBA = null;
+      if (this.customColor !== null) {
+        const firstChar = this.customColor.slice(0, 1);
+        if (firstChar === "#") {
+          colorRGBA = hexToRgba(this.customColor);
+        }
+        else if (firstChar.toLowerCase() === "r") {
+          colorRGBA = rgbaStrToObj(this.customColor);
+        }
+        this.customColorRGBA = colorRGBA;
+        this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;
+      }
+    };
+    this.getBadgeForeground = () => {
+      let red;
+      let green;
+      let blue;
+      switch (this.variant) {
+        case "custom":
+          red = this.customColorRGBA.r;
+          green = this.customColorRGBA.g;
+          blue = this.customColorRGBA.b;
+          break;
+        case "error":
+          red = parseInt(getCssProperty("--ic-status-error-r"));
+          green = parseInt(getCssProperty("--ic-status-error-g"));
+          blue = parseInt(getCssProperty("--ic-status-error-b"));
+          break;
+        case "success":
+          red = parseInt(getCssProperty("--ic-status-success-r"));
+          green = parseInt(getCssProperty("--ic-status-success-g"));
+          blue = parseInt(getCssProperty("--ic-status-success-b"));
+          break;
+        case "warning":
+          red = parseInt(getCssProperty("--ic-status-warning-r"));
+          green = parseInt(getCssProperty("--ic-status-warning-g"));
+          blue = parseInt(getCssProperty("--ic-status-warning-b"));
+          break;
+        case "info": {
+          const info = hexToRgba(getCssProperty("--ic-status-info"));
+          red = info.r;
+          green = info.g;
+          blue = info.b;
+          break;
+        }
+        case "neutral": {
+          const neutral = hexToRgba(getCssProperty("--ic-architectural-500"));
+          red = neutral.r;
+          green = neutral.g;
+          blue = neutral.b;
+          break;
+        }
+        case "light": {
+          const light = hexToRgba(getCssProperty("--ic-architectural-40"));
+          red = light.r;
+          green = light.g;
+          blue = light.b;
+          break;
+        }
+      }
+      const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
+      this.foregroundColour =
+        brightness > 133.3505
+          ? IcThemeForegroundEnum.Dark
+          : IcThemeForegroundEnum.Light;
+    };
+    this.getTextLabel = () => {
+      let label;
+      if (this.textLabel !== null) {
+        if (this.maxNumber !== null) {
+          label =
+            Number(this.textLabel) > this.maxNumber
+              ? `${this.maxNumber}+`
+              : this.textLabel;
+        }
+        else {
+          label = this.textLabel;
+        }
+      }
+      return label;
+    };
+    this.setAccessibleLabel = () => {
+      if (getParentElement(this.el) !== null) {
+        if (getParentElementType(this.el) === "IC-TAB") {
+          getParentElement(this.el).setAttribute("aria-describedby", "badge");
+        }
+        else {
+          getParentElement(this.el).ariaLabel = `badge displaying ${this.accessibleLabel}`;
+        }
+      }
+    };
+    this.isAccessibleLabelDefined = () => {
+      return this.accessibleLabel !== undefined && this.accessibleLabel !== null;
+    };
+    this.visible = true;
+    this.accessibleLabel = undefined;
+    this.customColor = null;
+    this.maxNumber = undefined;
+    this.position = "far";
+    this.size = "default";
+    this.textLabel = undefined;
+    this.type = "text";
+    this.variant = "neutral";
+  }
+  componentWillLoad() {
+    this.variant === "custom" && this.setBadgeColour();
+    this.getBadgeForeground();
+    this.isAccessibleLabelDefined() && this.setAccessibleLabel();
+  }
+  /**
+   * Use to show the badge.
+   */
+  async showBadge() {
+    this.visible = true;
+  }
+  /**
+   * Use to hide the badge.
+   */
+  async hideBadge() {
+    this.visible = false;
+  }
+  render() {
+    const { position, size, type, variant, foregroundColour, visible } = this;
+    return (h(Host, { class: {
+        [`${position}`]: true,
+        [`${size}`]: true,
+        [`${variant}`]: true,
+        [`${type}`]: true,
+        [`foreground-${foregroundColour}`]: foregroundColour !== null,
+        ["show"]: visible,
+        ["hide"]: !visible,
+      }, id: "badge", "aria-label": this.isAccessibleLabelDefined() &&
+        `badge displaying ${this.accessibleLabel}` }, type === "icon" && h("slot", { name: "badge-icon" }), type === "text" && (h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, this.getTextLabel()))));
+  }
+  static get is() { return "ic-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-badge.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-badge.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The accessible label of the badge component to provide context for screen reader users."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "customColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcColor",
+          "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})`",
+          "references": {
+            "IcColor": {
+              "location": "import",
+              "path": "./ic-badge.types",
+              "id": "src/components/ic-badge/ic-badge.types.ts::IcColor"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The custom badge colour. This will only style the badge component if variant=\"custom\".\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+        },
+        "attribute": "custom-color",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "maxNumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The maximum number shown on the badge appended with a +.\nThis will only be displayed if type=\"text\" and textLabel is not empty."
+        },
+        "attribute": "max-number",
+        "reflect": false
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcBadgePositions",
+          "resolved": "\"far\" | \"inline\" | \"near\"",
+          "references": {
+            "IcBadgePositions": {
+              "location": "import",
+              "path": "./ic-badge.types",
+              "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgePositions"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The positioning of the badge in reference to the parent element."
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "\"far\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizes",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "IcSizes": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizes"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the badge to be displayed."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "textLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The text displayed in the badge. This will only be displayed if type=\"text\"."
+        },
+        "attribute": "text-label",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcBadgeTypes",
+          "resolved": "\"dot\" | \"icon\" | \"text\"",
+          "references": {
+            "IcBadgeTypes": {
+              "location": "import",
+              "path": "./ic-badge.types",
+              "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgeTypes"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The type of badge to be displayed."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"text\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcBadgeVariants",
+          "resolved": "\"custom\" | \"error\" | \"info\" | \"light\" | \"neutral\" | \"success\" | \"warning\"",
+          "references": {
+            "IcBadgeVariants": {
+              "location": "import",
+              "path": "./ic-badge.types",
+              "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgeVariants"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the badge to be displayed."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"neutral\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {}
+    };
+  }
+  static get methods() {
+    return {
+      "showBadge": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Use to show the badge.",
+          "tags": []
+        }
+      },
+      "hideBadge": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Use to hide the badge.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-badge.js","sourceRoot":"","sources":["../../../src/components/ic-badge/ic-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Method,\n  Prop,\n  State,\n  h,\n} from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n  IcColor,\n} from \"./ic-badge.types\";\nimport {\n  IcColorRGBA,\n  IcSizes,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  getCssProperty,\n  getParentElement,\n  getParentElementType,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private customColorRGBA: IcColorRGBA;\n  private foregroundColour: IcThemeForeground;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  @State() visible: boolean = true;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and textLabel is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop() position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() textLabel?: string;\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    this.getBadgeForeground();\n\n    this.isAccessibleLabelDefined() && this.setAccessibleLabel();\n  }\n\n  /**\n   * Use to show the badge.\n   */\n  @Method()\n  async showBadge(): Promise<void> {\n    this.visible = true;\n  }\n\n  /**\n   * Use to hide the badge.\n   */\n  @Method()\n  async hideBadge(): Promise<void> {\n    this.visible = false;\n  }\n\n  private setBadgeColour = () => {\n    let colorRGBA = null;\n    if (this.customColor !== null) {\n      const firstChar = this.customColor.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.customColor);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.customColor);\n      }\n      this.customColorRGBA = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;\n    }\n  };\n\n  private getBadgeForeground = () => {\n    let red: number;\n    let green: number;\n    let blue: number;\n\n    switch (this.variant) {\n      case \"custom\":\n        red = this.customColorRGBA.r;\n        green = this.customColorRGBA.g;\n        blue = this.customColorRGBA.b;\n        break;\n      case \"error\":\n        red = parseInt(getCssProperty(\"--ic-status-error-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-error-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-error-b\"));\n        break;\n      case \"success\":\n        red = parseInt(getCssProperty(\"--ic-status-success-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-success-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-success-b\"));\n        break;\n      case \"warning\":\n        red = parseInt(getCssProperty(\"--ic-status-warning-r\"));\n        green = parseInt(getCssProperty(\"--ic-status-warning-g\"));\n        blue = parseInt(getCssProperty(\"--ic-status-warning-b\"));\n        break;\n      case \"info\": {\n        const info = hexToRgba(getCssProperty(\"--ic-status-info\"));\n        red = info.r;\n        green = info.g;\n        blue = info.b;\n        break;\n      }\n      case \"neutral\": {\n        const neutral = hexToRgba(getCssProperty(\"--ic-architectural-500\"));\n        red = neutral.r;\n        green = neutral.g;\n        blue = neutral.b;\n        break;\n      }\n      case \"light\": {\n        const light = hexToRgba(getCssProperty(\"--ic-architectural-40\"));\n        red = light.r;\n        green = light.g;\n        blue = light.b;\n        break;\n      }\n    }\n\n    const brightness = (red * 299 + green * 587 + blue * 114) / 1000;\n    this.foregroundColour =\n      brightness > 133.3505\n        ? IcThemeForegroundEnum.Dark\n        : IcThemeForegroundEnum.Light;\n  };\n\n  private getTextLabel = () => {\n    let label;\n    if (this.textLabel !== null) {\n      if (this.maxNumber !== null) {\n        label =\n          Number(this.textLabel) > this.maxNumber\n            ? `${this.maxNumber}+`\n            : this.textLabel;\n      } else {\n        label = this.textLabel;\n      }\n    }\n    return label;\n  };\n\n  private setAccessibleLabel = () => {\n    if (getParentElement(this.el) !== null) {\n      if (getParentElementType(this.el) === \"IC-TAB\") {\n        getParentElement(this.el).setAttribute(\"aria-describedby\", \"badge\");\n      } else {\n        getParentElement(\n          this.el\n        ).ariaLabel = `badge displaying ${this.accessibleLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () => {\n    return this.accessibleLabel !== undefined && this.accessibleLabel !== null;\n  };\n\n  render() {\n    const { position, size, type, variant, foregroundColour, visible } = this;\n\n    return (\n      <Host\n        class={{\n          [`${position}`]: true,\n          [`${size}`]: true,\n          [`${variant}`]: true,\n          [`${type}`]: true,\n          [`foreground-${foregroundColour}`]: foregroundColour !== null,\n          [\"show\"]: visible,\n          [\"hide\"]: !visible,\n        }}\n        id=\"badge\"\n        aria-label={\n          this.isAccessibleLabelDefined() &&\n          `badge displaying ${this.accessibleLabel}`\n        }\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {this.getTextLabel()}\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-badge.types.js","sourceRoot":"","sources":["../../../src/components/ic-badge/ic-badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IcStatusVariants } from \"../../utils/types\";\n\nexport type IcBadgeTypes = \"dot\" | \"text\" | \"icon\";\n\nexport type IcBadgePositions = \"far\" | \"near\" | \"inline\";\n\nexport type IcBadgeVariants = IcStatusVariants | \"light\" | \"custom\";\n\ntype RGB = `rgb(${string})`;\ntype RGBA = `rgba(${string})`;\ntype HEX = `#${string}`;\n\nexport type IcColor = RGB | RGBA | HEX;\n"]}

package/dist/collection/components/ic-badge/test/a11y/ic-badge.test.a11y.js

@@ -0,0 +1,16 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("badge component", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture("<ic-button>Button<ic-badge slot='badge' text-label='1'/></ic-button>");
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+  it("passes accessibility with accessible label prop set", async () => {
+    const el = await fixture("<ic-button>Button<ic-badge slot='badge' text-label='1' accessible-label='1 notification found'/></ic-button>");
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-badge.test.a11y.js.map

package/dist/collection/components/ic-badge/test/a11y/ic-badge.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-badge.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-badge/test/a11y/ic-badge.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,sEAAsE,CACvE,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;IACnE,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,8GAA8G,CAC/G,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"badge component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      \"<ic-button>Button<ic-badge slot='badge' text-label='1'/></ic-button>\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"passes accessibility with accessible label prop set\", async () => {\n    const el = await fixture(\n      \"<ic-button>Button<ic-badge slot='badge' text-label='1' accessible-label='1 notification found'/></ic-button>\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,167 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Badge } from "../../ic-badge";
+import { Button } from "../../../ic-button/ic-button";
+import { Chip } from "../../../ic-chip/ic-chip";
+import { Tab } from "../../../ic-tab/ic-tab";
+describe("ic-badge", () => {
+  it("should render with text slotted in a button", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with text slotted in a button");
+  });
+  it("should render light variant", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="light" text-label="1"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render light variant");
+  });
+  it("should render error variant", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="error" text-label="1"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render error variant");
+  });
+  it("should render success variant", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="success" text-label="1"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render success variant");
+  });
+  it("should render warning variant", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="warning" text-label="1"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render warning variant");
+  });
+  it("should render info variant", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="info" text-label="1"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render info variant");
+  });
+  it("should render custom variant with custom colour in hex", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render custom variant with custom colour in hex");
+  });
+  it("should render custom variant with custom colour in rgb", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="rgb(248,200,220)"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render custom variant with custom colour in rgb");
+  });
+  it("should render with max number prop set", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" text-label="100" max-number="9"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with max number prop set");
+  });
+  it("should render with accessible label", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" text-label="1" accessible-label="1 notification found"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with accessible label");
+  });
+  it("should render size small", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" text-label="100" size="small"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render size small");
+  });
+  it("should render size large", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" text-label="100" size="large"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render size large");
+  });
+  it("should render type dot", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" type="dot"/></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render type dot");
+  });
+  it("should render type icon", async () => {
+    const page = await newSpecPage({
+      components: [Button, Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" type="icon">
+            <svg slot='badge-icon' xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+            <path d="M0 0h24v24H0V0z" fill="none"/>
+            <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+            </svg>
+            </ic-badge></ic-button>`,
+    });
+    expect(page.root).toMatchSnapshot("should render type icon");
+  });
+  it("should render slotted in a chip", async () => {
+    const page = await newSpecPage({
+      components: [Chip, Badge],
+      html: `<ic-chip label="Badge"><ic-badge slot="badge" text-label="1" position="near"/></ic-chip>`,
+    });
+    expect(page.root).toMatchSnapshot("should render slotted in a chip");
+  });
+  it("should render slotted in a tab", async () => {
+    const page = await newSpecPage({
+      components: [Tab, Badge],
+      html: `<ic-tab>Tab<ic-badge slot="badge" text-label="1" position="inline"/></ic-tab>`,
+    });
+    expect(page.root).toMatchSnapshot("should render slotted in a tab");
+  });
+  it("should hide and show the badge using methods", async () => {
+    const page = await newSpecPage({
+      components: [Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+    });
+    const badge = document.querySelector("ic-badge");
+    expect(page.rootInstance.visible).toBe(true);
+    await badge.hideBadge();
+    await page.waitForChanges();
+    expect(page.rootInstance.visible).toBe(false);
+    await badge.showBadge();
+    await page.waitForChanges();
+    expect(page.rootInstance.visible).toBe(true);
+  });
+  it("should set the correct badge colour", async () => {
+    const page = await newSpecPage({
+      components: [Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+    });
+    await page.rootInstance.setBadgeColour();
+    expect(page.rootInstance.customColorRGBA).toEqual({
+      a: 1,
+      b: 220,
+      g: 200,
+      r: 248,
+    });
+  });
+  it("should set the correct foreground colour", async () => {
+    const page = await newSpecPage({
+      components: [Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+    });
+    await page.rootInstance.getBadgeForeground();
+    expect(page.rootInstance.foregroundColour).toBe("dark");
+  });
+  it("should set the correct text label when max number is set", async () => {
+    const page = await newSpecPage({
+      components: [Badge],
+      html: `<ic-button>Button<ic-badge slot="badge" text-label="100" max-number="9"/></ic-button>`,
+    });
+    expect(page.rootInstance.getTextLabel()).toBe("9+");
+  });
+});
+//# sourceMappingURL=ic-badge.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-badge.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-badge/test/basic/ic-badge.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Badge } from \"../../ic-badge\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Chip } from \"../../../ic-chip/ic-chip\";\nimport { Tab } from \"../../../ic-tab/ic-tab\";\n\ndescribe(\"ic-badge\", () => {\n  it(\"should render with text slotted in a button\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render with text slotted in a button\"\n    );\n  });\n\n  it(\"should render light variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"light\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render light variant\");\n  });\n\n  it(\"should render error variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"error\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render error variant\");\n  });\n\n  it(\"should render success variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"success\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render success variant\");\n  });\n\n  it(\"should render warning variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"warning\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render warning variant\");\n  });\n  it(\"should render info variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"info\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render info variant\");\n  });\n\n  it(\"should render custom variant with custom colour in hex\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render custom variant with custom colour in hex\"\n    );\n  });\n\n  it(\"should render custom variant with custom colour in rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"rgb(248,200,220)\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render custom variant with custom colour in rgb\"\n    );\n  });\n\n  it(\"should render with max number prop set\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" max-number=\"9\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with max number prop set\");\n  });\n\n  it(\"should render with accessible label\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\" accessible-label=\"1 notification found\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with accessible label\");\n  });\n\n  it(\"should render size small\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" size=\"small\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render size small\");\n  });\n\n  it(\"should render size large\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" size=\"large\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render size large\");\n  });\n\n  it(\"should render type dot\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" type=\"dot\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render type dot\");\n  });\n\n  it(\"should render type icon\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" type=\"icon\">\n            <svg slot='badge-icon' xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\">\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n            <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\"/>\n            </svg>\n            </ic-badge></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render type icon\");\n  });\n\n  it(\"should render slotted in a chip\", async () => {\n    const page = await newSpecPage({\n      components: [Chip, Badge],\n      html: `<ic-chip label=\"Badge\"><ic-badge slot=\"badge\" text-label=\"1\" position=\"near\"/></ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render slotted in a chip\");\n  });\n\n  it(\"should render slotted in a tab\", async () => {\n    const page = await newSpecPage({\n      components: [Tab, Badge],\n      html: `<ic-tab>Tab<ic-badge slot=\"badge\" text-label=\"1\" position=\"inline\"/></ic-tab>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render slotted in a tab\");\n  });\n\n  it(\"should hide and show the badge using methods\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\"/></ic-button>`,\n    });\n\n    const badge = document.querySelector(\"ic-badge\");\n\n    expect(page.rootInstance.visible).toBe(true);\n\n    await badge.hideBadge();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(false);\n\n    await badge.showBadge();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(true);\n  });\n\n  it(\"should set the correct badge colour\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    await page.rootInstance.setBadgeColour();\n\n    expect(page.rootInstance.customColorRGBA).toEqual({\n      a: 1,\n      b: 220,\n      g: 200,\n      r: 248,\n    });\n  });\n\n  it(\"should set the correct foreground colour\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    await page.rootInstance.getBadgeForeground();\n\n    expect(page.rootInstance.foregroundColour).toBe(\"dark\");\n  });\n\n  it(\"should set the correct text label when max number is set\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" max-number=\"9\"/></ic-button>`,\n    });\n\n    expect(page.rootInstance.getTextLabel()).toBe(\"9+\");\n  });\n});\n"]}