base toast

README.md

@@ -11,10 +11,10 @@ This is a base template for creating Typescript WebComponents. It is based off o
 
 ### Things to update in your copy
 1. Remove this section
-2. Search for the strings `your-webcomponent` and `YourWebComponent` and those are most of the spots that need to be updated.
+2. Search for the strings `iaux-notification-toast` and `IauxNotificationToast` and those are most of the spots that need to be updated.
 3. `README.md` (this file). Update the readme in general, but also the badge URLs
 4. `package.json` Update the name and description
-5. Rename the `your-webcomponent.ts` and its associated `.test` file
+5. Rename the `iaux-notification-toast.ts` and its associated `.test` file
 
 ## Local Demo with `web-dev-server`
 ```bash

demo/app-root.ts

@@ -1,20 +1,89 @@
 import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import '../src/your-webcomponent';
+import '../src/iaux-notification-toast';
+import type {
+  aNotification,
+  IauxNotificationToast,
+} from '../src/iaux-notification-toast';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
+  successNotif(message?: string): aNotification {
+    return {
+      message: message ?? 'Default success message',
+      status: 'success',
+    };
+  }
+
+  errorNotif(message?: string): aNotification {
+    return {
+      message: message ?? 'Default error message',
+      status: 'fail',
+    };
+  }
+
   render() {
     return html`
-      <your-webcomponent title="Hello">
-        <div slot="my-slot">Some slotted content</div>
-      </your-webcomponent>
+      <section id="demo-controls">
+        <button
+          @click="${() => {
+            const toast = this.shadowRoot!.querySelector(
+              'iaux-notification-toast'
+            ) as IauxNotificationToast;
+            toast.addNotification(this.successNotif());
+          }}"
+        >
+          Add Success Notification
+        </button>
+        <button
+          @click="${() => {
+            const toast = this.shadowRoot!.querySelector(
+              'iaux-notification-toast'
+            ) as IauxNotificationToast;
+            toast.addNotification(this.errorNotif());
+          }}"
+        >
+          Add Error Notification
+        </button>
+        <button
+          @click="${() => {
+            const toast = this.shadowRoot!.querySelector(
+              'iaux-notification-toast'
+            ) as IauxNotificationToast;
+            const notif =
+              Math.random() > 0.5
+                ? this.successNotif('Randomized notif success')
+                : this.errorNotif('Randomized notif error');
+            toast.addNotification(notif);
+          }}"
+        >
+          Add Random Notification
+        </button>
+        <button
+          @click="${() => {
+            const toast = this.shadowRoot!.querySelector(
+              'iaux-notification-toast'
+            ) as IauxNotificationToast;
+            toast.clear();
+          }}"
+        >
+          Clear Notifications
+        </button>
+      </section>
+      <iaux-notification-toast title="Hello"> </iaux-notification-toast>
     `;
   }
 
   static styles = css`
     :host {
       display: block;
     }
+    section#demo-controls {
+      background-color: aliceblue;
+      width: 100%;
+      min-height: 50px;
+      display: flex;
+      padding-bottom: 50px;
+    }
   `;
 }

demo/index.html

@@ -5,7 +5,8 @@
   <meta charset="utf-8">
   <style>
     html {
-      font-size: 10px; /* This is to match petabox's base font size */
+      font-size: 14px; /* This is to match petabox's base font size */
+      font-family: Arial, Helvetica, sans-serif;
     }
 
     body {

index.ts

@@ -1 +1,2 @@
-export { YourWebComponent } from './src/your-webcomponent';
+export { IauxNotificationToast } from './src/iaux-notification-toast';
+export type { aNotification } from './src/iaux-notification-toast';