@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/Field/Field.stories.tsx

@@ -0,0 +1,238 @@
+/********************************************************************
+ *  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
+/* eslint-disable react/no-danger */
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  Field,
+  FieldProps,
+  Picker,
+  Input,
+  Incrementer,
+  Checkbox,
+} from '@adobe-commerce/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-commerce/elsie/components/Field';
+ * import { Input } from '@adobe-commerce/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-commerce/elsie/components/Field';
+ * import { Incrementer } from '@adobe-commerce/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-commerce/elsie/components/Field';
+ * import { Picker } from '@adobe-commerce/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-commerce/elsie/components/Field';
+ * import { TextSwatch } from '@adobe-commerce/elsie/components/TextSwatch';
+ * ```
+ */

package/src/components/Field/Field.tsx

@@ -0,0 +1,84 @@
+/********************************************************************
+ *  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 '@adobe-commerce/elsie/components/Field/Field.css';
+import { classes } from '@adobe-commerce/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,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/Field/Field';

package/src/components/Header/Header.css

@@ -0,0 +1,56 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+.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;
+}

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,180 @@
+/********************************************************************
+ *  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 { Header, HeaderProps } from '@adobe-commerce/elsie/components/Header';
+import { Button } from '@adobe-commerce/elsie/components';
+import { expect, userEvent, within } from '@storybook/test';
+
+export default {
+  title: 'Components/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Your Message',
+    size: 'medium',
+    divider: true,
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description:
+        'Enter the title name. Without this title, it will not be displayed.',
+    },
+    size: {
+      description: 'Size of the style',
+      control: { type: 'radio' },
+      type: 'string',
+      defaultValue: { summary: 'medium' },
+      options: ['medium', 'large'],
+    },
+
+    divider: {
+      control: 'boolean',
+      description: 'Show or hide Divider.',
+    },
+    cta: {
+      description:
+        'A VNode component used to render a custom UI element, allowing for flexible content integration.',
+      options: ['Button', 'Link'],
+      mapping: {
+        Button: <button>Button</button>,
+        Link: <a href="#">Link</a>,
+      },
+      control: {
+        type: 'select',
+        labels: {
+          Button: 'Button element',
+          Link: 'Link element',
+        },
+      },
+      defaultValue: { summary: '<empty string>' },
+    },
+    level: {
+      description: 'Set the heading level',
+      options: [1, 2, 3, 4, 5, 6],
+      control: {
+        type: 'select',
+        labels: {
+          1: 'h1',
+          2: 'h2',
+          3: 'h3',
+          4: 'h4',
+          5: 'h5',
+          6: 'h6'
+        }
+      },
+      defaultValue: { summary: 2 },
+    },
+  },
+} as Meta<HeaderProps>;
+
+const Template: StoryObj<HeaderProps> = {
+  render: (args) => (
+    <div style={{ maxWidth: '1200px', padding: '40px' }}>
+      <Header {...args} />
+    </div>
+  ),
+};
+
+export const MediumSize = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Shipping info',
+    size: 'medium',
+    divider: true,
+    cta: (
+      <Button variant="tertiary" style={{ paddingRight: 0 }}>
+        Print order details
+      </Button>
+    ),
+    level: 2,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText('Print order details')).toBeInTheDocument();
+
+    const button = canvas.getByRole('button', { name: /Print order details/i });
+    await userEvent.click(button);
+
+    await expect(canvas.getByText('Shipping info')).toBeInTheDocument();
+  },
+};
+
+export const LargeSize = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Order A202405230825',
+    size: 'large',
+    divider: true,
+    cta: <a href="#">Print order details</a>,
+    level: 2,
+  },
+};
+
+export const WithoutLine = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Medium Size',
+    size: 'medium',
+    divider: false,
+    cta: <button>Print order details</button>,
+    level: 2,
+  },
+};
+
+export const WithoutActions = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Order complete',
+    size: 'medium',
+    divider: false,
+    cta: null,
+    level: 2,
+  },
+};
+
+
+export const HeadingLevels = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Heading Levels',
+    size: 'medium',
+    divider: true,
+    level: 1,
+  },
+  argTypes: {
+    level: {
+      control: {
+        type: 'select',
+        options: [1, 2, 3, 4, 5, 6]
+      },
+      description: 'Set the heading level',
+    }
+  }
+};

package/src/components/Header/Header.tsx

@@ -0,0 +1,81 @@
+/********************************************************************
+ *  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 { ComponentChildren, FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import { Divider } from '@adobe-commerce/elsie/components';
+import '@adobe-commerce/elsie/components/Header/Header.css';
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  size?: 'medium' | 'large';
+  divider?: boolean;
+  cta?: VNode;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+const Heading = ({
+  level,
+  className,
+  children,
+}: {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  className?: string;
+  children?: ComponentChildren;
+}) => {
+  const HeadingTag = level && level >= 1 && level <= 6
+    ? `h${level}` as keyof JSX.IntrinsicElements
+    : 'span';
+
+  return <HeadingTag className={className}>{children as any}</HeadingTag>;
+};
+
+export const Header: FunctionComponent<HeaderProps> = ({
+  title = null,
+  size = 'medium',
+  cta,
+  divider = true,
+  className,
+  level,
+  ...props
+}) => {
+  if (!title) return null;
+
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-header-container', className])}
+      data-testid="dropin-header-container"
+    >
+      <Heading
+        className={classes([
+          'dropin-header-container__title',
+          ['dropin-header-container__title--medium', size === 'medium'],
+          ['dropin-header-container__title--large', size === 'large'],
+        ])}
+        level={level}
+      >
+        {title}
+      </Heading>
+      {cta ? (
+        <VComponent node={cta} className="dropin-header-container__actions" />
+      ) : null}
+      {divider ? (
+        <Divider
+          className={classes([
+            'dropin-header-container__divider',
+            ['dropin-header-container__divider--medium', size === 'medium'],
+            ['dropin-header-container__divider--large', size === 'large'],
+          ])}
+        />
+      ) : null}
+    </div>
+  );
+};

package/src/components/Header/index.ts

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

package/src/components/Icon/Icon.css

@@ -0,0 +1,26 @@
+/********************************************************************
+ *  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 */
+
+.dropin-icon--shape-stroke-1 {
+  stroke-width: var(--shape-icon-stroke-1);
+}
+
+.dropin-icon--shape-stroke-2 {
+  stroke-width: var(--shape-icon-stroke-2);
+}
+
+.dropin-icon--shape-stroke-3 {
+  stroke-width: var(--shape-icon-stroke-3);
+}
+
+.dropin-icon--shape-stroke-4 {
+  stroke-width: var(--shape-icon-stroke-4);
+}