@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Button/Button.css

@@ -0,0 +1,204 @@
+/* Common button styles */
+.dropin-button,
+.dropin-iconButton {
+  border: 0 none;
+  cursor: pointer;
+  white-space: normal;
+}
+
+.dropin-button {
+  border-radius: var(--shape-border-radius-3);
+  font-size: var(--type-button-1-font);
+  font-weight: var(--type-button-1-font);
+  padding: var(--spacing-xsmall) var(--spacing-medium);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: left;
+  word-wrap: break-word;
+}
+
+.dropin-iconButton {
+  height: var(--spacing-xbig);
+  width: var(--spacing-xbig);
+  padding: var(--spacing-xsmall);
+}
+
+.dropin-button:disabled,
+.dropin-iconButton:disabled {
+  pointer-events: none;
+  user-select: none;
+}
+
+.dropin-button:not(:disabled),
+.dropin-iconButton:not(:disabled) {
+  cursor: pointer;
+}
+
+.dropin-button:focus,
+.dropin-iconButton:focus {
+  outline: none;
+}
+
+.dropin-button:focus-visible,
+.dropin-iconButton:focus-visible {
+  outline: var(--spacing-xxsmall) solid var(--color-button-focus);
+}
+
+/* Primary */
+.dropin-button--primary,
+a.dropin-button--primary,
+.dropin-iconButton--primary {
+  border: none;
+  background: var(--color-brand-500) 0 0% no-repeat padding-box;
+  color: var(--color-neutral-50);
+  text-align: left;
+  margin-right: 0;
+}
+
+.dropin-iconButton--primary {
+  border-radius: var(--spacing-xbig);
+  min-height: var(--spacing-xbig);
+  min-width: var(--spacing-xbig);
+  padding: var(--spacing-xsmall);
+}
+
+.dropin-button--primary--disabled,
+a.dropin-button--primary--disabled,
+.dropin-iconButton--primary--disabled {
+  background: var(--color-neutral-300) 0 0% no-repeat padding-box;
+  color: var(--color-neutral-500);
+  fill: var(--color-neutral-300);
+  pointer-events: none;
+  user-select: none;
+}
+
+.dropin-button--primary:hover,
+a.dropin-button--primary:hover,
+.dropin-iconButton--primary:hover,
+.dropin-button--primary:focus:hover,
+.dropin-iconButton--primary:focus:hover {
+  background-color: var(--color-button-hover);
+  text-decoration: none;
+}
+
+.dropin-button--primary:focus,
+.dropin-iconButton--primary:focus {
+  background-color: var(--color-brand-500);
+}
+
+.dropin-button--primary:hover:active,
+.dropin-iconButton--primary:hover:active {
+  background-color: var(--color-button-active);
+}
+
+/* Secondary */
+.dropin-button--secondary,
+a.dropin-button--secondary,
+.dropin-iconButton--secondary {
+  border: var(--shape-border-width-2) solid var(--color-brand-500);
+  background: none 0 0% no-repeat padding-box;
+  color: var(--color-brand-500);
+  padding-top: calc(var(--spacing-xsmall) - var(--shape-border-width-2));
+  padding-left: calc(var(--spacing-medium) - var(--shape-border-width-2));
+}
+
+.dropin-iconButton--secondary {
+  border-radius: var(--spacing-xbig);
+  min-height: var(--spacing-xbig);
+  min-width: var(--spacing-xbig);
+  padding: var(--spacing-xsmall);
+  padding-top: calc(var(--spacing-xsmall) - var(--shape-border-width-2));
+  padding-left: calc(var(--spacing-xsmall) - var(--shape-border-width-2));
+}
+
+.dropin-button--secondary--disabled,
+a.dropin-button--secondary--disabled,
+.dropin-iconButton--secondary--disabled {
+  border: var(--shape-border-width-2) solid var(--color-neutral-300);
+  background: none 0 0% no-repeat padding-box;
+  color: var(--color-neutral-500);
+  fill: var(--color-neutral-300);
+  pointer-events: none;
+  user-select: none;
+}
+
+.dropin-button--secondary:hover,
+a.dropin-button--secondary:hover,
+.dropin-iconButton--secondary:hover {
+  border: var(--shape-border-width-2) solid var(--color-button-hover);
+  color: var(--color-button-hover);
+  text-decoration: none;
+}
+
+.dropin-button--secondary:active,
+.dropin-iconButton--secondary:active {
+  border: var(--shape-border-width-2) solid var(--color-button-active);
+  color: var(--color-button-active);
+}
+
+/* Tertiary */
+.dropin-button--tertiary,
+a.dropin-button--tertiary,
+.dropin-iconButton--tertiary {
+  border: none;
+  background: none 0 0% no-repeat padding-box;
+  color: var(--color-brand-500);
+}
+
+.dropin-iconButton--tertiary {
+  border: none;
+  border-radius: var(--spacing-xbig);
+  min-height: var(--spacing-xbig);
+  min-width: var(--spacing-xbig);
+  padding: var(--spacing-xsmall);
+}
+
+.dropin-button--tertiary--disabled,
+a.dropin-button--tertiary--disabled,
+.dropin-iconButton--tertiary--disabled {
+  border: none;
+  color: var(--color-neutral-500);
+  pointer-events: none;
+  user-select: none;
+}
+
+.dropin-button--tertiary:hover,
+a.dropin-button--tertiary:hover,
+.dropin-iconButton--tertiary:hover {
+  color: var(--color-button-hover);
+  text-decoration: none;
+}
+
+.dropin-button--tertiary:active,
+.dropin-iconButton--tertiary:active {
+  color: var(--color-button-active);
+}
+
+.dropin-button--tertiary:focus-visible,
+.dropin-iconButton--tertiary:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 2px var(--color-neutral-800);
+  -moz-box-shadow: inset 0 0 0 2px var(--color-neutral-800);
+  box-shadow: inset 0 0 0 2px var(--color-neutral-800);
+}
+
+/* Button Sizes */
+.dropin-button--large {
+  font: var(--type-button-1-font);
+  letter-spacing: var(--type-button-1-letter-spacing);
+}
+
+.dropin-button--medium {
+  font: var(--type-button-2-font);
+  letter-spacing: var(--type-button-2-letter-spacing);
+}
+
+.dropin-button-icon {
+  height: 24px;
+}
+
+/* Button with text and icon */
+.dropin-button--with-icon {
+  column-gap: var(--spacing-xsmall);
+  row-gap: var(--spacing-xsmall);
+}

package/src/components/Button/Button.mdx

@@ -0,0 +1,133 @@
+import {
+  Meta,
+  Unstyled,
+  Controls,
+  Canvas,
+  Story,
+  Description,
+} from '@storybook/blocks';
+import { StoryWrapper } from '@adobe/elsie/config/storybook/components/StoryWrapper';
+import * as ButtonStories from './Button.stories';
+import './Button.css';
+
+<Meta of={ButtonStories} />
+<Unstyled>
+
+# Button
+
+Use Buttons to highlight or guide user actions.
+
+## Usage
+
+```jsx
+import { Button } from '@adobe/elsie/components';
+```
+
+This example uses all the `Button` properties.
+
+<Description of={ButtonStories.Button} />
+
+## All props
+
+The table below shows the name, description, and default value of each `Button` prop. 
+Use the table controls to learn how each property affects the Button.
+
+<Canvas of={ButtonStories.Button} />
+<Controls of={ButtonStories.Button} sort="requiredFirst" />
+
+## Active
+
+Setting `active` to `true` overrides the Button's `icon` and `children` properties with the values you set for the `activeIcon` and `activeChildren` properties. With this one property, you can quickly toggle the Button's icon and text. 
+
+**Note:** Setting the `active` property to `false` (from `true`) returns the button's `children` and `icon` values. It does not disable the button. To disable the button, use the `disabled` property, as described in the [Disabled](#disabled) section below. 
+
+<StoryWrapper>
+  <Story of={ButtonStories.Active} />
+  <Story of={ButtonStories.NotActive} />
+</StoryWrapper>
+
+<Description of={ButtonStories.Active} />
+<Description of={ButtonStories.NotActive} />
+
+## Children
+
+The `children` prop accepts the Preact `ComponentChildren` type. This type is equal to React's `ReactNode` type and can accept any type. But in practice, you should try to limit the `children` prop to a `string`.
+
+To create Icon-only buttons, use the `icon` prop. See the [Icons](#icons) section below for more information.
+
+<StoryWrapper>
+  <Story of={ButtonStories.Children} />
+</StoryWrapper>
+
+<Description of={ButtonStories.Children} />
+
+## Disabled
+
+The `disabled` prop is a `boolean` that disables the button. Default is `false`.
+
+<StoryWrapper>
+  <Story of={ButtonStories.Disabled} />
+</StoryWrapper>
+
+<Description of={ButtonStories.Disabled} />
+
+## Icons
+
+The `icon` prop adds an `Icon` component. You can add an `Icon` with or without Button text.
+
+<StoryWrapper>
+  <Story of={ButtonStories.IconOnly} />
+  <Story of={ButtonStories.TextAndIcon} />
+</StoryWrapper>
+
+<Description of={ButtonStories.IconOnly} />
+<Description of={ButtonStories.TextAndIcon} />
+
+## Sizes
+
+The `size` prop sets the size of the button.
+
+<StoryWrapper>
+  <Story of={ButtonStories.MediumSize} />
+  <Story of={ButtonStories.LargeSize} />
+</StoryWrapper>
+
+<Description of={ButtonStories.MediumSize} />
+<Description of={ButtonStories.LargeSize} />
+
+## Variants
+
+The `variant` prop sets the appearance of the button.
+
+<StoryWrapper>
+  <Story of={ButtonStories.Primary} name="Primary" />
+  <Story of={ButtonStories.Secondary} name="Secondary" />
+  <Story of={ButtonStories.Tertiary} name="Tertiary" />
+</StoryWrapper>
+
+<Description of={ButtonStories.Primary} />
+<Description of={ButtonStories.Secondary} />
+<Description of={ButtonStories.Tertiary} />
+
+### When to use
+
+Use buttons to communicate actions users can take and interact with the page.
+Usually, each page should have only one primary button, and any remaining calls to action should be represented as lower-emphasis buttons.
+
+### When not to use
+
+Do not use the `onClick()` attribute to make buttons act as navigational elements.
+Instead, render the button as a link when the desired action is to take the user to a new page.
+
+### Render as a link
+
+To use a button as a navigation element, set the `href` prop to the target URL.
+This renders the button as an anchor tag (`<a>`) instead of a button tag (`<button>`).
+
+<StoryWrapper>
+  <Story of={ButtonStories.AsLink} />
+</StoryWrapper>
+
+<Description of={ButtonStories.AsLink} />
+
+</Unstyled>

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

@@ -0,0 +1,389 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  Button as component,
+  ButtonProps,
+} from '@adobe/elsie/components/Button';
+import { Cart, Check, Search, SearchFilled } 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';
+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();
+  },
+};