@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,195 @@
+/********************************************************************
+ *  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 {
+  Breadcrumbs as component,
+  BreadcrumbsProps,
+} from '@adobe-commerce/elsie/components/Breadcrumbs';
+import { Icon } from '@adobe-commerce/elsie/components/Icon';
+import { IconsList } from '@adobe-commerce/elsie/components/Icon/Icon.stories.helpers';
+import { ChevronRight, Placeholder } from '@adobe-commerce/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-commerce/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,71 @@
+/********************************************************************
+ *  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 { HTMLAttributes } from 'preact/compat';
+import { FunctionComponent, VNode } from 'preact';
+import { VComponent, classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/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,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/Breadcrumbs/Breadcrumbs';
+export { Breadcrumbs as default } from '@adobe-commerce/elsie/components/Breadcrumbs/Breadcrumbs';

package/src/components/Button/Button.css

@@ -0,0 +1,213 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+/* 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-commerce/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-commerce/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>