@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/Incrementer/Incrementer.css

@@ -0,0 +1,165 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+/* Content */
+.dropin-incrementer__content {
+  border-radius: var(--shape-border-radius-1);
+  border: solid var(--shape-border-width-1) var(--color-neutral-600);
+  display: grid;
+  grid-template-columns: var(--spacing-xxbig) auto var(--spacing-xxbig);
+  height: var(--spacing-xbig);
+  opacity: 1;
+}
+
+.dropin-incrementer__content--disabled {
+  background: var(--color-neutral-300);
+  border-radius: var(--shape-border-radius-1);
+  border: solid var(--shape-border-width-1) var(--color-neutral-500);
+}
+
+.dropin-incrementer__content--large {
+  height: var(--spacing-xxbig);
+}
+
+.dropin-incrementer__content:hover {
+  border: solid var(--shape-border-width-1) var(--color-neutral-700);
+}
+
+.dropin-incrementer__content:active {
+  border: solid var(--shape-border-width-1) var(--color-neutral-800);
+}
+
+.dropin-incrementer__content--error:hover,
+.dropin-incrementer__content--error {
+  border: var(--shape-border-width-2) solid var(--color-alert-500);
+}
+
+.dropin-incrementer__content--error-message {
+  color: var(--color-alert-800);
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  text-align: left;
+}
+
+/* Footer */
+.dropin-incrementer__footer {
+  font: var(--type-details-caption-2-font);
+}
+
+/* Buttons */
+.dropin-incrementer__decrease-button > svg,
+.dropin-incrementer__increase-button > svg {
+  align-items: center;
+  justify-content: center;
+}
+
+.dropin-incrementer__button-container {
+  align-items: center;
+  border-radius: var(--shape-border-radius-1);
+  display: grid;
+  justify-content: center;
+  background: var(--color-neutral-50);
+}
+
+.dropin-incrementer__button-container--disabled {
+  background-color: var(--color-neutral-300);
+}
+
+.dropin-incrementer__decrease-button,
+.dropin-incrementer__increase-button {
+  align-items: center;
+  background-color: var(--color-neutral-50);
+  border-radius: var(--shape-border-radius-3);
+  border: none;
+  display: grid;
+  height: var(--spacing-medium);
+  width: var(--spacing-medium);
+}
+
+.dropin-incrementer__decrease-button:enabled,
+.dropin-incrementer__increase-button:enabled {
+  cursor: pointer;
+}
+
+.dropin-incrementer__decrease-button--disabled,
+.dropin-incrementer__increase-button--disabled {
+  background-color: var(--color-neutral-300);
+}
+
+.dropin-incrementer__increase-button:focus-visible,
+.dropin-incrementer__decrease-button:focus-visible {
+  outline: var(--shape-border-width-1) solid var(--color-brand-500);
+  box-shadow: 0px 0px 0px var(--shape-border-radius-1) var(--color-neutral-500);
+}
+
+.dropin-incrementer__decrease-button:focus:not(:focus-visible),
+.dropin-incrementer__increase-button:focus:not(:focus-visible) {
+  background-color: var(--color-neutral-50);
+}
+
+.dropin-incrementer__decrease-button:hover:enabled,
+.dropin-incrementer__increase-button:hover:enabled,
+.dropin-incrementer__decrease-button:focus,
+.dropin-incrementer__increase-button:focus {
+  background: var(--color-neutral-300);
+}
+
+/* Input */
+.dropin-incrementer__input {
+  box-sizing: border-box;
+  text-align: center;
+  min-width: var(--spacing-xxbig);
+}
+
+.dropin-incrementer__input:disabled {
+  background-color: var(--color-neutral-300);
+  color: var(--color-neutral-500);
+}
+
+.dropin-incrementer__input::-webkit-outer-spin-button,
+.dropin-incrementer__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.dropin-incrementer__input:focus-within {
+  border: none;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.dropin-incrementer__input:focus-within[type='number'] {
+  box-shadow: none;
+}
+
+/* Firefox */
+.dropin-incrementer__input[type='number'] {
+  -moz-appearance: textfield;
+  box-shadow: none;
+  border: none;
+}
+
+textarea:focus,
+input:focus {
+  outline: none;
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */

package/src/components/Incrementer/Incrementer.stories.tsx

@@ -0,0 +1,172 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  Incrementer,
+  IncrementerProps,
+} from '@adobe-commerce/elsie/components/Incrementer';
+import { action } from '@storybook/addon-actions';
+import { expect, userEvent, within } from '@storybook/test';
+
+/**
+ * Use Incrementer to let users increase or decrease a value.
+ */
+const meta: Meta<IncrementerProps> = {
+  title: 'Components/Incrementer',
+  component: Incrementer,
+  argTypes: {
+    name: {
+      description: 'Field name (used for mapping the value in a form)',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    value: {
+      description: 'Field value',
+      type: 'string',
+    },
+    size: {
+      description: 'medium | large',
+      defaultValue: { summary: 'medium' },
+      options: ['medium', 'large'],
+      control: { type: 'radio' },
+      type: 'string',
+    },
+    min: {
+      description: 'Minimum value',
+      type: 'number',
+    },
+    max: {
+      description: 'Maximum value',
+      type: 'number',
+    },
+    disabled: {
+      description: 'Whether or not the field is disabled',
+      control: 'boolean',
+      defaultValue: false,
+    },
+    'aria-label': {
+      description: 'Aria label',
+      type: 'string',
+    },
+    onValue: {
+      description: 'Callback function to handle value change',
+      type: 'function',
+    },
+    onUpdateError: {
+      description: 'Callback function to handle error',
+      type: 'function',
+    },
+    error: {
+      description: 'Whether or not the field shows an error',
+      type: 'boolean',
+    },
+    success: {
+      description:
+        'Whether or not the field value has been updated successfully',
+      type: 'boolean',
+    },
+    maxLength: {
+      description: 'Maximum length of the input field',
+      type: 'number',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<IncrementerProps>;
+
+export const Primary: Story = {
+  args: {
+    size: 'medium',
+    onValue: action('onValue'),
+    name: 'incrementerField',
+    value: '1',
+    min: 1,
+    max: 100,
+    disabled: false,
+    'aria-label': 'Quantity',
+  },
+  play: async () => {
+    const canvasElement = document.querySelector(
+      '#storybook-root'
+    ) as HTMLElement;
+    const canvas = within(canvasElement);
+    const decreaseButton = document.querySelector(
+      'button[aria-label="Decrease Quantity"]'
+    ) as HTMLElement;
+    const inputField = document.querySelector('input') as HTMLElement;
+    const increaseButton = document.querySelector(
+      'button[aria-label="Increase Quantity"]'
+    ) as HTMLElement;
+
+    // Without this wait test failing intermittently as click event is triggering before even element fully loaded
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await userEvent.click(increaseButton);
+    await expect(await canvas.findByDisplayValue('2')).toBeTruthy();
+
+    await userEvent.click(decreaseButton);
+    await expect(await canvas.findByDisplayValue('1')).toBeTruthy();
+
+    await userEvent.clear(inputField);
+    await userEvent.type(inputField, '99');
+    await expect(await canvas.findByDisplayValue('99')).toBeTruthy();
+
+    await userEvent.click(increaseButton);
+    await expect(await canvas.findByDisplayValue('100')).toBeTruthy();
+
+    await userEvent.click(increaseButton);
+    await expect(await canvas.findByDisplayValue('100')).toBeTruthy();
+
+    await userEvent.click(decreaseButton);
+    await expect(await canvas.findByDisplayValue('99')).toBeTruthy();
+
+    await userEvent.clear(inputField);
+    await userEvent.type(inputField, '1');
+    await expect(await canvas.findByDisplayValue('1')).toBeTruthy();
+  },
+};
+
+export const WithError = {
+  args: {
+    size: 'medium',
+    onValue: action('onValue'),
+    onBlur: action('onBlur'),
+    name: 'incrementerField',
+    value: '1001',
+    min: 1,
+    max: 100,
+    disabled: false,
+    'aria-label': 'Quantity',
+  },
+  play: async () => {
+    const canvasElement = document.querySelector(
+      '#storybook-root'
+    ) as HTMLElement;
+    const canvas = within(canvasElement);
+    const increaseButton = document.querySelector(
+      'button[aria-label="Increase Quantity"]'
+    ) as HTMLElement;
+
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await userEvent.click(increaseButton);
+    await expect(await canvas.findByDisplayValue('1001')).toBeTruthy();
+
+    const error = document.querySelector(
+      '.dropin-incrementer__content--error-message'
+    ) as HTMLElement;
+
+    await expect(error).toBeVisible();
+    await expect(error).toHaveTextContent('Maximum quantity is 100');
+  },
+};

package/src/components/Incrementer/Incrementer.tsx

@@ -0,0 +1,192 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { FunctionComponent } from 'preact';
+import { useState, useCallback } from 'preact/hooks';
+import { HTMLAttributes } from 'preact/compat';
+import { classes, debounce } from '@adobe-commerce/elsie/lib';
+import { Add, Minus } from '@adobe-commerce/elsie/icons';
+import { Icon } from '@adobe-commerce/elsie/components/Icon';
+import { Localizer, Text } from '@adobe-commerce/elsie/i18n';
+import '@adobe-commerce/elsie/components/Incrementer/Incrementer.css';
+
+export interface IncrementerProps
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'size'> {
+  name?: string;
+  size?: 'medium' | 'large';
+  onValue?: (value: any) => void;
+  onUpdateError?: (error: Error) => void;
+  error?: boolean;
+  success?: boolean;
+  min?: number;
+  max?: number;
+  disabled?: boolean;
+  maxLength?: number;
+}
+
+export const Incrementer: FunctionComponent<IncrementerProps> = ({
+  name,
+  value = '1',
+  className,
+  disabled,
+  error,
+  success,
+  min,
+  max,
+  onValue,
+  onUpdateError,
+  size = 'medium',
+  ...props
+}) => {
+  const [currentValue, setCurrentValue] = useState<number>(Number(value));
+  const minValue = Number(min);
+  const maxValue = Number(max);
+  const isInvalid = error || currentValue < minValue || currentValue > maxValue;
+
+  const errorMessage =
+    currentValue < minValue
+      ? 'Dropin.Incrementer.minQuantityMessage'
+      : currentValue > maxValue
+        ? 'Dropin.Incrementer.maxQuantityMessage'
+        : 'Dropin.Incrementer.errorMessage';
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedOnValueHandler = useCallback(
+    debounce(async (newValue: any) => {
+      if (onValue) {
+        try {
+          onValue(newValue);
+        } catch (e) {
+          if (onUpdateError) {
+            onUpdateError(e as Error);
+          }
+        }
+      }
+    }, 200),
+    [onValue, onUpdateError]
+  );
+
+  const handleIncrementer = (_value: number) => {
+    let newValue = _value;
+    debouncedOnValueHandler(newValue);
+    setCurrentValue(newValue);
+  };
+
+  return (
+    <div
+      className={classes([
+        'dropin-incrementer',
+        `dropin-incrementer--${size}`,
+        className,
+      ])}
+    >
+      <div
+        className={classes([
+          'dropin-incrementer__content',
+          `dropin-incrementer__content--${size}`,
+          [`dropin-incrementer__content--error`, isInvalid],
+          [`dropin-incrementer__content--success`, success],
+          [`dropin-incrementer__content--disabled`, disabled],
+        ])}
+      >
+        {/* Minus Button */}
+        <div
+          className={classes([
+            'dropin-incrementer__button-container',
+            [`dropin-incrementer__button-container--disabled`, disabled],
+          ])}
+        >
+          <Localizer>
+            <button
+              type="button"
+              className={classes([
+                'dropin-incrementer__decrease-button',
+                [`dropin-incrementer__decrease-button--disabled`, disabled],
+              ])}
+              onClick={() => handleIncrementer(currentValue - 1)}
+              disabled={disabled || currentValue < minValue + 1}
+              aria-label={
+                (<Text id="Dropin.Incrementer.decreaseLabel" />) as any
+              }
+            >
+              <Icon
+                source={Minus}
+                size="16"
+                stroke="1"
+                viewBox="4 2 20 20"
+                className="dropin-incrementer__down"
+              />
+            </button>
+          </Localizer>
+        </div>
+
+        {/* Input Field */}
+        <input
+          className="dropin-incrementer__input"
+          max={max}
+          min={min}
+          step={1}
+          type="number"
+          name={name}
+          value={currentValue}
+          disabled={disabled}
+          onBlur={() => {
+            handleIncrementer(Number(currentValue));
+          }}
+          onChange={(e) => {
+            const newValue = e.currentTarget.value;
+            if (newValue !== '') {
+              handleIncrementer(Number(newValue));
+            }
+          }}
+          {...props}
+        />
+
+        <div
+          className={classes([
+            'dropin-incrementer__button-container',
+            [`dropin-incrementer__button-container--disabled`, disabled],
+          ])}
+        >
+          {/* Plus/Add button */}
+          <Localizer>
+            <button
+              type="button"
+              className={classes([
+                'dropin-incrementer__increase-button',
+                [`dropin-incrementer__increase-button--disabled`, disabled],
+              ])}
+              onClick={() => handleIncrementer(currentValue + 1)}
+              disabled={disabled || currentValue > maxValue - 1}
+              aria-label={
+                (<Text id="Dropin.Incrementer.increaseLabel" />) as any
+              }
+            >
+              <Icon
+                source={Add}
+                size="16"
+                stroke="1"
+                viewBox="4 2 20 20"
+                className="dropin-incrementer__add"
+              />
+            </button>
+          </Localizer>
+        </div>
+      </div>
+      {isInvalid && (
+        <p className="dropin-incrementer__content--error-message">
+          <Text
+            id={errorMessage}
+            fields={{ minQuantity: min, maxQuantity: max }}
+          />
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/Incrementer/index.ts

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/components/Incrementer/Incrementer';