feat: add lading-label and placeholder attributes

src/SvgToInline.stories.ts

@@ -5,22 +5,41 @@ import './SvgToInline.ts'
 interface ArgTypes {
   path: string
   className: string
-  lazy: boolean
-  slot?: TemplateResult | string
+  placeholder?: TemplateResult
+  lazy?: boolean
+  'loading-label'?: TemplateResult
 }
 
 export default {
   title: 'SVG to Inline',
   tags: ['autodocs'],
   component: 'svg-to-inline',
   argTypes: {
-    path: { control: 'text', description: 'SVG path' },
+    path: {
+      control: 'text',
+      type: { required: true },
+      description: 'SVG path',
+    },
     className: {
       control: 'text',
       table: {
         type: { summary: 'string' },
       },
     },
+    'loading-label': {
+      control: 'text',
+      description: 'While loading the element to be visible',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'If fetch error the element to be visible',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
     lazy: {
       control: 'boolean',
       description: `
@@ -40,11 +59,23 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-const Template: Story<ArgTypes> = ({ path, className }: ArgTypes) => html`
-  <svg-to-inline path=${path} classname=${className}></svg-to-inline>
+const Template: Story<ArgTypes> = ({
+  path,
+  className,
+  'loading-label': loadingLabel,
+  placeholder,
+}: ArgTypes) => html`
+  <svg-to-inline
+    path=${path}
+    classname=${className}
+    .placeholder=${placeholder}
+    .loading-label=${loadingLabel}
+  ></svg-to-inline>
 `
 
 export const Regular = Template.bind({})
 Regular.args = {
-  path: './SVG_Logo.svg',
+  path: './SVG_Logo.svg.',
+  'loading-label': html`<button>loading</button>`,
+  placeholder: html`<button>placeholder</button>`,
 }

src/SvgToInline.test.ts

@@ -4,31 +4,29 @@ import type { SvgToInline } from './SvgToInline.js'
 import './SvgToInline.js'
 
 describe('SvgToInline', () => {
+  // it('test _ and ; value')
+  // it('test path')
+  // it('loading')
+  // it('placeholder')
+  // it('lazy')
   // it('has a default header "Hey there" and counter 5', async () => {
   //   const el = await fixture<SvgToInline>(html`<svg-to-inline></svg-to-inline>`)
-
   //   expect(el.header).to.equal('Hey there')
   //   expect(el.counter).to.equal(5)
   // })
-
   // it('increases the counter on button click', async () => {
   //   const el = await fixture<SvgToInline>(html`<svg-to-inline></svg-to-inline>`)
   //   el.shadowRoot!.querySelector('button')!.click()
-
   //   expect(el.counter).to.equal(6)
   // })
-
   // it('can override the header via attribute', async () => {
   //   const el = await fixture<SvgToInline>(
-  //     html`<svg-to-inline header="attribute header"></svg-to-inline>`,
+  //     html`<svg-to-inline path="attribute header"></svg-to-inline>`,
   //   )
-
-  //   expect(el.header).to.equal('attribute header')
+  //   expect(el.path).to.equal('attribute header')
   // })
-
   it('passes the a11y audit', async () => {
     const el = await fixture<SvgToInline>(html`<svg-to-inline></svg-to-inline>`)
-
     await expect(el).shadowDom.to.be.accessible()
   })
 })

src/SvgToInline.ts

@@ -1,4 +1,5 @@
 import { html, LitElement } from 'lit'
+import type { TemplateResult } from 'lit'
 import { state, customElement, property } from 'lit/decorators.js'
 import { throttle } from 'throttle-debounce'
 import { fetchFile } from './utils/fetchFile.js'
@@ -10,18 +11,27 @@ export class SvgToInline extends LitElement {
   @state()
   private _svgDOM: string | null = null
 
+  @state()
+  private _statusElement?: TemplateResult | null
+
   @state()
   private _throttleLazyFetchSVG: (event: Event) => void
 
   @property()
   path?: string
 
-  @property({ type: Boolean })
-  lazy: boolean = false
-
   @property()
   className: string = ''
 
+  @property({ type: Object, attribute: 'loading-label' })
+  loading?: TemplateResult
+
+  @property({ type: Object })
+  placeholder?: TemplateResult
+
+  @property({ type: Boolean })
+  lazy: boolean = false
+
   constructor() {
     super()
 
@@ -61,9 +71,17 @@ export class SvgToInline extends LitElement {
 
   private async _fetchSVG() {
     if (this.path) {
+      if (this.loading) {
+        this._statusElement = this.loading
+      }
       const svgString = await fetchFile(this.path)
 
-      this._svgDOM = svgString
+      if (svgString) {
+        this._svgDOM = svgString
+      } else {
+        this._svgDOM = null
+        this._statusElement = this.placeholder
+      }
     }
   }
 
@@ -95,6 +113,6 @@ export class SvgToInline extends LitElement {
   render() {
     return html`${this._svgDOM
       ? convertStringToNode(addClassNames(this._svgDOM, this.className))
-      : html`<slot></slot>`}`
+      : this._statusElement}`
   }
 }

src/utils/fetchFile.ts

@@ -1,9 +1,15 @@
 export const fetchFile = async (path: string) => {
   try {
-    const response = await (await fetch(path)).text()
-    return response
+    const response = await fetch(path)
+
+    if (!response.ok) {
+      return null
+    }
+
+    const data = await response.text()
+    return data
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (error) {
-    console.error(error)
     return null
   }
 }