@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,166 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes, useState, useEffect } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import { Divider, Icon, IconNode } from '@adobe/elsie/components';
+import { Add, Minus } from '@adobe/elsie/icons';
+import { useText } from '@adobe/elsie/i18n';
+import '@adobe/elsie/components/Accordion/Accordion.css';
+export interface AccordionSectionProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
+  defaultOpen?: boolean;
+  actionIconPosition?: 'left' | 'right';
+  iconOpen?: IconNode;
+  iconClose?: IconNode;
+  iconLeft?: IconNode;
+  showIconLeft?: boolean;
+  secondaryText?: string | VNode<HTMLAttributes<HTMLSpanElement>>;
+  renderContentWhenClosed?: boolean;
+  onStateChange?: (open: boolean) => void;
+}
+
+export const AccordionSection: FunctionComponent<AccordionSectionProps> = ({
+  className,
+  children,
+  title,
+  secondaryText,
+  actionIconPosition = 'left',
+  iconOpen = Add,
+  iconClose = Minus,
+  iconLeft = Add,
+  showIconLeft = false,
+  renderContentWhenClosed = true,
+  defaultOpen,
+  onStateChange,
+  ...props
+}) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const onClickHandler = (e: { stopImmediatePropagation: () => void }) => {
+    e.stopImmediatePropagation();
+
+    const next = !open;
+    setOpen(next);
+    onStateChange?.(next);
+  };
+
+  useEffect(() => {
+    if (typeof defaultOpen !== 'undefined') {
+      setOpen(defaultOpen);
+    }
+  }, [defaultOpen]);
+
+  const buttonLabel = useText(
+    `Dropin.Accordion.${open ? 'close' : 'open'}.label`
+  ).label;
+
+  const openIcon = (
+    <Icon
+      source={iconOpen}
+      size="24"
+      onClick={onClickHandler}
+      onKeyPress={onClickHandler}
+      className={'dropin-accordion-section__open-icon'}
+    />
+  );
+
+  const closeIcon = (
+    <Icon
+      source={iconClose}
+      size="24"
+      onClick={onClickHandler}
+      onKeyPress={onClickHandler}
+      className={'dropin-accordion-section__close-icon'}
+    />
+  );
+
+  const leftIcon = <Icon source={iconLeft} size="24" />;
+
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-accordion-section', className])}
+    >
+      <div className={'dropin-accordion-section__heading'}>
+        <div
+          className={'dropin-accordion-section__flex'}
+          onClick={onClickHandler}
+          onKeyPress={onClickHandler}
+          role="button"
+          aria-label={`${buttonLabel} ${title}`}
+          tabIndex={0}
+        >
+          <div className={'dropin-accordion-section__title-container'}>
+            {actionIconPosition === 'left' && (open ? closeIcon : openIcon)}
+
+            {showIconLeft && leftIcon}
+
+            <h3 className={'dropin-accordion-section__title'}>{title}</h3>
+          </div>
+        </div>
+
+        <div className={'dropin-accordion-section__secondary-text-container'}>
+          {secondaryText && (
+            <h4 className={'dropin-accordion-section__secondary-text'}>
+              {secondaryText}
+            </h4>
+          )}
+
+          {actionIconPosition === 'right' && (open ? closeIcon : openIcon)}
+        </div>
+      </div>
+
+      <div
+        className={'dropin-accordion-section__content-container'}
+        style={{ display: open ? 'grid' : 'none' }}
+      >
+        {(open || (renderContentWhenClosed && !open)) && children}
+      </div>
+    </div>
+  );
+};
+
+export interface AccordionProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
+  actionIconPosition?: 'left' | 'right';
+  iconOpen?: IconNode;
+  iconClose?: IconNode;
+  iconLeft?: IconNode;
+  showIconLeft?: boolean;
+  secondaryText?: string | VNode<HTMLAttributes<HTMLSpanElement>>;
+  children: VNode<AccordionSectionProps>[] | VNode<AccordionSectionProps>;
+}
+
+export const Accordion: FunctionComponent<AccordionProps> = ({
+  className,
+  children,
+  actionIconPosition = 'left',
+  iconOpen = Add,
+  iconClose = Minus,
+  ...props
+}) => {
+  const divider = <Divider variant="secondary" />;
+
+  const renderAccordionSection = (child: VNode<AccordionSectionProps>) => (
+    <>
+      <AccordionSection
+        {...child.props}
+        actionIconPosition={actionIconPosition}
+        iconOpen={iconOpen}
+        iconClose={iconClose}
+      />
+      {divider}
+    </>
+  );
+
+  return (
+    <div {...props} className={classes(['dropin-accordion', className])}>
+      {[
+        divider,
+        ...(
+          (Array.isArray(children)
+            ? children
+            : [children]) as VNode<AccordionSectionProps>[]
+        ).map(renderAccordionSection),
+      ]}
+    </div>
+  );
+};

package/src/components/Accordion/index.ts

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

package/src/components/ActionButton/ActionButton.css

@@ -0,0 +1,91 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-action-button {
+  --bgColor: var(--color-neutral-200);
+  --textColor: var(--color-neutral-800);
+  --borderColor: var(--color-neutral-400);
+  display: inline-flex;
+  box-sizing: border-box;
+  row-gap: var(--spacing-small);
+  white-space: normal;
+  align-items: center;
+  justify-content: center;
+  font: var(--type-body-2-strong-font);
+  padding: 6px var(--spacing-small);
+  background: var(--bgColor);
+  color: var(--textColor);
+  border: var(--shape-border-width-1) solid var(--borderColor);
+  border-radius: var(--shape-border-radius-1);
+  word-wrap: break-word;
+  text-align: left;
+}
+
+.dropin-action-button:hover,
+.dropin-action-button:focus:hover {
+  --textColor: var(--color-neutral-900);
+}
+
+.dropin-action-button:active:focus {
+  --borderColor: var(--color-neutral-500);
+}
+
+.dropin-action-button:focus {
+  outline: none;
+}
+
+.dropin-action-button:focus-visible {
+  --borderColor: var(--color-neutral-800);
+  outline: solid var(--shape-border-width-4) var(--color-neutral-400);
+}
+
+.dropin-action-button--active {
+  --bgColor: var(--color-action-button-active);
+  --borderColor: var(--color-neutral-400);
+  --textColor: var(--color-neutral-900);
+}
+
+.dropin-action-button--active:hover,
+.dropin-action-button--active:focus:hover {
+  --bgColor: var(--color-action-button-active);
+  --textColor: var(--color-neutral-800);
+}
+
+.dropin-action-button--active:active:focus {
+  --bgColor: var(--color-action-button-active);
+  --textColor: var(--color-neutral-700);
+}
+
+.dropin-action-button--disabled,
+.dropin-action-button:disabled,
+.dropin-action-button--disabled:focus-visible {
+  --bgColor: var(--color-neutral-300);
+  --textColor: var(--color-neutral-500);
+  pointer-events: none;
+}
+
+.dropin-action-button:not(:disabled) {
+  cursor: pointer;
+}
+
+.dropin-action-button-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 16px;
+}
+
+.dropin-action-button-icon:first-child:not(:last-child) {
+  margin-right: var(--spacing-xsmall);
+}
+
+/* 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/ActionButton/ActionButton.stories.tsx

@@ -0,0 +1,160 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  ActionButton as component,
+  ActionButtonProps,
+} from '@adobe/elsie/components/ActionButton';
+import { Add } from '@adobe/elsie/icons';
+import { Icon } from '@adobe/elsie/components/Icon';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+import { expect, within } from '@storybook/test';
+
+/**
+ * Use Action Buttons to let users complete actions or select items in a workflow.
+ */
+const meta: Meta<ActionButtonProps> = {
+  title: 'Components/ActionButton',
+  component,
+  argTypes: {
+    icon: {
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ActionButtonProps>;
+
+export const Default: Story = {
+  name: 'Action Button',
+  args: {
+    children: 'Action',
+    active: false,
+    disabled: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('button')).toBeVisible();
+    await expect(await canvas.findByRole('button')).toHaveClass(
+      'dropin-action-button'
+    );
+  },
+};
+
+export const IconOnly: Story = {
+  name: 'Icon Action Button',
+  args: {
+    ...Default.args,
+    children: '',
+    'aria-label': 'Action Button',
+    icon: (
+      <Icon
+        source={Add}
+        size="32"
+        className="storybook_icon"
+        stroke="1"
+        viewBox="0 0 24 24"
+      />
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const buttonIcon = document.querySelector(
+      '.dropin-action-button-icon'
+    ) as HTMLElement;
+    const addIcon = document.querySelector(
+      'g[data-name="Add icon"]'
+    ) as HTMLElement;
+    await expect(await canvas.findByRole('button')).toBeVisible();
+    await expect(await buttonIcon).toBeVisible();
+    await expect(await addIcon).toBeVisible();
+  },
+};
+
+export const WithIcon: Story = {
+  name: 'Action Button With Icon',
+  args: {
+    ...Default.args,
+    icon: (
+      <Icon
+        source={Add}
+        size="32"
+        className="storybook_icon"
+        stroke="1"
+        viewBox="0 0 24 24"
+      />
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const buttonIcon = document.querySelector(
+      '.dropin-action-button-icon'
+    ) as HTMLElement;
+    const addIcon = document.querySelector(
+      'g[data-name="Add icon"]'
+    ) as HTMLElement;
+    await expect(await canvas.findByRole('button')).toBeVisible();
+    await expect(await buttonIcon).toBeVisible();
+    await expect(await addIcon).toBeVisible();
+    await expect(await canvas.getByText('Action')).toBeVisible();
+  },
+};
+
+export const Disabled: Story = {
+  name: 'Disabled Action Button',
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('button')).toBeDisabled();
+  },
+};
+
+export const Active: Story = {
+  name: 'Active Action Button',
+  args: {
+    ...Default.args,
+    active: true,
+  },
+};
+
+export const DisabledIcon: Story = {
+  name: 'Disabled Action Button With Icon',
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    ...WithIcon.args,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('button')).toBeDisabled();
+  },
+};
+
+export const ActiveIcon: Story = {
+  name: 'Active Action Button With Icon',
+  args: {
+    ...WithIcon.args,
+    active: true,
+  },
+};

package/src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,44 @@
+import { ComponentChildren, FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { VComponent, classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ActionButton/ActionButton.css';
+
+export interface ActionButtonProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'icon'> {
+  children?: ComponentChildren;
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+export const ActionButton: FunctionComponent<ActionButtonProps> = ({
+  icon,
+  className,
+  children,
+  active = false,
+  disabled = false,
+  ...props
+}) => {
+  return (
+    <button
+      role="button"
+      disabled={disabled}
+      {...props}
+      className={classes([
+        'dropin-action-button',
+        ['dropin-action-button--active', active],
+        ['dropin-action-button--disabled', disabled],
+        className,
+      ])}
+    >
+      {icon && (
+        <VComponent
+          node={icon}
+          className={classes(['dropin-action-button-icon'])}
+        />
+      )}
+      {children &&
+        (typeof children === 'string' ? <span>{children}</span> : children)}
+    </button>
+  );
+};

package/src/components/ActionButton/index.ts

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

package/src/components/ActionButtonGroup/ActionButtonGroup.css

@@ -0,0 +1,68 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-action-button-group {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--shape-border-radius-1);
+  border: var(--shape-border-width-1) solid var(--color-neutral-400);
+}
+
+.dropin-action-button-group__option {
+  border: none;
+  border-radius: 0;
+  align-self: stretch;
+  --borderRadiusValue: calc(
+    var(--shape-border-radius-1) - var(--shape-border-width-1)
+  );
+}
+
+.dropin-action-button-group__option:first-child {
+  border-radius: var(--borderRadiusValue) 0 0 var(--borderRadiusValue);
+}
+
+.dropin-action-button-group__option:last-child {
+  border-radius: 0 var(--borderRadiusValue) var(--borderRadiusValue) 0;
+}
+
+.dropin-action-button-group__option:only-child {
+  border-radius: var(--borderRadiusValue);
+}
+
+.dropin-action-button-group__option--with-dividers {
+  border-right: var(--shape-border-width-1) solid var(--color-neutral-400);
+}
+
+.dropin-action-button-group__option--with-dividers:last-child {
+  border-right: none;
+}
+
+.dropin-action-button-group__option--active:not(:disabled) {
+  background: var(--color-neutral-50);
+}
+
+.dropin-action-button-group--secondary {
+  border: none;
+}
+
+.dropin-action-button-group__option--secondary {
+  background: var(--color-neutral-100);
+}
+
+.dropin-action-button-group__option:focus-visible {
+  outline: solid var(--shape-border-width-4) var(--color-neutral-400);
+  border-radius: var(--shape-border-radius-1);
+  z-index: 1;
+}
+
+/* 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/ActionButtonGroup/ActionButtonGroup.stories.tsx

@@ -0,0 +1,88 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { ActionButton } from '..';
+import {
+  ActionButtonGroup as component,
+  ActionButtonGroupProps,
+} from '@adobe/elsie/components/ActionButtonGroup';
+import { Cart, Heart, Star } from '@adobe/elsie/icons';
+import { Icon } from '../Icon';
+
+/**
+ * Use Action Button Groups to group related actions.
+ */
+const meta: Meta<ActionButtonGroupProps> = {
+  title: 'Components/ActionButtonGroup',
+  component,
+  argTypes: {
+    variant: {
+      description: 'Action Button Group variant',
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+    disabled: {
+      description: 'Whether or not the field is disabled',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+    },
+    dividers: {
+      description: 'Whether or not to show dividers between options',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+    },
+    handleSelect: {
+      description: 'Callback function for when an option is selected',
+      type: 'function',
+      defaultValue: {
+        summary: '() => {}',
+      },
+      action: 'Value Selected',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ActionButtonGroupProps>;
+
+/**
+ * ```ts
+ * import { ActionButtonGroup } from '@adobe/elsie/components/ActionButtonGroup';
+ * ```
+ */
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: [
+      <ActionButton key="option1" value="option1">
+        Option1
+      </ActionButton>,
+      <ActionButton key="option2" value="option2">
+        Option2
+      </ActionButton>,
+    ],
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    activeOption: 'option2',
+    children: [
+      <ActionButton
+        key="option1"
+        value="option1"
+        icon={<Icon source={Heart} />}
+      >
+        Option1
+      </ActionButton>,
+      <ActionButton key="option2" value="option2" icon={<Icon source={Star} />}>
+        Option2
+      </ActionButton>,
+      <ActionButton key="option3" value="option3" icon={<Icon source={Cart} />}>
+        Option3
+      </ActionButton>,
+    ],
+  },
+};

package/src/components/ActionButtonGroup/ActionButtonGroup.tsx

@@ -0,0 +1,82 @@
+import { FunctionComponent, VNode, cloneElement } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ActionButtonGroup/ActionButtonGroup.css';
+import { useCallback, useState } from 'preact/hooks';
+import { Children } from 'react';
+import { ActionButtonProps } from '@adobe/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>
+  );
+};