import { html , TemplateResult } from '@spectrum-web-components/base' ; import '@spectrum-web-components/button/sp-button.js' ; import '@spectrum-web-components/overlay/overlay-trigger.js' ; import '../sp-dialog-wrapper.js' ; import { landscape } from './images.js' ; export default { title : 'Dialog Wrapped' , component : 'sp-dialog-wrapper' , argTypes : { onClose : { action : 'close' } , onConfirm : { action : 'confirm' } , onSecondary : { action : 'secondary' } , onCancel : { action : 'cancel' } , } , } ; type StoryArgs = { onClose ? : ( event : Event ) => void ; onConfirm ? : ( event : Event ) => void ; onSecondary ? : ( event : Event ) => void ; onCancel ? : ( event : Event ) => void ; } ; const handleClose = ( { onClose } ) => ( event ) => { if ( onClose ) onClose ( event ) ; } ; const handleConfirm = ( { onConfirm } ) => ( event ) => { if ( onConfirm ) onConfirm ( event ) ; } ; const handleSecondary = ( { onSecondary } ) => ( event ) => { if ( onSecondary ) onSecondary ( event ) ; } ; const handleCancel = ( { onCancel } ) => ( event ) => { if ( onCancel ) onCancel ( event ) ; } ; export const wrapperLabeledHero = ( args = { } , context = { } ) : TemplateResult => { const open = context . viewMode === 'docs' ? false : true ; return html `
        <sp-dialog-wrapper
            ?open=${ open }
            hero=${ landscape }
            hero-label="Hero Image Alt Text"
            dismissable
            headline="Wrapped Dialog w/ Hero Image"
            @close=${ handleClose ( args ) }
            size="s"
        >
            Content of the dialog
        </sp-dialog-wrapper>
        <sp-button
            onClick="this.previousElementSibling.open = !this.previousElementSibling.open"
            variant="primary"
        >
            Toggle Dialog
        </sp-button>
    ` ; } ; export const wrapperDismissable = ( args = { } , context = { } ) : TemplateResult => { const open = context . viewMode === 'docs' ? false : true ; return html `
        <sp-dialog-wrapper
            ?open=${ open }
            hero=${ landscape }
            dismissable
            headline="Wrapped Dialog w/ Hero Image"
            @close=${ handleClose ( args ) }
            size="s"
        >
            Content of the dialog
        </sp-dialog-wrapper>
        <sp-button
            onClick="this.previousElementSibling.open = !this.previousElementSibling.open"
            variant="primary"
        >
            Toggle Dialog
        </sp-button>
    ` ; } ; export const wrapperDismissableUnderlay = ( args = { } , context = { } ) : TemplateResult => { const open = context . viewMode === 'docs' ? false : true ; return html `
        <sp-button
            onClick="this.nextElementSibling.open = !this.nextElementSibling.open"
            variant="primary"
        >
            Toggle Dialog
        </sp-button>
        <sp-dialog-wrapper
            ?open=${ open }
            hero=${ landscape }
            dismissable
            headline="Wrapped Dialog w/ Hero Image"
            underlay
            @close=${ handleClose ( args ) }
            size="s"
        >
            Content of the dialog
        </sp-dialog-wrapper>
    ` ; } ; export const longContent = ( args = { } , context = { } ) : TemplateResult => { const open = context . viewMode === 'docs' ? undefined : 'click' ; return html `
        <overlay-trigger
            type="modal"
            placement="none"
            @close=${ handleClose ( args ) }
            .open=${ open }
        >
            <sp-dialog-wrapper
                slot="click-content"
                headline="Dialog title"
                dismissable
                underlay
                size="s"
            >
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Sed ac dolor sit amet purus malesuada congue. Donec quis
                    nibh at felis congue commodo. Ut enim ad minima veniam, quis
                    nostrum exercitationem ullam corporis suscipit laboriosam,
                    nisi ut aliquid ex ea commodi consequatur? Sed ac dolor sit
                    amet purus malesuada congue. Nam libero tempore, cum soluta
                    nobis est eligendi optio cumque nihil impedit quo minus id
                    quod maxime placeat facere possimus, omnis voluptas
                    assumenda est, omnis dolor repellendus. Nullam sit amet
                    magna in magna gravida vehicula. Itaque earum rerum hic
                    tenetur a sapiente delectus, ut aut reiciendis voluptatibus
                    maiores alias consequatur aut perferendis doloribus
                    asperiores repellat. Neque porro quisquam est, qui dolorem
                    ipsum quia dolor sit amet, consectetur, adipisci velit, sed
                    quia non numquam eius modi tempora incidunt ut labore et
                    dolore magnam aliquam quaerat voluptatem. Phasellus faucibus
                    molestie nisl. Vestibulum fermentum tortor id mi. Integer
                    rutrum, orci vestibulum ullamcorper ultricies, lacus quam
                    ultricies odio, vitae placerat pede sem sit amet enim.
                    Maecenas sollicitudin. Nullam rhoncus aliquam metus.
                </p>
                <p>
                    Curabitur ligula sapien, pulvinar a vestibulum quis,
                    facilisis vel sapien. Fusce nibh. Proin pede metus,
                    vulputate nec, fermentum fringilla, vehicula vitae, justo.
                    Aenean placerat. Aliquam erat volutpat. Et harum quidem
                    rerum facilis est et expedita distinctio. Fusce nibh.
                    Temporibus autem quibusdam et aut officiis debitis aut rerum
                    necessitatibus saepe eveniet ut et voluptates repudiandae
                    sint et molestiae non recusandae. Vestibulum erat nulla,
                    ullamcorper nec, rutrum non, nonummy ac, erat. Etiam posuere
                    lacus quis dolor. Mauris elementum mauris vitae tortor.
                    Nulla turpis magna, cursus sit amet, suscipit a, interdum
                    id, felis. Nam libero tempore, cum soluta nobis est eligendi
                    optio cumque nihil impedit quo minus id quod maxime placeat
                    facere possimus, omnis voluptas assumenda est, omnis dolor
                    repellendus. Nulla accumsan, elit sit amet varius semper,
                    nulla mauris mollis quam, tempor suscipit diam nulla vel
                    leo. Pellentesque sapien.
                </p>
                <p>
                    Curabitur vitae diam non enim vestibulum interdum. Sed elit
                    dui, pellentesque a, faucibus vel, interdum nec, diam.
                    Praesent vitae arcu tempor neque lacinia pretium. Ut tempus
                    purus at lorem. Phasellus rhoncus. Temporibus autem
                    quibusdam et aut officiis debitis aut rerum necessitatibus
                    saepe eveniet ut et voluptates repudiandae sint et molestiae
                    non recusandae. Duis ante orci, molestie vitae vehicula
                    venenatis, tincidunt ac pede. Integer vulputate sem a nibh
                    rutrum consequat. Aenean placerat. Cum sociis natoque
                    penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Sed vel lectus. Donec odio tempus molestie,
                    porttitor ut, iaculis quis, sem. Class aptent taciti
                    sociosqu ad litora torquent per conubia nostra, per inceptos
                    hymenaeos. Integer in sapien. Nullam dapibus fermentum
                    ipsum.
                </p>
                <p>
                    Integer vulputate sem a nibh rutrum consequat. Class aptent
                    taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Duis bibendum, lectus ut viverra
                    rhoncus, dolor nunc faucibus libero, eget facilisis enim
                    ipsum id lacus. Aliquam erat volutpat. Aenean id metus id
                    velit ullamcorper pulvinar. Morbi scelerisque luctus velit.
                    Aliquam erat volutpat. Temporibus autem quibusdam et aut
                    officiis debitis aut rerum necessitatibus saepe eveniet ut
                    et voluptates repudiandae sint et molestiae non recusandae.
                    Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu,
                    orci. Suspendisse sagittis ultrices augue. Nullam justo
                    enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
                    Praesent vitae arcu tempor neque lacinia pretium. Nullam
                    faucibus mi quis velit. Maecenas aliquet accumsan leo. Morbi
                    scelerisque luctus velit. Aliquam ornare wisi eu metus.
                </p>
                <p>
                    Sed elit dui, pellentesque a, faucibus vel, interdum nec,
                    diam. Praesent vitae arcu tempor neque lacinia pretium.
                    Etiam dictum tincidunt diam. Et harum quidem rerum facilis
                    est et expedita distinctio. Duis ante orci, molestie vitae
                    vehicula venenatis, tincidunt ac pede. Integer lacinia.
                    Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                    Mauris tincidunt sem sed arcu. Praesent in mauris eu tortor
                    porttitor accumsan. Aenean id metus id velit ullamcorper
                    pulvinar. Donec iaculis gravida nulla. Duis bibendum, lectus
                    ut viverra rhoncus, dolor nunc faucibus libero, eget
                    facilisis enim ipsum id lacus. Nulla quis diam. Quisque
                    porta. Integer rutrum, orci vestibulum ullamcorper
                    ultricies, lacus quam ultricies odio, vitae placerat pede
                    sem sit amet enim. Nam sed tellus id magna elementum
                    tincidunt. In enim a arcu imperdiet malesuada.
                </p>
            </sp-dialog-wrapper>
            <sp-button slot="trigger" variant="primary">
                Toggle Dialog
            </sp-button>
        </overlay-trigger>
    ` ; } ; export const wrapperDismissableUnderlayError = ( args = { } , context = { } ) : TemplateResult => { const open = context . viewMode === 'docs' ? false : true ; return html `
        <div>
            <sp-button
                onClick="this.nextElementSibling.open = !this.nextElementSibling.open"
                variant="primary"
            >
                Toggle Dialog
            </sp-button>
            <sp-dialog-wrapper
                ?open=${ open }
                hero=${ landscape }
                dismissable
                error
                headline="Wrapped Dialog w/ Hero Image"
                underlay
                @close=${ handleClose ( args ) }
                size="s"
            >
                Content of the dialog
            </sp-dialog-wrapper>
        </div>
    ` ; } ; export const wrapperButtons = ( args = { } , context = { } ) : TemplateResult => { const open = context . viewMode === 'docs' ? false : true ; return html `
        <sp-dialog-wrapper
            ?open=${ open }
            size="l"
            headline="Wrapped Dialog w/ Buttons"
            confirm-label="Keep Both"
            secondary-label="Replace"
            cancel-label="Cancel"
            footer="Content for footer"
            @close=${ handleClose ( args ) }
            @confirm=${ handleConfirm ( args ) }
            @secondary=${ handleSecondary ( args ) }
            @cancel=${ handleCancel ( args ) }
        >
            Content of the dialog
        </sp-dialog-wrapper>
    ` ; } ; export const wrapperButtonsUnderlay = ( args = { } , context = { } ) : TemplateResult => { const open = context . viewMode === 'docs' ? false : true ; return html `
        <sp-dialog-wrapper
            ?open=${ open }
            underlay
            size="l"
            headline="Wrapped Dialog w/ Buttons"
            confirm-label="Keep Both"
            secondary-label="Replace"
            cancel-label="Cancel"
            footer="Content for footer"
            @close=${ handleClose ( args ) }
            @confirm=${ handleConfirm ( args ) }
            @secondary=${ handleSecondary ( args ) }
            @cancel=${ handleCancel ( args ) }
        >
            Content of the dialog
        </sp-dialog-wrapper>
    ` ; } ; export const wrapperFullscreen = ( args = { } , context = { } ) : TemplateResult => { const open = context . viewMode === 'docs' ? false : true ; return html `
        <sp-dialog-wrapper
            ?open=${ open }
            headline="Wrapped Dialog - Fullscreen"
            mode="fullscreen"
            confirm-label="Keep Both"
            secondary-label="Replace"
            cancel-label="Cancel"
            @close=${ handleClose ( args ) }
            @confirm=${ handleConfirm ( args ) }
            @secondary=${ handleSecondary ( args ) }
            @cancel=${ handleCancel ( args ) }
        >
            Content of the dialog
        </sp-dialog-wrapper>
    ` ; } ;