@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,146 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  ToggleButton as component,
+  ToggleButtonProps,
+} from '@adobe/elsie/components/ToggleButton';
+import { Card as CardSVG } from '@adobe/elsie/icons';
+import { Card as CardPNG } from '@adobe/elsie/static/assets/images';
+import { expect, within } from '@storybook/test';
+
+/**
+ * Use ToggleButtons to let users select one option from a set of mutually exclusive choices.
+ */
+const meta: Meta<ToggleButtonProps> = {
+  title: 'Components/ToggleButton',
+  component,
+  argTypes: {
+    icon: {
+      description: 'Icon of the Toggle button',
+    },
+    label: {
+      description: 'Label of the Toggle button',
+      type: {
+        required: true,
+        name: 'string',
+      },
+      control: {
+        type: 'text',
+      },
+    },
+    name: {
+      description: 'Field name (used for mapping the value in a form)',
+      type: {
+        required: true,
+        name: 'string',
+      },
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      description: 'Field value',
+      type: {
+        required: true,
+        name: 'string',
+      },
+      control: {
+        type: 'text',
+      },
+    },
+    selected: {
+      description: 'Whether or not the Toggle button is selected',
+      type: {
+        required: true,
+        name: 'boolean',
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
+    busy: {
+      description: 'Whether or not the Toggle button is in a loading state',
+      type: {
+        name: 'boolean',
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
+    onChange: {
+      description: 'Function to be called when the Toggle button is clicked',
+      type: {
+        name: 'function',
+      },
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ToggleButtonProps>;
+
+export const ToggleButtonStory: Story = {
+  name: 'Toggle Button',
+  args: {
+    label: 'Toggle Button label',
+    name: 'toggle-button-name',
+    value: 'value',
+    selected: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const toggleButton = document.querySelector('.dropin-toggle-button');
+    const toggleButtonInput = await canvas.findByRole('radio');
+    const toggleButtonText = document.querySelector(
+      '.dropin-toggle-button__content'
+    );
+    await expect(toggleButton).toHaveClass('dropin-toggle-button__selected');
+    await expect(toggleButtonText).toHaveTextContent('Toggle Button label');
+    await expect(toggleButtonInput).toBeChecked();
+  },
+};
+
+export const ToggleButtonNotSelected: Story = {
+  name: 'Toggle Button not selected',
+  args: {
+    label: 'Toggle Button label',
+    name: 'toggle-button-name',
+    value: 'value',
+    selected: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const toggleButton = document.querySelector('.dropin-toggle-button');
+    const toggleButtonInput = await canvas.findByRole('radio');
+    const toggleButtonText = await canvas.findByText('Toggle Button label');
+    await expect(toggleButton).not.toHaveClass(
+      'dropin-toggle-button__selected'
+    );
+    await expect(toggleButtonText).toHaveTextContent('Toggle Button label');
+    await expect(toggleButtonInput).not.toBeChecked();
+  },
+};
+
+export const ToggleButtonWithIcon: Story = {
+  name: 'Toggle Button with icon',
+  args: {
+    label: 'Toggle Button label',
+    name: 'toggle-button-name',
+    value: 'value',
+    selected: true,
+    icon: <CardSVG />,
+  },
+};
+
+export const ToggleButtonWithImage: Story = {
+  name: 'Toggle Button with image',
+  args: {
+    label: 'Toggle Button label',
+    name: 'toggle-button-name',
+    value: 'value',
+    selected: true,
+    icon: <img src={CardPNG} alt="alt" />,
+  },
+};

package/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,67 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/ToggleButton/ToggleButton.css';
+import { RadioButton } from '@adobe/elsie/components';
+
+export interface ToggleButtonProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'icon'> {
+  label: string;
+  name: string;
+  value: string;
+  selected?: boolean;
+  onChange?: (value: string) => void;
+  icon?:
+    | VNode<HTMLAttributes<SVGSVGElement>>
+    | VNode<HTMLAttributes<HTMLImageElement>>;
+  busy?: boolean;
+}
+
+export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
+  className,
+  label,
+  name,
+  value,
+  selected = true,
+  onChange,
+  icon,
+  busy = false,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      {...props}
+      className={classes([
+        'dropin-toggle-button',
+        className,
+        ['dropin-toggle-button__selected', selected],
+      ])}
+    >
+      <label className="dropin-toggle-button__actionButton">
+        <RadioButton
+          label=""
+          name={name}
+          value={value}
+          checked={selected}
+          onChange={() => onChange && onChange(value)}
+          aria-label={label}
+          busy={busy}
+          className={classes([className, 'dropin-toggle-button__radioButton'])}
+        />
+
+        <span className="dropin-toggle-button__content">
+          {icon && (
+            // @ts-ignore
+            <icon.type
+              {...icon?.props}
+              className="dropin-toggle-button__icon"
+            />
+          )}
+
+          {label}
+        </span>
+      </label>
+    </div>
+  );
+};

package/src/components/ToggleButton/index.ts

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

package/src/components/UIProvider/UIProvider.css

@@ -0,0 +1,131 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 05 Mar 2024 20:18:40 GMT
+ */
+
+.dropin-design {
+  --color-brand-500: #454545; /* Brand buttons default - AAA */
+  --color-brand-600: #383838; /* Brand buttons on hover - AAA */
+  --color-brand-700: #2b2b2b; /* Brand buttons selected */
+  --color-neutral-50: #ffffff; /* Lightest surface / Text & components On Dark surface - AAA */
+  --color-neutral-100: #fafafa; /* Light surface - AAA */
+  --color-neutral-200: #f5f5f5; /* Light surface - AAA */
+  --color-neutral-300: #e8e8e8; /* Disabled surfaces - AAA */
+  --color-neutral-400: #d6d6d6; /* Ornamental elements (ie. Divider) */
+  --color-neutral-500: #b8b8b8; /* Disabled text */
+  --color-neutral-600: #8f8f8f; /* Component borders (ie. Text field border) - AA Large text */
+  --color-neutral-700: #666666; /* Secondary text - AAA */
+  --color-neutral-800: #3d3d3d; /* Default text - AAA */
+  --color-neutral-900: #292929; /* Default text on hover - AAA */
+  --color-positive-200: #eff5ef; /* Semantic positive surface - AA Large text */
+  --color-positive-500: #7fb078; /* Semantic positive surface */
+  --color-positive-800: #53824c; /* Semantic Positive text - On Light AA */
+  --color-informational-200: #eeeffb; /* Semantic informational surface - AA Large text */
+  --color-informational-500: #6978d9; /* Semantic informational surface */
+  --color-informational-800: #5d6dd6; /* Semantic informational text, Highlights - On Light AA */
+  --color-warning-200: #fdf3e9; /* Semantic warning surface - AA Large text */
+  --color-warning-500: #e79f5c; /* Semantic warning surface */
+  --color-warning-800: #ad5c00; /* Semantic warning text - On Light AA */
+  --color-alert-200: #ffebeb; /* Semantic alert surface - AA Large text */
+  --color-alert-500: #db7070; /* Semantic alert surface */
+  --color-alert-800: #bf4545; /* Semantic alert text - On light AA */
+  --color-opacity-16: rgba(255, 255, 255, 0.16);
+  --color-opacity-24: rgba(255, 255, 255, 0.24);
+  --color-action-button-active: #ffffff; /* Defaults to var(--color-neutral-50) */
+  --color-action-button-hover: #e8e8e8; /* Defaults to var(--color-neutral-300) */
+  --color-button-active: #2b2b2b; /* Defaults to var(--color-brand-700) */
+  --color-button-focus: #d6d6d6; /* Defaults to var(--color-neutral-400) */
+  --color-button-hover: #383838; /* Defaults to var(--color-brand-600) */
+  --grid-1-columns: 4;
+  --grid-1-margins: 0;
+  --grid-1-gutters: 16px;
+  --grid-2-columns: 12;
+  --grid-2-margins: 0;
+  --grid-2-gutters: 16px;
+  --grid-3-columns: 12;
+  --grid-3-margins: 0;
+  --grid-3-gutters: 24px;
+  --grid-4-columns: 12;
+  --grid-4-margins: 0;
+  --grid-4-gutters: 24px;
+  --grid-5-columns: 12;
+  --grid-5-margins: 0;
+  --grid-5-gutters: 24px;
+  --shape-border-radius-1: 3px;
+  --shape-border-radius-2: 8px;
+  --shape-border-radius-3: 24px;
+  --shape-border-width-1: 1px;
+  --shape-border-width-2: 1.5px;
+  --shape-border-width-3: 2px;
+  --shape-border-width-4: 4px;
+  --shape-shadow-1: 0 0 16px 0 rgba(0, 0, 0, 0.16); /* Elevated panels (ie. Page side panel, Mobile bottom bar) */
+  --shape-shadow-2: 0 2px 16px 0 rgba(0, 0, 0, 0.16); /* Elevated dialogs (ie. Modal) */
+  --shape-shadow-3: 0 2px 3px 0 rgba(0, 0, 0, 0.16); /* Elevated container (ie. Card) */
+  --shape-icon-stroke-1: 1px;
+  --shape-icon-stroke-2: 1.5px;
+  --shape-icon-stroke-3: 2px;
+  --shape-icon-stroke-4: 4px;
+  --spacing-xxsmall: 4px;
+  --spacing-xsmall: 8px;
+  --spacing-small: 16px;
+  --spacing-medium: 24px;
+  --spacing-big: 32px;
+  --spacing-xbig: 40px;
+  --spacing-xxbig: 48px;
+  --spacing-large: 64px;
+  --spacing-xlarge: 72px;
+  --spacing-xxlarge: 96px;
+  --spacing-huge: 120px;
+  --spacing-xhuge: 144px;
+  --spacing-xxhuge: 192px;
+  --type-base-font-family: system-ui, sans-serif;
+  --type-display-1-font: normal normal 300 60px/72px
+    var(--type-base-font-family); /* Hero title */
+  --type-display-1-letter-spacing: 0.04em;
+  --type-display-2-font: normal normal 300 48px/56px
+    var(--type-base-font-family); /* Banner title */
+  --type-display-2-letter-spacing: 0.04em;
+  --type-display-3-font: normal normal 300 34px/40px
+    var(--type-base-font-family); /* Desktop & tablet section title */
+  --type-display-3-letter-spacing: 0.04em;
+  --type-headline-1-font: normal normal 400 24px/32px
+    var(--type-base-font-family); /* Desktop & tablet page title */
+  --type-headline-1-letter-spacing: 0.04em;
+  --type-headline-2-default-font: normal normal 300 20px/24px
+    var(--type-base-font-family); /* Rail title */
+  --type-headline-2-default-letter-spacing: 0.04em;
+  --type-headline-2-strong-font: normal normal 400 20px/24px
+    var(--type-base-font-family); /* Mobile page and section title */
+  --type-headline-2-strong-letter-spacing: 0.04em;
+  --type-body-1-default-font: normal normal 300 16px/24px
+    var(--type-base-font-family); /* Normal text paragraph */
+  --type-body-1-default-letter-spacing: 0.04em;
+  --type-body-1-strong-font: normal normal 400 16px/24px
+    var(--type-base-font-family);
+  --type-body-1-strong-letter-spacing: 0.04em;
+  --type-body-1-emphasized-font: normal normal 700 16px/24px
+    var(--type-base-font-family);
+  --type-body-1-emphasized-letter-spacing: 0.04em;
+  --type-body-2-default-font: normal normal 300 14px/20px
+    var(--type-base-font-family);
+  --type-body-2-default-letter-spacing: 0.04em;
+  --type-body-2-strong-font: normal normal 400 14px/20px
+    var(--type-base-font-family);
+  --type-body-2-strong-letter-spacing: 0.04em;
+  --type-body-2-emphasized-font: normal normal 700 14px/20px
+    var(--type-base-font-family);
+  --type-body-2-emphasized-letter-spacing: 0.04em;
+  --type-button-1-font: normal normal 400 20px/26px var(--type-base-font-family); /* Primary button text */
+  --type-button-1-letter-spacing: 0.08em;
+  --type-button-2-font: normal normal 400 16px/24px var(--type-base-font-family); /* Small buttons */
+  --type-button-2-letter-spacing: 0.08em;
+  --type-details-caption-1-font: normal normal 400 12px/16px
+    var(--type-base-font-family);
+  --type-details-caption-1-letter-spacing: 0.08em;
+  --type-details-caption-2-font: normal normal 300 12px/16px
+    var(--type-base-font-family);
+  --type-details-caption-2-letter-spacing: 0.08em;
+  --type-details-overline-font: normal normal 700 12px/20px
+    var(--type-base-font-family);
+  --type-details-overline-letter-spacing: 0.16em;
+}

package/src/components/UIProvider/UIProvider.tsx

@@ -0,0 +1,52 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes, createContext, useMemo } from 'preact/compat';
+import { deepmerge, Render } from '@adobe/elsie/lib';
+import { IntlProvider, getDefinitionByLanguage, Lang } from '@adobe/elsie/i18n';
+
+import '@adobe/elsie/components/UIProvider/UIProvider.css';
+import '@adobe/elsie/components/UIProvider/normalize.css';
+
+export const UIContext = createContext<{
+  locale: string;
+}>({
+  locale: 'en-US',
+});
+
+type LangDefinitions = { [key: string]: any };
+
+export interface UIProviderProps extends HTMLAttributes<HTMLDivElement> {
+  lang?: Lang; // ... list of other supported languages
+  langDefinitions?: LangDefinitions;
+}
+
+export const UIProvider: FunctionComponent<UIProviderProps> = ({
+  lang = 'en_US',
+  langDefinitions = {},
+  children,
+}) => {
+  const definitions = useMemo(() => {
+    // Merge default definition with selected definition
+    const selectedDefinitions: LangDefinitions = deepmerge(
+      langDefinitions.default,
+      langDefinitions[lang] ?? {}
+    );
+
+    // Merge SDK default definitions with custom definitions
+    return deepmerge(
+      getDefinitionByLanguage(lang), // SDK default definitions
+      selectedDefinitions // Custom definitions
+    );
+  }, [lang, langDefinitions]);
+
+  const locale = lang.replace('_', '-');
+
+  return (
+    <UIContext.Provider value={{ locale }}>
+      <IntlProvider definition={definitions}>
+        <>{children}</>
+      </IntlProvider>
+    </UIContext.Provider>
+  );
+};
+
+export const provider = new Render(<UIProvider />);

package/src/components/UIProvider/debugger.css

@@ -0,0 +1,38 @@
+.dropin-debugger--show-slots [data-slot-key] {
+  outline: 1px dashed var(--color-neutral-600);
+  border-radius: 4px;
+}
+
+.dropin-debugger--show-slots [data-slot-key]::before {
+  content: attr(data-slot-key);
+  font: var(--type-details-caption-1-font);
+  color: var(--color-informational-800);
+  background-color: var(--color-informational-200);
+  font-size: 0.75rem;
+  border-radius: 4px 4px 0 0;
+  padding: 0.2rem 0.4rem;
+  font-weight: 600;
+  position: absolute;
+  z-index: 2;
+}
+
+.dropin-debugger--show-slots [data-slot] {
+  outline: 2px dashed var(--color-informational-800);
+  outline-offset: 3px;
+  border-radius: 4px;
+  min-height: 2rem;
+}
+
+.dropin-debugger--show-slots [data-slot]::before {
+  font: var(--type-details-caption-1-font);
+  content: attr(data-slot);
+  color: var(--color-informational-200);
+  background-color: var(--color-informational-800);
+  font-size: 0.75rem;
+  border-radius: 4px 4px 0 0;
+  padding: 0.2rem 0.4rem;
+  font-weight: 600;
+  position: absolute;
+  transform: translateY(-26px);
+  z-index: 2;
+}

package/src/components/UIProvider/index.ts

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

package/src/components/UIProvider/normalize.css

@@ -0,0 +1,17 @@
+.dropin-design a {
+  --textColor: var(--color-brand-500);
+  color: var(--textColor);
+  text-decoration: none;
+}
+
+.dropin-design a:hover {
+  --textColor: var(--color-brand-700);
+  text-decoration: solid underline var(--textColor);
+  text-underline-offset: 6px;
+}
+
+.dropin-design a:focus-visible {
+  outline: solid var(--shape-border-width-4) var(--color-neutral-400);
+  border: var(--shape-border-width-1) solid var(--color-neutral-800);
+  border-radius: var(--shape-border-radius-1);
+}

package/src/components/index.ts

@@ -0,0 +1,40 @@
+export * from '@adobe/elsie/components/Skeleton';
+export * from '@adobe/elsie/components/UIProvider';
+export * from '@adobe/elsie/components/Incrementer';
+export * from '@adobe/elsie/components/Input';
+export * from '@adobe/elsie/components/InputDate';
+export * from '@adobe/elsie/components/InputPassword';
+export * from '@adobe/elsie/components/TextArea';
+export * from '@adobe/elsie/components/Image';
+export * from '@adobe/elsie/components/Divider';
+export * from '@adobe/elsie/components/Icon';
+export * from '@adobe/elsie/components/Price';
+export * from '@adobe/elsie/components/RadioButton';
+export * from '@adobe/elsie/components/Image';
+export * from '@adobe/elsie/components/Divider';
+export * from '@adobe/elsie/components/Icon';
+export * from '@adobe/elsie/components/Button';
+export * from '@adobe/elsie/components/Picker';
+export * from '@adobe/elsie/components/Field';
+export * from '@adobe/elsie/components/ActionButton';
+export * from '@adobe/elsie/components/ActionButtonGroup';
+export * from '@adobe/elsie/components/Card';
+export * from '@adobe/elsie/components/Checkbox';
+export * from '@adobe/elsie/components/ColorSwatch';
+export * from '@adobe/elsie/components/TextSwatch';
+export * from '@adobe/elsie/components/ProgressSpinner';
+export * from '@adobe/elsie/components/ImageSwatch';
+export * from '@adobe/elsie/components/Accordion';
+export * from '@adobe/elsie/components/InLineAlert';
+export * from '@adobe/elsie/components/Modal';
+export * from '@adobe/elsie/components/CartItem';
+export * from '@adobe/elsie/components/CartList';
+export * from '@adobe/elsie/components/PriceRange';
+export * from '@adobe/elsie/components/Breadcrumbs';
+export * from '@adobe/elsie/components/AlertBanner';
+export * from '@adobe/elsie/components/IllustratedMessage';
+export * from '@adobe/elsie/components/ToggleButton';
+export * from '@adobe/elsie/components/Header';
+export * from '@adobe/elsie/components/Tag';
+export * from '@adobe/elsie/components/ContentGrid';
+export * from '@adobe/elsie/components/Pagination';

package/src/docs/API/event-bus.mdx

@@ -0,0 +1,52 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+
+<Meta title="API/Event Bus" />
+<Unstyled>
+
+# Event Bus
+
+## Usage
+
+```ts
+// from drop-in project (SDK)
+import { events } from '@adobe/elsie/lib';
+
+// from host site
+import { events } from '@dropins/tools/event-bus.js';
+```
+
+## Methods
+
+### Listener
+```ts
+const onEvent = events.on('<event>', (payload) => {
+  //...handle payload
+});
+
+// Stop listening to event
+onEvent.off();
+```
+
+### Emit
+
+```ts
+events.emit('<event>', <payload>);
+```
+
+### Logging
+
+```ts
+// Enable logging
+events.enableLogger(true);
+
+// Disable logging
+events.enableLogger(false);
+```
+
+### Get Latest Payload
+
+```ts
+events.lastPayload('<event>'): EventPayload | undefined;
+```
+
+</Unstyled>