import React from "react" ; import { Story } from "@storybook/react" ; import { useArgs } from "@storybook/client-api" ; import { Banner as Source } from "../../../../odyssey-react/src" ; import { Banner , BannerProps , Link } from "@okta/odyssey-react" ; import BannerMdx from "./Banner.mdx" ; export default { title : `Components/Banner` , component : Source , parameters : { layout : "fullscreen" , docs : { page : BannerMdx } } , argTypes : { children : { control : null } , title : { defaultValue : "Banner title" , control : "text" } , content : { defaultValue : "Additional string related to the title." , control : null } , dismissButtonLabel : { defaultValue : "Dismiss banner" , control : "text" } , open : { defaultValue : true } } } ; type OnDismissEvent = Parameters < NonNullable < BannerProps [ "onDismiss" ] > > [ number ] ; const Template = ( props ) => { const [ , updateArgs ] = useArgs ( ) ; let dismissProps = { } ; if ( props . onDismiss ) { dismissProps = { onDismiss : ( event ) => { if ( typeof props . onDismiss === "function" ) { props . onDismiss ( event ) ; } updateArgs ( { open : false } ) ; } } ; } return ( < Banner { ... props } { ... dismissProps } > < Link variant = "secondary" href = "https://www.okta.com" > Action Link < /Link> < /Banner>); } ; export const Info = Template . bind ( { } ) ; Info . args = { variant : "info" , dismissButtonLabel : undefined , onDismiss : undefined } ; export const Danger = Template . bind ( { } ) ; Danger . args = { variant : "danger" , dismissButtonLabel : undefined , onDismiss : undefined } ; export const Caution = Template . bind ( { } ) ; Caution . args = { variant : "caution" , dismissButtonLabel : undefined , onDismiss : undefined } ; export const Dismissable = Template . bind ( { } ) ; Dismissable . args = { onDismiss : ( ) => { console . log ( "Banner: onDismiss!" ) ; } } ; Dismissable . argTypes = { onDismiss : { control : { disable : false } } , dismissButtonLabel : { control : { disable : false , type : "text" } } } ;