import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-sidenav.js' ; import '../sp-sidenav-item.js' ; import '../sp-sidenav-heading.js' ; export default { component : 'sp-sidenav' , title : 'Sidenav' , argTypes : { onChange : { action : 'change' } , } , } ; export const Default = ( { onChange , } ) : TemplateResult => { return html `
        <sp-sidenav @change=${ onChange } value="Section 2">
            <sp-sidenav-item
                value="Section 1"
                label="Section 1"
            ></sp-sidenav-item>
            <sp-sidenav-item
                selected
                value="Section 2"
                label="Section 2"
            ></sp-sidenav-item>
            <sp-sidenav-heading label="CATEGORY 1">
                <sp-sidenav-item
                    value="Section 3"
                    label="Section 3"
                ></sp-sidenav-item>
                <sp-sidenav-item
                    value="Section 4"
                    label="Section 4"
                ></sp-sidenav-item>
            </sp-sidenav-heading>
        </sp-sidenav>
    ` ; } ; export const Multilevel = ( { onChange , } ) : TemplateResult => { return html `
        <sp-sidenav variant="multilevel" value="2.3.1" @change=${ onChange }>
            <sp-sidenav-item value="foo" label="foo"></sp-sidenav-item>
            <sp-sidenav-item value="baz" label="baz" expanded>
                <sp-sidenav-item value="2.1" label="2.1"></sp-sidenav-item>
                <sp-sidenav-item value="2.2" label="2.2"></sp-sidenav-item>
                <sp-sidenav-item value="2.3" label="2.3" expanded>
                    <sp-sidenav-item
                        value="2.3.1"
                        label="2.3.1"
                    ></sp-sidenav-item>
                    <sp-sidenav-item
                        disabled
                        value="2.3.2"
                        label="2.3.2"
                    ></sp-sidenav-item>
                </sp-sidenav-item>
            </sp-sidenav-item>
            <sp-sidenav-item value="test" label="test"></sp-sidenav-item>
            <sp-sidenav-item value="hi" label="hi"></sp-sidenav-item>
        </sp-sidenav>
    ` ; } ; Multilevel . story = { name : 'Multi-level' , } ; export const levelsAndDisabled = ( ) : TemplateResult => { return html `
        <sp-sidenav>
            <sp-sidenav-heading label="CATEGORY 1">
                <sp-sidenav-item value="Section 1">Section 1</sp-sidenav-item>
                <sp-sidenav-item value="Section 2" disabled>
                    Section 2
                </sp-sidenav-item>
                <sp-sidenav-item value="Section 3" expanded>
                    Section 3
                    <sp-sidenav-item value="Section 3a">
                        Section 3a
                    </sp-sidenav-item>
                </sp-sidenav-item>
            </sp-sidenav-heading>
        </sp-sidenav>
    ` ; } ; export const manageTabIndex = ( ) : TemplateResult => { return html `
        <sp-sidenav manage-tab-index>
            <sp-sidenav-heading label="CATEGORY 1">
                <sp-sidenav-item
                    value="Section 0"
                    label="Section 0"
                ></sp-sidenav-item>
                <sp-sidenav-item
                    value="Section 1"
                    label="Section 1"
                    selected
                ></sp-sidenav-item>
                <sp-sidenav-item
                    value="Section 2"
                    label="Section 2"
                    disabled
                ></sp-sidenav-item>
                <sp-sidenav-item value="Section 3" label="Section 3">
                    <sp-sidenav-item
                        value="Section 3a"
                        label="Section 3a"
                    ></sp-sidenav-item>
                </sp-sidenav-item>
            </sp-sidenav-heading>
        </sp-sidenav>
    ` ; } ; export const Hrefs = ( { onChange , } ) : TemplateResult => { return html `
        <sp-sidenav @change=${ onChange } value="current">
            <sp-sidenav-heading label="GITHUB">
                <sp-sidenav-item
                    href=${ window . location . href }
                    label="Current"
                    value="current"
                    selected
                ></sp-sidenav-item>
                <sp-sidenav-item
                    href="https://github.com/adobe/spectrum-web-components"
                    label="Code"
                ></sp-sidenav-item>
                <sp-sidenav-item
                    href="https://github.com/adobe/spectrum-web-components/issues"
                    label="Issues"
                ></sp-sidenav-item>
                <sp-sidenav-item
                    href="https://github.com/adobe/spectrum-web-components/pulls"
                    label="Pull Requests"
                ></sp-sidenav-item>
            </sp-sidenav-heading>
        </sp-sidenav>
    ` ; } ;