import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-link.js' ; export default { component : 'sp-link' , title : 'Link' , } ; export const Default = ( ) : TemplateResult => { return html `
        This is a <sp-link href="#">link</sp-link> in a sentence.
    ` ; } ; export const Quiet = ( ) : TemplateResult => { return html `
        This is a <sp-link quiet href="#">quiet link</sp-link> in a sentence.
    ` ; } ; export const secondary = ( ) : TemplateResult => { return html `
        This is a <sp-link variant="secondary" href="#">link</sp-link> in a sentence.
    ` ; } ; export const secondaryQuiet = ( ) : TemplateResult => { return html `
        This is a <sp-link variant="secondary" quiet href="#">quiet link</sp-link> in a sentence.
    ` ; } ; export const overBackground = ( ) : TemplateResult => { return html `
        <div
            style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;"
        >
            <p style="color: rgb(240, 240, 240);">
                This
                <sp-link over-background href="#">link</sp-link>
                has a background.
            </p>
        </div>
    ` ; } ; export const overBackgroundQuiet = ( ) : TemplateResult => { return html `
        <div
            style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;"
        >
            <p style="color: rgb(240, 240, 240);">
                This
                <sp-link over-background quiet href="#">link</sp-link>
                has a background.
            </p>
        </div>
    ` ; } ; export const Download = ( ) : TemplateResult => { const blob = new Blob ( [ 'some text for the file' ] , { type : 'text/plain;charset=utf-8' , } ) ; return html `
        This is a
        <sp-link download="somefile.txt" href="${ URL . createObjectURL ( blob ) }">
            downloadable file
        </sp-link>
        for you to click on.
    ` ; } ; overBackground . story = { name : 'Over Background' , } ;