import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-picker.js' ; import { Picker } from '../' ; import '@spectrum-web-components/menu/sp-menu.js' ; import '@spectrum-web-components/menu/sp-menu-item.js' ; export default { title : 'Picker/Sizes' , component : 'sp-picker' , argTypes : { onChange : { action : 'change' } , } , } ; type StoryArgs = { onChange : ( val : string ) => void ; } ; const picker = ( { onChange , size , } ) : TemplateResult => { return html `
        <sp-field-label for="picker-${ size }" size=${ size }>
            Where do you live?
        </sp-field-label>
        <sp-picker
            id="picker-${ size }"
            size=${ size }
            @change="${ ( event ) : void => { const picker = event . target as Picker ; onChange ( picker . value ) ; } }"
            label="Select a Country with a very long label, too long, in fact"
        >
            <sp-menu-item>Deselect</sp-menu-item>
            <sp-menu-item>Select Inverse</sp-menu-item>
            <sp-menu-item>Feather...</sp-menu-item>
            <sp-menu-item>Select and Mask...</sp-menu-item>
            <sp-menu-divider></sp-menu-divider>
            <sp-menu-item>Save Selection</sp-menu-item>
            <sp-menu-item disabled>Make Work Path</sp-menu-item>
        </sp-picker>
    ` ; } ; export const s = ( args ) : TemplateResult => picker ( { ... args , size : 's' } ) ; export const m = ( args ) : TemplateResult => picker ( { ... args , size : 'm' } ) ; export const l = ( args ) : TemplateResult => picker ( { ... args , size : 'l' } ) ; export const XL = ( args ) : TemplateResult => picker ( { ... args , size : 'xl' } ) ;