Storybook tweaks

.storybook/main.ts

@@ -12,8 +12,8 @@ function getAbsolutePath(value: string): any {
 
 const config: StorybookConfig = {
     stories: [
-        '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
         '../packages/**/*.@(mdx)',
+        '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     ],
     addons: [
         getAbsolutePath('@storybook/addon-links'),

.storybook/preview.tsx

@@ -41,9 +41,15 @@ const preview: Preview = {
                 date: /Date$/i,
             },
         },
+        viewMode: 'docs',
         docs: {
             components,
         },
+        options: {
+            storySort: {
+                method: 'alphabetical',
+              },
+        },
     },
     decorators: [
         (Story, context) => {

packages/ffe-accordion-react/src/Accordion.stories.tsx

@@ -4,7 +4,7 @@ import { AccordionItem } from './AccordionItem';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof Accordion> = {
-    title: 'components/accordion/Accordion',
+    title: 'Komponenter/Accordion/Accordion',
     component: Accordion,
 };
 export default meta;

packages/ffe-accordion-react/src/AccordionItem.stories.tsx

@@ -4,7 +4,7 @@ import { AccordionItem } from './AccordionItem.tsx';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof AccordionItem> = {
-    title: 'components/accordion/AccordionItem',
+    title: 'Komponenter/Accordion/AccordionItem',
     component: AccordionItem,
     argTypes: {
         ariaLabel: {

packages/ffe-account-selector-react/src/account-selector-multi/AccountSelectorMulti.stories.tsx

@@ -6,7 +6,7 @@ import type { Account } from '../types';
 import { TertiaryButton } from '@sb1/ffe-buttons-react';
 
 const meta: Meta<typeof AccountSelectorMulti> = {
-    title: 'components/account-selector/AccountSelectorMulti',
+    title: 'Komponenter/Account-selector/AccountSelectorMulti',
     component: AccountSelectorMulti,
 };
 export default meta;

packages/ffe-account-selector-react/src/account-selector/AccountSelector.stories.tsx

@@ -5,7 +5,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { SmallText } from '@sb1/ffe-core-react';
 
 const meta: Meta<typeof AccountSelector> = {
-    title: 'components/account-selector/AccountSelector',
+    title: 'Komponenter/Account-selector/AccountSelector',
     component: AccountSelector,
     argTypes: {
         postListElement: {

packages/ffe-buttons-react/src/ActionButton.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof ActionButton<any>> = {
-    title: 'components/buttons/ActionButton',
+    title: 'Komponenter/Buttons/ActionButton',
     component: ActionButton,
     argTypes: {
         as: {

packages/ffe-buttons-react/src/BackButton.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof BackButton<any>> = {
-    title: 'components/buttons/BackButton',
+    title: 'Komponenter/Buttons/BackButton',
     component: BackButton,
     argTypes: {
         as: {

packages/ffe-buttons-react/src/ButtonGroup.stories.tsx

@@ -6,7 +6,7 @@ import { TertiaryButton } from './TertiaryButton';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof ButtonGroup> = {
-    title: 'components/buttons/ButtonGroup',
+    title: 'Komponenter/Buttons/ButtonGroup',
     component: ButtonGroup,
 };
 export default meta;

packages/ffe-buttons-react/src/Buttons.mdx

@@ -11,7 +11,7 @@ import {
     TableDataCell,
 } from '@sb1/ffe-tables-react';
 
-<Meta title="components/buttons/Buttons" />
+<Meta title="Komponenter/Buttons/Buttons" />
 
 # Knapper
 

packages/ffe-buttons-react/src/ExpandButton.stories.tsx

@@ -3,7 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { ExpandButton } from './ExpandButton';
 
 const meta: Meta<typeof ExpandButton> = {
-    title: 'components/buttons/ExpandButton',
+    title: 'Komponenter/Buttons/ExpandButton',
     component: ExpandButton,
     argTypes: {},
 };

packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx

@@ -12,7 +12,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof InlineExpandButton<any>> = {
-    title: 'components/buttons/InlineExpandButton',
+    title: 'Komponenter/Buttons/InlineExpandButton',
     component: InlineExpandButton,
     argTypes: {
         as: {

packages/ffe-buttons-react/src/PrimaryButton.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof PrimaryButton<any>> = {
-    title: 'components/buttons/PrimaryButton',
+    title: 'Komponenter/Buttons/PrimaryButton',
     component: PrimaryButton,
     argTypes: {
         as: {

packages/ffe-buttons-react/src/SecondaryButton.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof SecondaryButton<any>> = {
-    title: 'components/buttons/SecondaryButton',
+    title: 'Komponenter/Buttons/SecondaryButton',
     component: SecondaryButton,
     argTypes: {
         as: {

packages/ffe-buttons-react/src/ShortcutButton.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof ShortcutButton<any>> = {
-    title: 'components/buttons/ShortcutButton',
+    title: 'Komponenter/Buttons/ShortcutButton',
     component: ShortcutButton,
     argTypes: {
         as: {

packages/ffe-buttons-react/src/TaskButton.stories.tsx

@@ -11,7 +11,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof TaskButton<any>> = {
-    title: 'components/buttons/TaskButton',
+    title: 'Komponenter/Buttons/TaskButton',
     component: TaskButton,
     argTypes: {
         as: {

packages/ffe-buttons-react/src/TertiaryButton.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof TertiaryButton<any>> = {
-    title: 'components/buttons/TertiaryButton',
+    title: 'Komponenter/Buttons/TertiaryButton',
     component: TertiaryButton,
     argTypes: {
         as: {

packages/ffe-cards-react/src/CardBase.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'div'>> = props => (
 );
 
 const meta: Meta<typeof CardBase<any>> = {
-    title: 'components/cards/CardBase',
+    title: 'Komponenter/Cards/CardBase',
     component: CardBase,
     argTypes: {
         as: {

packages/ffe-cards-react/src/Cards.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Komponenter/Cards/Cards" />
+
+# Kort
+
+## Bruk av kort
+
+Kortene skal hjelpe brukerne med å navigere seg til riktig side. De skal gi en kort og tydelig oppsummering av hva slags informasjon som finnes på undersiden.

packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx

@@ -7,7 +7,7 @@ import { Heading2, Paragraph } from '@sb1/ffe-core-react';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof GroupCard> = {
-    title: 'components/cards/GroupCard',
+    title: 'Komponenter/Cards/GroupCard',
     component: GroupCard,
 };
 export default meta;

packages/ffe-cards-react/src/IconCard/IconCard.stories.tsx

@@ -11,7 +11,7 @@ const Custom: React.FC<React.ComponentProps<'div'>> = props => (
 );
 
 const meta: Meta<typeof IconCard<any>> = {
-    title: 'components/cards/IconCard',
+    title: 'Komponenter/Cards/IconCard',
     component: IconCard,
     argTypes: {
         as: {

packages/ffe-cards-react/src/IllustrationCard/IllustrationCard.stories.tsx

@@ -12,7 +12,7 @@ const Custom: React.FC<React.ComponentProps<'div'>> = props => (
 );
 
 const meta: Meta<typeof IllustrationCard<any>> = {
-    title: 'components/cards/IllustrationCard',
+    title: 'Komponenter/Cards/IllustrationCard',
     component: IllustrationCard,
     argTypes: {
         as: {

packages/ffe-cards-react/src/ImageCard/ImageCard.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'div'>> = props => (
 );
 
 const meta: Meta<typeof ImageCard<any>> = {
-    title: 'components/cards/ImageCard',
+    title: 'Komponenter/Cards/ImageCard',
     component: ImageCard,
     argTypes: {
         as: {

packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx

@@ -12,7 +12,7 @@ const Custom: React.FC<React.ComponentProps<'div'>> = props => (
 );
 
 const meta: Meta<typeof StippledCard<any>> = {
-    title: 'components/cards/StippledCard',
+    title: 'Komponenter/Cards/StippledCard',
     component: StippledCard,
     argTypes: {
         as: {

packages/ffe-cards-react/src/TextCard/TextCard.mdx

@@ -1,7 +1,10 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks';
 import * as TextCardStories from './TextCard.stories.tsx';
 
-<Meta of={TextCardStories} />
+<Meta 
+    of={TextCardStories}
+    parameters={{ viewMode: 'docs' }}
+/>
 
 # TextCard
 

packages/ffe-cards-react/src/TextCard/TextCard.stories.tsx

@@ -10,7 +10,7 @@ const Custom: React.FC<React.ComponentProps<'div'>> = props => (
 );
 
 const meta: Meta<typeof TextCard<any>> = {
-    title: 'components/cards/TextCard',
+    title: 'Komponenter/Cards/TextCard',
     component: TextCard,
     argTypes: {
         as: {

packages/ffe-cards-react/src/components/CardAction.stories.tsx

@@ -14,7 +14,7 @@ const Custom: React.FC<React.ComponentProps<'a'>> = props => (
 );
 
 const meta: Meta<typeof CardActionComponent<any>> = {
-    title: 'components/cards/CardAction',
+    title: 'Komponenter/Cards/CardAction',
     component: CardActionComponent,
     argTypes: {
         as: {

packages/ffe-chart-donut-react/src/ChartDonut.mdx

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as ChartDonutStories from './ChartDonut.stories.tsx';
+
+<Meta of={ChartDonutStories} />
+
+# ChartDonut
+
+Diagram i SpareBank 1-drakt.
+
+<Canvas of={ChartDonutStories.Standard} />
+<Controls of={ChartDonutStories.Standard} />
+
+Med egentilpasset innhold.
+
+<Canvas of={ChartDonutStories.Custom} />
+<Controls of={ChartDonutStories.Custom} />

packages/ffe-chart-donut-react/src/ChartDonut.stories.tsx

@@ -3,9 +3,8 @@ import { ChartDonut } from './ChartDonut';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof ChartDonut> = {
-    title: 'components/chart-donut/ChartDonut',
+    title: 'Komponenter/Chart-donut/ChartDonut',
     component: ChartDonut,
-    tags: ['autodocs'],
 };
 export default meta;
 

packages/ffe-chips-react/src/Chip.stories.tsx

@@ -4,7 +4,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { fargeFjell, spacingXs } from '@sb1/ffe-core';
 
 const meta: Meta<typeof Chip<any>> = {
-    title: 'components/chips/Chip',
+    title: 'Komponenter/Chips/Chip',
     component: Chip,
 };
 export default meta;

packages/ffe-chips-react/src/ChipRemovable.stories.tsx

@@ -4,7 +4,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { fargeFjell, spacingXs } from '@sb1/ffe-core';
 
 const meta: Meta<typeof ChipRemovable<any>> = {
-    title: 'components/chips/ChipRemovable',
+    title: 'Komponenter/Chips/ChipRemovable',
     component: ChipRemovable,
 };
 export default meta;

packages/ffe-chips-react/src/ChipSelectable.stories.tsx

@@ -4,7 +4,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { fargeFjell, spacingXs } from '@sb1/ffe-core';
 
 const meta: Meta<typeof ChipSelectable<any>> = {
-    title: 'components/chips/ChipSelectable',
+    title: 'Komponenter/Chips/ChipSelectable',
     component: ChipSelectable,
 };
 export default meta;

packages/ffe-collapse-react/src/Collapse.stories.tsx

@@ -4,7 +4,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { ExpandButton } from '@sb1/ffe-buttons-react';
 
 const meta: Meta<typeof Collapse> = {
-    title: 'components/collapse/Collapse',
+    title: 'Komponenter/Collapse/Collapse',
     component: Collapse,
     argTypes: {},
 };

packages/ffe-core-react/src/typography/DividerLine.stories.tsx

@@ -3,7 +3,7 @@ import { DividerLine } from './DividerLine';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof DividerLine> = {
-    title: 'components/core/DividerLine',
+    title: 'Komponenter/Core/DividerLine',
     component: DividerLine,
     tags: ['autodocs'],
 };

packages/ffe-core-react/src/typography/EmphasizedText.stories.tsx

@@ -3,7 +3,7 @@ import { EmphasizedText } from './EmphasizedText';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof EmphasizedText> = {
-    title: 'components/core/EmphasizedText',
+    title: 'Komponenter/Core/EmphasizedText',
     component: EmphasizedText,
 };
 export default meta;

packages/ffe-core-react/src/typography/Heading1.stories.tsx

@@ -3,7 +3,7 @@ import { Heading1 } from './Heading';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof Heading1> = {
-    title: 'components/core/Heading1',
+    title: 'Komponenter/Core/Heading1',
     component: Heading1,
 };
 export default meta;

packages/ffe-core-react/src/typography/Heading2.stories.tsx

@@ -3,7 +3,7 @@ import { Heading2 } from './Heading';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof Heading2> = {
-    title: 'components/core/Heading2',
+    title: 'Komponenter/Core/Heading2',
     component: Heading2,
 };
 export default meta;

packages/ffe-core-react/src/typography/Heading3.stories.tsx

@@ -3,7 +3,7 @@ import { Heading3 } from './Heading';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof Heading3> = {
-    title: 'components/core/Heading3',
+    title: 'Komponenter/Core/Heading3',
     component: Heading3,
 };
 export default meta;

packages/ffe-core-react/src/typography/Heading4.stories.tsx

@@ -3,7 +3,7 @@ import { Heading4 } from './Heading';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof Heading4> = {
-    title: 'components/core/Heading4',
+    title: 'Komponenter/Core/Heading4',
     component: Heading4,
 };
 export default meta;

packages/ffe-core-react/src/typography/Heading5.stories.tsx

@@ -3,7 +3,7 @@ import { Heading5 } from './Heading';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof Heading5> = {
-    title: 'components/core/Heading5',
+    title: 'Komponenter/Core/Heading5',
     component: Heading5,
 };
 export default meta;

packages/ffe-core-react/src/typography/Heading6.stories.tsx

@@ -3,7 +3,7 @@ import { Heading6 } from './Heading';
 import type { StoryObj, Meta } from '@storybook/react';
 
 const meta: Meta<typeof Heading6> = {
-    title: 'components/core/Heading6',
+    title: 'Komponenter/Core/Heading6',
     component: Heading6,
 };
 export default meta;