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

package/dist/collection/components/beta/gux-announce/tests/gux-announce.e2e.js

@@ -0,0 +1,18 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-announce-beta', () => {
+  describe('#render', () => {
+    [
+      '<gux-announce-beta> This is some text to read </gux-announce-beta>',
+      '<gux-announce-beta politeness="assertive"> This is some text to read </gux-announce-beta>',
+      '<gux-announce-beta politeness="off"> This is some text to read </gux-announce-beta>',
+      '<gux-announce-beta politeness="polite"> This is some text to read </gux-announce-beta>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-announce-beta');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-announce/tests/gux-announce.spec.js

@@ -0,0 +1,19 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxAnnounce } from "../gux-announce";
+const components = [GuxAnnounce];
+const language = 'en';
+describe('gux-announce-beta', () => {
+  describe('#render', () => {
+    [
+      '<gux-announce-beta> This is some text to read </gux-announce-beta>',
+      '<gux-announce-beta politeness="assertive"> This is some text to read </gux-announce-beta>',
+      '<gux-announce-beta politeness="off"> This is some text to read </gux-announce-beta>',
+      '<gux-announce-beta politeness="polite"> This is some text to read </gux-announce-beta>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-calendar-beta/components/single/gux-calendar.css

@@ -2,15 +2,17 @@
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
+  font-family: var(--gse-ui-calendarMenu-month-defaultText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-month-defaultText-fontSize);
   background: var(--gse-ui-calendarMenu-date-selected-foregroundColor);
-  box-shadow: rgba(34, 37, 41, 0.24) 0px 2px 4px;
   border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
-  font-size: var(--gse-ui-calendarMenu-month-defaultText-fontSize);
-  font-family: var(--gse-ui-calendarMenu-month-defaultText-fontFamily);
+  box-shadow: rgba(34, 37, 41, 0.24) 0 2px 4px;
 }
 .gux-calendar-beta .gux-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  height: var(--gse-ui-calendarMenu-month-single-header-height);
   padding: var(--gse-ui-calendarMenu-header-padding);
   font-style: normal;
   font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
@@ -18,15 +20,13 @@
   text-align: center;
   background-color: var(--gse-ui-calendarMenu-header-backgroundColor);
   border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);
-  justify-content: space-between;
-  height: var(--gse-ui-calendarMenu-month-single-header-height);
 }
 .gux-calendar-beta .gux-header .gux-header-month-and-year {
   width: var(--gse-ui-calendarMenu-month-single-header-textWidth);
-  color: var(--gse-ui-calendarMenu-month-selected-foregroundColor);
   font-family: var(--gse-ui-calendarMenu-month-headerText-fontFamily);
-  line-height: var(--gse-ui-calendarMenu-month-headerText-lineHeight);
   font-size: var(--gse-ui-calendarMenu-month-headerText-fontSize);
+  line-height: var(--gse-ui-calendarMenu-month-headerText-lineHeight);
+  color: var(--gse-ui-calendarMenu-month-selected-foregroundColor);
 }
 .gux-calendar-beta .gux-header .gux-left,
 .gux-calendar-beta .gux-header .gux-right {
@@ -50,12 +50,11 @@
   padding-top: 24px;
   padding-right: 24px;
   padding-left: 24px;
-  text-align: center;
-  color: var(--gse-ui-calendarMenu-day-dayHeader-foregroundColor);
   font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
   font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
-  font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
   font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
+  color: var(--gse-ui-calendarMenu-day-dayHeader-foregroundColor);
+  text-align: center;
 }
 .gux-calendar-beta .gux-week-days .gux-week-day {
   display: inline-block;
@@ -73,16 +72,16 @@
   display: inline-block;
   width: var(--gse-ui-calendarMenu-day-date-size);
   height: var(--gse-ui-calendarMenu-day-input-height);
+  font-family: var(--gse-ui-calendarMenu-date-currentText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-date-defaultText-fontSize);
   font-style: normal;
   font-weight: var(--gse-ui-calendarMenu-date-defaultText-fontWeight);
   line-height: 32px;
+  color: var(--gse-core-color-cornflower-600);
   text-align: center;
   vertical-align: middle;
   border: none;
   outline: none;
-  color: var(--gse-core-color-cornflower-600);
-  font-size: var(--gse-ui-calendarMenu-date-defaultText-fontSize);
-  font-family: var(--gse-ui-calendarMenu-date-currentText-fontFamily);
   opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
 .gux-calendar-beta .gux-content-week .gux-content-date.gux-current-month {
@@ -111,8 +110,8 @@
   border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }
 .gux-calendar-beta .gux-content-week .gux-content-date:focus-visible {
-  outline: 1px solid #7b61ff;
   border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
+  outline: 1px solid #7b61ff;
 }
 .gux-calendar-beta .gux-content-week .gux-content-date .gux-sr-only:not(:focus):not(:active) {
   position: absolute;
@@ -124,7 +123,7 @@
   white-space: nowrap;
 }
 .gux-calendar-beta .gux-content-week .gux-content-date.gux-current-date {
-  font-weight: var(--gse-ui-calendarMenu-date-currentText-fontWeight);
   font-family: var(--gse-ui-calendarMenu-month-currentText-fontFamily);
   font-size: var(--gse-ui-calendarMenu-date-currentText-fontSize);
+  font-weight: var(--gse-ui-calendarMenu-date-currentText-fontWeight);
 }

package/dist/collection/components/beta/gux-calendar-beta/components/single/gux-calendar.js

@@ -1,12 +1,12 @@
-import { h } from '@stencil/core';
-import { fromIsoDate } from '@utils/date/iso-dates';
-import { getWeekdays, getFirstOfMonth, getDateAsMonthYear, firstDateInMonth } from '../../services/calendar.service';
-import { getDesiredLocale, getStartOfWeek } from '../../../../../i18n';
-import { buildI18nForComponent } from '../../../../../i18n';
-import translationResources from '../../i18n/en.json';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
-import { logError } from '@utils/error/log-error';
-import simulateNativeEvent from '../../../../../utils/dom/simulate-native-event';
+import { h } from "@stencil/core";
+import { fromIsoDate } from "../../../../../utils/date/iso-dates";
+import { getWeekdays, getFirstOfMonth, getDateAsMonthYear, firstDateInMonth } from "../../services/calendar.service";
+import { getDesiredLocale, getStartOfWeek } from "../../../../../i18n";
+import { buildI18nForComponent } from "../../../../../i18n";
+import translationResources from "../../i18n/en.json";
+import { afterNextRenderTimeout } from "../../../../../utils/dom/after-next-render";
+import { logError } from "../../../../../utils/error/log-error";
+import simulateNativeEvent from "../../../../../utils/dom/simulate-native-event";
 export class GuxCalendar {
   constructor() {
     this.locale = 'en';

package/dist/collection/components/beta/gux-calendar-beta/services/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 getFirstOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
 }

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

@@ -0,0 +1,202 @@
+import { newSparkE2EPage } from "../../../../test/e2eTestUtils";
+import { goToPreviousMonth, goToNextMonth, validateHeaderMonth, validateSelectedDate, getContentDateElement } from "../services/tests.service";
+describe('gux-calendar', () => {
+  const defaultHtml = `
+    <gux-calendar-beta>
+      <input type="date" value="2023-05-19" min="2023-04-28" max="2023-06-18" />
+    </gux-calendar-beta>
+    `;
+  it('renders', async () => {
+    const page = await newSparkE2EPage({
+      html: defaultHtml
+    });
+    const element = await page.find('gux-calendar-beta');
+    expect(element).toHaveAttribute('hydrated');
+  });
+  describe('header', () => {
+    it('calendar increments by one month after clicking the right arrow button', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      // Validate that the current month before clicking the right arrow is May, 2023
+      await validateHeaderMonth(element, 'May 2023');
+      await goToNextMonth(element, page);
+      // await a11yCheck(page);
+      // Validate that the new month after clicking the right arrow is June, 2023
+      await validateHeaderMonth(element, 'June 2023');
+    });
+    it('calendar decrements by one month after clicking the left arrow button', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      // Validate that the current month before clicking the left arrow is May, 2023
+      await validateHeaderMonth(element, 'May 2023');
+      await goToPreviousMonth(element, page);
+      // Validate that the new month after clicking the left arrow  is April, 2023
+      await validateHeaderMonth(element, 'April 2023');
+    });
+  });
+  describe('content', () => {
+    it('selected date on page load is correct', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      // Validate that the selected date on page load is May 19, 2023
+      await validateSelectedDate(element, 'May 2023', '19');
+    });
+    it('clicking on a date in the current month causes the date to be selected', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      // Find May 10, 2023 in the calendar and click it so that it will be selected
+      const element = await page.find('gux-calendar-beta');
+      const contentDate = await getContentDateElement(element, 'May 10, 2023');
+      await contentDate.click();
+      await page.waitForChanges();
+      // Validate that clicking on May 10, 2023 causes it to be selected
+      await validateSelectedDate(element, 'May 2023', '10');
+    });
+    it('clicking on a date in the next month causes the date to be selected', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      // Find June 1, 2023 in the calendar and click it so that it will be selected
+      const element = await page.find('gux-calendar-beta');
+      const contentDate = await getContentDateElement(element, 'June 1, 2023');
+      await contentDate.click();
+      await page.waitForChanges();
+      // Validate that clicking on June 1, 2023 causes it to be selected
+      await validateSelectedDate(element, 'June 2023', '1');
+    });
+    it('clicking on a date in the previous month causes the date to be selected', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      // Find April 30, 2023 in the calendar and click it so that it will be selected
+      const element = await page.find('gux-calendar-beta');
+      const contentDate = await getContentDateElement(element, 'April 30, 2023');
+      await contentDate.click();
+      await page.waitForChanges();
+      // Validate that clicking on April 30, 2023 causes it to be selected
+      await validateSelectedDate(element, 'April 2023', '30');
+    });
+    describe('arrow key and page up/down navigation', () => {
+      it('pressing the down arrow key and then the enter key cause the selected date to increment by 1 week', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the down arrow key and then the enter key
+        await page.keyboard.press('ArrowDown');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateSelectedDate(element, 'May 2023', '26');
+      });
+      it('pressing the up arrow key and then the enter key cause the selected date to decrement by 1 week', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the up arrow key and then the enter key
+        await page.keyboard.press('ArrowUp');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateSelectedDate(element, 'May 2023', '12');
+      });
+      it('pressing the right arrow key and then the enter key cause the selected date to increment by 1 day', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the right arrow key and then the enter key
+        await page.keyboard.press('ArrowRight');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateSelectedDate(element, 'May 2023', '20');
+      });
+      it('pressing the left arrow key and then the enter key cause the selected date to decrement by 1 day', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the left arrow key and then the enter key
+        await page.keyboard.press('ArrowLeft');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateSelectedDate(element, 'May 2023', '18');
+      });
+      it('pressing the page down key causes the current month to decrement by 1 month', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the left arrow key and then the enter key
+        await page.keyboard.press('PageDown');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateHeaderMonth(element, 'April 2023');
+      });
+      it('pressing the page up key causes the current month to increment by 1 month', async () => {
+        const page = await newSparkE2EPage({
+          html: defaultHtml
+        });
+        const element = await page.find('gux-calendar-beta');
+        // First click the selected date to get focus on the calendar
+        const selectedDate = await element.find('pierce/.gux-selected');
+        await selectedDate.click();
+        // Press the left arrow key and then the enter key
+        await page.keyboard.press('PageUp');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await validateHeaderMonth(element, 'June 2023');
+      });
+    });
+    it('setting max prop causes an upper bound range to be implemented correctly', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      // Go to next month
+      await goToNextMonth(element, page);
+      const contentDate = await getContentDateElement(element, 'June 19, 2023');
+      expect(contentDate.className).toContain('gux-disabled');
+    });
+    it('setting min prop causes a lower bound range to be implemented correctly', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      await goToPreviousMonth(element, page);
+      const contentDate = await getContentDateElement(element, 'April 27, 2023');
+      expect(contentDate.className).toContain('gux-disabled');
+    });
+    it('tab index is set to 0 for selected date and -1 for non-selected date', async () => {
+      const page = await newSparkE2EPage({
+        html: defaultHtml
+      });
+      const element = await page.find('gux-calendar-beta');
+      const selectedDate = await getContentDateElement(element, 'May 19, 2023');
+      const nonSelectedDate = await getContentDateElement(element, 'May 20, 2023');
+      expect(selectedDate.tabIndex).toBe(0);
+      expect(nonSelectedDate.tabIndex).toBe(-1);
+    });
+  });
+});

package/dist/collection/components/beta/gux-calendar-beta/tests/gux-calendar.spec.js

@@ -0,0 +1,19 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxCalendar } from "../components/single/gux-calendar";
+const components = [GuxCalendar];
+const language = 'en';
+const html = `
+<gux-calendar-beta>
+  <input type="date" value="2023-05-19" min="2023-04-28" max="2023-06-18" />
+</gux-calendar-beta>
+`;
+describe('gux-calendar', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxCalendar);
+  });
+  it('renders', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.root).toMatchSnapshot();
+  });
+});

package/dist/collection/components/beta/gux-date/gux-date.js

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { DateTimeFormatter } from '../../../i18n/DateTimeFormatter';
-import { getDesiredLocale } from '../../../i18n/index';
-import { getValidTimezone } from '../../../utils/date/get-valid-timezone';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { DateTimeFormatter } from "../../../i18n/DateTimeFormatter";
+import { getDesiredLocale } from "../../../i18n/index";
+import { getValidTimezone } from "../../../utils/date/get-valid-timezone";
 export class GuxDate {
   constructor() {
     this.datetime = new Date().toISOString();
@@ -49,7 +49,8 @@ export class GuxDate {
           "references": {
             "GuxDateTimeFormat": {
               "location": "import",
-              "path": "../../../i18n/DateTimeFormatter"
+              "path": "../../../i18n/DateTimeFormatter",
+              "id": "src/i18n/DateTimeFormatter.ts::GuxDateTimeFormat"
             }
           }
         },
@@ -72,7 +73,8 @@ export class GuxDate {
           "references": {
             "GuxTimeZoneIdentifier": {
               "location": "import",
-              "path": "../../../i18n/time-zone/types"
+              "path": "../../../i18n/time-zone/types",
+              "id": "src/i18n/time-zone/types.ts::GuxTimeZoneIdentifier"
             }
           }
         },

package/dist/collection/components/beta/gux-date/tests/gux-date.e2e.js

@@ -0,0 +1,30 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-date-beta', () => {
+  describe('#render', () => {
+    [
+      `<gux-date-beta datetime=${date} format="short"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="medium"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="long"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="full"></gux-date-beta>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page);
+        const element = await page.find('gux-date-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#render different time zones', () => {
+    timeZoneIdentifiers.forEach((timeZone) => {
+      it(`should work as expected for "${timeZone}"`, async () => {
+        const html = `<gux-date-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-date-beta>`;
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-date-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-date/tests/gux-date.spec.js

@@ -0,0 +1,30 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxDate } from "../gux-date";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const components = [GuxDate];
+const language = 'en';
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-date', () => {
+  describe('#render different datetime formats eg(short,medium,full,long)', () => {
+    [
+      `<gux-date-beta datetime=${date} format="short"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="medium"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="full"></gux-date-beta>`,
+      `<gux-date-beta datetime=${date} format="long"></gux-date-beta>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#render different time zones', () => {
+    timeZoneIdentifiers.forEach((timeZone) => {
+      it(`should work as expected for "${timeZone}"`, async () => {
+        const html = `<gux-date-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-date-beta>`;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-date-time/gux-date-time.js

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { DateTimeFormatter } from '../../../i18n/DateTimeFormatter';
-import { getDesiredLocale } from '../../../i18n/index';
-import { getValidTimezone } from '../../../utils/date/get-valid-timezone';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { DateTimeFormatter } from "../../../i18n/DateTimeFormatter";
+import { getDesiredLocale } from "../../../i18n/index";
+import { getValidTimezone } from "../../../utils/date/get-valid-timezone";
 export class GuxDateTime {
   constructor() {
     this.datetime = new Date().toISOString();
@@ -49,7 +49,8 @@ export class GuxDateTime {
           "references": {
             "GuxDateTimeFormat": {
               "location": "import",
-              "path": "../../../i18n/DateTimeFormatter"
+              "path": "../../../i18n/DateTimeFormatter",
+              "id": "src/i18n/DateTimeFormatter.ts::GuxDateTimeFormat"
             }
           }
         },
@@ -72,7 +73,8 @@ export class GuxDateTime {
           "references": {
             "GuxTimeZoneIdentifier": {
               "location": "import",
-              "path": "../../../i18n/time-zone/types"
+              "path": "../../../i18n/time-zone/types",
+              "id": "src/i18n/time-zone/types.ts::GuxTimeZoneIdentifier"
             }
           }
         },

package/dist/collection/components/beta/gux-date-time/tests/gux-date-time.e2e.js

@@ -0,0 +1,30 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-date-time-beta', () => {
+  describe('#render', () => {
+    [
+      `<gux-date-time-beta datetime=${date} format="short"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="medium"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="long"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="full"></gux-date-time-beta>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page);
+        const element = await page.find('gux-date-time-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#render different time zones', () => {
+    timeZoneIdentifiers.forEach((timeZone) => {
+      it(`should work as expected for "${timeZone}"`, async () => {
+        const html = `<gux-date-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-date-time-beta>`;
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-date-time-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-date-time/tests/gux-date-time.spec.js

@@ -0,0 +1,30 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxDateTime } from "../gux-date-time";
+import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+const components = [GuxDateTime];
+const language = 'en';
+const date = '2022-07-07T13:35:30.100Z';
+describe('gux-date-time', () => {
+  describe('#render different datetime formats eg(short,medium,full,long)', () => {
+    [
+      `<gux-date-time-beta datetime=${date} format="short"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="medium"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="full"></gux-date-time-beta>`,
+      `<gux-date-time-beta datetime=${date} format="long"></gux-date-time-beta>`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('#render different time zones', () => {
+    timeZoneIdentifiers.forEach((timeZone) => {
+      it(`should work as expected for "${timeZone}"`, async () => {
+        const html = `<gux-date-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-date-time-beta>`;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.css

@@ -5,39 +5,39 @@
   box-shadow: var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
 }
 .gux-month-calendar .gux-current-month {
-  color: var(--gse-ui-calendarMenu-month-default-foregroundColor);
   font-family: var(--gse-ui-calendarMenu-month-currentText-fontFamily);
   font-size: var(--gse-ui-calendarMenu-month-currentText-fontSize);
-  line-height: var(--gse-ui-calendarMenu-month-currentText-lineHeight);
   font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
+  line-height: var(--gse-ui-calendarMenu-month-currentText-lineHeight);
+  color: var(--gse-ui-calendarMenu-month-default-foregroundColor);
 }
 .gux-month-calendar .gux-year-header {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: var(--gse-ui-calendarMenu-month-single-header-height);
+  padding: var(--gse-ui-calendarMenu-header-padding);
   font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
   font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
-  line-height: var(--gse-ui-calendarMenu-day-headerText-lineHeight);
   font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
-  height: var(--gse-ui-calendarMenu-month-single-header-height);
-  padding: var(--gse-ui-calendarMenu-header-padding);
+  line-height: var(--gse-ui-calendarMenu-day-headerText-lineHeight);
   color: var(--gse-ui-calendarMenu-header-foregroundColor);
   background-color: var(--gse-ui-calendarMenu-header-backgroundColor);
   border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);
 }
 .gux-month-calendar .gux-year-header button {
+  padding: 8px;
   color: inherit;
   cursor: pointer;
   background: none;
   border: none;
   outline: none;
-  padding: 8px;
 }
 .gux-month-calendar .gux-year-header button:focus-visible {
+  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
   outline: var(--gse-semantic-focusRing-width) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-color-focus);
   outline-offset: var(--gse-semantic-focusRing-offset);
-  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
 }
 .gux-month-calendar .gux-year-header button.gux-year-change:disabled {
   cursor: default;