@bookinglab/booking-ui-react 1.12.1 → 1.14.0

package/dist/index.mjs

@@ -18,7 +18,11 @@ function DateInputGroup({
   itemCls,
   sublabelCls,
   dateInputCls,
-  renderHelpText,
+  dayInputCls,
+  monthInputCls,
+  yearInputCls,
+  helpTextAbove,
+  helpTextBelow,
   renderError
 }) {
   const parseValue = (raw) => {
@@ -56,8 +60,9 @@ function DateInputGroup({
   return /* @__PURE__ */ jsxs("fieldset", { className: fieldsetCls, "aria-describedby": hasError ? errorId : void 0, children: [
     /* @__PURE__ */ jsxs("legend", { className: legendCls, children: [
       question.name,
-      question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+      question.required && /* @__PURE__ */ jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "aria-hidden": "true", children: "*" })
     ] }),
+    helpTextAbove,
     /* @__PURE__ */ jsxs("div", { className: groupCls, role: "group", children: [
       /* @__PURE__ */ jsxs("div", { className: itemCls, children: [
         /* @__PURE__ */ jsx("label", { htmlFor: dayId, className: sublabelCls, children: "Day" }),
@@ -71,7 +76,7 @@ function DateInputGroup({
             maxLength: 2,
             value: parts.day,
             onChange: (e) => handleSubChange("day", e.target.value),
-            className: cx(dateInputCls, "w-16"),
+            className: cx(dayInputCls ?? dateInputCls, "w-16"),
             "aria-invalid": hasError ? true : void 0,
             "aria-required": question.required || void 0
           }
@@ -89,7 +94,7 @@ function DateInputGroup({
             maxLength: 2,
             value: parts.month,
             onChange: (e) => handleSubChange("month", e.target.value),
-            className: cx(dateInputCls, "w-16"),
+            className: cx(monthInputCls ?? dateInputCls, "w-16"),
             "aria-invalid": hasError ? true : void 0,
             "aria-required": question.required || void 0
           }
@@ -107,14 +112,14 @@ function DateInputGroup({
             maxLength: 4,
             value: parts.year,
             onChange: (e) => handleSubChange("year", e.target.value),
-            className: cx(dateInputCls, "w-24"),
+            className: cx(yearInputCls ?? dateInputCls, "w-24"),
             "aria-invalid": hasError ? true : void 0,
             "aria-required": question.required || void 0
           }
         )
       ] })
     ] }),
-    renderHelpText(),
+    helpTextBelow,
     renderError()
   ] });
 }
@@ -123,7 +128,8 @@ function FormField({
   value,
   error,
   onChange,
-  classNames
+  classNames,
+  displayHelpTextBelowLabel = false
 }) {
   const inputId = `question-${question.id}`;
   const errorId = `${inputId}-error`;
@@ -143,7 +149,7 @@ function FormField({
     if (question.detail_type === "heading") return null;
     return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: labelClasses, children: [
       question.name,
-      question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+      question.required && /* @__PURE__ */ jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "aria-hidden": "true", children: "*" })
     ] });
   };
   const renderHelpText = () => {
@@ -156,6 +162,8 @@ function FormField({
       }
     );
   };
+  const helpTextAbove = displayHelpTextBelowLabel ? renderHelpText() : null;
+  const helpTextBelow = displayHelpTextBelowLabel ? null : renderHelpText();
   const renderError = () => {
     if (!error) return null;
     return /* @__PURE__ */ jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
@@ -174,6 +182,7 @@ function FormField({
     case "text_field":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -186,12 +195,13 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "text_area":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsx(
           "textarea",
           {
@@ -204,12 +214,13 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "select":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxs(
           "select",
           {
@@ -224,12 +235,13 @@ function FormField({
             ]
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "radio":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -257,7 +269,7 @@ function FormField({
             })
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "date": {
@@ -268,6 +280,10 @@ function FormField({
       const groupCls = classNames?.dateInputGroup ?? "flex flex-row gap-3 items-end";
       const legendCls = classNames?.dateLegend ?? labelClasses;
       const fieldsetCls = classNames?.dateFieldset ?? (classNames?.fieldWrapper ?? defaultFieldWrapper);
+      const wrapPerInput = (cls) => cls === void 0 ? void 0 : hasError ? cx(cls, classNames?.inputError ?? defaultInputError) : cls;
+      const dayInputCls = wrapPerInput(classNames?.dateInputDay);
+      const monthInputCls = wrapPerInput(classNames?.dateInputMonth);
+      const yearInputCls = wrapPerInput(classNames?.dateInputYear);
       return /* @__PURE__ */ jsx(
         DateInputGroup,
         {
@@ -283,7 +299,11 @@ function FormField({
           itemCls,
           sublabelCls,
           dateInputCls,
-          renderHelpText,
+          dayInputCls,
+          monthInputCls,
+          yearInputCls,
+          helpTextAbove,
+          helpTextBelow,
           renderError
         }
       );
@@ -291,6 +311,7 @@ function FormField({
     case "number":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -305,11 +326,12 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "check":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        helpTextAbove,
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -324,10 +346,10 @@ function FormField({
           ),
           /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: checkboxLabelClasses, children: [
             question.name,
-            question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            question.required && /* @__PURE__ */ jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "aria-hidden": "true", children: "*" })
           ] })
         ] }),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     default:
@@ -339,6 +361,7 @@ function BookingForm({
   onSubmit,
   submitLabel = "Submit",
   isAdmin = false,
+  displayHelpTextBelowLabel = false,
   className = "",
   labelClassName,
   classNames: classNamesProp
@@ -535,7 +558,8 @@ function BookingForm({
         value: values[question.id],
         error: touched[question.id] ? errors[question.id] : void 0,
         onChange: (value) => handleChange(question.id, value),
-        classNames
+        classNames,
+        displayHelpTextBelowLabel
       },
       question.id
     )),