docs(ffe-accordion-react): mdx file documentation

SpareBank1 · Sep 22, 2024 · 612efba · 612efba
1 parent a5272e9
commit 612efba
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/packages/ffe-accordion-react/src/Accordion.mdx b/packages/ffe-accordion-react/src/Accordion.mdx
@@ -0,0 +1,12 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as AccordionStories from './Accordion.stories.tsx';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+Accordion brukes der du har mye informasjon som du ønsker å gjøre tilgjengelig for brukere, uten at alt er visuelt synlig samtidig. En accordion er bygget opp av en «header» og et «panel», og i SpareBank 1 er hele «headeren» klikkbar.
+
+En accordion er bygget opp av to komponenter: `Accordion` og `AccordionItem`. Accordion-komponenten legges rundt alle AccordionItem's, for å gruppere og sette samme overskriftsnivå på alle.
+
+<Canvas of={AccordionStories.Standard} />
diff --git a/packages/ffe-accordion-react/src/Accordion.stories.tsx b/packages/ffe-accordion-react/src/Accordion.stories.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { Accordion } from './Accordion';
-import { AccordionItem } from './AccordionItem';
+import { Accordion } from './Accordion.tsx';
+import { AccordionItem } from './AccordionItem.tsx';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof Accordion> = {
     title: 'components/accordion/Accordion',
     component: Accordion,
-    tags: ['autodocs'],
 };
 export default meta;
 

diff --git a/packages/ffe-accordion-react/src/AccordionItem.mdx b/packages/ffe-accordion-react/src/AccordionItem.mdx
@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as AccordionItemStories from './AccordionItem.stories.tsx';
+
+<Meta of={AccordionItemStories} />
+
+# 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} />
diff --git a/packages/ffe-accordion-react/src/AccordionItem.stories.tsx b/packages/ffe-accordion-react/src/AccordionItem.stories.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { Accordion } from './Accordion';
-import { AccordionItem } from './AccordionItem';
+import { Accordion } from './Accordion.tsx';
+import { AccordionItem } from './AccordionItem.tsx';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof AccordionItem> = {
     title: 'components/accordion/AccordionItem',
     component: AccordionItem,
-    tags: ['autodocs'],
     argTypes: {
         ariaLabel: {
             type: 'string',