import { html , TemplateResult } from '@spectrum-web-components/base' ; import '@spectrum-web-components/icon/sp-icon.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js' ; import '../src' ; import '../sp-action-button.js' ; interface Properties { active ? : boolean ; quiet ? : boolean ; disabled ? : boolean ; selected ? : boolean ; toggles ? : boolean ; emphasized ? : boolean ; size ? : 's' | 'm' | 'l' | 'xl' ; holdAffordance ? : boolean ; icon ? : TemplateResult ; label ? : string ; } function renderButton ( properties ) { return html `
        <sp-action-button
            ?quiet="${ ! ! properties . quiet }"
            ?emphasized="${ ! ! properties . emphasized }"
            ?disabled=${ ! ! properties . disabled }
            ?selected=${ ! ! properties . selected }
            ?toggles=${ ! ! properties . toggles }
            size=${ properties . size || 'm' }
            ?hold-affordance=${ ! ! properties . holdAffordance }
            ?active=${ ! ! properties . active }
        >
            ${ properties . icon }${ properties . label }
        </sp-action-button>
    ` ; } function renderButtonsSelected ( properties ) { const icon = html `
        <sp-icon-edit hidden slot="icon"></sp-icon-edit>
    ` ; const label = 'Edit' ; const emphasized = true ; const holdAffordance = true ; const quiet = true ; const selected = true ; const disabled = true ; const disabledArgs = Object . assign ( { } , properties , { disabled : true } ) ; const selectedArgs = Object . assign ( { } , properties , { selected : true } ) ; return html `
        <div>
            ${ renderButton ( { ... properties , label , } ) }
            ${ renderButton ( { ... properties , label , icon , } ) }
            ${ renderButton ( { ... properties , icon , } ) }
            ${ renderButton ( { ... properties , icon , holdAffordance , } ) }
            ${ renderButton ( { ... properties , icon , quiet , } ) }
            ${ renderButton ( { ... properties , icon , quiet , disabled , } ) }
            ${ renderButton ( { ... properties , icon , quiet , disabled , selected , } ) }
            ${ renderButton ( { ... selectedArgs , icon , } ) }
            ${ renderButton ( { ... selectedArgs , emphasized , icon , } ) }
            ${ renderButton ( { ... disabledArgs , icon , } ) }
        </div>
    ` ; } export default { component : 'sp-action-button' , title : 'Action Button/Sizes' , } ; export const s = ( args ) : TemplateResult => renderButtonsSelected ( args ) ; s . args = { size : 's' , } ; export const m = ( args ) : TemplateResult => renderButtonsSelected ( args ) ; m . args = { size : 'm' , } ; export const l = ( args ) : TemplateResult => renderButtonsSelected ( args ) ; l . args = { size : 'l' , } ; export const XL = ( args ) : TemplateResult => renderButtonsSelected ( args ) ; XL . args = { size : 'xl' , } ;