diff --git a/packages/ffe-buttons-react/src/ActionButton.stories.tsx b/packages/ffe-buttons-react/src/ActionButton.stories.tsx index c8f6386d69..b2d4b8b563 100644 --- 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 = { +const Custom: React.FC> = props => ( + + {`Custom `} + {props.children} + +); + +const meta: Meta> = { 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; +type Story = StoryObj>; export const Standard: Story = { args: { - ariaLabel: 'Actionknapp', + as: 'button', ariaLoadingMessage: 'Vennligst vent...', isLoading: false, }, - render: args => ( - - Actionknapp - - ), + render: args => Actionknapp, }; diff --git a/packages/ffe-buttons-react/src/BackButton.stories.tsx b/packages/ffe-buttons-react/src/BackButton.stories.tsx index e18a372b04..75af770cda 100644 --- 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 = { +const Custom: React.FC> = props => ( + + {`Custom `} + {props.children} + +); + +const meta: Meta> = { 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; +type Story = StoryObj>; export const Standard: Story = { + args: { + as: 'a', + }, render: args => Tilbake, }; diff --git a/packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx b/packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx index 4045266d0c..5a0f1a29cb 100644 --- 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 = { +const Custom: React.FC> = props => ( + + {`Custom `} + {props.children} + +); + +const meta: Meta> = { 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; +type Story = StoryObj>; 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'} diff --git a/packages/ffe-buttons-react/src/PrimaryButton.stories.tsx b/packages/ffe-buttons-react/src/PrimaryButton.stories.tsx index 69c911ef21..a632df1993 100644 --- 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 = { +const Custom: React.FC> = props => ( + + {`Custom `} + {props.children} + +); + +const meta: Meta> = { 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; +type Story = StoryObj>; export const Standard: Story = { args: { - ariaLabel: 'Primærknapp', + as: 'button', ariaLoadingMessage: 'Vennligst vent...', isLoading: false, }, - render: args => ( - - Primærknapp - - ), + render: args => Primærknapp, }; diff --git a/packages/ffe-buttons-react/src/SecondaryButton.stories.tsx b/packages/ffe-buttons-react/src/SecondaryButton.stories.tsx index fa3d06ac2d..3ad44d44b0 100644 --- 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 = { +const Custom: React.FC> = props => ( + + {`Custom `} + {props.children} + +); + +const meta: Meta> = { 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; +type Story = StoryObj>; export const Standard: Story = { args: { - ariaLabel: 'Sekundærknapp', + as: 'button', ariaLoadingMessage: 'Vennligst vent...', isLoading: false, }, - render: args => ( - - Sekundærknapp - - ), + render: args => Sekundærknapp, }; diff --git a/packages/ffe-buttons-react/src/ShortcutButton.stories.tsx b/packages/ffe-buttons-react/src/ShortcutButton.stories.tsx index 59368de2e0..72773944d2 100644 --- 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 = { +const Custom: React.FC> = props => ( + + {`Custom `} + {props.children} + +); + +const meta: Meta> = { 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; +type Story = StoryObj>; export const Standard: Story = { args: { - ariaLabel: 'Snarveiknapp', + as: 'a', }, - render: args => ( - - - Snarvei - - - ), + render: args => Snarvei, }; diff --git a/packages/ffe-buttons-react/src/TaskButton.stories.tsx b/packages/ffe-buttons-react/src/TaskButton.stories.tsx index 3021212729..4a4b28cb16 100644 --- 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 = { +const Custom: React.FC> = props => ( + + {`Custom `} + {props.children} + +); + +const meta: Meta> = { 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; +type Story = StoryObj>; export const Standard: Story = { - args: {}, - render: function Render() { + args: { + as: 'button', + }, + render: function Render(args) { return ( - <> - }> - Legg til bruker - - + }> + Legg til bruker + ); }, }; diff --git a/packages/ffe-buttons-react/src/TertiaryButton.stories.tsx b/packages/ffe-buttons-react/src/TertiaryButton.stories.tsx index 7936b5d557..6dfece4473 100644 --- 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 = { +const Custom: React.FC> = props => ( + + {`Custom `} + {props.children} + +); + +const meta: Meta> = { 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; +type Story = StoryObj>; export const Standard: Story = { args: { - ariaLabel: 'Tertiærknapp', - ariaLoadingMessage: 'Vennligst vent...', - isLoading: false, + as: 'button', }, - render: args => ( - - Tertiærknapp - - ), + render: args => Tertiærknapp, }; diff --git a/packages/ffe-buttons-react/src/custom.d.ts b/packages/ffe-buttons-react/src/custom.d.ts new file mode 100644 index 0000000000..60bd434c6f --- /dev/null +++ b/packages/ffe-buttons-react/src/custom.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: any; + export default content; +}