import './cocoen' ; import { html } from 'lit-html' ; import { ifDefined } from 'lit-html/directives/if-defined' ; import { styleMap } from 'lit-html/directives/style-map' ; import after from '../../after.jpg' ; import before from '../../before.jpg' ; export default { title : 'Cocoen' , parameters : { actions : { handles : [ 'cocoen-component:connected' , 'cocoen-component:disconnected' , 'cocoen-component:resized' , 'cocoen-component:updated' , ] , } , } , } ; type Args = { start ? : number ; color ? : string ; } ; const Cocoen = ( { start , color } ) => { const styles = { position : 'relative' , maxWidth : '700px' , margin : 'auto' , } ; return html `
    <div style=${ styleMap ( styles ) }>
      <cocoen-component
        color=${ ifDefined ( color || undefined ) }
        start=${ ifDefined ( start || undefined ) }
      >
        <img src=${ before } slot="before" alt="" />
        <img src=${ after } slot="after" alt="" />
      </cocoen-component>
    </div>
  ` ; } ; export const Default = Cocoen . bind ( { } ) ; Default . parameters = { controls : { hideNoControlsWarning : true } , } ; export const Custom = Cocoen . bind ( { } ) ; Custom . args = { start : 75 , color : '#ff0000' , } ; Custom . argTypes = { color : { control : 'color' } , } ;