import { html , TemplateResult } from '@spectrum-web-components/base' ; import '@spectrum-web-components/menu/sp-menu.js' ; import '@spectrum-web-components/menu/sp-menu-item.js' ; import { ActionMenuMarkup } from './' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js' ; export default { component : 'sp-action-menu' , title : 'Action menu' , argTypes : { disabled : { name : 'disabled' , type : { name : 'boolean' , required : false } , description : 'Disable this control. It will not receive focus or events.' , table : { type : { summary : 'boolean' } , defaultValue : { summary : false } , } , control : { type : 'boolean' , } , } , open : { name : 'open' , type : { name : 'boolean' , required : false } , description : 'Whether the menu is open or not.' , table : { type : { summary : 'boolean' } , defaultValue : { summary : false } , } , control : 'boolean' , } , visibleLabel : { name : 'Visible Label' , description : 'The placeholder content for the picker.' , type : { name : 'string' , required : false } , table : { type : { summary : 'string' } , defaultValue : { summary : '' } , } , control : 'text' , } , } , args : { visibleLabel : 'More Actions' , disabled : false , open : false , } , } ; interface StoryArgs { visibleLabel ? : string ; disabled ? : boolean ; open ? : boolean ; customIcon ? : string | TemplateResult ; selects ? : 'single' ; selected ? : boolean ; } const Template = ( args = { } ) : TemplateResult => ActionMenuMarkup ( args ) ; export const Default = ( args = { } ) : TemplateResult => Template ( args ) ; export const selects = ( args = { } ) : TemplateResult => Template ( { ... args , selects : 'single' , selected : true , } ) ; selects . args = { open : true , } ; export const iconOnly = ( args = { } ) : TemplateResult => Template ( args ) ; iconOnly . args = { visibleLabel : '' , } ; export const customIcon = ( args ) : TemplateResult => Template ( args ) ; customIcon . args = { customIcon : html `
        <sp-icon-settings slot="icon"></sp-icon-settings>
    ` , visibleLabel : '' , } ;