From b52f15a937a0cc4b90fddd76c42638a22a3b7cb6 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Mon, 24 Oct 2022 23:00:37 +0800
Subject: [PATCH] [portal][ui] add error message to checkbox input

---
 .../ui/src/CheckboxInput/CheckboxInput.tsx    | 106 ++++++++++--------
 1 file changed, 58 insertions(+), 48 deletions(-)

diff --git a/packages/ui/src/CheckboxInput/CheckboxInput.tsx b/packages/ui/src/CheckboxInput/CheckboxInput.tsx
index edeb9d3a..fec43b7e 100644
--- a/packages/ui/src/CheckboxInput/CheckboxInput.tsx
+++ b/packages/ui/src/CheckboxInput/CheckboxInput.tsx
@@ -7,6 +7,7 @@ type Props = Readonly<{
   defaultValue?: boolean;
   description?: string;
   disabled?: boolean;
+  errorMessage?: string;
   label: string;
   name?: string;
   onChange?: (
@@ -21,6 +22,7 @@ function CheckboxInput(
     defaultValue,
     description,
     disabled = false,
+    errorMessage,
     label,
     name,
     value,
@@ -30,59 +32,67 @@ function CheckboxInput(
 ) {
   const id = useId();
   const descriptionId = useId();
+  const errorId = useId();
 
   return (
-    <div
-      className={clsx(
-        'relative flex',
-        // Vertically center only when there's no description.
-        description == null && 'items-center',
-      )}>
-      <div className="flex h-5 items-center">
-        <input
-          ref={ref}
-          aria-describedby={description != null ? descriptionId : undefined}
-          checked={value}
-          className={clsx(
-            'h-4 w-4 rounded border-slate-300',
-            disabled
-              ? 'bg-slate-100 text-slate-400'
-              : 'text-primary-600 focus:ring-primary-500',
-          )}
-          defaultChecked={defaultValue}
-          disabled={disabled}
-          id={id}
-          name={name}
-          type="checkbox"
-          onChange={
-            onChange != null
-              ? (event) => {
-                  onChange?.(event.target.checked, event);
-                }
-              : undefined
-          }
-        />
-      </div>
-      <div className="ml-3 text-sm">
-        <label
-          className={clsx(
-            'block font-medium',
-            disabled ? 'text-slate-400' : 'text-slate-700',
-          )}
-          htmlFor={id}>
-          {label}
-        </label>
-        {description && (
-          <p
+    <div>
+      <div
+        className={clsx(
+          'relative flex',
+          // Vertically center only when there's no description.
+          description == null && 'items-center',
+        )}>
+        <div className="flex h-5 items-center">
+          <input
+            ref={ref}
+            aria-describedby={description != null ? descriptionId : undefined}
+            checked={value}
             className={clsx(
-              'text-xs',
-              disabled ? 'text-slate-400' : 'text-slate-500',
+              'h-4 w-4 rounded border-slate-300',
+              disabled
+                ? 'bg-slate-100 text-slate-400'
+                : 'text-primary-600 focus:ring-primary-500',
             )}
-            id={descriptionId}>
-            {description}
-          </p>
-        )}
+            defaultChecked={defaultValue}
+            disabled={disabled}
+            id={id}
+            name={name}
+            type="checkbox"
+            onChange={(event) => {
+              if (!onChange) {
+                return;
+              }
+
+              onChange(event.target.checked, event);
+            }}
+          />
+        </div>
+        <div className="ml-3 text-sm">
+          <label
+            className={clsx(
+              'block font-medium',
+              disabled ? 'text-slate-400' : 'text-slate-700',
+            )}
+            htmlFor={id}>
+            {label}
+          </label>
+          {description && (
+            <p
+              className={clsx(
+                'text-xs',
+                disabled ? 'text-slate-400' : 'text-slate-500',
+              )}
+              id={descriptionId}>
+              {description}
+            </p>
+          )}
+        </div>
       </div>
+      {errorMessage && (
+        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+          {errorMessage}
+        </p>
+      )}
     </div>
   );
 }