diff --git a/.storybook/checkbox.stories.tsx b/.storybook/checkbox.stories.tsx new file mode 100644 index 0000000..9c3b767 --- /dev/null +++ b/.storybook/checkbox.stories.tsx @@ -0,0 +1,35 @@ +import { ThemeProvider } from 'styled-components'; +import { Checkbox } from '../src'; +import { theme } from '../src/theme'; +import { GlobalStyles } from '../src/globalStyles'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React from 'react'; + +const meta = { + component: Checkbox, + decorators: [ + (Story) => ( +
+ + + + + Outer state handler has to be passed for checkbox to work + + +
+ ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + value: false, + onClick: () => console.log('1'), + children: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sollicitudin sem lectus, vitae convallis urna ultricies at. Sed hendrerit bibendum urna. Praesent arcu sapien, porta blandit neque cursus, scelerisque ullamcorper ligula. Suspendisse malesuada nulla sed turpis tincidunt porttitor non a sapien. Pellentesque vitae risus nec tortor faucibus tincidunt accumsan quis lorem. Phasellus vestibulum purus id lorem bibendum molestie. In tincidunt consequat quam. Donec auctor erat semper diam eleifend aliquam. Fusce egestas sapien tellus, sit amet blandit tellus suscipit vel. Maecenas eu dictum felis. Quisque bibendum nulla tellus, eu tincidunt urna eleifend ut.', + }, +}; diff --git a/.storybook/select.stories.tsx b/.storybook/select.stories.tsx index 0365c52..831424c 100644 --- a/.storybook/select.stories.tsx +++ b/.storybook/select.stories.tsx @@ -13,6 +13,9 @@ const meta = { + + Outer state handler has to be passed for select to work + ), diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx new file mode 100644 index 0000000..ff00eef --- /dev/null +++ b/src/components/Checkbox/Checkbox.tsx @@ -0,0 +1,46 @@ +import { useId, useState } from 'react'; +import type { CheckboxProps } from './types.js'; +import { CheckboxComponent, CheckboxContent } from './styles.js'; +import React from 'react'; +import { theme } from '../../theme.js'; + +export const Checkbox = ({ + $sizeVariant = 'small', + $contentSizeVariant, + color = theme.colors.primary, + children, + disabled = false, + name, + value, + onClick, +}: CheckboxProps) => { + const labelId = useId(); + + const handleClick = () => { + onClick(!value); + }; + + return ( +
+ + + {children} + +
+ ); +}; diff --git a/src/components/Checkbox/styles.ts b/src/components/Checkbox/styles.ts new file mode 100644 index 0000000..352a17d --- /dev/null +++ b/src/components/Checkbox/styles.ts @@ -0,0 +1,81 @@ +import { styled } from 'styled-components'; +import type { CheckboxSizeVariant } from './types.js'; +import { theme } from '../../theme.js'; + +const DEFAULT_CHECKBOX_SIZE = 17; +const DEFAULT_CONTENT_FONT_SIZE = 10; + +const getCheckboxSize = (size: CheckboxSizeVariant) => { + switch (size) { + case 'small': + return ` + width: ${DEFAULT_CHECKBOX_SIZE}px; + height: ${DEFAULT_CHECKBOX_SIZE}px; + border-radius: 4px; + border: 1px solid; + `; + case 'medium': + return ` + width: ${DEFAULT_CHECKBOX_SIZE + 3}px; + height: ${DEFAULT_CHECKBOX_SIZE + 3}px; + border-radius: 6px; + border: 2px solid; + `; + case 'big': + return ` + width: ${DEFAULT_CHECKBOX_SIZE + 6}px; + height: ${DEFAULT_CHECKBOX_SIZE + 6}px; + border-radius: 8px; + border: 3px solid; + `; + } +}; + +const getContentSize = (size: CheckboxSizeVariant) => { + switch (size) { + case 'small': + return ` + font-size: ${DEFAULT_CONTENT_FONT_SIZE}pt; + margin-left: 7px; + `; + case 'medium': + return ` + font-size: ${DEFAULT_CONTENT_FONT_SIZE + 2}pt; + margin-left: 10px; + `; + case 'big': + return ` + font-size: ${DEFAULT_CONTENT_FONT_SIZE + 4}pt; + margin-left: 13px; + `; + } +}; + +export const CheckboxComponent = styled.button<{ + $sizeVariant: CheckboxSizeVariant; + isChecked: boolean; + color: string; + disabled: boolean; +}>` + ${({ $sizeVariant }) => $sizeVariant && getCheckboxSize($sizeVariant)} + cursor: pointer; + + padding: 2px; + border-color: ${theme.colors.main}; + outline: 1px solid + ${({ disabled }) => (disabled ? theme.colors.lightGray : theme.colors.dark)}; + background-color: ${({ isChecked, color }) => + isChecked ? color : theme.colors.main}; + + &:focus { + outline: 1px dashed ${theme.colors.dark}; + } +`; + +export const CheckboxContent = styled.p<{ $sizeVariant: CheckboxSizeVariant }>` + margin: 0; + ${({ $sizeVariant }) => $sizeVariant && getContentSize($sizeVariant)} + + color: ${theme.colors.lightGray}; + width: fit-content; +`; diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts new file mode 100644 index 0000000..47cd179 --- /dev/null +++ b/src/components/Checkbox/types.ts @@ -0,0 +1,12 @@ +export interface CheckboxProps { + children: React.ReactNode; + $sizeVariant?: CheckboxSizeVariant; + $contentSizeVariant?: CheckboxSizeVariant; + color?: string; + disabled?: boolean; + name?: string; + value: boolean; + onClick: (value: boolean) => void; +} + +export type CheckboxSizeVariant = 'small' | 'medium' | 'big'; diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 45aa856..b045765 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -36,10 +36,13 @@ export const Select = ({ ); }, [value, children]); - const handleOptionClick = useCallback((optionValue: string) => { - $onChange(optionValue); - setIsOpen(false); - }, [$onChange]); + const handleOptionClick = useCallback( + (optionValue: string) => { + $onChange(optionValue); + setIsOpen(false); + }, + [$onChange], + ); const handleUnfocus = (event: PointerEvent) => { if (!parentComponentRef.current?.contains(event.target as Node)) { @@ -49,7 +52,7 @@ export const Select = ({ useEffect(() => { if (parentComponentRef.current === null || !isOpen) return; - + setTimeout(() => { document.addEventListener('click', handleUnfocus); }, 0); @@ -71,7 +74,7 @@ export const Select = ({ {$labelContent} )} - setIsOpen(!isOpen)} aria-haspopup="listbox" aria-expanded={isOpen} @@ -85,10 +88,7 @@ export const Select = ({ )} {isOpen && ( - + {Children.map(children, (child) => { if (!isValidElement(child)) return child; diff --git a/src/index.tsx b/src/index.tsx index 02047d1..5f21a82 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,3 +3,4 @@ export { Link } from './components/Link/Link.js'; export { Input } from './components/Input/Input.js'; export { Select } from './components/Select/Select.js'; export { SelectChild } from './components/Select/SelectChild.js'; +export { Checkbox } from './components/Checkbox/Checkbox.js';