diff --git a/web/components/checkbox.css b/web/components/checkbox.css new file mode 100644 --- /dev/null +++ b/web/components/checkbox.css @@ -0,0 +1,25 @@ +.checkbox { + appearance: none; + background-color: transparent; + width: 24px; + height: 24px; + border: 1px solid var(--radio-border); + border-radius: 15%; + display: flex; + align-items: center; + justify-content: center; +} + +.checkbox::before { + content: ''; + width: 16px; + height: 16px; + border-radius: 15%; + transform: scale(0); + transition: 120ms transform ease-in-out; + background-color: var(--radio-color); +} + +.checkbox:checked::before { + transform: scale(1); +} diff --git a/web/components/checkbox.react.js b/web/components/checkbox.react.js new file mode 100644 --- /dev/null +++ b/web/components/checkbox.react.js @@ -0,0 +1,22 @@ +// @flow +import * as React from 'react'; + +import css from './checkbox.css'; + +type Props = { + +checked: boolean, +}; + +function Checkbox(props: Props): React.Node { + const { checked } = props; + return ( + + ); +} + +export default Checkbox; diff --git a/web/components/enum-settings-option.css b/web/components/enum-settings-option.css --- a/web/components/enum-settings-option.css +++ b/web/components/enum-settings-option.css @@ -3,6 +3,7 @@ padding: 16px 32px 16px 16px; align-items: center; border-radius: 8px; + cursor: pointer; } div.optionContainerSelected { @@ -13,6 +14,18 @@ margin-right: 24px; } +div.optionIconTop { + align-self: flex-start; +} + +div.optionIconCenter { + align-self: center; +} + +div.optionIconBottom { + align-self: flex-end; +} + div.optionContent { display: flex; flex-direction: column; diff --git a/web/components/enum-settings-option.react.js b/web/components/enum-settings-option.react.js --- a/web/components/enum-settings-option.react.js +++ b/web/components/enum-settings-option.react.js @@ -3,6 +3,7 @@ import classnames from 'classnames'; import * as React from 'react'; +import Checkbox from './checkbox.react'; import EnumSettingsOptionInfo from './enum-settings-option-info.react.js'; import css from './enum-settings-option.css'; import Radio from './radio.react'; @@ -12,6 +13,8 @@ +onSelect: () => void, +icon: React.Node, +title: string, + +type?: InputType, + +iconPosition?: IconPosition, +statements: $ReadOnlyArray<{ +statement: string, +isStatementValid: boolean, @@ -19,8 +22,19 @@ }>, }; +type InputType = 'radio' | 'checkbox'; +type IconPosition = 'top' | 'center' | 'bottom'; + function EnumSettingsOption(props: Props): React.Node { - const { icon, title, statements, selected, onSelect } = props; + const { + icon, + title, + statements, + selected, + onSelect, + type, + iconPosition = 'center', + } = props; const descriptionItems = React.useMemo( () => @@ -39,6 +53,16 @@ [selected, statements], ); + const inputIcon = React.useMemo( + () => + 'checkbox' === type ? ( + + ) : ( + + ), + [type, selected], + ); + const optionContainerClasses = React.useMemo( () => classnames(css.optionContainer, { @@ -46,14 +70,29 @@ }), [selected], ); + + const iconPositionClassnames = React.useMemo( + () => ({ + top: css.optionIconTop, + center: css.optionIconCenter, + bottom: css.optionIconBottom, + }), + [], + ); + + const optionIconClasses = React.useMemo( + () => classnames(css.optionIcon, iconPositionClassnames[iconPosition]), + [iconPosition, iconPositionClassnames], + ); + return (
-
{icon}
+
{icon}
{title}
{descriptionItems}
- + {inputIcon}
); }