docs: update controlled stories (#2614)

resolves #2284 This does not change how we display `Accordion` and `Tabs` in their controlled story.
digdir · Oct 16, 2024 · 8a6ff15 · 8a6ff15
1 parent 05d164c
commit 8a6ff15
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 95 deletions.
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx
@@ -14,6 +14,7 @@ import { Button } from '../Button';
 import { Paragraph } from '../Paragraph';
 
 import { ToggleGroup } from '.';
+import { Divider } from '../Divider';
 import { Tooltip } from '../Tooltip';
 
 export default {
@@ -64,12 +65,6 @@ export const Kontrollert: StoryFn<typeof ToggleGroup> = () => {
   const [value, setValue] = useState<string>('utkast');
   return (
     <>
-      <div style={{ display: 'flex', gap: '4px' }}>
-        <Button size='sm' onClick={() => setValue('arkiv')}>
-          Velg Arkiv
-        </Button>
-      </div>
-      <br />
       <ToggleGroup value={value} size='md' onChange={setValue}>
         <ToggleGroup.Item value='innboks'>
           <EnvelopeClosedIcon fontSize='1.5rem' aria-hidden />
@@ -88,8 +83,11 @@ export const Kontrollert: StoryFn<typeof ToggleGroup> = () => {
           Sendt
         </ToggleGroup.Item>
       </ToggleGroup>
-      <br />
+      <Divider />
       <Paragraph>Du har valgt: {value}</Paragraph>
+      <Button size='sm' onClick={() => setValue('arkiv')}>
+        Velg Arkiv
+      </Button>
     </>
   );
 };
diff --git a/packages/react/src/components/form/Checkbox/CheckboxGroup.stories.tsx b/packages/react/src/components/form/Checkbox/CheckboxGroup.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { Checkbox } from '.';
-import { Button, Paragraph } from '../..';
+import { Button, Divider, Paragraph } from '../..';
 
 export default {
   title: 'Komponenter/Checkbox/Group',
@@ -59,13 +59,6 @@ export const Controlled: StoryFn<typeof Checkbox> = () => {
     );
   return (
     <>
-      <span style={{ display: 'flex', gap: '1rem' }}>
-        <Button onClick={() => myToggle('kroatia')}>Toggle Kroatia</Button>
-        <Button onClick={() => myToggle('hobsyssel')}>Toggle Hobsyssel</Button>
-      </span>
-      <br />
-      <Paragraph>Du har valgt: {value.toString()}</Paragraph>
-      <br />
       <Checkbox.Group
         legend='Skal du reise til noen av disse landene?'
         description='Velg alle landene du skal innom.'
@@ -80,6 +73,16 @@ export const Controlled: StoryFn<typeof Checkbox> = () => {
           Jeg skal ikke til noen av disse landene
         </Checkbox>
       </Checkbox.Group>
+
+      <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
+
+      <Paragraph style={{ margin: 'var(--ds-spacing-2) 0' }}>
+        Du har valgt: {value.toString()}
+      </Paragraph>
+      <span style={{ display: 'flex', gap: '1rem' }}>
+        <Button onClick={() => myToggle('kroatia')}>Toggle Kroatia</Button>
+        <Button onClick={() => myToggle('hobsyssel')}>Toggle Hobsyssel</Button>
+      </span>
     </>
   );
 };

diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -12,6 +12,7 @@ import { Switch } from '../Switch';
 
 import { data } from './data/data';
 
+import { Divider } from '../../Divider';
 import { Combobox } from './index';
 
 export default {
@@ -212,25 +213,6 @@ export const Controlled: StoryFn<typeof Combobox> = (args) => {
 
   return (
     <>
-      <Paragraph>Value er: {value.join(', ')}</Paragraph>
-      <Switch
-        checked={multiple}
-        onChange={(e) => {
-          setMultiple(e.target.checked);
-          setValue([]);
-        }}
-      >
-        Multiple
-      </Switch>
-      <Button
-        onClick={() => {
-          setValue(['leikanger']);
-        }}
-        style={{ marginBottom: '1rem' }}
-      >
-        Sett verdi til Leikanger
-      </Button>
-
       <Combobox
         {...args}
         key={multiple ? 'multiple' : 'single'}
@@ -247,6 +229,29 @@ export const Controlled: StoryFn<typeof Combobox> = (args) => {
           </Combobox.Option>
         ))}
       </Combobox>
+
+      <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
+
+      <Switch
+        checked={multiple}
+        onChange={(e) => {
+          setMultiple(e.target.checked);
+          setValue([]);
+        }}
+      >
+        Multiple
+      </Switch>
+
+      <Paragraph style={{ margin: 'var(--ds-spacing-2) 0' }}>
+        Value er: {value.join(', ')}
+      </Paragraph>
+      <Button
+        onClick={() => {
+          setValue(['leikanger']);
+        }}
+      >
+        Sett verdi til Leikanger
+      </Button>
     </>
   );
 };
@@ -398,6 +403,9 @@ export const WithChipsOutside: StoryFn<typeof Combobox> = (args) => {
           </Combobox.Option>
         ))}
       </Combobox>
+
+      <Divider />
+
       <Paragraph>Value er: {value.join(', ')}</Paragraph>
     </>
   );
@@ -438,6 +446,9 @@ export const SelectAll: StoryFn<typeof Combobox> = (args) => {
           </Combobox.Option>
         ))}
       </Combobox>
+
+      <Divider />
+
       <Paragraph>Value er: {value.join(', ')}</Paragraph>
     </>
   );
@@ -490,18 +501,6 @@ export const Loading: StoryFn<typeof Combobox> = (args) => {
 
   return (
     <>
-      <Button
-        onClick={() => {
-          setLoading(true);
-          setOptions([]);
-          setValue([]);
-        }}
-        style={{
-          marginBottom: '1rem',
-        }}
-      >
-        Clear Data
-      </Button>
       <Combobox
         {...args}
         value={value}
@@ -518,6 +517,18 @@ export const Loading: StoryFn<typeof Combobox> = (args) => {
           </Combobox.Option>
         ))}
       </Combobox>
+
+      <Divider />
+
+      <Button
+        onClick={() => {
+          setLoading(true);
+          setOptions([]);
+          setValue([]);
+        }}
+      >
+        Clear Data
+      </Button>
     </>
   );
 };

diff --git a/packages/react/src/components/form/Input/Input.stories.tsx b/packages/react/src/components/form/Input/Input.stories.tsx
@@ -1,7 +1,14 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useEffect, useRef, useState } from 'react';
 
-import { Button, Heading, Label, Paragraph, ValidationMessage } from '../..';
+import {
+  Button,
+  Divider,
+  Heading,
+  Label,
+  Paragraph,
+  ValidationMessage,
+} from '../..';
 
 import { Input } from '.';
 
@@ -128,15 +135,21 @@ export const Controlled: StoryFn<typeof Input> = (args) => {
 
   return (
     <>
-      <Paragraph>Du har skrevet inn: {value}</Paragraph>
       <Label htmlFor='input-controlled'>Kontroller meg!</Label>
       <Input
         id='input-controlled'
         value={value}
         onChange={(e) => setValue(e.target.value)}
         {...args}
       />
-      <Button onClick={() => setValue('Kake')}>Jeg vil ha Kake</Button>
+      <div>
+        <Divider />
+
+        <Paragraph style={{ margin: 'var(--ds-spacing-2) 0' }}>
+          Du har skrevet inn: {value}
+        </Paragraph>
+        <Button onClick={() => setValue('Kake')}>Jeg vil ha Kake</Button>
+      </div>
     </>
   );
 };

diff --git a/packages/react/src/components/form/Radio/RadioGroup.stories.tsx b/packages/react/src/components/form/Radio/RadioGroup.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { Radio } from '.';
-import { Button, Paragraph } from '../..';
+import { Button, Divider, Paragraph } from '../..';
 
 export default {
   title: 'Komponenter/Radio/Group',
@@ -52,13 +52,6 @@ export const Controlled: StoryFn<typeof Radio> = () => {
 
   return (
     <>
-      <span style={{ display: 'flex', gap: '1rem', alignItems: 'baseline' }}>
-        <Button onClick={() => setValue('flammen')}>Velg Flammen</Button>
-        <Button onClick={() => setValue('snadder')}>Velg Snadder</Button>
-        <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-          Du har valgt: {value}
-        </Paragraph>
-      </span>
       <br />
       <Radio.Group
         legend='Velg pizza'
@@ -68,14 +61,24 @@ export const Controlled: StoryFn<typeof Radio> = () => {
       >
         <Radio value='ost'>Bare ost</Radio>
         <Radio
-          value='Dobbeldekker'
+          value='dobbeldekker'
           description='Chorizo spesial med kokkens luksuskylling'
         >
           Dobbeldekker
         </Radio>
         <Radio value='flammen'>Flammen</Radio>
         <Radio value='snadder'>Snadder</Radio>
       </Radio.Group>
+
+      <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
+
+      <Paragraph style={{ margin: 'var(--ds-spacing-2) 0' }}>
+        Du har valgt: {value}
+      </Paragraph>
+      <span style={{ display: 'flex', gap: '1rem', alignItems: 'baseline' }}>
+        <Button onClick={() => setValue('flammen')}>Velg Flammen</Button>
+        <Button onClick={() => setValue('snadder')}>Velg Snadder</Button>
+      </span>
     </>
   );
 };

diff --git a/packages/react/src/components/form/Search/Search.stories.tsx b/packages/react/src/components/form/Search/Search.stories.tsx
@@ -2,7 +2,7 @@ import { MagnifyingGlassIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { Button, Heading, Paragraph } from '../..';
+import { Button, Divider, Heading, Paragraph } from '../..';
 
 import { Search } from '.';
 
@@ -36,23 +36,19 @@ export const Controlled: StoryFn<typeof Search> = () => {
   const [value, setValue] = useState<string>();
   return (
     <>
-      <Paragraph>Du har skrevet inn: {value}</Paragraph>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          marginTop: 'var(--ds-spacing-2)',
-          gap: 'var(--ds-spacing-2)',
-        }}
-      >
-        <Search
-          label='Kontroller meg!'
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onClear={() => setValue('')}
-        />
-        <Button onClick={() => setValue('Pizza')}>Jeg vil ha Pizza</Button>
-      </div>
+      <Search
+        label='Kontroller meg!'
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onClear={() => setValue('')}
+      />
+
+      <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
+
+      <Paragraph style={{ margin: 'var(--ds-spacing-2) 0' }}>
+        Du har skrevet inn: {value}
+      </Paragraph>
+      <Button onClick={() => setValue('Pizza')}>Jeg vil ha Pizza</Button>
     </>
   );
 };

diff --git a/packages/react/src/components/form/Textarea/Textarea.stories.tsx b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { Button, Label, Paragraph } from '../..';
+import { Button, Divider, Label, Paragraph } from '../..';
 
 import { Textarea } from '.';
 
@@ -82,14 +82,19 @@ export const Controlled: StoryFn<typeof Textarea> = (args) => {
 
   return (
     <>
-      <Paragraph>Du har skrevet inn: {value}</Paragraph>
       <Label htmlFor={args.id}>Kontroller meg!</Label>
       <Textarea
         cols={40}
         onChange={(e) => setValue(e.target.value)}
         value={value}
         {...args}
       />
+
+      <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
+
+      <Paragraph style={{ margin: 'var(--ds-spacing-2) 0' }}>
+        Du har skrevet inn: {value}
+      </Paragraph>
       <Button onClick={() => setValue('Pizza')}>Jeg vil ha Pizza</Button>
     </>
   );