genesys-spark-components 4.0.0-beta.67 → 4.0.0-beta.69

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

@@ -9,6 +9,7 @@ export class GuxRating {
     this.maxValue = 5;
     this.disabled = false;
     this.readonly = false;
+    this.increment = 'default';
   }
   onClick(event) {
     event.stopPropagation();
@@ -26,7 +27,15 @@ export class GuxRating {
       this.updateRatingValue(0);
     }
     else if (clickedStarNominalValue !== Math.floor(this.value)) {
-      this.updateRatingValue(clickedStarNominalValue - 0.5);
+      if (this.increment === 'half') {
+        this.updateRatingValue(clickedStarNominalValue - 0.5);
+      }
+      else {
+        this.updateRatingValue(clickedStarNominalValue);
+      }
+    }
+    else {
+      this.updateRatingValue(clickedStarNominalValue);
     }
   }
   onKeyDown(event) {
@@ -34,16 +43,15 @@ export class GuxRating {
     if (this.disabled || this.readonly) {
       return;
     }
+    const increment = this.increment === 'half' ? 0.5 : 1;
     switch (event.key) {
       case 'ArrowUp':
-      case 'ArrowLeft':
         event.preventDefault();
-        this.updateRatingValue(this.value - 0.5);
+        this.updateRatingValue(this.value + increment);
         break;
       case 'ArrowDown':
-      case 'ArrowRight':
         event.preventDefault();
-        this.updateRatingValue(this.value + 0.5);
+        this.updateRatingValue(this.value - increment);
         break;
       case 'End':
         event.preventDefault();
@@ -56,7 +64,9 @@ export class GuxRating {
     }
   }
   updateRatingValue(newValue) {
-    const validatedNewValue = clamp(newValue, 0, Array.from(this.starContainer.children).length);
+    const clampedNewValue = clamp(newValue, 0, Array.from(this.starContainer.children).length);
+    const increment = this.increment === 'half' ? 0.5 : 1;
+    const validatedNewValue = Math.round(clampedNewValue / increment) * increment;
     if (this.value !== validatedNewValue) {
       this.value = validatedNewValue;
       simulateNativeEvent(this.root, 'input');
@@ -179,6 +189,24 @@ export class GuxRating {
         "attribute": "readonly",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "increment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'half'",
+          "resolved": "\"default\" | \"half\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "increment",
+        "reflect": false,
+        "defaultValue": "'default'"
       }
     };
   }

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

@@ -1,7 +1,7 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
 describe('gux-rating', () => {
-  async function getStarCounts(page) {
-    const element = await page.find('gux-rating');
+  async function getStarCounts(e2ePage) {
+    const element = await e2ePage.find('gux-rating');
     return {
       emptyStars: element.shadowRoot.querySelectorAll('gux-icon[icon-name="rating"]').length,
       halfStars: element.shadowRoot.querySelectorAll('gux-icon[icon-name="rating-partial"]').length,
@@ -91,7 +91,7 @@ describe('gux-rating', () => {
   describe('interactions', () => {
     describe('click', () => {
       async function clickStar(e2ePage, position) {
-        await page.evaluate(ratingElementIndex => {
+        await e2ePage.evaluate(ratingElementIndex => {
           const element = document.querySelector('gux-rating');
           const starContainer = element.shadowRoot.querySelector('.gux-rating-star-container');
           const starElements = starContainer.children;
@@ -100,107 +100,210 @@ describe('gux-rating', () => {
         }, position - 1);
         await e2ePage.waitForChanges();
       }
-      let page;
-      beforeEach(async () => {
-        page = await newSparkE2EPage({
-          html: '<gux-rating aria-label="Feedback"></gux-rating>'
-        });
-      });
-      [
-        { starToClick: 1 },
-        { starToClick: 2 },
-        { starToClick: 3 },
-        { starToClick: 4 },
-        { starToClick: 5 }
-      ].forEach(({ starToClick }) => {
-        it(`should render 0 if star ${starToClick} is clicked but the component is disabled`, async () => {
-          page = await newSparkE2EPage({
-            html: '<gux-rating disabled aria-label="Feedback"></gux-rating>'
+      describe('increment', () => {
+        describe('default', () => {
+          let page;
+          beforeEach(async () => {
+            page = await newSparkE2EPage({
+              html: '<gux-rating aria-label="Feedback"></gux-rating>'
+            });
           });
-          await clickStar(page, starToClick);
-          expect(await getStarCounts(page)).toEqual({
-            emptyStars: 5,
-            fullStars: 0,
-            halfStars: 0
+          [
+            { starToClick: 1 },
+            { starToClick: 2 },
+            { starToClick: 3 },
+            { starToClick: 4 },
+            { starToClick: 5 }
+          ].forEach(({ starToClick }) => {
+            it(`should render 0 if star ${starToClick} is clicked but the component is disabled`, async () => {
+              page = await newSparkE2EPage({
+                html: '<gux-rating disabled aria-label="Feedback"></gux-rating>'
+              });
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5,
+                fullStars: 0,
+                halfStars: 0
+              });
+            });
+            it(`should render 0 if star ${starToClick} is clicked but the component is readonly`, async () => {
+              page = await newSparkE2EPage({
+                html: '<gux-rating readonly aria-label="Feedback"></gux-rating>'
+              });
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5,
+                fullStars: 0,
+                halfStars: 0
+              });
+            });
+            it(`should render ${starToClick} if star ${starToClick} is clicked`, async () => {
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5 - starToClick,
+                fullStars: starToClick,
+                halfStars: 0
+              });
+            });
+            it(`should render 0 if star ${starToClick} is clicked twice times`, async () => {
+              await clickStar(page, starToClick);
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5,
+                fullStars: 0,
+                halfStars: 0
+              });
+            });
           });
         });
-        it(`should render 0 if star ${starToClick} is clicked but the component is readonly`, async () => {
-          page = await newSparkE2EPage({
-            html: '<gux-rating readonly aria-label="Feedback"></gux-rating>'
+        describe('half', () => {
+          let page;
+          beforeEach(async () => {
+            page = await newSparkE2EPage({
+              html: '<gux-rating increment="half" aria-label="Feedback"></gux-rating>'
+            });
           });
-          await clickStar(page, starToClick);
-          expect(await getStarCounts(page)).toEqual({
-            emptyStars: 5,
-            fullStars: 0,
-            halfStars: 0
-          });
-        });
-        it(`should render ${starToClick - 0.5} if star ${starToClick} is clicked`, async () => {
-          await clickStar(page, starToClick);
-          expect(await getStarCounts(page)).toEqual({
-            emptyStars: 5 - starToClick,
-            fullStars: starToClick - 1,
-            halfStars: 1
-          });
-        });
-        it(`should render ${starToClick} if star ${starToClick} is clicked twice`, async () => {
-          await clickStar(page, starToClick);
-          await clickStar(page, starToClick);
-          expect(await getStarCounts(page)).toEqual({
-            emptyStars: 5 - starToClick,
-            fullStars: starToClick,
-            halfStars: 0
-          });
-        });
-        it(`should render 0 if star ${starToClick} is clicked three times`, async () => {
-          await clickStar(page, starToClick);
-          await clickStar(page, starToClick);
-          await clickStar(page, starToClick);
-          expect(await getStarCounts(page)).toEqual({
-            emptyStars: 5,
-            fullStars: 0,
-            halfStars: 0
+          [
+            { starToClick: 1 },
+            { starToClick: 2 },
+            { starToClick: 3 },
+            { starToClick: 4 },
+            { starToClick: 5 }
+          ].forEach(({ starToClick }) => {
+            it(`should render 0 if star ${starToClick} is clicked but the component is disabled`, async () => {
+              page = await newSparkE2EPage({
+                html: ' <gux-rating increment="half" disabled aria-label="Feedback"></gux-rating>'
+              });
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5,
+                fullStars: 0,
+                halfStars: 0
+              });
+            });
+            it(`should render 0 if star ${starToClick} is clicked but the component is readonly`, async () => {
+              page = await newSparkE2EPage({
+                html: ' <gux-rating increment="half" readonly aria-label="Feedback"></gux-rating>'
+              });
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5,
+                fullStars: 0,
+                halfStars: 0
+              });
+            });
+            it(`should render ${starToClick - 0.5} if star ${starToClick} is clicked`, async () => {
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5 - starToClick,
+                fullStars: starToClick - 1,
+                halfStars: 1
+              });
+            });
+            it(`should render ${starToClick} if star ${starToClick} is clicked twice`, async () => {
+              await clickStar(page, starToClick);
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5 - starToClick,
+                fullStars: starToClick,
+                halfStars: 0
+              });
+            });
+            it(`should render 0 if star ${starToClick} is clicked three times`, async () => {
+              await clickStar(page, starToClick);
+              await clickStar(page, starToClick);
+              await clickStar(page, starToClick);
+              expect(await getStarCounts(page)).toEqual({
+                emptyStars: 5,
+                fullStars: 0,
+                halfStars: 0
+              });
+            });
           });
         });
       });
     });
     describe('keyboard', () => {
-      let page;
-      beforeEach(async () => {
-        page = await newSparkE2EPage({
-          html: '<gux-rating value="2.5" aria-label="Feedback"></gux-rating>'
+      describe('increment', () => {
+        describe('default', () => {
+          let page;
+          beforeEach(async () => {
+            page = await newSparkE2EPage({
+              html: '<gux-rating value="2" aria-label="Feedback"></gux-rating>'
+            });
+          });
+          [
+            {
+              press: 'ArrowDown',
+              expectedStarCounts: { emptyStars: 4, fullStars: 1, halfStars: 0 }
+            },
+            {
+              press: 'ArrowRight',
+              expectedStarCounts: { emptyStars: 3, fullStars: 2, halfStars: 0 }
+            },
+            {
+              press: 'ArrowUp',
+              expectedStarCounts: { emptyStars: 2, fullStars: 3, halfStars: 0 }
+            },
+            {
+              press: 'ArrowLeft',
+              expectedStarCounts: { emptyStars: 3, fullStars: 2, halfStars: 0 }
+            },
+            {
+              press: 'Home',
+              expectedStarCounts: { emptyStars: 5, fullStars: 0, halfStars: 0 }
+            },
+            {
+              press: 'End',
+              expectedStarCounts: { emptyStars: 0, fullStars: 5, halfStars: 0 }
+            }
+          ].forEach(({ press, expectedStarCounts }) => {
+            it(`should render component as expected ${press}`, async () => {
+              const element = await page.find('gux-rating');
+              await element.press(press);
+              expect(await getStarCounts(page)).toEqual(expectedStarCounts);
+            });
+          });
         });
-      });
-      [
-        {
-          press: 'ArrowDown',
-          expectedStarCounts: { emptyStars: 2, fullStars: 3, halfStars: 0 }
-        },
-        {
-          press: 'ArrowRight',
-          expectedStarCounts: { emptyStars: 2, fullStars: 3, halfStars: 0 }
-        },
-        {
-          press: 'ArrowUp',
-          expectedStarCounts: { emptyStars: 3, fullStars: 2, halfStars: 0 }
-        },
-        {
-          press: 'ArrowLeft',
-          expectedStarCounts: { emptyStars: 3, fullStars: 2, halfStars: 0 }
-        },
-        {
-          press: 'Home',
-          expectedStarCounts: { emptyStars: 5, fullStars: 0, halfStars: 0 }
-        },
-        {
-          press: 'End',
-          expectedStarCounts: { emptyStars: 0, fullStars: 5, halfStars: 0 }
-        }
-      ].forEach(({ press, expectedStarCounts }, index) => {
-        it(`should render component as expected (${index + 1})`, async () => {
-          const element = await page.find('gux-rating');
-          await element.press(press);
-          expect(await getStarCounts(page)).toEqual(expectedStarCounts);
+        describe('half', () => {
+          let page;
+          beforeEach(async () => {
+            page = await newSparkE2EPage({
+              html: '<gux-rating increment="half" value="2.5" aria-label="Feedback"></gux-rating>'
+            });
+          });
+          [
+            {
+              press: 'ArrowDown',
+              expectedStarCounts: { emptyStars: 3, fullStars: 2, halfStars: 0 }
+            },
+            {
+              press: 'ArrowRight',
+              expectedStarCounts: { emptyStars: 2, fullStars: 2, halfStars: 1 }
+            },
+            {
+              press: 'ArrowUp',
+              expectedStarCounts: { emptyStars: 2, fullStars: 3, halfStars: 0 }
+            },
+            {
+              press: 'ArrowLeft',
+              expectedStarCounts: { emptyStars: 2, fullStars: 2, halfStars: 1 }
+            },
+            {
+              press: 'Home',
+              expectedStarCounts: { emptyStars: 5, fullStars: 0, halfStars: 0 }
+            },
+            {
+              press: 'End',
+              expectedStarCounts: { emptyStars: 0, fullStars: 5, halfStars: 0 }
+            }
+          ].forEach(({ press, expectedStarCounts }) => {
+            it(`should render component as expected ${press}`, async () => {
+              const element = await page.find('gux-rating');
+              await element.press(press);
+              expect(await getStarCounts(page)).toEqual(expectedStarCounts);
+            });
+          });
         });
       });
     });

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

@@ -12,16 +12,23 @@ describe('gux-rating', () => {
     [
       '<gux-rating aria-label="Feedback"></gux-rating>',
       '<gux-rating value="0" aria-label="Feedback"></gux-rating>',
-      '<gux-rating value="0.5" aria-label="Feedback"></gux-rating>',
       '<gux-rating value="1" aria-label="Feedback"></gux-rating>',
-      '<gux-rating value="1.5" aria-label="Feedback"></gux-rating>',
       '<gux-rating value="2" aria-label="Feedback"></gux-rating>',
-      '<gux-rating value="2.5" aria-label="Feedback"></gux-rating>',
       '<gux-rating value="3" aria-label="Feedback"></gux-rating>',
-      '<gux-rating value="3.5" aria-label="Feedback"></gux-rating>',
       '<gux-rating value="4" aria-label="Feedback"></gux-rating>',
-      '<gux-rating value="4.5" aria-label="Feedback"></gux-rating>',
       '<gux-rating value="5" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="0" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="0.5" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="1" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="1.5" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="2" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="2.5" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="3" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="3.5" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="4" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="4.5" aria-label="Feedback"></gux-rating>',
+      '<gux-rating increment="half" value="5" aria-label="Feedback"></gux-rating>',
       '<gux-rating value="0" max-value=10 aria-label="Feedback"></gux-rating>',
       '<gux-rating value="5" max-value=10 aria-label="Feedback"></gux-rating>',
       '<gux-rating value="10" max-value=10 aria-label="Feedback"></gux-rating>',

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

@@ -13,4 +13,5 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
 }

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

@@ -11,14 +11,15 @@ export function getTimeDisplayValues(minuteInterval, clockType) {
   }, []);
 }
 export function getLocaleClockType(root) {
-  const locale = getDesiredLocale(root);
+  const locale = getDesiredLocale(root).toLowerCase();
   const date = new Date('January 19, 1975 15:00:00 UTC+00:00');
   const time = new Intl.DateTimeFormat(locale, {
     timeStyle: 'short',
     timeZone: 'UTC'
   }).format(date);
-  // The localization team has requested that arabic uses the 24h clock.
-  if (locale.startsWith('ar')) {
+  // The localization team has requested that some locales be hardcoded to the 24h clock. https://inindca.atlassian.net/browse/LOCAL-9597
+  const localesSetTo24h = ['ar', 'ko', 'zh-cn', 'zh-tw'];
+  if (localesSetTo24h.some(localeSetTo24h => locale.startsWith(localeSetTo24h))) {
     return '24h';
   }
   return new RegExp('.*15.*').test(time) ? '24h' : '12h';

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

@@ -332,6 +332,18 @@ describe('gux-time-picker.service', () => {
         expect(getLocaleClockType(element)).toEqual(expect.stringMatching(/^12h$|^24h$/));
       });
     });
+    [
+      { locale: 'ar' },
+      { locale: 'ko' },
+      { locale: 'zh-cn' },
+      { locale: 'zh-tw' }
+    ].forEach(({ locale }) => {
+      it(`should return "24h" for "${locale}" as the localization team specifically requested that`, async () => {
+        const element = document.createElement('div');
+        element.setAttribute('lang', locale);
+        expect(getLocaleClockType(element)).toEqual('24h');
+      });
+    });
   });
   describe('#incrementHour', () => {
     [

package/dist/collection/components/stable/gux-tooltip-title/gux-tooltip-title.css

@@ -36,4 +36,8 @@ gux-tooltip {
   left: -20px;
   flex-shrink: 0;
   width: 16px;
+}
+
+.gux-icon-only {
+  line-height: 0px;
 }

package/dist/collection/components/stable/gux-tooltip-title/gux-tooltip-title.js

@@ -121,7 +121,10 @@ export class GuxTooltipTitle {
   }
   render() {
     return [
-      h("span", { class: "gux-title-container" }, h("slot", null)),
+      h("span", { class: {
+          'gux-title-container': true,
+          'gux-icon-only': this.iconOnly
+        } }, h("slot", null)),
       this.renderTooltip()
     ];
   }

package/dist/component-specs.json

@@ -187,6 +187,10 @@
     "beta": false,
     "attributes": {
       "disabled": "checkbox",
+      "increment": [
+        "default",
+        "half"
+      ],
       "max-value": "text",
       "readonly": "checkbox",
       "value": "text"
@@ -519,6 +523,7 @@
         "custom/file-pen-question",
         "custom/filter-notification",
         "custom/font-regular-highlight",
+        "custom/gkn-logo",
         "custom/list-alphabetical-regular",
         "custom/list-roman-regular",
         "custom/one-button",

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "4.0.0-beta.67",
+  "version": "4.0.0-beta.69",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "9",
-  "buildDate": "2023-11-29T05:21:25.208902Z"
+  "build": "12",
+  "buildDate": "2023-12-01T05:12:31.940458Z"
 }