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

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

@@ -0,0 +1,14 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxTimePicker } from "../gux-time-picker";
+const components = [GuxTimePicker];
+const html = `<gux-time-picker value="09:00"></gux-time-picker>`;
+const language = 'en';
+describe('gux-time-picker', () => {
+  describe('#render', () => {
+    it(`should render as expected`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      expect(page.rootInstance).toBeInstanceOf(GuxTimePicker);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

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

@@ -3,10 +3,10 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-toast-gap);
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  gap: var(--gse-ui-toast-gap);
   width: var(--gse-ui-toast-wrappingWidth);
   padding: var(--gse-ui-toast-margin);
   margin-bottom: var(--gse-ui-toast-stacking-gap);
@@ -41,12 +41,12 @@
   flex: 1 1 auto;
   flex-direction: column;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-toast-gapButton);
   align-content: stretch;
   align-items: flex-start;
   align-self: auto;
   justify-content: flex-start;
   order: 0;
-  gap: var(--gse-ui-toast-gapButton);
 }
 .gux-toast .gux-content .gux-message {
   display: flex;
@@ -55,21 +55,21 @@
 }
 .gux-toast .gux-content .gux-message .gux-message-title {
   font-family: var(--gse-ui-toast-heading-fontFamily);
-  line-height: var(--gse-ui-toast-heading-lineHeight);
   font-size: var(--gse-ui-toast-heading-fontSize);
   font-weight: var(--gse-ui-toast-heading-fontWeight);
+  line-height: var(--gse-ui-toast-heading-lineHeight);
 }
 .gux-toast .gux-content .gux-message .gux-message-body {
   font-family: var(--gse-ui-toast-text-fontFamily);
-  line-height: var(--gse-ui-toast-text-lineHeight);
   font-size: var(--gse-ui-toast-text-fontSize);
+  line-height: var(--gse-ui-toast-text-lineHeight);
 }
 .gux-toast .gux-content .gux-buttons-bar {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;
   gap: var(--gse-ui-toast-buttonBar-gap);
+  justify-content: flex-start;
 }
 .gux-toast.gux-toast-success {
   background-color: var(--gse-ui-toast-success-backgroundColor);

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { hasSlot } from '@utils/dom/has-slot';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { hasSlot } from "../../../utils/dom/has-slot";
 /**
  * @slot icon - Required slot for toast type of action
  * @slot title - Optional slot for the toast title
@@ -77,7 +77,8 @@ export class GuxToast {
           "references": {
             "GuxToastTypes": {
               "location": "import",
-              "path": "./gux-toast.types"
+              "path": "./gux-toast.types",
+              "id": "src/components/stable/gux-toast/gux-toast.types.ts::GuxToastTypes"
             }
           }
         },

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

@@ -0,0 +1,121 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+async function clickDismissButton(page) {
+  await page.evaluate(async () => {
+    const element = document.querySelector('gux-toast');
+    const dismissButtonElement = element.shadowRoot.querySelector('gux-dismiss-button');
+    const button = dismissButtonElement.shadowRoot.querySelector('button');
+    button.click();
+  });
+}
+describe('gux-toast', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render success toast',
+        html: `
+          <gux-toast toast-type="success">
+            <div slot="title">Success Example with Link</div>
+            <div slot="message">This is an example message</div>
+            <a slot="link" href="#">Link</a>
+          </gux-toast>
+        `
+      },
+      {
+        description: 'should render warning toast',
+        html: `
+          <gux-toast toast-type="warning">
+            <div slot="title">Warning Example with Link</div>
+            <div slot="message">This is an example message</div>
+            <a slot="link" href="#">Link</a>
+          </gux-toast>
+        `
+      },
+      {
+        description: 'should render error toast',
+        html: `
+          <gux-toast toast-type="error">
+            <div slot="title">Error Example with Link</div>
+            <div slot="message">This is an example message</div>
+            <a slot="link" href="#">Link</a>
+          </gux-toast>
+        `
+      },
+      {
+        description: 'should render info toast',
+        html: `
+          <gux-toast toast-type="info">
+            <div slot="title">Info Example with Link</div>
+            <div slot="message">This is an example message</div>
+            <a slot="link" href="#">Link</a>
+          </gux-toast>
+        `
+      },
+      {
+        description: 'should render action toast',
+        html: `
+          <gux-toast toast-type="action">
+            <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+            <div slot="title">2 Actions</div>
+            <div slot="message">This is an example message</div>
+            <button slot="primary-button" type="button" onclick="notify(event)">
+              Action 1
+            </button>
+            <button slot="secondary-button" type="button" onclick="notify(event)">
+              Action 2
+            </button>
+          </gux-toast>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-toast');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-toast lang="en" toastType="info">
+          <div slot="message">This is the message</div>
+        </gux-toast>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-toast')).not.toBeNull();
+      await clickDismissButton(page);
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-toast')).toBeNull();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-toast lang="en" accent="info">
+          <div slot="message">This is the message</div>
+        </gux-toast>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      await page.evaluate(() => {
+        document.addEventListener('guxdismiss', event => {
+          event.preventDefault();
+        });
+      });
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-toast')).not.toBeNull();
+      await clickDismissButton(page);
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-toast')).not.toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,111 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxToast } from "../gux-toast";
+const components = [GuxToast];
+const language = 'en';
+describe('gux-simple-toast-legacy', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render success toast',
+        html: `
+          <gux-toast toast-type="success">
+            <div slot="title">Success Example with Link</div>
+            <div slot="message">This is an example message</div>
+            <a slot="link" href="#">Link</a>
+          </gux-toast>
+        `
+      },
+      {
+        description: 'should render warning toast',
+        html: `
+          <gux-toast toast-type="warning">
+            <div slot="title">Warning Example with Link</div>
+            <div slot="message">This is an example message</div>
+            <a slot="link" href="#">Link</a>
+          </gux-toast>
+        `
+      },
+      {
+        description: 'should render error toast',
+        html: `
+          <gux-toast toast-type="error">
+            <div slot="title">Error Example with Link</div>
+            <div slot="message">This is an example message</div>
+            <a slot="link" href="#">Link</a>
+          </gux-toast>
+        `
+      },
+      {
+        description: 'should render info toast',
+        html: `
+          <gux-toast toast-type="info">
+            <div slot="title">Info Example with Link</div>
+            <div slot="message">This is an example message</div>
+            <a slot="link" href="#">Link</a>
+          </gux-toast>
+        `
+      },
+      {
+        description: 'should render action toast',
+        html: `
+          <gux-toast toast-type="action">
+            <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative></gux-icon>
+            <div slot="title">2 Actions</div>
+            <div slot="message">This is an example message</div>
+            <button slot="primary-button" type="button" onclick="notify(event)">
+              Action 1
+            </button>
+            <button slot="secondary-button" type="button" onclick="notify(event)">
+              Action 2
+            </button>
+          </gux-toast>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxToast);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-toast toastType="info">
+          <div slot="message">This is the message</div>
+        </gux-toast>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const dismissButton = element.shadowRoot.querySelector('gux-dismiss-button');
+      const guxdismissSpy = jest.fn();
+      const clickSpy = jest.fn();
+      const elementRemoveSpy = jest.spyOn(element, 'remove');
+      page.win.addEventListener('guxdismiss', guxdismissSpy);
+      page.win.addEventListener('click', clickSpy);
+      dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveBeenCalled();
+      expect(clickSpy).not.toHaveBeenCalled();
+      expect(elementRemoveSpy).toBeCalledWith();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-toast toastType="info">
+          <div slot="message">This is the message</div>
+        </gux-toast>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const dismissButton = element.shadowRoot.querySelector('gux-dismiss-button');
+      const elementRemoveSpy = jest.spyOn(element, 'remove');
+      page.win.addEventListener('guxdismiss', (event) => {
+        event.preventDefault();
+      });
+      dismissButton.click();
+      await page.waitForChanges();
+      expect(elementRemoveSpy).not.toBeCalled();
+    });
+  });
+});

package/dist/collection/components/stable/gux-toggle/gux-toggle-slider/gux-toggle-slider.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);
-}
-
 gux-toggle-slider {
   display: flex;
   align-items: center;
@@ -60,9 +21,7 @@ gux-toggle-slider .gux-toggle-slider.gux-disabled {
 }
 gux-toggle-slider .gux-toggle-slider:focus-visible {
   outline: none;
-  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);
 }
 gux-toggle-slider .gux-toggle-slider .gux-slider {

package/dist/collection/components/stable/gux-toggle/gux-toggle-slider/gux-toggle-slider.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class GuxToggleSlider {
   constructor() {
     this.checked = false;

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

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { randomHTMLId } from '../../../utils/dom/random-html-id';
-import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { randomHTMLId } from "../../../utils/dom/random-html-id";
+import { buildI18nForComponent } from "../../../i18n";
+import translationResources from "./i18n/en.json";
 export class GuxToggle {
   constructor() {
     this.labelId = randomHTMLId('gux-toggle-label');
@@ -188,7 +188,8 @@ export class GuxToggle {
           "references": {
             "GuxToggleLabelPosition": {
               "location": "import",
-              "path": "./gux-toggle.types"
+              "path": "./gux-toggle.types",
+              "id": "src/components/stable/gux-toggle/gux-toggle.types.ts::GuxToggleLabelPosition"
             }
           }
         },

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

@@ -0,0 +1,147 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'color-contrast',
+    target: '#disabledToggle,#gux-toggle-label-i',
+    exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+  }
+];
+async function newNonrandomE2EPage({ html }) {
+  const page = await newE2EPage();
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(html);
+  await page.waitForChanges();
+  await page.addScriptTag({
+    path: '../../node_modules/axe-core/axe.min.js'
+  });
+  await page.waitForChanges();
+  return page;
+}
+describe('gux-toggle', () => {
+  it('should build', async () => {
+    const page = await newNonrandomE2EPage({
+      html: `<gux-toggle lang="en"></gux-toggle>`
+    });
+    const element = await page.find('gux-toggle');
+    expect(element).toHaveAttribute('hydrated');
+  });
+  describe('#render', () => {
+    [
+      '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>',
+      '<gux-toggle lang="en" checked checked-label="on" unchecked-label="off"></gux-toggle>',
+      '<gux-toggle lang="en" id="disabledToggle" checked-label="On" unchecked-label="Off" disabled></gux-toggle>',
+      '<gux-toggle lang="en" id="disabledToggle" checked checked-label="on" unchecked-label="off" disabled></gux-toggle>',
+      `<gux-toggle lang="en"
+        checked-label="On"
+        unchecked-label="Off"
+        label-position="left"
+      ></gux-toggle>`,
+      `<gux-toggle lang="en"
+        checked
+        checked-label="on"
+        unchecked-label="off"
+        label-position="right"
+      ></gux-toggle>`,
+      `<gux-toggle lang="en"
+        checked-label="This is a long label for the toggle to test how it works"
+        unchecked-label="This is another long label for the toggle to test how it works"
+        label-position="left"
+      ></gux-toggle>`,
+      `<gux-toggle lang="en"
+        checked
+        checked-label="This is a long label for the toggle to test how it works"
+        unchecked-label="This is another long label for the toggle to test how it works"
+        label-position="right"
+      ></gux-toggle>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-toggle');
+        await a11yCheck(page, axeExclusions);
+        expect(element.innerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('User Interactions', () => {
+    [
+      {
+        name: 'clicked',
+        userInteraction: async (element) => await element.click()
+      }
+    ].forEach(({ name, userInteraction }) => {
+      describe(name, () => {
+        it(`should not fire a check event when an enabled toggle is disabled and ${name}`, async () => {
+          const html = '<gux-toggle lang="en" disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const checkSpy = await element.spyOnEvent('check');
+          await userInteraction(element);
+          await page.waitForChanges();
+          expect(checkSpy).toHaveLength(0);
+        });
+        it(`should fire a check event when an enabled toggle is ${name}`, async () => {
+          const html = '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          const checkSpy = await element.spyOnEvent('check');
+          await userInteraction(element);
+          await page.waitForChanges();
+          expect(checkSpy).toHaveLength(1);
+        });
+        it(`should check an unchecked toggle when ${name}`, async () => {
+          const html = '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newSparkE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          expect(await element.getProperty('checked')).toBe(false);
+          await userInteraction(element);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(true);
+        });
+        it(`should uncheck a checked toggle when ${name}`, async () => {
+          const html = '<gux-toggle lang="en" checked checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          expect(await element.getProperty('checked')).toBe(true);
+          await userInteraction(element);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(false);
+        });
+        it(`should not check an unchecked toggle when disabled and ${name}`, async () => {
+          const html = '<gux-toggle lang="en" disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          expect(await element.getProperty('checked')).toBe(false);
+          await userInteraction(element);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(false);
+        });
+        it(`should not uncheck a checked toggle when disabled and ${name}`, async () => {
+          const html = '<gux-toggle lang="en" checked disabled checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          expect(await element.getProperty('checked')).toBe(true);
+          await userInteraction(element);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(true);
+        });
+        it(`should not check the toggle if preventDefault is called on the event`, async () => {
+          const html = '<gux-toggle lang="en" checked-label="On" unchecked-label="Off"></gux-toggle>';
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-toggle');
+          await page.evaluate(() => {
+            document.addEventListener('check', event => {
+              event.preventDefault();
+            });
+          });
+          expect(await element.getProperty('checked')).toBe(false);
+          await userInteraction(element);
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBe(false);
+        });
+      });
+    });
+  });
+});