import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-picker.js' ; import { Picker } from '../' ; import '@spectrum-web-components/menu/sp-menu-item.js' ; import '@spectrum-web-components/menu/sp-menu-divider.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js' ; import { states } from './states.js' ; import '@spectrum-web-components/field-label/sp-field-label.js' ; import { spreadProps } from '../../../test/lit-helpers.js' ; export default { title : 'Picker' , component : 'sp-picker' , args : { disabled : false , invalid : false , open : false , quiet : false , } , argTypes : { onChange : { action : 'change' } , 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' , } , } , invalid : { name : 'invalid' , type : { name : 'boolean' , required : false } , 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' , } , quiet : { name : 'quiet' , type : { name : 'boolean' , required : false } , table : { type : { summary : 'boolean' } , defaultValue : { summary : false } , } , control : { type : 'boolean' , } , } , } , } ; interface StoryArgs { disabled ? : boolean ; invalid ? : boolean ; open ? : boolean ; quiet ? : boolean ; showText ? : boolean ; onChange ? : ( val : string ) => void ; [ prop ] : unknown ; } const handleChange = ( { onChange } ) => ( event ) : void => { const picker = event . target as Picker ; if ( onChange ) onChange ( picker . value ) ; } ; export const Default = ( args ) : TemplateResult => { return html `
        <sp-field-label for="picker-1">Where do you live?</sp-field-label>
        <sp-picker
            id="picker-1"
            @change=${ handleChange ( args ) }
            label="Select a Country with a very long label, too long, in fact"
            ${ spreadProps ( args ) }
        >
            <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>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>
            This is a
            <a href="#anchor">link</a>
            .
        </p>
    ` ; } ; export const quiet = ( args ) : TemplateResult => { return html `
        <sp-field-label for="picker-quiet">Where do you live?</sp-field-label>
        <sp-picker
            ${ spreadProps ( args ) }
            id="picker-quiet"
            @change=${ handleChange ( args ) }
            label="Pick an item"
        >
            <sp-menu-item value="1">Item 1</sp-menu-item>
            <sp-menu-item value="2">Item 2</sp-menu-item>
            <sp-menu-item value="3">Item 3</sp-menu-item>
            <sp-menu-item value="4">Item 4</sp-menu-item>
        </sp-picker>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>
            This is a
            <a href="#anchor">link</a>
            .
        </p>
    ` ; } ; quiet . args = { quiet : true , } ; export const icons = ( args ) : TemplateResult => { return html `
        <sp-field-label for="picker-quiet">
            Choose an action type...
        </sp-field-label>
        <sp-picker
            ...=${ spreadProps ( args ) }
            id="picker-quiet"
            @change=${ handleChange ( args ) }
            label="Pick an action"
            value="1"
        >
            <sp-menu-item value="1">
                <sp-icon-edit slot="icon"></sp-icon-edit>
                Edit
            </sp-menu-item>
            <sp-menu-item value="2">
                <sp-icon-copy slot="icon"></sp-icon-copy>
                Copy
            </sp-menu-item>
            <sp-menu-item value="3">
                <sp-icon-delete slot="icon"></sp-icon-delete>
                Delete
            </sp-menu-item>
        </sp-picker>
    ` ; } ; export const iconsNone = ( args ) : TemplateResult => { return html `
        <sp-field-label for="picker-quiet">
            Choose an action type...
        </sp-field-label>
        <sp-picker
            ...=${ spreadProps ( args ) }
            id="picker-quiet"
            @change=${ handleChange ( args ) }
            label="Pick an action"
            value="1"
            icons="none"
        >
            <sp-menu-item value="1">
                <sp-icon-edit slot="icon"></sp-icon-edit>
                Edit
            </sp-menu-item>
            <sp-menu-item value="2">
                <sp-icon-copy slot="icon"></sp-icon-copy>
                Copy
            </sp-menu-item>
            <sp-menu-item value="3">
                <sp-icon-delete slot="icon"></sp-icon-delete>
                Delete
            </sp-menu-item>
        </sp-picker>
    ` ; } ; iconsNone . args = { open : true , } ; export const iconValue = ( args ) : TemplateResult => { return html `
        <sp-field-label for="picker-quiet">
            Choose an action type...
        </sp-field-label>
        <sp-picker
            ...=${ spreadProps ( args ) }
            id="picker-quiet"
            @change=${ handleChange ( args ) }
            label="Pick an action"
            icons="only"
            style="--spectrum-picker-width: 100px"
            value="2"
        >
            <sp-menu-item value="1">
                <sp-icon-edit slot="icon"></sp-icon-edit>
                Edit
            </sp-menu-item>
            <sp-menu-item value="2">
                <sp-icon-copy slot="icon"></sp-icon-copy>
                Copy
            </sp-menu-item>
            <sp-menu-item value="3">
                <sp-icon-delete slot="icon"></sp-icon-delete>
                Delete
            </sp-menu-item>
        </sp-picker>
    ` ; } ; export const iconsOnly = ( args ) : TemplateResult => { return html `
        <sp-field-label for="picker-quiet">
            Choose an action type...
        </sp-field-label>
        <sp-picker
            ...=${ spreadProps ( args ) }
            id="picker-quiet"
            @change=${ handleChange ( args ) }
            label="Pick an action"
            style="--spectrum-picker-width: 100px"
            value="3"
        >
            <sp-menu-item value="1">
                <sp-icon-edit slot="icon" label="Edit"></sp-icon-edit>
            </sp-menu-item>
            <sp-menu-item value="2">
                <sp-icon-copy slot="icon" label="Copy"></sp-icon-copy>
            </sp-menu-item>
            <sp-menu-item value="3">
                <sp-icon-delete slot="icon" label="Delete"></sp-icon-delete>
            </sp-menu-item>
        </sp-picker>
    ` ; } ; iconsOnly . args = { open : true , } ; export const Open = ( args ) : TemplateResult => { return html `
        <style>
            fieldset {
                float: left;
                clear: left;
                margin-bottom: 15px;
            }
        </style>
        <fieldset>
            <sp-field-label for="picker-open">
                Where do you live?
            </sp-field-label>
            <sp-picker
                id="picker-open"
                label="Open picker"
                ${ spreadProps ( args ) }
                @change=${ handleChange ( args ) }
            >
                <span slot="label">
                    Select a Country with a very long label, too long, in fact
                </span>
                <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>
        </fieldset>
        <fieldset>
            <sp-field-label for="picker-closed">
                Where do you live?
            </sp-field-label>
            <sp-picker
                id="picker-closed"
                label="Picker that displays below the options"
                @change=${ handleChange ( args ) }
            >
                <span slot="label">
                    Other menu that goes behind the open one
                </span>
                <sp-menu-item>Not so many options...</sp-menu-item>
            </sp-picker>
        </fieldset>
    ` ; } ; Open . args = { open : true , } ; export const initialValue = ( args ) : TemplateResult => { return html `
        <sp-field-label for="picker-initial">Where do you live?</sp-field-label>
        <sp-picker
            id="picker-initial"
            @change=${ handleChange ( args ) }
            value="item-2"
            ${ spreadProps ( args ) }
        >
            <span slot="label">
                Select a Country with a very long label, too long in fact
            </span>
            <sp-menu-item value="item-1">Deselect</sp-menu-item>
            <sp-menu-item value="item-2">Select Inverse</sp-menu-item>
            <sp-menu-item value="item-3">Feather...</sp-menu-item>
            <sp-menu-item value="item-4">Select and Mask...</sp-menu-item>
            <sp-menu-divider></sp-menu-divider>
            <sp-menu-item value="item-5">Save Selection</sp-menu-item>
            <sp-menu-item disabled value="item-6">Make Work Path</sp-menu-item>
        </sp-picker>
    ` ; } ; export const readonly = ( args ) : TemplateResult => { return html `
        <sp-picker
            @change=${ handleChange ( args ) }
            readonly
            value="item-2"
            ${ spreadProps ( args ) }
        >
            <span slot="label">
                Select a Country with a very long label, too long in fact
            </span>
            <sp-menu-item value="item-1">Deselect</sp-menu-item>
            <sp-menu-item value="item-2">Select Inverse</sp-menu-item>
            <sp-menu-item value="item-3">Feather...</sp-menu-item>
            <sp-menu-item value="item-4">Select and Mask...</sp-menu-item>
            <sp-menu-divider></sp-menu-divider>
            <sp-menu-item value="item-5">Save Selection</sp-menu-item>
            <sp-menu-item disabled value="item-6">Make Work Path</sp-menu-item>
        </sp-picker>
    ` ; } ; export const custom = ( args ) : TemplateResult => { const initialState = 'lb1-mo' ; return html `
        <sp-field-label for="picker-state">
            What state do you live in?
        </sp-field-label>
        <sp-picker
            style="width: 400px;"
            @change=${ handleChange ( args ) }
            id="picker-state"
            label="Pick a state"
            ${ spreadProps ( args ) }
            value=${ initialState }
        >
            ${ states . map ( ( state ) => html `
                    <sp-menu-item
                        id=${ state . id }
                        value=${ state . id }
                        ?selected=${ state . id === initialState }
                    >
                        ${ state . label }
                    </sp-menu-item>
                ` ) }
        </sp-picker>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>
            This is a
            <a href="#anchor">link</a>
            .
        </p>
    ` ; } ; custom . args = { open : true , } ;