@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/quantityselector/QuantitySelector.stories.js

@@ -1,159 +1,91 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * The quantity selector is a form element used to enter or select a number.
- * This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart.
- *
- * The `MQuantitySelector` component is the **Svelte / WebComponent** implementation of the **Quantity Selector** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/quantity-selector/).
- */
-export default {
+const meta = {
     title: 'Form Elements/Quantity Selector',
-    tags: ['autodocs', 'beta'],
+    component: 'm-quantityselector',
+    args: {
+        id: 'quantitySelectorId',
+        value: 10,
+        min: 5,
+        max: 20,
+    },
     argTypes: {
-        id: {
-            description: 'Specify id for qty selector',
-            control: 'text',
-        },
-        name: {
-            description: 'Specify name attr for qty selector',
-            control: 'text',
-        },
         size: {
-            description: 'Specify the text qty selector size',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm'],
         },
-        disabled: {
-            description: 'Specify whether the qty selector is disabled',
-            control: { type: 'boolean' },
-        },
-        isinvalid: {
-            description: 'Determine whether the qty selector is invalid',
-            control: 'boolean',
-        },
-        required: {
-            description: 'Determine whether the qty selector is required',
-            control: 'boolean',
-        },
-        quantity: {
-            description: 'Specify the quantity. Default is 1',
-            control: 'number',
-        },
-        step: {
-            description: 'Determines how much the value will change per click when the quantity is increased or decreased. Default is 1',
-            control: 'number',
-        },
-        valuemin: {
-            description: 'Specify the minimum quantity. Default is 1',
-            control: 'number',
-        },
-        valuemax: {
-            description: 'Specify the maximum quantity. Default is 100',
-            control: 'number',
-        },
-        decrementlabel: {
-            description: 'Specify the decrement label for a11y',
-            control: 'number',
-        },
-        inputarialabel: {
-            description: 'Specify the input aria label for a11y.',
-            control: 'number',
-        },
-        incrementlabel: {
-            description: 'Specify the increment label for a11y',
-            control: 'number',
-        },
-        increment: {
-            description: 'Event that occurs when the increment button is clicked',
-            action: 'on:increment',
-            table: {
-                category: 'Events',
-            },
-        },
-        decrement: {
-            description: 'Event that occurs when the decrement button is clicked',
-            action: 'on:decrement',
-            table: {
-                category: 'Events',
-            },
-        },
-        inputQty: {
-            description: 'Event that occurs when a quantity is entered in the input field',
-            action: 'oninputqty',
-            table: {
-                category: 'Events',
-            },
-        },
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-quantityselector
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        size=${ifDefined(args.size)}
+        min=${ifDefined(args.min)}
+        max=${ifDefined(args.max)}
+        step=${ifDefined(args.step)}
+        readonly=${ifDefined(args.readonly)}
+        incrementlabel=${ifDefined(args.incrementlabel)}
+        decrementlabel=${ifDefined(args.decrementlabel)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-quantityselector>
+    `;
     },
 };
-const Template = (args) => {
-    const MQuantitySelector = document.createElement('m-quantityselector');
-    MQuantitySelector.setAttribute('id', args.id || 'quantityID');
-    MQuantitySelector.setAttribute('quantity', args.quantity || '1');
-    if (args.size)
-        MQuantitySelector.setAttribute('size', args.size);
-    if (args.disabled)
-        MQuantitySelector.setAttribute('disabled', 'true');
-    if (args.isinvalid)
-        MQuantitySelector.setAttribute('isinvalid', 'true');
-    if (args.required)
-        MQuantitySelector.setAttribute('required', 'true');
-    if (args.step)
-        MQuantitySelector.setAttribute('step', args.step);
-    if (args.valuemax)
-        MQuantitySelector.setAttribute('valuemax', args.valuemax.toString());
-    if (args.valuemin)
-        MQuantitySelector.setAttribute('valuemin', args.valuemin.toString());
-    MQuantitySelector.increment = action('increment');
-    MQuantitySelector.decrement = action('decrement');
-    MQuantitySelector.inputqty = action('inputqty');
-    return MQuantitySelector;
-};
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    const input = qtySelector?.shadowRoot?.querySelector('input');
-    const button = qtySelector?.shadowRoot?.querySelector('button');
-    expect(qtySelector).not.toBeNull();
-    await userEvent.type(input, '5');
-    expect(input).toHaveValue(15);
-    await userEvent.click(button);
-    expect(input).toHaveValue(16);
-};
-export const Small = Template.bind({});
-Small.args = {
-    size: 's',
-};
-Small.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    expect(qtySelector).toHaveAttribute('size', 's');
-};
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
+export default meta;
+export const Default = {};
+export const Step = {
+    args: {
+        id: 'stepId',
+        step: 5,
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    const input = qtySelector?.shadowRoot?.querySelector('input');
-    expect(input).toBeDisabled();
+export const Small = {
+    args: {
+        id: 'smallId',
+        size: 's',
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
+    },
 };
-Invalid.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    const input = qtySelector?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('aria-invalid', 'true');
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-export const Required = Template.bind({});
-Required.args = {
-    required: true,
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };
-Required.play = async ({ canvasElement }) => {
-    const qtySelector = canvasElement.querySelector('m-quantityselector');
-    const input = qtySelector?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('required');
+export const readOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -1,159 +1,179 @@
 <svelte:options
   customElement={{
     tag: 'm-quantityselector',
+    extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
+  import { customElementForwardEvents } from '../../utils';
   import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';
   import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.svelte';
-  import type { QuantitySelectorSize } from './quantitySelector.types';
+  /**
+   * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
+   */
   interface Props {
-    id?: string | undefined;
-    quantity?: number;
+    /**
+     * A unique identifier for the quantity selector element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the quantity selector element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the quantity selector field.
+     */
+    value?: number;
+    /**
+     * If `true`, applies an invalid state to the quantity selector.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the quantity selector, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Determines the size of the quantity selector.
+     */
+    size?: 's' | 'm';
+    /**
+     * Minimum acceptable value for the quantity selector.
+     */
     min?: number;
+    /**
+     * Maximum acceptable value for the quantity selector.
+     */
     max?: number;
-    size?: QuantitySelectorSize;
-    decrementlabel?: string;
-    inputarialabel?: string;
-    incrementlabel?: string;
-    disabled?: boolean;
-    isinvalid?: boolean;
-    required?: boolean;
-    name?: string;
+    /**
+     * Determines how much the value will change per click when the quantity is increased or decreased.
+     */
     step?: number;
-    increment?: (qty: number) => void;
-    decrement?: (qty: number) => void;
-    inputqty?: (qty: number) => void;
-    oninput?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, the quantity selector is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * The label text for the increment button.
+     */
+    incrementlabel?: string;
+    /**
+     * The label text for the decrement button.
+     */
+    decrementlabel?: string;
   }
 
   let {
-    id = undefined,
-    quantity = $bindable(1),
+    id,
+    value = $bindable(1),
     min = 1,
     max = 100,
+    step = 1,
     size = 'm',
-    decrementlabel = 'Decrement',
-    inputarialabel = 'Quantity Selector',
-    incrementlabel = 'Increment',
-    disabled = false,
+    disabled,
     isinvalid = false,
-    required = false,
     name = 'quantity-selector-input',
-    step = 1,
-    increment,
-    decrement,
-    inputqty,
-    oninput,
-    onblur,
+    readonly,
+    decrementlabel = 'Decrement',
+    incrementlabel = 'Increment',
   }: Props = $props();
 
-  function handleValue(event: Event): void {
-    if (quantity > max) {
-      quantity = max;
-    }
-    if (quantity < min) {
-      quantity = min;
+  const onValue = (): void => {
+    const numericValue = Number(value);
+    if (numericValue > max) {
+      value = max;
+    } else if (numericValue < min) {
+      value = min;
+    } else {
+      value = numericValue;
     }
-    inputqty?.(quantity);
-    oninput?.(event);
-  }
+  };
 
-  function handleDecrement(): void {
-    if (quantity - Number(step) > min) {
-      quantity = quantity - Number(step);
-    }
-    decrement?.(quantity);
-  }
+  const onIncrement = (): void => {
+    const numericValue = Number(value);
+    const numericStep = Number(step);
 
-  function handleIncrement(): void {
-    if (quantity + Number(step) < max) {
-      quantity = quantity + Number(step);
+    if (numericValue + numericStep <= max) {
+      value = numericValue + numericStep;
+    } else {
+      value = max;
     }
-    increment?.(quantity);
-  }
+  };
 
-  function getClasses(
-    isInvalid: boolean,
-    size: QuantitySelectorSize,
-  ): string {
-    const classes = ['mc-quantity-selector'];
-    if (isInvalid) {
-      classes.push('is-invalid');
-    }
+  const onDecrement = (): void => {
+    const numericValue = Number(value);
+    const numericStep = Number(step);
 
-    if (size === 's') {
-      classes.push('mc-quantity-selector--s');
+    if (numericValue - numericStep >= min) {
+      value = numericValue - numericStep;
+    } else {
+      value = min;
     }
-
-    return classes.join(' ');
-  }
+  };
 </script>
 
-<div class="{getClasses(isinvalid, size)}">
+<div
+  class={[
+    'mc-quantity-selector',
+    `mc-quantity-selector--${size}`,
+    isinvalid && 'is-invalid',
+  ]}
+>
   <input
     type="number"
     {id}
     {name}
-    bind:value={quantity}
-    oninput={handleValue}
-    {onblur}
+    bind:value
+    oninput={onValue}
     class="mc-quantity-selector__control"
-    aria-label={inputarialabel}
     aria-valuemin={min}
     aria-valuemax={max}
-    aria-valuenow={quantity}
-    aria-invalid={isinvalid}
-    spellcheck="false"
+    aria-valuenow={value}
+    aria-invalid={`${isinvalid}`}
+    {readonly}
     {disabled}
-    {required}
   />
   <button
     type="button"
     aria-controls={id}
     class="mc-quantity-selector__button mc-quantity-selector__button--increase"
     tabindex="-1"
-    onclick={handleIncrement}
-    disabled={quantity === max || disabled}
+    disabled={value === max || disabled}
+    onclick={onIncrement}
   >
     <span class="mc-quantity-selector__icon">
       <More24 />
     </span>
-    <span class="mc-quantity-selector__label">{decrementlabel}</span>
+    <span class="mc-quantity-selector__label">{incrementlabel}</span>
   </button>
   <button
     type="button"
     aria-controls={id}
     class="mc-quantity-selector__button mc-quantity-selector__button--decrease"
     tabindex="-1"
-    onclick={handleDecrement}
-    disabled={quantity === min || disabled}
+    disabled={value === min || disabled}
+    onclick={onDecrement}
   >
     <span class="mc-quantity-selector__icon">
       <Less24 />
     </span>
-    <span class="mc-quantity-selector__label">{incrementlabel}</span>
+    <span class="mc-quantity-selector__label">{decrementlabel}</span>
   </button>
 </div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-quantity-selector {
-  background-color: #ffffff;
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-radius-border, 0.25rem);
   transition: all ease 200ms;
-  color: #000000;
+  color: var(--forms-color-text-default, #000000);
   display: block;
   width: 100%;
   height: 3rem;
-  border-radius: 0.25rem;
+  border-radius: var(--radius-s, 0.25rem);
   box-sizing: border-box;
   display: flex;
   gap: 0.25rem;
@@ -166,29 +186,33 @@
   color: inherit;
   font-family: inherit;
   outline: none;
-  padding: 0;
-  font-size: inherit;
-  font-size: 1rem;
-  line-height: 1.5;
-  font-weight: 600;
-  cursor: inherit;
-  text-align: center;
-  flex-grow: 1;
 }
 .mc-quantity-selector__control[type=number] {
   /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */
-  appearance: textfield;
 }
 .mc-quantity-selector__control[type=number]::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number]::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
+.mc-quantity-selector__control[type=number] {
+  /* For Gecko rendering engine */
+  appearance: textfield;
+}
 .mc-quantity-selector__control[type=search]::-webkit-search-decoration, .mc-quantity-selector__control[type=search]::-webkit-search-cancel-button {
   appearance: none;
 }
+.mc-quantity-selector__control {
+  padding: 0;
+  font-size: inherit;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-m, 1.5);
+  font-weight: var(--font-weight-semi-bold, 600);
+  cursor: inherit;
+  text-align: center;
+  flex-grow: 1;
+}
 .mc-quantity-selector__control::placeholder {
-  color: #666666;
+  color: var(--forms-color-placeholder, #666666);
 }
 .mc-quantity-selector__button {
   background-color: transparent;
@@ -201,19 +225,19 @@
   padding: 0;
   height: 2.5rem;
   width: 2.5rem;
-  border-radius: 100%;
-  color: #242938;
+  border-radius: var(--radius-full, 100%);
+  color: var(--quantity-selector-color-button-text-default, #242938);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 .mc-quantity-selector__button:disabled {
-  color: #d9d9d9;
+  color: var(--quantity-selector-color-button-text-disabled, #d9d9d9);
   cursor: not-allowed;
 }
 .mc-quantity-selector__button:hover:not(:disabled) {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));
 }
 .mc-quantity-selector__button--decrease {
   order: -1;
@@ -235,7 +259,7 @@
 }
 .mc-quantity-selector::after {
   transition: box-shadow 200ms ease;
-  border-radius: 0.25rem;
+  border-radius: var(--radius-s, 0.25rem);
   content: "";
   position: absolute;
   inset: -0.125rem var(--inset-x, 3rem);
@@ -243,22 +267,22 @@
   display: block;
 }
 .mc-quantity-selector:hover:not(:focus-within) {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-quantity-selector:has(input:disabled) {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   pointer-events: none;
 }
 .mc-quantity-selector:has(input:disabled) .mc-quantity-selector__button:disabled {
-  color: #737373;
+  color: var(--forms-color-icon-disabled, #737373);
 }
 .mc-quantity-selector:has(input[readonly]) {
-  border-color: #cccccc;
+  border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
 .mc-quantity-selector:has(input[readonly]) .mc-quantity-selector__control[readonly] {
@@ -266,7 +290,7 @@
   padding-left: 0.5rem;
 }
 .mc-quantity-selector:has(input:focus)::after {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
@@ -283,12 +307,12 @@
   width: 1.25rem;
 }
 .mc-quantity-selector.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-quantity-selector.is-invalid:hover:not(:focus-within) {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-quantity-selector * {
   box-sizing: border-box;