@adobe-commerce/elsie 1.6.0 → 1.7.0-beta2

package/src/components/Input/Input.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -153,3 +153,42 @@ export const Secondary: Story = {
     await expect(await canvas.findByDisplayValue('')).toBeTruthy();
   },
 };
+
+/**
+ * Input with a floating label that includes a required asterisk.
+ * The asterisk is automatically wrapped in a `<span class="dropin-label-required">` for consistent styling.
+ *
+ * ```ts
+ * import { Input } from '@adobe-commerce/elsie/components/Input';
+ * ```
+ *
+ * This example demonstrates:
+ * - Automatic asterisk wrapping in floating labels
+ * - The asterisk can be styled independently using `.dropin-label-required`
+ * - The label floats above the input when it has a value
+ */
+export const WithRequiredAsterisk: Story = {
+  args: {
+    name: 'emailField',
+    value: 'user@example.com',
+    variant: 'primary',
+    size: 'medium',
+    floatingLabel: 'Email Address',
+    required: true,
+    disabled: false,
+    error: false,
+    success: false,
+    onValue: action('onValue'),
+  },
+  play: async ({ canvasElement }) => {
+    // Verify the floating label is rendered
+    const label = canvasElement.querySelector('.dropin-input__label--floating');
+    await expect(label).toBeTruthy();
+    await expect(label?.textContent).toBe('Email Address *');
+
+    // Verify the asterisk is wrapped in a span with required class
+    const asteriskSpan = label?.querySelector('.dropin-label-required');
+    await expect(asteriskSpan).toBeTruthy();
+    await expect(asteriskSpan?.textContent).toBe('*');
+  },
+};

package/src/components/Input/Input.tsx

@@ -2,15 +2,23 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { Icon } from '@adobe-commerce/elsie/components/Icon';
 import '@adobe-commerce/elsie/components/Input/Input.css';
-import { CheckWithCircle, WarningWithCircle } from '@adobe-commerce/elsie/icons';
-import { VComponent, classes, debounce } from '@adobe-commerce/elsie/lib';
+import {
+  CheckWithCircle,
+  WarningWithCircle,
+} from '@adobe-commerce/elsie/icons';
+import {
+  VComponent,
+  classes,
+  debounce,
+  wrapRequiredAsterisk,
+} from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { useCallback } from 'preact/hooks';
@@ -123,7 +131,7 @@ export const Input: FunctionComponent<InputProps> = ({
               [`dropin-input__label--floating--error`, !!error],
             ])}
           >
-            {floatingLabel}
+            {wrapRequiredAsterisk(floatingLabel, !!props.required)}
           </label>
         )}
       </div>

package/src/components/Picker/Picker.css

@@ -2,9 +2,9 @@
  *  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. 
+ * 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 */

package/src/components/Picker/Picker.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -316,3 +316,74 @@ export const MandatoryFieldFloatingLabelWithValue: Story = {
     ],
   },
 };
+
+export const SingleOption: Story = {
+  name: 'Single option',
+  args: {
+    name: 'pickerField',
+    variant: 'primary',
+    defaultOption: {
+      value: 'option1',
+      text: 'Only Option',
+    },
+    options: [
+      {
+        value: 'option1',
+        text: 'Only Option',
+      },
+    ],
+  },
+};
+
+/**
+ * Picker with a floating label that includes a required asterisk.
+ * The asterisk is automatically wrapped in a `<span class="dropin-label-required">` for consistent styling.
+ *
+ * ```ts
+ * import { Picker } from '@adobe-commerce/elsie/components/Picker';
+ * ```
+ *
+ * This example demonstrates:
+ * - Automatic asterisk wrapping in floating labels
+ * - The asterisk can be styled independently using `.dropin-label-required`
+ * - The label floats above the picker when an option is selected
+ */
+export const WithRequiredAsterisk: Story = {
+  name: 'With required asterisk',
+  args: {
+    name: 'countryPicker',
+    variant: 'primary',
+    floatingLabel: 'Country',
+    required: true,
+    value: 'us',
+    options: [
+      {
+        value: 'us',
+        text: 'United States',
+      },
+      {
+        value: 'ca',
+        text: 'Canada',
+      },
+      {
+        value: 'mx',
+        text: 'Mexico',
+      },
+      {
+        value: 'uk',
+        text: 'United Kingdom',
+      },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    // Verify the floating label is rendered
+    const label = canvasElement.querySelector('.dropin-picker__floatingLabel');
+    await expect(label).toBeTruthy();
+    await expect(label?.textContent).toBe('Country *');
+
+    // Verify the asterisk is wrapped in a span with required class
+    const asteriskSpan = label?.querySelector('.dropin-label-required');
+    await expect(asteriskSpan).toBeTruthy();
+    await expect(asteriskSpan?.textContent).toBe('*');
+  },
+};

package/src/components/Picker/Picker.tsx

@@ -2,14 +2,14 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { Icon } from '@adobe-commerce/elsie/components';
 import { ChevronDown } from '@adobe-commerce/elsie/icons';
-import { classes } from '@adobe-commerce/elsie/lib';
+import { classes, wrapRequiredAsterisk } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, useEffect, useState } from 'preact/compat';
 
@@ -74,6 +74,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
 }) => {
   const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
+  const isDisabled = disabled || options?.length === 1;
 
   // find the first option that is not disabled
   const firstAvailableOption = options?.find((option) => !option.disabled);
@@ -143,7 +144,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
         ['dropin-picker__floating', !!floatingLabel],
         ['dropin-picker__selected', isSelected],
         ['dropin-picker__error', error],
-        ['dropin-picker__disabled', disabled],
+        ['dropin-picker__disabled', isDisabled],
         ['dropin-picker__icon', icon],
       ])}
     >
@@ -165,7 +166,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
         ])}
         name={name}
         aria-label={name}
-        disabled={disabled}
+        disabled={isDisabled}
         onChange={handleOptionClick}
         {...props}
       >
@@ -197,7 +198,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
           htmlFor={id}
           className={classes(['dropin-picker__floatingLabel', !!floatingLabel])}
         >
-          {floatingLabel}
+          {wrapRequiredAsterisk(floatingLabel, isRequired)}
         </label>
       )}
     </div>

package/src/components/RadioButton/RadioButton.css

@@ -2,9 +2,9 @@
  *  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. 
+ * 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 */
@@ -64,6 +64,11 @@
   box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
 }
 
+.dropin-radio-button__icon {
+  margin-right: var(--spacing-xsmall);
+  flex-shrink: 0;
+}
+
 .dropin-radio-button__description {
   clear: both;
   color: var(--color-neutral-700);

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -14,6 +14,7 @@ import {
   RadioButtonProps,
 } from '@adobe-commerce/elsie/components/RadioButton';
 import { expect, userEvent, within } from '@storybook/test';
+import { IconsList } from '@adobe-commerce/elsie/components/Icon/Icon.stories.helpers';
 
 /**
  * Use Radio Buttons to let users select one option from a set of mutually exclusive choices.
@@ -91,6 +92,15 @@ const meta: Meta<RadioButtonProps> = {
         name: 'boolean',
       },
     },
+    icon: {
+      description:
+        'Optional icon to display before the label (SVG or img element)',
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: {
+        type: 'select',
+      },
+    },
   },
 };
 
@@ -124,3 +134,27 @@ export const RadioButtonStory: Story = {
     await expect(radioButton).toBeChecked();
   },
 };
+
+export const RadioButtonWithIcon: Story = {
+  name: 'Radio button with icon',
+  args: {
+    name: 'shipping',
+    label: 'Free Shipping',
+    value: 'free-shipping',
+    description: 'Delivery in 5-7 business days',
+    size: 'medium',
+    disabled: false,
+    error: false,
+    // @ts-ignore - icon is mapped from IconsList
+    icon: 'Delivery',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const radioButton = await canvas.findByRole('radio');
+    const radioButtonContainer = radioButton.closest('.dropin-radio-button');
+    const icon = radioButtonContainer?.querySelector(
+      '.dropin-radio-button__icon'
+    );
+    await expect(icon).toBeInTheDocument();
+  },
+};

package/src/components/RadioButton/RadioButton.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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, VNode } from 'preact';
@@ -13,7 +13,7 @@ import { classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/RadioButton/RadioButton.css';
 
 export interface RadioButtonProps
-  extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'label'> {
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'label' | 'icon'> {
   label: string | VNode<HTMLAttributes<HTMLElement>>;
   name: string;
   value: string;
@@ -23,6 +23,9 @@ export interface RadioButtonProps
   error?: boolean;
   description?: string;
   busy?: boolean;
+  icon?:
+    | VNode<HTMLAttributes<SVGSVGElement>>
+    | VNode<HTMLAttributes<HTMLImageElement>>;
 }
 
 export const RadioButton: FunctionComponent<RadioButtonProps> = ({
@@ -35,6 +38,7 @@ export const RadioButton: FunctionComponent<RadioButtonProps> = ({
   error = false,
   description = '',
   busy = false,
+  icon,
   className,
   children,
   ...props
@@ -70,6 +74,16 @@ export const RadioButton: FunctionComponent<RadioButtonProps> = ({
           ['dropin-radio-button__label--disabled', disabled],
         ])}
       >
+        {icon && (
+          // @ts-ignore
+          <icon.type
+            {...icon?.props}
+            className={classes([
+              'dropin-radio-button__icon',
+              icon?.props?.className,
+            ])}
+          />
+        )}
         {label}
       </span>
       <span

package/src/components/RadioButton/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/RadioButton/RadioButton';

package/src/components/TextArea/TextArea.css

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 .dropin-textarea-container {
@@ -135,6 +135,6 @@
 .dropin-textarea__label--floating--error {
   font: var(--type-details-caption-1-font);
   letter-spacing: var(--type-details-caption-1-letter-spacing);
-  color: var(--color-alert-800);
+  color: var(--color-alert-500);
   padding-top: var(--spacing-xsmall);
 }

package/src/components/TextArea/TextArea.stories.tsx

@@ -2,14 +2,17 @@
  *  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. 
+ * 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 { TextArea, TextAreaProps } from '@adobe-commerce/elsie/components/TextArea';
+import {
+  TextArea,
+  TextAreaProps,
+} from '@adobe-commerce/elsie/components/TextArea';
 import { expect, userEvent, within } from '@storybook/test';
 import { useState, useCallback } from 'preact/hooks';
 
@@ -75,7 +78,7 @@ const Template: StoryObj<TextAreaProps> = {
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
-    const setTextAreaValue = useCallback((event) => {
+    const setTextAreaValue = useCallback((event: any) => {
       setValue(event.target.value);
     }, []);
 
@@ -83,7 +86,7 @@ const Template: StoryObj<TextAreaProps> = {
   },
 };
 
-export const DefaultWithValue = {
+export const DefaultWithValue: StoryObj<TextAreaProps> = {
   ...Template,
   parameters: {
     layout: 'centered',
@@ -112,7 +115,7 @@ export const DefaultWithValue = {
   },
 };
 
-export const WithError = {
+export const WithError: StoryObj<TextAreaProps> = {
   ...Template,
   parameters: {
     layout: 'centered',
@@ -128,3 +131,47 @@ export const WithError = {
     errorMessage: 'Message cannot be empty',
   },
 };
+
+/**
+ * TextArea with a label that includes a required asterisk.
+ * The asterisk is automatically wrapped in a `<span class="dropin-label-required">` for consistent styling.
+ *
+ * ```ts
+ * import { TextArea } from '@adobe-commerce/elsie/components/TextArea';
+ * ```
+ *
+ * This example demonstrates:
+ * - Automatic asterisk wrapping in textarea labels
+ * - The asterisk can be styled independently using `.dropin-label-required`
+ * - The label floats above the textarea when it has content
+ */
+export const WithRequiredAsterisk: StoryObj<TextAreaProps> = {
+  ...Template,
+  parameters: {
+    layout: 'centered',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    label: 'Comments',
+    name: 'comments',
+    required: true,
+    value: 'Please provide additional details about your request.',
+  },
+  play: async ({ canvasElement }) => {
+    // Verify the floating label is rendered
+    const label = canvasElement.querySelector(
+      '.dropin-textarea__label--floating'
+    );
+    await expect(label).toBeTruthy();
+    await expect(label?.textContent).toBe('Comments *');
+
+    // Verify the asterisk is wrapped in a span with required class
+    const asteriskSpan = label?.querySelector('.dropin-label-required');
+    await expect(asteriskSpan).toBeTruthy();
+    await expect(asteriskSpan?.textContent).toBe('*');
+  },
+};

package/src/components/TextArea/TextArea.tsx

@@ -2,13 +2,13 @@
  *  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. 
+ * 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 { classes } from '@adobe-commerce/elsie/lib';
+import { classes, wrapRequiredAsterisk } from '@adobe-commerce/elsie/lib';
 import { HTMLAttributes } from 'preact/compat';
 import '@adobe-commerce/elsie/components/TextArea/TextArea.css';
 import { useRef, useEffect, useId } from 'preact/hooks';
@@ -72,7 +72,7 @@ export const TextArea: FunctionComponent<TextAreaProps> = ({
           [`dropin-textarea__label--floating--error`, error],
         ])}
       >
-        {label}
+        {wrapRequiredAsterisk(label as string, !!props.required)}
       </label>
       {error ? (
         <div

package/src/components/UIProvider/normalize.css

@@ -2,14 +2,15 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 .dropin-design a {
   --textColor: var(--color-brand-500);
   color: var(--textColor);
+  border: var(--shape-border-width-1) solid transparent;
   text-decoration: none;
 }
 
@@ -24,3 +25,7 @@
   border: var(--shape-border-width-1) solid var(--color-neutral-800);
   border-radius: var(--shape-border-radius-1);
 }
+
+.dropin-design .dropin-label-required {
+  color: var(--color-alert-500);
+}

package/src/lib/debounce.ts

@@ -9,8 +9,12 @@
 
 export const debounce = (fn: Function, ms: number) => {
   let timeoutId: ReturnType<typeof setTimeout>;
-  return function (this: any, ...args: any[]) {
+  const debouncedFn = function (this: any, ...args: any[]) {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => fn.apply(this, args), ms);
   };
+  debouncedFn.cancel = () => {
+    clearTimeout(timeoutId);
+  };
+  return debouncedFn;
 };

package/src/lib/get-price-formatter.ts

@@ -53,7 +53,7 @@ export function getPriceFormatter(
 
   const params: Intl.NumberFormatOptions = {
     style: 'currency',
-    currency: currency || 'USD',
+    currency: currency && currency !== 'NONE' ? 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)

package/src/lib/index.ts

@@ -26,3 +26,4 @@ export * from '@adobe-commerce/elsie/lib/deviceUtils';
 export * from '@adobe-commerce/elsie/lib/get-path-value';
 export * from '@adobe-commerce/elsie/lib/get-cookie';
 export * from '@adobe-commerce/elsie/lib/get-price-formatter';
+export * from '@adobe-commerce/elsie/lib/wrap-required-asterisk';