import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-toast.js' ; import '@spectrum-web-components/button/sp-button.js' ; const toast = ( { variant = '' , open = true , content = '' , } ) : TemplateResult => html `
    <sp-toast
        variant=${ variant as '' | 'negative' | 'positive' | 'info' | 'error' | 'warning' }
        ?open=${ open }
    >
        ${ content }
        <sp-button slot="action" variant="overBackground" quiet>Undo</sp-button>
    </sp-toast>
` ; export default { component : 'sp-toast' , title : 'Toast' , args : { content : 'This is a toast message.' , open : true , } , argTypes : { content : { name : 'content' , type : { name : 'string' , required : false } , table : { type : { summary : 'string' } , defaultValue : { summary : '' } , } , control : 'text' , } , open : { name : 'open' , type : { name : 'boolean' , required : false } , description : 'Whether the toast is open.' , table : { type : { summary : 'boolean' } , defaultValue : { summary : false } , } , control : { type : 'boolean' , } , } , } , } ; interface Properties { variant : '' | 'negative' | 'positive' | 'info' | 'error' | 'warning' ; open : boolean ; content : string ; onClose : ( event : Event ) => void ; } export const Default = ( { variant , open , content , } ) : TemplateResult => { return toast ( { variant , open , content } ) ; } ; const variantDemo = ( { variant , open , content , } ) : TemplateResult => { return toast ( { variant , open , content } ) ; } ; export const Positive = ( args ) : TemplateResult => variantDemo ( { ... args , variant : 'positive' } ) ; export const Negative = ( args ) : TemplateResult => variantDemo ( { ... args , variant : 'negative' } ) ; export const Info = ( args ) : TemplateResult => variantDemo ( { ... args , variant : 'info' } ) ;