fix: placeholder and loading properties

tiagoporto · Nov 21, 2024 · 0c5812a · 0c5812a
1 parent 193b80b
commit 0c5812a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 24 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -10,19 +10,28 @@
   <body>
     <script type="module">
       import '../dist/src/SvgToInline.js'
+      // import { html, render } from 'lit-html'
+
+      // const element = html``
+
+      // render(element, document.body)
     </script>
-    <!>
 
-    <!-- <svg-to-inline
+    <svg-to-inline
+      class="1111 2222 333"
       path="https://upload.wikimedia.org/wikipedia/de/e/ec/Metallica_Logo.svg"
-    ></svg-to-inline>
+      placeholder="Some error"
+      loading="loading..."
+      lazy
+    >
+    </svg-to-inline>
 
-    <svg-to-inline
+    <!--<svg-to-inline
       path="https://upload.wikimedia.org/wikipedia/commons/6/66/Rammstein_logo_2.svg"
       lazy
     ></svg-to-inline> -->
 
-    <svg-to-inline path="./SVG_logo.svg" lazy> </svg-to-inline>
+    <!-- <svg-to-inline path="./SVG_logo.svg" lazy> </svg-to-inline> -->
     <!-- <svg-to-inline path="./SVG_logo.svg" lazy classname="class1 inline-class">
     </svg-to-inline>
     <svg-to-inline path="./SVG_logo.svg" lazy classname="class2   class3">

diff --git a/src/SvgToInline.stories.ts b/src/SvgToInline.stories.ts
@@ -1,23 +1,25 @@
 import { html } from 'lit'
 import type { TemplateResult } from 'lit'
+import type { Meta, StoryObj } from '@storybook/web-components'
+
 import './SvgToInline.ts'
 
 interface ArgTypes {
   path: string
   className: string
-  placeholder?: TemplateResult
+  placeholder?: TemplateResult | string
   lazy?: boolean
-  'loading-label'?: TemplateResult
+  loading?: TemplateResult | string
 }
 
-export default {
+const meta: Meta = {
   title: 'SVG to Inline',
   tags: ['autodocs'],
   component: 'svg-to-inline',
   argTypes: {
     path: {
       control: 'text',
-      type: { required: true },
+      type: { required: true, name: 'string' },
       description: 'SVG path',
     },
     className: {
@@ -26,7 +28,7 @@ export default {
         type: { summary: 'string' },
       },
     },
-    'loading-label': {
+    loading: {
       control: 'text',
       description: 'While loading the element to be visible',
       table: {
@@ -46,13 +48,14 @@ export default {
 Enable Lazing load SVG\n
 SVG will be loaded only when it enters the viewport`,
       table: {
-        defaultValue: { summary: false },
         type: { summary: 'boolean' },
       },
     },
   },
 }
 
+export default meta
+
 interface Story<T> {
   (args: T): TemplateResult
   args?: Partial<T>
@@ -62,20 +65,20 @@ interface Story<T> {
 const Template: Story<ArgTypes> = ({
   path,
   className,
-  'loading-label': loadingLabel,
+  loading,
   placeholder,
 }: ArgTypes) => html`
   <svg-to-inline
     path=${path}
-    classname=${className}
-    .placeholder=${placeholder}
-    .loading-label=${loadingLabel}
+    className=${className}
+    placeholder=${placeholder}
+    loading=${loading}
   ></svg-to-inline>
 `
 
 export const Regular = Template.bind({})
 Regular.args = {
-  path: './SVG_Logo.svg.',
-  'loading-label': html`<button>loading</button>`,
-  placeholder: html`<button>placeholder</button>`,
+  path: './SVG_Logo.svg',
+  loading: 'loading...',
+  placeholder: 'Some Error',
 }
diff --git a/src/SvgToInline.ts b/src/SvgToInline.ts
@@ -12,7 +12,7 @@ export class SvgToInline extends LitElement {
   private _svgDOM: string | null = null
 
   @state()
-  private _statusElement?: TemplateResult | null
+  private _statusElement?: TemplateResult | string | null
 
   @state()
   private _throttleLazyFetchSVG: (event: Event) => void
@@ -21,13 +21,13 @@ export class SvgToInline extends LitElement {
   path?: string
 
   @property()
-  className: string = ''
+  className = ''
 
-  @property({ type: Object, attribute: 'loading-label' })
-  loading?: TemplateResult
+  @property()
+  loading?: TemplateResult | string
 
-  @property({ type: Object })
-  placeholder?: TemplateResult
+  @property()
+  placeholder?: TemplateResult | string
 
   @property({ type: Boolean })
   lazy: boolean = false
@@ -116,3 +116,9 @@ export class SvgToInline extends LitElement {
       : this._statusElement}`
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'svg-to-inline': SvgToInline
+  }
+}