genesys-spark-components 4.169.1 → 4.170.1

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/tests/gux-form-field-radio.common.js

@@ -0,0 +1,53 @@
+const inputAttributeRenderConfigs = [
+    { inputAttribute: '', description: 'default' },
+    { inputAttribute: 'disabled', description: 'disabled' },
+    { inputAttribute: 'checked', description: 'checked' }
+].map(({ inputAttribute, description }) => ({
+    description: `should render component as expected when ${description}`,
+    html: `
+    <gux-form-field-radio>
+      <input slot="input" type="radio" name="food-1" value="pizza" ${inputAttribute}/>
+      <label slot="label">Pizza</label>
+    </gux-form-field-radio>
+  `
+}));
+const optionalSlotRenderConfigs = [
+    { name: 'help', html: `<span slot="help">This is a help message</span>` },
+    { name: 'error', html: `<span slot="error">This is an error message</span>` }
+].map(({ name, html }) => ({
+    description: `should render component as expected when an optional "${name}" slot is provided`,
+    html: `
+    <gux-form-field-radio>
+      <input slot="input" type="radio" name="food-1" value="pizza"/>
+      <label slot="label">Pizza</label>
+      ${html}
+    </gux-form-field-radio>
+  `
+}));
+const combinedStateRenderConfigs = [
+    {
+        description: 'should render component as expected when disabled with error',
+        html: `
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pizza" disabled/>
+        <label slot="label">Pizza</label>
+        <span slot="error">Error message</span>
+      </gux-form-field-radio>
+    `
+    },
+    {
+        description: 'should render component as expected when disabled with help',
+        html: `
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pizza" disabled/>
+        <label slot="label">Pizza</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-radio>
+    `
+    }
+];
+export const renderConfigs = [
+    ...inputAttributeRenderConfigs,
+    ...optionalSlotRenderConfigs,
+    ...combinedStateRenderConfigs
+];

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/tests/gux-form-field-radio-group.common.js

@@ -0,0 +1,102 @@
+const basicRenderConfigs = [
+    {
+        description: 'should render basic radio group as expected',
+        html: `
+    <gux-form-field-radio-group-beta>
+      <label slot="group-label">Food</label>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pizza"/>
+        <label slot="label">Pizza</label>
+      </gux-form-field-radio>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pasta"/>
+        <label slot="label">Pasta</label>
+      </gux-form-field-radio>
+    </gux-form-field-radio-group-beta>
+  `
+    }
+];
+const groupAttributeRenderConfigs = [
+    { attribute: 'disabled', description: 'disabled' },
+    { attribute: 'required', description: 'required' },
+    {
+        attribute: 'indicator-mark="optional"',
+        description: 'with optional indicator mark'
+    }
+].map(({ attribute, description }) => ({
+    description: `should render radio group as expected when ${description}`,
+    html: `
+    <gux-form-field-radio-group-beta ${attribute}>
+      <label slot="group-label">Food</label>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pizza"/>
+        <label slot="label">Pizza</label>
+      </gux-form-field-radio>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pasta"/>
+        <label slot="label">Pasta</label>
+      </gux-form-field-radio>
+    </gux-form-field-radio-group-beta>
+  `
+}));
+const groupSlotRenderConfigs = [
+    {
+        name: 'group-help',
+        html: `<span slot="group-help">This is a group help message</span>`
+    },
+    {
+        name: 'group-error',
+        html: `<span slot="group-error">Subject to availability</span>`
+    }
+].map(({ name, html }) => ({
+    description: `should render radio group as expected when "${name}" slot is provided`,
+    html: `
+    <gux-form-field-radio-group-beta>
+      <label slot="group-label">Food</label>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pizza"/>
+        <label slot="label">Pizza</label>
+      </gux-form-field-radio>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pasta"/>
+        <label slot="label">Pasta</label>
+      </gux-form-field-radio>
+      ${html}
+    </gux-form-field-radio-group-beta>
+  `
+}));
+const complexRenderConfigs = [
+    {
+        description: 'should render complex radio group with mixed states as expected',
+        html: `
+    <gux-form-field-radio-group-beta>
+      <label slot="group-label">Food</label>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="pizza"/>
+        <label slot="label">Pizza</label>
+      </gux-form-field-radio>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="sandwich" disabled/>
+        <label slot="label">Sandwich</label>
+      </gux-form-field-radio>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="sushi"/>
+        <label slot="label">Sushi</label>
+        <span slot="error">Subject to availability</span>
+      </gux-form-field-radio>
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="spaghetti"/>
+        <label slot="label">Spaghetti</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-radio>
+      <span slot="group-help">This is a group help message</span>
+    </gux-form-field-radio-group-beta>
+  `
+    }
+];
+export const renderConfigs = [
+    ...basicRenderConfigs,
+    ...groupAttributeRenderConfigs,
+    ...groupSlotRenderConfigs,
+    ...complexRenderConfigs
+];

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.js

@@ -146,7 +146,7 @@ export class GuxFormFieldRange {
         return (h("div", { class: {
                 'gux-range-input-container': true,
                 'gux-disabled': this.disabled
-            }, ref: el => (this.containerElement = el) }, h("div", { class: "gux-range" }, h("div", { class: "gux-track" }, h("div", { class: "gux-progress", ref: el => (this.progressElement = el) })), h("slot", { name: "input" }), this.valueInTooltip && (h("gux-tooltip-base-beta", { ref: el => (this.tooltipElement = el), forElement: this.containerElement, offsetY: 10, placement: "top" }, h("span", { slot: "content" }, this.getDisplayValue())))), h("div", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', ref: el => (this.containerElement = el) }, h("div", { class: "gux-range" }, h("div", { class: "gux-track" }, h("div", { class: "gux-progress", ref: el => (this.progressElement = el) })), h("slot", { name: "input" }), this.valueInTooltip && (h("gux-tooltip-base-beta", { ref: el => (this.tooltipElement = el), forElement: this.containerElement, offsetY: 10, placement: "top" }, h("span", { slot: "content" }, this.getDisplayValue())))), h("div", { class: {
                 'gux-display': true,
                 'gux-hidden': this.valueInTooltip
             } }, this.getDisplayValue())));

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/tests/gux-form-field-range.common.js

@@ -0,0 +1,79 @@
+const componentAttributesRenderConfigs = [
+    { componentAttribute: '' },
+    { componentAttribute: 'display-units="%"' },
+    { componentAttribute: 'value-in-tooltip' },
+    { componentAttribute: 'value-in-tooltip display-units="%"' }
+].map(({ componentAttribute }, index) => ({
+    description: `should render component as expected (${index + 1})`,
+    html: `
+    <gux-form-field-range ${componentAttribute}>
+      <input slot="input" type="range"/>
+      <label slot="label">Label</label>
+    </gux-form-field-range>
+  `
+}));
+const labelPositionRenderConfigs = ['above', 'beside', 'screenreader'].map(labelPosition => ({
+    description: `should render component as expected when label-position is ${labelPosition}`,
+    html: `
+      <gux-form-field-range label-position="${labelPosition}">
+        <input slot="input" type="range"/>
+        <label slot="label">Label</label>
+      </gux-form-field-range>
+  `
+}));
+const inputAttributeRenderConfigs = ['disabled', 'required'].map(inputAttribute => ({
+    description: `should render component as expected when input attribute is "${inputAttribute}"`,
+    html: `
+      <gux-form-field-range>
+        <input slot="input" type="range" ${inputAttribute}/>
+        <label slot="label">Label</label>
+      </gux-form-field-range>
+  `
+}));
+const rangeAttributesRenderConfigs = [
+    {
+        description: 'should render component as expected with step/min/max attributes',
+        html: `
+    <gux-form-field-range>
+      <input slot="input" type="range" value="10" step="5" min="-25" max="25"/>
+      <label slot="label">Step / Min / Max</label>
+    </gux-form-field-range>
+  `
+    }
+];
+const indicatorMarkRenderConfigs = ['optional', 'required'].map(indicatorMark => ({
+    description: `should render component as expected when indicator-mark is "${indicatorMark}"`,
+    html: `
+      <gux-form-field-range indicator-mark="${indicatorMark}">
+        <input slot="input" type="range"/>
+        <label slot="label">Label</label>
+      </gux-form-field-range>
+  `
+}));
+const optionalSlotRenderConfigs = [
+    { name: 'help', html: `<span slot="help">This is a help message</span>` },
+    { name: 'error', html: `<span slot="error">This is an error message</span>` },
+    {
+        name: 'label-info',
+        html: `<gux-label-info-beta slot="label-info">
+      <span slot="content">This is some tooltip text</span>
+    </gux-label-info-beta>`
+    }
+].map(({ name, html }) => ({
+    description: `should render component as expected when an optional "${name}" slot is provided`,
+    html: `
+    <gux-form-field-range>
+      <input slot="input" type="range" name="e-1" />
+      <label slot="label">Default</label>
+      ${html}
+    </gux-form-field-range>
+  `
+}));
+export const renderConfigs = [
+    ...componentAttributesRenderConfigs,
+    ...labelPositionRenderConfigs,
+    ...inputAttributeRenderConfigs,
+    ...rangeAttributesRenderConfigs,
+    ...indicatorMarkRenderConfigs,
+    ...optionalSlotRenderConfigs
+];