@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/Price/Price.tsx

@@ -0,0 +1,75 @@
+/********************************************************************
+ *  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 { FunctionComponent } from 'preact';
+import { HTMLAttributes, useMemo } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/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,10 @@
+/********************************************************************
+ *  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/Price/Price';

package/src/components/PriceRange/PriceRange.css

@@ -0,0 +1,66 @@
+/********************************************************************
+ *  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://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,240 @@
+/********************************************************************
+ *  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 {
+  PriceRange as component,
+  PriceRangeProps,
+} from '@adobe-commerce/elsie/components/PriceRange';
+
+/**
+ * Use PriceRanges to display price range.
+ *
+ * Import the component like this:
+ *
+ * ```tsx
+ * import { PriceRange } from '@adobe-commerce/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,
+  },
+};

package/src/components/PriceRange/PriceRange.tsx

@@ -0,0 +1,248 @@
+/********************************************************************
+ *  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 { FunctionComponent } from 'preact';
+import { HTMLAttributes, useMemo } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/PriceRange/PriceRange.css';
+import { Price } from '@adobe-commerce/elsie/components/Price';
+import { useText } from '@adobe-commerce/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,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/PriceRange/PriceRange';
+export { PriceRange as default } from '@adobe-commerce/elsie/components/PriceRange/PriceRange';