@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/ActionButtonGroup/index.ts

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

package/src/components/AlertBanner/AlertBanner.css

@@ -0,0 +1,135 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-alert-banner {
+  background-color: var(--color-alert-800);
+  color: var(--color-neutral-50);
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  padding: var(--spacing-small);
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  align-items: center;
+  gap: var(--spacing-small);
+}
+
+.dropin-alert-banner__actions,
+.dropin-alert-banner__content {
+  align-items: center;
+  display: grid;
+  grid-template-columns: max-content max-content;
+}
+
+/* Neutral variant */
+.dropin-alert-banner--neutral {
+  background-color: var(--color-neutral-700);
+}
+
+.dropin-alert-banner--neutral button.dropin-alert-banner__dismiss-button {
+  background-color: var(--color-neutral-700);
+}
+.dropin-alert-banner--neutral button.dropin-alert-banner__dismiss-button:hover,
+.dropin-alert-banner--neutral button.dropin-alert-banner__dismiss-button:focus,
+.dropin-alert-banner--neutral
+  button.dropin-alert-banner__dismiss-button:focus:hover,
+.dropin-alert-banner--neutral
+  button.dropin-alert-banner__dismiss-button:active {
+  background-color: var(--color-neutral-500);
+}
+
+/* Brand variant */
+.dropin-alert-banner--brand {
+  background-color: var(--color-brand-500);
+}
+
+.dropin-alert-banner--brand button.dropin-alert-banner__dismiss-button {
+  background-color: var(--color-brand-500);
+}
+.dropin-alert-banner--brand button.dropin-alert-banner__dismiss-button:hover,
+.dropin-alert-banner--brand button.dropin-alert-banner__dismiss-button:focus,
+.dropin-alert-banner--brand
+  button.dropin-alert-banner__dismiss-button:focus:hover,
+.dropin-alert-banner--brand button.dropin-alert-banner__dismiss-button:active {
+  background-color: var(--color-brand-700);
+}
+
+/* Success variant */
+.dropin-alert-banner--success {
+  background-color: var(--color-positive-800);
+}
+
+.dropin-alert-banner--success button.dropin-alert-banner__dismiss-button {
+  background-color: var(--color-positive-800);
+}
+.dropin-alert-banner--success button.dropin-alert-banner__dismiss-button:hover,
+.dropin-alert-banner--success button.dropin-alert-banner__dismiss-button:focus,
+.dropin-alert-banner--success
+  button.dropin-alert-banner__dismiss-button:focus:hover,
+.dropin-alert-banner--success
+  button.dropin-alert-banner__dismiss-button:active {
+  background-color: var(--color-positive-500);
+}
+
+/* Warning variant */
+.dropin-alert-banner--warning {
+  background-color: var(--color-alert-800);
+}
+
+.dropin-alert-banner--warning button.dropin-alert-banner__dismiss-button {
+  background-color: var(--color-alert-800);
+}
+.dropin-alert-banner--warning button.dropin-alert-banner__dismiss-button:hover,
+.dropin-alert-banner--warning button.dropin-alert-banner__dismiss-button:focus,
+.dropin-alert-banner--warning
+  button.dropin-alert-banner__dismiss-button:focus:hover,
+.dropin-alert-banner--warning
+  button.dropin-alert-banner__dismiss-button:active {
+  background-color: var(--color-alert-500);
+}
+
+.dropin-alert-banner__icon {
+  flex-shrink: 0;
+  color: var(--color-neutral-50);
+  margin-right: var(--spacing-small);
+}
+
+button.dropin-alert-banner__dismiss-button {
+  margin-left: auto;
+  color: var(--color-neutral-50);
+  height: 24px;
+  min-height: 24px;
+  width: 24px;
+  min-width: 24px;
+  padding: 0;
+}
+
+button.dropin-alert-banner__action {
+  color: var(--color-neutral-50);
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  padding: 0;
+  margin-right: var(--spacing-xxsmall);
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+@media only screen and (width >= 400px) and (width < 768px) {
+  .dropin-alert-banner__actions,
+  .dropin-alert-banner__content {
+    grid-template-columns: auto auto;
+    word-break: break-word;
+    word-wrap: break-word;
+  }
+
+  .dropin-alert-banner__message {
+    word-break: break-word;
+    word-wrap: break-word;
+  }
+}
+
+/* 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/AlertBanner/AlertBanner.stories.tsx

@@ -0,0 +1,156 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  AlertBanner as component,
+  AlertBannerProps,
+} from '@adobe/elsie/components/AlertBanner';
+import { action } from '@storybook/addon-actions';
+import { expect } from '@storybook/test';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+
+/**
+ * Use AlertBanners to notify and prompt users to take action.
+ */
+const meta: Meta<AlertBannerProps> = {
+  title: 'Components/AlertBanner',
+  component,
+  argTypes: {
+    variant: {
+      description: 'The AlertBanner variant.',
+      table: {
+        type: { summary: 'string' },
+      },
+      options: ['brand', 'neutral', 'success', 'warning'],
+      control: 'radio',
+    },
+    icon: {
+      description: 'The AlertBanner icon.',
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: {
+        type: 'select',
+      },
+    },
+    message: {
+      control: {
+        type: 'select',
+        labels: {
+          Short: 'Short message',
+          Long: 'Long message',
+        },
+      },
+      description: 'The AlertBanner message.',
+      options: ['Short', 'Long'],
+      mapping: {
+        Short: <div>Short message</div>,
+        Long: <div>Alert banner with an extremely extremely long message</div>,
+      },
+    },
+    onDismiss: {
+      description: 'The AlertBanner dismiss handler.',
+      table: {
+        type: { summary: 'function' },
+      },
+      action: 'onDismiss',
+    },
+    action: {
+      description:
+        'Optional action that must contain `label` and `onClick()` properties',
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<AlertBannerProps>;
+
+/**
+ * <AlertBanner>👋 Hello from your new AlertBanner story!</AlertBanner>
+ */
+export const Neutral: Story = {
+  args: {
+    variant: 'neutral',
+    //@ts-ignore
+    icon: IconsList.InfoFilled,
+    message: <span>Hello from your new AlertBanner!</span>,
+    onDismiss: action('Dismiss clicked'),
+    action: {
+      label: 'Action',
+      onClick: action('Action clicked'),
+    },
+  },
+  play: async () => {
+    const alertBanner = document.querySelector(
+      'div[class*="dropin-alert-banner"]'
+    ) as HTMLElement;
+
+    await expect(alertBanner).toBeVisible();
+
+    const link = alertBanner.querySelector(
+      '.dropin-alert-banner__dismiss-button'
+    );
+    await expect(link).toBeVisible();
+    await expect(link?.ariaLabel).toBe('Dismiss Alert');
+
+    const icon = alertBanner.querySelector('.dropin-alert-banner__icon');
+    await expect(icon).toBeVisible();
+  },
+};
+
+export const Brand: Story = {
+  args: {
+    variant: 'brand',
+    message: <span>Hello from your new AlertBanner!</span>,
+    onDismiss: action('Dismiss clicked'),
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    //@ts-ignore
+    icon: IconsList.CheckWithCircle,
+    message: <span>Hello from your new AlertBanner!</span>,
+    onDismiss: action('Dismiss clicked'),
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    //@ts-ignore
+    icon: IconsList.WarningFilled,
+    message: <span>Hello from your new AlertBanner!</span>,
+    onDismiss: action('Dismiss clicked'),
+  },
+};
+
+export const Action: Story = {
+  args: {
+    variant: 'warning',
+    //@ts-ignore
+    icon: IconsList.WarningFilled,
+    message: <span>Hello from your new AlertBanner!</span>,
+    onDismiss: action('Dismiss clicked'),
+    action: {
+      label: 'Action',
+      onClick: action('Action clicked'),
+    },
+  },
+  play: async () => {
+    const alertBanner = document.querySelector(
+      'div[class*="dropin-alert-banner"]'
+    ) as HTMLElement;
+
+    await expect(alertBanner).toBeVisible();
+
+    const action = alertBanner.querySelector('.dropin-alert-banner__action');
+
+    await expect(action).toBeVisible();
+    await expect(action).toHaveTextContent('Action');
+  },
+};

package/src/components/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,81 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes, VComponent } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/AlertBanner/AlertBanner.css';
+import { Button, Icon } from '@adobe/elsie/components';
+import { Close } from '@adobe/elsie/icons';
+import { useText } from '@adobe/elsie/i18n';
+
+export interface AlertBannerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon' | 'action'> {
+  variant: 'brand' | 'neutral' | 'success' | 'warning';
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  message: VNode;
+  onDismiss: () => void;
+  action?: {
+    label: string;
+    onClick: (event: Event) => void;
+  };
+}
+
+export const AlertBanner: FunctionComponent<AlertBannerProps> = ({
+  className,
+  variant,
+  icon,
+  message,
+  onDismiss,
+  action,
+  ...props
+}) => {
+  const translations = useText({
+    dismiss: 'Dropin.InlineAlert.dismissLabel',
+  });
+
+  return (
+    <div
+      {...props}
+      className={classes([
+        className,
+        'dropin-alert-banner',
+        `dropin-alert-banner--${variant}`,
+      ])}
+    >
+      <div className={'dropin-alert-banner__content'}>
+        {icon && (
+          <VComponent
+            node={icon}
+            aria-hidden="true"
+            className={'dropin-alert-banner__icon'}
+          />
+        )}
+
+        {/* Message */}
+        <VComponent
+          node={message}
+          className={classes(['dropin-alert-banner__message'])}
+        />
+      </div>
+
+      <div className={'dropin-alert-banner__actions'}>
+        {action && (
+          <Button
+            variant="tertiary"
+            className={'dropin-alert-banner__action'}
+            onClick={action.onClick}
+            aria-label={action.label}
+          >
+            {action.label}
+          </Button>
+        )}
+
+        <Button
+          icon={<Icon source={Close} size="24" stroke="2" />}
+          className="dropin-alert-banner__dismiss-button"
+          variant="primary"
+          onClick={onDismiss}
+          aria-label={translations.dismiss}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/AlertBanner/index.ts

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

package/src/components/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,51 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-breadcrumbs__container {
+  display: flex;
+}
+
+.dropin-breadcrumbs__items {
+  display: flex;
+  flex-wrap: wrap;
+  font: var(--type-details-caption-1-font);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.dropin-breadcrumbs__item {
+  display: flex;
+  justify-content: center;
+}
+
+.dropin-breadcrumbs__item--last > :first-child {
+  color: var(--color-brand-500);
+  cursor: default;
+}
+
+.dropin-breadcrumbs__item--last > :first-child:hover,
+.dropin-breadcrumbs__item--last > :first-child:focus-visible {
+  text-decoration: none;
+}
+
+.dropin-breadcrumbs__separator--default {
+  margin: 0 var(--spacing-xsmall);
+}
+
+.dropin-breadcrumbs__separator--icon {
+  width: 16px;
+  height: 16px;
+  margin: 0 var(--spacing-xxsmall);
+}
+
+/* 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/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,186 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  Breadcrumbs as component,
+  BreadcrumbsProps,
+} from '@adobe/elsie/components/Breadcrumbs';
+import { Icon } from '@adobe/elsie/components/Icon';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+import { ChevronRight, Placeholder } from '@adobe/elsie/icons';
+import { expect } from '@storybook/test';
+
+const meta: Meta<BreadcrumbsProps> = {
+  title: 'Components/Breadcrumbs',
+  component,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered', // centered | fullscreen
+  },
+  argTypes: {
+    categories: {
+      description: 'List of categories to display on the Breadcrumbs.',
+      type: { name: 'other', value: 'VNode[]' },
+      control: 'object',
+    },
+    separator: {
+      description: 'Icon used to separate the Breadcrumbs items.',
+      type: { name: 'symbol' },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<BreadcrumbsProps>;
+
+/**
+ * ```ts
+ * import { Breadcrumbs } from '@adobe/elsie/components/Breadcrumbs';
+ * ```
+ */
+
+export const Breadcrumbs: Story = {
+  args: {
+    categories: [
+      <a href="#" key="1">
+        One
+      </a>,
+      <a href="/two" key="2">
+        Two
+      </a>,
+      <a key="3">Three</a>,
+    ],
+  },
+  play: async () => {
+    const breadcrumbsElement = document.querySelector(
+      '.dropin-breadcrumbs__container'
+    ) as HTMLElement;
+    const categories = breadcrumbsElement.querySelectorAll(
+      '.dropin-breadcrumbs__item a'
+    );
+
+    await expect(breadcrumbsElement).toBeVisible();
+    await expect(categories[0]).toHaveTextContent('One');
+    await expect(categories[1]).toHaveAttribute('href', '/two');
+  },
+};
+
+export const BreadcrumbsWithLeadingIcon: Story = {
+  args: {
+    categories: [
+      <Icon
+        key={0}
+        source={Placeholder}
+        size="16"
+        className="storybook_icon"
+        stroke="1"
+        viewBox="0 0 24 24"
+        aria-label="One"
+        style={{ cursor: 'pointer' }}
+        onClick={() => console.log('Go to Homepage')}
+      />,
+      <a href="/two" key="2">
+        Two
+      </a>,
+      <a key="3">Three</a>,
+    ],
+  },
+  play: async () => {
+    const breadcrumbsElement = document.querySelector(
+      '.dropin-breadcrumbs__container'
+    ) as HTMLElement;
+    const icon = breadcrumbsElement.querySelector(
+      '.dropin-breadcrumbs__item svg'
+    ) as HTMLElement;
+    const categories = breadcrumbsElement.querySelectorAll(
+      '.dropin-breadcrumbs__item a'
+    );
+
+    await expect(breadcrumbsElement).toBeVisible();
+    await expect(icon).toBeVisible();
+    await expect(categories[0]).toHaveAttribute('href', '/two');
+    await expect(categories[1]).toHaveTextContent('Three');
+  },
+};
+
+export const BreadcrumbsWithSeparator: Story = {
+  args: {
+    ...Breadcrumbs.args,
+    separator: (
+      <Icon
+        source={ChevronRight}
+        size="16"
+        className="storybook_icon"
+        stroke="1"
+        viewBox="0 0 24 24"
+      />
+    ),
+  },
+  play: async () => {
+    const breadcrumbsElement = document.querySelector(
+      '.dropin-breadcrumbs__container'
+    ) as HTMLElement;
+    const separators = breadcrumbsElement.querySelectorAll(
+      '.dropin-breadcrumbs__separator--icon'
+    );
+
+    await expect(breadcrumbsElement).toBeVisible();
+    await expect(separators).toHaveLength(2);
+    await expect(separators[0]).toBeVisible();
+    await expect(separators[1]).toBeVisible();
+  },
+};
+
+export const BreadcrumbsWithIcons: Story = {
+  args: {
+    categories: [
+      <Icon
+        key={0}
+        source={Placeholder}
+        size="16"
+        className="storybook_icon"
+        stroke="1"
+        viewBox="0 0 24 24"
+        aria-label="One"
+        style={{ cursor: 'pointer' }}
+        onClick={() => console.log('Go to Homepage')}
+      />,
+      <a href="/two" key="2">
+        Two
+      </a>,
+      <a key="3">Three</a>,
+    ],
+    separator: (
+      <Icon
+        source={ChevronRight}
+        size="16"
+        className="storybook_icon"
+        stroke="1"
+        viewBox="0 0 24 24"
+      />
+    ),
+  },
+  play: async () => {
+    const breadcrumbsElement = document.querySelector(
+      '.dropin-breadcrumbs__container'
+    ) as HTMLElement;
+    const icon = breadcrumbsElement.querySelector(
+      '.dropin-breadcrumbs__item svg'
+    ) as HTMLElement;
+    const categories = breadcrumbsElement.querySelectorAll(
+      '.dropin-breadcrumbs__item a'
+    );
+    const separators = breadcrumbsElement.querySelectorAll(
+      '.dropin-breadcrumbs__separator--icon'
+    );
+
+    await expect(breadcrumbsElement).toBeVisible();
+    await expect(icon).toBeVisible();
+    await expect(categories[0]).toHaveAttribute('href', '/two');
+    await expect(separators).toHaveLength(2);
+    await expect(separators[1]).toBeVisible();
+  },
+};

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,62 @@
+import { HTMLAttributes } from 'preact/compat';
+import { FunctionComponent, VNode } from 'preact';
+import { VComponent, classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Breadcrumbs/Breadcrumbs.css';
+
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+  categories: VNode[];
+  separator?: VNode<HTMLAttributes<SVGSVGElement>>;
+}
+
+export const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({
+  className,
+  categories,
+  separator,
+  ...props
+}) => {
+  return (
+    <>
+      {categories?.length > 1 && (
+        <nav
+          role="navigation"
+          {...props}
+          className={classes(['dropin-breadcrumbs__container', className])}
+        >
+          <ul className="dropin-breadcrumbs__items">
+            {categories?.map((category: VNode, index: number) => {
+              return (
+                <li
+                  key={index}
+                  className={classes([
+                    'dropin-breadcrumbs__item',
+                    [
+                      'dropin-breadcrumbs__item--last',
+                      index === categories.length - 1,
+                    ],
+                  ])}
+                >
+                  <VComponent
+                    node={category}
+                    className="dropin-breadcrumbs__link"
+                  />
+                  {!separator && index !== categories.length - 1 && (
+                    <span className="dropin-breadcrumbs__separator--default">
+                      {' '}
+                      /{' '}
+                    </span>
+                  )}
+                  {separator && index !== categories.length - 1 && (
+                    <VComponent
+                      node={separator}
+                      className="dropin-breadcrumbs__separator--icon"
+                    />
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      )}
+    </>
+  );
+};

package/src/components/Breadcrumbs/index.ts

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