@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Image/Image.css

@@ -0,0 +1,43 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-image {
+  background: var(--color-neutral-300)
+    linear-gradient(
+      to right,
+      var(--color-neutral-300) 0%,
+      var(--color-neutral-100) 20%,
+      var(--color-neutral-300) 40%,
+      var(--color-neutral-300) 100%
+    )
+    no-repeat;
+  animation: imageShimmer infinite 1.2s linear;
+  border-radius: var(--shape-border-radius-2);
+}
+
+/* Loaded */
+.dropin-image--loaded {
+  background: unset;
+  border-radius: unset;
+}
+
+@keyframes imageShimmer {
+  0% {
+    background-position: -600px 0;
+  }
+
+  100% {
+    background-position: 600px 0;
+  }
+}
+
+/* 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/Image/Image.stories.tsx

@@ -0,0 +1,80 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Image, ImageProps } from '@adobe/elsie/components/Image';
+import { expect, waitFor } from '@storybook/test';
+
+import { Image as ExampleImage } from '@adobe/elsie/static/assets/images';
+
+const defaultWidth = 384;
+const defaultHeight = 288;
+
+/**
+ * Use Images to display visual content like photos and illustrations.
+ */
+const meta: Meta<ImageProps> = {
+  title: 'Components/Image',
+  component: Image,
+  argTypes: {
+    width: {
+      description: 'Image width',
+      type: 'number',
+    },
+    height: {
+      description: 'Image height',
+      type: 'number',
+    },
+    loading: {
+      description: 'Loading strategy',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: 'lazy',
+        },
+      },
+      options: ['lazy', 'eager'],
+    },
+    params: {
+      description: 'Parameters appened to the image URL',
+      type: { name: 'other', value: 'object' },
+    },
+    onLoad: {
+      description: 'Callback when image is loaded',
+      action: 'loaded',
+    },
+    src: {
+      description: 'Image URL',
+      type: 'string',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ImageProps>;
+
+export const Primary: Story = {
+  args: {
+    src: ExampleImage,
+    alt: 'Some alternative text',
+    loading: 'eager',
+    width: defaultWidth,
+    height: defaultHeight,
+  },
+  play: async () => {
+    const elem = document.querySelector('.dropin-image') as HTMLElement;
+    await expect(elem).toBeVisible();
+
+    await waitFor(() => expect(elem).toHaveClass('dropin-image--loaded'));
+  },
+};
+
+export const WithParams: Story = {
+  args: {
+    src: ExampleImage,
+    params: { width: defaultWidth },
+    alt: 'Some alternative text',
+    loading: 'lazy',
+    width: defaultWidth,
+    height: defaultHeight,
+  },
+};

package/src/components/Image/Image.tsx

@@ -0,0 +1,57 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes, useMemo, useState } from 'preact/compat';
+import {
+  classes,
+  generateSrcset,
+  ResolveImageUrlOptions,
+} from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Image/Image.css';
+
+export interface ImageProps extends HTMLAttributes<HTMLDivElement> {
+  params?: ResolveImageUrlOptions;
+  src: string;
+  onLoad?: (e: any) => void;
+}
+export const Image: FunctionComponent<ImageProps> = ({
+  className,
+  src,
+  params,
+  loading = 'lazy',
+  srcSet,
+  onLoad,
+  ...props
+}) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const _srcSet = useMemo(() => {
+    // If srcSet is provided, use it
+    if (srcSet) return srcSet;
+
+    // If src is not provided, return "undefined"
+    if (!src || !params) return;
+
+    // Otherwise, generate srcSet based on params
+    return generateSrcset(src, { ...params });
+  }, [params, src, srcSet]);
+
+  // Add class at image onLoad
+  const onLoadHandler = (e: any) => {
+    setLoaded(true);    
+    onLoad?.(e);
+  };
+
+  return (
+    <img
+      {...props}
+      className={classes([
+        'dropin-image',
+        ['dropin-image--loaded', loaded],
+        className,
+      ])}
+      loading={loading}
+      onLoad={onLoadHandler}
+      src={src}
+      srcSet={_srcSet}
+    />
+  );
+};

package/src/components/Image/index.ts

@@ -0,0 +1 @@
+export * from '@adobe/elsie/components/Image/Image';

package/src/components/ImageSwatch/ImageSwatch.css

@@ -0,0 +1,145 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+/* Hide default the radio/checkbox button */
+.dropin-image-swatch__container input[type='radio'],
+.dropin-image-swatch__container input[type='checkbox'] {
+  opacity: 0;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.dropin-image-swatch__container .dropin-image-swatch__span {
+  display: inline-block;
+  --bg-color: var(--color-neutral-300);
+  box-shadow: 0 0 0 var(--shape-border-width-1) var(--color-neutral-400);
+  position: relative;
+  cursor: pointer;
+  background-color: var(--bg-color);
+  background-image: var(--background-image);
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100px;
+  width: 100px;
+  overflow: hidden;
+}
+
+.dropin-image-swatch__content {
+  width: inherit;
+  position: absolute;
+  top: -9999px;
+  bottom: -9999px;
+  left: -9999px;
+  right: -9999px;
+  margin: auto;
+}
+
+.dropin-image-swatch__span:hover {
+  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
+    0 0 0 var(--shape-border-width-4) var(--color-neutral-500);
+  outline: none;
+}
+
+.dropin-image-swatch__container
+  input[type='radio']:not(:checked):active
+  ~ .dropin-image-swatch__span,
+.dropin-image-swatch__container
+  input[type='checkbox']:not(:checked):active
+  ~ .dropin-image-swatch__span {
+  box-shadow: 0 0 0 var(--shape-border-width-1) var(--color-neutral-500);
+  outline: none;
+}
+
+.dropin-image-swatch__container
+  input[type='radio']:checked
+  ~ .dropin-image-swatch__span,
+.dropin-image-swatch__container
+  input[type='checkbox']:checked
+  ~ .dropin-image-swatch__span,
+.dropin-image-swatch--selected {
+  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
+    0 0 0 var(--shape-border-width-4) var(--color-neutral-800);
+}
+
+.dropin-image-swatch__container
+  input[type='radio']:checked:active
+  ~ .dropin-image-swatch__span,
+.dropin-image-swatch__container
+  input[type='checkbox']:checked:active
+  ~ .dropin-image-swatch__span {
+  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
+    0 0 0 var(--shape-border-width-4) var(--color-neutral-600);
+}
+
+.dropin-image-swatch__container
+  input[type='radio']:focus-visible
+  + .dropin-image-swatch__span,
+.dropin-image-swatch__container
+  input[type='checkbox']:focus-visible
+  + .dropin-image-swatch__span {
+  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-900),
+    0 0 0 6px var(--color-neutral-400);
+}
+
+.dropin-image-swatch__container
+  input[type='radio']:disabled
+  ~ .dropin-image-swatch__span,
+.dropin-image-swatch__container
+  input[type='checkbox']:disabled
+  ~ .dropin-image-swatch__span,
+.dropin-image-swatch--disabled,
+.dropin-image-swatch__container
+  input[type='radio']:disabled:active
+  ~ .dropin-image-swatch__span,
+.dropin-image-swatch__container
+  input[type='checkbox']:disabled:active
+  ~ .dropin-image-swatch__span {
+  box-shadow: 0 0 0 var(--shape-border-width-4) var(--color-neutral-500);
+  background-color: rgba(255, 255, 255, 0.76);
+  pointer-events: none;
+}
+
+.dropin-image-swatch__container .dropin-image-swatch__span--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%
+  );
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+.dropin-image-swatch__span--out-of-stock > .dropin-image-swatch__content,
+.dropin-image-swatch__container
+  input[type='radio']:disabled
+  ~ .dropin-image-swatch__span
+  > .dropin-image-swatch__content,
+.dropin-image-swatch__container
+  input[type='checkbox']:disabled
+  ~ .dropin-image-swatch__span
+  > .dropin-image-swatch__content {
+  z-index: -1;
+}
+
+.dropin-image-swatch__container
+  input[type='radio']:not(:disabled)
+  ~ .dropin-image-swatch__span,
+.dropin-image-swatch__container
+  input[type='checkbox']:not(:disabled)
+  ~ .dropin-image-swatch__span {
+  cursor: pointer;
+}
+
+/* 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/ImageSwatch/ImageSwatch.stories.tsx

@@ -0,0 +1,252 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+import { action } from '@storybook/addon-actions';
+import {
+  ImageSwatch,
+  ImageSwatchProps,
+} from '@adobe/elsie/components/ImageSwatch';
+
+const defaultWidth = 200;
+const defaultHeight = 200;
+
+/**
+ * Use Image Swatches to display thumbnails of photos or illustrations.
+ */
+const meta: Meta<ImageSwatchProps> = {
+  title: 'Components/ImageSwatch',
+  component: ImageSwatch,
+  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',
+      },
+    },
+    id: {
+      description: 'Field id',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    alt: {
+      description: 'Alt Text',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    value: {
+      description: 'Field value',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    disabled: {
+      description: 'ImageSwatch disabled',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    selected: {
+      description: 'ImageSwatch active',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    multi: {
+      description: 'ImageSwatch multi',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    src: {
+      description: 'Image path',
+      type: {
+        required: true,
+        name: 'string',
+      },
+    },
+    groupAriaLabel: {
+      description: 'Label name for the swatch group',
+      type: {
+        name: 'string',
+      },
+    },
+    outOfStock: {
+      description: 'Whether or not the image 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 errors',
+      type: {
+        required: false,
+        name: 'function',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ImageSwatchProps>;
+
+/**
+ * ```ts
+ * import { ImageSwatch } from '@adobe/elsie/components/ImageSwatch';
+ * ```
+ */
+
+export const DefaultImageSwatch: Story = {
+  args: {
+    name: 'imageSwatchField',
+    id: 'imageSwatch1',
+    label: 'imageSwatch1Example',
+    groupAriaLabel: 'Image Swatches',
+    value: 'imageSwatchExample',
+    src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+    alt: 'Some alternative text',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const imageSwatch = await canvas.findByRole('radio');
+    const spanElement = document.querySelector(
+      '.dropin-image-swatch__span'
+    ) as HTMLElement;
+    expect(spanElement).toBeVisible();
+    await expect(imageSwatch).not.toBeChecked();
+  },
+};
+
+export const ImageSwatchSelected: Story = {
+  args: {
+    name: 'imageSwatchField',
+    id: 'imageSwatch1',
+    label: 'imageSwatch1Example',
+    groupAriaLabel: 'Image Swatches',
+    value: 'imageSwatchExample',
+    src: `https://picsum.photos/400/400`,
+    alt: 'imageSwatch1Example',
+    selected: true,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const imageSwatch = await canvas.findByRole('radio');
+    const spanElement = document.querySelector(
+      '.dropin-image-swatch__span'
+    ) as HTMLElement;
+    expect(spanElement).toBeVisible();
+    await expect(imageSwatch).toBeChecked();
+    await expect(
+      canvas.getByLabelText(
+        'Image Swatches: imageSwatch1Example swatch selected'
+      )
+    ).toBeChecked();
+  },
+};
+
+export const ImageSwatchDisabled: Story = {
+  args: {
+    name: 'imageSwatchField',
+    id: 'imageSwatch1',
+    label: 'imageSwatch1Example',
+    groupAriaLabel: 'Image Swatches',
+    value: 'imageSwatchExample',
+    src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+    alt: 'Some alternative text',
+    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 OutOfStockImageSwatch: Story = {
+  args: {
+    name: 'imageSwatchField',
+    id: 'imageSwatch1',
+    label: 'imageSwatch1Example',
+    groupAriaLabel: 'Image Swatches',
+    value: 'imageSwatchExample',
+    src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+    alt: 'Some alternative text',
+    selected: false,
+    disabled: false,
+    outOfStock: true,
+    onValue: action('onValue'),
+  },
+};
+
+export const SelectedOutOfStockImageSwatch: Story = {
+  args: {
+    name: 'imageSwatchField',
+    id: 'imageSwatch1',
+    label: 'imageSwatch1Example',
+    groupAriaLabel: 'Image Swatches',
+    value: 'imageSwatchExample',
+    src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+    alt: 'Some alternative text',
+    selected: true,
+    disabled: false,
+    outOfStock: true,
+    onValue: action('onValue'),
+    'aria-label': 'image swatch example',
+  },
+};
+
+export const MultiImageSwatch: Story = {
+  args: {
+    name: 'imageSwatchField',
+    id: 'imageSwatch1',
+    value: 'imageSwatchExample',
+    src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`,
+    alt: 'Some alternative text',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    multi: true,
+    onValue: action('onValue'),
+    'aria-label': 'image swatch example',
+  },
+  render: (args) => (
+    <div style="display: flex; flex-wrap:wrap; gap: 25px">
+      <ImageSwatch {...args} id={'imageSwatch1'} value={'image1'} />
+      <ImageSwatch {...args} id={'imageSwatch2'} value={'image2'} />
+      <ImageSwatch {...args} id={'imageSwatch3'} value={'image1'} />
+    </div>
+  ),
+};

package/src/components/ImageSwatch/ImageSwatch.tsx

@@ -0,0 +1,111 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes, useCallback } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ImageSwatch/ImageSwatch.css';
+import { Image } from '@adobe/elsie/components/Image';
+import { useText } from '@adobe/elsie/i18n';
+
+export interface ImageSwatchProps
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'label'> {
+  name?: string;
+  label?: string;
+  groupAriaLabel?: string;
+  id?: string;
+  src: string;
+  alt?: string;
+  value?: string;
+  disabled?: boolean;
+  selected?: boolean;
+  outOfStock?: boolean;
+  multi?: boolean;
+  onValue?: (value: any) => void;
+  onUpdateError?: (error: Error) => void;
+}
+
+export const ImageSwatch: FunctionComponent<ImageSwatchProps> = ({
+  className,
+  name,
+  value,
+  id,
+  label,
+  groupAriaLabel,
+  src,
+  alt,
+  disabled = false,
+  selected = false,
+  outOfStock = false,
+  multi = false,
+  onValue,
+  onUpdateError,
+  ...props
+}) => {
+  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 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}`;
+  };
+
+  return (
+    <label className={classes(['dropin-image-swatch__container', className])}>
+      <input
+        type={multi ? 'checkbox' : 'radio'}
+        name={name}
+        id={id}
+        value={value}
+        aria-label={handleAriaLabel()}
+        checked={selected}
+        disabled={disabled}
+        onChange={handleOnValue}
+        {...props}
+        className={classes([
+          'dropin-image-swatch',
+          ['dropin-image-swatch--selected', selected],
+          ['dropin-image-swatch--disabled', disabled],
+          className,
+        ])}
+      />
+
+      <span
+        className={classes([
+          'dropin-image-swatch__span',
+          ['dropin-image-swatch__span--out-of-stock', outOfStock],
+          className,
+        ])}
+      >
+        <Image
+          src={src}
+          className={classes(['dropin-image-swatch__content'])}
+          params={{ width: 100, fit: 'bounds', crop: true }}
+          alt={alt}
+          loading={'lazy'}
+          onError={(e: any) => (e.target.style.display = 'none')}
+        />
+      </span>
+    </label>
+  );
+};

package/src/components/ImageSwatch/index.ts

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