Extract a CheckboxInput component from onboarding flow

components/dashboard/src/components/forms/CheckboxInputField.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import classNames from "classnames";
+import { FC, ReactNode, useCallback } from "react";
+import { useId } from "../../hooks/useId";
+import { InputField } from "./InputField";
+import { InputFieldHint } from "./InputFieldHint";
+
+type CheckboxInputFieldProps = {
+    label: string;
+    error?: ReactNode;
+    className?: string;
+};
+export const CheckboxInputField: FC<CheckboxInputFieldProps> = ({ label, error, className, children }) => {
+    return (
+        <InputField label={label} className={className} error={error}>
+            <div className="space-y-2 ml-2">{children}</div>
+        </InputField>
+    );
+};
+
+type CheckboxInputProps = {
+    id?: string;
+    value: string;
+    checked: boolean;
+    disabled?: boolean;
+    label: string;
+    hint?: string;
+    onChange: (checked: boolean) => void;
+};
+export const CheckboxInput: FC<CheckboxInputProps> = ({
+    id,
+    value,
+    label,
+    hint,
+    checked,
+    disabled = false,
+    onChange,
+}) => {
+    const maybeId = useId();
+    const elementId = id || maybeId;
+
+    const handleChange = useCallback(
+        (e) => {
+            onChange(e.target.checked);
+        },
+        [onChange],
+    );
+
+    return (
+        <label className="flex space-x-2 justify-start items-start" htmlFor={elementId}>
+            <input
+                type="checkbox"
+                className={classNames(
+                    "h-4 w-4 mt-0.5 rounded cursor-pointer border-2 dark:filter-invert",
+                    "focus:ring-2 focus:border-gray-900 ring-blue-400 dark:focus:border-gray-800",
+                    "border-gray-600 dark:border-gray-900 bg-transparent",
+                    { "bg-gray-600 dark:bg-gray-900": checked },
+                )}
+                value={value}
+                id={elementId}
+                checked={checked}
+                disabled={disabled}
+                onChange={handleChange}
+            />
+            <div className="flex flex-col">
+                <span
+                    className={classNames(
+                        "text-sm font-semibold cursor-pointer",
+                        disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-600 dark:text-gray-100",
+                    )}
+                >
+                    {label}
+                </span>
+
+                {hint && <InputFieldHint disabled={disabled}>{hint}</InputFieldHint>}
+            </div>
+        </label>
+    );
+};

components/dashboard/src/components/forms/InputField.tsx

@@ -6,6 +6,7 @@
 
 import classNames from "classnames";
 import { FunctionComponent, memo, ReactNode } from "react";
+import { InputFieldHint } from "./InputFieldHint";
 
 type Props = {
     label?: ReactNode;
@@ -21,7 +22,7 @@ export const InputField: FunctionComponent<Props> = memo(({ label, id, hint, err
             {label && (
                 <label
                     className={classNames(
-                        "text-sm font-semibold dark:text-gray-400",
+                        "text-md font-semibold dark:text-gray-400",
                         error ? "text-red-600" : "text-gray-600",
                     )}
                     htmlFor={id}
@@ -31,7 +32,7 @@ export const InputField: FunctionComponent<Props> = memo(({ label, id, hint, err
             )}
             {children}
             {error && <span className="text-red-500 text-sm">{error}</span>}
-            {hint && <span className="text-gray-500 text-sm">{hint}</span>}
+            {hint && <InputFieldHint>{hint}</InputFieldHint>}
         </div>
     );
 });

components/dashboard/src/components/forms/InputFieldHint.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import classNames from "classnames";
+import { FC } from "react";
+
+type Props = {
+    disabled?: boolean;
+};
+export const InputFieldHint: FC<Props> = ({ disabled = false, children }) => {
+    return (
+        <span
+            className={classNames(
+                "text-sm",
+                disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-500 dark:text-gray-400",
+            )}
+        >
+            {children}
+        </span>
+    );
+};

components/dashboard/src/onboarding/StepOrgInfo.tsx

@@ -6,7 +6,7 @@
 
 import { User } from "@gitpod/gitpod-protocol";
 import { FC, useCallback, useMemo, useState } from "react";
-import { InputField } from "../components/forms/InputField";
+import { CheckboxInput, CheckboxInputField } from "../components/forms/CheckboxInputField";
 import { SelectInputField } from "../components/forms/SelectInputField";
 import { TextInputField } from "../components/forms/TextInputField";
 import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutation";
@@ -187,55 +187,41 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                 onBlur={websiteError.onBlur}
             />
 
-            <InputField label="I'm exploring Gitpod..." />
-            <div className="mt-4 ml-2 space-y-2">
+            <CheckboxInputField label="I'm exploring Gitpod...">
                 {explorationReasonsOptions.map((o) => (
-                    <div key={o.value} className="flex space-x-2 justify-start items-center">
-                        <input
-                            type="checkbox"
-                            className="rounded"
-                            value={o.value}
-                            id={`explore_${o.value}`}
-                            checked={explorationReasons.includes(o.value)}
-                            onChange={(e) => {
-                                if (e.target.checked) {
-                                    addExplorationReason(o.value);
-                                } else {
-                                    removeExplorationReason(o.value);
-                                }
-                            }}
-                        />
-                        <label className="text-sm dark:text-gray-400 text-gray-600" htmlFor={`explore_${o.value}`}>
-                            {o.label}
-                        </label>
-                    </div>
+                    <CheckboxInput
+                        key={o.value}
+                        value={o.value}
+                        label={o.label}
+                        checked={explorationReasons.includes(o.value)}
+                        onChange={(checked) => {
+                            if (checked) {
+                                addExplorationReason(o.value);
+                            } else {
+                                removeExplorationReason(o.value);
+                            }
+                        }}
+                    />
                 ))}
-            </div>
+            </CheckboxInputField>
 
-            <InputField label="I'm signing up for Gitpod to..." />
-            <div className="mt-4 ml-2 space-y-2">
+            <CheckboxInputField label="I'm signing up for Gitpod to...">
                 {signupGoalsOptions.map((o) => (
-                    <div key={o.value} className="flex space-x-2 justify-start items-center">
-                        <input
-                            type="checkbox"
-                            className="rounded"
-                            value={o.value}
-                            id={`goals_${o.value}`}
-                            checked={signupGoals.includes(o.value)}
-                            onChange={(e) => {
-                                if (e.target.checked) {
-                                    addSignupGoal(o.value);
-                                } else {
-                                    removeSignupGoal(o.value);
-                                }
-                            }}
-                        />
-                        <label className="text-sm dark:text-gray-400 text-gray-600" htmlFor={`goals_${o.value}`}>
-                            {o.label}
-                        </label>
-                    </div>
+                    <CheckboxInput
+                        key={o.value}
+                        value={o.value}
+                        label={o.label}
+                        checked={signupGoals.includes(o.value)}
+                        onChange={(checked) => {
+                            if (checked) {
+                                addSignupGoal(o.value);
+                            } else {
+                                removeSignupGoal(o.value);
+                            }
+                        }}
+                    />
                 ))}
-            </div>
+            </CheckboxInputField>
 
             {signupGoals.includes(SIGNUP_GOALS_OTHER) && (
                 <TextInputField value={signupGoalsOther} placeholder="Please specify" onChange={setSignupGoalsOther} />