@ukic/web-components 2.1.0-beta.9 → 2.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonSizes,\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Button {\n  @Element() el: HTMLIcButtonElement;\n  /**\n   * If `true`, the button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * If `true`, the button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\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   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The variant of the button to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcButtonSizes = \"default\";\n  /**\n   * If `true`, the button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n   */\n  @Prop() disableTooltip?: boolean = false;\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n  /**\n   * The appearance of the button, e.g. dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private buttonEl: HTMLElement;\n  private hasTooltip: boolean = false;\n  private buttonIdNum = buttonIds++;\n  private tooltipEl: HTMLIcTooltipElement;\n  private id: string;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\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 native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\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  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\";\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n  }\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? { type: this.type, disabled: this.disabled }\n        : {\n            download: this.download !== false ? this.download : null,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            hreflang: this.hreflang,\n          };\n    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={describedBy}\n        >\n          {this.hasIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\">\n              <ic-loading-indicator\n                type=\"linear\"\n                appearance={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.appearance === IcThemeForegroundEnum.Dark ||\n                  this.appearance === IcThemeForegroundEnum.Light\n                    ? \"light\"\n                    : \"dark\"\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            class={{ [\"tooltip-disabled\"]: this.disableTooltip }}\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            target={buttonId}\n            placement={this.tooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  getThemeFromContext,\n  inheritAttributes,\n  isSlotUsed,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcSizes,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.\n * @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Button {\n  private buttonEl: HTMLElement;\n  private buttonIdNum = buttonIds++;\n  private hasTooltip: boolean = false;\n  private id: string;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private tooltipEl: HTMLIcTooltipElement;\n  private describedByEl: HTMLElement = null;\n  private describedById: string = null;\n  private mutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcButtonElement;\n\n  @State() describedByContent: string = null;\n\n  /**\n   * The appearance of the button, e.g. dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n   */\n  @Prop() disableTooltip?: boolean = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The <form> element to associate the button with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * If `true`, the button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * If `true`, the button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\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 size of the button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\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  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n\n  /**\n   * The variant of the button to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.mutationObserver !== null && this.mutationObserver !== undefined) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.el.setAttribute(\"exportparts\", \"button\");\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\" && this.disableTooltip === false;\n\n    if (!this.hasTooltip) {\n      const describedById = this.inheritedAttributes[\n        \"aria-describedby\"\n      ] as string;\n      if (describedById !== undefined) {\n        this.describedById = describedById;\n        const el = this.el.parentElement.querySelector(\n          `#${describedById}`\n        ) as HTMLElement;\n        this.describedByContent = el.innerText;\n        this.describedByEl = el;\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n\n    if (this.describedById) {\n      this.mutationObserver = new MutationObserver(this.mutationCallback);\n      this.mutationObserver.observe(this.describedByEl, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\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 native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", null);\n    } else {\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    return iconEl !== null;\n  }\n\n  private hasLeftIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"left-icon\"]`);\n    return iconEl !== null;\n  }\n\n  private hasRightIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"right-icon\"]`);\n    return iconEl !== null;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\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  // triggered when text content of sibling element in light DOM changes\n  private mutationCallback = (): void => {\n    this.describedByContent = this.describedByEl.innerText;\n  };\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? {\n            type: this.type,\n            disabled: this.disabled,\n            form: this.form,\n            formaction: this.formaction,\n            formenctype: this.formenctype,\n            formmethod: this.formmethod,\n            formnovalidate: this.formnovalidate,\n            formtarget: this.formtarget,\n          }\n        : {\n            download: this.download !== false ? this.download : null,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            hreflang: this.hreflang,\n          };\n    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    } else {\n      describedBy = this.describedById;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={this.hasTooltip && ariaLabel ? null : describedBy}\n          part=\"button\"\n        >\n          {this.hasIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.hasLeftIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\">\n              <ic-loading-indicator\n                type=\"linear\"\n                appearance={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.appearance === IcThemeForegroundEnum.Dark ||\n                  this.appearance === IcThemeForegroundEnum.Light\n                    ? \"light\"\n                    : \"dark\"\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n          {this.hasRightIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"right-icon\" />\n            </div>\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"loading-with-icon\"]:\n            this.loading &&\n            (this.hasIconSlot() ||\n              this.hasLeftIconSlot() ||\n              this.hasRightIconSlot()),\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n          [\"with-badge\"]: isSlotUsed(this.el, \"badge\"),\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            class={{ [\"tooltip-disabled\"]: this.disableTooltip }}\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            target={buttonId}\n            placement={this.tooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n        {this.describedByContent && (\n          <span id={describedBy} class=\"ic-button-describedby\">\n            {this.describedByContent}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ic-button.types.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcButtonTypes = \"reset\" | \"submit\" | \"button\";\n\nexport type IcButtonVariants =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"icon\"\n  | \"destructive\";\n\nexport type IcButtonSizes = \"default\" | \"large\" | \"small\";\n\nexport type IcButtonTooltipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";\n"]}
+{"version":3,"file":"ic-button.types.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcButtonTypes = \"reset\" | \"submit\" | \"button\";\n\nexport type IcButtonVariants =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"icon\"\n  | \"destructive\";\n\nexport type IcButtonTooltipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";\n"]}

package/dist/collection/components/ic-button/{ic-button.test.a11y.js → test/a11y/ic-button.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("button component", () => {
   it("passes accessibility", async () => {
     const el = await fixture("<ic-button>Button</ic-button>");

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-button.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-button/test/a11y/ic-button.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,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,+BAA+B,CAAC,CAAC;IAC1D,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(\"button component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-button>Button</ic-button>\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,198 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-button component", () => {
+  it("Should have the correct text", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-button>Button</ic-button>`);
+    await page.waitForChanges();
+    const button = await page.find("ic-button");
+    const text = button.innerText;
+    expect(text).toBe("Button");
+  });
+  it("Should have loading bar when loading", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-button loading>Button</ic-button>`);
+    await page.waitForChanges();
+    const loadingBar = await page.find("ic-button >>> ic-loading-indicator");
+    expect(loadingBar).not.toBeNull();
+  });
+  it("Should be clickable with onclick", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <ic-button id='ic-button' onclick='change()'>Button</ic-button>
+        <script>
+        function change() {
+          document.getElementById("ic-button").innerText = 'Test';
+        }
+        </script>
+        `);
+    const button = await page.find("#ic-button");
+    await button.click();
+    expect(button.innerText).toBe("Test");
+  });
+  it("Should not be clickable when disabled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <ic-button id='ic-button' onclick='change()' disabled>Button</ic-button>
+        <script>
+        function change() {
+          document.getElementById("ic-button").innerText = 'Test';
+        }
+        </script>
+        `);
+    const button = await page.find("#ic-button");
+    await button.click();
+    expect(button.innerText).toBe("Button");
+  });
+  it("Should not be clickable when loading", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <ic-button id='ic-button' onclick='change()' loading>Button</ic-button>
+        <script>
+        function change() {
+          document.getElementById("ic-button").innerText = 'Test';
+        }
+        </script>
+        `);
+    const button = await page.find("#ic-button");
+    await button.click();
+    expect(button.innerText).toBe("Button");
+  });
+  it("should pass onclick method", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <ic-button id='ic-button' onclick='updateText()'>Button</ic-button>
+        <p id="text"></p>
+        <script>
+          function updateText() {
+            document.getElementById('text').innerText = "Demo"
+          }
+        </script>
+      `);
+    const p = await page.find("#text");
+    const button = await page.find("#ic-button");
+    await button.click();
+    expect(p.innerText).toBe("Demo");
+  });
+  it("should clear text field value when reset button inside form tag", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <form>
+          <input type="text" id="name" />
+          <ic-button id='ic-button' type="reset">Reset</ic-button>
+        </form>
+      `);
+    const textfield = await page.find("#name");
+    const button = await page.find("#ic-button");
+    await textfield.press("f");
+    await textfield.press("o");
+    await textfield.press("o");
+    expect(await textfield.getProperty("value")).toBe("foo");
+    await button.click();
+    expect(await textfield.getProperty("value")).toBe("");
+  });
+  it("should not clear text field value if reset button outside of form tag", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <div>
+        <form>
+          <input type="text" id="name" />
+        </form>
+        <ic-button id='ic-button' type="reset">Reset</ic-button>
+      </div>
+      `);
+    const textfield = await page.find("#name");
+    const button = await page.find("#ic-button");
+    await textfield.press("f");
+    await textfield.press("o");
+    await textfield.press("o");
+    await button.click();
+    expect(await textfield.getProperty("value")).toBe("foo");
+  });
+  it("should submit form on submit button click if submit button inside form tag", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <form>
+          <input type="text" id="name" />
+          <ic-button id='ic-button' type="submit">Submit</ic-button>
+        </form>
+        <p id="text"></p>
+        <script>
+          document.addEventListener('submit', (ev) => {
+            ev.preventDefault();
+            document.getElementById('text').innerText = 'submitted';
+          })
+        </script>
+      `);
+    const button = await page.find("#ic-button");
+    const p = await page.find("#text");
+    await button.click();
+    expect(p.innerText).toBe("submitted");
+  });
+  it("should not submit form on submit button click outside of form tag", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <form>
+          <input type="text" id="name" />
+        </form>
+        <ic-button id='ic-button' type="submit">Submit</ic-button>
+        <p id="text">idle</p>
+        <script>
+          document.addEventListener('submit', (ev) => {
+            ev.preventDefault();
+            document.getElementById('text').innerText = 'submitted';
+          })
+        </script>
+      `);
+    const button = await page.find("#ic-button");
+    const p = await page.find("#text");
+    await button.click();
+    expect(p.innerText).toBe("idle");
+  });
+  it("should emit icFocus on focus event", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-button>Button</ic-button>`);
+    const button = await page.find("ic-button");
+    const spy = await page.spyOnEvent("icFocus");
+    await button.callMethod("setFocus");
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEvent();
+  });
+  it("should emit icBlur on blur event", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-button>Button</ic-button>
+      <button id="secondary-button">Secondary</button>`);
+    const button = await page.find("ic-button");
+    const secButton = await page.find("#secondary-button");
+    const spy = await page.spyOnEvent("icBlur");
+    await button.callMethod("setFocus");
+    await secButton.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEvent();
+  });
+  it("should test aria-describedby being updated", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <script>
+        function btnClick(){
+          var descEl = document.querySelector("#button-description");
+          descEl.innerText = "See, I told you it was amazing!";
+        }
+      </script>
+      <div>
+        <span id="button-description">This button does something amazing</span>
+        <br />
+        <ic-button variant="primary" onclick="btnClick()" aria-describedby="button-description"
+          >Button</ic-button
+        >
+      </div>
+      `);
+    const button = await page.find("ic-button");
+    let hiddenDescribedBy = await page.find("ic-button >>> #button-description");
+    expect(hiddenDescribedBy.innerText).toBe("This button does something amazing");
+    await button.click();
+    await page.waitForChanges();
+    hiddenDescribedBy = await page.find("ic-button >>> #button-description");
+    expect(hiddenDescribedBy.innerText).toBe("See, I told you it was amazing!");
+  });
+});
+//# sourceMappingURL=ic-button.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-button.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-button/test/basic/ic-button.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-button component\", () => {\n  it(\"Should have the correct text\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-button>Button</ic-button>`);\n    await page.waitForChanges();\n\n    const button = await page.find(\"ic-button\");\n    const text = button.innerText;\n\n    expect(text).toBe(\"Button\");\n  });\n\n  it(\"Should have loading bar when loading\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-button loading>Button</ic-button>`);\n    await page.waitForChanges();\n\n    const loadingBar = await page.find(\"ic-button >>> ic-loading-indicator\");\n\n    expect(loadingBar).not.toBeNull();\n  });\n\n  it(\"Should be clickable with onclick\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n        <ic-button id='ic-button' onclick='change()'>Button</ic-button>\n        <script>\n        function change() {\n          document.getElementById(\"ic-button\").innerText = 'Test';\n        }\n        </script>\n        `\n    );\n    const button = await page.find(\"#ic-button\");\n\n    await button.click();\n\n    expect(button.innerText).toBe(\"Test\");\n  });\n\n  it(\"Should not be clickable when disabled\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n        <ic-button id='ic-button' onclick='change()' disabled>Button</ic-button>\n        <script>\n        function change() {\n          document.getElementById(\"ic-button\").innerText = 'Test';\n        }\n        </script>\n        `\n    );\n    const button = await page.find(\"#ic-button\");\n\n    await button.click();\n\n    expect(button.innerText).toBe(\"Button\");\n  });\n\n  it(\"Should not be clickable when loading\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n        <ic-button id='ic-button' onclick='change()' loading>Button</ic-button>\n        <script>\n        function change() {\n          document.getElementById(\"ic-button\").innerText = 'Test';\n        }\n        </script>\n        `\n    );\n    const button = await page.find(\"#ic-button\");\n\n    await button.click();\n\n    expect(button.innerText).toBe(\"Button\");\n  });\n\n  it(\"should pass onclick method\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n        <ic-button id='ic-button' onclick='updateText()'>Button</ic-button>\n        <p id=\"text\"></p>\n        <script>\n          function updateText() {\n            document.getElementById('text').innerText = \"Demo\"\n          }\n        </script>\n      `\n    );\n\n    const p = await page.find(\"#text\");\n    const button = await page.find(\"#ic-button\");\n\n    await button.click();\n\n    expect(p.innerText).toBe(\"Demo\");\n  });\n\n  it(\"should clear text field value when reset button inside form tag\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n        <form>\n          <input type=\"text\" id=\"name\" />\n          <ic-button id='ic-button' type=\"reset\">Reset</ic-button>\n        </form>\n      `\n    );\n\n    const textfield = await page.find(\"#name\");\n    const button = await page.find(\"#ic-button\");\n\n    await textfield.press(\"f\");\n    await textfield.press(\"o\");\n    await textfield.press(\"o\");\n\n    expect(await textfield.getProperty(\"value\")).toBe(\"foo\");\n\n    await button.click();\n\n    expect(await textfield.getProperty(\"value\")).toBe(\"\");\n  });\n\n  it(\"should not clear text field value if reset button outside of form tag\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n      <div>\n        <form>\n          <input type=\"text\" id=\"name\" />\n        </form>\n        <ic-button id='ic-button' type=\"reset\">Reset</ic-button>\n      </div>\n      `\n    );\n\n    const textfield = await page.find(\"#name\");\n    const button = await page.find(\"#ic-button\");\n\n    await textfield.press(\"f\");\n    await textfield.press(\"o\");\n    await textfield.press(\"o\");\n\n    await button.click();\n\n    expect(await textfield.getProperty(\"value\")).toBe(\"foo\");\n  });\n\n  it(\"should submit form on submit button click if submit button inside form tag\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n        <form>\n          <input type=\"text\" id=\"name\" />\n          <ic-button id='ic-button' type=\"submit\">Submit</ic-button>\n        </form>\n        <p id=\"text\"></p>\n        <script>\n          document.addEventListener('submit', (ev) => {\n            ev.preventDefault();\n            document.getElementById('text').innerText = 'submitted';\n          })\n        </script>\n      `\n    );\n\n    const button = await page.find(\"#ic-button\");\n    const p = await page.find(\"#text\");\n\n    await button.click();\n\n    expect(p.innerText).toBe(\"submitted\");\n  });\n\n  it(\"should not submit form on submit button click outside of form tag\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n        <form>\n          <input type=\"text\" id=\"name\" />\n        </form>\n        <ic-button id='ic-button' type=\"submit\">Submit</ic-button>\n        <p id=\"text\">idle</p>\n        <script>\n          document.addEventListener('submit', (ev) => {\n            ev.preventDefault();\n            document.getElementById('text').innerText = 'submitted';\n          })\n        </script>\n      `\n    );\n\n    const button = await page.find(\"#ic-button\");\n    const p = await page.find(\"#text\");\n\n    await button.click();\n\n    expect(p.innerText).toBe(\"idle\");\n  });\n\n  it(\"should emit icFocus on focus event\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-button>Button</ic-button>`);\n\n    const button = await page.find(\"ic-button\");\n    const spy = await page.spyOnEvent(\"icFocus\");\n\n    await button.callMethod(\"setFocus\");\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEvent();\n  });\n\n  it(\"should emit icBlur on blur event\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-button>Button</ic-button>\n      <button id=\"secondary-button\">Secondary</button>`\n    );\n\n    const button = await page.find(\"ic-button\");\n    const secButton = await page.find(\"#secondary-button\");\n    const spy = await page.spyOnEvent(\"icBlur\");\n\n    await button.callMethod(\"setFocus\");\n    await secButton.click();\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEvent();\n  });\n\n  it(\"should test aria-describedby being updated\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n      <script>\n        function btnClick(){\n          var descEl = document.querySelector(\"#button-description\");\n          descEl.innerText = \"See, I told you it was amazing!\";\n        }\n      </script>\n      <div>\n        <span id=\"button-description\">This button does something amazing</span>\n        <br />\n        <ic-button variant=\"primary\" onclick=\"btnClick()\" aria-describedby=\"button-description\"\n          >Button</ic-button\n        >\n      </div>\n      `\n    );\n\n    const button = await page.find(\"ic-button\");\n    let hiddenDescribedBy = await page.find(\n      \"ic-button >>> #button-description\"\n    );\n    expect(hiddenDescribedBy.innerText).toBe(\n      \"This button does something amazing\"\n    );\n\n    await button.click();\n    await page.waitForChanges();\n\n    hiddenDescribedBy = await page.find(\"ic-button >>> #button-description\");\n    expect(hiddenDescribedBy.innerText).toBe(\"See, I told you it was amazing!\");\n  });\n});\n"]}

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

@@ -0,0 +1,271 @@
+import { Button } from "../../ic-button";
+import { newSpecPage } from "@stencil/core/testing";
+import * as helpers from "../../../../utils/helpers";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+//mocked as getThemeFromContext is always default when run in test context
+const mockGetThemeFromContext = () => {
+  const func = jest.fn(() => {
+    return "light";
+  });
+  Object.defineProperty(helpers, "getThemeFromContext", {
+    value: func,
+  });
+};
+describe("button component", () => {
+  it("should correctly render with text", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button>Button</ic-button>",
+      supportsShadowDom: true,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should correctly render with custom text", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button>Click Me</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML for secondary variant", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='secondary'>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML for tertiary variant", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='tertiary'>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML for destructive variant", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='destructive'>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML with left icon", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button>
+        <svg slot='left-icon' xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+        </svg>
+        Button
+      </ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML with right icon", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button>
+        <svg slot='right-icon' xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+        </svg>
+        Button
+      </ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML when loading", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button loading>Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML when loading - secondary", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button loading variant="secondary">Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML when loading - tertiary", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button loading variant="tertiary">Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML when loading - destructive", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button loading variant="destructive">Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render correct HTML when loading - appearance light", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button loading appearance="light">Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("render with correct button type when defined", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button type='reset'>Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it('should render with "a" tag when href is passed', async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button href = '#'>Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it('should render with defined "a" tag props', async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <ic-button href = '#' download rel="nofollow" target="_blank">Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render icon variant with a tooltip", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='icon' id='test-button'>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render icon variant with a tooltip based on title", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='icon' id='test-button' title='Tooltip text'>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render icon variant with a tooltip based on aria-label", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='icon' id='test-button' aria-label='Tooltip text' tooltip-placement='top'>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should disable tooltip when prop set", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='icon' aria-label='Tooltip text' id='test-button' disable-tooltip>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should update when method called", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button variant='icon' aria-label='Tooltip text' id='test-button'>Button</ic-button>",
+    });
+    expect(page.root).toMatchSnapshot();
+    await page.root.updateAriaLabel("New tooltip text");
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should stop immediate propagation of a click event when disabled", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button id='test-button' disabled=true onclick='alert('test')'>Button</ic-button>",
+    });
+    jest.spyOn(window, "alert").mockImplementation();
+    const element = document.getElementById("test-button");
+    element.click();
+    await page.waitForChanges();
+    expect(window.alert).not.toHaveBeenCalled;
+  });
+  it("should call 'setFocus' when button is focussed", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: "<ic-button id='ic-button'>Button</ic-button>",
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+  it("should test theme change", async () => {
+    mockGetThemeFromContext();
+    const page = await newSpecPage({
+      components: [Button],
+      html: `<ic-button id='ic-button'>Button</ic-button>`,
+    });
+    await page.rootInstance.themeChangeHandler({
+      detail: { mode: "light" },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.appearance).toEqual("light");
+  });
+  it("should test button as submit button on form", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `<form id="new-form"><form><ic-button id='ic-button' type="submit" form="new-form">Button</ic-button>`,
+    });
+    const btn = document.getElementById("ic-button");
+    btn.click();
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test aria-describedby is set", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `<span id="button-description">
+        This is the button description
+      </span>
+      <ic-button id='ic-button' aria-describedby="button-description">Button</ic-button>
+      `,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test aria-describedby is updated", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `<span id="button-description">
+        This is the button description
+      </span>
+      <ic-button id='ic-button' aria-describedby="button-description">Button</ic-button>
+      `,
+    });
+    document.querySelector("#button-description").innerText =
+      "This is the new description";
+    page.rootInstance.mutationCallback();
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test blur handler", async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `<ic-button id='ic-button'>Button</ic-button>`,
+    });
+    const eventSpy = jest.fn();
+    page.win.addEventListener("icBlur", eventSpy);
+    await page.rootInstance.onBlur();
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled();
+  });
+});
+//# sourceMappingURL=ic-button.spec.js.map