genesys-spark-components 4.0.0-beta.42 → 4.0.0-beta.44

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/tests/gux-form-field-time-zone-picker.e2e.js

@@ -0,0 +1,123 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
+const axeExclusions = [];
+async function newNonrandomE2EPage({ html }) {
+  const page = await newE2EPage();
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(html);
+  await page.waitForChanges();
+  return page;
+}
+describe('gux-form-field-time-zone-picker', () => {
+  describe('#render', () => {
+    describe('label-position', () => {
+      [
+        '',
+        'label-position="above"',
+        'label-position="beside"',
+        'label-position="screenreader"'
+      ].forEach((componentAttribute, index) => {
+        const html = `
+        <gux-form-field-time-zone-picker ${componentAttribute}>
+        <gux-time-zone-picker-beta
+        value="Etc/GMT+1"
+        workspace-default="Etc/GMT"
+        local-default="America/Detroit"
+        >
+        </gux-time-zone-picker-beta>
+        <label slot="label">Select Time Zone</label>
+        </gux-form-field-time-zone-picker>
+        `;
+        it(`should render component as expected (${index + 1})`, async () => {
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-form-field-time-zone-picker');
+          const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+          expect(element.outerHTML).toMatchSnapshot();
+          expect(elementShadowDom).toMatchSnapshot();
+        });
+        it(`should be accessible (${index + 1})`, async () => {
+          const page = await newSparkE2EPage({ html });
+          await a11yCheck(page, axeExclusions);
+        });
+      });
+    });
+    describe('input attributes', () => {
+      ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+        const html = `
+          <gux-form-field-time-zone-picker>
+          <gux-time-zone-picker-beta
+          value="Etc/GMT+1"
+          workspace-default="Etc/GMT"
+          local-default="America/Detroit"
+          ${inputAttribute}
+        >
+        </gux-time-zone-picker-beta>
+          </gux-form-field-time-zone-picker>
+          `;
+        it(`should render component as expected (${index + 1})`, async () => {
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-form-field-time-zone-picker');
+          const elementShadowDom = await element.find('pierce/.gux-form-field-fieldset-container');
+          expect(element.outerHTML).toMatchSnapshot();
+          expect(elementShadowDom).toMatchSnapshot();
+        });
+        it(`should be accessible (${index + 1})`, async () => {
+          const page = await newSparkE2EPage({ html });
+          await a11yCheck(page, axeExclusions);
+        });
+      });
+    });
+    describe('help', () => {
+      const html = `
+      <gux-form-field-time-zone-picker>
+      <gux-time-zone-picker-beta
+      value="Etc/GMT+1"
+      workspace-default="Etc/GMT"
+      local-default="America/Detroit"
+        >
+        </gux-time-zone-picker-beta>
+        <label slot="label">Select Time Zone</label>
+        <span slot="help">This is a help message</span>
+        </gux-form-field-time-zone-picker>
+      `;
+      it('should render component as expected', async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-form-field-time-zone-picker');
+        const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+        expect(element.outerHTML).toMatchSnapshot();
+        expect(elementShadowDom).toMatchSnapshot();
+      });
+      it('should be accessible', async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page, axeExclusions);
+      });
+    });
+    describe('error', () => {
+      const html = `
+        <gux-form-field-time-zone-picker>
+        <gux-time-zone-picker-beta
+        value="Etc/GMT+1"
+        workspace-default="Etc/GMT"
+        local-default="America/Detroit"
+      >
+      </gux-time-zone-picker-beta>
+      <label slot="label">Select Time Zone</label>
+      <span slot="error">This is an error message</span>
+      </gux-form-field-time-zone-picker>
+        `;
+      it('should render component as expected', async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-form-field-time-zone-picker');
+        const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+        expect(element.outerHTML).toMatchSnapshot();
+        expect(elementShadowDom).toMatchSnapshot();
+      });
+      it('should be accessible', async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page, axeExclusions);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,103 @@
+import { newSpecPage } from "../../../../../../test/specTestUtils";
+import { GuxFormFieldTimeZonePicker } from "../gux-form-field-time-zone-picker";
+import { GuxScreenReader } from "../../../../../beta/gux-screen-reader/gux-screen-reader";
+const components = [GuxFormFieldTimeZonePicker, GuxScreenReader];
+const language = 'en';
+describe('gux-form-field-time-zone-picker', () => {
+  it('should build', async () => {
+    const html = `
+    <gux-form-field-time-zone-picker>
+      <gux-time-zone-picker-beta
+        value="Etc/GMT+1"
+        workspace-default="Etc/GMT"
+        local-default="America/Detroit"
+      >
+      </gux-time-zone-picker-beta>
+      <label slot="label">Select Time Zone</label>
+    </gux-form-field-time-zone-picker>
+    `;
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxFormFieldTimeZonePicker);
+  });
+  describe('#render', () => {
+    describe('label-position', () => {
+      [
+        '',
+        'label-position="above"',
+        'label-position="beside"',
+        'label-position="screenreader"'
+      ].forEach((componentAttribute, index) => {
+        it(`should render component as expected (${index + 1})`, async () => {
+          const html = `
+            <gux-form-field-time-zone-picker ${componentAttribute}>
+            <gux-time-zone-picker-beta
+            value="Etc/GMT+1"
+            workspace-default="Etc/GMT"
+            local-default="America/Detroit"
+          >
+          </gux-time-zone-picker-beta>
+          <label slot="label">Select Time Zone</label>
+            </gux-form-field-time-zone-picker>
+          `;
+          const page = await newSpecPage({ components, html, language });
+          expect(page.root).toMatchSnapshot();
+        });
+      });
+    });
+    describe('help', () => {
+      it('should render component as expected', async () => {
+        const html = `
+        <gux-form-field-time-zone-picker>
+        <gux-time-zone-picker-beta
+        value="Etc/GMT+1"
+        workspace-default="Etc/GMT"
+        local-default="America/Detroit"
+      >
+      </gux-time-zone-picker-beta>
+      <label slot="label">Select Time Zone</label>
+      <span slot="help">This is a help message</span>
+      </gux-form-field-time-zone-picker>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    describe('error', () => {
+      it('should render component as expected', async () => {
+        const html = `
+          <gux-form-field-time-zone-picker>
+          <gux-time-zone-picker-beta
+          value="Etc/GMT+1"
+          workspace-default="Etc/GMT"
+          local-default="America/Detroit"
+        >
+        </gux-time-zone-picker-beta>
+        <label slot="label">Select Time Zone</label>
+        <span slot="error">This is an error message</span>
+        </gux-form-field-time-zone-picker>
+          `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    describe('input attributes', () => {
+      ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+        it(`should render component as expected (${index + 1})`, async () => {
+          const html = `
+            <gux-form-field-time-zone-picker>
+            <gux-time-zone-picker-beta
+            value="Etc/GMT+1"
+            workspace-default="Etc/GMT"
+            local-default="America/Detroit"
+            ${inputAttribute}
+          >
+          </gux-time-zone-picker-beta>
+            </gux-form-field-time-zone-picker>
+            `;
+          const page = await newSpecPage({ components, html, language });
+          expect(page.root).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.css

@@ -14,7 +14,6 @@ button:not(:disabled):focus-visible, button:not(:disabled):hover {
 button gux-icon {
   width: var(--gse-ui-icon-size-sm);
   height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-input-gap);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 button:focus {

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

@@ -7,7 +7,6 @@ import tagResources from "./i18n/en.json";
  */
 export class GuxTag {
   constructor() {
-    this.value = undefined;
     this.accent = 'default';
     this.disabled = false;
     this.removable = false;
@@ -24,7 +23,7 @@ export class GuxTag {
     if (this.disabled || !this.removable) {
       return;
     }
-    this.guxdelete.emit(this.value);
+    this.guxdelete.emit();
   }
   onSlotChange(event) {
     const slotAssignedNodes = event.composedPath()[0].assignedNodes();
@@ -74,23 +73,6 @@ export class GuxTag {
   }
   static get properties() {
     return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Index for remove tag"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
       "accent": {
         "type": "string",
         "mutable": false,

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

@@ -6,8 +6,8 @@ describe('gux-tag', () => {
       '<gux-tag lang="en" accent="default">default (explicit)</gux-tag>',
       '<gux-tag lang="en" accent="1">navy</gux-tag>',
       '<gux-tag lang="en" accent="1"><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>',
-      '<gux-tag lang="en" accent="1" value="3" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>',
-      '<gux-tag lang="en" accent="1" value="3" removable disabled><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>'
+      '<gux-tag lang="en" accent="1" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>',
+      '<gux-tag lang="en" accent="1" removable disabled><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>'
     ].forEach((html, index) => {
       it(`should render component as expected (${index + 1})`, async () => {
         const page = await newSparkE2EPage({ html });
@@ -20,14 +20,14 @@ describe('gux-tag', () => {
   describe('delete', () => {
     describe('click', () => {
       it('should not have a delete button if tag is not removable', async () => {
-        const html = `<gux-tag lang="en" accent="1" value="3"><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
+        const html = `<gux-tag lang="en" accent="1"><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
         const page = await newSparkE2EPage({ html });
         const element = await page.find('gux-tag');
         const deleteButton = await element.find('pierce/.gux-tag-remove-button');
         expect(deleteButton).toBeNull();
       });
       it('should emit guxdelete if tag is removable and not disabled', async () => {
-        const html = `<gux-tag lang="en" accent="1" value="3" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
+        const html = `<gux-tag lang="en" accent="1" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
         const page = await newSparkE2EPage({ html });
         const element = await page.find('gux-tag');
         const deleteButton = await element.find('pierce/.gux-tag-remove-button');
@@ -37,7 +37,7 @@ describe('gux-tag', () => {
         expect(guxdeleteSpy).toHaveReceivedEvent();
       });
       it('should not emit guxdelete if tag is removable and disabled', async () => {
-        const html = `<gux-tag lang="en" accent="1" value="3" removable disabled><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
+        const html = `<gux-tag lang="en" accent="1" removable disabled><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
         const page = await newSparkE2EPage({ html });
         const element = await page.find('gux-tag');
         const deleteButton = await element.find('pierce/.gux-tag-remove-button');
@@ -49,7 +49,7 @@ describe('gux-tag', () => {
     });
     describe('keypress', () => {
       it('should emit guxdelete if tag is focused and removable and "Delete" is pressed', async () => {
-        const html = `<gux-tag lang="en" accent="1" value="3" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
+        const html = `<gux-tag lang="en" accent="1" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
         const page = await newSparkE2EPage({ html });
         const element = await page.find('gux-tag');
         const deleteButton = await element.find('pierce/.gux-tag-remove-button');
@@ -59,7 +59,7 @@ describe('gux-tag', () => {
         expect(guxdeleteSpy).toHaveReceivedEvent();
       });
       it('should emit guxdelete if tag is focused and removable and "Backspace" is pressed', async () => {
-        const html = `<gux-tag lang="en" accent="1" value="3" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
+        const html = `<gux-tag lang="en" accent="1" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>`;
         const page = await newSparkE2EPage({ html });
         const element = await page.find('gux-tag');
         const deleteButton = await element.find('pierce/.gux-tag-remove-button');
@@ -73,7 +73,7 @@ describe('gux-tag', () => {
   describe('tooltip', () => {
     describe('hover', () => {
       it('should show the tooltip on hover for tags with overflow text', async () => {
-        const html = `<gux-tag style="width:100px" lang="en" accent="1" value="3" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>Long long long long long long long</gux-tag>`;
+        const html = `<gux-tag style="width:100px" lang="en" accent="1" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>Long long long long long long long</gux-tag>`;
         const page = await newSparkE2EPage({ html });
         const element = await page.find('gux-tag');
         const deleteButton = await element.find('pierce/.gux-tag-remove-button');
@@ -90,7 +90,7 @@ describe('gux-tag', () => {
         expect(tooltipElement).toHaveAttribute('hidden');
       });
       it('should show the tooltip on hover for tags with icon only', async () => {
-        const html = `<gux-tag lang="en" accent="1" value="3" removable><gux-icon icon-name="bolt" screenreader-text="test tag"></gux-icon></gux-tag>`;
+        const html = `<gux-tag lang="en" accent="1" removable><gux-icon icon-name="bolt" screenreader-text="test tag"></gux-icon></gux-tag>`;
         const page = await newSparkE2EPage({ html });
         const element = await page.find('gux-tag');
         const deleteButton = await element.find('pierce/.gux-tag-remove-button');
@@ -110,24 +110,24 @@ describe('gux-tag', () => {
   });
   describe('a11y', () => {
     ['default', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'].forEach(accent => {
-      it(`should be accessible when acent is "${accent}"`, async () => {
-        const html = `<gux-tag lang="en" accent="${accent}" value="3" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>tag</gux-tag>`;
+      it(`should be accessible when accent is "${accent}"`, async () => {
+        const html = `<gux-tag lang="en" accent="${accent}" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>tag</gux-tag>`;
         const page = await newSparkE2EPage({ html });
         await a11yCheck(page);
       });
       it(`should be accessible when disabled and accent is "${accent}"`, async () => {
-        const html = `<gux-tag lang="en" accent="${accent}" value="3" removable disabled><gux-icon icon-name="bolt" decorative="true"></gux-icon>tag</gux-tag>`;
+        const html = `<gux-tag lang="en" accent="${accent}" removable disabled><gux-icon icon-name="bolt" decorative="true"></gux-icon>tag</gux-tag>`;
         const page = await newSparkE2EPage({ html });
         await a11yCheck(page);
       });
     });
     it('should be accessible when the text overflows the tag', async () => {
-      const html = `<gux-tag style="width:100px" lang="en" accent="1" value="3" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>Long long long long long long long</gux-tag>`;
+      const html = `<gux-tag style="width:100px" lang="en" accent="1" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>Long long long long long long long</gux-tag>`;
       const page = await newSparkE2EPage({ html });
       await a11yCheck(page);
     });
     it('should be accessible when there is an icon only tag', async () => {
-      const html = `<gux-tag lang="en" accent="1" value="3" removable><gux-icon icon-name="bolt" screenreader-text="test tag"></gux-icon></gux-tag>`;
+      const html = `<gux-tag lang="en" accent="1" removable><gux-icon icon-name="bolt" screenreader-text="test tag"></gux-icon></gux-tag>`;
       const page = await newSparkE2EPage({ html });
       await a11yCheck(page);
     });

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

@@ -9,8 +9,8 @@ describe('gux-tag', () => {
       '<gux-tag accent="default">default (explicit)</gux-tag>',
       '<gux-tag accent="1">navy</gux-tag>',
       '<gux-tag accent="1"><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>',
-      '<gux-tag accent="1" value="3" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>',
-      '<gux-tag accent="1" value="3" removable disabled><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>'
+      '<gux-tag accent="1" removable><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>',
+      '<gux-tag accent="1" removable disabled><gux-icon icon-name="bolt" decorative="true"></gux-icon>navy</gux-tag>'
     ].forEach((html, index) => {
       it(`should render component as expected (${index + 1})`, async () => {
         const page = await newSpecPage({ components, html, language });
@@ -22,7 +22,7 @@ describe('gux-tag', () => {
     describe('click', () => {
       it('should not have a delete button if tag is not removable', async () => {
         const html = `
-          <gux-tag accent="1" value="3">
+          <gux-tag accent="1">
             <gux-icon icon-name="bolt" decorative="true"></gux-icon>
             navy
           </gux-tag>
@@ -34,7 +34,7 @@ describe('gux-tag', () => {
       });
       it('should emit guxdelete if tag is removable and not disabled', async () => {
         const html = `
-          <gux-tag accent="1" value="3" removable>
+          <gux-tag accent="1" removable>
             <gux-icon icon-name="bolt" decorative="true"></gux-icon>
             navy
           </gux-tag>
@@ -46,11 +46,11 @@ describe('gux-tag', () => {
         page.win.addEventListener('guxdelete', guxdeleteSpy);
         deleteButton.click();
         await page.waitForChanges();
-        expect(guxdeleteSpy).toHaveBeenCalledWith(expect.objectContaining({ detail: '3' }));
+        expect(guxdeleteSpy).toHaveBeenCalled();
       });
       it('should not emit guxdelete if tag is removable and disabled', async () => {
         const html = `
-          <gux-tag accent="1" value="3" removable disabled>
+          <gux-tag accent="1" removable disabled>
             <gux-icon icon-name="bolt" decorative="true"></gux-icon>
             navy
           </gux-tag>
@@ -68,7 +68,7 @@ describe('gux-tag', () => {
     describe('keypress', () => {
       it('should emit guxdelete if tag is focused and removable and "Delete" is pressed', async () => {
         const html = `
-          <gux-tag accent="1" value="3" removable>
+          <gux-tag accent="1" removable>
             <gux-icon icon-name="bolt" decorative="true"></gux-icon>
             navy
           </gux-tag>
@@ -79,11 +79,11 @@ describe('gux-tag', () => {
         page.win.addEventListener('guxdelete', guxdeleteSpy);
         element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete' }));
         await page.waitForChanges();
-        expect(guxdeleteSpy).toHaveBeenCalledWith(expect.objectContaining({ detail: '3' }));
+        expect(guxdeleteSpy).toHaveBeenCalled();
       });
       it('should emit guxdelete if tag is focused and removable and "Backspace" is pressed', async () => {
         const html = `
-          <gux-tag accent="1" value="3" removable>
+          <gux-tag accent="1" removable>
             <gux-icon icon-name="bolt" decorative="true"></gux-icon>
             navy
           </gux-tag>`;
@@ -93,11 +93,11 @@ describe('gux-tag', () => {
         page.win.addEventListener('guxdelete', guxdeleteSpy);
         element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
         await page.waitForChanges();
-        expect(guxdeleteSpy).toHaveBeenCalledWith(expect.objectContaining({ detail: '3' }));
+        expect(guxdeleteSpy).toHaveBeenCalled();
       });
       it('should not emit guxdelete if tag is focused and not removable and "Delete" is pressed', async () => {
         const html = `
-          <gux-tag accent="1" value="3">
+          <gux-tag accent="1">
             <gux-icon icon-name="bolt" decorative="true"></gux-icon>
             navy
           </gux-tag>
@@ -112,7 +112,7 @@ describe('gux-tag', () => {
       });
       it('should not emit guxdelete if tag is focused and not removable and "Backspace" is pressed', async () => {
         const html = `
-          <gux-tag accent="1" value="3">
+          <gux-tag accent="1">
             <gux-icon icon-name="bolt" decorative="true"></gux-icon>
             navy
           </gux-tag>

package/dist/component-specs.json

@@ -128,8 +128,7 @@
         "inherit"
       ],
       "disabled": "checkbox",
-      "removable": "checkbox",
-      "value": "text"
+      "removable": "checkbox"
     },
     "events": {
       "guxdelete": ""
@@ -896,6 +895,17 @@
     },
     "events": []
   },
+  "gux-form-field-time-zone-picker": {
+    "beta": false,
+    "attributes": {
+      "label-position": [
+        "above",
+        "beside",
+        "screenreader"
+      ]
+    },
+    "events": []
+  },
   "gux-form-field-time-picker": {
     "beta": false,
     "attributes": {
@@ -1403,7 +1413,10 @@
   "gux-time-zone-picker": {
     "beta": true,
     "attributes": {
+      "disabled": "checkbox",
+      "has-error": "checkbox",
       "local-default": "text",
+      "required": "checkbox",
       "value": "text",
       "workspace-default": "text"
     },

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "4.0.0-beta.42",
+  "version": "4.0.0-beta.44",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "54",
-  "buildDate": "2023-10-13T11:27:53.246435Z"
+  "build": "59",
+  "buildDate": "2023-10-18T04:12:05.063376Z"
 }