@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/ContentGrid/ContentGrid.tsx

@@ -0,0 +1,65 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
+
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ContentGrid/ContentGrid.css';
+
+export interface ContentGridProps extends HTMLAttributes<HTMLDivElement> {
+  emptyGridContent: VNode;
+  maxColumns?: number;
+  columnWidth?: string;
+}
+
+export const ContentGrid: FunctionComponent<ContentGridProps> = ({
+  className,
+  children,
+  maxColumns,
+  columnWidth = '1fr',
+  emptyGridContent,
+  ...props
+}) => {
+  const hasChildren =
+    !!children && (Array.isArray(children) ? children.length > 0 : true);
+
+  const additionalStyles = hasChildren
+    ? {
+        gridTemplateColumns: `repeat(${maxColumns}, ${columnWidth})`,
+      }
+    : undefined;
+
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-content-grid', className])}
+      tabindex={0}
+    >
+      <div
+        data-testid="content-grid-content"
+        className={classes([
+          'dropin-content-grid__content',
+          ['dropin-content-grid__dynamic-columns-content', !maxColumns],
+          ['dropin-content-grid__content--empty', !hasChildren],
+        ])}
+        style={additionalStyles}
+      >
+        {hasChildren ? children : emptyGridContent}
+      </div>
+    </div>
+  );
+};

package/src/components/ContentGrid/index.ts

@@ -0,0 +1,19 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
+
+export * from '@adobe/elsie/components/ContentGrid/ContentGrid';
+export { ContentGrid as default } from '@adobe/elsie/components/ContentGrid/ContentGrid';

package/src/components/Divider/Divider.css

@@ -0,0 +1,13 @@
+.dropin-divider {
+  border: none;
+}
+
+.dropin-divider--primary {
+  border-top: var(--shape-border-width-3) solid var(--color-neutral-400);
+  margin: var(--spacing-xbig) auto;
+}
+
+.dropin-divider--secondary {
+  border-top: var(--shape-border-width-2) solid var(--color-neutral-400);
+  margin: var(--spacing-medium) auto;
+}

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Divider, DividerProps } from '@adobe/elsie/components/Divider';
+import { expect, within } from '@storybook/test';
+
+/**
+ * Use Dividers to separate and group content or build rhythm and structure.
+ */
+const meta: Meta<DividerProps> = {
+  title: 'Components/Divider',
+  component: Divider,
+  argTypes: {
+    variant: {
+      description: 'Divider variant: `primary` or `secondary`',
+      defaultValue: { summary: 'primary' },
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<DividerProps>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+  render: ({ variant }) => (
+    <div style="width: 400px">
+      <Divider variant={variant} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('separator')).toBeVisible();
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+  },
+  render: ({ variant }) => (
+    <div style="width: 400px">
+      <Divider variant={variant} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('separator')).toBeVisible();
+  },
+};

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Divider/Divider.css';
+
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+  variant?: 'primary' | 'secondary';
+}
+
+export const Divider: FunctionComponent<DividerProps> = ({
+  variant = 'primary',
+  className,
+}) => {
+  return (
+    <hr
+      role="separator"
+      className={classes([
+        'dropin-divider',
+        `dropin-divider--${variant}`,
+        className,
+      ])}
+    />
+  );
+};

package/src/components/Divider/index.ts

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

package/src/components/Field/Field.css

@@ -0,0 +1,74 @@
+/* https://cssguidelin.es/#bem-like-naming */
+.dropin-field {
+  display: grid;
+  font: var(--type-body-2-strong-font);
+  grid-auto-rows: max-content;
+}
+
+.dropin-field__label--medium {
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+  color: var(--color-neutral-800);
+  text-align: left;
+  padding-bottom: var(--spacing-xsmall);
+}
+
+.dropin-field__label--large {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  color: var(--color-neutral-800);
+  text-align: left;
+  padding-bottom: var(--spacing-xsmall);
+}
+
+.dropin-field__label--disabled {
+  color: var(--color-neutral-500);
+}
+
+.dropin-field__content {
+  display: grid;
+  grid-auto-rows: max-content;
+}
+
+.dropin-field__hint {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  color: var(--color-neutral-700);
+  text-align: left;
+}
+
+.dropin-field__hint:empty {
+  display: none;
+}
+
+.dropin-field__hint--medium {
+  padding-top: var(--spacing-xsmall);
+}
+
+.dropin-field__hint--large {
+  padding-top: var(--spacing-small);
+}
+
+.dropin-field__hint--error {
+  color: var(--color-alert-800);
+}
+
+.dropin-field__hint--success {
+  color: var(--color-positive-800);
+}
+
+.dropin-field__hint--disabled {
+  color: var(--color-neutral-500);
+}
+
+/* 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/Field/Field.stories.tsx

@@ -0,0 +1,229 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+/* eslint-disable react/no-danger */
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  Field,
+  FieldProps,
+  Picker,
+  Input,
+  Incrementer,
+  Checkbox,
+} from '@adobe/elsie/components';
+import { expect, within, userEvent } from '@storybook/test';
+
+/**
+ * Use Field Labels to wrap form inputs with titles and help text.
+ */
+const meta: Meta<FieldProps> = {
+  title: 'Components/Field',
+  component: Field,
+  argTypes: {
+    label: {
+      description: 'Label',
+      control: 'text',
+    },
+    hint: {
+      description: 'Helper Text',
+      control: 'text',
+    },
+    error: {
+      description: 'Error Text',
+      control: 'text',
+    },
+    success: {
+      description: 'Success Text',
+      control: 'text',
+    },
+    size: {
+      description: '',
+      options: ['medium', 'large'],
+      control: { type: 'radio' },
+      defaultValue: {
+        summary: 'medium',
+      },
+    },
+    disabled: {
+      description: 'Whether or not the field is disabled',
+      control: 'boolean',
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<FieldProps>;
+
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Input } from '@adobe/elsie/components/Input';
+ * ```
+ */
+export const InputField: Story = {
+  render: (args) => (
+    <Field {...args}>
+      <Input name="inputField" placeholder="Input" />
+    </Field>
+  ),
+  args: {
+    label: 'Label',
+    hint: 'Helper Text',
+    error: '',
+    success: '',
+    size: 'medium',
+    disabled: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByPlaceholderText('Input'), 'Test Content');
+    await expect(await canvas.findByDisplayValue('Test Content')).toBeVisible();
+    await expect(canvas.getByText('Label')).toBeVisible();
+    await expect(canvas.getByText('Helper Text')).toBeVisible();
+  },
+};
+
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Incrementer } from '@adobe/elsie/components/Incrementer';
+ * ```
+ */
+export const IncrementerField: Story = {
+  render: (args) => (
+    <Field {...args}>
+      <Incrementer name="incrementerField" value="0" min={0} max={100} />
+    </Field>
+  ),
+  args: {
+    label: 'Label',
+    hint: 'Helper Text',
+    error: '',
+    success: '',
+    size: 'medium',
+    disabled: false,
+  },
+  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 triggerning before even element fully loaded
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await userEvent.click(increaseButton);
+    await expect(await canvas.findByDisplayValue('1')).toBeTruthy();
+
+    await userEvent.click(decreaseButton);
+    await expect(await canvas.findByDisplayValue('0')).toBeTruthy();
+
+    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, '0');
+    await expect(await canvas.findByDisplayValue('0')).toBeTruthy();
+  },
+};
+
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { Picker } from '@adobe/elsie/components/Picker';
+ * ```
+ */
+export const PickerField: Story = {
+  render: (args) => (
+    <Field {...args}>
+      <Picker
+        name="pickerField"
+        placeholder="Select an option"
+        options={[
+          {
+            value: 'option1',
+            text: 'Option 1',
+          },
+          {
+            value: 'option2',
+            text: 'Option 2',
+            disabled: true,
+          },
+          {
+            value: 'option3',
+            text: 'Option 3',
+          },
+        ]}
+        disabled={false}
+      />
+    </Field>
+  ),
+  args: {
+    label: 'Label',
+    hint: 'Helper Text',
+    error: '',
+    success: '',
+    size: 'medium',
+    disabled: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText('Select an option'));
+    await expect(canvas.getByText('Option 1')).toBeVisible();
+
+    await expect(canvas.getByText('Option 2')).toBeVisible();
+
+    const select = document.querySelector(
+      '.dropin-picker__select'
+    ) as HTMLSelectElement;
+
+    await userEvent.selectOptions(select, 'option3');
+
+    await expect(select.textContent).toContain('Option 3');
+  },
+};
+
+export const CheckboxField: Story = {
+  render: (args) => (
+    <Field {...args}>
+      <Checkbox
+        name="checkboxField"
+        label="Option"
+        description="Optional description text goes here"
+      />
+    </Field>
+  ),
+  args: {
+    label: 'Label',
+    hint: 'Helper Text',
+    error: '',
+    success: '',
+    size: 'medium',
+    disabled: false,
+  },
+};
+
+/**
+ * ```ts
+ * import { Field } from '@adobe/elsie/components/Field';
+ * import { TextSwatch } from '@adobe/elsie/components/TextSwatch';
+ * ```
+ */

package/src/components/Field/Field.tsx

@@ -0,0 +1,75 @@
+import '@adobe/elsie/components/Field/Field.css';
+import { classes } from '@adobe/elsie/lib';
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+
+export interface FieldProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  success?: string;
+  disabled?: boolean;
+  children?: VNode;
+  size?: 'medium' | 'large';
+}
+
+export const Field: FunctionComponent<FieldProps> = ({
+  className,
+  label,
+  error,
+  hint,
+  success,
+  size = 'medium',
+  disabled = false,
+  children,
+  ...props
+}) => {
+  const id =
+    children?.props?.id ?? `dropin-field-${Math.random().toString(36)}`;
+  const ChildComponent =
+    children && typeof children.type !== 'string' ? children.type : null;
+
+  return (
+    <div {...props} className={classes(['dropin-field', className])}>
+      {label && (
+        <label
+          className={classes([
+            'dropin-field__label',
+            ['dropin-field__label--disabled', disabled],
+            `dropin-field__label--${size}`,
+          ])}
+          htmlFor={id}
+        >
+          {label}
+        </label>
+      )}
+
+      <div className={classes(['dropin-field__content'])}>
+        {ChildComponent && children && (
+          <ChildComponent
+            {...children.props}
+            id={id}
+            key={children.key}
+            disabled={disabled}
+            size={size}
+            error={!!error}
+            success={!!success && !error}
+          />
+        )}
+      </div>
+
+      <div
+        className={classes([
+          'dropin-field__hint',
+          [`dropin-field__hint--${size}`, size],
+          ['dropin-field__hint--error', !!error],
+          ['dropin-field__hint--success', !!success && !error],
+          ['dropin-field__hint--disabled', !!disabled],
+        ])}
+      >
+        {error || success || hint}
+      </div>
+    </div>
+  );
+};

package/src/components/Field/index.ts

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

package/src/components/Header/Header.css

@@ -0,0 +1,47 @@
+.dropin-header-container {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  justify-content: space-between;
+  gap: 0px 0px;
+  grid-template-areas:
+    'title actions'
+    'divider divider';
+  width: 100%;
+}
+
+.dropin-header-container__title {
+  grid-area: title;
+  color: var(--color-neutral-800);
+}
+
+.dropin-header-container__title--medium {
+  font: var(--type-headline-2-strong-font);
+  letter-spacing: var(--type-headline-1-letter-spacing);
+}
+
+.dropin-header-container__title--large {
+  font: var(--type-headline-1-font);
+  letter-spacing: var(--type-headline-1-letter-spacing);
+}
+
+.dropin-header-container__actions {
+  grid-area: actions;
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  color: var(--color-brand-500);
+  align-self: center;
+}
+
+.dropin-header-container .dropin-header-container__divider {
+  grid-area: divider;
+  width: 100%;
+  border-top: 3px solid var(--color-neutral-400);
+}
+
+.dropin-header-container .dropin-header-container__divider--medium {
+  margin: var(--spacing-xsmall) 0 var(--spacing-medium) 0;
+}
+
+.dropin-header-container .dropin-header-container__divider--large {
+  margin: 22px 0 var(--spacing-medium) 0;
+}