diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx index 2e3118b..25e3b10 100644 --- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx +++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx @@ -8,6 +8,7 @@ import { CardStyles } from '../Card/Card.styles' import { CardBodyStyles } from '../CardBody/CardBody.styles' import { CardHeaderStyles } from '../CardHeader/CardHeader.styles' import { CheckboxStyles } from '../Checkbox/Checkbox.styles' +import { CheckboxGroupStyles } from '../CheckboxGroup/CheckboxGroup.styles' import { CollapseStyles } from '../Collapse/Collapse.styles' import { CollapseHeaderStyles } from '../CollapseHeader/CollapseHeader.styles' import { DropdownStyles } from '../Dropdown/Dropdown.styles' @@ -16,8 +17,6 @@ import { IconButtonStyles } from '../IconButton/IconButton.styles' import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles' import { ListBoxStyles } from '../ListBox/ListBox.styles' import { QuoteStyles } from '../Quote/Quote.styles' -import { RadioButtonStyles } from '../RadioButton/RadioButton.styles' -import { RadioButtonGroupStyles } from '../RadioButtonGroup/RadioButtonGroup.styles' import { TabItemStyles } from '../TabItem/TabItem.styles' import { TabsStyles } from '../Tabs/Tabs.styles' import { TagStyles } from '../Tag/Tag.styles' @@ -48,8 +47,7 @@ const componentStyles: Array | SerializedStyles> = QuoteStyles, CollapseStyles, CollapseHeaderStyles, - RadioButtonStyles, - RadioButtonGroupStyles, + CheckboxGroupStyles, ] export const CSSBaseline: React.FC<{ theme?: Theme }> = ({ diff --git a/packages/lsd-react/src/components/Checkbox/Checkbox.tsx b/packages/lsd-react/src/components/Checkbox/Checkbox.tsx index 43c649c..172981a 100644 --- a/packages/lsd-react/src/components/Checkbox/Checkbox.tsx +++ b/packages/lsd-react/src/components/Checkbox/Checkbox.tsx @@ -1,6 +1,7 @@ import clsx from 'clsx' import React, { useEffect, useRef, useState } from 'react' import { useInput } from '../../utils/useInput' +import { useCheckboxGroupContext } from '../CheckboxGroup/CheckboxGroup.context' import { CheckboxFilledIcon, CheckboxIcon } from '../Icons' import { CheckboxIndeterminateIcon } from '../Icons/CheckboxIndeterminate' import { Typography } from '../Typography' @@ -24,7 +25,7 @@ export const Checkbox: React.FC & { classes: typeof checkboxClasses } = ({ name, - size = 'large', + size: _size = 'large', onChange, checked, defaultChecked, @@ -43,6 +44,9 @@ export const Checkbox: React.FC & { ref, }) + const checkboxGroup = useCheckboxGroupContext() + const size = checkboxGroup?.size ?? _size + useEffect(() => { if (!ref.current) return diff --git a/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.classes.ts b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.classes.ts new file mode 100644 index 0000000..29703c1 --- /dev/null +++ b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.classes.ts @@ -0,0 +1,4 @@ +export const checkboxGroupClasses = { + root: `lsd-checkbox-group`, + label: `lsd-checkbox-group__label`, +} diff --git a/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.context.ts b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.context.ts new file mode 100644 index 0000000..3e08151 --- /dev/null +++ b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.context.ts @@ -0,0 +1,15 @@ +import React from 'react' +import { ActiveCheckboxType, CheckboxGroupProps } from './CheckboxGroup' + +export type CheckboxGroupContextType = { + activeCheckbox?: ActiveCheckboxType | null + setActiveCheckbox: (value: ActiveCheckboxType) => void + + size?: CheckboxGroupProps['size'] +} + +export const CheckboxGroupContext = + React.createContext(null as any) + +export const useCheckboxGroupContext = () => + React.useContext(CheckboxGroupContext) diff --git a/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.stories.tsx new file mode 100644 index 0000000..e3cf4fc --- /dev/null +++ b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.stories.tsx @@ -0,0 +1,35 @@ +import { Meta, Story } from '@storybook/react' +import { Checkbox } from '../Checkbox' +import { CheckboxGroup, CheckboxGroupProps } from './CheckboxGroup' + +export default { + title: 'CheckboxGroup', + component: CheckboxGroup, + argTypes: { + size: { + type: { + name: 'enum', + value: ['small', 'medium', 'large'], + }, + defaultValue: 'large', + }, + }, +} as Meta + +export const Root: Story = (args) => ( + + Checkbox label + Checkbox label + Checkbox label + Checkbox label + Checkbox label + Checkbox label + Checkbox label + Checkbox label + +) + +Root.args = { + size: 'large', + label: 'Label', +} diff --git a/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.styles.ts b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.styles.ts new file mode 100644 index 0000000..7445d7d --- /dev/null +++ b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.styles.ts @@ -0,0 +1,15 @@ +import { css } from '@emotion/react' +import { checkboxGroupClasses } from './CheckboxGroup.classes' + +export const CheckboxGroupStyles = css` + .${checkboxGroupClasses.root} { + display: flex; + flex-direction: column; + gap: 6px; + width: fit-content; + } + + .${checkboxGroupClasses.label} { + margin-bottom: 6px; + } +` diff --git a/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.tsx new file mode 100644 index 0000000..bcfb20b --- /dev/null +++ b/packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.tsx @@ -0,0 +1,49 @@ +import clsx from 'clsx' +import React, { useEffect, useRef, useState } from 'react' +import { CheckboxGroupContext } from './CheckboxGroup.context' +import { checkboxGroupClasses } from './CheckboxGroup.classes' +import { Typography } from '../Typography' + +export type ActiveCheckboxType = string | number | readonly string[] + +export type CheckboxGroupProps = React.HTMLAttributes & { + activeCheckbox?: ActiveCheckboxType | null + size?: 'small' | 'medium' | 'large' + label?: string +} + +export const CheckboxGroup: React.FC & { + classes: typeof checkboxGroupClasses +} = ({ size = 'large', label, activeCheckbox, children, ...props }) => { + const ref = useRef(null) + const [value, setValue] = useState(activeCheckbox) + + const setActiveCheckbox = (radioButton: ActiveCheckboxType) => { + setValue(radioButton) + } + + useEffect(() => setValue(activeCheckbox), [activeCheckbox]) + + return ( + +
+ + {label && label} + + {children} +
+
+ ) +} + +CheckboxGroup.classes = checkboxGroupClasses diff --git a/packages/lsd-react/src/components/CheckboxGroup/index.ts b/packages/lsd-react/src/components/CheckboxGroup/index.ts new file mode 100644 index 0000000..bc64625 --- /dev/null +++ b/packages/lsd-react/src/components/CheckboxGroup/index.ts @@ -0,0 +1 @@ +export * from './CheckboxGroup' diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts index 1c4c165..cc15bfb 100644 --- a/packages/lsd-react/src/index.ts +++ b/packages/lsd-react/src/index.ts @@ -18,5 +18,5 @@ export * from './components/TabItem' export * from './components/Tabs' export * from './components/Tag' export * from './components/Theme' -export * from './components/RadioButton' -export * from './components/RadioButtonGroup' +export * from './components/Checkbox' +export * from './components/CheckboxGroup'