docs: write useCheckboxGroup

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';
 
 <Meta of={useCheckboxGroupStories} />
 
 # useCheckboxGroup
 
-Information coming.
-See Checkbox in the meantime.
+En react hook for å koble sammen en gruppe av checkboxer.
+
+<Primary />
+
+## 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 (
+  <Fieldset>
+    <Checkbox label='E-post' {...getCheckboxProps('epost')} />
+    <Checkbox label='Telefon' {...getCheckboxProps('telefon')} />
+    <Checkbox label='SMS' {...getCheckboxProps('sms')} />
+    <ValidationMessage {...validationMessageProps} />
+  </Fieldset>
+);
+```
+
+## 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.
+
+<Canvas of={useCheckboxGroupStories.AllowIndeterminate} />
+
+## Props
+
+<ArgTypes of={useCheckboxGroupStories} />

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) => (
-  <Checkbox aria-label='label' value='' />
-);
-
-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<UseCheckboxGroupProps> = (args) => {
+  const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({
+    value: ['epost'],
+    ...args,
+  });
+
+  return (
+    <Fieldset>
+      <Checkbox label='E-post' {...getCheckboxProps('epost')} />
+      <Checkbox label='Telefon' {...getCheckboxProps('telefon')} />
+      <Checkbox label='SMS' {...getCheckboxProps('sms')} />
+      <ValidationMessage {...validationMessageProps} />
+    </Fieldset>
+  );
+};
+
+export const AllowIndeterminate: StoryFn<UseCheckboxGroupProps> = (args) => {
+  const { getCheckboxProps } = useCheckboxGroup({
+    name: 'my-checkbox',
+    ...args,
+  });
+  return (
+    <Table>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>
+            <Checkbox
+              aria-label='Select all'
+              {...getCheckboxProps({
+                allowIndeterminate: true,
+                value: 'all',
+              })}
+            />
+          </Table.HeaderCell>
+          <Table.HeaderCell>Header</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {[1, 2].map((row) => (
+          <Table.Row key={row}>
+            <Table.Cell>
+              <Checkbox
+                aria-label={`Check ${row}`}
+                {...getCheckboxProps(`${row}`)}
+              />
+            </Table.Cell>
+            <Table.Cell>Content</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};