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

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.css

@@ -18,134 +18,134 @@
 */
 @keyframes largeSpin {
   0% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(0deg);
   }
   7.5% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(0deg);
   }
   20% {
-    transform: rotate(90deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(90deg);
   }
   30% {
-    transform: rotate(180deg);
     stroke-dasharray: 34.5575191895;
+    transform: rotate(180deg);
   }
   40% {
     stroke-dasharray: 34.5575191895;
   }
   50% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(450deg);
   }
   57.5% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(450deg);
   }
   70% {
-    transform: rotate(540deg);
     stroke-dasharray: 34.5575191895;
+    transform: rotate(540deg);
   }
   80% {
-    transform: rotate(630deg);
     stroke-dasharray: 34.5575191895;
+    transform: rotate(630deg);
   }
   90% {
     stroke-dasharray: 34.5575191895;
   }
   100% {
-    transform: rotate(900deg);
     stroke-dasharray: 1 68.115038379;
+    transform: rotate(900deg);
   }
 }
 @keyframes smallSpin {
   0% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(0deg);
   }
   7.5% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(0deg);
   }
   20% {
-    transform: rotate(90deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(90deg);
   }
   30% {
-    transform: rotate(180deg);
     stroke-dasharray: 10.9955742876;
+    transform: rotate(180deg);
   }
   40% {
     stroke-dasharray: 10.9955742876;
   }
   50% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(450deg);
   }
   57.5% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(450deg);
   }
   70% {
-    transform: rotate(540deg);
     stroke-dasharray: 10.9955742876;
+    transform: rotate(540deg);
   }
   80% {
-    transform: rotate(630deg);
     stroke-dasharray: 10.9955742876;
+    transform: rotate(630deg);
   }
   90% {
     stroke-dasharray: 10.9955742876;
   }
   100% {
-    transform: rotate(900deg);
     stroke-dasharray: 1 20.9911485751;
+    transform: rotate(900deg);
   }
 }
 @keyframes largeThinSpin {
   0% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(0deg);
   }
   7.5% {
-    transform: rotate(0deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(0deg);
   }
   20% {
-    transform: rotate(90deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(90deg);
   }
   30% {
-    transform: rotate(180deg);
     stroke-dasharray: 36.9137136797;
+    transform: rotate(180deg);
   }
   40% {
     stroke-dasharray: 36.9137136797;
   }
   50% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(450deg);
   }
   57.5% {
-    transform: rotate(450deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(450deg);
   }
   70% {
-    transform: rotate(540deg);
     stroke-dasharray: 36.9137136797;
+    transform: rotate(540deg);
   }
   80% {
-    transform: rotate(630deg);
     stroke-dasharray: 36.9137136797;
+    transform: rotate(630deg);
   }
   90% {
     stroke-dasharray: 36.9137136797;
   }
   100% {
-    transform: rotate(900deg);
     stroke-dasharray: 1 72.8274273594;
+    transform: rotate(900deg);
   }
 }
 :host {
@@ -154,8 +154,8 @@
 
 div[role=progressbar] .gux-svg-container {
   display: block;
-  height: var(--gse-ui-progressAndLoading-spinner-large);
   width: var(--gse-ui-progressAndLoading-spinner-large);
+  height: var(--gse-ui-progressAndLoading-spinner-large);
 }
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle,
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
@@ -165,8 +165,8 @@ div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
   transform-origin: 50% 50%;
   animation-name: largeSpin;
   animation-duration: 2s;
-  animation-iteration-count: infinite, infinite;
   animation-timing-function: linear;
+  animation-iteration-count: infinite, infinite;
 }
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
   display: none;
@@ -185,8 +185,8 @@ div[role=progressbar].gux-full-page .gux-svg-container .gux-static-circle {
   display: none;
 }
 div[role=progressbar].gux-input .gux-svg-container {
-  height: var(--gse-ui-progressAndLoading-spinner-small);
   width: var(--gse-ui-progressAndLoading-spinner-small);
+  height: var(--gse-ui-progressAndLoading-spinner-small);
 }
 div[role=progressbar].gux-input .gux-svg-container .gux-dynamic-circle {
   fill: none;
@@ -195,8 +195,8 @@ div[role=progressbar].gux-input .gux-svg-container .gux-dynamic-circle {
   transform-origin: 50% 50%;
   animation-name: smallSpin;
   animation-duration: 2s;
-  animation-iteration-count: infinite, infinite;
   animation-timing-function: linear;
+  animation-iteration-count: infinite, infinite;
 }
 div[role=progressbar].gux-input .gux-svg-container .gux-static-circle {
   stroke: var(--gse-ui-progressAndLoading-spinner-base);

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.functional.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { largeSpinner, largeBorder, smallSpinner, smallBorder } from './gux-radial-loading.service';
+import { h } from "@stencil/core";
+import { largeSpinner, largeBorder, smallSpinner, smallBorder } from "./gux-radial-loading.service";
 export const GuxSpinnerState = ({ context = 'modal', screenreaderText }) => {
   let size = largeSpinner;
   let radius = largeSpinner * 0.5 - largeBorder * 0.5;

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.js

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent } from '../../../i18n';
-import { trackComponent } from '@utils/tracking/usage';
-import { GuxSpinnerState } from './gux-radial-loading.functional';
-import modalComponentResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../i18n";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { GuxSpinnerState } from "./gux-radial-loading.functional";
+import modalComponentResources from "./i18n/en.json";
 export class GuxRadialLoading {
   constructor() {
     this.context = 'modal';
@@ -38,7 +38,8 @@ export class GuxRadialLoading {
           "references": {
             "GuxRadialLoadingContext": {
               "location": "import",
-              "path": "./gux-radial-loading.types"
+              "path": "./gux-radial-loading.types",
+              "id": "src/components/stable/gux-radial-loading/gux-radial-loading.types.ts::GuxRadialLoadingContext"
             }
           }
         },

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

@@ -0,0 +1,33 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+function getInternalProgressBar(radialLoadingElement) {
+  return radialLoadingElement.shadowRoot.querySelector('div[role="progressbar"]');
+}
+describe('gux-radial-loading', () => {
+  [
+    '<gux-radial-loading lang="en"></gux-radial-loading>',
+    '<gux-radial-loading lang="en" context="modal"></gux-radial-loading>',
+    '<gux-radial-loading lang="en" context="input"></gux-radial-loading>',
+    '<gux-radial-loading lang="en" context="full-page"></gux-radial-loading>'
+  ].forEach((html, index) => {
+    it(`should display component as expected (${index + 1})`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-radial-loading');
+      await a11yCheck(page);
+      expect(element.innerHTML).toMatchSnapshot();
+    });
+  });
+  it('should add an aria-label with the provided screenreader-text to the progressbar', async () => {
+    const html = '<gux-radial-loading lang="en" screenreader-text="Loading Content"></gux-radial-loading>';
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-radial-loading');
+    await a11yCheck(page);
+    expect(getInternalProgressBar(element).getAttribute('aria-label')).toEqual('Loading Content');
+  });
+  it('should add the default aria-label text if no screenreader-text is provided', async () => {
+    const html = '<gux-radial-loading lang="en"></gux-radial-loading>';
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-radial-loading');
+    await a11yCheck(page);
+    expect(getInternalProgressBar(element).getAttribute('aria-label')).toEqual('Loading');
+  });
+});

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

@@ -0,0 +1,33 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxRadialLoading } from "../gux-radial-loading";
+describe('gux-radial-loading', () => {
+  let component;
+  beforeEach(async () => {
+    const page = await newSpecPage({
+      components: [GuxRadialLoading],
+      html: `<gux-radial-loading></gux-radial-loading>`,
+      language: 'en'
+    });
+    component = page.rootInstance;
+  });
+  it('should build', async () => {
+    expect(component).toBeInstanceOf(GuxRadialLoading);
+  });
+  describe('#render', () => {
+    [
+      '<gux-radial-loading screenreader-text="Loading"></gux-radial-loading>',
+      '<gux-radial-loading context="modal" screenreader-text="Loading"></gux-radial-loading>',
+      '<gux-radial-loading context="full-page" screenreader-text="Loading"></gux-radial-loading>',
+      '<gux-radial-loading context="input" screenreader-text="Loading"></gux-radial-loading>'
+    ].forEach((input, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({
+          components: [GuxRadialLoading],
+          html: input,
+          language: 'en'
+        });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.css

@@ -18,8 +18,8 @@
 
 div[role=progressbar] .gux-svg-container {
   display: block;
-  height: var(--gse-ui-progressAndLoading-spinner-large);
   width: var(--gse-ui-progressAndLoading-spinner-large);
+  height: var(--gse-ui-progressAndLoading-spinner-large);
 }
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle {
   fill: none;
@@ -35,9 +35,9 @@ div[role=progressbar] .gux-svg-container .gux-static-circle {
 }
 div[role=progressbar] .gux-svg-container .gux-percentage {
   font-family: var(--gse-ui-progressAndLoading-spinner-text-fontFamily);
+  font-size: var(--gse-ui-progressAndLoading-spinner-text-fontSize);
   font-weight: var(--gse-ui-progressAndLoading-spinner-text-fontWeight);
   line-height: var(--gse-ui-progressAndLoading-spinner-text-lineHeight);
-  font-size: var(--gse-ui-progressAndLoading-spinner-text-fontSize);
-  fill: var(--gse-ui-progressAndLoading-textColor);
   text-anchor: middle;
+  fill: var(--gse-ui-progressAndLoading-textColor);
 }

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.functional.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { getPercentageString, STROKE_DASH, RADIUS, OVERALL_SIZE } from './gux-radial-progress.service';
+import { h } from "@stencil/core";
+import { getPercentageString, STROKE_DASH, RADIUS, OVERALL_SIZE } from "./gux-radial-progress.service";
 export const GuxPercentageState = ({ value, max, screenreaderText }) => {
   return (h("div", { role: "progressbar", "aria-valuenow": value, "aria-valuemin": "0", "aria-valuemax": max, "aria-label": screenreaderText }, h("svg", { class: "gux-svg-container", viewBox: `0 0 ${OVERALL_SIZE} ${OVERALL_SIZE}`, role: "presentation" }, h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-static-circle" }), h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-dynamic-circle", "stroke-dashoffset": STROKE_DASH * (1 - value / max), "stroke-dasharray": STROKE_DASH, "stroke-linecap": "round" }), h("text", { x: "50%", y: "50%", "dominant-baseline": "central", class: "gux-percentage" }, getPercentageString(value, max)))));
 };

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.js

@@ -1,8 +1,8 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { logWarn } from '../../../utils/error/log-error';
-import { GuxPercentageState, GuxSpinnerState } from './gux-radial-progress.functional';
-import { canShowPercentageState } from './gux-radial-progress.service';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { logWarn } from "../../../utils/error/log-error";
+import { GuxPercentageState, GuxSpinnerState } from "./gux-radial-progress.functional";
+import { canShowPercentageState } from "./gux-radial-progress.service";
 export class GuxRadialProgress {
   constructor() {
     this.value = undefined;

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

@@ -0,0 +1,58 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+async function newNonrandomE2EPage({ html }) {
+  const page = await newSparkE2EPage({
+    html: `<div lang="en">${html}</div>`
+  });
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.waitForChanges();
+  return page;
+}
+function getInternalProgressBar(radialProgressElement) {
+  return radialProgressElement.shadowRoot.querySelector('div[role="progressbar"]');
+}
+describe('gux-radial-progress', () => {
+  [
+    '<gux-radial-progress lang="en" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="123" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="200" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="test" max="100" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="-123" max="100" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="200" max="100" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="10" max="test" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="0" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="10" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="100" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="10" max="100" screenreader-text="Uploading file"></gux-radial-progress>',
+    '<gux-radial-progress value="10" max="10" screenreader-text="Uploading file"></gux-radial-progress>'
+  ].forEach((html, index) => {
+    it(`should display component as expected (${index + 1})`, async () => {
+      const page = await newNonrandomE2EPage({ html });
+      const element = await page.find('gux-radial-progress');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+  it('should render changes to the percentage data', async () => {
+    const page = await newNonrandomE2EPage({
+      html: '<gux-radial-progress value="0" screenreader-text="Uploading file"></gux-radial-progress>'
+    });
+    const element = await page.find('gux-radial-progress');
+    expect(getInternalProgressBar(element).textContent).toEqual(`0%`);
+    element.setProperty('value', 30);
+    await page.waitForChanges();
+    expect(getInternalProgressBar(element).textContent).toEqual(`30%`);
+    element.setProperty('value', 100);
+    await page.waitForChanges();
+    expect(getInternalProgressBar(element).textContent).toEqual(`100%`);
+  });
+  it('should add an aria-label with the provided screenreader-text to the progressbar', async () => {
+    const page = await newNonrandomE2EPage({
+      html: '<gux-radial-progress value="0" screenreader-text="Uploading file"></gux-radial-progress>'
+    });
+    const element = await page.find('gux-radial-progress');
+    await a11yCheck(page);
+    expect(getInternalProgressBar(element).getAttribute('aria-label')).toEqual('Uploading file');
+  });
+});

package/dist/collection/components/stable/gux-radial-progress/tests/gux-radial-progress.service.spec.js

@@ -0,0 +1,36 @@
+import { canShowPercentageState, getPercentageString } from "../gux-radial-progress.service";
+describe('gux-radial-progress.service', () => {
+  describe('#canShowPercentageState', () => {
+    [
+      { value: 0, max: 0, expectResult: false },
+      { value: 0, max: 10, expectResult: true },
+      { value: 10, max: 0, expectResult: false },
+      { value: 1, max: 10, expectResult: true },
+      { value: 10, max: 10, expectResult: true },
+      { value: 10, max: 1, expectResult: false },
+      { value: NaN, max: 10, expectResult: false },
+      { value: 10, max: NaN, expectResult: false },
+      { value: -1, max: 10, expectResult: false },
+      { value: 1, max: -10, expectResult: false }
+    ].forEach(({ value, max, expectResult }, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const result = canShowPercentageState(value, max);
+        expect(result).toBe(expectResult);
+      });
+    });
+  });
+  describe('#getPercentageString', () => {
+    [
+      { value: 0, max: 10, expectResult: '0%' },
+      { value: 1, max: 10, expectResult: '10%' },
+      { value: 1.5, max: 10, expectResult: '15%' },
+      { value: 1.55, max: 10, expectResult: '16%' },
+      { value: 1.5555, max: 10, expectResult: '16%' }
+    ].forEach(({ value, max, expectResult }, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const result = getPercentageString(value, max);
+        expect(result).toBe(expectResult);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,61 @@
+jest.mock('../../../../utils/error/log-error', () => ({
+  __esModule: true,
+  logWarn: jest.fn()
+}));
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxRadialProgress } from "../gux-radial-progress";
+import { logWarn } from "../../../../utils/error/log-error";
+const components = [GuxRadialProgress];
+const language = 'en';
+describe('gux-radial-progress', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should build', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `<gux-radial-progress></gux-radial-progress>`,
+      language
+    });
+    expect(page.rootInstance).toBeInstanceOf(GuxRadialProgress);
+  });
+  describe('#render', () => {
+    [
+      '<gux-radial-progress screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="0" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="10" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="100" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="123" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="200" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="10" max="100" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="10" max="10" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="test" max="100" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="-123" max="100" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="200" max="100" screenreader-text="Uploading file"></gux-radial-progress>',
+      '<gux-radial-progress value="10" max="test" screenreader-text="Uploading file"></gux-radial-progress>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('Screenreader text requirements', () => {
+    it('should log a warning message if displaying progress and no screenreader text is passed in', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-radial-progress value="10" max="10"></gux-radial-progress>',
+        language
+      });
+      expect(logWarn).toHaveBeenCalled();
+    });
+    it('should not log a warning message if displaying progress and screenreader text is passed in', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-radial-progress value="10" max="10" screenreader-text="Uploading file"></gux-radial-progress>',
+        language
+      });
+      expect(logWarn).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -18,11 +18,11 @@
 }
 
 .gux-rating-star-container {
-  color: var(--gse-ui-ui--rating-default-color);
+  color: var(--gse-ui-rating-default-color);
 }
 .gux-rating-star-container.gux-disabled {
-  pointer-events: none;
   color: var(--gse-ui-rating-disabled-color);
+  pointer-events: none;
   opacity: var(--gse-ui-rating-disabled-opacity);
 }
 .gux-rating-star-container gux-icon {

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

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
-import clamp from '../../../utils/number/clamp';
-import { trackComponent } from '@utils/tracking/usage';
-import { logWarn } from '../../../utils/error/log-error';
+import { h, Host } from "@stencil/core";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import clamp from "../../../utils/number/clamp";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { logWarn } from "../../../utils/error/log-error";
 export class GuxRating {
   constructor() {
     this.value = 0;