genesys-spark-components 4.0.0-beta.4 → 4.0.0-beta.41

package/dist/collection/components/stable/gux-breadcrumbs/breadcrumb-item/gux-breadcrumb-item.css

@@ -1,20 +1,21 @@
 /**
+  * @prop --gse-semantic-color-focus : //TODO https://inindca.atlassian.net/browse/COMUI-2115
   * @prop --gse-ui-breadcrumbs-primary-height
+  * @prop --gse-ui-breadcrumbs-primary-separator-padding
+  * @prop --gse-ui-breadcrumbs-primary-separator-typography-fontFamily
+  * @prop --gse-ui-breadcrumbs-primary-separator-typography-fontSize
+  * @prop --gse-ui-breadcrumbs-primary-separator-typography-fontWeight
+  * @prop --gse-ui-breadcrumbs-primary-separator-typography-lineHeight
   * @prop --gse-ui-breadcrumbs-secondary-height
+  * @prop --gse-ui-breadcrumbs-secondary-separator-padding
+  * @prop --gse-ui-breadcrumbs-secondary-separator-typography-fontFamily
+  * @prop --gse-ui-breadcrumbs-secondary-separator-typography-fontSize
+  * @prop --gse-ui-breadcrumbs-secondary-separator-typography-fontWeight
+  * @prop --gse-ui-breadcrumbs-secondary-separator-typography-lineHeight
   * @prop --gse-ui-breadcrumbs-separator-color
-  * @prop --gse-ui-breadcrumbs-separator-padding-primary : //TODO https://inindca.atlassian.net/browse/COMUI-2115
-  * @prop --gse-ui-breadcrumbs-separator-padding-secondary : //TODO https://inindca.atlassian.net/browse/COMUI-2115
-  * @prop --gse-ui-breadcrumbs-separator-primary-fontFamily
-  * @prop --gse-ui-breadcrumbs-separator-primary-fontSize
-  * @prop --gse-ui-breadcrumbs-separator-primary-fontWeight
-  * @prop --gse-ui-breadcrumbs-separator-primary-lineHeight : //TODO https://inindca.atlassian.net/browse/COMUI-2115
-  * @prop --gse-ui-breadcrumbs-separator-secondary-fontFamily
-  * @prop --gse-ui-breadcrumbs-separator-secondary-fontSize
-  * @prop --gse-ui-breadcrumbs-separator-secondary-fontWeight
-  * @prop --gse-ui-breadcrumbs-separator-secondary-lineHeight : //TODO https://inindca.atlassian.net/browse/COMUI-2115
-  * @prop --gse-ui-link-active-color : //TODO https://inindca.atlassian.net/browse/COMUI-2115
-  * @prop --gse-ui-link-default-color : //TODO https://inindca.atlassian.net/browse/COMUI-2115
-  * @prop --gse-ui-link-hover-color : //TODO https://inindca.atlassian.net/browse/COMUI-2115
+  * @prop --gse-ui-link-active-foregroundColor
+  * @prop --gse-ui-link-default-foregroundColor
+  * @prop --gse-ui-link-hover-foregroundColor
   * @prop --gse-ui-link-inLine-medium-text-fontFamily
   * @prop --gse-ui-link-inLine-medium-text-fontSize
   * @prop --gse-ui-link-inLine-medium-text-fontWeight
@@ -33,8 +34,7 @@
   * @prop --gse-ui-link-inLine-small-underlinedText-fontWeight
   * @prop --gse-ui-link-inLine-small-underlinedText-lineHeight
   * @prop --gse-ui-link-inLine-small-underlinedText-textDecoration
-  * @prop --gse-ui-link-visited-color : //TODO https://inindca.atlassian.net/browse/COMUI-2115
-  * @prop --gse-semantic-color-focus : //TODO https://inindca.atlassian.net/browse/COMUI-2115
+  * @prop --gse-ui-link-visited-foregroundColor
   */
 .gux-breadcrumb-generation {
   display: flex;
@@ -51,14 +51,14 @@
   font-weight: var(--gse-ui-link-inLine-small-text-fontWeight);
   line-height: var(--gse-ui-link-inLine-small-text-lineHeight);
   text-decoration: none;
-  color: var(--gse-ui-link-default-color);
+  color: var(--gse-ui-link-default-foregroundColor);
   pointer-events: none;
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-active {
-  color: var(--gse-ui-link-active-color);
+  color: var(--gse-ui-link-active-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link {
-  color: var(--gse-ui-link-default-color);
+  color: var(--gse-ui-link-default-foregroundColor);
   pointer-events: initial;
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:hover {
@@ -69,25 +69,25 @@
   text-decoration: var(--gse-ui-link-inLine-small-underlinedText-textDecoration);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:visited {
-  color: var(--gse-ui-link-visited-color);
+  color: var(--gse-ui-link-visited-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:hover {
-  color: var(--gse-ui-link-hover-color);
+  color: var(--gse-ui-link-hover-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:active {
-  color: var(--gse-ui-link-active-color);
+  color: var(--gse-ui-link-active-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:focus-visible {
+  border-radius: 1px;
   outline: 2px solid var(--gse-semantic-color-focus);
   outline-offset: 3px;
-  border-radius: 1px;
 }
 .gux-breadcrumb-generation .gux-breadcrumb-separator {
-  font-family: var(--gse-ui-breadcrumbs-separator-secondary-fontFamily);
-  font-weight: var(--gse-ui-breadcrumbs-separator-secondary-fontWeight);
-  line-height: var(--gse-ui-breadcrumbs-separator-secondary-lineHeight);
-  font-size: var(--gse-ui-breadcrumbs-separator-secondary-fontSize);
-  padding: var(--gse-ui-breadcrumbs-separator-padding-secondary);
+  padding: var(--gse-ui-breadcrumbs-secondary-separator-padding);
+  font-family: var(--gse-ui-breadcrumbs-secondary-separator-typography-fontFamily);
+  font-size: var(--gse-ui-breadcrumbs-secondary-separator-typography-fontSize);
+  font-weight: var(--gse-ui-breadcrumbs-secondary-separator-typography-fontWeight);
+  line-height: var(--gse-ui-breadcrumbs-secondary-separator-typography-lineHeight);
   color: var(--gse-ui-breadcrumbs-separator-color);
 }
 .gux-breadcrumb-generation.gux-primary {
@@ -108,9 +108,9 @@
   text-decoration: var(--gse-ui-link-inLine-medium-underlinedText-textDecoration);
 }
 .gux-breadcrumb-generation.gux-primary .gux-breadcrumb-separator {
-  font-family: var(--gse-ui-breadcrumbs-separator-primary-fontFamily);
-  font-weight: var(--gse-ui-breadcrumbs-separator-primary-fontWeight);
-  line-height: var(--gse-ui-breadcrumbs-separator-primary-lineHeight);
-  font-size: var(--gse-ui-breadcrumbs-separator-primary-fontSize);
-  padding: var(--gse-ui-breadcrumbs-separator-padding-primary);
+  padding: var(--gse-ui-breadcrumbs-primary-separator-padding);
+  font-family: var(--gse-ui-breadcrumbs-primary-separator-typography-fontFamily);
+  font-size: var(--gse-ui-breadcrumbs-primary-separator-typography-fontSize);
+  font-weight: var(--gse-ui-breadcrumbs-primary-separator-typography-fontWeight);
+  line-height: var(--gse-ui-breadcrumbs-primary-separator-typography-lineHeight);
 }

package/dist/collection/components/stable/gux-breadcrumbs/breadcrumb-item/gux-breadcrumb-item.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { logError } from '../../../../utils/error/log-error';
+import { h, Host } from "@stencil/core";
+import { logError } from "../../../../utils/error/log-error";
 /**
  * @slot - content
  */

package/dist/collection/components/stable/gux-breadcrumbs/gux-breadcrumbs.css

@@ -1,11 +1,11 @@
 ol {
-  list-style: none;
-  margin: 0;
-  padding: 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: center;
   justify-content: flex-start;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }

package/dist/collection/components/stable/gux-breadcrumbs/gux-breadcrumbs.js

@@ -1,7 +1,7 @@
-import { h, forceUpdate } from '@stencil/core';
-import { buildI18nForComponent } from '../../../i18n';
-import { trackComponent } from '@utils/tracking/usage';
-import breadcrumbsResources from './i18n/en.json';
+import { h, forceUpdate } from "@stencil/core";
+import { buildI18nForComponent } from "../../../i18n";
+import { trackComponent } from "../../../utils/tracking/usage";
+import breadcrumbsResources from "./i18n/en.json";
 /**
  * @slot - collection of gux-breadcrumb-item elements
  */
@@ -44,7 +44,8 @@ export class GuxBreadcrumbs {
           "references": {
             "GuxBreadcrumbAccent": {
               "location": "import",
-              "path": "./gux-breadcrumbs.types"
+              "path": "./gux-breadcrumbs.types",
+              "id": "src/components/stable/gux-breadcrumbs/gux-breadcrumbs.types.ts::GuxBreadcrumbAccent"
             }
           }
         },

package/dist/collection/components/stable/gux-breadcrumbs/tests/gux-breadcrumbs.e2e.js

@@ -0,0 +1,48 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-breadcrumbs', () => {
+  [
+    `<gux-breadcrumbs lang="en"></gux-breadcrumbs>`,
+    `
+      <gux-breadcrumbs lang="en">
+        <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+        <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+        <gux-breadcrumb-item>Current</gux-breadcrumb-item>
+      </gux-breadcrumbs>
+    `,
+    `
+      <gux-breadcrumbs lang="en">
+        <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+        <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+        <gux-breadcrumb-item href="#">Current</gux-breadcrumb-item>
+      </gux-breadcrumbs>
+    `,
+    `
+      <gux-breadcrumbs lang="en" accent="primary">
+        <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+        <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+        <gux-breadcrumb-item>Current</gux-breadcrumb-item>
+      </gux-breadcrumbs>
+    `,
+    `
+      <gux-breadcrumbs lang="en" accent="secondary">
+        <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+        <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+        <gux-breadcrumb-item>Current</gux-breadcrumb-item>
+      </gux-breadcrumbs>
+    `,
+    `
+      <gux-breadcrumbs lang="en" accent="invalid">
+        <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+        <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+        <gux-breadcrumb-item>Current</gux-breadcrumb-item>
+      </gux-breadcrumbs>
+    `
+  ].forEach((html, index) => {
+    it(`should display component as expected (${index + 1})`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-breadcrumbs');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-breadcrumbs/tests/gux-breadcrumbs.spec.js

@@ -0,0 +1,91 @@
+jest.mock('../../../../utils/error/log-error', () => ({
+  __esModule: true,
+  logError: jest.fn()
+}));
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxBreadcrumbs } from "../gux-breadcrumbs";
+import { GuxBreadcrumbItem } from "../breadcrumb-item/gux-breadcrumb-item";
+import { logError } from "../../../../utils/error/log-error";
+const components = [GuxBreadcrumbs, GuxBreadcrumbItem];
+const language = 'en';
+describe('gux-breadcrumbs', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('#render', () => {
+    [
+      `<gux-breadcrumbs></gux-breadcrumbs>`,
+      `
+        <gux-breadcrumbs>
+          <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+          <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+          <gux-breadcrumb-item>Current</gux-breadcrumb-item>
+        </gux-breadcrumbs>
+      `,
+      `
+        <gux-breadcrumbs>
+          <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+          <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+          <gux-breadcrumb-item href="#">Current</gux-breadcrumb-item>
+        </gux-breadcrumbs>
+      `,
+      `
+        <gux-breadcrumbs accent="primary">
+          <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+          <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+          <gux-breadcrumb-item>Current</gux-breadcrumb-item>
+        </gux-breadcrumbs>
+      `,
+      `
+        <gux-breadcrumbs accent="secondary">
+          <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+          <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+          <gux-breadcrumb-item>Current</gux-breadcrumb-item>
+        </gux-breadcrumbs>
+      `,
+      `
+        <gux-breadcrumbs accent="invalid">
+          <gux-breadcrumb-item>Category</gux-breadcrumb-item>
+          <gux-breadcrumb-item href="#">Parent</gux-breadcrumb-item>
+          <gux-breadcrumb-item>Current</gux-breadcrumb-item>
+        </gux-breadcrumbs>
+      `
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxBreadcrumbs);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('valid slotting', () => {
+    it('should not log an error if a gux-breadcrumb-item component is slotted in a gux-breadcrumb component', async () => {
+      await newSpecPage({
+        components,
+        html: `
+          <gux-breadcrumbs>
+            <gux-breadcrumb-item>Grandparent</gux-breadcrumb-item>
+            <gux-breadcrumb-item>Parent</gux-breadcrumb-item>
+            <gux-breadcrumb-item>Child</gux-breadcrumb-item>
+          </gux-breadcrumbs>
+        `,
+        language
+      });
+      expect(logError).not.toHaveBeenCalled();
+    });
+    it('should log an error if a gux-breadcrumb-item component is slotted in an element other than a gux-breadcrumb component', async () => {
+      await newSpecPage({
+        components,
+        html: `
+          <div>
+            <gux-breadcrumb-item>Grandparent</gux-breadcrumb-item>
+            <gux-breadcrumb-item>Parent</gux-breadcrumb-item>
+            <gux-breadcrumb-item>Child</gux-breadcrumb-item>
+          </div>
+        `,
+        language
+      });
+      expect(logError).toHaveBeenCalledTimes(3);
+    });
+  });
+});

package/dist/collection/components/stable/gux-button/gux-button.css

@@ -18,7 +18,7 @@
 }
 
 ::slotted(*) {
-  padding-left: 8px;
+  padding-left: var(--gse-core-spacing-3xs);
   vertical-align: middle;
 }
 
@@ -28,26 +28,29 @@
 
 button {
   font-family: var(--gse-ui-button-text-fontFamily);
-  font-weight: var(--gse-ui-button-text-fontWeight);
   font-size: var(--gse-ui-button-text-fontSize);
+  font-weight: var(--gse-ui-button-text-fontWeight);
   line-height: var(--gse-ui-button-text-lineHeight);
-  color: var(--gse-ui-button-secondary-default-foregroundColor);
-  background-color: var(--gse-ui-button-secondary-default-backgroundColor);
   width: 100%;
   min-width: var(--gse-ui-button-icon-only-width);
   height: var(--gse-ui-button-height);
   padding: var(--gse-ui-button-padding);
   overflow: hidden;
+  color: var(--gse-ui-button-secondary-default-foregroundColor);
   text-overflow: ellipsis;
   white-space: nowrap;
   pointer-events: auto;
   cursor: pointer;
+  background-color: var(--gse-ui-button-secondary-default-backgroundColor);
   border: none;
   border-radius: var(--gse-ui-button-borderRadius);
 }
+button.gux-icon-only {
+  padding: var(--gse-ui-button-paddingIconOnly);
+}
 button[disabled] {
-  opacity: var(--gse-ui-button-disabled-opacity);
   cursor: default;
+  opacity: var(--gse-ui-button-disabled-opacity);
 }
 button:hover:enabled {
   color: var(--gse-ui-button-secondary-hover-foregroundColor);
@@ -58,9 +61,8 @@ button:active:enabled {
   background-color: var(--gse-ui-button-secondary-active-backgroundColor);
 }
 button:focus-visible:enabled {
-  outline: 3px solid #7b88f7;
-  outline-offset: 1px;
-  border-radius: 3px;
+  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 button.gux-primary {
   color: var(--gse-ui-button-primary-default-foregroundColor);
@@ -77,9 +79,9 @@ button.gux-primary:active:enabled {
 button.gux-tertiary {
   color: var(--gse-ui-button-tertiary-default-foregroundColor);
   background-color: var(--gse-ui-button-tertiary-default-backgroundColor);
-  border-width: var(--gse-ui-button-tertiary-default-border-width);
-  border-style: var(--gse-ui-button-tertiary-default-border-style);
   border-color: var(--gse-ui-button-tertiary-default-border-color);
+  border-style: var(--gse-ui-button-tertiary-default-border-style);
+  border-width: var(--gse-ui-button-tertiary-default-border-width);
 }
 button.gux-tertiary:hover:enabled {
   color: var(--gse-ui-button-tertiary-hover-foregroundColor);
@@ -117,20 +119,20 @@ button.gux-inline {
   min-width: initial;
   height: initial;
   padding: 0;
-  color: var(--gse-ui-link-default-color);
+  color: var(--gse-ui-link-default-foregroundColor);
   background: none;
   border: none;
 }
 button.gux-inline[disabled] {
-  color: var(--gse-ui-link-disabled-color);
+  color: var(--gse-ui-link-disabled-foregroundColor);
 }
 button.gux-inline:hover:enabled {
+  color: var(--gse-ui-link-hover-foregroundColor);
   text-decoration: underline;
-  color: var(--gse-ui-link-hover-color);
   background: none;
 }
 button.gux-inline:active:enabled {
+  color: var(--gse-ui-link-active-foregroundColor);
   text-decoration: underline;
-  color: var(--gse-ui-link-active-color);
   background: none;
 }

package/dist/collection/components/stable/gux-button/gux-button.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot - content
  */
@@ -9,32 +9,47 @@ export class GuxButton {
     this.guxTitle = undefined;
     this.disabled = false;
     this.accent = 'secondary';
+    this.iconOnly = undefined;
+  }
+  connectedCallback() {
+    this.slotChanged();
   }
   componentWillLoad() {
     trackComponent(this.root, { variant: this.accent });
-    this.makeSlotContentDisableable();
   }
   render() {
-    return (h("button", { type: this.type, title: this.guxTitle, disabled: this.disabled, class: `gux-${this.accent}` }, h("slot", null)));
+    return (h("button", { type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
+        [`gux-${this.accent}`]: true,
+        'gux-icon-only': this.iconOnly
+      } }, h("slot", { onSlotchange: this.slotChanged.bind(this) })));
+  }
+  stopEventIfDisabled(event) {
+    if (this.disabled) {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
   makeSlotContentDisableable() {
-    this.root.shadowRoot.addEventListener('click', (event) => {
-      if (this.disabled) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    });
+    this.root.shadowRoot.addEventListener('click', (event) => this.stopEventIfDisabled(event));
     Array.from(this.root.children).forEach(slotElement => {
-      slotElement.addEventListener('click', (event) => {
-        if (this.disabled) {
-          event.stopImmediatePropagation();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      });
+      slotElement.addEventListener('click', (event) => this.stopEventIfDisabled(event));
     });
   }
+  hasIconOnly() {
+    const children = Array.from(this.root.children);
+    if (children.length === 1) {
+      const child = children[0];
+      if (child.tagName === 'GUX-ICON') {
+        return true;
+      }
+    }
+    return false;
+  }
+  slotChanged() {
+    this.makeSlotContentDisableable();
+    this.iconOnly = this.hasIconOnly();
+  }
   static get is() { return "gux-button"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
@@ -59,7 +74,8 @@ export class GuxButton {
           "references": {
             "GuxButtonType": {
               "location": "import",
-              "path": "./gux-button.types"
+              "path": "./gux-button.types",
+              "id": "src/components/stable/gux-button/gux-button.types.ts::GuxButtonType"
             }
           }
         },
@@ -117,7 +133,8 @@ export class GuxButton {
           "references": {
             "GuxButtonAccent": {
               "location": "import",
-              "path": "./gux-button.types"
+              "path": "./gux-button.types",
+              "id": "src/components/stable/gux-button/gux-button.types.ts::GuxButtonAccent"
             }
           }
         },
@@ -133,5 +150,10 @@ export class GuxButton {
       }
     };
   }
+  static get states() {
+    return {
+      "iconOnly": {}
+    };
+  }
   static get elementRef() { return "root"; }
 }

package/dist/collection/components/stable/gux-button/tests/gux-button.e2e.js

@@ -0,0 +1,131 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-button', () => {
+  describe('#render', () => {
+    [
+      {
+        clickable: true,
+        description: 'should render default button',
+        html: '<gux-button>Button</gux-button>'
+      },
+      {
+        clickable: true,
+        description: 'should render primary button',
+        html: '<gux-button accent="primary">Button</gux-button>'
+      },
+      {
+        clickable: true,
+        description: 'should render secondary button',
+        html: '<gux-button accent="secondary">Button</gux-button>'
+      },
+      {
+        clickable: true,
+        description: 'should render tertiary button',
+        html: '<gux-button accent="tertiary">Button</gux-button>'
+      },
+      {
+        clickable: true,
+        description: 'should render ghost button',
+        html: '<gux-button accent="ghost">Button</gux-button>'
+      },
+      {
+        clickable: true,
+        description: 'should render danger button',
+        html: '<gux-button accent="danger">Button</gux-button>'
+      },
+      {
+        clickable: true,
+        description: 'should render inline button',
+        html: '<gux-button accent="inline">Button</gux-button>'
+      },
+      {
+        clickable: true,
+        description: 'should render invalid button',
+        html: '<gux-button accent="invalid">Button</gux-button>'
+      },
+      {
+        clickable: false,
+        description: 'should render disabled default button',
+        html: '<gux-button disabled>Button</gux-button>'
+      },
+      {
+        clickable: false,
+        description: 'should render disabled primary button',
+        html: '<gux-button accent="primary" disabled>Button</gux-button>'
+      },
+      {
+        clickable: false,
+        description: 'should render disabled secondary button',
+        html: '<gux-button accent="secondary" disabled>Button</gux-button>'
+      },
+      {
+        clickable: false,
+        description: 'should render disabled tertiary button',
+        html: '<gux-button accent="tertiary" disabled>Button</gux-button>'
+      },
+      {
+        clickable: false,
+        description: 'should render disabled ghost button',
+        html: '<gux-button accent="ghost" disabled>Button</gux-button>'
+      },
+      {
+        clickable: false,
+        description: 'should render disabled danger button',
+        html: '<gux-button accent="danger" disabled>Button</gux-button>'
+      },
+      {
+        clickable: false,
+        description: 'should render disabled inline button',
+        html: '<gux-button accent="inline" disabled>Button</gux-button>'
+      },
+      {
+        clickable: false,
+        description: 'should render disabled invalid button',
+        html: '<gux-button accent="invalid" disabled>Button</gux-button>'
+      }
+    ].forEach(({ description, html, clickable }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-button');
+        const onClickSpy = await element.spyOnEvent('click');
+        const expectOnclickEvents = clickable ? 1 : 0;
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+        await element.click();
+        await page.waitForChanges();
+        expect(onClickSpy).toHaveReceivedEventTimes(expectOnclickEvents);
+      });
+    });
+  });
+  describe('click', () => {
+    it('should fire a click event when an enabled button slot content is clicked', async () => {
+      const html = '<gux-button><span>Span</span></gux-button>';
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-button');
+      const onClickSpy = await element.spyOnEvent('click');
+      const span = await page.find('span');
+      await span.click();
+      await page.waitForChanges();
+      expect(onClickSpy).toHaveReceivedEventTimes(1);
+    });
+    it('should not fire a click event when a disabled button slot content is clicked', async () => {
+      const html = '<gux-button disabled><span>Span</span></gux-button>';
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-button');
+      const onClickSpy = await element.spyOnEvent('click');
+      const span = await page.find('span');
+      await span.click();
+      await page.waitForChanges();
+      expect(onClickSpy).toHaveReceivedEventTimes(0);
+    });
+  });
+  describe('focus', () => {
+    it('should be programmatically focusable', async () => {
+      const html = '<gux-button>Button</gux-button>';
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-button');
+      await element.callMethod('focus');
+      const focusedElement = await page.evaluateHandle(() => document.activeElement.nodeName);
+      expect(await focusedElement.jsonValue()).toBe('GUX-BUTTON');
+    });
+  });
+});