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

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

@@ -0,0 +1,258 @@
+jest.mock('../../../../utils/error/log-error', () => ({
+  __esModule: true,
+  logError: jest.fn()
+}));
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxButtonSlot } from "../gux-button-slot";
+import { logError } from "../../../../utils/error/log-error";
+const components = [GuxButtonSlot];
+const language = 'en';
+describe('gux-button-slot', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('#render', () => {
+    [
+      {
+        description: 'should render default button',
+        html: '<gux-button-slot><button type="button"accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render primary button',
+        html: '<gux-button-slot accent="primary"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render secondary button',
+        html: '<gux-button-slot accent="secondary"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render tertiary button',
+        html: '<gux-button-slot accent="tertiary"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render ghost button',
+        html: '<gux-button-slot accent="ghost"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render danger button',
+        html: '<gux-button-slot accent="danger"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render inline button',
+        html: '<gux-button-slot accent="inline"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render invalid button',
+        html: '<gux-button-slot accent="invalid"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled default button',
+        html: '<gux-button-slot><button type="button"accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled primary button',
+        html: '<gux-button-slot accent="primary"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled secondary button',
+        html: '<gux-button-slot accent="secondary"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled tertiary button',
+        html: '<gux-button-slot accent="tertiary"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled ghost button',
+        html: '<gux-button-slot accent="ghost"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled danger button',
+        html: '<gux-button-slot accent="danger"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled inline button',
+        html: '<gux-button-slot accent="inline"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render button with invalid accent',
+        html: '<gux-button-slot accent="invalid"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render default input[type=button]',
+        html: '<gux-button-slot><input type="button"accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render primary input[type=button]',
+        html: '<gux-button-slot accent="primary"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render secondary input[type=button]',
+        html: '<gux-button-slot accent="secondary"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render tertiary input[type=button]',
+        html: '<gux-button-slot accent="tertiary"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render ghost input[type=button]',
+        html: '<gux-button-slot accent="ghost"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render danger input[type=button]',
+        html: '<gux-button-slot accent="danger"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render inline input[type=button]',
+        html: '<gux-button-slot accent="inline"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render invalid input[type=button]',
+        html: '<gux-button-slot accent="invalid"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled default input[type=button]',
+        html: '<gux-button-slot><input type="button"accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled primary input[type=button]',
+        html: '<gux-button-slot accent="primary"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled secondary input[type=button]',
+        html: '<gux-button-slot accent="secondary"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled tertiary input[type=button]',
+        html: '<gux-button-slot accent="tertiary"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled ghost input[type=button]',
+        html: '<gux-button-slot accent="ghost"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled danger input[type=button]',
+        html: '<gux-button-slot accent="danger"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled inline input[type=button]',
+        html: '<gux-button-slot accent="inline"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render input[type=button] with invalid accent',
+        html: '<gux-button-slot accent="invalid"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render default input[type=submit]',
+        html: '<gux-button-slot><input type="submit"accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render primary input[type=submit]',
+        html: '<gux-button-slot accent="primary"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render secondary input[type=submit]',
+        html: '<gux-button-slot accent="secondary"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render tertiary input[type=submit]',
+        html: '<gux-button-slot accent="tertiary"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render ghost input[type=submit]',
+        html: '<gux-button-slot accent="ghost"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render danger input[type=submit]',
+        html: '<gux-button-slot accent="danger"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render inline input[type=submit]',
+        html: '<gux-button-slot accent="inline"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render invalid input[type=submit]',
+        html: '<gux-button-slot accent="invalid"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled default input[type=submit]',
+        html: '<gux-button-slot><input type="submit"accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled primary input[type=submit]',
+        html: '<gux-button-slot accent="primary"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled secondary input[type=submit]',
+        html: '<gux-button-slot accent="secondary"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled tertiary input[type=submit]',
+        html: '<gux-button-slot accent="tertiary"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled ghost input[type=submit]',
+        html: '<gux-button-slot accent="ghost"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled danger input[type=submit]',
+        html: '<gux-button-slot accent="danger"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled inline input[type=submit]',
+        html: '<gux-button-slot accent="inline"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render input[type=submit] with invalid accent',
+        html: '<gux-button-slot accent="invalid"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxButtonSlot);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('slot content', () => {
+    it('should not log an error if a button element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot><button type="button" accent="primary">Button</button></gux-button-slot>',
+        language
+      });
+      expect(logError).not.toHaveBeenCalled();
+    });
+    it('should not log an error if an input[type=button] element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot><input type="button" accent="primary" value="Button"/></gux-button-slot>',
+        language
+      });
+      expect(logError).not.toHaveBeenCalled();
+    });
+    it('should not log an error if an input[type=submit] element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot><input type="submit" accent="primary" value="Button"/></gux-button-slot>',
+        language
+      });
+      expect(logError).not.toHaveBeenCalled();
+    });
+    it('should not log an error if an input[type=text] element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot id="test"><input type="text" accent="primary" value="Button"/></gux-button-slot>',
+        language
+      });
+      expect(logError).toHaveBeenCalledWith(document.getElementById('test'), 'You must slot a button, input[type="button"] or input[type="submit"] element.');
+    });
+    it('should not log an error if a button element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot id="test"><div>Not a button</div></gux-button-slot>',
+        language
+      });
+      expect(logError).toHaveBeenCalledWith(document.getElementById('test'), 'You must slot a button, input[type="button"] or input[type="submit"] element.');
+    });
+  });
+});

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

@@ -53,15 +53,15 @@
 .gux-calendar .gux-header {
   position: relative;
   display: flex;
+  gap: var(--gse-ui-calendarMenu-header-gap);
   align-items: center;
   justify-content: space-between;
   height: var(--gse-ui-calendarMenu-month-single-header-height);
   padding: var(--gse-ui-calendarMenu-header-padding);
+  font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
   color: var(--gse-ui-calendarMenu-header-foregroundColor);
   background-color: var(--gse-ui-calendarMenu-header-backgroundColor);
   border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);
-  gap: var(--gse-ui-calendarMenu-header-gap);
-  font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
 }
 .gux-calendar .gux-header button {
   position: absolute;
@@ -89,9 +89,9 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  line-height: var(--gse-ui-calendarMenu-month-headerText-lineHeight);
-  font-size: var(--gse-ui-calendarMenu-month-headerText-fontSize);
   font-family: var(--gse-ui-calendarMenu-month-headerText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-month-headerText-fontSize);
+  line-height: var(--gse-ui-calendarMenu-month-headerText-lineHeight);
 }
 .gux-calendar .gux-header .gux-month-list label {
   width: 100%;
@@ -132,17 +132,17 @@
 }
 .gux-calendar .gux-content table tr th {
   font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
-  line-height: var(--gse-ui-calendarMenu-day-headerText-lineHeight);
   font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
   font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
+  line-height: var(--gse-ui-calendarMenu-day-headerText-lineHeight);
 }
 .gux-calendar .gux-content table tr td {
-  cursor: pointer;
   font-family: var(--gse-ui-calendarMenu-date-defaultText-fontFamily);
-  line-height: var(--gse-ui-calendarMenu-date-defaultText-lineHeight);
   font-size: var(--gse-ui-calendarMenu-date-defaultText-fontSize);
   font-weight: var(--gse-ui-calendarMenu-date-defaultText-fontWeight);
+  line-height: var(--gse-ui-calendarMenu-date-defaultText-lineHeight);
   color: var(--gse-ui-calendarMenu-date-default-foregroundColor);
+  cursor: pointer;
 }
 .gux-calendar .gux-content table tr td.gux-hovered {
   background-color: var(--gse-ui-calendarMenu-date-range-backgroundColor);
@@ -159,13 +159,13 @@
   background-color: var(--gse-ui-calendarMenu-date-range-backgroundColor);
 }
 .gux-calendar .gux-content table tr td.gux-start-date .gux-date, .gux-calendar .gux-content table tr td.gux-end-date .gux-date {
-  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
-  background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
-  width: var(--gse-ui-calendarMenu-day-date-size);
-  height: var(--gse-ui-calendarMenu-day-date-size);
   display: flex;
   align-items: center;
   justify-content: center;
+  width: var(--gse-ui-calendarMenu-day-date-size);
+  height: var(--gse-ui-calendarMenu-day-date-size);
+  background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }
 .gux-calendar .gux-content table tr td.gux-start-date .gux-date:hover, .gux-calendar .gux-content table tr td.gux-end-date .gux-date:hover {
   background-color: var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor);
@@ -181,8 +181,8 @@
   border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }
 .gux-calendar .gux-content table tr td.gux-disabled {
-  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
   pointer-events: none;
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
 .gux-calendar .gux-content table tr td.gux-not-in-month {
   opacity: var(--gse-ui-calendarMenu-disabled-opacity);
@@ -195,9 +195,9 @@
 }
 .gux-calendar .gux-content table tr td.gux-current-date {
   font-family: var(--gse-ui-calendarMenu-date-currentText-fontFamily);
-  line-height: var(--gse-ui-calendarMenu-date-currentText-lineHeight);
   font-size: var(--gse-ui-calendarMenu-date-currentText-fontSize);
   font-weight: var(--gse-ui-calendarMenu-date-currentText-fontWeight);
+  line-height: var(--gse-ui-calendarMenu-date-currentText-lineHeight);
 }
 
 .gux-sr-only {

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

@@ -1,10 +1,10 @@
-import { h } from '@stencil/core';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
-import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from '@utils/date/iso-dates';
-import { addClassToElements, removeClassToElements } from '@utils/dom/manipulate-elements-classes';
-import { trackComponent } from '@utils/tracking/usage';
-import { getDesiredLocale, getStartOfWeek } from '../../../i18n';
-import { firstDateInMonth, getWeekdays, getOffsetMonthDate, getDateMonthAndYearString } from './gux-calendar.service';
+import { h } from "@stencil/core";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
+import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from "../../../utils/date/iso-dates";
+import { addClassToElements, removeClassToElements } from "../../../utils/dom/manipulate-elements-classes";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getDesiredLocale, getStartOfWeek } from "../../../i18n";
+import { firstDateInMonth, getWeekdays, getOffsetMonthDate, getDateMonthAndYearString } from "./gux-calendar.service";
 export class GuxCalendar {
   constructor() {
     this.locale = 'en';
@@ -396,7 +396,8 @@ export class GuxCalendar {
           "references": {
             "GuxCalendarMode": {
               "location": "import",
-              "path": "./gux-calendar.types"
+              "path": "./gux-calendar.types",
+              "id": "src/components/stable/gux-calendar/gux-calendar.types.ts::GuxCalendarMode"
             }
           }
         },
@@ -437,7 +438,8 @@ export class GuxCalendar {
           "references": {
             "GuxCalendarDayOfWeek": {
               "location": "import",
-              "path": "./gux-calendar.types"
+              "path": "./gux-calendar.types",
+              "id": "src/components/stable/gux-calendar/gux-calendar.types.ts::GuxCalendarDayOfWeek"
             }
           }
         },
@@ -487,10 +489,12 @@ export class GuxCalendar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "Date": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Date"
             }
           },
           "return": "Promise<void>"
@@ -506,10 +510,12 @@ export class GuxCalendar {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLTableCellElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLTableCellElement"
             }
           },
           "return": "Promise<void>"
@@ -528,10 +534,12 @@ export class GuxCalendar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "Date": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Date"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/stable/gux-calendar/gux-calendar.service.js

@@ -1,4 +1,4 @@
-import { capitalizeFirstLetter } from '@utils/string/capitalize-first-letter';
+import { capitalizeFirstLetter } from "../../../utils/string/capitalize-first-letter";
 export function firstDateInMonth(month, year, startDayOfWeek) {
   const startDate = new Date(year, month, 1, 1, 0, 0, 0);
   const firstDayOfMonth = startDate.getDay();

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

@@ -0,0 +1,45 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-calendar', () => {
+  it('renders', async () => {
+    const page = await newSparkE2EPage({
+      html: '<gux-calendar lang="en"></gux-calendar>'
+    });
+    const element = await page.find('gux-calendar');
+    await a11yCheck(page);
+    expect(element).toHaveAttribute('hydrated');
+  });
+  it('shows the correct first day of week (en)', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-calendar lang="en"></gux-calendar>`
+    });
+    const element = await page.find('gux-calendar');
+    const firstDayOfWeek = await element.find('pierce/th');
+    expect(firstDayOfWeek.innerText).toEqual('S');
+  });
+  it('shows the correct first day of week (es-es)', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-calendar lang="es-es"></gux-calendar>`
+    });
+    const element = await page.find('gux-calendar');
+    const firstDayOfWeek = await element.find('pierce/th');
+    expect(firstDayOfWeek.innerText).toEqual('L');
+  });
+  it('should render the correct months when using a range calendar', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-calendar mode="range" number-of-months="2" value="2022-08-31/2022-09-06">
+      </gux-calendar>`
+    });
+    const element = await page.find('gux-calendar');
+    const monthList = element.shadowRoot.querySelector('.gux-month-list');
+    expect(monthList).toEqualHtml('<div class="gux-month-list"><label>August 2022</label><label>September 2022</label></div>');
+  });
+  it('should render the correct months when using a range calendar', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-calendar mode="range" number-of-months="2" value="2022-05-31/2022-06-06">
+      </gux-calendar>`
+    });
+    const element = await page.find('gux-calendar');
+    const monthList = element.shadowRoot.querySelector('.gux-month-list');
+    expect(monthList).toEqualHtml('<div class="gux-month-list"><label>May 2022</label><label>June 2022</label></div>');
+  });
+});