diff --git a/app/components/Checkbox/index.tsx b/app/components/Checkbox/index.tsx index 004d0591..449cd4f0 100644 --- a/app/components/Checkbox/index.tsx +++ b/app/components/Checkbox/index.tsx @@ -3,6 +3,10 @@ import { _cs } from '@togglecorp/fujs'; import ButtonLayout from '#components/ButtonLayout'; import DefaultCheckmark, { Props as CheckmarkProps } from '#components/Checkmark'; +import InputError from '#components/InputError'; +import InputHint from '#components/InputHint'; +import ListLayout from '#components/ListLayout'; +import { SpacingType } from '#utils/styles'; import styles from './styles.module.css'; @@ -19,6 +23,9 @@ export interface Props { value: boolean | undefined | null; onChange: (value: boolean, name: NAME) => void; name: NAME; + hint?: React.ReactNode; + error?: React.ReactNode; + spacing?: SpacingType; } function Checkbox(props: Props) { @@ -35,6 +42,9 @@ function Checkbox(props: Props) { labelClassName, indeterminate, name, + hint, + error, + spacing, ...otherProps } = props; @@ -46,50 +56,65 @@ function Checkbox(props: Props) { [name, onChange], ); - const className = _cs( - classNameFromProps, - indeterminate && styles.indeterminate, - !indeterminate && value && styles.checked, - readOnly && styles.readOnly, - ); - return ( ); } diff --git a/app/components/ZoomLevelSelectInput/index.tsx b/app/components/ZoomLevelSelectInput/index.tsx index 90bddef8..a3af5d89 100644 --- a/app/components/ZoomLevelSelectInput/index.tsx +++ b/app/components/ZoomLevelSelectInput/index.tsx @@ -83,7 +83,7 @@ function ZoomLevelSelectInput(props: Props) { error={error} disabled={disabled} nonClearable - hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. If you use a custom tile server you may be able to use even higher zoom levels." + hint="We use the zoom levels that the tile server provides. Please check for your area which zoom level is available before you create a project." /> ); } diff --git a/app/components/domain/CustomOptionInput/SubOptionInput/index.tsx b/app/components/domain/CustomOptionInput/SubOptionInput/index.tsx index 7e8de7b9..13663a6d 100644 --- a/app/components/domain/CustomOptionInput/SubOptionInput/index.tsx +++ b/app/components/domain/CustomOptionInput/SubOptionInput/index.tsx @@ -81,6 +81,7 @@ function SubOptionInput(props: Props) { error={error?.value} disabled={disabled} spacing="sm" + hint="Choose a value for each sub-option" /> diff --git a/app/components/domain/CustomOptionInput/index.tsx b/app/components/domain/CustomOptionInput/index.tsx index 74e7edce..adfaccd0 100644 --- a/app/components/domain/CustomOptionInput/index.tsx +++ b/app/components/domain/CustomOptionInput/index.tsx @@ -115,6 +115,7 @@ function CustomOptionInput(props: Props) { error={error?.title} disabled={disabled} spacing="sm" + hint="Provide 'Title' for each answer option (e.g. Yes, No, Offset)" />