@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,398 @@
+/********************************************************************
+ *  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 {
+  Button as component,
+  ButtonProps,
+} from '@adobe-commerce/elsie/components/Button';
+import { Cart, Check, Search, SearchFilled } from '@adobe-commerce/elsie/icons';
+import { Icon } from '@adobe-commerce/elsie/components/Icon';
+import { IconsList } from '@adobe-commerce/elsie/components/Icon/Icon.stories.helpers';
+import { expect, within } from '@storybook/test';
+import { action } from '@storybook/addon-actions';
+
+/**
+ * Use Buttons to highlight or guide user actions.
+ */
+const meta: Meta<ButtonProps> = {
+  title: 'Components/Button',
+  component,
+  argTypes: {
+    value: {
+      description: 'Add string to pass to the clickHandler.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    children: {
+      description: 'Add text to the button.',
+      table: {
+        type: { summary: 'ComponentChildren' },
+      },
+      control: 'text',
+    },
+    variant: {
+      description: 'Change the button style.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'primary' },
+      },
+      options: ['primary', 'secondary', 'tertiary'],
+      control: 'radio',
+    },
+    size: {
+      description: 'Change the button size.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'medium' },
+      },
+      options: ['medium', 'large'],
+      control: 'radio',
+    },
+    icon: {
+      description: 'Add Icon component to the button.',
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: 'select',
+    },
+    disabled: {
+      description: 'Disable the button.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      control: { type: 'boolean' },
+    },
+    active: {
+      description: 'Activate the button.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      control: { type: 'boolean' },
+    },
+    activeChildren: {
+      description: 'Replace value of children prop when button is active.',
+      table: {
+        type: { summary: 'ComponentChildren' },
+      },
+      control: 'text',
+    },
+    activeIcon: {
+      description: 'Replace value of icon prop when when button is active.',
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: 'select',
+    },
+    onClick: {
+      description: 'Add a click handler.',
+      table: {
+        type: { summary: 'function' },
+      },
+      action: 'onClick',
+    },
+    href: {
+      description: 'Set this value to render the component as a link',
+      table: {
+        type: { summary: 'string' },
+      },
+      control: 'text',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<ButtonProps>;
+
+/**
+ * ```tsx
+ * <Button
+ *  active={false}
+ *  activeChildren="Active"
+ *  activeIcon={<Icon source={Check} size="24" />}
+ *  children="Button"
+ *  disabled={false}
+ *  icon={<Icon source={Cart} size="24" />}
+ *  onClick={handleAddToCart}
+ *  size="medium"
+ *  value={undefined}
+ *  variant="primary"
+ * />
+ * ```
+ */
+export const Button: Story = {
+  tags: ['isHidden'], // Hide from direct access/navigation
+  args: {
+    active: false,
+    activeChildren: 'Active',
+    activeIcon: <Icon source={Check} size="24" />,
+    children: 'Button',
+    disabled: false,
+    icon: <Icon source={Cart} size="24" />,
+    onClick: action('onClick'),
+    size: 'medium',
+    value: undefined,
+    variant: 'primary',
+  },
+};
+
+/**
+ * ```tsx
+ * <Button>Button</Button>
+ * ```
+ * ```tsx
+ * <Button children="Button" />
+ * ```
+ */
+export const Children: Story = {
+  tags: ['isHidden'],
+  args: {
+    children: 'Button',
+  },
+};
+
+/**
+ * ```tsx
+ * <Button variant="primary">Primary</Button>
+ * ```
+ */
+export const Primary: Story = {
+  args: {
+    ...Button.args,
+    activeIcon: undefined,
+    icon: undefined,
+    children: 'Primary',
+    variant: 'primary',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('button')).toBeVisible();
+  },
+};
+
+/**
+ * ```tsx
+ * <Button variant='secondary'>Secondary</Button>
+ * ```
+ */
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    children: 'Secondary',
+    variant: 'secondary',
+  },
+};
+
+/**
+ * ```tsx
+ * <Button variant='tertiary'>Tertiary</Button>
+ * ```
+ */
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    children: 'Tertiary',
+    variant: 'tertiary',
+  },
+};
+
+/**
+ * ```tsx
+ * <Button size='large'>Large</Button>
+ * ```
+ */
+export const LargeSize: Story = {
+  args: {
+    ...Primary.args,
+    children: 'Large',
+    size: 'large',
+    value: '123',
+  },
+};
+
+/**
+ * ```tsx
+ * <Button size='medium'>Medium</Button>
+ * ```
+ */
+export const MediumSize: Story = {
+  args: {
+    ...Primary.args,
+    children: 'Medium',
+    size: 'medium',
+  },
+};
+
+/**
+ * ```tsx
+ * <Button
+ *  icon={<Icon
+ *    source={Cart}
+ *    size="24"
+ *    stroke="2"
+ *    viewBox="0 0 24 24"
+ *    aria-label="Search" />}
+ * />
+ * ```
+ */
+export const IconOnly: Story = {
+  args: {
+    ...Primary.args,
+    children: undefined,
+    icon: (
+      <Icon
+        source={Search}
+        size="24"
+        stroke="2"
+        viewBox="0 0 24 24"
+        aria-label="Search"
+      />
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const searchIcon = document.querySelector(
+      'g[data-name="Search icon"]'
+    ) as HTMLElement;
+    await expect(await canvas.findByRole('button')).toBeVisible();
+    await expect(searchIcon).toBeVisible();
+  },
+};
+
+/**
+ * ```tsx
+ * <Button
+ *  icon={<Icon
+ *    source={Cart}
+ *    size="24"
+ *    stroke="2"
+ *    viewBox="0 0 24 24"
+ *    aria-label="Search" />}
+ * >
+ *  Search
+ * </Button>
+ * ```
+ */
+export const TextAndIcon: Story = {
+  args: {
+    ...IconOnly.args,
+    children: 'Search',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const searchIcon = document.querySelector(
+      'g[data-name="Search icon"]'
+    ) as HTMLElement;
+    await expect(await canvas.findByRole('button')).toBeVisible();
+    await expect(searchIcon).toBeVisible();
+    await expect(canvas.getByText('Search')).toBeVisible();
+  },
+};
+
+/**
+ * ```tsx
+ * <Button disabled>Button</Button>
+ * ```
+ * ```tsx
+ * <Button disabled={true}>Button</Button>
+ * ```
+ * ```tsx
+ * <Button disabled={loop ? false : current < 1}>Button</Button>
+ * ```
+ */
+export const Disabled: Story = {
+  args: {
+    ...Primary.args,
+    children: 'Button',
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('button')).toBeDisabled();
+    await expect(canvas.getByText('Button')).toBeVisible();
+  },
+};
+
+/**
+ * ```tsx
+ * <Button
+ *  active={true}
+ *  activeChildren="Active"
+ *  activeIcon={<Icon source={SearchFilled} />}
+ *  children="Not Active"
+ *  icon={<Icon source={Search} />}
+ * />
+ * ```
+ */
+export const Active: Story = {
+  args: {
+    ...Primary.args,
+    active: true,
+    activeChildren: 'Active',
+    activeIcon: (
+      <Icon source={SearchFilled} size="24" stroke="2" viewBox="0 0 24 24" />
+    ),
+    children: 'Not Active',
+    icon: <Icon source={Search} size="24" stroke="2" viewBox="0 0 24 24" />,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const searchIcon = document.querySelector(
+      '[data-name="Search icon filled"]'
+    ) as HTMLElement;
+    await expect(await canvas.findByRole('button')).toBeVisible();
+    await expect(canvas.getByText('Active')).toBeVisible();
+    await expect(searchIcon).toBeVisible();
+  },
+};
+
+/**
+ * ```tsx
+ * <Button
+ *  active={false}
+ *  activeChildren="Active"
+ *  activeIcon={<Icon source={SearchFilled} />}
+ *  children="Not Active"
+ *  icon={<Icon source={Search} />}
+ * />
+ * ```
+ */
+export const NotActive: Story = {
+  args: {
+    ...Active.args,
+    active: false,
+  },
+};
+
+/**
+ * ```tsx
+ * <Button href="https://google.com">Link</Button>
+ * ```
+ */
+export const AsLink: Story = {
+  args: {
+    ...Primary.args,
+    href: 'https://google.com',
+    children: 'Link',
+    icon: undefined,
+    onClick: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('link')).toBeVisible();
+    await expect(canvas.getByText('Link')).toBeVisible();
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,121 @@
+/********************************************************************
+ *  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 { ComponentChildren, FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { VComponent, classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/Button/Button.css';
+
+export interface ButtonProps
+  extends Omit<
+    HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
+    'size' | 'icon'
+  > {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  size?: 'medium' | 'large';
+  children?: ComponentChildren;
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  disabled?: boolean;
+  active?: boolean;
+  activeChildren?: ComponentChildren;
+  activeIcon?: VNode<HTMLAttributes<SVGSVGElement>>;
+}
+
+export const Button: FunctionComponent<ButtonProps> = ({
+  value,
+  variant = 'primary',
+  size = 'medium',
+  icon,
+  className,
+  children,
+  disabled = false,
+  active = false,
+  activeChildren,
+  activeIcon,
+  href,
+  ...props
+}) => {
+  let buttonType = 'dropin-button';
+
+  if (
+    (icon && !children) ||
+    (icon && active && !activeChildren) ||
+    (!icon && active && activeIcon)
+  ) {
+    buttonType = 'dropin-iconButton';
+  }
+
+  if (active && activeChildren) {
+    buttonType = 'dropin-button';
+  }
+
+  className = classes([
+    buttonType,
+    `${buttonType}--${size}`,
+    `${buttonType}--${variant}`,
+    [`${buttonType}--${variant}--disabled`, disabled],
+    children && icon && `${buttonType}--with-icon`,
+    !children && activeChildren && icon && `${buttonType}--with-icon`,
+    active && activeIcon && `${buttonType}--with-icon`,
+    className,
+  ]);
+
+  const iconClassName = classes([
+    'dropin-button-icon',
+    `dropin-button-icon--${variant}`,
+    [`dropin-button-icon--${variant}--disabled`, disabled],
+    icon?.props.className,
+  ]);
+
+  const attributes = href
+    ? {
+        node: <a />,
+        role: 'link',
+        href,
+        ...props,
+        disabled,
+        active,
+        onKeyDown: (event: KeyboardEvent) => {
+          if (disabled) {
+            event.preventDefault();
+          }
+        },
+        tabIndex: disabled ? -1 : 0,
+      }
+    : {
+        node: <button />,
+        role: 'button',
+        ...props,
+        value,
+        disabled,
+        active,
+      };
+
+  return (
+    <VComponent {...attributes} className={className}>
+      {icon && !active && <VComponent node={icon} className={iconClassName} />}
+
+      {activeIcon && active && (
+        <VComponent node={activeIcon} className={iconClassName} />
+      )}
+
+      {children &&
+        !active &&
+        (typeof children === 'string' ? <span>{children}</span> : children)}
+
+      {active &&
+        activeChildren &&
+        (typeof activeChildren === 'string' ? (
+          <span>{activeChildren}</span>
+        ) : (
+          activeChildren
+        ))}
+    </VComponent>
+  );
+};

package/src/components/Button/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/Button/Button';
+export { Button as default } from '@adobe-commerce/elsie/components/Button/Button';

package/src/components/Card/Card.css

@@ -0,0 +1,34 @@
+/********************************************************************
+ *  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-card {
+  --bgColor: var(--color-neutral-200);
+  background-color: var(--bgColor);
+  border-width: 0;
+  border-radius: var(--shape-border-radius-2);
+}
+
+.dropin-card--secondary {
+  --bgColor: var(--color-neutral-50);
+  border-width: var(--shape-border-width-2);
+  border-style: solid;
+  border-color: var(--color-neutral-400);
+}
+
+.dropin-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-medium);
+  padding-top: var(--spacing-medium);
+  padding-right: var(--spacing-medium);
+  padding-bottom: var(--spacing-medium);
+  padding-left: var(--spacing-medium);
+}

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,76 @@
+/********************************************************************
+ *  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 { Card, CardProps } from '@adobe-commerce/elsie/components/Card';
+import { expect, within } from '@storybook/test';
+
+/**
+ * Use Cards to group content into a single container.
+ */
+
+const meta: Meta<CardProps> = {
+  title: 'Components/Card',
+  component: Card,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+    children: {
+      description: 'The content of the Card.',
+      control: false,
+      type: { name: 'other', value: 'VNode[]' },
+    }
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<CardProps>;
+
+/**
+ * ```ts
+ * import { Card } from '@adobe-commerce/elsie/components/Card';
+ * ```
+ */
+
+export const Primary: Story = {
+  name: 'Primary Card',
+  args: {
+    variant: 'primary',
+  },
+  render: ({ variant }) => (
+    <Card variant={variant}>
+      <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>Title</h2>
+      <p style={{ font: 'var(--type-body-2-default-font)' }}>
+        This is a short description of the item and should be kept to two or
+        three lines as maximum.
+      </p>
+    </Card>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.getByText('Title')).toBeVisible();
+    await expect(
+      await canvas.getByText(
+        'This is a short description of the item and should be kept to two or three lines as maximum.'
+      )
+    ).toBeVisible();
+  },
+};
+
+export const Secondary: Story = {
+  name: 'Secondary Card',
+  args: {
+    variant: 'secondary',
+  },
+  render: Primary.render,
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,34 @@
+/********************************************************************
+ *  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 { ComponentChildren, FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/Card/Card.css';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'primary' | 'secondary';
+  children: ComponentChildren | ComponentChildren[];
+}
+
+export const Card: FunctionComponent<CardProps> = ({
+  variant = 'primary',
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-card', `dropin-card--${variant}`, className])}
+    >
+      <div class="dropin-card__content">{children}</div>
+    </div>
+  );
+};

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