import { ElementSize , html , TemplateResult , } from '@spectrum-web-components/base' ; import '../sp-tag.js' ; import '../sp-tags.js' ; import '@spectrum-web-components/avatar/sp-avatar.js' ; import '@spectrum-web-components/icon/sp-icon.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js' ; export default { title : 'Tags/Sizes' , component : 'sp-tags' , } ; const template = ( { size } ) : TemplateResult => html `
    <sp-tags>
        <sp-tag deletable size=${ size }>
            Tag 1
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-tag>
        <sp-tag invalid deletable size=${ size }>
            Tag 2
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-tag>
        <sp-tag disabled deletable size=${ size }>
            Tag 3
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-tag>
    </sp-tags>
` ; export const s = ( ) : TemplateResult => template ( { size : 's' } ) ; export const m = ( ) : TemplateResult => template ( { size : 'm' } ) ; export const l = ( ) : TemplateResult => template ( { size : 'l' } ) ;