import { html , TemplateResult } from '@spectrum-web-components/base' ; import { ifDefined } from '@spectrum-web-components/base/src/directives.js' ; import '../sp-button.js' ; import '@spectrum-web-components/icon/sp-icon.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js' ; interface Properties { variant ? : 'cta' | 'overBackground' | 'primary' | 'secondary' | 'negative' ; quiet ? : boolean ; content ? : TemplateResult ; disabled ? : boolean ; size ? : 's' | 'm' | 'l' | 'xl' ; href ? : string ; target ? : '_blank' | '_parent' | '_self' | '_top' ; warning ? : boolean ; } export const makeOverBackground = ( story ) : TemplateResult => html `
    <div
        style="background-color: var(--spectrum-global-color-seafoam-600); color: var(--spectrum-global-color-seafoam-600); padding: var(--spectrum-global-dimension-size-175) var(--spectrum-global-dimension-size-250); display: inline-block"
    >
        ${ story ( ) }
    </div>
` ; export function renderButton ( properties ) { if ( properties . variant ) { return html `
            <sp-button
                variant="${ properties . variant }"
                ?quiet="${ ! ! properties . quiet }"
                ?disabled=${ ! ! properties . disabled }
                size=${ properties . size || 'm' }
                href=${ ifDefined ( properties . href ) }
                target=${ ifDefined ( properties . target ) }
                ?warning=${ properties . warning }
            >
                ${ properties . content || 'Click Me' }
            </sp-button>
        ` ; } else { return html `
            <sp-button
                ?quiet="${ ! ! properties . quiet }"
                ?disabled=${ ! ! properties . disabled }
                size=${ properties . size }
            >
                ${ properties . content || 'Click Me' }
            </sp-button>
        ` ; } } export function renderButtonSet ( properties ) { const disabled = Object . assign ( { } , properties , { disabled : true } ) ; const icon = Object . assign ( { } , properties , { content : html `
            <sp-icon-help slot="icon"></sp-icon-help>
            Click Me
        ` , } ) ; return html `
        ${ renderButton ( properties ) } ${ renderButton ( disabled ) }
        ${ renderButton ( icon ) }
    ` ; } export const bellIcon = html `
    <svg slot="icon" viewBox="0 0 36 36" focusable="false" aria-hidden="true">
        <path
            d="M16 36a4.407 4.407 0 0 0 4-4h-8a4.407 4.407 0 0 0 4 4zm9.143-24.615c0-3.437-3.206-4.891-7.143-5.268V3a1.079 1.079 0 0 0-1.143-1h-1.714A1.079 1.079 0 0 0 14 3v3.117c-3.937.377-7.143 1.831-7.143 5.268C6.857 26.8 2 26.111 2 28.154V30h28v-1.846C30 26 25.143 26.8 25.143 11.385z"
        ></path>
    </svg>
` ;