import { html , TemplateResult } from '@spectrum-web-components/base' ; import '@spectrum-web-components/dialog/sp-dialog.js' ; import '@spectrum-web-components/menu/sp-menu.js' ; import '@spectrum-web-components/menu/sp-menu-item.js' ; import '@spectrum-web-components/menu/sp-menu-divider.js' ; import '../sp-tray.js' ; export default { title : 'Tray' , component : 'sp-tray' , args : { open : true , } , argTypes : { open : { name : 'open' , type : { name : 'boolean' , required : false } , description : 'Whether the tray is open.' , table : { type : { summary : 'boolean' } , defaultValue : { summary : false } , } , control : { type : 'boolean' , } , } , } , } ; type StoryArgs = { open ? : boolean ; } ; export const Default = ( args ) : TemplateResult => { return html `
        <sp-tray ?open=${ args . open }>
            <sp-dialog size="s">
                <h2 slot="heading">New Messages</h2>
                You have 5 new messages.
            </sp-dialog>
        </sp-tray>
    ` ; } ; export const menu = ( args ) : TemplateResult => { return html `
        <sp-tray ?open=${ args . open }>
            <sp-menu style="width: 100%">
                <sp-menu-item>Deselect</sp-menu-item>
                <sp-menu-item selected>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-menu>
        </sp-tray>
    ` ; } ;