WEBDEV-8019 Add basic loading indicator

demo/app-root.ts

@@ -3,16 +3,22 @@ import { customElement } from 'lit/decorators.js';
 
 import '@src/elements/ia-button/ia-button-story';
 import '@src/labs/ia-snow/ia-snow-story';
+import '@src/elements/ia-status-indicator/ia-status-indicator-story';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
   render() {
     return html`
       <h1>🏛️ Internet Archive Elements ⚛️</h1>
 
-      <ia-button-story></ia-button-story>
+      <h2>🚀 Production-Ready Elements</h2>
+
+      <ia-status-indicator-story></ia-status-indicator-story>
+
+      <h2>🧪 Labs Elements</h2>
 
       <ia-snow-story></ia-snow-story>
+      <ia-button-story></ia-button-story>
     `;
   }
 }

package.json

@@ -26,6 +26,7 @@
     "test": "wireit"
   },
   "dependencies": {
+    "@lit/localize": "^0.12.2",
     "lit": "^3.3.1",
     "magic-snowflakes": "^7.0.2",
     "tslib": "^2.8.1"

src/elements/ia-status-indicator/ia-status-indicator-story.ts

@@ -0,0 +1,113 @@
+import { html, LitElement, TemplateResult } from 'lit';
+import { customElement, query, queryAll, state } from 'lit/decorators.js';
+
+import { IAStatusIndicator } from './ia-status-indicator';
+
+import './ia-status-indicator';
+import '@demo/story-template';
+
+@customElement('ia-status-indicator-story')
+export class IAStatusIndicatorStory extends LitElement {
+  @queryAll('.style-input')
+  private styleInputs?: NodeListOf<HTMLInputElement>;
+
+  @query('#loading-title')
+  private loadingTitleInput!: HTMLInputElement;
+
+  /* Applied styles for the component, in "--my-variable: #f00;" format */
+  @state()
+  private stringifiedStyles: string = '';
+
+  /* Applied properties fro the component in .myprop=${'foo'} format */
+  @state()
+  private stringifiedProps: string = '';
+
+  @query('ia-status-indicator')
+  private component!: IAStatusIndicator;
+
+  render() {
+    return html`
+      <story-template
+        elementTag="ia-status-indicator"
+        .exampleUsage=${this.exampleUsage}
+      >
+        <div slot="demo">
+          <ia-status-indicator
+            style=${this.stringifiedStyles}
+          ></ia-status-indicator>
+        </div>
+
+        <div slot="settings">
+          <table>
+            <tr>
+              <td>Title</td>
+              <td>
+                <input
+                  class="prop-input"
+                  type="text"
+                  id="loading-title"
+                  data-prop="title"
+                  value="Content loading..."
+                />
+              </td>
+              <td>Color</td>
+              <td>
+                ${this.createStyleInput(
+                  'color',
+                  '--ia-theme-primary-text-color',
+                  '#3d7581',
+                  'color',
+                )}
+              </td>
+              <td>Width</td>
+              <td>
+                ${this.createStyleInput(
+                  'width',
+                  '--ia-theme-icon-width',
+                  '30px',
+                )}
+              </td>
+            </tr>
+          </table>
+          <button @click=${this.apply}>Apply</button>
+        </div>
+      </story-template>
+    `;
+  }
+
+  private get exampleUsage(): string {
+    return `<ia-status-indicator${this.stringifiedProps ? ' ' + this.stringifiedProps : ''}${this.stringifiedStyles ? ` style="${this.stringifiedStyles}"` : ''}></ia-status-indicator>`;
+  }
+
+  private createStyleInput(
+    id: string,
+    cssVariable: string,
+    defaultValue: string = '',
+    type: 'text' | 'color' = 'text',
+  ): TemplateResult {
+    return html`
+      <input
+        id=${id}
+        type=${type}
+        class="style-input"
+        value=${defaultValue}
+        data-variable=${cssVariable}
+      />
+    `;
+  }
+
+  private apply() {
+    const loadingTitle = this.loadingTitleInput.value;
+    this.component.loadingTitle = loadingTitle;
+    this.stringifiedProps = `.loadingTitle=\${'${loadingTitle}'}`;
+
+    const appliedStyles: string[] = [];
+
+    this.styleInputs?.forEach((input) => {
+      if (!input.dataset.variable || !input.value) return;
+      appliedStyles.push(`${input.dataset.variable}: ${input.value};`);
+    });
+
+    this.stringifiedStyles = appliedStyles.join(' ');
+  }
+}

src/elements/ia-status-indicator/ia-status-indicator.test.ts

@@ -0,0 +1,37 @@
+import { fixture } from '@open-wc/testing-helpers';
+import { describe, expect, test } from 'vitest';
+import { html } from 'lit';
+
+import type { IAStatusIndicator } from './ia-status-indicator';
+import './ia-status-indicator';
+
+describe('IA Status Indicator', () => {
+  test('renders a circular loading indicator by default', async () => {
+    const el = await fixture<IAStatusIndicator>(
+      html`<ia-status-indicator></ia-status-indicator>`,
+    );
+    const circularLoadingIndicator = el.shadowRoot?.querySelector(
+      '.circular-loading-indicator',
+    );
+    expect(circularLoadingIndicator).toBeDefined();
+  });
+
+  test('uses a custom loading text for the indicator if desired', async () => {
+    const el = await fixture<IAStatusIndicator>(
+      html`<ia-status-indicator
+        .loadingTitle=${'Download in progress...'}
+      ></ia-status-indicator>`,
+    );
+    const indicatorTitle = el.shadowRoot?.querySelector('title');
+    expect(indicatorTitle?.innerHTML).to.contain('Download in progress...');
+  });
+
+  test('uses a default title if no title provided', async () => {
+    const el = await fixture<IAStatusIndicator>(
+      html`<ia-status-indicator></ia-status-indicator>`,
+    );
+
+    const indicatorTitle = el.shadowRoot?.querySelector('title');
+    expect(indicatorTitle?.innerHTML).to.contain('Loading...');
+  });
+});