@adobe-commerce/elsie 1.6.0 → 1.7.0-beta2

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

@@ -0,0 +1,70 @@
+/********************************************************************
+ * 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;
+};