genesys-spark-components 4.0.0-beta.35 → 4.0.0-beta.37

package/dist/collection/components/stable/gux-blank-state/gux-blank-state.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 primary-message - Required slot for primary-message.
  * @slot image - Slot for gux-icon element.

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

@@ -0,0 +1,19 @@
+import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
+describe('gux-blank-state', () => {
+  it('renders', async () => {
+    const html = `
+      <gux-blank-state lang="en">
+        <gux-icon slot="image" icon-name="bot" decorative="true"></gux-icon>
+        <div slot="primary-message">Sorry, something went wrong.</div>
+        <div slot="additional-guidance">Please refresh this page to try again.</div>
+        <button slot="call-to-action" type="button" onclick="notify(event)">
+          Call to action
+        </button>
+      </gux-blank-state>`;
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-blank-state');
+    await a11yCheck(page);
+    expect(element).toHaveAttribute('hydrated');
+    expect(element.outerHTML).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,26 @@
+jest.mock('../../../../utils/decorator/on-resize', () => ({
+  __esModule: true,
+  OnResize: jest.fn()
+}));
+import MutationObserver from "mutation-observer";
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxBlankState } from "../gux-blank-state";
+const components = [GuxBlankState];
+const language = 'en';
+beforeEach(async () => {
+  global.MutationObserver = MutationObserver;
+});
+describe('gux-blank-state', () => {
+  it(`should render the component as expected`, async () => {
+    const html = `
+      <gux-blank-state>
+        <gux-icon slot="image" icon-name="bot" decorative="true"></gux-icon>
+        <div slot="primary-message">Sorry, something went wrong.</div>
+        <div slot="additional-guidance">Please refresh this page to try again.</div>
+        <button slot="call-to-action" type="button" onclick="notify(event)">Call to action</button>
+      </gux-blank-state>`;
+    const page = await newSpecPage({ components, language, html });
+    expect(page.rootInstance).toBeInstanceOf(GuxBlankState);
+    expect(page.root).toMatchSnapshot();
+  });
+});

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

@@ -78,16 +78,16 @@
   color: var(--gse-ui-link-active-color);
 }
 .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 {
+  padding: var(--gse-ui-breadcrumbs-separator-padding-secondary);
   font-family: var(--gse-ui-breadcrumbs-separator-secondary-fontFamily);
+  font-size: var(--gse-ui-breadcrumbs-separator-secondary-fontSize);
   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);
   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 {
+  padding: var(--gse-ui-breadcrumbs-separator-padding-primary);
   font-family: var(--gse-ui-breadcrumbs-separator-primary-fontFamily);
+  font-size: var(--gse-ui-breadcrumbs-separator-primary-fontSize);
   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);
 }

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

@@ -1,42 +1,3 @@
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
 :host {
   display: inline-block;
   pointer-events: none;
@@ -67,26 +28,26 @@
 
 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[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);
@@ -97,9 +58,7 @@ button:active:enabled {
   background-color: var(--gse-ui-button-secondary-active-backgroundColor);
 }
 button:focus-visible:enabled {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  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 {
@@ -117,9 +76,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);
@@ -165,12 +124,12 @@ button.gux-inline[disabled] {
   color: var(--gse-ui-link-disabled-color);
 }
 button.gux-inline:hover:enabled {
-  text-decoration: underline;
   color: var(--gse-ui-link-hover-color);
+  text-decoration: underline;
   background: none;
 }
 button.gux-inline:active:enabled {
-  text-decoration: underline;
   color: var(--gse-ui-link-active-color);
+  text-decoration: underline;
   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
  */
@@ -59,7 +59,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 +118,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"
             }
           }
         },

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');
+    });
+  });
+});

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

@@ -0,0 +1,114 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxButton } from "../../gux-button/gux-button";
+const components = [GuxButton];
+const language = 'en';
+describe('gux-button', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render default button',
+        html: '<gux-button>Button</gux-button>'
+      },
+      {
+        description: 'should render primary button',
+        html: '<gux-button accent="primary">Button</gux-button>'
+      },
+      {
+        description: 'should render secondary button',
+        html: '<gux-button accent="secondary">Button</gux-button>'
+      },
+      {
+        description: 'should render tertiary button',
+        html: '<gux-button accent="tertiary">Button</gux-button>'
+      },
+      {
+        description: 'should render ghost button',
+        html: '<gux-button accent="ghost">Button</gux-button>'
+      },
+      {
+        description: 'should render danger button',
+        html: '<gux-button accent="danger">Button</gux-button>'
+      },
+      {
+        description: 'should render inline button',
+        html: '<gux-button accent="inline">Button</gux-button>'
+      },
+      {
+        description: 'should render invalid button',
+        html: '<gux-button accent="invalid">Button</gux-button>'
+      },
+      {
+        description: 'should render disabled default button',
+        html: '<gux-button disabled>Button</gux-button>'
+      },
+      {
+        description: 'should render disabled primary button',
+        html: '<gux-button accent="primary" disabled>Button</gux-button>'
+      },
+      {
+        description: 'should render disabled secondary button',
+        html: '<gux-button accent="secondary" disabled>Button</gux-button>'
+      },
+      {
+        description: 'should render disabled tertiary button',
+        html: '<gux-button accent="tertiary" disabled>Button</gux-button>'
+      },
+      {
+        description: 'should render disabled ghost button',
+        html: '<gux-button accent="ghost" disabled>Button</gux-button>'
+      },
+      {
+        description: 'should render disabled danger button',
+        html: '<gux-button accent="danger" disabled>Button</gux-button>'
+      },
+      {
+        description: 'should render disabled inline button',
+        html: '<gux-button accent="inline" disabled>Button</gux-button>'
+      },
+      {
+        description: 'should render disabled invalid button',
+        html: '<gux-button accent="invalid" disabled>Button</gux-button>'
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxButton);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('click', () => {
+    it('should fire a click event when an enabled button is clicked', async () => {
+      const html = '<gux-button>Button</gux-button>';
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const clickSpy = jest.fn();
+      element.addEventListener('click', clickSpy);
+      element.click();
+      await page.waitForChanges();
+      expect(clickSpy).toHaveBeenCalled();
+    });
+    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 newSpecPage({ components, html, language });
+      const element = page.root;
+      const span = page.root.querySelector('span');
+      const clickSpy = jest.fn();
+      element.addEventListener('click', clickSpy);
+      span.click();
+      await page.waitForChanges();
+      expect(clickSpy).toHaveBeenCalled();
+    });
+    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 newSpecPage({ components, html, language });
+      const element = page.root;
+      const span = page.root.querySelector('span');
+      const clickSpy = jest.fn();
+      element.addEventListener('click', clickSpy);
+      span.click();
+      await page.waitForChanges();
+      expect(clickSpy).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -22,5 +22,5 @@
   background-color: var(--gse-ui-menu-wrapper-backgroundColor);
   border: 1px solid var(--gse-ui-menu-wrapper-border);
   border-radius: 4px;
-  box-shadow: 0px 4px 6px 1px rgba(35, 57, 92, 0.12);
+  box-shadow: 0 4px 6px 1px rgba(35, 57, 92, 0.12);
 }