@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/TextSwatch/TextSwatch.css

@@ -0,0 +1,143 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-text-swatch__container input[type='radio'],
+.dropin-text-swatch__container input[type='checkbox'] {
+  opacity: 0;
+  position: absolute;
+  width: 0;
+}
+
+.dropin-text-swatch__container label {
+  display: inline-block;
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-800);
+  border: var(--shape-border-width-1) solid var(--color-neutral-400);
+  padding: 6px var(--spacing-small);
+  border-radius: var(--shape-border-radius-1);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  font: var(--type-body-1-strong-font);
+  position: relative;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropin-text-swatch__container label:hover {
+  color: var(--color-neutral-900);
+}
+
+.dropin-text-swatch__container
+  input[type='radio']:checked
+  + .dropin-text-swatch__label,
+.dropin-text-swatch__container
+  input[type='checkbox']:checked
+  + .dropin-text-swatch__label,
+.dropin-text-swatch--selected {
+  background-color: var(--color-neutral-50);
+  box-shadow: 0 0 0 var(--shape-border-width-1) var(--color-neutral-900);
+}
+
+.dropin-text-swatch__container input[type='radio']:focus-visible + label,
+.dropin-text-swatch__container input[type='checkbox']:focus-visible + label {
+  background-color: var(--color-neutral-200);
+  border: var(--shape-border-width-3) solid var(--color-neutral-800);
+  outline: solid var(--shape-border-width-4) var(--color-neutral-400);
+}
+
+.dropin-text-swatch__container input[type='radio']:checked + label:active,
+.dropin-text-swatch__container input[type='checkbox']:checked + label:active,
+.dropin-text-swatch--selected {
+  background-color: var(--color-neutral-200);
+  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-900),
+    0 0 0 6px var(--color-neutral-400);
+}
+
+.dropin-text-swatch__container input[type='radio']:active + label,
+.dropin-text-swatch__container input[type='radio']:checked + label:active,
+.dropin-text-swatch__container
+  input[type='radio']:checked
+  + label:hover:not(:focus-visible),
+.dropin-text-swatch__container input[type='checkbox']:active + label,
+.dropin-text-swatch__container input[type='checkbox']:checked + label:active,
+.dropin-text-swatch__container
+  input[type='checkbox']:checked
+  + label:hover:not(:focus-visible) {
+  border: var(--shape-border-width-1) solid var(--color-neutral-500);
+  color: var(--color-neutral-900);
+  outline: none;
+}
+
+.dropin-text-swatch__container input[type='radio']:disabled + label,
+.dropin-text-swatch__container input[type='checkbox']:disabled + label,
+.dropin-text-swatch--disabled,
+.dropin-text-swatch__container
+  input[type='radio']:disabled:focus-visible
+  + label,
+.dropin-text-swatch__container
+  input[type='checkbox']:disabled:focus-visible
+  + label {
+  background-color: var(--color-neutral-300);
+  color: var(--color-neutral-500);
+  pointer-events: none;
+  border: var(--shape-border-width-1) solid var(--color-neutral-500);
+  outline: none;
+}
+
+.dropin-text-swatch__label--out-of-stock {
+  background: linear-gradient(
+      to top left,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) calc(50% - 0.8px),
+      var(--color-neutral-700) 50%,
+      rgba(0, 0, 0, 0) calc(50% + 0.8px),
+      rgba(0, 0, 0, 0) 100%
+    ),
+    var(--color-neutral-200);
+}
+
+.dropin-text-swatch__container input[type='radio']:not(:disabled) + label,
+.dropin-text-swatch__container input[type='checkbox']:not(:disabled) + label {
+  cursor: pointer;
+}
+
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]:after {
+  display: none;
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 0px;
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-800);
+  border: var(--shape-border-width-1) solid var(--color-neutral-400);
+  padding: 6px var(--spacing-small);
+  border-radius: var(--shape-border-radius-1);
+  white-space: nowrap;
+  z-index: 1000;
+  font: var(--type-body-1-strong-font);
+  margin-bottom: var(--spacing-xxsmall);
+  -webkit-border-radius: var(--shape-border-radius-1);
+  -moz-border-radius: var(--shape-border-radius-1);
+}
+
+[data-tooltip]:hover:after {
+  display: block;
+}
+
+/* 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/TextSwatch/TextSwatch.stories.tsx

@@ -0,0 +1,268 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+/* eslint-disable react/no-danger */
+import type { Meta, StoryObj } from '@storybook/preact';
+import { action } from '@storybook/addon-actions';
+import { expect, userEvent, within } from '@storybook/test';
+import {
+  TextSwatch,
+  TextSwatchProps,
+} from '@adobe/elsie/components/TextSwatch';
+
+/**
+ * Use Text Swatches to display text selections, like sizes or categories.
+ */
+const meta: Meta<TextSwatchProps> = {
+  title: 'Components/TextSwatch',
+  component: TextSwatch,
+  argTypes: {
+    name: {
+      description: 'Field name (used for mapping the value in a form)',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+
+    label: {
+      description: 'Field label',
+      type: {
+        required: true,
+        name: 'string',
+      },
+    },
+    groupAriaLabel: {
+      description: 'Label name for the swatch group',
+      type: {
+        required: true,
+        name: 'string',
+      },
+    },
+    id: {
+      description: 'Field id',
+      type: {
+        required: true,
+        name: 'string',
+      },
+    },
+    value: {
+      description: 'Field value',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    disabled: {
+      description: 'Whether or not the text swatch is disabled',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    selected: {
+      description: 'Whether or not the text swatch is active',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    multi: {
+      description: 'Whether or not the text swatch allows multiple selection',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    outOfStock: {
+      description: 'Whether or not the text swatch is out of stock',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    onValue: {
+      description: 'Function to handle value changes',
+      type: {
+        required: false,
+        name: 'function',
+      },
+    },
+    onUpdateError: {
+      description: 'Function to handle error updates',
+      type: {
+        required: false,
+        name: 'function',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TextSwatchProps>;
+
+/**
+ * ```ts
+ * import { TextSwatch } from '@adobe/elsie/components/TextSwatch';
+ * ```
+ */
+
+export const DefaultTextSwatch: Story = {
+  name: 'Text Swatch',
+  args: {
+    name: 'textSwatchField',
+    label: 'Option',
+    groupAriaLabel: 'Text Swatches',
+    id: 'mediumOption',
+    value: 'option',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textSwatch = await canvas.findByRole('radio');
+    const labelElement = document.querySelector(
+      '.dropin-text-swatch__label'
+    ) as HTMLElement;
+    expect(labelElement).toBeVisible();
+    await expect(textSwatch).not.toBeChecked();
+  },
+};
+
+const swatchStyle = `
+  .dropin-text-swatch__label {
+    max-width: 100px;
+  }
+`;
+
+export const TextSwatchWithLongText: Story = {
+  name: 'Long Text Swatch',
+  render: (args) => (
+    <div>
+      <style dangerouslySetInnerHTML={{ __html: swatchStyle }} />
+      <TextSwatch {...args} />
+    </div>
+  ),
+  args: {
+    name: 'textSwatchField',
+    label: 'Long Text Swatch',
+    groupAriaLabel: 'Text Swatches',
+    id: 'mediumOption',
+    value: 'long text swatch',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textSwatch = await canvas.findByRole('radio');
+    const labelElement = document.querySelector(
+      '.dropin-text-swatch__label'
+    ) as HTMLElement;
+    expect(labelElement).toBeVisible();
+
+    userEvent.hover(textSwatch);
+
+    // Without this wait test failing
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    const divWithTooltip = document.querySelector(
+      'div[data-tooltip]'
+    ) as HTMLElement;
+
+    expect(divWithTooltip.getAttribute('data-tooltip')).toBe(
+      'Long Text Swatch'
+    );
+  },
+};
+
+export const SelectedTextSwatch: Story = {
+  args: {
+    name: 'textSwatchField',
+    label: 'Option',
+    groupAriaLabel: 'Text Swatches',
+    id: 'mediumOption',
+    value: 'option',
+    selected: true,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textSwatch = await canvas.findByRole('radio');
+    const labelElement = document.querySelector(
+      '.dropin-text-swatch__label'
+    ) as HTMLElement;
+    expect(labelElement).toBeVisible();
+    await expect(textSwatch).toBeChecked();
+  },
+};
+export const DisabledTextSwatch: Story = {
+  args: {
+    name: 'textSwatchField',
+    label: 'Option',
+    groupAriaLabel: 'Text Swatches',
+    id: 'mediumOption',
+    value: 'option',
+    selected: false,
+    disabled: true,
+    outOfStock: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('radio')).toBeDisabled();
+  },
+};
+
+export const OutOfStockTextSwatch: Story = {
+  args: {
+    name: 'textSwatchField',
+    label: 'Option',
+    groupAriaLabel: 'Text Swatches',
+    id: 'mediumOption',
+    value: 'option',
+    selected: false,
+    disabled: false,
+    outOfStock: true,
+    onValue: action('onValue'),
+  },
+};
+
+export const SelectedOutOfStockTextSwatch: Story = {
+  args: {
+    name: 'textSwatchField',
+    label: 'Option',
+    groupAriaLabel: 'Text Swatches',
+    id: 'mediumOption',
+    value: 'option',
+    selected: true,
+    disabled: false,
+    outOfStock: true,
+    onValue: action('onValue'),
+  },
+};
+
+export const MultiTextSwatch: Story = {
+  args: {
+    name: 'multiTextSwatchField',
+    label: 'Option',
+    id: 'multiOption',
+    value: 'option',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    multi: true,
+    onValue: action('onValue'),
+  },
+  render: (args) => (
+    <div style="display: flex; flex-wrap:wrap; gap: 25px">
+      <TextSwatch {...args} id={'optionS'} value={'S'} label={'S'} />
+      <TextSwatch {...args} id={'optionM'} value={'M'} label={'M'} />
+      <TextSwatch {...args} id={'optionL'} value={'L'} label={'L'} />
+    </div>
+  ),
+};

package/src/components/TextSwatch/TextSwatch.tsx

@@ -0,0 +1,122 @@
+import { FunctionComponent } from 'preact';
+import {
+  HTMLAttributes,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+} from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/TextSwatch/TextSwatch.css';
+import { useText } from '@adobe/elsie/i18n';
+
+export interface TextSwatchProps
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'label'> {
+  name?: string;
+  label: string;
+  groupAriaLabel?: string;
+  value?: string;
+  id: string;
+  disabled?: boolean;
+  selected?: boolean;
+  outOfStock?: boolean;
+  multi?: boolean;
+  onValue?: (value: any) => void;
+  onUpdateError?: (error: Error) => void;
+}
+
+export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
+  className,
+  name,
+  value,
+  label,
+  groupAriaLabel,
+  id,
+  disabled = false,
+  selected = false,
+  outOfStock = false,
+  multi = false,
+  onValue,
+  onUpdateError,
+  ...props
+}) => {
+  // i18n
+  const outOfStockLabel = useText('Dropin.Swatches.outOfStock.label').label;
+  const selectedLabel = useText('Dropin.Swatches.selected.label').label;
+  const swatchLabel = useText('Dropin.Swatches.swatch.label').label;
+
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const spanRef = useRef<HTMLLabelElement>(null);
+
+  const onValueHandler = useCallback(
+    async (newValue: any) => {
+      if (onValue) {
+        try {
+          await onValue(newValue);
+        } catch (e) {
+          if (onUpdateError) {
+            onUpdateError(e as Error);
+          }
+        }
+      }
+    },
+    [onValue, onUpdateError]
+  );
+
+  const handleOnValue = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+
+    onValueHandler(input.value);
+  };
+
+  const handleAriaLabel = () => {
+    if (outOfStock) return `${groupAriaLabel}: ${label} ${outOfStockLabel}`;
+    if (selected) return `${groupAriaLabel}: ${label} ${selectedLabel}`;
+    return `${groupAriaLabel}: ${label} ${swatchLabel}`;
+  };
+
+  useEffect(() => {
+    if (
+      spanRef.current &&
+      spanRef.current.scrollWidth > spanRef.current.clientWidth
+    ) {
+      setIsOverflowing(true);
+    }
+  }, [label]);
+
+  return (
+    <div
+      className="dropin-text-swatch__container"
+      {...(isOverflowing ? { 'data-tooltip': label } : {})}
+    >
+      <input
+        type={multi ? 'checkbox' : 'radio'}
+        name={name}
+        id={id}
+        value={value}
+        aria-label={handleAriaLabel()}
+        checked={selected}
+        disabled={disabled}
+        onChange={handleOnValue}
+        {...props}
+        className={classes([
+          'dropin-text-swatch',
+          ['dropin-text-swatch--selected', selected],
+          ['dropin-text-swatch--disabled', disabled],
+          className,
+        ])}
+      />
+      <label
+        htmlFor={id}
+        ref={spanRef}
+        className={classes([
+          'dropin-text-swatch__label',
+          ['dropin-text-swatch__label--out-of-stock', outOfStock],
+          className,
+        ])}
+      >
+        {label}
+      </label>
+    </div>
+  );
+};

package/src/components/TextSwatch/index.ts

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/TextSwatch/TextSwatch';
+export { TextSwatch as default } from '@adobe/elsie/components/TextSwatch/TextSwatch';

package/src/components/ToggleButton/ToggleButton.css

@@ -0,0 +1,77 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+/* Container */
+.dropin-toggle-button {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+/* Action button */
+.dropin-toggle-button__actionButton {
+  cursor: pointer;
+  background-color: var(--color-neutral-200);
+  border: var(--shape-border-width-1) solid var(--color-neutral-400);
+  border-radius: var(--shape-border-radius-1);
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  padding: var(--spacing-medium);
+  align-items: center;
+  display: grid;
+}
+
+.dropin-toggle-button__selected .dropin-toggle-button__actionButton {
+  background-color: var(--color-neutral-50);
+  border: var(--shape-border-width-1) solid var(--color-neutral-800);
+}
+
+.dropin-toggle-button:has(input:focus-visible) {
+  outline: 0 none;
+  box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
+  -webkit-box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
+  -moz-box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
+  border-radius: var(--shape-border-radius-1);
+}
+
+/* Radio Button */
+.dropin-toggle-button__radioButton.dropin-radio-button {
+  cursor: pointer;
+  position: absolute;
+}
+
+.dropin-toggle-button__radioButton .dropin-radio-button__label:before {
+  cursor: pointer;
+  margin-right: 0;
+}
+
+/* Disable radioButton focus-visible */
+.dropin-toggle-button__radioButton .dropin-radio-button__input:focus-visible + .dropin-radio-button__label:before {
+  box-shadow: 0 0 0 var(--shape-border-width-1) var(--color-neutral-600);
+}
+
+/* Label */
+.dropin-toggle-button__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--spacing-big);
+  cursor: pointer;
+}
+
+/* Icon */
+.dropin-toggle-button__icon {
+  height: 24px;
+  margin-right: var(--spacing-xsmall);
+}
+
+/* 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) { } */