@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,138 @@
+import { Host, h } from "@stencil/core";
+import { onComponentRequiredPropUndefined } from "../../utils/helpers";
+export class StatusTag {
+  constructor() {
+    this.announced = false;
+    this.appearance = "filled";
+    this.label = undefined;
+    this.small = false;
+    this.status = "neutral";
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Status Tag");
+  }
+  render() {
+    const { label, status, appearance, small, announced } = this;
+    return (h(Host, { role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { class: {
+        ["tag"]: true,
+        [`${appearance}-${status}`]: true,
+        ["small"]: small,
+      } }, h("ic-typography", { variant: "label-uppercase", "apply-vertical-margins": false }, h("span", null, label)))));
+  }
+  static get is() { return "ic-status-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-status-tag.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-status-tag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "announced": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, role='status' is added to the component and it will act as an 'aria-live' region."
+        },
+        "attribute": "announced",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStatusTagAppearance",
+          "resolved": "\"filled\" | \"outlined\"",
+          "references": {
+            "IcStatusTagAppearance": {
+              "location": "import",
+              "path": "./ic-status-tag.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The emphasis of the status tag."
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"filled\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The content rendered within the status tag."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the small styling will be applied to the status tag."
+        },
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStatusTagStatuses",
+          "resolved": "\"danger\" | \"neutral\" | \"success\" | \"warning\"",
+          "references": {
+            "IcStatusTagStatuses": {
+              "location": "import",
+              "path": "./ic-status-tag.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The colour of the status tag."
+        },
+        "attribute": "status",
+        "reflect": false,
+        "defaultValue": "\"neutral\""
+      }
+    };
+  }
+}
+//# sourceMappingURL=ic-status-tag.js.map

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

@@ -0,0 +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;AAWvE,MAAM,OAAO,SAAS;;qBAIU,KAAK;sBAKU,QAAQ;;iBAU3B,KAAK;kBAKQ,SAAS;;EAEhD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC7D,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBAAa,QAAQ;MAC1D,cACE,KAAK,EAAE;UACL,CAAC,KAAK,CAAC,EAAE,IAAI;UACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;UACjC,CAAC,OAAO,CAAC,EAAE,KAAK;SACjB;QAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;UAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcStatusTagStatuses,\n  IcStatusTagAppearance,\n} from \"./ic-status-tag.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   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the small styling will be applied to the status tag.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, appearance, small, announced } = this;\n    return (\n      <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${appearance}-${status}`]: true,\n            [\"small\"]: small,\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"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-status-tag.types.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStatusTagStatuses = \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\nexport type IcStatusTagAppearance = \"filled\" | \"outlined\";\n"]}

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

@@ -0,0 +1,11 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("ic-status-tag", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture("<ic-status-tag label='Neutral' />");
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-status-tag.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-status-tag.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-status-tag/test/a11y/ic-status-tag.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,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,mCAAmC,CAAC,CAAC;IAC9D,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(\"ic-status-tag\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-status-tag label='Neutral' />\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,43 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { StatusTag } from "../../ic-status-tag";
+describe("ic-status-tag component renders label", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [StatusTag],
+      html: `<ic-status-tag label="Neutral"></ic-status-tag>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-status-tag aria-label="Status" label="Neutral">
+    <mock:shadow-root>
+      <strong class="tag filled-neutral" >
+        <ic-typography variant="label-uppercase">
+          <span>
+            Neutral
+          </span>
+        </ic-typography>
+      </strong>
+      </mock:shadow-root>
+    </ic-status-tag>
+    `);
+  }),
+    it("should have the role of 'status' if announced is passed as true", async () => {
+      const page = await newSpecPage({
+        components: [StatusTag],
+        html: `<ic-status-tag label="Neutral" announced="true"></ic-status-tag>`,
+      });
+      expect(page.root).toEqualHtml(`
+    <ic-status-tag announced="true" aria-label="Status" label="Neutral" role="status">
+    <mock:shadow-root>
+      <strong class="tag filled-neutral" >
+        <ic-typography variant="label-uppercase">
+          <span>
+            Neutral
+          </span>
+        </ic-typography>
+      </strong>
+      </mock:shadow-root>
+    </ic-status-tag>
+    `);
+    });
+});
+//# sourceMappingURL=ic-status-tag.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-status-tag.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-status-tag/test/basic/ic-status-tag.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;EACrD,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC;IACA,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;MAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;QAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,kEAAkE;OACzE,CAAC,CAAC;MAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY/B,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { StatusTag } from \"../../ic-status-tag\";\n\ndescribe(\"ic-status-tag component renders label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [StatusTag],\n      html: `<ic-status-tag label=\"Neutral\"></ic-status-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-status-tag aria-label=\"Status\" label=\"Neutral\">\n    <mock:shadow-root>\n      <strong class=\"tag filled-neutral\" >\n        <ic-typography variant=\"label-uppercase\">\n          <span>\n            Neutral\n          </span>\n        </ic-typography>\n      </strong>\n      </mock:shadow-root>\n    </ic-status-tag>\n    `);\n  }),\n    it(\"should have the role of 'status' if announced is passed as true\", async () => {\n      const page = await newSpecPage({\n        components: [StatusTag],\n        html: `<ic-status-tag label=\"Neutral\" announced=\"true\"></ic-status-tag>`,\n      });\n\n      expect(page.root).toEqualHtml(`\n    <ic-status-tag announced=\"true\" aria-label=\"Status\" label=\"Neutral\" role=\"status\">\n    <mock:shadow-root>\n      <strong class=\"tag filled-neutral\" >\n        <ic-typography variant=\"label-uppercase\">\n          <span>\n            Neutral\n          </span>\n        </ic-typography>\n      </strong>\n      </mock:shadow-root>\n    </ic-status-tag>\n    `);\n    });\n});\n"]}

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

@@ -0,0 +1,278 @@
+/* SHARED STYLING */
+:host {
+  display: flex;
+  flex: auto;
+}
+
+.step {
+  display: flex;
+  flex: 1 1 0;
+}
+
+.step-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.step-title,
+.step-subtitle,
+.step-status,
+.next-step {
+  white-space: pre-line;
+}
+
+.visually-hidden {
+  position: absolute;
+  left: -625rem;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* COMPACT STEP STYLING */
+:host(.compact) {
+  -moz-column-gap: var(--ic-space-sm);
+       column-gap: var(--ic-space-sm);
+
+  --compact-step-inner-color: var(--ic-status-info);
+  --compact-step-circular-line-width: var(--ic-space-xxs);
+}
+
+:host(.compact) .step {
+  -moz-column-gap: var(--ic-space-sm);
+       column-gap: var(--ic-space-sm);
+}
+
+:host(.compact) .step:not(.current) {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.compact-step-progress-indicator {
+  margin: var(--ic-space-xs) 0 0;
+}
+
+:host(.compact) .step-title-area {
+  display: flex;
+  flex-direction: column;
+  width: 14.25rem;
+}
+
+.info-line {
+  display: flex;
+  -moz-column-gap: var(--ic-space-xs);
+       column-gap: var(--ic-space-xs);
+}
+
+.step-status {
+  display: flex;
+  color: var(--ic-color-secondary-text);
+  -moz-column-gap: var(--ic-space-xxxs);
+       column-gap: var(--ic-space-xxxs);
+}
+
+.compact-step-completed .step-status {
+  color: var(--ic-status-success);
+}
+
+.compact-step-disabled :is(.step-title, .step-status) {
+  color: var(--ic-color-tertiary-text);
+}
+
+.step-num {
+  color: var(--ic-color-secondary-text);
+  white-space: nowrap;
+}
+
+:host(.compact) .step-icon {
+  margin: var(--ic-space-xxxs);
+}
+
+:host(.compact) .step-icon svg {
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
+}
+
+/* DEFAULT STEP STYLING */
+:host(.default) .step {
+  flex-direction: column;
+}
+
+:host(.default.last-step) {
+  flex-grow: initial;
+}
+
+.step-top {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  align-self: flex-start;
+  height: 2.5rem;
+}
+
+:host(.default) .step-icon {
+  border-radius: 50%;
+}
+
+.step-icon-inner {
+  width: var(--ic-space-xl);
+  height: var(--ic-space-xl);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+
+:host(.default) .current {
+  color: var(--ic-status-info);
+}
+
+:host(.default) .step-title-area {
+  margin: var(--ic-space-xs) 0;
+  padding-right: var(--ic-space-xs);
+  width: 100%;
+}
+
+:host(.default) .step-title,
+.step-subtitle {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.step-subtitle {
+  color: var(--ic-color-tertiary-text);
+}
+
+.current .step-subtitle {
+  color: var(--ic-color-primary-text);
+}
+
+:host(.default) .completed {
+  color: var(--ic-status-success);
+}
+
+.active .step-icon-inner {
+  box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;
+}
+
+.current .step-icon-inner {
+  background-color: var(--ic-status-info);
+  color: white;
+}
+
+.disabled {
+  color: var(--ic-architectural-200);
+}
+
+.disabled .step-icon-inner {
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
+  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+}
+
+.disabled .step-title-area {
+  color: var(--ic-color-tertiary-text);
+}
+
+.completed .step-icon-inner {
+  background: var(--ic-status-success);
+  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);
+  border-radius: 100%;
+}
+
+:host(.default) .current .step-icon {
+  border: var(--ic-space-xxxs) solid var(--ic-status-info);
+  padding: var(--ic-space-xxxs);
+  margin: 0 calc(-1 * var(--ic-space-xxxs));
+
+  /* compensating for the circle being bigger than other steps */
+}
+
+.step-connect {
+  height: var(--ic-space-xxxs);
+  background-color: var(--ic-architectural-200);
+  margin: 0 var(--ic-space-xs);
+  border-radius: var(--ic-space-xxs);
+  width: 100%;
+}
+
+.aligned-full-width.step-connect {
+  min-width: 6.25rem;
+  width: 100%;
+}
+
+.disabled .step-connect {
+  height: 0;
+  background-color: rgb(0 0 0 / 0%);
+  border-top: 0.125rem dashed var(--ic-architectural-200);
+  border-radius: 0;
+}
+
+.completed .step-connect {
+  background-color: var(--ic-status-success);
+}
+
+.step-connect-inner {
+  width: 70%;
+  display: flex;
+  flex: auto;
+  height: var(--ic-space-xxxs);
+  border-radius: var(--ic-space-xxs);
+  background-color: var(--ic-status-info);
+}
+
+.step-icon-inner .check-icon {
+  padding-top: var(--ic-space-xxs);
+}
+
+.step-icon-inner .check-icon svg {
+  width: var(--ic-space-md);
+  height: auto;
+}
+
+.step-icon-inner .check-icon > svg > path {
+  fill: var(--ic-color-white-text);
+}
+
+/** High Contrast **/
+@media (forced-colors: active) {
+  /* COMPACT STEP */
+  .compact-step-disabled :is(.step-title, .step-status) {
+    color: GrayText;
+  }
+
+  /* DEFAULT STEP */
+  .step-connect:not(.disabled .step-connect) {
+    border: var(--ic-hc-border);
+  }
+
+  .active .step-icon-inner,
+  .completed .step-icon-inner,
+  .current .step-icon-inner {
+    forced-color-adjust: none;
+    box-shadow: inset canvastext 0 0 0 0.125rem;
+    background-color: transparent;
+    color: canvastext;
+  }
+
+  :host(.default) .current .step-icon {
+    padding: 0;
+    border: none;
+  }
+
+  .disabled,
+  .disabled .step-title-area {
+    color: GrayText;
+  }
+
+  .step-connect-inner,
+  .completed .step-connect {
+    background-color: canvastext;
+  }
+
+  .step-icon-inner .check-icon > svg > path {
+    fill: canvastext;
+  }
+}