@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/PriceRange/PriceRange.tsx

@@ -0,0 +1,239 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes, useMemo } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/PriceRange/PriceRange.css';
+import { Price } from '@adobe/elsie/components/Price';
+import { useText } from '@adobe/elsie/i18n';
+
+export interface PriceRangeProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+  locale?: string;
+  currency?: string;
+  amount?: number; // simple product
+  variant?: 'default' | 'strikethrough';
+  minimumAmount?: number; // configurable product
+  maximumAmount?: number; // configurable product
+  display?: 'dash' | 'from to' | 'as low as';
+  size?: 'small' | 'medium' | 'large';
+  specialPrice?: number;
+  sale?: boolean;
+}
+
+export const PriceRange: FunctionComponent<PriceRangeProps> = ({
+  className,
+  children,
+  locale,
+  currency,
+  amount,
+  variant = 'default',
+  minimumAmount,
+  maximumAmount,
+  size = 'small',
+  display = 'dash',
+  specialPrice,
+  sale = false,
+  ...props
+}) => {
+  const isSimpleProduct = useMemo(
+    () =>
+      amount ||
+      minimumAmount === maximumAmount ||
+      (minimumAmount && !maximumAmount) ||
+      (maximumAmount && !minimumAmount),
+    [amount, maximumAmount, minimumAmount]
+  );
+
+  return (
+    <div>
+      {/* Simple product price or when configurable product minimum price equals to maximum price */}
+      {isSimpleProduct ? (
+        <div {...props} className={classes(['dropin-price-range', className])}>
+          <Price
+            amount={amount ?? minimumAmount ?? maximumAmount}
+            currency={currency}
+            locale={locale}
+            size={size}
+            variant={variant}
+            sale={sale}
+          />
+        </div>
+      ) : (
+        <div {...props} className={classes(['dropin-price-range', className])}>
+          {display === 'dash' ? (
+            <Dashed
+              specialPrice={specialPrice}
+              minimumAmount={minimumAmount}
+              maximumAmount={maximumAmount}
+              currency={currency}
+              locale={locale}
+              size={size}
+              sale={sale}
+            />
+          ) : null}
+
+          {display === 'from to' ? (
+            <FromTo
+              specialPrice={specialPrice}
+              minimumAmount={minimumAmount}
+              maximumAmount={maximumAmount}
+              currency={currency}
+              locale={locale}
+              size={size}
+              sale={sale}
+            />
+          ) : null}
+
+          {display === 'as low as' ? (
+            <SpecialPrice
+              specialPrice={specialPrice}
+              minimumAmount={minimumAmount}
+              maximumAmount={maximumAmount}
+              currency={currency}
+              locale={locale}
+              size={size}
+              sale={sale}
+            />
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Variations
+
+function Dashed({
+  specialPrice,
+  minimumAmount,
+  maximumAmount,
+  currency,
+  locale,
+  size,
+  sale,
+}: PriceRangeProps) {
+  return (
+    <>
+      <Price
+        amount={specialPrice ?? minimumAmount}
+        currency={currency}
+        locale={locale}
+        size={size}
+        sale={!!specialPrice && sale}
+      />
+      <span className="dropin-price-range__separator">-</span>
+      <Price
+        amount={maximumAmount}
+        currency={currency}
+        locale={locale}
+        size={size}
+      />
+    </>
+  );
+}
+
+function FromTo({
+  specialPrice,
+  minimumAmount,
+  maximumAmount,
+  currency,
+  locale,
+  size,
+  sale,
+}: PriceRangeProps) {
+  // Translations
+  const translations = useText({
+    from: 'Dropin.PriceRange.from.label',
+    to: 'Dropin.PriceRange.to.label',
+    asLowAs: 'Dropin.PriceRange.asLowAs.label',
+  });
+
+  return (
+    <>
+      <span
+        className={classes([
+          'dropin-price-range__from',
+          `dropin-price-range__from--${size}`,
+        ])}
+      >
+        {translations.from}
+      </span>
+      <Price
+        amount={specialPrice ?? minimumAmount}
+        currency={currency}
+        locale={locale}
+        size={size}
+        sale={!!specialPrice && sale}
+      />
+      <span
+        className={classes([
+          'dropin-price-range__to',
+          `dropin-price-range__to--${size}`,
+        ])}
+      >
+        {translations.to}
+      </span>
+      <Price
+        amount={maximumAmount}
+        currency={currency}
+        locale={locale}
+        size={size}
+      />
+    </>
+  );
+}
+
+function SpecialPrice({
+  specialPrice,
+  minimumAmount,
+  maximumAmount,
+  currency,
+  locale,
+  size,
+  sale,
+}: PriceRangeProps) {
+  // Translations
+  const translations = useText({
+    from: 'Dropin.PriceRange.from.label',
+    to: 'Dropin.PriceRange.to.label',
+    asLowAs: 'Dropin.PriceRange.asLowAs.label',
+  });
+
+  return (
+    <>
+      <span
+        className={classes([
+          'dropin-price-range__as-low-as',
+          `dropin-price-range__as-low-as--${size}`,
+        ])}
+      >
+        {translations.asLowAs}
+      </span>
+      {specialPrice ? (
+        <div>
+          <Price
+            amount={maximumAmount}
+            currency={currency}
+            locale={locale}
+            size={size}
+            variant="strikethrough"
+          />
+          <Price
+            amount={specialPrice}
+            currency={currency}
+            locale={locale}
+            size={size}
+            className="dropin-price-range__special"
+            sale={!!specialPrice && sale}
+          />
+        </div>
+      ) : (
+        <Price
+          amount={minimumAmount}
+          currency={currency}
+          locale={locale}
+          size={size}
+        />
+      )}
+    </>
+  );
+}

package/src/components/PriceRange/index.ts

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

package/src/components/ProgressSpinner/ProgressSpinner.css

@@ -0,0 +1,82 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-progress-spinner-provider {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: inherit;
+  opacity: 1;
+  padding: var(--spacing-small);
+}
+
+.dropin-progress-spinner {
+  --size: var(--spacing-medium);
+  --stroke-width: var(--shape-icon-stroke-4);
+  width: var(--size);
+  height: var(--size);
+  border-style: solid;
+  border-width: var(--stroke-width);
+  border-color: var(--color-neutral-400);
+  border-top-color: var(--color-brand-500);
+  border-radius: 50%;
+  animation: indeterminate 1s infinite ease-in-out;
+}
+
+.dropin-progress-spinner-with-provider {
+  position: absolute;
+  top: calc(50% - var(--size) / 2 - var(--stroke-width));
+  left: calc(50% - var(--size) / 2 - var(--stroke-width));
+}
+
+.dropin-progress-spinner-background {
+  --bgColor: var(--color-neutral-50);
+  background-color: var(--bgColor);
+  border-radius: inherit;
+  opacity: 0.5;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-top: calc(-1 * var(--spacing-small));
+  margin-left: calc(-1 * var(--spacing-small));
+}
+
+.dropin-progress-spinner--shape-size-small {
+  --size: var(--spacing-medium);
+}
+
+.dropin-progress-spinner--shape-size-medium {
+  --size: var(--spacing-big);
+}
+
+.dropin-progress-spinner--shape-size-big {
+  --size: var(--spacing-xxbig);
+}
+
+.dropin-progress-spinner--shape-size-large {
+  --size: var(--spacing-large);
+}
+
+.dropin-progress-spinner--shape-stroke-1 {
+  --stroke-width: var(--shape-icon-stroke-1);
+}
+
+.dropin-progress-spinner--shape-stroke-2 {
+  --stroke-width: var(--shape-icon-stroke-2);
+}
+
+.dropin-progress-spinner--shape-stroke-3 {
+  --stroke-width: var(--shape-icon-stroke-3);
+}
+
+.dropin-progress-spinner--shape-stroke-4 {
+  --stroke-width: var(--shape-icon-stroke-4);
+}
+
+@keyframes indeterminate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/ProgressSpinner/ProgressSpinner.stories.tsx

@@ -0,0 +1,291 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import { expect } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/preact';
+import ProgressSpinner, {
+  ProgressSpinner as component,
+  ProgressSpinnerProps,
+} from '@adobe/elsie/components/ProgressSpinner';
+import { Search } from '@adobe/elsie/icons';
+import { ActionButton, Button, Card, Icon, RadioButton, ImageSwatch } from '..';
+
+/**
+ * Use Progress Spinners to display ongoing activity or loading status.
+ */
+const meta: Meta<ProgressSpinnerProps> = {
+  title: 'Components/ProgressSpinner',
+  component,
+  argTypes: {
+    size: {
+      type: 'select',
+      table: {
+        defaultValue: {
+          summary: 'small',
+        },
+      },
+      options: ['small', 'medium', 'big', 'large'],
+      description: 'Size of the spinner',
+    },
+    stroke: {
+      type: 'select',
+      table: {
+        defaultValue: {
+          summary: '4',
+        },
+      },
+      options: ['1', '2', '3', '4'],
+      description: 'Stroke of the spinner',
+    },
+    active: {
+      type: 'boolean',
+      table: {
+        defaultValue: {
+          summary: 'true',
+        },
+      },
+      options: [true, false],
+      description:
+        'Whether the spinner is active or not (not a prop, just for story).',
+    },
+    ariaLabel: {
+      type: {
+        required: false,
+        name: 'string',
+      },
+      table: {
+        defaultValue: {
+          summary: 'Updating',
+        },
+      },
+      description: 'Aria label for the spinner',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ProgressSpinnerProps>;
+
+/**
+ * ```ts
+ * import { ProgressSpinner } from '@adobe/elsie/components/ProgressSpinner';
+ * ```
+ */
+
+export const SmallSpinner: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'small',
+    stroke: '4',
+  },
+  render: ({ ariaLabel, size, stroke }) => (
+    <ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke} />
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};
+
+export const LargeSpinnerWithCard: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'large',
+    stroke: '4',
+    active: true,
+  },
+  render: ({ ariaLabel, size, stroke, active }) => {
+    const components = (
+      <Card variant={'secondary'}>
+        <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>
+        <ActionButton disabled={active} children={'Action'} />
+      </Card>
+    );
+
+    return active ? (
+      <ProgressSpinner
+        aria-label={ariaLabel}
+        size={size}
+        stroke={stroke}
+        style={{ backgroundColor: 'var(--color-neutral-200);' }}
+      >
+        {components}
+      </ProgressSpinner>
+    ) : (
+      components
+    );
+  },
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};
+
+export const MediumSpinnerWithRadio: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'medium',
+    stroke: '4',
+    active: true,
+  },
+  render: ({ ariaLabel, size, stroke, active }) => {
+    const components = (
+      <div>
+        <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>
+        <RadioButton
+          label={'Option 1'}
+          value={'1'}
+          name={'radio'}
+          description={'first option'}
+          disabled={active}
+        />
+        <RadioButton
+          label={'Option 2'}
+          value={'2'}
+          name={'radio'}
+          description={'second option'}
+          disabled={active}
+        />
+      </div>
+    );
+
+    return (
+      <Card variant={'secondary'}>
+        <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>Title</h2>
+        {active ? (
+          <ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke}>
+            {components}
+          </ProgressSpinner>
+        ) : (
+          components
+        )}
+      </Card>
+    );
+  },
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};
+
+export const SmallSpinnerReplaceButton: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'small',
+    stroke: '2',
+    active: true,
+  },
+  render: ({ ariaLabel, size, stroke, active }) => (
+    <Card variant={'secondary'}>
+      <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>
+      <div>
+        <Button
+          size="medium"
+          style={{
+            width: '100%',
+            background: 'var(--color-brand-500) 0 0% no-repeat padding-box',
+          }}
+          aria-hidden={active}
+          aria-label={active ? 'loading' : 'Action'}
+          disabled={active}
+          children={
+            active
+              ? [
+                  <ProgressSpinner
+                    aria-label={ariaLabel}
+                    tabIndex={-1}
+                    size={size}
+                    stroke={stroke}
+                    key="spinner"
+                  />,
+                ]
+              : [
+                  'Action!',
+                  <Icon
+                    source={Search}
+                    size="24"
+                    className="storybook_icon"
+                    stroke="1"
+                    viewBox="0 0 24 24"
+                    aria-label="Search"
+                    key={'4'}
+                  />,
+                ]
+          }
+        />
+      </div>
+    </Card>
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};
+
+export const SpinnerForBoxShadow: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'small',
+    stroke: '2',
+  },
+  render: ({ ariaLabel, size, stroke }) => {
+    return (
+      <ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '20px',
+          }}
+        >
+          <ImageSwatch
+            name="imageSwatchField"
+            id="imageSwatchExample1"
+            src="https://picsum.photos/20/20"
+            value="imageExample"
+            disabled={true}
+          />
+          <ImageSwatch
+            name="imageSwatchField"
+            id="imageSwatchExample2"
+            src="https://picsum.photos/20/20"
+            value="imageExample"
+            disabled={true}
+          />
+          <ImageSwatch
+            name="imageSwatchField"
+            id="imageSwatchExample3"
+            src="https://picsum.photos/20/20"
+            value="imageExample"
+            selected={true}
+            disabled={true}
+          />
+        </div>
+      </ProgressSpinner>
+    );
+  },
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};

package/src/components/ProgressSpinner/ProgressSpinner.tsx

@@ -0,0 +1,77 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { useText } from '@adobe/elsie/i18n';
+import { classes } from '@adobe/elsie/lib';
+
+import '@adobe/elsie/components/ProgressSpinner/ProgressSpinner.css';
+
+/**
+ * @param size this is the size of the spinner ranging in [12px, 24px, 36px, 48px]
+ * @param stroke this is the stroke of the spinner ranging in [1px, 2px, 3px, 4px]
+ */
+export interface ProgressSpinnerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+  ariaLabel?: string;
+  size?: 'small' | 'medium' | 'big' | 'large';
+  stroke?: '1' | '2' | '3' | '4';
+}
+
+export const ProgressSpinner: FunctionComponent<ProgressSpinnerProps> = ({
+  ariaLabel,
+  size = 'small',
+  stroke = '4',
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const commonClasses = [
+    'dropin-progress-spinner',
+    `dropin-progress-spinner--shape-size-${size}`,
+    `dropin-progress-spinner--shape-stroke-${stroke}`,
+  ];
+
+  const translations = useText({
+    updating: 'Dropin.ProgressSpinner.updating.label',
+    updatingChildren: 'Dropin.ProgressSpinner.updatingChildren.label',
+  });
+
+  const handleAriaLabel = () => {
+    if (ariaLabel) return ariaLabel;
+    return children ? translations.updatingChildren : translations.updating;
+  };
+
+  return children ? (
+    // if we provide children to this component, it should act as a provider in order to add background with low opacity
+    <div
+      {...props}
+      className={classes(['dropin-progress-spinner-provider'])}
+      aria-live="polite"
+      role="status"
+    >
+      <div aria-hidden={true}>{children}</div>
+      <div
+        aria-label={handleAriaLabel()}
+        role="status"
+        className={classes(['dropin-progress-spinner-background', className])}
+        style={style}
+      />
+      <div
+        className={classes([
+          'dropin-progress-spinner-with-provider',
+          ...commonClasses,
+        ])}
+        aria-hidden={true}
+      />
+    </div>
+  ) : (
+    // if there are no children, it should be able to be standalone and have no background
+    <div
+      {...props}
+      className={classes([className, ...commonClasses])}
+      aria-live="polite"
+      role="status"
+      aria-label={handleAriaLabel()}
+    />
+  );
+};

package/src/components/ProgressSpinner/index.ts

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