2023-11-07 06:35:05 +03:00
import { StoryFn , Meta } from '@storybook/react' ;
2022-10-22 08:24:29 +03:00
import { action } from '@storybook/addon-actions' ;
2022-09-07 10:00:28 +03:00
import { ActionButton } from './ActionButton' ;
2022-04-28 09:19:20 +03:00
2023-11-07 06:35:05 +03:00
const meta = {
2022-05-18 00:24:48 +03:00
title : 'owncast/Components/Action Buttons/Single button' ,
2022-05-08 02:13:06 +03:00
component : ActionButton ,
2022-05-13 06:52:19 +03:00
parameters : {
docs : {
description : {
component : ` An **Action Button** or **External Action Button** is a button that is used to trigger either an internal or external action. Many will show a modal, but they can also open a new tab to allow navigating to external pages. They are rendered horizontally within the Action Button Row. ` ,
} ,
} ,
} ,
2023-11-07 06:35:05 +03:00
} satisfies Meta < typeof ActionButton > ;
export default meta ;
2022-04-28 09:19:20 +03:00
2022-10-22 08:24:29 +03:00
const itemSelected = a = > {
console . log ( 'itemSelected' , a ) ;
action ( a . title ) ;
} ;
2023-11-07 06:35:05 +03:00
const Template : StoryFn < typeof ActionButton > = args = > (
2022-10-22 08:24:29 +03:00
< ActionButton externalActionSelected = { itemSelected } { ...args } / >
) ;
2022-04-28 09:19:20 +03:00
2023-11-07 06:35:05 +03:00
export const Example1 = {
render : Template ,
args : {
action : {
url : 'https://owncast.online/docs' ,
title : 'Documentation' ,
description : 'Owncast Documentation' ,
icon : 'https://owncast.online/images/logo.svg' ,
color : '#5232c8' ,
openExternally : false ,
} ,
2022-04-28 09:19:20 +03:00
} ,
} ;
2023-11-07 06:35:05 +03:00
export const Example2 = {
render : Template ,
args : {
action : {
url : 'https://opencollective.com/embed/owncast/donate' ,
title : 'Support Owncast' ,
description : 'Contribute to Owncast' ,
icon : 'https://opencollective.com/static/images/opencollective-icon.svg' ,
color : '#2b4863' ,
openExternally : false ,
} ,
2022-04-28 09:19:20 +03:00
} ,
} ;