@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/ActionButtonGroup/ActionButtonGroup.tsx

@@ -0,0 +1,91 @@
+/********************************************************************
+ *  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, cloneElement } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/ActionButtonGroup/ActionButtonGroup.css';
+import { useCallback, useState } from 'preact/hooks';
+import { Children } from 'react';
+import { ActionButtonProps } from '@adobe-commerce/elsie/components/ActionButton';
+
+export interface ActionButtonGroupOption {
+  value: string | null;
+  text: string;
+  icon?: VNode<SVGElement>;
+  disabled?: boolean;
+}
+
+export interface ActionButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'primary' | 'secondary';
+  activeOption?: string;
+  disabled?: boolean;
+  dividers?: boolean;
+  children: VNode<ActionButtonProps>[] | VNode<ActionButtonProps>;
+  handleSelect?(value: string): void;
+}
+
+export const ActionButtonGroup: FunctionComponent<ActionButtonGroupProps> = ({
+  className,
+  variant = 'primary',
+  activeOption,
+  disabled = false,
+  dividers = true,
+  children,
+  handleSelect,
+  ...props
+}) => {
+  const [activeOptionState, setActiveOptionState] = useState(activeOption);
+
+  const handleClick = useCallback(
+    (option: any) => {
+      const isOptionDisabled = disabled || option.props.disabled;
+      if (!isOptionDisabled) {
+        setActiveOptionState(option.props.value);
+        if (handleSelect) {
+          handleSelect(option.props.value);
+        }
+      }
+    },
+    [handleSelect, setActiveOptionState, disabled]
+  );
+
+  const buttonGroupOptions = Children.map(
+    children,
+    (child: VNode<ActionButtonProps>) => {
+      const isOptionDisabled = disabled || child.props.disabled;
+      const isOptionActive = child.props.value === activeOptionState;
+      return cloneElement(child, {
+        disabled: isOptionDisabled,
+        active: isOptionActive,
+        onClick: () => handleClick(child),
+        className: classes([
+          'dropin-action-button-group__option',
+          `dropin-action-button-group__option--${variant}`,
+          ['dropin-action-button-group__option--active', isOptionActive],
+          ['dropin-action-button-group__option--with-dividers', dividers],
+        ]),
+      });
+    }
+  );
+
+  return (
+    <div
+      role="group"
+      {...props}
+      className={classes([
+        'dropin-action-button-group',
+        `dropin-action-button-group--${variant}`,
+        className,
+      ])}
+    >
+      {buttonGroupOptions}
+    </div>
+  );
+};

package/src/components/ActionButtonGroup/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/ActionButtonGroup/ActionButtonGroup';

package/src/components/AlertBanner/AlertBanner.css

@@ -0,0 +1,144 @@
+/********************************************************************
+ *  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-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,165 @@
+/********************************************************************
+ *  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 {
+  AlertBanner as component,
+  AlertBannerProps,
+} from '@adobe-commerce/elsie/components/AlertBanner';
+import { action } from '@storybook/addon-actions';
+import { expect } from '@storybook/test';
+import { IconsList } from '@adobe-commerce/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,90 @@
+/********************************************************************
+ *  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 } from 'preact/compat';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/AlertBanner/AlertBanner.css';
+import { Button, Icon } from '@adobe-commerce/elsie/components';
+import { Close } from '@adobe-commerce/elsie/icons';
+import { useText } from '@adobe-commerce/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,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/AlertBanner/AlertBanner';
+export { AlertBanner as default } from '@adobe-commerce/elsie/components/AlertBanner/AlertBanner';

package/src/components/Breadcrumbs/Breadcrumbs.css

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