@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Picker/Picker.tsx

@@ -0,0 +1,194 @@
+import { Icon } from '@adobe/elsie/components';
+import '@adobe/elsie/components/Picker/Picker.css';
+import { ChevronDown } from '@adobe/elsie/icons';
+import { classes } from '@adobe/elsie/lib';
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes, useEffect, useState } from 'preact/compat';
+
+type PickerValue = string | null;
+
+export interface PickerOption {
+  value: PickerValue;
+  text?: string;
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  disabled?: boolean;
+}
+
+export interface PickerProps
+  extends Omit<HTMLAttributes<HTMLSelectElement>, 'value' | 'size' | 'icon'> {
+  id?: string;
+  name?: string;
+  value?: PickerValue;
+  placeholder?: string;
+  variant?: 'primary' | 'secondary';
+  size?: 'medium' | 'large';
+  floatingLabel?: string;
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  options?: PickerOption[];
+  defaultOption?: PickerOption;
+  disabled?: boolean;
+  error?: boolean;
+  handleSelect?: (event: Event) => void;
+}
+
+function findSelectedValue(
+  value?: PickerValue,
+  defaultOption?: PickerOption,
+  placeholder?: string,
+  floatingLabel?: string,
+  firstAvailableOption?: PickerOption
+) {
+  if (value) return value;
+  if (defaultOption) return defaultOption.value;
+  if (placeholder || floatingLabel) return '';
+  if (firstAvailableOption) return firstAvailableOption.value;
+  return null;
+}
+
+export const Picker: FunctionComponent<PickerProps> = ({
+  name,
+  value = null,
+  options,
+  variant = 'primary',
+  floatingLabel,
+  size = 'medium',
+  handleSelect = () => {},
+  disabled = false,
+  error = false,
+  placeholder,
+  defaultOption,
+  icon,
+  className,
+  ...props
+}) => {
+  const id = props?.id || name || `dropin-picker-${Math.random().toString(36)}`;
+  const isRequired = !!props?.required;
+
+  // find the first option that is not disabled
+  const firstAvailableOption = options?.find((option) => !option.disabled);
+
+  const [selectedValue, setSelectedValue] = useState<PickerValue>(() => {
+    return findSelectedValue(
+      value,
+      defaultOption,
+      placeholder,
+      floatingLabel,
+      firstAvailableOption
+    );
+  });
+
+  useEffect(() => {
+    setSelectedValue(
+      findSelectedValue(
+        value,
+        defaultOption,
+        placeholder,
+        floatingLabel,
+        firstAvailableOption
+      )
+    );
+  }, [value, defaultOption, placeholder, floatingLabel, firstAvailableOption]);
+
+  const handleOptionClick = (event: Event) => {
+    const { options, value } = event.target as HTMLSelectElement;
+
+    for (const element of options) {
+      if (element.selected) {
+        setSelectedValue(value);
+        handleSelect(event);
+      }
+    }
+  };
+
+  const optionsListItems = options?.map((option) => {
+    const { value, text, disabled } = option;
+    const selected = value === selectedValue;
+
+    return (
+      <option
+        value={value as string}
+        key={value}
+        selected={selected}
+        disabled={disabled}
+        className={classes(['dropin-picker__option'])}
+      >
+        {text}
+      </option>
+    );
+  });
+
+  const isSelected = !!selectedValue;
+
+  const hasToDisplayPlaceholder = () => {
+    return (!isRequired || !isSelected) && (floatingLabel || placeholder);
+  };
+
+  return (
+    <div
+      className={classes([
+        className,
+        'dropin-picker',
+        `dropin-picker__${size}`,
+        ['dropin-picker__floating', !!floatingLabel],
+        ['dropin-picker__selected', isSelected],
+        ['dropin-picker__error', error],
+        ['dropin-picker__disabled', disabled],
+        ['dropin-picker__icon', icon],
+      ])}
+    >
+      {icon && (
+        // @ts-ignore
+        <icon.type
+          {...icon.props}
+          className={'dropin-picker__icon--placeholder'}
+        />
+      )}
+
+      <select
+        id={id}
+        className={classes([
+          'dropin-picker__select',
+          `dropin-picker__select--${variant}`,
+          `dropin-picker__select--${size}`,
+          ['dropin-picker__select--floating', !!floatingLabel],
+        ])}
+        name={name}
+        aria-label={name}
+        disabled={disabled}
+        onChange={handleOptionClick}
+        {...props}
+      >
+        {hasToDisplayPlaceholder() && (
+          <option
+            selected={!isSelected}
+            value={''}
+            key={value}
+            className={classes([
+              'dropin-picker__option dropin-picker__placeholder',
+            ])}
+          >
+            {floatingLabel ?? placeholder}
+          </option>
+        )}
+
+        {optionsListItems}
+      </select>
+
+      <Icon
+        source={ChevronDown}
+        size="24"
+        stroke="2"
+        className="dropin-picker__chevronDown"
+      />
+
+      {floatingLabel && isSelected && (
+        <label
+          htmlFor={id}
+          className={classes(['dropin-picker__floatingLabel', !!floatingLabel])}
+        >
+          {floatingLabel}
+        </label>
+      )}
+    </div>
+  );
+};

package/src/components/Picker/index.ts

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

package/src/components/Price/Price.css

@@ -0,0 +1,48 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-price {
+  color: inherit;
+}
+
+.dropin-price--small {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+}
+
+.dropin-price--medium {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-price--large {
+  font: var(--type-headline-2-strong-font);
+  letter-spacing: var(--type-headline-2-strong-letter-spacing);
+}
+
+.dropin-price--strikethrough {
+  text-decoration: line-through;
+}
+
+.dropin-price--sale {
+  color: var(--color-alert-800);
+}
+
+.dropin-price--bold {
+  font-weight: bold;
+}
+
+.dropin-price--normal {
+  font-weight: normal;
+}
+
+/* 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/Price/Price.stories.tsx

@@ -0,0 +1,101 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Price, PriceProps } from '@adobe/elsie/components/Price';
+import { expect, within } from '@storybook/test';
+
+/**
+ * Use Price components to display the cost of an item or service.
+ */
+const meta: Meta<PriceProps> = {
+  title: 'Components/Price',
+  component: Price,
+  argTypes: {
+    currency: {
+      control: 'select',
+      options: ['USD', 'EUR'],
+    },
+    locale: {
+      control: 'select',
+      options: ['en-US', 'fr-FR'],
+    },
+    variant: {
+      description: 'Font variant',
+      defaultValue: 'default',
+      control: 'select',
+      options: ['default', 'strikethrough'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    weight: {
+      description: 'Font weight',
+      defaultValue: 'bold',
+      control: 'select',
+      options: ['bold', 'normal'],
+    },
+    formatOptions: {
+      control: { type: 'object' },
+      defaultValue: {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      },
+    },
+    amount: {
+      description: 'Price amount',
+      type: {
+        name: 'number',
+      },
+    },
+    sale: {
+      description: 'Indicates a sale price',
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PriceProps>;
+
+/**
+ * ```ts
+ * import { Price } from '@adobe/elsie/components/Price';
+ * ```
+ */
+
+export const Primary: Story = {
+  args: {
+    amount: 9.99,
+    sale: false,
+    size: 'small',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText('$9.99')).toBeVisible();
+  },
+};
+
+export const SpecialDefault: Story = {
+  args: {
+    size: 'small',
+  },
+  render: (args) => (
+    <div style="display: flex; flex-wrap:wrap; gap: 5px">
+      <Price {...args} amount={59.99} variant={'strikethrough'} />
+      <Price {...args} amount={55.99} variant={'default'} />
+    </div>
+  ),
+};
+
+export const HighContrast: Story = {
+  args: {
+    size: 'small',
+  },
+  render: (args) => (
+    <div style="display: flex; flex-wrap:wrap; gap: 5px">
+      <Price {...args} amount={59.99} variant={'strikethrough'} />
+      <Price {...args} amount={55.99} variant={'default'} sale />
+    </div>
+  ),
+};

package/src/components/Price/Price.tsx

@@ -0,0 +1,66 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes, useMemo } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Price/Price.css';
+
+export interface PriceProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'size'> {
+  amount?: number;
+  currency?: string;
+  locale?: string;
+  formatOptions?: {
+    [key: string]: any;
+  };
+  variant?: 'default' | 'strikethrough';
+  weight?: 'bold' | 'normal';
+  sale?: boolean;
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const Price: FunctionComponent<PriceProps> = ({
+  amount = 0,
+  currency,
+  locale = process.env.LOCALE ?? undefined,
+  variant = 'default',
+  weight = 'bold',
+  className,
+  children,
+  sale = false,
+  formatOptions = {},
+  size = 'small',
+  ...props
+}) => {
+  const formatter = useMemo(
+    () =>
+      new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currency || 'USD',
+        // These options are needed to round to whole numbers if that's what you want.
+        minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+        maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
+        ...formatOptions,
+      }),
+    [locale, currency, formatOptions]
+  );
+
+  const formattedAmount = useMemo(
+    () => formatter.format(amount),
+    [amount, formatter]
+  );
+
+  return (
+    <span
+      {...props}
+      className={classes([
+        'dropin-price',
+        `dropin-price--${variant}`,
+        `dropin-price--${size}`,
+        `dropin-price--${weight}`,
+        ['dropin-price--sale', sale],
+        className,
+      ])}
+    >
+      {formattedAmount}
+    </span>
+  );
+};

package/src/components/Price/index.ts

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

package/src/components/PriceRange/PriceRange.css

@@ -0,0 +1,57 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-price-range {
+  display: flex;
+  flex-wrap: wrap;
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+}
+
+.dropin-price-range__separator,
+.dropin-price-range__to {
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-block: auto;
+}
+
+.dropin-price-range__from,
+.dropin-price-range__as-low-as {
+  margin-right: 5px;
+}
+
+.dropin-price-range__from--small,
+.dropin-price-range__to--small,
+.dropin-price-range__as-low-as--small {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+}
+
+.dropin-price-range__from--medium,
+.dropin-price-range__to--medium,
+.dropin-price-range__as-low-as--medium {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-price-range__from--large,
+.dropin-price-range__to--large,
+.dropin-price-range__as-low-as--large {
+  font: var(--type-headline-2-strong-font);
+  letter-spacing: var(--type-headline-2-strong-letter-spacing);
+}
+
+.dropin-price-range__special {
+  margin-left: 5px;
+}
+
+/* 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/PriceRange/PriceRange.stories.tsx

@@ -0,0 +1,231 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  PriceRange as component,
+  PriceRangeProps,
+} from '@adobe/elsie/components/PriceRange';
+
+/**
+ * Use PriceRanges to display price range.
+ *
+ * Import the component like this:
+ *
+ * ```tsx
+ * import { PriceRange } from '@adobe/elsie/components/PriceRange';
+ * ```
+ *
+ */
+const meta: Meta<PriceRangeProps> = {
+  title: 'Components/PriceRange',
+  component,
+  argTypes: {
+    currency: {
+      description: 'Currency of price',
+      control: 'select',
+      options: ['USD', 'EUR'],
+    },
+    locale: {
+      description: 'Locale of price',
+      control: 'select',
+      options: ['en-US', 'fr-FR'],
+    },
+    amount: {
+      description: 'Price of a simple product',
+      control: 'number',
+    },
+    variant: {
+      description: 'Price display variant',
+      control: 'select',
+      options: ['default', 'strikethrough'],
+    },
+    minimumAmount: {
+      description: 'Minimum price of a product price range',
+      control: 'number',
+    },
+    maximumAmount: {
+      description: 'Maximum price of a product price range',
+      control: 'number',
+    },
+    size: {
+      description: 'Size of price',
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    display: {
+      description: 'Price range display option',
+      control: 'select',
+      options: ['dash', 'from to', 'as low as'],
+    },
+    specialPrice: {
+      description: 'Special price of a product',
+      control: 'select',
+      options: [undefined, 9.99],
+    },
+    sale: {
+      description:
+        'Whether or not to display contrast color for special sale price',
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PriceRangeProps>;
+
+/**
+ * Use the component like this to get a price for a simple product:
+ *
+ * ```tsx
+ * <PriceRange
+ *    currency: 'USD',
+ *    amount: 36.0,
+ *    size: 'small',
+ *    variant: 'default',
+ *    sale: false,
+ * />
+ * ```
+ */
+
+export const SimplePrice: Story = {
+  args: {
+    currency: 'USD',
+    amount: 36.0,
+    size: 'small',
+    variant: 'default',
+    sale: false,
+  },
+};
+
+/**
+ * Use the component like this to get a simple PriceRange:
+ *
+ * ```tsx
+ * <PriceRange
+ *    currency: 'USD',
+ *    minimumAmount: 56.0,
+ *    maximumAmount: 58.0,
+ *    size: 'small',
+ *    display: 'dash',
+ *    sale: false,
+ * />
+ * ```
+ */
+export const PriceRangeDash: Story = {
+  args: {
+    currency: 'USD',
+    minimumAmount: 56.0,
+    maximumAmount: 58.0,
+    size: 'small',
+    display: 'dash',
+    sale: false,
+  },
+};
+
+/**
+ * Use the component like this to get a from / to PriceRange:
+ *
+ * ```tsx
+ * <PriceRange
+ *    currency: 'USD',
+ *    minimumAmount: 56.0,
+ *    maximumAmount: 58.0,
+ *    size: 'small',
+ *    display: 'from to',
+ *    sale: false,
+ * />
+ * ```
+ */
+
+export const PriceRangeFromTo: Story = {
+  args: {
+    currency: 'USD',
+    minimumAmount: 56.0,
+    maximumAmount: 58.0,
+    size: 'small',
+    display: 'from to',
+    sale: false,
+  },
+};
+
+/**
+ * Use the component like this to get a as low as PriceRange:
+ *
+ * ```tsx
+ * <PriceRange
+ *    currency: 'USD',
+ *    minimumAmount: 56.0,
+ *    maximumAmount: 58.0,
+ *    size: 'small',
+ *    display: 'as low as',
+ *    sale: false,
+ * />
+ * ```
+ */
+
+export const PriceRangeAsLowAs: Story = {
+  args: {
+    currency: 'USD',
+    minimumAmount: 56.0,
+    maximumAmount: 58.0,
+    size: 'small',
+    display: 'as low as',
+    sale: false,
+  },
+};
+
+/**
+ * Use the component like this to get a simple PriceRange with special price:
+ *
+ * ```tsx
+ * <PriceRange
+ *    currency: 'USD',
+ *    minimumAmount: 56.0,
+ *    maximumAmount: 58.0,
+ *    size: 'small',
+ *    display: 'dash',
+ *    sale: false,
+ *    specialPrice: 9.99,
+ * />
+ * ```
+ */
+
+export const PriceRangeSpecialPrice: Story = {
+  args: {
+    currency: 'USD',
+    minimumAmount: 56.0,
+    maximumAmount: 58.0,
+    size: 'small',
+    display: 'dash',
+    sale: false,
+    specialPrice: 9.99,
+  },
+};
+
+/**
+ * Use the component like this to get a simple PriceRange with high contrast special price:
+ *
+ * ```tsx
+ * <PriceRange
+ *    currency: 'USD',
+ *    minimumAmount: 56.0,
+ *    maximumAmount: 58.0,
+ *    size: 'small',
+ *    display: 'dash',
+ *    sale: true,
+ *    specialPrice: 9.99,
+ * />
+ * ```
+ */
+
+export const PriceRangeSpecialPriceContrast: Story = {
+  args: {
+    currency: 'USD',
+    minimumAmount: 56.0,
+    maximumAmount: 58.0,
+    size: 'small',
+    display: 'dash',
+    sale: true,
+    specialPrice: 9.99,
+  },
+};