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

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

@@ -1,272 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { checkResizeObserver } from "../../utils/helpers";
-export class Typography {
-  constructor() {
-    this.focusBtnFromKeyboard = true;
-    this.lastMarkerTop = 0;
-    this.lastWidth = 0;
-    this.resizeObserver = null;
-    this.truncatedHeight = 0;
-    this.toggleExpanded = () => {
-      this.expanded = !this.expanded;
-    };
-    this.checkMaxLines = (height) => {
-      //24 is the height of a single line
-      const numLines = Math.floor(height / 24);
-      if (numLines > this.maxLines) {
-        this.el.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
-        this.truncatedHeight = this.el.clientHeight;
-        this.truncated = true;
-      }
-    };
-    this.checkMarkerPosition = (elTop, markerTop) => {
-      if (markerTop - elTop < this.truncatedHeight) {
-        this.truncated = false;
-        this.expanded = false;
-      }
-      else {
-        this.truncated = true;
-      }
-    };
-    this.getElementTop = (el) => {
-      return el.getClientRects ? el.getClientRects()[0].top : 0;
-    };
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
-        clearTimeout(this.resizeInterval);
-        this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);
-      });
-      this.resizeObserver.observe(this.truncWrapperEl);
-    };
-    this.resizeObserverCallback = () => {
-      if (this.lastWidth === this.el.clientWidth) {
-        return;
-      }
-      if (this.truncatedHeight === 0) {
-        this.checkMaxLines(this.el.clientHeight);
-        return;
-      }
-      const markerTop = this.getElementTop(this.marker);
-      if (markerTop === this.lastMarkerTop) {
-        return;
-      }
-      this.checkMarkerPosition(this.getElementTop(this.el), markerTop);
-      this.lastMarkerTop = markerTop;
-      this.lastWidth = this.el.clientWidth;
-    };
-    this.truncButtonFocus = () => {
-      if (this.focusBtnFromKeyboard) {
-        this.truncButtonFocussed = true;
-      }
-    };
-    this.truncButtonBlur = () => {
-      this.focusBtnFromKeyboard = true;
-      this.truncButtonFocussed = false;
-    };
-    this.truncButtonFocusFromMouse = () => {
-      this.focusBtnFromKeyboard = false;
-    };
-    this.truncated = false;
-    this.truncButtonFocussed = false;
-    this.applyVerticalMargins = false;
-    this.bold = false;
-    this.italic = false;
-    this.maxLines = undefined;
-    this.strikethrough = false;
-    this.underline = false;
-    this.variant = "body";
-    this.expanded = false;
-  }
-  watchExpandedHandler() {
-    this.el.setAttribute("style", `--truncation-max-lines: ${this.expanded ? "initial" : this.maxLines}`);
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
-    }
-  }
-  componentDidLoad() {
-    if (this.variant === "body" && this.maxLines > 0) {
-      const marker = document.createElement("span");
-      marker.style.visibility = "hidden";
-      this.el.appendChild(marker);
-      this.marker = marker;
-      this.lastWidth = this.el.clientWidth;
-      this.checkMaxLines(this.el.clientHeight);
-      checkResizeObserver(this.runResizeObserver);
-    }
-  }
-  render() {
-    const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, } = this;
-    return (h(Host, { class: {
-        [`ic-typography-${variant}`]: true,
-        [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,
-        ["bold"]: bold,
-        ["italic"]: italic,
-        ["strikethrough"]: strikethrough,
-        ["underline"]: underline,
-      } }, variant === "body" && maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines > 0 && truncated && (h("button", { class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded, "aria-hidden": "true" }, expanded ? "See less" : "See more"))));
-  }
-  static get is() { return "ic-typography"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-typography.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-typography.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "applyVerticalMargins": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, appropriate top and bottom margins will be applied to the typography."
-        },
-        "attribute": "apply-vertical-margins",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "bold": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the typography will have a bold font weight.\nNote: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large)."
-        },
-        "attribute": "bold",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "italic": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the typography will have an italic font style."
-        },
-        "attribute": "italic",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "maxLines": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The number of lines to display before truncating the text, only used for the 'body' variant."
-        },
-        "attribute": "max-lines",
-        "reflect": false
-      },
-      "strikethrough": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the typography will have a line through it."
-        },
-        "attribute": "strikethrough",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "underline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the typography will have a line under it."
-        },
-        "attribute": "underline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcTypographyVariants",
-          "resolved": "\"body\" | \"caption\" | \"caption-uppercase\" | \"code-extra-small\" | \"code-large\" | \"code-small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"label\" | \"label-uppercase\" | \"subtitle-large\" | \"subtitle-small\"",
-          "references": {
-            "IcTypographyVariants": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcTypographyVariants"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The ICDS typography style to use."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"body\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "truncated": {},
-      "truncButtonFocussed": {},
-      "expanded": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "expanded",
-        "methodName": "watchExpandedHandler"
-      }];
-  }
-}
-//# sourceMappingURL=ic-typography.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ic-typography.js","sourceRoot":"","sources":["../../../src/components/ic-typography/ic-typography.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Host, State, Watch } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  private focusBtnFromKeyboard: boolean = true;\n  private lastMarkerTop: number = 0;\n  private lastWidth: number = 0;\n  private marker: HTMLElement;\n  private resizeInterval: number;\n  private resizeObserver: ResizeObserver = null;\n  private truncatedHeight: number = 0;\n  private truncWrapperEl: Element;\n\n  @Element() el: HTMLIcTypographyElement;\n\n  @State() truncated: boolean = false;\n  @State() truncButtonFocussed: boolean = false;\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a bold font weight.\n   * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n   */\n  @Prop() bold?: boolean = false;\n\n  /**\n   * If `true`, the typography will have an italic font style.\n   */\n  @Prop() italic?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text, only used for the 'body' variant.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * If `true`, the typography will have a line through it.\n   */\n  @Prop() strikethrough?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a line under it.\n   */\n  @Prop() underline?: boolean = false;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  @State() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.el.setAttribute(\n      \"style\",\n      `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad(): void {\n    if (this.variant === \"body\" && this.maxLines > 0) {\n      const marker = document.createElement(\"span\");\n      marker.style.visibility = \"hidden\";\n      this.el.appendChild(marker);\n      this.marker = marker;\n      this.lastWidth = this.el.clientWidth;\n      this.checkMaxLines(this.el.clientHeight);\n      checkResizeObserver(this.runResizeObserver);\n    }\n  }\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n  };\n\n  private checkMaxLines = (height: number) => {\n    //24 is the height of a single line\n    const numLines = Math.floor(height / 24);\n    if (numLines > this.maxLines) {\n      this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n      this.truncatedHeight = this.el.clientHeight;\n      this.truncated = true;\n    }\n  };\n\n  private checkMarkerPosition = (elTop: number, markerTop: number) => {\n    if (markerTop - elTop < this.truncatedHeight) {\n      this.truncated = false;\n      this.expanded = false;\n    } else {\n      this.truncated = true;\n    }\n  };\n\n  private getElementTop = (el: HTMLElement) => {\n    return el.getClientRects ? el.getClientRects()[0].top : 0;\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeInterval);\n      this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n    });\n    this.resizeObserver.observe(this.truncWrapperEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.lastWidth === this.el.clientWidth) {\n      return;\n    }\n\n    if (this.truncatedHeight === 0) {\n      this.checkMaxLines(this.el.clientHeight);\n      return;\n    }\n\n    const markerTop = this.getElementTop(this.marker);\n    if (markerTop === this.lastMarkerTop) {\n      return;\n    }\n\n    this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n    this.lastMarkerTop = markerTop;\n    this.lastWidth = this.el.clientWidth;\n  };\n\n  private truncButtonFocus = (): void => {\n    if (this.focusBtnFromKeyboard) {\n      this.truncButtonFocussed = true;\n    }\n  };\n\n  private truncButtonBlur = (): void => {\n    this.focusBtnFromKeyboard = true;\n    this.truncButtonFocussed = false;\n  };\n\n  private truncButtonFocusFromMouse = (): void => {\n    this.focusBtnFromKeyboard = false;\n  };\n\n  render() {\n    const {\n      variant,\n      applyVerticalMargins,\n      maxLines,\n      truncated,\n      expanded,\n      strikethrough,\n      underline,\n      italic,\n      bold,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n          [\"bold\"]: bold,\n          [\"italic\"]: italic,\n          [\"strikethrough\"]: strikethrough,\n          [\"underline\"]: underline,\n        }}\n      >\n        {variant === \"body\" && maxLines > 0 ? (\n          <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n        {variant === \"body\" && maxLines > 0 && truncated && (\n          <button\n            class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n            onFocus={this.truncButtonFocus}\n            onBlur={this.truncButtonBlur}\n            onMouseDown={this.truncButtonFocusFromMouse}\n            onClick={this.toggleExpanded}\n            aria-hidden=\"true\"\n          >\n            {expanded ? \"See less\" : \"See more\"}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-typography/test/a11y/ic-typography.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-typography", () => {
-  it("passes accessibility", async () => {
-    const el = await fixture(`<ic-typography variant="h1">Typography component</ic-typography>`);
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
-});
-//# sourceMappingURL=ic-typography.test.a11y.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ic-typography.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-typography/test/a11y/ic-typography.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,CACtB,kEAAkE,CACnE,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(\"ic-typography\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-typography variant=\"h1\">Typography component</ic-typography>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-typography/test/basic/ic-typography.e2e.js

@@ -1,39 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-beforeAll(() => {
-  jest.spyOn(console, "warn").mockImplementation(jest.fn());
-});
-describe("ic-typograpghy", () => {
-  it("should test truncation", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<ic-typography max-lines="3">
-      Body of text that is truncated to three lines. Click the 'See more' link to
-      expand the text, then click 'See less' to truncate the text once more!
-      <br>
-      This is the text that should appear on a second line but may extend further depending on the viewport size.
-      <br>
-      And this text should be on a third line.
-    </ic-typography>`);
-    await page.waitForChanges();
-    await page.setViewport({
-      width: 640,
-      height: 480,
-    });
-    let truncBtn = await page.find("ic-typography >>> button.trunc-btn");
-    let btnText = truncBtn.innerText;
-    expect(truncBtn).not.toBeNull();
-    expect(btnText).toBe("See more");
-    truncBtn.click();
-    await page.waitForChanges();
-    btnText = truncBtn.innerText;
-    expect(btnText).toBe("See less");
-    await page.waitForChanges();
-    await page.setViewport({
-      width: 1600,
-      height: 480,
-    });
-    await page.waitForChanges();
-    truncBtn = await page.find("ic-typography >>> button.trunc-btn");
-    expect(truncBtn).toBeNull();
-  });
-});
-//# sourceMappingURL=ic-typography.e2e.js.map

package/dist/collection/components/ic-typography/test/basic/ic-typography.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-typography.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-typography/test/basic/ic-typography.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,SAAS,CAAC,GAAG,EAAE;EACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;IACtC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;qBAOL,CAAC,CAAC;IAEnB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,GAAG;KACZ,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAErE,IAAI,OAAO,GAAI,QAAyC,CAAC,SAAS,CAAC;IAEnE,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAChC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEjC,QAAQ,CAAC,KAAK,EAAE,CAAC;IACjB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,OAAO,GAAI,QAAyC,CAAC,SAAS,CAAC;IAC/D,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,GAAG;KACZ,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAEjE,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-typograpghy\", () => {\n  it(\"should test truncation\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-typography max-lines=\"3\">\n      Body of text that is truncated to three lines. Click the 'See more' link to\n      expand the text, then click 'See less' to truncate the text once more!\n      <br>\n      This is the text that should appear on a second line but may extend further depending on the viewport size.\n      <br>\n      And this text should be on a third line.\n    </ic-typography>`);\n\n    await page.waitForChanges();\n\n    await page.setViewport({\n      width: 640,\n      height: 480,\n    });\n\n    let truncBtn = await page.find(\"ic-typography >>> button.trunc-btn\");\n\n    let btnText = (truncBtn as unknown as HTMLButtonElement).innerText;\n\n    expect(truncBtn).not.toBeNull();\n    expect(btnText).toBe(\"See more\");\n\n    truncBtn.click();\n    await page.waitForChanges();\n\n    btnText = (truncBtn as unknown as HTMLButtonElement).innerText;\n    expect(btnText).toBe(\"See less\");\n\n    await page.waitForChanges();\n\n    await page.setViewport({\n      width: 1600,\n      height: 480,\n    });\n\n    await page.waitForChanges();\n    truncBtn = await page.find(\"ic-typography >>> button.trunc-btn\");\n\n    expect(truncBtn).toBeNull();\n  });\n});\n"]}