@ukic/web-components 2.8.0 → 2.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"ic-card.js","sourceRoot":"","sources":["../../../src/components/ic-card/ic-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n  @State() areaExpanded: boolean = false;\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The heading for the card.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n    this.updateTheme();\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      fullWidth,\n      parentIsAnchorTag,\n      isFocussed,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"fullwidth\"]: fullWidth,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image-top\") && (\n          <div class=\"image-top\">\n            <slot name=\"image-top\"></slot>\n          </div>\n        )}\n        <div class=\"card-header\">\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <div class=\"card-title\">\n            <slot name=\"heading\">\n              <ic-typography variant=\"h4\">\n                <p>{heading}</p>\n              </ic-typography>\n            </slot>\n          </div>\n          {isSlotUsed(this.el, \"interaction-button\") && (\n            <div class=\"interaction-button\">\n              <slot name=\"interaction-button\"></slot>\n            </div>\n          )}\n        </div>\n        {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n          <div class=\"subheading\">\n            <slot name=\"subheading\">\n              <ic-typography variant=\"subtitle-small\">\n                {subheading}\n              </ic-typography>\n            </slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"adornment\") && (\n          <div class=\"adornment\">\n            <slot name=\"adornment\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"image-mid\") && (\n          <div class=\"image-mid\">\n            <slot name=\"image-mid\"></slot>\n          </div>\n        )}\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div\n            class={{\n              [\"card-message\"]: true,\n            }}\n          >\n            {message && <ic-typography variant=\"body\">{message}</ic-typography>}\n            {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n          </div>\n        )}\n        {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n          <div class=\"interaction-area\">\n            <div class=\"interaction-controls\">\n              <slot name=\"interaction-controls\"></slot>\n            </div>\n            {expandable && (\n              <ic-button\n                class={{\n                  [\"toggle-button\"]: true,\n                  [\"toggle-button-closed\"]: !this.areaExpanded,\n                  [\"toggle-button-expanded\"]: this.areaExpanded,\n                }}\n                variant=\"icon\"\n                size=\"large\"\n                aria-label=\"Toggle expandable area\"\n                aria-expanded={this.areaExpanded}\n                aria-controls=\"expanded-content-area\"\n                onClick={this.toggleExpanded}\n                innerHTML={chevronIcon}\n              ></ic-button>\n            )}\n          </div>\n        )}\n        {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n          <div class=\"expanded-content\" id=\"expanded-content-area\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </Component>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-card.js","sourceRoot":"","sources":["../../../src/components/ic-card/ic-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n  @State() areaExpanded: boolean = false;\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The heading for the card.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n    this.updateTheme();\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      fullWidth,\n      parentIsAnchorTag,\n      isFocussed,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"fullwidth\"]: fullWidth,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image-top\") && (\n          <div class=\"image-top\">\n            <slot name=\"image-top\"></slot>\n          </div>\n        )}\n        <div class=\"card-header\">\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <div class=\"card-title\">\n            <slot name=\"heading\">\n              <ic-typography variant=\"h4\">\n                <p>{heading}</p>\n              </ic-typography>\n            </slot>\n          </div>\n          {isSlotUsed(this.el, \"interaction-button\") && (\n            <div class=\"interaction-button\">\n              <slot name=\"interaction-button\"></slot>\n            </div>\n          )}\n        </div>\n        {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n          <div class=\"subheading\">\n            <slot name=\"subheading\">\n              <ic-typography variant=\"subtitle-small\">\n                {subheading}\n              </ic-typography>\n            </slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"adornment\") && (\n          <div class=\"adornment\">\n            <slot name=\"adornment\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"image-mid\") && (\n          <div class=\"image-mid\">\n            <slot name=\"image-mid\"></slot>\n          </div>\n        )}\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div\n            class={{\n              [\"card-message\"]: true,\n            }}\n          >\n            {message && <ic-typography variant=\"body\">{message}</ic-typography>}\n            {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n          </div>\n        )}\n        {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n          <div class=\"interaction-area\">\n            <div class=\"interaction-controls\">\n              <slot name=\"interaction-controls\"></slot>\n            </div>\n            {expandable && (\n              <ic-button\n                class={{\n                  [\"toggle-button\"]: true,\n                  [\"toggle-button-closed\"]: !this.areaExpanded,\n                  [\"toggle-button-expanded\"]: this.areaExpanded,\n                }}\n                variant=\"icon\"\n                size=\"large\"\n                aria-label=\"Toggle expandable area\"\n                aria-expanded={this.areaExpanded}\n                aria-controls=\"expanded-content-area\"\n                onClick={this.toggleExpanded}\n                innerHTML={chevronIcon}\n              ></ic-button>\n            )}\n          </div>\n        )}\n        {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n          <div class=\"expanded-content\" id=\"expanded-content-area\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </Component>\n    );\n  }\n}\n"]}

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

@@ -2,20 +2,20 @@ import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
 import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("card component", () => {
-  it("passes accessibility", async () => {
-    const el = await fixture("<ic-card heading='Card heading' message='Card message' />");
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
-  it("passes accessibility as a button", async () => {
-    const el = await fixture("<ic-card heading='Card heading' message='Card message' clickable=true/>");
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
-  it("passes accessibility as a link", async () => {
-    const el = await fixture("<ic-card heading='Card heading' message='Card message' clickable=true href='/' />");
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
+    it("passes accessibility", async () => {
+        const el = await fixture("<ic-card heading='Card heading' message='Card message' />");
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+    it("passes accessibility as a button", async () => {
+        const el = await fixture("<ic-card heading='Card heading' message='Card message' clickable=true/>");
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+    it("passes accessibility as a link", async () => {
+        const el = await fixture("<ic-card heading='Card heading' message='Card message' clickable=true href='/' />");
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
 });
 //# sourceMappingURL=ic-card.test.a11y.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-card.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-card/test/a11y/ic-card.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,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,2DAA2D,CAC5D,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,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,yEAAyE,CAC1E,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,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,mFAAmF,CACpF,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(\"card component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      \"<ic-card heading='Card heading' message='Card message' />\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"passes accessibility as a button\", async () => {\n    const el = await fixture(\n      \"<ic-card heading='Card heading' message='Card message' clickable=true/>\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"passes accessibility as a link\", async () => {\n    const el = await fixture(\n      \"<ic-card heading='Card heading' message='Card message' clickable=true href='/' />\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-card.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-card/test/a11y/ic-card.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,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,2DAA2D,CAC5D,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,yEAAyE,CAC1E,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,mFAAmF,CACpF,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,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(\"card component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      \"<ic-card heading='Card heading' message='Card message' />\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"passes accessibility as a button\", async () => {\n    const el = await fixture(\n      \"<ic-card heading='Card heading' message='Card message' clickable=true/>\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"passes accessibility as a link\", async () => {\n    const el = await fixture(\n      \"<ic-card heading='Card heading' message='Card message' clickable=true href='/' />\"\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -1,23 +1,23 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe("ic-card", () => {
-  it("renders", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<a href="/"><ic-card heading="Card" message="This is a static card"></ic-card></a>`);
-    await page.waitForChanges();
-    const element = await page.find("ic-card");
-    expect(element).toHaveClass("hydrated");
-    const link = await page.find("a");
-    expect(link).toHaveClass("ic-card-wrapper-link");
-  });
-  it("should get focussed class applied when parent link focussed", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<a href="/"><ic-card heading="Card" message="This is a static card"></ic-card></a>`);
-    await page.waitForChanges();
-    const link = await page.find("a");
-    link.focus();
-    await page.waitForChanges();
-    const element = await page.find("ic-card >>> div.focussed");
-    expect(element).not.toBeNull;
-  });
+    it("renders", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<a href="/"><ic-card heading="Card" message="This is a static card"></ic-card></a>`);
+        await page.waitForChanges();
+        const element = await page.find("ic-card");
+        expect(element).toHaveClass("hydrated");
+        const link = await page.find("a");
+        expect(link).toHaveClass("ic-card-wrapper-link");
+    });
+    it("should get focussed class applied when parent link focussed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<a href="/"><ic-card heading="Card" message="This is a static card"></ic-card></a>`);
+        await page.waitForChanges();
+        const link = await page.find("a");
+        link.focus();
+        await page.waitForChanges();
+        const element = await page.find("ic-card >>> div.focussed");
+        expect(element).not.toBeNull;
+    });
 });
 //# sourceMappingURL=ic-card.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-card.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-card/test/basic/ic-card.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,oFAAoF,CACrF,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;EACnD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;IAC3E,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,oFAAoF,CACrF,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,CAAC,KAAK,EAAE,CAAC;IAEb,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC5D,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;EAC/B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-card\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<a href=\"/\"><ic-card heading=\"Card\" message=\"This is a static card\"></ic-card></a>`\n    );\n    await page.waitForChanges();\n\n    const element = await page.find(\"ic-card\");\n    expect(element).toHaveClass(\"hydrated\");\n\n    const link = await page.find(\"a\");\n    expect(link).toHaveClass(\"ic-card-wrapper-link\");\n  });\n\n  it(\"should get focussed class applied when parent link focussed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<a href=\"/\"><ic-card heading=\"Card\" message=\"This is a static card\"></ic-card></a>`\n    );\n    await page.waitForChanges();\n\n    const link = await page.find(\"a\");\n    link.focus();\n\n    await page.waitForChanges();\n\n    const element = await page.find(\"ic-card >>> div.focussed\");\n    expect(element).not.toBeNull;\n  });\n});\n"]}
+{"version":3,"file":"ic-card.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-card/test/basic/ic-card.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CACnB,oFAAoF,CACrF,CAAC;QACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAExC,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAClC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CACnB,oFAAoF,CACrF,CAAC;QACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC5D,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IAC/B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-card\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<a href=\"/\"><ic-card heading=\"Card\" message=\"This is a static card\"></ic-card></a>`\n    );\n    await page.waitForChanges();\n\n    const element = await page.find(\"ic-card\");\n    expect(element).toHaveClass(\"hydrated\");\n\n    const link = await page.find(\"a\");\n    expect(link).toHaveClass(\"ic-card-wrapper-link\");\n  });\n\n  it(\"should get focussed class applied when parent link focussed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<a href=\"/\"><ic-card heading=\"Card\" message=\"This is a static card\"></ic-card></a>`\n    );\n    await page.waitForChanges();\n\n    const link = await page.find(\"a\");\n    link.focus();\n\n    await page.waitForChanges();\n\n    const element = await page.find(\"ic-card >>> div.focussed\");\n    expect(element).not.toBeNull;\n  });\n});\n"]}

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

@@ -1,152 +1,152 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Card } from "../../ic-card";
 describe("ic-card", () => {
-  it("should render", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card heading="Card" message="This is a static card"></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render as a button", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render as a link", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render full width variant", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card heading="Card" full-width=true message="This is a full width card" clickable=true></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render with a link parent", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<a href="/"><ic-card heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should apply 'focussed' style when parent is focussed", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<a href="/"><ic-card id="test-id" heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
-    });
-    expect(page.root).not.toBeNull;
-    const element = await document.getElementById("test-id");
-    await expect(element.classList.contains("focussed")).toBeFalsy;
-    await element.focus();
-    await expect(element.classList.contains("focussed")).toBeTruthy;
-  });
-  it("should lose 'focussed' style when parent loses focus", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<a href="/"><ic-card id="test-card" heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
-    });
-    expect(page.root).not.toBeNull;
-    const element = await document.getElementById("test-card");
-    await element.focus();
-    await expect(element.classList.contains("focussed")).toBeTruthy;
-    await element.blur();
-    await expect(element.classList.contains("focussed")).toBeFalsy;
-    await page.rootInstance.disconnectedCallback();
-  });
-  it("should stop immediate propagation of a click event when disabled", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" message="This is a clickable card" clickable=true disabled=true onclick="alert('test')"></ic-card>`,
-    });
-    jest.spyOn(window, "alert").mockImplementation();
-    const element = await document.getElementById("test-card");
-    element.click();
-    await page.waitForChanges();
-    await expect(window.alert).not.toHaveBeenCalled;
-  });
-  it("should render with a subheading", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render with an interaction button", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button variant="primary" slot="interaction-button">Click here</ic-button></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render with a top image", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-top">Image placeholder</div></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render with a middle image", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-mid">Image placeholder</div></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render with interaction controls", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button slot="interaction-controls">Click here</ic-button></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render as expandable", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should render content in expanded area", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable><ic-typography slot="expanded-content">Extra content</ic-typography></ic-card>`,
-    });
-    page.rootInstance.areaExpanded = true;
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should toggle expanded content when expansion toggle is clicked", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card id="test-card" heading="Card" message="This is a clickable card" expandable><ic-typography slot="expanded-content">Expanded</ic-typography></ic-card>`,
-    });
-    expect(page.root).toMatchSnapshot();
-    page.rootInstance.toggleExpanded();
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-  });
-  it("should call 'setFocus' when card as a button is focused", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card>`,
-    });
-    //Can't expect anything in this test - this is to increase code coverage only
-    await page.rootInstance.setFocus().toHaveBeenCalled;
-  });
-  it("should call 'setFocus' when card as a link is focused", async () => {
-    const page = await newSpecPage({
-      components: [Card],
-      html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card>`,
-    });
-    //Can't expect anything in this test - this is to increase code coverage only
-    await page.rootInstance.setFocus().toHaveBeenCalled;
-  });
+    it("should render", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card heading="Card" message="This is a static card"></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render as a button", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render as a link", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render full width variant", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card heading="Card" full-width=true message="This is a full width card" clickable=true></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with a link parent", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<a href="/"><ic-card heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should apply 'focussed' style when parent is focussed", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<a href="/"><ic-card id="test-id" heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+        });
+        expect(page.root).not.toBeNull;
+        const element = await document.getElementById("test-id");
+        await expect(element.classList.contains("focussed")).toBeFalsy;
+        await element.focus();
+        await expect(element.classList.contains("focussed")).toBeTruthy;
+    });
+    it("should lose 'focussed' style when parent loses focus", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<a href="/"><ic-card id="test-card" heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+        });
+        expect(page.root).not.toBeNull;
+        const element = await document.getElementById("test-card");
+        await element.focus();
+        await expect(element.classList.contains("focussed")).toBeTruthy;
+        await element.blur();
+        await expect(element.classList.contains("focussed")).toBeFalsy;
+        await page.rootInstance.disconnectedCallback();
+    });
+    it("should stop immediate propagation of a click event when disabled", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" message="This is a clickable card" clickable=true disabled=true onclick="alert('test')"></ic-card>`,
+        });
+        jest.spyOn(window, "alert").mockImplementation();
+        const element = await document.getElementById("test-card");
+        element.click();
+        await page.waitForChanges();
+        await expect(window.alert).not.toHaveBeenCalled;
+    });
+    it("should render with a subheading", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with an interaction button", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button variant="primary" slot="interaction-button">Click here</ic-button></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with a top image", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-top">Image placeholder</div></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with a middle image", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-mid">Image placeholder</div></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with interaction controls", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button slot="interaction-controls">Click here</ic-button></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render as expandable", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render content in expanded area", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable><ic-typography slot="expanded-content">Extra content</ic-typography></ic-card>`,
+        });
+        page.rootInstance.areaExpanded = true;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should toggle expanded content when expansion toggle is clicked", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card id="test-card" heading="Card" message="This is a clickable card" expandable><ic-typography slot="expanded-content">Expanded</ic-typography></ic-card>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        page.rootInstance.toggleExpanded();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should call 'setFocus' when card as a button is focused", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card>`,
+        });
+        //Can't expect anything in this test - this is to increase code coverage only
+        await page.rootInstance.setFocus().toHaveBeenCalled;
+    });
+    it("should call 'setFocus' when card as a link is focused", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card>`,
+        });
+        //Can't expect anything in this test - this is to increase code coverage only
+        await page.rootInstance.setFocus().toHaveBeenCalled;
+    });
 });
 //# sourceMappingURL=ic-card.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-card.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-card/test/basic/ic-card.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Card } from \"../../ic-card\";\n\ndescribe(\"ic-card\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a static card\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a link\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render full width variant\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" full-width=true message=\"This is a full width card\" clickable=true></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a link parent\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'focussed' style when parent is focussed\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card id=\"test-id\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-id\");\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n  });\n\n  it(\"should lose 'focussed' style when parent loses focus\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-card\");\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n\n    await element.blur();\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true disabled=true onclick=\"alert('test')\"></ic-card>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = await document.getElementById(\"test-card\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    await expect(window.alert).not.toHaveBeenCalled;\n  });\n\n  it(\"should render with a subheading\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with an interaction button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><ic-button variant=\"primary\" slot=\"interaction-button\">Click here</ic-button></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a top image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><div slot=\"image-top\">Image placeholder</div></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a middle image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><div slot=\"image-mid\">Image placeholder</div></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with interaction controls\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><ic-button slot=\"interaction-controls\">Click here</ic-button></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as expandable\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\" expandable></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render content in expanded area\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\" expandable><ic-typography slot=\"expanded-content\">Extra content</ic-typography></ic-card>`,\n    });\n\n    page.rootInstance.areaExpanded = true;\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should toggle expanded content when expansion toggle is clicked\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" expandable><ic-typography slot=\"expanded-content\">Expanded</ic-typography></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.toggleExpanded();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call 'setFocus' when card as a button is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should call 'setFocus' when card as a link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}
+{"version":3,"file":"ic-card.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-card/test/basic/ic-card.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Card } from \"../../ic-card\";\n\ndescribe(\"ic-card\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a static card\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a link\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render full width variant\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" full-width=true message=\"This is a full width card\" clickable=true></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a link parent\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'focussed' style when parent is focussed\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card id=\"test-id\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-id\");\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n  });\n\n  it(\"should lose 'focussed' style when parent loses focus\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-card\");\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n\n    await element.blur();\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true disabled=true onclick=\"alert('test')\"></ic-card>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = await document.getElementById(\"test-card\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    await expect(window.alert).not.toHaveBeenCalled;\n  });\n\n  it(\"should render with a subheading\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with an interaction button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><ic-button variant=\"primary\" slot=\"interaction-button\">Click here</ic-button></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a top image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><div slot=\"image-top\">Image placeholder</div></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a middle image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><div slot=\"image-mid\">Image placeholder</div></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with interaction controls\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\"><ic-button slot=\"interaction-controls\">Click here</ic-button></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as expandable\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\" expandable></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render content in expanded area\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" subheading=\"Card subheading\" message=\"This is a card\" expandable><ic-typography slot=\"expanded-content\">Extra content</ic-typography></ic-card>`,\n    });\n\n    page.rootInstance.areaExpanded = true;\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should toggle expanded content when expansion toggle is clicked\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" expandable><ic-typography slot=\"expanded-content\">Expanded</ic-typography></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.toggleExpanded();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call 'setFocus' when card as a button is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should call 'setFocus' when card as a link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

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

@@ -469,7 +469,7 @@ video {
   left: 0;
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
-  background-color: transparent;
+  background-color: var(--ic-architectural-white);
   border: var(--ic-border-width) solid var(--ic-architectural-300);
   border-radius: var(--ic-border-radius);
   outline: none;
@@ -502,7 +502,7 @@ video {
 
 .checkbox:indeterminate,
 .checkbox.indeterminate:checked {
-  background-color: transparent;
+  background-color: var(--ic-architectural-white);
   border: 0.125rem solid var(--ic-action-default);
 }
 
@@ -512,7 +512,7 @@ video {
 
 .checkbox:indeterminate:hover,
 .checkbox.indeterminate:checked:hover {
-  background-color: var(--ic-action-default-bg-hover);
+  background-color: var(--ic-action-default-bg-hover-no-alpha);
   border: 0.125rem solid var(--ic-action-default-hover);
 }
 
@@ -522,18 +522,18 @@ video {
 
 .checkbox:indeterminate:active,
 .checkbox.indeterminate:checked:active {
-  background-color: var(--ic-action-default-bg-active);
+  background-color: var(--ic-action-default-bg-active-no-alpha);
   border: 0.125rem solid var(--ic-action-default-active);
 }
 
 .checkbox:hover {
-  background-color: var(--ic-action-default-bg-hover);
+  background-color: var(--ic-action-default-bg-hover-no-alpha);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
   border: var(--ic-border-width) solid var(--ic-action-default-hover);
 }
 
 .checkbox:active {
-  background-color: var(--ic-action-default-bg-active);
+  background-color: var(--ic-action-default-bg-active-no-alpha);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
   border: var(--ic-border-width) solid var(--ic-action-default-active);
 }