@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/ColorSwatch/ColorSwatch.css

@@ -0,0 +1,123 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+/* Hide the default radio/checkbox button */
+.dropin-color-swatch__container input[type='radio'],
+.dropin-color-swatch__container input[type='checkbox'] {
+  opacity: 0;
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.dropin-color-swatch__container .dropin-color-swatch__span {
+  border-radius: 50%;
+  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);
+}
+
+.dropin-color-swatch__container--medium .dropin-color-swatch__span {
+  height: 32px;
+  width: 32px;
+}
+
+.dropin-color-swatch__container--large .dropin-color-swatch__span {
+  height: 40px;
+  width: 40px;
+}
+
+.dropin-color-swatch__container
+  input[type='radio']:not(:checked):active
+  ~ .dropin-color-swatch__span,
+.dropin-color-swatch__container
+  input[type='checkbox']:not(:checked):active
+  ~ .dropin-color-swatch__span {
+  box-shadow: 0 0 0 var(--shape-border-width-1) var(--color-neutral-500);
+  outline: none;
+}
+
+.dropin-color-swatch__container
+  input[type='radio']:checked
+  ~ .dropin-color-swatch__span,
+.dropin-color-swatch__container
+  input[type='checkbox']:checked
+  ~ .dropin-color-swatch__span,
+.dropin-color-swatch--selected {
+  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
+    0 0 0 3px var(--color-neutral-800);
+}
+
+.dropin-color-swatch__container
+  input[type='radio']:checked:active
+  ~ .dropin-color-swatch__span,
+.dropin-color-swatch__container
+  input[type='checkbox']:checked:active
+  ~ .dropin-color-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-900);
+}
+
+.dropin-color-swatch__container
+  input[type='radio']:focus-visible
+  + .dropin-color-swatch__span,
+.dropin-color-swatch__container
+  input[type='checkbox']:focus-visible
+  + .dropin-color-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-color-swatch__container
+  input[type='radio']:disabled
+  ~ .dropin-color-swatch__span,
+.dropin-color-swatch__container
+  input[type='checkbox']:disabled
+  ~ .dropin-color-swatch__span,
+.dropin-color-swatch--disabled,
+.dropin-color-swatch__container
+  input[type='radio']:disabled:active
+  ~ .dropin-color-swatch__span,
+.dropin-color-swatch__container
+  input[type='checkbox']:disabled:active
+  ~ .dropin-color-swatch__span {
+  box-shadow: 0 0 0 var(--shape-border-width-4) var(--color-neutral-500);
+  opacity: 0.24; /* Hard coded value */
+  pointer-events: none;
+}
+
+.dropin-color-swatch__span--out-of-stock {
+  box-shadow: 0 0 0 var(--shape-border-width-1) var(--color-neutral-700);
+  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(--bg-color);
+}
+
+.dropin-color-swatch__container
+  input[type='radio']:not(:disabled)
+  ~ .dropin-color-swatch__span,
+.dropin-color-swatch__container
+  input[type='checkbox']:not(:disabled)
+  ~ .dropin-color-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/ColorSwatch/ColorSwatch.stories.tsx

@@ -0,0 +1,265 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { action } from '@storybook/addon-actions';
+import { expect, within } from '@storybook/test';
+import {
+  ColorSwatch,
+  ColorSwatchProps,
+} from '@adobe/elsie/components/ColorSwatch';
+
+/**
+ * Use Color Swatches to display fills — such as colors, gradients, and textures — that can be applied to an object.
+ */
+const meta: Meta<ColorSwatchProps> = {
+  title: 'Components/ColorSwatch',
+  component: ColorSwatch,
+  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: false,
+        name: 'string',
+      },
+    },
+    size: {
+      description: 'Size of the color swatch',
+      type: {
+        required: false,
+        name: 'string',
+      },
+      defaultValue: { summary: 'medium' },
+      options: ['medium', 'large'],
+      control: { type: 'radio' },
+    },
+    color: {
+      description: 'Color of the swatch',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    value: {
+      description: 'Field value',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    disabled: {
+      description: 'Whether or not the color swatch is disabled',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    selected: {
+      description: 'Whether or not the color swatch is active',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    multi: {
+      description: 'Whether or not the color swatch allows multiple selection',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    onUpdateError: {
+      description: 'Function to handle errors',
+      type: {
+        required: false,
+        name: 'function',
+      },
+    },
+    outOfStock: {
+      description: 'Whether or not the color swatch is out of stock',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    onValue: {
+      description: 'Function to handle value changes',
+      type: {
+        required: false,
+        name: 'function',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ColorSwatchProps>;
+
+/**
+ * ```ts
+ * import { ColorSwatch } from '@adobe/elsie/components/ColorSwatch';
+ * ```
+ */
+
+export const DefaultColorSwatch: Story = {
+  args: {
+    name: 'colorSwatchField',
+    id: 'graySwatch',
+    label: 'gray',
+    groupAriaLabel: 'Color Swatch',
+    value: 'gray',
+    size: 'medium',
+    color: '#E8E8E8',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textSwatch = await canvas.findByRole('radio');
+    const spanElement = document.querySelector(
+      '.dropin-color-swatch__span'
+    ) as HTMLElement;
+    expect(spanElement).toBeVisible();
+    await expect(textSwatch).not.toBeChecked();
+  },
+};
+
+export const SelectedColorSwatch: Story = {
+  args: {
+    name: 'colorSwatchField',
+    id: 'graySwatch',
+    value: 'gray',
+    label: 'gray',
+    groupAriaLabel: 'Color Swatch',
+    size: 'medium',
+    color: '#E8E8E8',
+    selected: true,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textSwatch = await canvas.findByRole('radio');
+    const spanElement = document.querySelector(
+      '.dropin-color-swatch__span'
+    ) as HTMLElement;
+    expect(spanElement).toBeVisible();
+    await expect(textSwatch).toBeChecked();
+    await expect(
+      canvas.getByLabelText('Color Swatch: gray swatch selected')
+    ).toBeChecked();
+  },
+};
+
+export const DisabledColorSwatch: Story = {
+  args: {
+    name: 'colorSwatchField',
+    id: 'graySwatch',
+    value: 'gray',
+    label: 'gray',
+    groupAriaLabel: 'Color Swatch',
+    size: 'medium',
+    color: '#E8E8E8',
+    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 OutOfStockColorSwatch: Story = {
+  args: {
+    name: 'colorSwatchField',
+    id: 'graySwatch',
+    label: 'gray',
+    groupAriaLabel: 'Color Swatch',
+    value: 'gray',
+    size: 'medium',
+    color: '#E8E8E8',
+    selected: false,
+    disabled: false,
+    outOfStock: true,
+    onValue: action('onValue'),
+  },
+};
+
+export const SelectedOutOfStockColorSwatch: Story = {
+  args: {
+    name: 'colorSwatch_Field',
+    id: 'graySwatch',
+    value: 'gray',
+    label: 'gray',
+    groupAriaLabel: 'Color Swatch',
+    size: 'medium',
+    color: '#E8E8E8',
+    selected: true,
+    disabled: false,
+    outOfStock: true,
+    onValue: action('onValue'),
+  },
+};
+
+export const MultiColorSwatch: Story = {
+  args: {
+    name: 'colorSwatchField',
+    id: 'graySwatch',
+    value: 'gray',
+    size: 'medium',
+    color: '#E8E8E8',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    multi: true,
+    onValue: action('onValue'),
+    'aria-label': 'Grey Color Swatch',
+  },
+  render: (args) => (
+    <div style="display: flex; flex-wrap:wrap; gap: 25px">
+      <ColorSwatch
+        {...args}
+        id={'colorSwatch1'}
+        value={'green'}
+        color={'green'}
+      />
+      <ColorSwatch
+        {...args}
+        id={'colorSwatch2'}
+        value={'blue'}
+        color={'blue'}
+      />
+      <ColorSwatch
+        {...args}
+        id={'colorSwatch3'}
+        value={'yellow'}
+        color={'yellow'}
+      />
+    </div>
+  ),
+};

package/src/components/ColorSwatch/ColorSwatch.tsx

@@ -0,0 +1,118 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes, useCallback } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ColorSwatch/ColorSwatch.css';
+import { useText } from '@adobe/elsie/i18n';
+
+export interface ColorSwatchProps
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'label' | 'size'> {
+  name?: string;
+  label?: string;
+  groupAriaLabel?: string;
+  id?: string;
+  size?: 'medium' | 'large';
+  color?: string;
+  value?: string;
+  disabled?: boolean;
+  selected?: boolean;
+  outOfStock?: boolean;
+  multi?: boolean;
+  onValue?: (value: any) => void;
+  onUpdateError?: (error: Error) => void;
+}
+
+export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
+  className,
+  name,
+  value,
+  id,
+  label,
+  groupAriaLabel,
+  size = 'medium',
+  color,
+  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 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 isValidColor = (color: string) => {
+    const colorStyle = new Option().style;
+    colorStyle.color = color;
+    return colorStyle.color !== ''; // Returns true if the browser accepts this as a valid color
+  };
+
+  const defaultColor = 'var(--color-gray-300);';
+
+  const validColor = color && isValidColor(color) ? color : defaultColor;
+
+  const handleAriaLabel = () => {
+    if (outOfStock) return `${groupAriaLabel}: ${label} ${outOfStockLabel}`;
+    if (selected) return `${groupAriaLabel}: ${label} ${selectedLabel}`;
+    return `${groupAriaLabel}: ${label} ${swatchLabel}`;
+  };
+
+  return (
+    <label
+      className={classes([
+        'dropin-color-swatch__container',
+        `dropin-color-swatch__container--${size}`,
+        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-color-swatch',
+          ['dropin-color-swatch--selected', selected],
+          ['dropin-color-swatch--disabled', disabled],
+          className,
+        ])}
+      />
+      <span
+        style={{ '--bg-color': validColor }}
+        className={classes([
+          'dropin-color-swatch__span',
+          ['dropin-color-swatch__span--out-of-stock', outOfStock],
+          className,
+        ])}
+      />
+    </label>
+  );
+};

package/src/components/ColorSwatch/index.ts

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

package/src/components/ContentGrid/ContentGrid.css

@@ -0,0 +1,62 @@
+/********************************************************************
+ * ADOBE CONFIDENTIAL
+ * __________________
+ *
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-content-grid {
+    container-type: inline-size;
+    container-name: dropin-content-grid;
+    max-width: inherit;
+    overflow: scroll;
+}
+
+/* Container for the cart summary grid */
+.dropin-content-grid__content {
+    display: grid;
+    gap: var(--spacing-small);
+    margin: auto;
+    justify-items: center;
+}
+
+.dropin-content-grid__dynamic-columns-content {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* Empty grid message */
+.dropin-content-grid__content--empty {
+    grid-template-columns: repeat(1, 1fr);
+}
+
+/* Container rules */
+@container dropin-content-grid (width < 360) {
+    .dropin-content-grid__content {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 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) { } */

package/src/components/ContentGrid/ContentGrid.stories.tsx

@@ -0,0 +1,145 @@
+/********************************************************************
+ * ADOBE CONFIDENTIAL
+ * __________________
+ *
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ *******************************************************************/
+
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  ContentGrid as component,
+  ContentGridProps,
+} from '@adobe/elsie/components/ContentGrid/index';
+
+/**
+ * Used to display a grid of content, such as products or images, with a maximum number of columns.
+ */
+const meta: Meta<ContentGridProps> = {
+  title: 'Components/ContentGrid',
+  component,
+  argTypes: {
+    emptyGridContent: {
+      description: 'The content to display when the grid is empty.',
+      control: false,
+    },
+    children: {
+      description:
+        'The content to display in the grid. Each child will be displayed in a grid cell.',
+      control: false,
+    },
+    maxColumns: {
+      description:
+        'The maximum number of columns to display in the grid. If this is not set, this component will act like a flex container that wraps its children.',
+      control: {
+        type: 'number',
+      },
+      columnWidth: {
+        description:
+          'The width of each column in the grid. This is a CSS value, such as `1fr` or `100px`.',
+        control: {
+          type: 'text',
+        },
+      },
+    },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ContentGridProps>;
+
+const defaultProps: ContentGridProps = {
+  emptyGridContent: <div data-testid="empty-grid-content">Empty Grid</div>,
+  maxColumns: 6,
+  columnWidth: '1fr',
+};
+
+// Sample products to display in the grid
+const generateSampleContent = (count: number) => {
+  return Array.from({ length: count }).map((_, index) => (
+    <div
+      style={{
+        width: '100px',
+        height: '100px',
+        border: '1px solid black',
+        display: 'grid',
+        placeItems: 'center',
+      }}
+      key={index}
+    >
+      Product {index + 1}
+    </div>
+  ));
+};
+
+/**
+ * ```tsx
+ * <ContentGrid emptyGridContent={<div>Empty Grid</div>} />
+ * ```
+ */
+export const EmptyGrid: Story = {
+  args: {
+    ...defaultProps,
+  },
+};
+
+/**
+ * ```tsx
+ * <ContentGrid emptyGridContent={<div>Empty Grid</div>} />
+ *    <div>Product 1</div>,
+ *    <div>Product 2</div>,
+ *    //...
+ *    <div>Product 29</div>
+ *    <div>Product 30</div>
+ * </ContentGrid>
+ * ```
+ */
+export const WithContent: Story = {
+  args: {
+    ...defaultProps,
+    children: generateSampleContent(30),
+    maxColumns: 6,
+    columnWidth: '1fr',
+  },
+};
+
+export const InsideContainer: Story = {
+  args: {
+    ...defaultProps,
+    children: <>{generateSampleContent(12)}</>,
+    maxColumns: 6,
+    columnWidth: '1fr',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (story) => {
+      return (
+        <div
+          style={{
+            width: '50vw',
+            maxWidth: '800px',
+            maxHeight: '100vh',
+          }}
+        >
+          {story()}
+        </div>
+      );
+    },
+  ],
+};