MWPW-189463 MAS Studio: Quantity selector variation

nala/studio/acom/plans/individuals/specs/individuals_edit_and_discard.spec.js

@@ -178,7 +178,7 @@ export default {
             name: '@studio-plans-individuals-edit-discard-quantity-selector',
             path: '/studio.html',
             data: {
-                cardid: '45e50a68-9bd7-4fc2-9665-12f39140a1be',
+                cardid: 'e8364315-f3d0-45c3-ab1d-8fc6455f1fe2',
                 startValue: {
                     original: '3',
                     updated: '2',

nala/studio/acom/plans/individuals/specs/individuals_save.spec.js

@@ -87,7 +87,7 @@ export default {
             name: '@studio-plans-individuals-save-edited-quantity-selector',
             path: '/studio.html',
             data: {
-                cardid: '6f189be0-d64b-468f-b340-92888206cce8',
+                cardid: 'e8364315-f3d0-45c3-ab1d-8fc6455f1fe2',
             },
             browserParams: '#page=fragment-editor&path=nala&fragmentId=',
             tags: '@mas-studio @acom @acom-save @acom-plans @acom-plans-save @acom-plans-individuals @acom-plans-individuals-save',

nala/studio/acom/plans/individuals/tests/individuals_edit_and_discard.test.js

@@ -651,7 +651,7 @@ test.describe('M@S Studio ACOM Plans Individuals card test suite', () => {
             await page.waitForLoadState('domcontentloaded');
             await expect(await editor.panel).toBeVisible();
             await expect(await individualsCard).toBeVisible();
-            await expect(await individualsCard).toHaveAttribute('variant', 'plans');
+            await expect(await individualsCard).toHaveAttribute('variant', 'plans-education');
         });
 
         await test.step('step-2: Toggle quantity selector', async () => {
@@ -677,21 +677,25 @@ test.describe('M@S Studio ACOM Plans Individuals card test suite', () => {
             await expect(await individualsCard.locator(plans.cardQuantitySelector)).toBeVisible();
         });
 
-        await test.step('step-6: Edit quantity selector start value', async () => {
+        await test.step('step-6: Restore values from settings', async () => {
+            await editor.quantitySelectorFields.locator('.setting-override-indicator').first().click();
+        });
+
+        await test.step('step-7: Edit quantity selector start value', async () => {
             await expect(await editor.quantitySelectorStart).toBeVisible();
             await expect(await editor.quantitySelectorStart).toHaveValue(data.startValue.original);
             await editor.quantitySelectorStart.fill(data.startValue.updated);
             await expect(await editor.quantitySelectorStart).toHaveValue(data.startValue.updated);
         });
 
-        await test.step('step-7: Edit quantity selector step value', async () => {
+        await test.step('step-8: Edit quantity selector step value', async () => {
             await expect(await editor.quantitySelectorStep).toBeVisible();
             await expect(await editor.quantitySelectorStep).toHaveValue(data.stepValue.original);
             await editor.quantitySelectorStep.fill(data.stepValue.updated);
             await expect(await editor.quantitySelectorStep).toHaveValue(data.stepValue.updated);
         });
 
-        await test.step('step-8: Validate quantity selector step value on card', async () => {
+        await test.step('step-9: Validate quantity selector step value on card', async () => {
             await expect(await individualsCard.locator(plans.cardQuantitySelector)).toHaveAttribute(
                 'step',
                 data.stepValue.updated,
@@ -709,11 +713,11 @@ test.describe('M@S Studio ACOM Plans Individuals card test suite', () => {
             );
         });
 
-        await test.step('step-9: Close the editor and verify discard is triggered', async () => {
+        await test.step('step-10: Close the editor and verify discard is triggered', async () => {
             await studio.discardEditorChanges(editor);
         });
 
-        await test.step('step-10: Verify quantity selector is unchanged', async () => {
+        await test.step('step-11: Verify quantity selector is unchanged', async () => {
             await expect(await individualsCard.locator(plans.cardQuantitySelector)).toBeVisible();
         });
     });

nala/studio/acom/plans/individuals/tests/individuals_save.test.js

@@ -422,8 +422,8 @@ test.describe('M@S Studio ACOM Plans Individuals card test suite', () => {
         });
 
         await test.step('step-4: Verify quantity selector change is saved', async () => {
-            await expect(await editor.quantitySelectorCheckbox).toBeChecked();
-            await expect(await clonedCard.locator(plans.cardQuantitySelector)).toBeVisible();
+            await expect(await editor.quantitySelectorCheckbox).not.toBeChecked();
+            await expect(await clonedCard.locator(plans.cardQuantitySelector)).not.toBeVisible();
         });
     });
 

nala/studio/editor.page.js

@@ -57,8 +57,8 @@ export default class EditorPage {
         this.promoCode = this.panel.locator('#promo-code input');
         this.promoCodeFieldGroup = this.panel.locator('sp-field-group#promoCode');
 
-        this.quantitySelectorCheckbox = this.panel.locator('#quantitySelect sp-checkbox input');
-        this.quantitySelectorFields = this.panel.locator('#quantitySelector quantity-select-field');
+        this.quantitySelectorCheckbox = this.panel.locator('#quantity-select-settings-field-toggle input');
+        this.quantitySelectorFields = this.panel.locator('#quantitySelect quantity-select-settings-field');
         this.quantitySelectorTitle = this.quantitySelectorFields.locator('#quantity-selector-title input');
         this.quantitySelectorStart = this.quantitySelectorFields.locator('#quantity-selector-start input');
         this.quantitySelectorStep = this.quantitySelectorFields.locator('#quantity-selector-step input');

nala/studio/fragment-editor/tests/fragment_editor.test.js

@@ -220,7 +220,6 @@ test.describe('M@S Studio Fragment Editor Locale test suite', () => {
             await expect(await editor.promoText).toBeVisible();
             await expect(await editor.callout).toBeVisible();
             await expect(await editor.addOnToggle).toBeVisible();
-            await expect(await editor.quantitySelectorCheckbox).toBeVisible();
             await expect(await editor.OSI).toBeVisible();
         });
     });

studio/src/common/fields/field-status.css.js

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+
+export const fieldStatusStyles = css`
+    .field-status-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 6px;
+        font-size: 14px;
+        line-height: 18px;
+        color: var(--spectrum-accent-content-color-default, #3b63fb);
+    }
+
+    .field-status-icon {
+        color: inherit;
+        flex: none;
+    }
+
+    .field-status-label {
+        color: inherit;
+    }
+
+    .field-status-restore-link {
+        position: relative;
+        color: inherit;
+        font: inherit;
+        line-height: inherit;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
+    .field-status-restore-link-prefix {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .field-status-restore-link:hover {
+        color: var(--spectrum-accent-content-color-hover, #2f55e0);
+    }
+
+    .field-status-restore-link:focus-visible {
+        outline: 2px solid var(--spectrum-accent-content-color-key-focus, #2f55e0);
+        outline-offset: 2px;
+    }
+
+    .setting-override-indicator {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--spectrum-blue-700);
+        line-height: 0;
+    }
+`;

studio/src/common/fields/quantity-select.js

@@ -1,12 +1,15 @@
 import { css, html, LitElement } from 'lit';
+import { fieldStatusStyles } from './field-status.css.js';
+
+export const QUANTITY_SELECT_TAG = 'merch-quantity-select';
 
 /**
  * Builds a serialized merch quantity selector HTML value.
  * @param {{ title: string, min: string, step: string }} config
  * @returns {string}
  */
 export const createQuantitySelectValue = ({ title, min, step }) => {
-    const element = document.createElement('merch-quantity-select');
+    const element = document.createElement(QUANTITY_SELECT_TAG);
     element.setAttribute('title', `${title}`);
     element.setAttribute('min', `${min}`);
     element.setAttribute('max', '10');
@@ -23,7 +26,7 @@ export const parseQuantitySelectValue = (value) => {
     if (!value) return { title: '', min: '1', step: '1' };
     const parser = new DOMParser();
     const documentRoot = parser.parseFromString(value, 'text/html');
-    const element = documentRoot.querySelector('merch-quantity-select');
+    const element = documentRoot.querySelector(QUANTITY_SELECT_TAG);
     return {
         title: `${element?.getAttribute('title') ?? ''}`,
         min: `${element?.getAttribute('min') ?? '1'}`,
@@ -42,27 +45,19 @@ export class QuantitySelectField extends LitElement {
         step: { type: String, state: true },
         layout: { type: String, reflect: true },
         disabled: { type: Boolean, reflect: true },
+        fieldIndicatorTemplate: { attribute: false },
     };
 
     static styles = css`
         :host {
             display: block;
         }
 
-        .fields {
-            display: grid;
-            gap: 12px;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-
-        :host([layout='vertical']) .fields {
-            display: flex;
-            flex-direction: column;
-        }
-
         sp-field-group {
             width: 100%;
         }
+
+        ${fieldStatusStyles}
     `;
 
     constructor() {
@@ -73,6 +68,7 @@ export class QuantitySelectField extends LitElement {
         this.step = '1';
         this.layout = 'grid';
         this.disabled = false;
+        this.fieldIndicatorTemplate = () => {};
     }
 
     willUpdate(changedProperties) {
@@ -119,9 +115,9 @@ export class QuantitySelectField extends LitElement {
 
     render() {
         return html`
-            <div class="fields">
-                <sp-field-group>
-                    <sp-field-label>Quantity selector title</sp-field-label>
+            <sp-field-group>
+                <sp-field-label>Quantity selector title</sp-field-label>
+                <div class="field-row">
                     <sp-textfield
                         id="quantity-selector-title"
                         size="m"
@@ -130,9 +126,12 @@ export class QuantitySelectField extends LitElement {
                         @change=${this.#suppressNativeChange}
                         @input=${this.#handleTitleChange}
                     ></sp-textfield>
-                </sp-field-group>
-                <sp-field-group>
-                    <sp-field-label>Start quantity</sp-field-label>
+                    ${this.fieldIndicatorTemplate('title')}
+                </div>
+            </sp-field-group>
+            <sp-field-group>
+                <sp-field-label>Start quantity</sp-field-label>
+                <div class="field-row">
                     <sp-textfield
                         id="quantity-selector-start"
                         size="m"
@@ -142,19 +141,23 @@ export class QuantitySelectField extends LitElement {
                         @change=${this.#suppressNativeChange}
                         @input=${this.#handleMinChange}
                     ></sp-textfield>
-                </sp-field-group>
-            </div>
+                    ${this.fieldIndicatorTemplate('min')}
+                </div>
+            </sp-field-group>
             <sp-field-group>
                 <sp-field-label>Step</sp-field-label>
-                <sp-textfield
-                    id="quantity-selector-step"
-                    size="m"
-                    ?disabled=${this.disabled}
-                    pattern="[0-9]*"
-                    .value=${this.step}
-                    @change=${this.#suppressNativeChange}
-                    @input=${this.#handleStepChange}
-                ></sp-textfield>
+                <div class="field-row">
+                    <sp-textfield
+                        id="quantity-selector-step"
+                        size="m"
+                        ?disabled=${this.disabled}
+                        pattern="[0-9]*"
+                        .value=${this.step}
+                        @change=${this.#suppressNativeChange}
+                        @input=${this.#handleStepChange}
+                    ></sp-textfield>
+                    ${this.fieldIndicatorTemplate('step')}
+                </div>
             </sp-field-group>
         `;
     }