Merge pull request #2308 from SpareBank1/develop_fiks-typerna-buttons…

…-storybook docs(ffe-buttons-react): fikser ts feil
SpareBank1 · Sep 23, 2024 · 8075e38 · 8075e38
2 parents cbb1042 + e28012e
commit 8075e38
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 66 deletions.
diff --git a/packages/ffe-buttons-react/src/ActionButton.stories.tsx b/packages/ffe-buttons-react/src/ActionButton.stories.tsx
@@ -1,26 +1,39 @@
 import React from 'react';
-import { ButtonGroup } from './ButtonGroup';
 import { ActionButton } from './ActionButton';
 import type { StoryObj, Meta } from '@storybook/react';
 
-const meta: Meta<typeof ActionButton> = {
+const Custom: React.FC<React.ComponentProps<'a'>> = props => (
+    <a {...props}>
+        {`Custom `}
+        {props.children}
+    </a>
+);
+
+const meta: Meta<typeof ActionButton<any>> = {
     title: 'components/buttons/ActionButton',
     component: ActionButton,
     tags: ['autodocs'],
+    argTypes: {
+        as: {
+            options: ['a', 'button', 'custom'],
+            mapping: {
+                '': 'a',
+                a: 'a',
+                button: 'button',
+                custom: Custom,
+            },
+        },
+    },
 };
 export default meta;
 
-type Story = StoryObj<typeof ActionButton>;
+type Story = StoryObj<typeof ActionButton<any>>;
 
 export const Standard: Story = {
     args: {
-        ariaLabel: 'Actionknapp',
+        as: 'button',
         ariaLoadingMessage: 'Vennligst vent...',
         isLoading: false,
     },
-    render: args => (
-        <ButtonGroup>
-            <ActionButton {...args}>Actionknapp</ActionButton>
-        </ButtonGroup>
-    ),
+    render: args => <ActionButton {...args}>Actionknapp</ActionButton>,
 };
diff --git a/packages/ffe-buttons-react/src/BackButton.stories.tsx b/packages/ffe-buttons-react/src/BackButton.stories.tsx
@@ -2,15 +2,36 @@ import React from 'react';
 import { BackButton } from './BackButton';
 import type { StoryObj, Meta } from '@storybook/react';
 
-const meta: Meta<typeof BackButton> = {
+const Custom: React.FC<React.ComponentProps<'a'>> = props => (
+    <a {...props}>
+        {`Custom `}
+        {props.children}
+    </a>
+);
+
+const meta: Meta<typeof BackButton<any>> = {
     title: 'components/buttons/BackButton',
     component: BackButton,
     tags: ['autodocs'],
+    argTypes: {
+        as: {
+            options: ['a', 'button', 'custom'],
+            mapping: {
+                '': 'a',
+                a: 'a',
+                button: 'button',
+                custom: Custom,
+            },
+        },
+    },
 };
 export default meta;
 
-type Story = StoryObj<typeof BackButton>;
+type Story = StoryObj<typeof BackButton<any>>;
 
 export const Standard: Story = {
+    args: {
+        as: 'a',
+    },
     render: args => <BackButton {...args}>Tilbake</BackButton>,
 };
diff --git a/packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx b/packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx
@@ -4,21 +4,37 @@ import { InlineExpandButton } from './InlineExpandButton';
 import { Collapse } from '@sb1/ffe-collapse-react';
 import { Paragraph } from '@sb1/ffe-core-react';
 
-const meta: Meta<typeof InlineExpandButton> = {
+const Custom: React.FC<React.ComponentProps<'a'>> = props => (
+    <a {...props}>
+        {`Custom `}
+        {props.children}
+    </a>
+);
+
+const meta: Meta<typeof InlineExpandButton<any>> = {
     title: 'components/buttons/InlineExpandButton',
     component: InlineExpandButton,
     tags: ['autodocs'],
-    argTypes: {},
+    argTypes: {
+        as: {
+            options: ['a', 'button', 'custom'],
+            mapping: {
+                '': 'button',
+                a: 'a',
+                button: 'button',
+                custom: Custom,
+            },
+        },
+    },
 };
 export default meta;
 
-type Story = StoryObj<typeof InlineExpandButton>;
+type Story = StoryObj<typeof InlineExpandButton<any>>;
 
 export const Standard: Story = {
     args: {
+        as: 'button',
         isExpanded: false,
-        showMoreText: 'Vis mer',
-        showLessText: 'Vis mindre',
     },
     render: function Render(args) {
         const collapseId = useId();
@@ -37,7 +53,7 @@ export const Standard: Story = {
                         isExpanded={isExpanded}
                         onClick={() => setExpanded(!isExpanded)}
                     >
-                        {isExpanded ? args.showLessText : args.showMoreText}
+                        {isExpanded ? 'Vis mer' : 'Vis mindre'}
                     </InlineExpandButton>
                 </Paragraph>
 

diff --git a/packages/ffe-buttons-react/src/PrimaryButton.stories.tsx b/packages/ffe-buttons-react/src/PrimaryButton.stories.tsx
@@ -1,26 +1,39 @@
 import React from 'react';
-import { ButtonGroup } from './ButtonGroup';
 import { PrimaryButton } from './PrimaryButton';
 import type { StoryObj, Meta } from '@storybook/react';
 
-const meta: Meta<typeof PrimaryButton> = {
+const Custom: React.FC<React.ComponentProps<'a'>> = props => (
+    <a {...props}>
+        {`Custom `}
+        {props.children}
+    </a>
+);
+
+const meta: Meta<typeof PrimaryButton<any>> = {
     title: 'components/buttons/PrimaryButton',
     component: PrimaryButton,
     tags: ['autodocs'],
+    argTypes: {
+        as: {
+            options: ['a', 'button', 'custom'],
+            mapping: {
+                '': 'button',
+                a: 'a',
+                button: 'button',
+                custom: Custom,
+            },
+        },
+    },
 };
 export default meta;
 
-type Story = StoryObj<typeof PrimaryButton>;
+type Story = StoryObj<typeof PrimaryButton<any>>;
 
 export const Standard: Story = {
     args: {
-        ariaLabel: 'Primærknapp',
+        as: 'button',
         ariaLoadingMessage: 'Vennligst vent...',
         isLoading: false,
     },
-    render: args => (
-        <ButtonGroup>
-            <PrimaryButton {...args}>Primærknapp</PrimaryButton>
-        </ButtonGroup>
-    ),
+    render: args => <PrimaryButton {...args}>Primærknapp</PrimaryButton>,
 };
diff --git a/packages/ffe-buttons-react/src/SecondaryButton.stories.tsx b/packages/ffe-buttons-react/src/SecondaryButton.stories.tsx
@@ -1,26 +1,39 @@
 import React from 'react';
-import { ButtonGroup } from './ButtonGroup';
 import { SecondaryButton } from './SecondaryButton';
 import type { StoryObj, Meta } from '@storybook/react';
 
-const meta: Meta<typeof SecondaryButton> = {
+const Custom: React.FC<React.ComponentProps<'a'>> = props => (
+    <a {...props}>
+        {`Custom `}
+        {props.children}
+    </a>
+);
+
+const meta: Meta<typeof SecondaryButton<any>> = {
     title: 'components/buttons/SecondaryButton',
     component: SecondaryButton,
     tags: ['autodocs'],
+    argTypes: {
+        as: {
+            options: ['a', 'button', 'custom'],
+            mapping: {
+                '': 'button',
+                a: 'a',
+                button: 'button',
+                custom: Custom,
+            },
+        },
+    },
 };
 export default meta;
 
-type Story = StoryObj<typeof SecondaryButton>;
+type Story = StoryObj<typeof SecondaryButton<any>>;
 
 export const Standard: Story = {
     args: {
-        ariaLabel: 'Sekundærknapp',
+        as: 'button',
         ariaLoadingMessage: 'Vennligst vent...',
         isLoading: false,
     },
-    render: args => (
-        <ButtonGroup>
-            <SecondaryButton {...args}>Sekundærknapp</SecondaryButton>
-        </ButtonGroup>
-    ),
+    render: args => <SecondaryButton {...args}>Sekundærknapp</SecondaryButton>,
 };
diff --git a/packages/ffe-buttons-react/src/ShortcutButton.stories.tsx b/packages/ffe-buttons-react/src/ShortcutButton.stories.tsx
@@ -1,26 +1,37 @@
 import React from 'react';
-import { ButtonGroup } from './ButtonGroup';
 import { ShortcutButton } from './ShortcutButton';
 import type { StoryObj, Meta } from '@storybook/react';
 
-const meta: Meta<typeof ShortcutButton> = {
+const Custom: React.FC<React.ComponentProps<'a'>> = props => (
+    <a {...props}>
+        {`Custom `}
+        {props.children}
+    </a>
+);
+
+const meta: Meta<typeof ShortcutButton<any>> = {
     title: 'components/buttons/ShortcutButton',
     component: ShortcutButton,
     tags: ['autodocs'],
+    argTypes: {
+        as: {
+            options: ['a', 'button', 'custom'],
+            mapping: {
+                '': 'button',
+                a: 'a',
+                button: 'button',
+                custom: Custom,
+            },
+        },
+    },
 };
 export default meta;
 
-type Story = StoryObj<typeof ShortcutButton>;
+type Story = StoryObj<typeof ShortcutButton<any>>;
 
 export const Standard: Story = {
     args: {
-        ariaLabel: 'Snarveiknapp',
+        as: 'a',
     },
-    render: args => (
-        <ButtonGroup>
-            <ShortcutButton {...args} as="a" href="#shortcutbutton">
-                Snarvei
-            </ShortcutButton>
-        </ButtonGroup>
-    ),
+    render: args => <ShortcutButton {...args}>Snarvei</ShortcutButton>,
 };
diff --git a/packages/ffe-buttons-react/src/TaskButton.stories.tsx b/packages/ffe-buttons-react/src/TaskButton.stories.tsx
@@ -4,24 +4,42 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { Icon } from '@sb1/ffe-icons-react';
 import addIcon from '@sb1/ffe-icons/icons/open/300/md/add.svg';
 
-const meta: Meta<typeof TaskButton> = {
+const Custom: React.FC<React.ComponentProps<'a'>> = props => (
+    <a {...props}>
+        {`Custom `}
+        {props.children}
+    </a>
+);
+
+const meta: Meta<typeof TaskButton<any>> = {
     title: 'components/buttons/TaskButton',
     component: TaskButton,
     tags: ['autodocs'],
+    argTypes: {
+        as: {
+            options: ['a', 'button', 'custom'],
+            mapping: {
+                '': 'button',
+                a: 'a',
+                button: 'button',
+                custom: Custom,
+            },
+        },
+    },
 };
 export default meta;
 
-type Story = StoryObj<typeof TaskButton>;
+type Story = StoryObj<typeof TaskButton<any>>;
 
 export const Standard: Story = {
-    args: {},
-    render: function Render() {
+    args: {
+        as: 'button',
+    },
+    render: function Render(args) {
         return (
-            <>
-                <TaskButton icon={<Icon fileUrl={addIcon} />}>
-                    Legg til bruker
-                </TaskButton>
-            </>
+            <TaskButton icon={<Icon fileUrl={addIcon} {...args} />}>
+                Legg til bruker
+            </TaskButton>
         );
     },
 };
diff --git a/packages/ffe-buttons-react/src/TertiaryButton.stories.tsx b/packages/ffe-buttons-react/src/TertiaryButton.stories.tsx
@@ -1,26 +1,37 @@
 import React from 'react';
-import { ButtonGroup } from './ButtonGroup';
 import { TertiaryButton } from './TertiaryButton';
 import type { StoryObj, Meta } from '@storybook/react';
 
-const meta: Meta<typeof TertiaryButton> = {
+const Custom: React.FC<React.ComponentProps<'a'>> = props => (
+    <a {...props}>
+        {`Custom `}
+        {props.children}
+    </a>
+);
+
+const meta: Meta<typeof TertiaryButton<any>> = {
     title: 'components/buttons/TertiaryButton',
     component: TertiaryButton,
     tags: ['autodocs'],
+    argTypes: {
+        as: {
+            options: ['a', 'button', 'custom'],
+            mapping: {
+                '': 'button',
+                a: 'a',
+                button: 'button',
+                custom: Custom,
+            },
+        },
+    },
 };
 export default meta;
 
-type Story = StoryObj<typeof TertiaryButton>;
+type Story = StoryObj<typeof TertiaryButton<any>>;
 
 export const Standard: Story = {
     args: {
-        ariaLabel: 'Tertiærknapp',
-        ariaLoadingMessage: 'Vennligst vent...',
-        isLoading: false,
+        as: 'button',
     },
-    render: args => (
-        <ButtonGroup>
-            <TertiaryButton {...args}>Tertiærknapp</TertiaryButton>
-        </ButtonGroup>
-    ),
+    render: args => <TertiaryButton {...args}>Tertiærknapp</TertiaryButton>,
 };
diff --git a/packages/ffe-buttons-react/src/custom.d.ts b/packages/ffe-buttons-react/src/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: any;
+    export default content;
+}