@adobe-commerce/elsie 1.0.0-alpha04071347

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

@@ -0,0 +1,21 @@
+/********************************************************************
+ *  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 * as Icons from '@adobe-commerce/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,98 @@
+/********************************************************************
+ *  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 type { Meta, StoryObj } from '@storybook/preact';
+import { Icon, IconProps } from '@adobe-commerce/elsie/components/Icon';
+import { Cart } from '@adobe-commerce/elsie/icons/index';
+import * as Icons from '@adobe-commerce/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-commerce/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) => (
+        // eslint-disable-next-line
+        <>
+          <span key={icon}>{icon}</span>
+          {/* @ts-ignore */}
+          <Icon {...props} source={Icons[icon]} />
+        </>
+      ))}
+    </div>
+  ),
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,112 @@
+/********************************************************************
+ *  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 { FunctionComponent } from 'preact';
+import { classes } from '@adobe-commerce/elsie/lib/classes';
+import { lazy, Suspense, SVGProps } from 'preact/compat';
+
+import '@adobe-commerce/elsie/components/Icon/Icon.css';
+
+export type IconType = keyof typeof import('@adobe-commerce/elsie/icons');
+
+const lazyIcons = {
+  Add: lazy(() => import('@adobe-commerce/elsie/icons/Add.svg')),
+  Bulk: lazy(() => import('@adobe-commerce/elsie/icons/Bulk.svg')),
+  Burger: lazy(() => import('@adobe-commerce/elsie/icons/Burger.svg')),
+  Cart: lazy(() => import('@adobe-commerce/elsie/icons/Cart.svg')),
+  Check: lazy(() => import('@adobe-commerce/elsie/icons/Check.svg')),
+  ChevronDown: lazy(() => import('@adobe-commerce/elsie/icons/ChevronDown.svg')),
+  ChevronUp: lazy(() => import('@adobe-commerce/elsie/icons/ChevronUp.svg')),
+  ChevronRight: lazy(() => import('@adobe-commerce/elsie/icons/ChevronRight.svg')),
+  Close: lazy(() => import('@adobe-commerce/elsie/icons/Close.svg')),
+  Heart: lazy(() => import('@adobe-commerce/elsie/icons/Heart.svg')),
+  Minus: lazy(() => import('@adobe-commerce/elsie/icons/Minus.svg')),
+  Placeholder: lazy(() => import('@adobe-commerce/elsie/icons/Placeholder.svg')),
+  PlaceholderFilled: lazy(
+    () => import('@adobe-commerce/elsie/icons/PlaceholderFilled.svg')
+  ),
+  Search: lazy(() => import('@adobe-commerce/elsie/icons/Search.svg')),
+  SearchFilled: lazy(() => import('@adobe-commerce/elsie/icons/SearchFilled.svg')),
+  Sort: lazy(() => import('@adobe-commerce/elsie/icons/Sort.svg')),
+  Star: lazy(() => import('@adobe-commerce/elsie/icons/Star.svg')),
+  View: lazy(() => import('@adobe-commerce/elsie/icons/View.svg')),
+  User: lazy(() => import('@adobe-commerce/elsie/icons/User.svg')),
+  Warning: lazy(() => import('@adobe-commerce/elsie/icons/Warning.svg')),
+  Locker: lazy(() => import('@adobe-commerce/elsie/icons/Locker.svg')),
+  Wallet: lazy(() => import('@adobe-commerce/elsie/icons/Wallet.svg')),
+  Card: lazy(() => import('@adobe-commerce/elsie/icons/Card.svg')),
+  Order: lazy(() => import('@adobe-commerce/elsie/icons/Order.svg')),
+  Delivery: lazy(() => import('@adobe-commerce/elsie/icons/Delivery.svg')),
+  OrderError: lazy(() => import('@adobe-commerce/elsie/icons/OrderError.svg')),
+  OrderSuccess: lazy(() => import('@adobe-commerce/elsie/icons/OrderSuccess.svg')),
+  PaymentError: lazy(() => import('@adobe-commerce/elsie/icons/PaymentError.svg')),
+  CheckWithCircle: lazy(() => import('@adobe-commerce/elsie/icons/CheckWithCircle.svg')),
+  WarningWithCircle: lazy(
+    () => import('@adobe-commerce/elsie/icons/WarningWithCircle.svg')
+  ),
+  WarningFilled: lazy(() => import('@adobe-commerce/elsie/icons/WarningFilled.svg')),
+  InfoFilled: lazy(() => import('@adobe-commerce/elsie/icons/InfoFilled.svg')),
+  HeartFilled: lazy(() => import('@adobe-commerce/elsie/icons/HeartFilled.svg')),
+  Trash: lazy(() => import('@adobe-commerce/elsie/icons/Trash.svg')),
+  Eye: lazy(() => import('@adobe-commerce/elsie/icons/Eye.svg')),
+  EyeClose: lazy(() => import('@adobe-commerce/elsie/icons/EyeClose.svg')),
+  Date: lazy(() => import('@adobe-commerce/elsie/icons/Date.svg')),
+  AddressBook: lazy(() => import('@adobe-commerce/elsie/icons/AddressBook.svg')),
+  EmptyBox: lazy(() => import('@adobe-commerce/elsie/icons/EmptyBox.svg')),
+  Coupon: lazy(() => import('@adobe-commerce/elsie/icons/Coupon.svg')),
+  Gift: lazy(() => import('@adobe-commerce/elsie/icons/Gift.svg')),
+  GiftCard: lazy(() => import('@adobe-commerce/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,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/Icon/Icon';

package/src/components/IllustratedMessage/IllustratedMessage.css

@@ -0,0 +1,61 @@
+/********************************************************************
+ *  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-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,126 @@
+/********************************************************************
+ *  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 {
+  IllustratedMessage as component,
+  IllustratedMessageProps,
+} from '@adobe-commerce/elsie/components/IllustratedMessage';
+import { Placeholder } from '@adobe-commerce/elsie/icons';
+import { Button, Icon } from '@adobe-commerce/elsie/components';
+import { expect } from '@storybook/test';
+import { IconsList } from '@adobe-commerce/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,78 @@
+/********************************************************************
+ *  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 { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes, JSX } from 'preact/compat';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/IllustratedMessage/IllustratedMessage.css';
+import { Card } from '@adobe-commerce/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,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/IllustratedMessage/IllustratedMessage';
+export { IllustratedMessage as default } from '@adobe-commerce/elsie/components/IllustratedMessage/IllustratedMessage';

package/src/components/Image/Image.css

@@ -0,0 +1,52 @@
+/********************************************************************
+ *  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-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,89 @@
+/********************************************************************
+ *  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 { Image, ImageProps } from '@adobe-commerce/elsie/components/Image';
+import { expect, waitFor } from '@storybook/test';
+
+import { Image as ExampleImage } from '@adobe-commerce/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,
+  },
+};