import { html , TemplateResult } from '@spectrum-web-components/base' ; import { spreadProps } from '../../../test/lit-helpers.js' ; import '@spectrum-web-components/action-group' ; import '@spectrum-web-components/icon/sp-icon.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.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 ; [ prop ] : unknown ; } function renderButton ( args ) { return html `
        <sp-action-button
            ?quiet="${ ! ! args . quiet }"
            ?emphasized="${ ! ! args . emphasized }"
            ?disabled=${ ! ! args . disabled }
            ?selected=${ ! ! args . selected }
            ?toggles=${ ! ! args . toggles }
            size=${ args . size || 'm' }
        >
            Action
        </sp-action-button>
    ` ; } export default { component : 'sp-action-button' , title : 'Action Button' , } ; function renderButtonsSelected ( args ) { const disabled = Object . assign ( { } , args , { disabled : true } ) ; const selected = Object . assign ( { } , args , { selected : true } ) ; return html `
        <sp-action-group>
            ${ renderButton ( args ) } ${ renderButton ( selected ) }
            ${ renderButton ( disabled ) }
        </sp-action-group>
    ` ; } export const emphasized = ( args ) : TemplateResult => renderButtonsSelected ( args ) ; emphasized . args = { emphasized : true , } ; export const emphasizedAndQuiet = ( args ) : TemplateResult => renderButtonsSelected ( args ) ; emphasizedAndQuiet . args = { emphasized : true , quiet : true , } ; export const quiet = ( args ) : TemplateResult => renderButtonsSelected ( args ) ; quiet . args = { quiet : true , } ; export const toggles = ( args ) : TemplateResult => renderButtonsSelected ( args ) ; toggles . args = { toggles : true , } ; export const wIconButton = ( args ) : TemplateResult => { return html `
        <sp-action-button ${ spreadProps ( args ) }>
            <sp-icon-edit slot="icon"></sp-icon-edit>
            This is an action button
        </sp-action-button>
    ` ; } ; wIconButton . story = { name : 'w/ Icon button' , } ; export const iconOnlyButton = ( args ) : TemplateResult => { return html `
        <sp-action-button label="Edit" ${ spreadProps ( args ) }>
            <sp-icon-edit slot="icon"></sp-icon-edit>
        </sp-action-button>
    ` ; } ; export const iconSizeOverridden = ( ) : TemplateResult => { return html `
        <sp-action-button label="Edit" size="xl">
            <sp-icon-edit slot="icon" size="s"></sp-icon-edit>
        </sp-action-button>
        <h1>For testing purposes only</h1>
        <p>
            This is a test to ensure that sizing the icon will still work when
            it's in the scope of a parent element. You shouldn't normally do
            this as it deviates from the Spectrum design specification.
        </p>
    ` ; } ; export const holdAffordance = ( { holdAffordance , } ) : TemplateResult => { return html `
        <sp-action-group>
            <sp-action-button label="Edit" ?hold-affordance=${ holdAffordance }>
                <sp-icon-edit slot="icon"></sp-icon-edit>
            </sp-action-button>

            <sp-action-button ?hold-affordance=${ holdAffordance } quiet>
                <sp-icon-settings slot="icon"></sp-icon-settings>
            </sp-action-button>

            <sp-action-button ?hold-affordance=${ holdAffordance } selected>
                <sp-icon-more slot="icon"></sp-icon-more>
            </sp-action-button>
        </sp-action-group>
    ` ; } ; holdAffordance . args = { holdAffordance : true , } ;