@adobe-commerce/elsie 1.7.0-beta2 → 1.7.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.7.0-beta2",
+  "version": "1.7.0-beta3",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Field/Field.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/Field/Field.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
@@ -230,48 +230,6 @@ export const CheckboxField: Story = {
   },
 };
 
-/**
- * Field 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 { Field } from '@adobe-commerce/elsie/components/Field';
- * import { Input } from '@adobe-commerce/elsie/components/Input';
- * ```
- *
- * This example demonstrates:
- * - Automatic asterisk wrapping in field labels
- * - The asterisk can be styled independently using `.dropin-label-required`
- * - Works with any child component (Input, Picker, etc.)
- */
-export const WithRequiredAsterisk: Story = {
-  render: (args) => (
-    <Field {...args}>
-      <Input name="requiredField" placeholder="Enter your email" />
-    </Field>
-  ),
-  args: {
-    label: 'Email Address',
-    hint: 'We will never share your email',
-    required: true,
-    error: '',
-    success: '',
-    size: 'medium',
-    disabled: false,
-  },
-  play: async ({ canvasElement }) => {
-    // Verify the label is rendered
-    const label = canvasElement.querySelector('.dropin-field__label');
-    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('*');
-  },
-};
-
 /**
  * ```ts
  * import { Field } from '@adobe-commerce/elsie/components/Field';

package/src/components/Field/Field.tsx

@@ -2,17 +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 '@adobe-commerce/elsie/components/Field/Field.css';
-import {
-  classes,
-  VComponent,
-  wrapRequiredAsterisk,
-} from '@adobe-commerce/elsie/lib';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 
@@ -36,7 +32,6 @@ export const Field: FunctionComponent<FieldProps> = ({
   size = 'medium',
   disabled = false,
   children,
-  required,
   ...props
 }) => {
   const id =
@@ -45,19 +40,20 @@ export const Field: FunctionComponent<FieldProps> = ({
   let fieldContent: VNode | string | null = null;
 
   if (children && typeof children !== 'string') {
-    fieldContent = (
-      <VComponent
-        node={children}
-        id={id}
-        key={children.key}
-        disabled={disabled}
-        size={size}
-        error={!!error}
-        success={!!success && !error}
-      />
-    );
+      fieldContent = (
+        <VComponent
+          node={children}
+          id={id}
+          key={children.key}
+          disabled={disabled}
+          size={size}
+          error={!!error}
+          success={!!success && !error}
+        />
+      );
   }
 
+
   return (
     <div {...props} className={classes(['dropin-field', className])}>
       {label && (
@@ -69,11 +65,13 @@ export const Field: FunctionComponent<FieldProps> = ({
           ])}
           htmlFor={id}
         >
-          {wrapRequiredAsterisk(label, !!required)}
+          {label}
         </label>
       )}
 
-      <div className={classes(['dropin-field__content'])}>{fieldContent}</div>
+      <div className={classes(['dropin-field__content'])}>
+        {fieldContent}
+      </div>
 
       <div
         className={classes([

package/src/components/Input/Input.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/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,42 +153,3 @@ 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,23 +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. 
  *******************************************************************/
 
 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,
-  wrapRequiredAsterisk,
-} from '@adobe-commerce/elsie/lib';
+import { CheckWithCircle, WarningWithCircle } from '@adobe-commerce/elsie/icons';
+import { VComponent, classes, debounce } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { useCallback } from 'preact/hooks';
@@ -131,7 +123,7 @@ export const Input: FunctionComponent<InputProps> = ({
               [`dropin-input__label--floating--error`, !!error],
             ])}
           >
-            {wrapRequiredAsterisk(floatingLabel, !!props.required)}
+            {floatingLabel}
           </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

@@ -334,56 +334,3 @@ export const SingleOption: Story = {
     ],
   },
 };
-
-/**
- * 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

@@ -9,7 +9,7 @@
 
 import { Icon } from '@adobe-commerce/elsie/components';
 import { ChevronDown } from '@adobe-commerce/elsie/icons';
-import { classes, wrapRequiredAsterisk } from '@adobe-commerce/elsie/lib';
+import { classes } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, useEffect, useState } from 'preact/compat';
 
@@ -198,7 +198,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
           htmlFor={id}
           className={classes(['dropin-picker__floatingLabel', !!floatingLabel])}
         >
-          {wrapRequiredAsterisk(floatingLabel, isRequired)}
+          {floatingLabel}
         </label>
       )}
     </div>

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-500);
+  color: var(--color-alert-800);
   padding-top: var(--spacing-xsmall);
 }

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

@@ -2,17 +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. 
  *******************************************************************/
 
 // 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';
 
@@ -78,7 +75,7 @@ const Template: StoryObj<TextAreaProps> = {
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
-    const setTextAreaValue = useCallback((event: any) => {
+    const setTextAreaValue = useCallback((event) => {
       setValue(event.target.value);
     }, []);
 
@@ -86,7 +83,7 @@ const Template: StoryObj<TextAreaProps> = {
   },
 };
 
-export const DefaultWithValue: StoryObj<TextAreaProps> = {
+export const DefaultWithValue = {
   ...Template,
   parameters: {
     layout: 'centered',
@@ -115,7 +112,7 @@ export const DefaultWithValue: StoryObj<TextAreaProps> = {
   },
 };
 
-export const WithError: StoryObj<TextAreaProps> = {
+export const WithError = {
   ...Template,
   parameters: {
     layout: 'centered',
@@ -131,47 +128,3 @@ export const WithError: StoryObj<TextAreaProps> = {
     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, wrapRequiredAsterisk } from '@adobe-commerce/elsie/lib';
+import { classes } 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],
         ])}
       >
-        {wrapRequiredAsterisk(label as string, !!props.required)}
+        {label}
       </label>
       {error ? (
         <div

package/src/components/UIProvider/normalize.css

@@ -25,7 +25,3 @@
   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/index.ts

@@ -26,4 +26,3 @@ 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';

package/src/lib/wrap-required-asterisk.tsx

@@ -1,70 +0,0 @@
-/********************************************************************
- * ADOBE CONFIDENTIAL
- * __________________
- *
- *  Copyright 2025 Adobe
- *  All Rights Reserved.
- *
- * NOTICE:  All information contained herein is, and remains
- * the property of Adobe and its suppliers, if any. The intellectual
- * and technical concepts contained herein are proprietary to Adobe
- * and its suppliers and are protected by all applicable intellectual
- * property laws, including trade secret and copyright laws.
- * Dissemination of this information or reproduction of this material
- * is strictly forbidden unless prior written permission is obtained
- * from Adobe.
- *******************************************************************/
-
-import { VNode } from 'preact';
-
-/**
- * Wraps trailing asterisk(s) in a span element for consistent styling.
- * If the text ends with one or more asterisks (preceded by optional space),
- * the asterisk(s) will be wrapped in a <span className="dropin-label-required">.
- * If required is true and no asterisk exists, one will be added automatically.
- *
- * @param text - The label text that may contain asterisk(s)
- * @param required - Whether the field is required
- * @returns A VNode with the text and wrapped asterisk, or the original text
- *
- * @example
- * wrapRequiredAsterisk('Email *', true) // Returns: <>Email <span className="dropin-label-required">*</span></>
- * wrapRequiredAsterisk('Email', true) // Returns: <>Email <span className="dropin-label-required">*</span></>
- * wrapRequiredAsterisk('Email *', false) // Returns: <>Email <span>*</span></>
- * wrapRequiredAsterisk('Email', false) // Returns: 'Email'
- */
-export const wrapRequiredAsterisk = (
-  text: string | undefined,
-  required?: boolean
-): string | VNode | undefined => {
-  if (!text) return text;
-
-  // Match optional space followed by one or more asterisks at the end of the string
-  const asteriskPattern = /^(.+?)(\s*)(\*+)$/;
-  const match = text.match(asteriskPattern);
-
-  if (match) {
-    const [, textPart, space, asterisks] = match;
-    return (
-      <>
-        {textPart}
-        {space}
-        <span className={required ? 'dropin-label-required' : undefined}>
-          {asterisks}
-        </span>
-      </>
-    );
-  }
-
-  // If required is true and no asterisk exists, add it
-  if (required) {
-    return (
-      <>
-        {text}{' '}
-        <span className="dropin-label-required">*</span>
-      </>
-    );
-  }
-
-  return text;
-};