chore: forbedre storybook dokumentasjonen til ffe-accordion react

SpareBank1 · Mar 7, 2025 · 5060fe8 · 5060fe8
1 parent 06a0b85
commit 5060fe8
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 17 deletions.
diff --git a/packages/ffe-accordion-react/src/Accordion.mdx b/packages/ffe-accordion-react/src/Accordion.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as AccordionStories from './Accordion.stories.tsx';
+import * as AccordionStories from './Accordion.stories';
+import * as AccordionItemStories from './AccordionItem.stories';
 
 <Meta of={AccordionStories} />
 
@@ -33,5 +34,22 @@ import { Accordion, AccordionItem } from '@sb1/ffe-accordion';
 </Accordion>;
 ```
 
+## Med subtil bakgrunn
+
+<Canvas of={AccordionStories.WithSubtleBackground} />
+
+## Med ingen bakgrunn
+
 <Canvas of={AccordionStories.Standard} />
 <Controls of={AccordionStories.Standard} />
+
+
+# AccordionItem
+
+AccordionItem er hver enkel «header»- og «panel»-seksjon. De er lukket by default, men du kan velge at den skal være åpen fra start ved å sende med property `defaultOpen`.
+Alle `<AccordionItem />`-komponenter har innebygget funksjonalitet for å styre åpning og lukking. Men om ønskelig kan du også overstyre dette. Et bruksområde kan være å lage en komponent som kun kan ha ett element åpent om gangen.
+
+Bruker man isOpen-propen vil intern-logikk som styrer åpning og lukking være skrudd av.
+
+<Canvas of={AccordionItemStories.Standard} />
+<Controls of={AccordionItemStories.Standard} />
diff --git a/packages/ffe-accordion-react/src/Accordion.stories.tsx b/packages/ffe-accordion-react/src/Accordion.stories.tsx
@@ -11,6 +11,43 @@ export default meta;
 
 type Story = StoryObj<typeof Accordion>;
 
+export const WithSubtleBackground: Story = {
+    args: {
+        headingLevel: 2,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Dette eksempelet viser ',
+            },
+        },
+    },
+    render: args => (
+        <div
+            style={{
+                backgroundColor: 'var(--ffe-color-background-subtle)',
+                padding: 'var(--ffe-spacing-md)',
+                borderRadius: '8px',
+                border: '1px dashed var(--ffe-color-border-primary-subtle)',
+            }}
+        >
+            <Accordion {...args}>
+                <AccordionItem heading="Accordion med subtil bakgrunn">
+                    Denne accordionen vises på en subtil bakgrunn
+                </AccordionItem>
+                <AccordionItem heading="Mer informasjon">
+                    Accordion-innholdet har standard bakgrunnsfarge
+                </AccordionItem>
+                <AccordionItem heading="Ytterligere detaljer">
+                    Legg merke til kontrasten mellom den subtile
+                    container-bakgrunnen og standardbakgrunnen til det utvidede
+                    innholdet
+                </AccordionItem>
+            </Accordion>
+        </div>
+    ),
+};
+
 export const Standard: Story = {
     args: {
         headingLevel: 2,

diff --git a/packages/ffe-accordion-react/src/AccordionItem.mdx b/packages/ffe-accordion-react/src/AccordionItem.mdx
diff --git a/packages/ffe-accordion-react/src/AccordionItem.stories.tsx b/packages/ffe-accordion-react/src/AccordionItem.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Accordion } from './Accordion.tsx';
-import { AccordionItem } from './AccordionItem.tsx';
+import { Accordion } from './Accordion';
+import { AccordionItem } from './AccordionItem';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof AccordionItem> = {
@@ -12,6 +12,7 @@ const meta: Meta<typeof AccordionItem> = {
         },
     },
 };
+
 export default meta;
 
 type Story = StoryObj<typeof AccordionItem>;