@adobe-commerce/elsie 1.0.0-alpha1

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

@@ -0,0 +1,128 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Header, HeaderProps } from '@adobe/elsie/components/Header';
+import { Button } from '@adobe/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>' },
+    },
+  },
+} 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>
+    ),
+  },
+  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>,
+  },
+};
+
+export const WithoutLine = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Medium Size',
+    size: 'medium',
+    divider: false,
+    cta: <button>Print order details</button>,
+  },
+};
+
+export const WithoutActions = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Order complete',
+    size: 'medium',
+    divider: false,
+    cta: null,
+  },
+};

package/src/components/Header/Header.tsx

@@ -0,0 +1,53 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes, VComponent } from '@adobe/elsie/lib';
+import { Divider } from '@adobe/elsie/components';
+import '@adobe/elsie/components/Header/Header.css';
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  size?: 'medium' | 'large';
+  divider?: boolean;
+  cta?: VNode;
+}
+
+export const Header: FunctionComponent<HeaderProps> = ({
+  title = null,
+  size = 'medium',
+  cta,
+  divider = true,
+  className,
+  ...props
+}) => {
+  if (!title) return null;
+
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-header-container', className])}
+      data-testid="dropin-header-container"
+    >
+      <span
+        className={classes([
+          'dropin-header-container__title',
+          ['dropin-header-container__title--medium', size === 'medium'],
+          ['dropin-header-container__title--large', size === 'large'],
+        ])}
+      >
+        {title}
+      </span>
+      {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,2 @@
+export * from '@adobe/elsie/components/Header/Header';
+export { Header as default } from '@adobe/elsie/components/Header/Header';

package/src/components/Icon/Icon.css

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

package/src/components/Icon/Icon.stories.helpers.jsx

@@ -0,0 +1,12 @@
+import * as Icons from '@adobe/elsie/icons';
+import { Icon } from './Icon';
+
+const iconNames = Object.keys(Icons);
+
+export const IconsList = iconNames.reduce(
+  (acc, name) => {
+    acc[name] = <Icon key={name} source={Icons[name]} size="24" stroke="1" />;
+    return acc;
+  },
+  { none: null }
+);

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Icon, IconProps } from '@adobe/elsie/components/Icon';
+import { Cart } from '@adobe/elsie/icons/index';
+import * as Icons from '@adobe/elsie/icons';
+
+/**
+ * Use Icons as symbols or metaphors to communicate and enhance the user experience.
+ */
+const meta: Meta<IconProps> = {
+  title: 'Components/Icon',
+  component: Icon,
+  argTypes: {
+    source: {
+      options: Object.keys(Icons),
+      mapping: Icons,
+      control: {
+        type: 'select',
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['12', '16', '24', '32', '64', '80'],
+    },
+    stroke: {
+      control: 'select',
+      options: ['1', '2', '3', '4'],
+    },
+    title: {
+      control: 'text',
+      description: 'Title for the icon',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<IconProps>;
+
+/**
+ * ```ts
+ * import { Icon } from '@adobe/elsie/components/Icon';
+ * ```
+ */
+
+export const Primary: Story = {
+  args: {
+    source: Cart,
+  },
+};
+
+export const Lazy: Story = {
+  argTypes: {
+    source: {
+      mapping: Object.keys(Icons),
+    },
+  },
+  args: {
+    source: 'Cart',
+  },
+};
+
+export const AllIcons: Story = {
+  argTypes: {
+    style: Object
+  },
+  args: {
+    style: {
+      color: 'blue'
+    }
+  },
+  render: (props) => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gap: '1rem',
+      }}
+    >
+      {Object.keys(Icons).map((icon) => (
+        <>
+          <span key={icon}>{icon}</span>
+          {/* @ts-ignore */}
+          <Icon {...props} source={Icons[icon]} />
+        </>
+      ))}
+    </div>
+  ),
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,103 @@
+import { FunctionComponent } from 'preact';
+import { classes } from '@adobe/elsie/lib/classes';
+import { lazy, Suspense, SVGProps } from 'preact/compat';
+
+import '@adobe/elsie/components/Icon/Icon.css';
+
+export type IconType = keyof typeof import('@adobe/elsie/icons');
+
+const lazyIcons = {
+  Add: lazy(() => import('@adobe/elsie/icons/Add.svg')),
+  Bulk: lazy(() => import('@adobe/elsie/icons/Bulk.svg')),
+  Burger: lazy(() => import('@adobe/elsie/icons/Burger.svg')),
+  Cart: lazy(() => import('@adobe/elsie/icons/Cart.svg')),
+  Check: lazy(() => import('@adobe/elsie/icons/Check.svg')),
+  ChevronDown: lazy(() => import('@adobe/elsie/icons/ChevronDown.svg')),
+  ChevronUp: lazy(() => import('@adobe/elsie/icons/ChevronUp.svg')),
+  ChevronRight: lazy(() => import('@adobe/elsie/icons/ChevronRight.svg')),
+  Close: lazy(() => import('@adobe/elsie/icons/Close.svg')),
+  Heart: lazy(() => import('@adobe/elsie/icons/Heart.svg')),
+  Minus: lazy(() => import('@adobe/elsie/icons/Minus.svg')),
+  Placeholder: lazy(() => import('@adobe/elsie/icons/Placeholder.svg')),
+  PlaceholderFilled: lazy(
+    () => import('@adobe/elsie/icons/PlaceholderFilled.svg')
+  ),
+  Search: lazy(() => import('@adobe/elsie/icons/Search.svg')),
+  SearchFilled: lazy(() => import('@adobe/elsie/icons/SearchFilled.svg')),
+  Sort: lazy(() => import('@adobe/elsie/icons/Sort.svg')),
+  Star: lazy(() => import('@adobe/elsie/icons/Star.svg')),
+  View: lazy(() => import('@adobe/elsie/icons/View.svg')),
+  User: lazy(() => import('@adobe/elsie/icons/User.svg')),
+  Warning: lazy(() => import('@adobe/elsie/icons/Warning.svg')),
+  Locker: lazy(() => import('@adobe/elsie/icons/Locker.svg')),
+  Wallet: lazy(() => import('@adobe/elsie/icons/Wallet.svg')),
+  Card: lazy(() => import('@adobe/elsie/icons/Card.svg')),
+  Order: lazy(() => import('@adobe/elsie/icons/Order.svg')),
+  Delivery: lazy(() => import('@adobe/elsie/icons/Delivery.svg')),
+  OrderError: lazy(() => import('@adobe/elsie/icons/OrderError.svg')),
+  OrderSuccess: lazy(() => import('@adobe/elsie/icons/OrderSuccess.svg')),
+  PaymentError: lazy(() => import('@adobe/elsie/icons/PaymentError.svg')),
+  CheckWithCircle: lazy(() => import('@adobe/elsie/icons/CheckWithCircle.svg')),
+  WarningWithCircle: lazy(
+    () => import('@adobe/elsie/icons/WarningWithCircle.svg')
+  ),
+  WarningFilled: lazy(() => import('@adobe/elsie/icons/WarningFilled.svg')),
+  InfoFilled: lazy(() => import('@adobe/elsie/icons/InfoFilled.svg')),
+  HeartFilled: lazy(() => import('@adobe/elsie/icons/HeartFilled.svg')),
+  Trash: lazy(() => import('@adobe/elsie/icons/Trash.svg')),
+  Eye: lazy(() => import('@adobe/elsie/icons/Eye.svg')),
+  EyeClose: lazy(() => import('@adobe/elsie/icons/EyeClose.svg')),
+  Date: lazy(() => import('@adobe/elsie/icons/Date.svg')),
+  AddressBook: lazy(() => import('@adobe/elsie/icons/AddressBook.svg')),
+  EmptyBox: lazy(() => import('@adobe/elsie/icons/EmptyBox.svg')),
+  Coupon: lazy(() => import('@adobe/elsie/icons/Coupon.svg')),
+  Gift: lazy(() => import('@adobe/elsie/icons/Gift.svg')),
+  GiftCard: lazy(() => import('@adobe/elsie/icons/GiftCard.svg')),
+};
+
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'size'> {
+  source:
+    | FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>
+    | IconType;
+  size?: '12' | '16' | '24' | '32' | '64' | '80';
+  stroke?: '1' | '2' | '3' | '4';
+  className?: string;
+  title?: string;
+}
+
+export type IconNode = FunctionComponent<
+  SVGProps<SVGSVGElement> & { title?: string }
+>;
+
+export function Icon({
+  source: Source,
+  size = '24',
+  stroke = '2',
+  viewBox = '0 0 24 24',
+  className,
+  ...props
+}: IconProps) {
+  const LazyIcon = typeof Source === 'string' ? lazyIcons[Source] : null;
+
+  const defaultProps = {
+    className: classes([
+      'dropin-icon',
+      `dropin-icon--shape-stroke-${stroke}`,
+      className,
+    ]),
+    width: size,
+    height: size,
+    viewBox,
+  };
+
+  return (
+    <Suspense fallback={<svg {...props} {...defaultProps} />}>
+      {LazyIcon ? (
+        <LazyIcon {...props} {...defaultProps} />
+      ) : (
+        // @ts-ignore
+        <Source {...props} {...defaultProps} />
+      )}
+    </Suspense>
+  );
+}

package/src/components/Icon/index.ts

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

package/src/components/IllustratedMessage/IllustratedMessage.css

@@ -0,0 +1,52 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-illustrated-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 100%;
+  row-gap: var(--spacing-small);
+}
+
+.dropin-illustrated-message .dropin-card {
+  width: 100%;
+}
+
+.dropin-illustrated-message__icon {
+  color: var(--color-neutral-400);
+  margin: 0 auto var(--spacing-medium) auto;
+}
+
+.dropin-illustrated-message__heading {
+  color: var(--color-neutral-800);
+  font: var(--type-headline-2-strong-font);
+  letter-spacing: var(--type-headline-2-strong-letter-spacing);
+  margin: 0;
+}
+
+.dropin-illustrated-message__message {
+  color: var(--color-neutral-800);
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  text-align: center;
+  margin: 0;
+}
+
+.dropin-illustrated-message .dropin-illustrated-message__action {
+  justify-self: center;
+  align-self: center;
+}
+
+/* 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/IllustratedMessage/IllustratedMessage.stories.tsx

@@ -0,0 +1,117 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  IllustratedMessage as component,
+  IllustratedMessageProps,
+} from '@adobe/elsie/components/IllustratedMessage';
+import { Placeholder } from '@adobe/elsie/icons';
+import { Button, Icon } from '@adobe/elsie/components';
+import { expect } from '@storybook/test';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+
+/**
+ * Use IllustratedMessages to display an illustration and a message, usually for an empty state or an error page.
+ */
+const meta: Meta<IllustratedMessageProps> = {
+  title: 'Components/IllustratedMessage',
+  component,
+  argTypes: {
+    icon: {
+      description: 'Icon to display in the IllustratedMessage.',
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: { type: 'select', defaultValue: 'Placeholder' },
+    },
+    heading: {
+      description: 'Heading text to display in the IllustratedMessage.',
+      control: { type: 'text' },
+      type: { name: 'string', required: false },
+    },
+    headingLevel: {
+      description: 'Heading level to display in the IllustratedMessage.',
+      control: { type: 'select', default: 2 },
+      options: [1, 2, 3, 4, 5, 6],
+      type: { name: 'string', required: false },
+    },
+    message: {
+      description: 'Message to display in the IllustratedMessage.',
+      options: ['Short', 'Long'],
+      mapping: {
+        Short: <div>Short message</div>,
+        Long: (
+          <div>
+            Illustrated message with an extremely extremely long message
+          </div>
+        ),
+      },
+      control: {
+        type: 'select',
+        labels: {
+          Short: 'Short message',
+          Long: 'Long message',
+        },
+      },
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+    },
+    action: {
+      description: 'Action to display in the IllustratedMessage.',
+      control: false,
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+    },
+    variant: {
+      description: 'Variant to display in the IllustratedMessage.',
+      control: { type: 'radio', default: 'secondary' },
+      options: ['primary', 'secondary'],
+      type: { name: 'string', required: false },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<IllustratedMessageProps>;
+
+export const IllustratedMessage: Story = {
+  args: {
+    icon: <Icon source={Placeholder} size="80" />,
+    heading: 'Illustrated Message heading',
+    headingLevel: 3,
+    message: <p>Illustrated Message text content</p>,
+    action: <Button>Illustrated Message action</Button>,
+    variant: 'secondary',
+  },
+  play: async () => {
+    const illustratedMessage = document.querySelector(
+      'div[class*="dropin-illustrated-message"]'
+    ) as HTMLElement;
+
+    await expect(illustratedMessage).toBeVisible();
+
+    const icon = illustratedMessage.querySelector(
+      '.dropin-illustrated-message__icon'
+    );
+    await expect(icon).toBeVisible();
+
+    const heading = illustratedMessage.querySelector(
+      '.dropin-illustrated-message__heading'
+    );
+    await expect(heading).toBeVisible();
+
+    const message = illustratedMessage.querySelector(
+      '.dropin-illustrated-message__message'
+    );
+    await expect(message).toBeVisible();
+
+    const action = illustratedMessage.querySelector(
+      '.dropin-illustrated-message__action'
+    );
+    await expect(action).toBeVisible();
+  },
+};

package/src/components/IllustratedMessage/IllustratedMessage.tsx

@@ -0,0 +1,69 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes, JSX } from 'preact/compat';
+import { classes, VComponent } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/IllustratedMessage/IllustratedMessage.css';
+import { Card } from '@adobe/elsie/components';
+
+export interface IllustratedMessageProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon' | 'action'> {
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  heading?: string;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  message?: VNode<HTMLAttributes<HTMLElement>>;
+  action?: VNode;
+  variant?: 'primary' | 'secondary';
+}
+
+export const IllustratedMessage: FunctionComponent<IllustratedMessageProps> = ({
+  className,
+  icon,
+  heading,
+  headingLevel = 2,
+  message,
+  action,
+  variant = 'secondary',
+  ...props
+}) => {
+  const Heading =
+    headingLevel >= 1 && headingLevel <= 6
+      ? (`h${headingLevel}` as keyof JSX.IntrinsicElements)
+      : 'h2';
+
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-illustrated-message', className])}
+    >
+      <Card variant={variant}>
+        {icon && (
+          <VComponent
+            node={icon}
+            aria-hidden="true"
+            size="80"
+            className="dropin-illustrated-message__icon"
+          />
+        )}
+
+        {heading && (
+          <Heading className="dropin-illustrated-message__heading">
+            {heading}
+          </Heading>
+        )}
+
+        {message && (
+          <VComponent
+            node={message}
+            className="dropin-illustrated-message__message"
+          />
+        )}
+
+        {action && (
+          <VComponent
+            node={action}
+            className="dropin-illustrated-message__action"
+          />
+        )}
+      </Card>
+    </div>
+  );
+};

package/src/components/IllustratedMessage/index.ts

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