import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-split-button.js' ; import '@spectrum-web-components/menu/sp-menu-item.js' ; export default { title : 'Split Button' , component : 'sp-split-button' , argTypes : { onFirstItem : { action : 'click: "Option 1"' } , onSecondItem : { action : 'click: "Option Really Extended"' } , onThirdItem : { action : 'click: "Short"' } , } , } ; type StoryArgs = { onFirstItem ? : ( ) => void ; onSecondItem ? : ( ) => void ; onThirdItem ? : ( ) => void ; } ; const menu = ( { onFirstItem , onSecondItem , onThirdItem , } ) : TemplateResult => html `
    <sp-menu-item @click=${ onFirstItem }>Option 1</sp-menu-item>
    <sp-menu-item @click=${ onSecondItem }>Option Really Extended</sp-menu-item>
    <sp-menu-item @click=${ onThirdItem }>Short</sp-menu-item>
` ; export const cta = ( options = { } ) : TemplateResult => { return html `
        <div>
            <sp-split-button>${ menu ( options ) }</sp-split-button>
            <sp-split-button left>${ menu ( options ) }</sp-split-button>
        </div>
    ` ; } ; cta . story = { name : 'Field, variant: CTA' , } ; export const ctaOpen = ( options = { } ) : TemplateResult => { return html `
        <div>
            <sp-split-button open>${ menu ( options ) }</sp-split-button>
        </div>
    ` ; } ; ctaOpen . story = { name : 'Field, Open, variant: CTA' , } ; export const primary = ( options = { } ) : TemplateResult => { return html `
        <div>
            <sp-split-button variant="primary">
                ${ menu ( options ) }
            </sp-split-button>
            <sp-split-button left variant="primary">
                ${ menu ( options ) }
            </sp-split-button>
        </div>
    ` ; } ; primary . story = { name : 'Field, variant: Primary' , } ; export const secondary = ( options = { } ) : TemplateResult => { return html `
        <div>
            <sp-split-button variant="secondary">
                ${ menu ( options ) }
            </sp-split-button>
            <sp-split-button left variant="secondary">
                ${ menu ( options ) }
            </sp-split-button>
        </div>
    ` ; } ; secondary . story = { name : 'Field, variant: Secondary' , } ; export const moreCta = ( options = { } ) : TemplateResult => { return html `
        <div>
            <sp-split-button type="more">${ menu ( options ) }</sp-split-button>
            <sp-split-button type="more" left>${ menu ( options ) }</sp-split-button>
        </div>
    ` ; } ; moreCta . story = { name : 'More, variant: CTA' , } ; export const moreCtaOpen = ( options = { } ) : TemplateResult => { return html `
        <div>
            <sp-split-button type="more" open>${ menu ( options ) }</sp-split-button>
        </div>
    ` ; } ; moreCtaOpen . story = { name : 'More, Open, variant: CTA' , } ; export const morePrimary = ( options = { } ) : TemplateResult => { return html `
        <div>
            <sp-split-button type="more" variant="primary">
                ${ menu ( options ) }
            </sp-split-button>
            <sp-split-button type="more" left variant="primary">
                ${ menu ( options ) }
            </sp-split-button>
        </div>
    ` ; } ; morePrimary . story = { name : 'More, variant: Primary' , } ; export const moreSecondary = ( options = { } ) : TemplateResult => { return html `
        <div>
            <sp-split-button type="more" variant="secondary">
                ${ menu ( options ) }
            </sp-split-button>
            <sp-split-button type="more" left variant="secondary">
                ${ menu ( options ) }
            </sp-split-button>
        </div>
    ` ; } ; moreSecondary . story = { name : 'More, variant: Secondary' , } ;