diff --git a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx b/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx index db40b4a781..345b12c5c1 100644 --- a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx +++ b/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.mdx @@ -1,9 +1,48 @@ -import { Meta } from '@storybook/blocks'; +import { Meta, Primary, Controls, Canvas, ArgTypes } from '@storybook/blocks'; +/* import { ArgsTable } from '@storybook/addon-essentials'; */ import * as useCheckboxGroupStories from './useCheckboxGroup.stories'; +import { useCheckboxGroup } from './useCheckboxGroup'; # useCheckboxGroup -Information coming. -See Checkbox in the meantime. +En react hook for å koble sammen en gruppe av checkboxer. + + + +## Bruk + +Fra `useCheckboxGroup` henter du ut `getCheckboxProps` som du sprer på checkboxene dine. +Du kan også hente ut `validationMessageProps`, `value` og `setValue`. + +I `getCheckboxProps` denne funksjonen er første parameter `value` som er en unik identifikator for checkboxen, eller eit objekt med alt som kan legges på en checkbox. +Dersom du sender inn eit object, så må du passe på å sette `value`. + +**Det er viktig at du sender inn props i `getCheckboxProps`, slik at du ikke overskriver vår funksjonalitet.** + +```tsx +const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({ + value: ['epost'], + ...args, +}); + +return ( +
+ + + + +
+); +``` + +## Tillat indeterminate + +Når du sprer `getCheckboxProps` på Checkboxen din, så kan du sende inn `allowIndeterminate: true` for å tillate at checkboxen kan være i en indeterminate tilstand. + + + +## Props + + diff --git a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx b/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx index 3e305694ec..e0d304be45 100644 --- a/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx +++ b/packages/react/src/utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories.tsx @@ -1,15 +1,18 @@ -import type { Meta } from '@storybook/react'; -import { Checkbox } from '../../../components'; -import type { UseCheckboxGroupProps } from './useCheckboxGroup'; +import type { Meta, StoryFn } from '@storybook/react'; +import { + Checkbox, + Fieldset, + Table, + ValidationMessage, +} from '../../../components'; +import { + type UseCheckboxGroupProps, + useCheckboxGroup, +} from './useCheckboxGroup'; -export const UseCheckboxGroup = (_props: UseCheckboxGroupProps) => ( - -); - -export default { +const meta: Meta = { title: 'Utilities/useCheckboxGroup', - tags: ['!dev'], // Hide from sidebar as documented in https://storybook.js.org/docs/writing-stories/tags - component: UseCheckboxGroup, + parameters: { chromatic: { disableSnapshot: true } }, argTypes: { name: { table: { type: { summary: 'string' } }, @@ -58,4 +61,60 @@ export default { description: 'Set required state of all checkboxes', }, }, -} as Meta; +}; + +export default meta; + +export const Default: StoryFn = (args) => { + const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({ + value: ['epost'], + ...args, + }); + + return ( +
+ + + + +
+ ); +}; + +export const AllowIndeterminate: StoryFn = (args) => { + const { getCheckboxProps } = useCheckboxGroup({ + name: 'my-checkbox', + ...args, + }); + return ( + + + + + + + Header + + + + {[1, 2].map((row) => ( + + + + + Content + + ))} + +
+ ); +};