import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-accordion.js' ; import '../sp-accordion-item.js' ; export default { title : 'Accordion' , component : 'sp-accordion' , args : { open : false , } , argTypes : { open : { name : 'open' , type : { name : 'boolean' , required : false } , description : 'Whether the second accordion item is open.' , table : { type : { summary : 'boolean' } , defaultValue : { summary : false } , } , control : { type : 'boolean' , } , } , } , } ; type Properties = { allowMultiple ? : boolean ; disabled ? : boolean ; open ? : boolean ; } ; const Template = ( { allowMultiple , disabled , open } = { allowMultiple : false , disabled : false , open : false , } ) : TemplateResult => { return html `
        <sp-accordion
            ?allow-multiple=${ allowMultiple }
            style="color: var(--spectrum-global-color-gray-800)"
        >
            <sp-accordion-item label="Heading 1" ?disabled=${ disabled }>
                <div>Item 1</div>
            </sp-accordion-item>
            <sp-accordion-item label="Heading 2" ?open=${ open }>
                Item 2
            </sp-accordion-item>
            <sp-accordion-item label="Heading 3">Item 3</sp-accordion-item>
        </sp-accordion>
    ` ; } ; export const Default = ( args ? ) : TemplateResult => Template ( args ) ; export const Open = ( args ? ) : TemplateResult => Template ( args ) ; Open . args = { open : true , allowMultiple : false , disabled : false , } ; export const AllowMultiple = ( args ? ) : TemplateResult => Template ( args ) ; AllowMultiple . args = { allowMultiple : true , } ; export const Disabled = ( args ? ) : TemplateResult => Template ( args ) ; Disabled . args = { disabled : true , } ;