@local-civics/hub-ui 0.1.97 → 0.1.99

package/dist/index.js

@@ -3836,23 +3836,30 @@ const CheckboxQuestion = (props) => {
       props.onResponseChange(newResponses);
     }
   };
+  let isOneChecked = false;
+  React.useEffect(() => {
+  }, []);
   return /* @__PURE__ */ React.createElement("fieldset", { className: "grid grid-cols-1 gap-y-8" }, options.map((option) => {
+    isOneChecked = Object.keys(values).length ? true : false;
     return /* @__PURE__ */ React.createElement("div", { key: option }, /* @__PURE__ */ React.createElement("label", { className: "flex gap-x-4 items-center" }, /* @__PURE__ */ React.createElement(
       "input",
       {
+        id: "checkbox",
         disabled: props.disabled,
         className: "cursor-pointer shrink-0",
+        required: props.required && !isOneChecked,
         checked: values[option] || !option && values[`Other: ${response}`],
         onChange: option ? onChange : onOtherChange,
         type: "checkbox",
         value: option || response,
         name: displayNameString(props.displayName)
       }
-    ), option && /* @__PURE__ */ React.createElement("div", null, option), !option && /* @__PURE__ */ React.createElement(React.Fragment, null, "Other: ", /* @__PURE__ */ React.createElement(
+    ), option && /* @__PURE__ */ React.createElement("div", null, option), !option && /* @__PURE__ */ React.createElement(React.Fragment, null, "Other:", " ", /* @__PURE__ */ React.createElement(
       "input",
       {
-        className: "w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 text-sm placeholder-slate-400 border border-slate-300 rounded-sm shadow-sm\n        focus:outline-none focus:ring-1 focus:ring-sky-500",
+        className: "w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 text-sm placeholder-slate-400 border border-slate-300 rounded-sm shadow-sm\r\n        focus:outline-none focus:ring-1 focus:ring-sky-500",
         value: isOtherResponse ? response : "",
+        required: props.required,
         disabled: props.disabled,
         onChange: onOtherChange,
         placeholder: "Input another option",
@@ -3923,7 +3930,7 @@ const FileUploadQuestion = (props) => {
       onChange: onImageUpload,
       name: "image",
       type: "file",
-      className: "block w-full text-sm text-slate-500 disabled:text-gray-600\n                                      file:mr-4 file:py-2 file:px-4\n                                      file:rounded-full file:border-0\n                                      file:text-sm file:font-semibold\n                                      file:bg-violet-50 file:text-violet-700\n                                      hover:file:bg-violet-100"
+      className: "block w-full text-sm text-slate-500 disabled:text-gray-600\r\n                                      file:mr-4 file:py-2 file:px-4\r\n                                      file:rounded-full file:border-0\r\n                                      file:text-sm file:font-semibold\r\n                                      file:bg-violet-50 file:text-violet-700\r\n                                      hover:file:bg-violet-100"
     }
   ))), /* @__PURE__ */ React.createElement("div", { className: "-ml-2" }, /* @__PURE__ */ React.createElement(
     "input",
@@ -3935,7 +3942,7 @@ const FileUploadQuestion = (props) => {
       onChange,
       value: imageURL,
       placeholder: "Paste a url or select a file above",
-      className: "w-full mt-1 block px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\n          focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n          disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none"
+      className: "w-full mt-1 block px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\r\n          focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\r\n          disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none"
     }
   )));
 };
@@ -3951,7 +3958,7 @@ const TextQuestion = (props) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, !props.paragraph && /* @__PURE__ */ React.createElement(
     "input",
     {
-      className: "mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 text-sm placeholder-slate-400 border border-slate-300 rounded-sm shadow-sm\n        focus:outline-none focus:ring-1 focus:ring-sky-500 focus:border-sky-500\n        disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
+      className: "mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 text-sm placeholder-slate-400 border border-slate-300 rounded-sm shadow-sm\r\n        focus:outline-none focus:ring-1 focus:ring-sky-500 focus:border-sky-500\r\n        disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
       required: props.required,
       minLength: minimum,
       onChange,
@@ -3965,7 +3972,7 @@ const TextQuestion = (props) => {
   ), props.paragraph && /* @__PURE__ */ React.createElement(
     "textarea",
     {
-      className: "resize-none text-slate-500 focus:text-slate-600 h-24 mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\n        focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n        disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
+      className: "resize-none text-slate-500 focus:text-slate-600 h-24 mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\r\n        focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\r\n        disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
       required: props.required,
       minLength: minimum,
       onChange,
@@ -3988,7 +3995,7 @@ const DateQuestion = (props) => {
   return /* @__PURE__ */ React.createElement(
     "input",
     {
-      className: "mt-1 block w-full px-3 pt-3 pb-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\n        focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n        disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
+      className: "mt-1 block w-full px-3 pt-3 pb-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\r\n        focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\r\n        disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
       required: props.required,
       onChange,
       name: displayNameString(props.displayName),
@@ -4009,7 +4016,7 @@ const TimeQuestion = (props) => {
   return /* @__PURE__ */ React.createElement(
     "input",
     {
-      className: "mt-1 block w-full px-3 pt-3 pb-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\n        focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n        disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
+      className: "mt-1 block w-full px-3 pt-3 pb-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\r\n        focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\r\n        disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
       required: props.required,
       onChange,
       name: displayNameString(props.displayName),
@@ -4065,7 +4072,15 @@ const Image = (props) => {
         return;
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "relative max-w-[25rem] md:max-w-[40rem] md:w-[40rem] overflow-hidden" }, /* @__PURE__ */ React.createElement("img", { referrerPolicy: "no-referrer", className: `h-full max-h-[25rem] w-full object-cover ${scale}`, alt: displayNameString(props.displayName), src: props.url }), /* @__PURE__ */ React.createElement("div", { className: "absolute rounded-sm shadow-md bottom-5 right-5 z-5 bg-gray-100 font-bold" }, /* @__PURE__ */ React.createElement("span", { className: "p-5 cursor-pointer text-md text-gray-400 hover:text-gray-600", onClick: scaleUp }, "+"), /* @__PURE__ */ React.createElement("span", { className: "p-5 cursor-pointer text-xl text-gray-400 hover:text-gray-600", onClick: scaleDown }, "-")));
+  return /* @__PURE__ */ React.createElement("div", { className: "relative max-w-[25rem] md:max-w-[40rem] md:w-[40rem] overflow-hidden" }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      referrerPolicy: "no-referrer",
+      className: `h-full max-h-[25rem] w-full object-cover ${scale}`,
+      alt: displayNameString(props.displayName),
+      src: props.url
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "absolute rounded-sm shadow-md bottom-5 right-5 z-5 bg-gray-100 font-bold" }, /* @__PURE__ */ React.createElement("span", { className: "p-5 cursor-pointer text-md text-gray-400 hover:text-gray-600", onClick: scaleUp }, "+"), /* @__PURE__ */ React.createElement("span", { className: "p-5 cursor-pointer text-xl text-gray-400 hover:text-gray-600", onClick: scaleDown }, "-")));
 };
 const Embed = (props) => {
   return /* @__PURE__ */ React.createElement("div", { className: "max-w-[25rem] md:max-w-[40rem] md:w-[40rem]" }, /* @__PURE__ */ React.createElement(
@@ -4140,11 +4155,14 @@ const autoSave = (run, func, callback) => {
   let timeout;
   return (items, reflection, rating) => {
     clearTimeout(timeout);
-    timeout = setTimeout(async () => run && func && await func(items, reflection, rating).then((e) => {
-      if (!e && callback) {
-        callback();
-      }
-    }), AUTOSAVE_TIMEOUT);
+    timeout = setTimeout(
+      async () => run && func && await func(items, reflection, rating).then((e) => {
+        if (!e && callback) {
+          callback();
+        }
+      }),
+      AUTOSAVE_TIMEOUT
+    );
     return timeout;
   };
 };
@@ -4156,7 +4174,10 @@ const LearningForm = (props) => {
   const [showExitDialogue, setShowExitDialogue] = React.useState(false);
   const [showSubmitDialogue, setShowSubmitDialogue] = React.useState(false);
   const [isDraft, setIsDraft] = React.useState(false);
-  const autoSaveHandler = React.useCallback(autoSave(isDraft, props.onSaveDraft, () => setIsDraft(false)), [isDraft]);
+  const autoSaveHandler = React.useCallback(
+    autoSave(isDraft, props.onSaveDraft, () => setIsDraft(false)),
+    [isDraft]
+  );
   const saveVisibility = isDraft ? "opacity-100 visible" : "opacity-0 invisible";
   const answers = [];
   const saveDraft = async () => {
@@ -4175,7 +4196,7 @@ const LearningForm = (props) => {
     }
   });
   const canReflect = !!reflection || answeredAllRequired;
-  const canSubmit = answeredAllRequired && reflection.length >= MIN_REFLECTION_LENGTH;
+  answeredAllRequired && reflection.length >= MIN_REFLECTION_LENGTH;
   const items = props.items || [];
   const currentAnswersKey = answers && answers.length > 0 ? JSON.stringify(answers) : null;
   React.useEffect(() => {
@@ -4236,15 +4257,7 @@ const LearningForm = (props) => {
     /* @__PURE__ */ React.createElement("div", { className: "w-3 h-3 min-w-3" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "leftArrow" })),
     /* @__PURE__ */ React.createElement("span", { className: "text-md" }, "Back")
   ), !!props.displayName && /* @__PURE__ */ React.createElement("h2", { className: "h-max font-semibold text-2xl" }, props.displayName), !!props.description && /* @__PURE__ */ React.createElement("p", { className: "h-max max-h-[14rem] overflow-y-auto whitespace-pre-line" }, props.description), !!props.eta && /* @__PURE__ */ React.createElement("p", { className: "text-sm h-max font-semibold" }, "Estimated Completion Time: ", props.eta)), /* @__PURE__ */ React.createElement("img", { className: "grow h-full max-h-[30rem] w-full object-cover", alt: props.displayName, src: props.imageURL })), /* @__PURE__ */ React.createElement("form", { className: "w-full max-w-[62.5rem] m-auto grid grid-cols-1 gap-y-12", onSubmit }, items.map((item) => {
-    return /* @__PURE__ */ React.createElement(
-      FormItem,
-      __spreadProps$6(__spreadValues$8({
-        key: item.itemId
-      }, item), {
-        minText: 0,
-        disabled: !!props.preview
-      })
-    );
+    return /* @__PURE__ */ React.createElement(FormItem, __spreadProps$6(__spreadValues$8({ key: item.itemId }, item), { minText: 0, disabled: !!props.preview }));
   }), /* @__PURE__ */ React.createElement(
     FormItem,
     {
@@ -4259,7 +4272,18 @@ const LearningForm = (props) => {
       minText: MIN_REFLECTION_LENGTH,
       responses: reflection ? [reflection] : void 0
     }
-  ), /* @__PURE__ */ React.createElement(FormItem, null, /* @__PURE__ */ React.createElement(Rating, { disabled: !canReflect || !!props.preview, rating, setRating })), !props.preview && /* @__PURE__ */ React.createElement("div", { className: "w-max m-auto" }, /* @__PURE__ */ React.createElement(Button, { disabled: !canSubmit, type: "submit", color: "blue", size: "md", spacing: "md", border: "rounded", theme: "dark", text: "Submit" }))), !props.preview && /* @__PURE__ */ React.createElement("div", { className: `fixed bottom-10 right-14 transition ease-in-out ${saveVisibility}` }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(FormItem, null, /* @__PURE__ */ React.createElement(Rating, { disabled: !canReflect || !!props.preview, rating, setRating })), !props.preview && /* @__PURE__ */ React.createElement("div", { className: "w-max m-auto" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "submit",
+      color: "blue",
+      size: "md",
+      spacing: "md",
+      border: "rounded",
+      theme: "dark",
+      text: "Submit"
+    }
+  ))), !props.preview && /* @__PURE__ */ React.createElement("div", { className: `fixed bottom-10 right-14 transition ease-in-out ${saveVisibility}` }, /* @__PURE__ */ React.createElement(
     Button,
     {
       type: "button",