import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-progress-bar.js' ; export default { title : 'Progress Bar' , component : 'sp-progress-bar' , } ; export const label = ( ) : TemplateResult => { return html `
        <sp-progress-bar label="Loading" progress="50"></sp-progress-bar>
    ` ; } ; export const indeterminate = ( ) : TemplateResult => { return html `
        <sp-progress-bar label="Loading" indeterminate></sp-progress-bar>
    ` ; } ; export const sideLabel = ( ) : TemplateResult => { return html `
        <sp-progress-bar
            side-label
            label="Loading"
            progress="50"
        ></sp-progress-bar>
    ` ; } ; export const sideIndeterminate = ( ) : TemplateResult => { return html `
        <sp-progress-bar
            side-label
            label="Loading"
            indeterminate
        ></sp-progress-bar>
    ` ; } ; 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 const overBackground = ( ) : TemplateResult => { return makeOverBackground ( html `
        <sp-progress-bar progress="50" over-background></sp-progress-bar>
    ` ) ; } ; export const overBackgroundLabel = ( ) : TemplateResult => { return makeOverBackground ( html `
        <sp-progress-bar
            label="Loading"
            progress="50"
            over-background
        ></sp-progress-bar>
    ` ) ; } ; export const overBackgroundIndeterminate = ( ) : TemplateResult => { return makeOverBackground ( html `
        <sp-progress-bar
            label="Loading"
            indeterminate
            over-background
        ></sp-progress-bar>
    ` ) ; } ; export const overBackgroundSideLabel = ( ) : TemplateResult => { return makeOverBackground ( html `
        <sp-progress-bar
            label="Loading"
            progress="50"
            over-background
            side-label
        ></sp-progress-bar>
    ` ) ; } ; export const overBackgroundSideLabelIndeterminate = ( ) : TemplateResult => { return makeOverBackground ( html `
        <sp-progress-bar
            label="Loading"
            indeterminate
            over-background
            side-label
        ></sp-progress-bar>
    ` ) ; } ;