@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

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

@@ -1,140 +0,0 @@
-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",
-              "id": "src/components/ic-status-tag/ic-status-tag.types.ts::IcStatusTagAppearance"
-            }
-          }
-        },
-        "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",
-              "id": "src/components/ic-status-tag/ic-status-tag.types.ts::IcStatusTagStatuses"
-            }
-          }
-        },
-        "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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,43 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,278 +0,0 @@
-/* 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;
-  }
-}