import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-checkbox.js' ; export default { component : 'sp-checkbox' , title : 'Checkbox/Sizes' , argTypes : { onClick : { action : 'click' } , onChange : { action : 'change' } , } , } ; const checkbox = ( { size , checked , indeterminate , onClick , onChange , } ) : TemplateResult => { return html `
        <sp-checkbox
            size=${ size }
            ?checked=${ checked }
            ?indeterminate=${ indeterminate }
            @click="${ onClick }"
            @change="${ onChange }"
        >
            Checkbox
        </sp-checkbox>
    ` ; } ; type StoryArgs = { onClick : ( ) => void ; onChange : ( ) => void ; } ; export const s = ( args ) : TemplateResult => checkbox ( { ... args , size : 's' } ) ; export const sChecked = ( args ) : TemplateResult => checkbox ( { ... args , size : 's' , checked : true } ) ; export const sIndeterminate = ( args ) : TemplateResult => checkbox ( { ... args , size : 's' , indeterminate : true } ) ; export const m = ( args ) : TemplateResult => checkbox ( { ... args , size : 'm' } ) ; export const mChecked = ( args ) : TemplateResult => checkbox ( { ... args , size : 'm' , checked : true } ) ; export const mIndeterminate = ( args ) : TemplateResult => checkbox ( { ... args , size : 'm' , indeterminate : true } ) ; export const l = ( args ) : TemplateResult => checkbox ( { ... args , size : 'l' } ) ; export const lChecked = ( args ) : TemplateResult => checkbox ( { ... args , size : 'l' , checked : true } ) ; export const lIndeterminate = ( args ) : TemplateResult => checkbox ( { ... args , size : 'l' , indeterminate : true } ) ; export const XL = ( args ) : TemplateResult => checkbox ( { ... args , size : 'xl' } ) ; export const XLChecked = ( args ) : TemplateResult => checkbox ( { ... args , size : 'xl' , checked : true } ) ; export const XLIndeterminate = ( args ) : TemplateResult => checkbox ( { ... args , size : 'xl' , indeterminate : true } ) ;