import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-meter.js' ; export default { title : 'Meter' , component : 'sp-meter' , } ; 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 sideLabel = ( ) : TemplateResult => { return html `
        <sp-meter side-label progress="50">Storage Space</sp-meter>
    ` ; } ; export const negative = ( ) : TemplateResult => { return html `
        <sp-meter negative progress="95">Storage Space</sp-meter>
    ` ; } ; export const notice = ( ) : TemplateResult => { return html `
        <sp-meter notice progress="73">Storage Space</sp-meter>
    ` ; } ; export const positive = ( ) : TemplateResult => { return html `
        <sp-meter positive progress="50">Storage Space</sp-meter>
    ` ; } ; export const overBackground = ( ) : TemplateResult => { return makeOverBackground ( html `
            <sp-meter over-background progress="50">Storage Space</sp-meter>
        ` ) ; } ;