checkpoint - style & component. next: cycling

.github/workflows/ci.yml

@@ -15,10 +15,10 @@ jobs:
     - uses: actions/setup-node@v4
 
     - name: Install dependencies
-      run: yarn install
+      run: npm install
 
     - name: Run tests
-      run: yarn run test
+      run: npm run test
 
     - name: Upload reports
       run: npx codecov

.github/workflows/gh-pages-main.yml

@@ -19,10 +19,10 @@ jobs:
       - uses: actions/setup-node@v4
 
       - name: Install dependencies
-        run: yarn install
+        run: npm install
 
       - name: Create build files for gh-pages deploy
-        run: yarn ghpages:build
+        run: npm run ghpages:build
 
       # Reference: https://github.com/JamesIves/github-pages-deploy-action
       - name: Deploy 🚀

.github/workflows/pr-preview.yml

@@ -24,8 +24,8 @@ jobs:
 
       - name: Install and Build
         run: |
-          yarn install
-          yarn ghpages:build
+          npm install
+          npm run ghpages:build
 
       # Reference: https://github.com/rossjrw/pr-preview-action
       - name: Deploy preview

.gitignore

@@ -35,5 +35,5 @@ storybook-static
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+npm-debug.log*
+npm-error.log*

README.md

@@ -18,47 +18,47 @@ This is a base template for creating Typescript WebComponents. It is based off o
 
 ## Local Demo with `web-dev-server`
 ```bash
-yarn start
+npm start
 ```
 To run a local development server that serves the basic demo located in `demo/index.html`
 
 ## Testing with Web Test Runner
 To run the suite of Web Test Runner tests, run
 ```bash
-yarn run test
+npm run test
 ```
 
 To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
 
 ```bash
-yarn run test:watch
+npm run test:watch
 ```
 
 ## Linting with ESLint, Prettier, and Types
 To scan the project for linting errors, run
 ```bash
-yarn run lint
+npm run lint
 ```
 
 You can lint with ESLint and Prettier individually as well
 ```bash
-yarn run lint:eslint
+npm run lint:eslint
 ```
 ```bash
-yarn run lint:prettier
+npm run lint:prettier
 ```
 
 To automatically fix many linting errors, run
 ```bash
-yarn run format
+npm run format
 ```
 
 You can format using ESLint and Prettier individually as well
 ```bash
-yarn run format:eslint
+npm run format:eslint
 ```
 ```bash
-yarn run format:prettier
+npm run format:prettier
 ```
 
 ## Tooling configs
@@ -100,7 +100,7 @@ git push origin gh-pages
 
 You can update the current Github Page without pushing a commit by running:
 ```
-yarn run ghpages:publish
+npm run ghpages:publish
 ```
 
 This build script does the following, see `package.json`:

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 {