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

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.js

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { randomHTMLId } from '@utils/dom/random-html-id';
-import { logError } from '@utils/error/log-error';
+import { h } from "@stencil/core";
+import { randomHTMLId } from "../../../../utils/dom/random-html-";
+import { logError } from "../../../../utils/error/log-error";
 /**
  * @slot header - Required slot for the heading
  * @slot subheader - Optional slot for a subheader
@@ -79,7 +79,8 @@ export class GuxAccordionSection {
           "references": {
             "GuxAccordionSectionArrowPosition": {
               "location": "import",
-              "path": "./gux-accordion-section.types"
+              "path": "./gux-accordion-section.types",
+              "id": "src/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.types.ts::GuxAccordionSectionArrowPosition"
             }
           }
         },
@@ -102,7 +103,8 @@ export class GuxAccordionSection {
           "references": {
             "GuxAccordionSectionContentLayout": {
               "location": "import",
-              "path": "./gux-accordion-section.types"
+              "path": "./gux-accordion-section.types",
+              "id": "src/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.types.ts::GuxAccordionSectionContentLayout"
             }
           }
         },

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot - collection of gux-accordion-section elements
  */

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

@@ -0,0 +1,46 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-accordion', () => {
+  it('renders', async () => {
+    const html = `
+    <gux-accordion>
+      <gux-accordion-section>
+        <h2 slot="header">First Section</h2>
+        <div slot="content">Sample Content</div>
+      </gux-accordion-section>
+      <gux-accordion-section arrow-position="beside-text">
+        <h2 slot="header">Second Section</h2>
+        <div slot="content">Sample Content</div>
+      </gux-accordion-section>
+      <gux-accordion-section disabled>
+        <h2 slot="header">Third Section</h2>
+        <h3 slot="subheader">This is the subheader</h3>
+        <div slot="content">Sample Content</div>
+      </gux-accordion-section>
+      <gux-accordion-section>
+        <h2 slot="header">Fourth Section</h2>
+        <h3 slot="subheader">This is the subheader</h3>
+        <gux-icon
+          slot="icon"
+          icon-name="user-add"
+          screenreader-text="add John Smith to contact list"
+        ></gux-icon>
+        <div slot="content">Sample Content</div>
+      </gux-accordion-section>
+      <gux-accordion-section reverse-headings="true">
+        <h2 slot="header">Fourth Section</h2>
+        <h3 slot="subheader">This is the subheader</h3>
+        <gux-icon
+          slot="icon"
+          icon-name="user-add"
+          screenreader-text="add John Smith to contact list"
+        ></gux-icon>
+        <div slot="content">Sample Content</div>
+      </gux-accordion-section>
+    </gux-accordion>
+    `;
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-accordion');
+    await a11yCheck(page);
+    expect(element.outerHTML).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,52 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxAccordion } from "../gux-accordion";
+import { GuxAccordionSection } from "../gux-accordion-section/gux-accordion-section";
+const components = [GuxAccordion, GuxAccordionSection];
+const html = `
+<gux-accordion>
+  <gux-accordion-section>
+    <h2 slot="header">First Section</h2>
+    <div slot="content">Sample Content</div>
+  </gux-accordion-section>
+  <gux-accordion-section arrow-position="beside-text">
+    <h2 slot="header">Second Section</h2>
+    <div slot="content">Sample Content</div>
+  </gux-accordion-section>
+  <gux-accordion-section disabled>
+    <h2 slot="header">Third Section</h2>
+    <h3 slot="subheader">This is the subheader</h3>
+    <div slot="content">Sample Content</div>
+  </gux-accordion-section>
+  <gux-accordion-section>
+    <h2 slot="header">Fourth Section</h2>
+    <h3 slot="subheader">This is the subheader</h3>
+    <gux-icon
+      slot="icon"
+      icon-name="user-add"
+      screenreader-text="add John Smith to contact list"
+    ></gux-icon>
+    <div slot="content">Sample Content</div>
+  </gux-accordion-section>
+  <gux-accordion-section reverse-headings="true">
+    <h2 slot="header">Fourth Section</h2>
+    <h3 slot="subheader">This is the subheader</h3>
+    <gux-icon
+      slot="icon"
+      icon-name="user-add"
+      screenreader-text="add John Smith to contact list"
+    ></gux-icon>
+    <div slot="content">Sample Content</div>
+  </gux-accordion-section>
+</gux-accordion>
+`;
+const language = 'en';
+describe('gux-accordion', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxAccordion);
+  });
+  it('renders', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.root).toMatchSnapshot();
+  });
+});

package/dist/collection/components/stable/gux-action-button/gux-action-button.css

@@ -39,5 +39,5 @@
   background-color: var(--gse-ui-menu-wrapper-backgroundColor);
   border: 1px solid var(--gse-ui-menu-wrapper-border);
   border-radius: 4px;
-  box-shadow: 0px 4px 6px 1px rgba(35, 57, 92, 0.12);
+  box-shadow: 0 4px 6px 1px rgba(35, 57, 92, 0.12);
 }

package/dist/collection/components/stable/gux-action-button/gux-action-button.js

@@ -8,14 +8,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from '@stencil/core';
-import { OnClickOutside } from '@utils/decorator/on-click-outside';
-import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../i18n';
-import defaultResources from './i18n/en.json';
-import { getGuxActionButtonAccent } from './gux-action-button.types';
+import { h } from "@stencil/core";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n";
+import defaultResources from "./i18n/en.json";
+import { getGuxActionButtonAccent } from "./gux-action-button.types";
 /**
  * @slot title - slot for icon and button text
  */
@@ -140,7 +140,8 @@ export class GuxActionButton {
           "references": {
             "GuxActionButtonType": {
               "location": "import",
-              "path": "./gux-action-button.types"
+              "path": "./gux-action-button.types",
+              "id": "src/components/stable/gux-action-button/gux-action-button.types.ts::GuxActionButtonType"
             }
           }
         },
@@ -181,7 +182,8 @@ export class GuxActionButton {
           "references": {
             "GuxActionButtonAccent": {
               "location": "import",
-              "path": "./gux-action-button.types"
+              "path": "./gux-action-button.types",
+              "id": "src/components/stable/gux-action-button/gux-action-button.types.ts::GuxActionButtonAccent"
             }
           }
         },

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

@@ -0,0 +1,93 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+async function clickActionButton(page) {
+  return await page.click('pierce/.gux-action-button > button');
+}
+async function clickDropdownButton(page) {
+  return await page.click('pierce/.gux-dropdown-button > button');
+}
+async function keypressOnDropdownButton(page, keypress) {
+  const element = await page.find('gux-action-button');
+  const dropdownButton = await element.find('pierce/.gux-dropdown-button button');
+  await dropdownButton.press(keypress);
+}
+async function keypressOnListItemButton(page, keypress) {
+  const element = await page.find('gux-list-item');
+  const actionItemButton = await element.find('pierce/button');
+  await actionItemButton.press(keypress);
+}
+describe('gux-action-button', () => {
+  const html = `
+  <gux-action-button lang="en" accent="primary">
+    <div slot="title">Primary</div>
+    <gux-list-item onclick="notify(event)">Test 1</gux-list-item>
+    <gux-list-item onclick="notify(event)">Test 2</gux-list-item>
+    <gux-list-item onclick="notify(event)">Test 3</gux-list-item>
+    <gux-list-divider></gux-list-divider>
+    <gux-list-item onclick="notify(event)">Test 4</gux-list-item>
+  </gux-action-button>
+  `;
+  it('renders', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-action-button');
+    await a11yCheck(page, [], 'closed');
+    await clickDropdownButton(page);
+    await a11yCheck(page, [], 'open');
+    expect(element).toHaveAttribute('hydrated');
+  });
+  it('should fire actionClick event if not disabled', async () => {
+    const page = await newSparkE2EPage({ html });
+    const onActionClick = await page.spyOnEvent('actionClick');
+    await clickActionButton(page);
+    expect(onActionClick).toHaveReceivedEventTimes(1);
+  });
+  it('should not fire actionClick event if disabled', async () => {
+    const page = await newSparkE2EPage({ html });
+    const onActionClick = await page.spyOnEvent('actionClick');
+    const element = await page.find('gux-action-button');
+    element.setAttribute('disabled', 'disabled');
+    await page.waitForChanges();
+    await clickActionButton(page);
+    expect(onActionClick).toHaveReceivedEventTimes(0);
+  });
+  it.skip('should fire open and close events if not disabled on click', async () => {
+    const page = await newSparkE2EPage({ html });
+    const onOpen = await page.spyOnEvent('open');
+    const onClose = await page.spyOnEvent('close');
+    const onClick = await page.spyOnEvent('click');
+    await clickDropdownButton(page);
+    await clickDropdownButton(page);
+    await keypressOnDropdownButton(page, 'ArrowDown');
+    await keypressOnListItemButton(page, 'Enter');
+    await keypressOnListItemButton(page, 'Escape');
+    expect(onOpen).toHaveReceivedEventTimes(2);
+    expect(onClose).toHaveReceivedEventTimes(2);
+    expect(onClick).toHaveReceivedEventTimes(3);
+  });
+  it('should fire open and close events if not disabled using the keyboard', async () => {
+    const page = await newSparkE2EPage({ html });
+    const onOpen = await page.spyOnEvent('open');
+    const onClose = await page.spyOnEvent('close');
+    await keypressOnDropdownButton(page, 'ArrowDown');
+    await keypressOnListItemButton(page, 'Escape');
+    expect(onOpen).toHaveReceivedEventTimes(1);
+    expect(onClose).toHaveReceivedEventTimes(1);
+  });
+  it('should not fire open event if disabled on click', async () => {
+    const page = await newSparkE2EPage({ html });
+    const onOpen = await page.spyOnEvent('open');
+    const element = await page.find('gux-action-button');
+    element.setAttribute('disabled', 'disabled');
+    await page.waitForChanges();
+    await clickDropdownButton(page);
+    expect(onOpen).toHaveReceivedEventTimes(0);
+  });
+  it('should not fire open event if disabled using the keyboard', async () => {
+    const page = await newSparkE2EPage({ html });
+    const onOpen = await page.spyOnEvent('open');
+    const element = await page.find('gux-action-button');
+    element.setAttribute('disabled', 'disabled');
+    await page.waitForChanges();
+    await keypressOnDropdownButton(page, 'ArrowDown');
+    expect(onOpen).toHaveReceivedEventTimes(0);
+  });
+});

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

@@ -0,0 +1,96 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxActionButton } from "../gux-action-button";
+import { GuxList } from "../../gux-list/gux-list";
+import { GuxListDivider } from "../../gux-list/gux-list-divider/gux-list-divider";
+import { GuxListItem } from "../../gux-list/gux-list-item/gux-list-item";
+const components = [GuxActionButton, GuxList, GuxListDivider, GuxListItem];
+const html = `
+<gux-action-button lang="en" accent="primary">
+  <div slot="title">Primary</div>
+  <gux-list-item onclick="notify(event)">Test 1</gux-list-item>
+  <gux-list-item onclick="notify(event)">Test 2</gux-list-item>
+  <gux-list-item onclick="notify(event)">Test 3</gux-list-item>
+  <gux-list-divider></gux-list-divider>
+  <gux-list-item onclick="notify(event)">Test 4</gux-list-item>
+</gux-action-button>
+`;
+const language = 'en';
+describe('gux-action-button', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxActionButton);
+  });
+  it('renders', async () => {
+    const page = await newSpecPage({ components, html, language });
+    expect(page.root).toMatchSnapshot();
+  });
+  it('should fire actionClick event if not disabled', async () => {
+    const page = await newSpecPage({ components, html, language });
+    const actionClickSpy = jest.fn();
+    page.win.addEventListener('actionClick', actionClickSpy);
+    const element = document.querySelector('gux-action-button');
+    const actionButton = element.shadowRoot.querySelector('.gux-action-button > button');
+    actionButton.click();
+    expect(actionClickSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should not fire actionClick event if disabled', async () => {
+    const disableHtml = `
+    <gux-action-button lang="en" accent="primary" disabled>
+      <div slot="title">Primary</div>
+      <gux-list-item onclick="notify(event)">Test 1</gux-list-item>
+      <gux-list-item onclick="notify(event)">Test 2</gux-list-item>
+      <gux-list-item onclick="notify(event)">Test 3</gux-list-item>
+      <gux-list-divider></gux-list-divider>
+      <gux-list-item onclick="notify(event)">Test 4</gux-list-item>
+    </gux-action-button>
+    `;
+    const page = await newSpecPage({ components, html: disableHtml, language });
+    const actionClickSpy = jest.fn();
+    page.win.addEventListener('actionClick', actionClickSpy);
+    const element = document.querySelector('gux-action-button');
+    const actionButton = element.shadowRoot.querySelector('.gux-action-button > button');
+    actionButton.click();
+    expect(actionClickSpy).toHaveBeenCalledTimes(0);
+  });
+  it('should fire open and close events if not disabled', async () => {
+    jest.useFakeTimers('legacy');
+    const page = await newSpecPage({ components, html, language });
+    const openSpy = jest.fn();
+    const closeSpy = jest.fn();
+    page.win.addEventListener('open', openSpy);
+    page.win.addEventListener('close', closeSpy);
+    const element = document.querySelector('gux-action-button');
+    const dropdownButton = element.shadowRoot.querySelector('.gux-dropdown-button > button');
+    dropdownButton.dispatchEvent(new MouseEvent('mouseup', {
+      bubbles: true,
+      cancelable: true
+    }));
+    jest.runAllTimers();
+    dropdownButton.dispatchEvent(new MouseEvent('mouseup', {
+      bubbles: true,
+      cancelable: true
+    }));
+    jest.runAllTimers();
+    expect(openSpy).toHaveBeenCalledTimes(1);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should not fire open event if disabled', async () => {
+    const disableHtml = `
+    <gux-action-button lang="en" accent="primary" disabled>
+      <div slot="title">Primary</div>
+      <gux-list-item onclick="notify(event)">Test 1</gux-list-item>
+      <gux-list-item onclick="notify(event)">Test 2</gux-list-item>
+      <gux-list-item onclick="notify(event)">Test 3</gux-list-item>
+      <gux-list-divider></gux-list-divider>
+      <gux-list-item onclick="notify(event)">Test 4</gux-list-item>
+    </gux-action-button>
+    `;
+    const page = await newSpecPage({ components, html: disableHtml, language });
+    const openSpy = jest.fn();
+    page.win.addEventListener('open', openSpy);
+    const element = document.querySelector('gux-action-button');
+    const dropdownButton = element.shadowRoot.querySelector('.gux-dropdown-button > button');
+    dropdownButton.click();
+    expect(openSpy).toHaveBeenCalledTimes(0);
+  });
+});

package/dist/collection/components/stable/gux-alert/gux-inline-alert.css

@@ -58,9 +58,9 @@
 }
 .gux-inline-alert .gux-message-wrapper {
   display: flex;
-  justify-content: flex-start;
-  align-items: center;
   gap: var(--gse-ui-alert-gap);
+  align-items: center;
+  justify-content: flex-start;
   font-family: var(--gse-ui-alert-text-fontFamily);
   font-size: var(--gse-ui-alert-text-fontSize);
   font-weight: var(--gse-ui-alert-text-fontWeight);

package/dist/collection/components/stable/gux-alert/gux-inline-alert.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent } from '../../../i18n';
-import { trackComponent } from '@utils/tracking/usage';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../i18n";
+import { trackComponent } from "../../../utils/tracking/usage";
+import translationResources from "./i18n/en.json";
 /**
  * @slot - Slot for message.
  */
@@ -56,7 +56,8 @@ export class GuxAlert {
           "references": {
             "GuxAlertAccent": {
               "location": "import",
-              "path": "./gux-inline-alert.types"
+              "path": "./gux-inline-alert.types",
+              "id": "src/components/stable/gux-alert/gux-inline-alert.types.ts::GuxAlertAccent"
             }
           }
         },

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

@@ -0,0 +1,22 @@
+import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
+describe('gux-alert-beta', () => {
+  describe('#render', () => {
+    [
+      `<gux-alert-beta accent="info">Note: This is an information alert.</gux-alert-beta>`,
+      ` <gux-alert-beta accent="success">Note: This is a success alert.</gux-alert-beta>`,
+      `<gux-alert-beta accent="warning-octogon"
+            >Note: This is a warning alert.</gux-alert-beta
+          >`,
+      `<gux-alert-beta accent="warning-triangle"
+          >Note: This is a warning alert.</gux-alert-beta
+        >`
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-alert-beta');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,23 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxAlert } from "../gux-inline-alert";
+const components = [GuxAlert];
+const language = 'en';
+describe('gux-alert-beta', () => {
+  describe('#render', () => {
+    [
+      `<gux-alert-beta accent="info">Note: This is an information alert.</gux-alert-beta>`,
+      ` <gux-alert-beta accent="success">Note: This is a success alert.</gux-alert-beta>`,
+      `<gux-alert-beta accent="warning-octogon"
+      >Note: This is a warning alert.</gux-alert-beta
+    >`,
+      `<gux-alert-beta accent="warning-triangle"
+    >Note: This is a warning alert.</gux-alert-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/stable/gux-badge/gux-badge.css

@@ -32,16 +32,16 @@
 .gux-badge {
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  gap: var(--gse-ui-badge-gap);
   align-items: center;
+  justify-content: center;
   height: var(--gse-ui-badge-height);
   padding: var(--gse-ui-badge-padding);
-  border-radius: var(--gse-ui-badge-borderRadius);
-  gap: var(--gse-ui-badge-gap);
   font-family: var(--gse-ui-badge-text-fontFamily);
   font-size: var(--gse-ui-badge-text-fontSize);
   font-weight: var(--gse-ui-badge-text-fontWeight, 600);
   line-height: var(--gse-ui-badge-text-lineHeight);
+  border-radius: var(--gse-ui-badge-borderRadius);
 }
 .gux-badge gux-tooltip-title {
   white-space: nowrap;

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

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n";
+import translationResources from "./i18n/en.json";
 /**
  * @slot - Required slot for label
  */
@@ -62,7 +62,8 @@ export class GuxBadge {
           "references": {
             "GuxBadgeAccent": {
               "location": "import",
-              "path": "./gux-badge.types"
+              "path": "./gux-badge.types",
+              "id": "src/components/stable/gux-badge/gux-badge.types.ts::GuxBadgeAccent"
             }
           }
         },

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

@@ -0,0 +1,38 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-badge', () => {
+  describe('#render', () => {
+    [
+      '<gux-badge>Badge</gux-badge>',
+      '<gux-badge accent="info">Badge</gux-badge>',
+      '<gux-badge accent="success">Badge</gux-badge>',
+      '<gux-badge accent="warning">Badge</gux-badge>',
+      '<gux-badge accent="error">Badge</gux-badge>',
+      '<gux-badge accent="inherit">Badge</gux-badge>',
+      '<gux-badge bold>Badge</gux-badge>',
+      '<gux-badge bold accent="info">Badge</gux-badge>',
+      '<gux-badge bold accent="success">Badge</gux-badge>',
+      '<gux-badge bold accent="warning">Badge</gux-badge>',
+      '<gux-badge bold accent="error">Badge</gux-badge>',
+      '<gux-badge bold accent="inherit">Badge</gux-badge>',
+      '<gux-badge><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="info"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="success"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="warning"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="error"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="inherit"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="info"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="success"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="warning"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="error"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="inherit"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>'
+    ].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-badge');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,39 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxBadge } from "../gux-badge";
+const components = [GuxBadge];
+const language = 'en';
+describe('gux-badge', () => {
+  describe('#render', () => {
+    [
+      '<gux-badge>Badge</gux-badge>',
+      '<gux-badge accent="info">Badge</gux-badge>',
+      '<gux-badge accent="success">Badge</gux-badge>',
+      '<gux-badge accent="warning">Badge</gux-badge>',
+      '<gux-badge accent="error">Badge</gux-badge>',
+      '<gux-badge accent="inherit">Badge</gux-badge>',
+      '<gux-badge bold>Badge</gux-badge>',
+      '<gux-badge bold accent="info">Badge</gux-badge>',
+      '<gux-badge bold accent="success">Badge</gux-badge>',
+      '<gux-badge bold accent="warning">Badge</gux-badge>',
+      '<gux-badge bold accent="error">Badge</gux-badge>',
+      '<gux-badge bold accent="inherit">Badge</gux-badge>',
+      '<gux-badge><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="info"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="success"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="warning"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="error"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge accent="inherit"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="info"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="success"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="warning"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="error"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>',
+      '<gux-badge bold accent="inherit"><gux-icon icon-name="subtract" decorative></gux-icon>Badge</gux-badge>'
+    ].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/stable/gux-blank-state/gux-blank-state.css

@@ -43,9 +43,9 @@
   align-items: center;
   justify-content: center;
   padding: var(--gse-ui-blankState-padding);
-  border-radius: var(--gse-ui-blankState-borderRadius);
   color: var(--gse-ui-blankState-foregroundColor);
   background-color: var(--gse-ui-blankState-backgroundColor);
+  border-radius: var(--gse-ui-blankState-borderRadius);
 }
 .gux-container .gux-image {
   padding-bottom: var(--gse-ui-blankState-gapMain);
@@ -62,20 +62,20 @@
   color: var(--gse-ui-blankState-iconColor);
 }
 .gux-container slot[name=primary-message] {
-  color: var(--gse-ui-blankState-foregroundColor);
-  text-align: center;
   font-family: var(--gse-ui-progressAndLoading-blankState-large-header-fontFamily);
+  font-size: var(--gse-ui-progressAndLoading-blankState-large-header-fontSize);
   font-weight: var(--gse-ui-progressAndLoading-blankState-large-header-fontWeight);
   line-height: var(--gse-ui-progressAndLoading-blankState-large-header-lineHeight);
-  font-size: var(--gse-ui-progressAndLoading-blankState-large-header-fontSize);
-}
-.gux-container slot[name=additional-guidance] {
   color: var(--gse-ui-blankState-foregroundColor);
   text-align: center;
+}
+.gux-container slot[name=additional-guidance] {
   font-family: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontFamily);
+  font-size: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontSize);
   font-weight: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontWeight);
   line-height: var(--gse-ui-progressAndLoading-blankState-large-subheader-lineHeight);
-  font-size: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontSize);
+  color: var(--gse-ui-blankState-foregroundColor);
+  text-align: center;
 }
 
 @container (width <= 250px) {
@@ -85,14 +85,14 @@
   }
   .gux-container slot[name=primary-message] {
     font-family: var(--gse-ui-progressAndLoading-blankState-small-header-fontFamily);
+    font-size: var(--gse-ui-progressAndLoading-blankState-small-header-fontSize);
     font-weight: var(--gse-ui-progressAndLoading-blankState-small-header-fontWeight);
     line-height: var(--gse-ui-progressAndLoading-blankState-small-header-lineHeight);
-    font-size: var(--gse-ui-progressAndLoading-blankState-small-header-fontSize);
   }
   .gux-container slot[name=additional-guidance] {
     font-family: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontFamily);
+    font-size: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontSize);
     font-weight: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontWeight);
     line-height: var(--gse-ui-progressAndLoading-blankState-small-subheader-lineHeight);
-    font-size: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontSize);
   }
 }