Coachmark redesign (#1815)

* Add popover and coachmarkPopover for momentum v2 style
momentum-design · Nov 6, 2024 · 546b592 · 546b592
1 parent 3566989
commit 546b592
Show file tree

Hide file tree

Showing 60 changed files with 2,248 additions and 960 deletions.
diff --git a/web-components/.storybook/preview.ts b/web-components/.storybook/preview.ts
@@ -1,5 +1,6 @@
 import { Parameters } from "@storybook/client-api";
 import { setCustomElements } from "@storybook/web-components";
+import { ThemeNameValues } from "../src/components/theme/Theme";
 import customElements from './custom-elements.json';
 import { withThemeDecorator } from "./themeDecorator";
 
@@ -49,7 +50,7 @@ export const globalTypes = {
     toolbar: {
       title: "Theme",
       icon: "globe",
-      items: ["momentum", "lumos", "momentumV2"],
+      items: ThemeNameValues,
       dynamicTitle: true
     }
   },

diff --git a/web-components/src/[sandbox]/examples/AdvanceList/components/ErrorLoader/ErrorLoader.ts b/web-components/src/[sandbox]/examples/AdvanceList/components/ErrorLoader/ErrorLoader.ts
@@ -1,28 +1,27 @@
-import { html, LitElement, css, property, internalProperty, PropertyValues } from 'lit-element';
-import { customElementWithCheck } from '@/mixins/CustomElementCheck';
-import './ErrorLoader.scss';
-import '@/components/help-text/HelpText';
-import '@/components/link/Link';
+import "@/components/help-text/HelpText";
+import "@/components/link/Link";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { html, internalProperty, LitElement, property, PropertyValues } from "lit-element";
+import "./ErrorLoader.scss";
 export namespace MdFetchError {
-  @customElementWithCheck('md-fetch-error')
+  @customElementWithCheck("md-fetch-error")
   export class ELEMENT extends LitElement {
-    @property({ type: String }) messageType = 'error';
-    @property({ type: String }) customStyle = '';
-    @property({ type: String }) commonErrorMsg = '';
-    @property({ type: String }) commonTryAgain = '';
-    @property({ type: String }) trackingId = '';
-    @property({ type: String }) trackingIdInputLabel = '';
+    @property({ type: String }) messageType = "error";
+    @property({ type: String }) customStyle = "";
+    @property({ type: String }) commonErrorMsg = "";
+    @property({ type: String }) commonTryAgain = "";
+    @property({ type: String }) trackingId = "";
+    @property({ type: String }) trackingIdInputLabel = "";
 
     @internalProperty() isLoading = false;
     @internalProperty() hasError = false;
 
-
-    private onRetry(event: Event) {
+    private onRetry(_event: Event) {
       this.dispatchEvent(
-        new CustomEvent('retry', {
-          detail: { message: 'Retrying fetch...' },
+        new CustomEvent("retry", {
+          detail: { message: "Retrying fetch..." },
           bubbles: true,
-          composed: true,
+          composed: true
         })
       );
     }
@@ -37,9 +36,7 @@ export namespace MdFetchError {
         >
           <div class="error-block">
             <span>
-              <span class="error-span-padding">
-                ${this.commonErrorMsg}.
-              </span>
+              <span class="error-span-padding"> ${this.commonErrorMsg}. </span>
               <md-link
                 inline
                 class="infinite-scroll-retry-link"
@@ -52,18 +49,16 @@ export namespace MdFetchError {
                 ${this.commonTryAgain}
               </md-link>
             </span>
-            ${this.trackingId && this.trackingId !== ''
-              ? html`<span class="tracking-error-block">
-                  ${this.trackingIdInputLabel} ${this.trackingId}
-                </span>`
+            ${this.trackingId && this.trackingId !== ""
+              ? html`<span class="tracking-error-block"> ${this.trackingIdInputLabel} ${this.trackingId} </span>`
               : null}
           </div>
         </md-help-text>
       `;
     }
 
     updated(changedProperties: PropertyValues) {
-      if (changedProperties.has('hasError') && this.hasError) {
+      if (changedProperties.has("hasError") && this.hasError) {
         this.requestUpdate();
       }
     }
@@ -72,6 +67,6 @@ export namespace MdFetchError {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'md-fetch-error': MdFetchError.ELEMENT;
+    "md-fetch-error": MdFetchError.ELEMENT;
   }
 }
diff --git a/web-components/src/[sandbox]/examples/AdvanceList/components/ParentComponentError.ts b/web-components/src/[sandbox]/examples/AdvanceList/components/ParentComponentError.ts
@@ -1,7 +1,7 @@
-import { html, LitElement, css, property, internalProperty } from "lit-element";
 import "@/components/advance-list/AdvanceList";
 import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import './ErrorLoader/ErrorLoader';
+import { html, internalProperty, LitElement, property } from "lit-element";
+import "./ErrorLoader/ErrorLoader";
 
 export namespace ParentComponentError {
   @customElementWithCheck("parent-component-error")
@@ -13,7 +13,6 @@ export namespace ParentComponentError {
     @property({ type: Boolean }) isError = false;
     @internalProperty() totalRecords = 0;
 
-
     constructor() {
       super();
       this.items = [];
@@ -25,17 +24,17 @@ export namespace ParentComponentError {
     }
 
     generateUUID() {
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-          const r = Math.random() * 16 | 0;
-          const v = c === 'x' ? r : (r & 0x3 | 0x8);
-          return v.toString(16);
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
       });
-  }
+    }
 
     async loadMoreItems() {
       try {
         if (this.shouldFail) {
-          throw new Error('Simulated alternating failure');
+          throw new Error("Simulated alternating failure");
         }
         this.isLoading = true;
         const newItems = await this.fetchItems(this.page);
@@ -45,7 +44,6 @@ export namespace ParentComponentError {
         this.page += 1;
         this.isLoading = false;
         this.isError = false;
-
       } catch (err) {
         this.isLoading = false;
         this.isError = true;
@@ -56,18 +54,23 @@ export namespace ParentComponentError {
       }
     }
 
-    private handleListItemChange(event: CustomEvent) {
+    private handleListItemChange(_event: CustomEvent) {
       //API call send to end point to upate the item
-  }
+    }
     async fetchItems(page: number) {
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000));
 
       const newItems = Array.from({ length: 2000 }, (_, i) => ({
         name: `Item ${(page - 1) * 2000 + i + 1}`,
         id: this.generateUUID(),
         index: i,
-        template: (data: any, index: number) => html`<div style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:30px;" indexing="${index}" >${data.name}</div>`
-
+        template: (data: any, index: number) =>
+          html`<div
+            style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:30px;"
+            indexing="${index}"
+          >
+            ${data.name}
+          </div>`
       }));
       return newItems;
     }
@@ -88,22 +91,26 @@ export namespace ParentComponentError {
           .isError=${this.isError}
           .totalRecords=${this.totalRecords}
           @list-item-change=${this.handleListItemChange}
-          @load-more=${this.loadMoreItems}>
+          @load-more=${this.loadMoreItems}
+        >
           <md-spinner size="24" slot="spin-loader"></md-spinner>
         </md-advance-list>
-        
-        ${this.isError ? html`
-          <md-fetch-error 
-            class="fetch-error"
-            messageType="error"
-            style="color: red;"
-            commonErrorMsg="An error occurred while fetching data"
-            commonTryAgain="Try Again"
-            trackingId="12345"
-            trackingIdInputLabel="Tracking ID:"
-            @retry="${this.handleRetry}">
-          </md-fetch-error>
-        ` : ''}
+
+        ${this.isError
+          ? html`
+              <md-fetch-error
+                class="fetch-error"
+                messageType="error"
+                style="color: red;"
+                commonErrorMsg="An error occurred while fetching data"
+                commonTryAgain="Try Again"
+                trackingId="12345"
+                trackingIdInputLabel="Tracking ID:"
+                @retry="${this.handleRetry}"
+              >
+              </md-fetch-error>
+            `
+          : ""}
       `;
     }
   }

diff --git a/web-components/src/[sandbox]/examples/AdvanceList/components/ParentComponentGeneric.ts b/web-components/src/[sandbox]/examples/AdvanceList/components/ParentComponentGeneric.ts
@@ -1,75 +1,79 @@
-import { html, LitElement, css, property, internalProperty } from "lit-element";
+import { html, internalProperty, LitElement, property } from "lit-element";
 // import "@/components/list/InfiniteScrollList";
 import "@/components/advance-list/AdvanceList";
 import { customElementWithCheck } from "@/mixins/CustomElementCheck";
 
 export namespace ParentComponentGeneric {
-    @customElementWithCheck("parent-component-generic")
-    export class ELEMENT extends LitElement {
-        @property({ type: Array }) items: any = [];
-        @internalProperty() page = 1;
-        @property({ type: Boolean }) isLoading = false;
-        @property({ type: String })  value = '';
-        @property({ type: String }) isError = false;
-        @internalProperty() totalRecords = 60000;  // Total count is set to 6000
+  @customElementWithCheck("parent-component-generic")
+  export class ELEMENT extends LitElement {
+    @property({ type: Array }) items: any = [];
+    @internalProperty() page = 1;
+    @property({ type: Boolean }) isLoading = false;
+    @property({ type: String }) value = "";
+    @property({ type: Boolean }) isError = false;
+    @internalProperty() totalRecords = 60000; // Total count is set to 6000
 
-        constructor() {
-            super();
-            this.items = [];
-            this.page = 1;
-            this.isLoading = false;
-            this.isError = false;
-            this.loadMoreItems();
-        }
+    constructor() {
+      super();
+      this.items = [];
+      this.page = 1;
+      this.isLoading = false;
+      this.isError = false;
+      this.loadMoreItems();
+    }
 
-         generateUUID() {
-            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-                const r = Math.random() * 16 | 0;
-                const v = c === 'x' ? r : (r & 0x3 | 0x8);
-                return v.toString(16);
-            });
-        }
-
+    generateUUID() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    }
 
-        async loadMoreItems() {
-            try {
-                this.isLoading = true;
-                const newItems = await this.fetchItems(this.page);
-                this.items = [...this.items, ...newItems];
-                this.page += 1;
-                this.isLoading = false;
-                this.value = this.items[1].id;
-            } catch (err) {
-                this.isLoading = false;
-                this.isError = true;
-            }finally{
-                this.isLoading = false;
-            }
-        }
+    async loadMoreItems() {
+      try {
+        this.isLoading = true;
+        const newItems = await this.fetchItems(this.page);
+        this.items = [...this.items, ...newItems];
+        this.page += 1;
+        this.isLoading = false;
+        this.value = this.items[1].id;
+      } catch (err) {
+        this.isLoading = false;
+        this.isError = true;
+      } finally {
+        this.isLoading = false;
+      }
+    }
 
-        async fetchItems(page: number) {
-            await new Promise(resolve => setTimeout(resolve, 1000));
+    async fetchItems(page: number) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
 
-            // Adjusted the length to 200 for initial render
-            const newItems = Array.from({ length: 2000 }, (_, i) => ({
-                name: `Item ${(page - 1) * 2000 + i + 1}`,
-                id: this.generateUUID(),
-                index: i,
-                ariaLabel: `Item ${(page - 1) * 2000 + i + 1}`,
-                template: (data: any, index: number) => html`
-                    <div style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:30px;" ?disabled="${index % 2 === 0}" aria-hidden="true" indexing="${index}">
-                        ${data.name}
-                    </div>`
-            }));
-            return newItems;
-        }
+      // Adjusted the length to 200 for initial render
+      const newItems = Array.from({ length: 2000 }, (_, i) => ({
+        name: `Item ${(page - 1) * 2000 + i + 1}`,
+        id: this.generateUUID(),
+        index: i,
+        ariaLabel: `Item ${(page - 1) * 2000 + i + 1}`,
+        template: (data: any, index: number) =>
+          html` <div
+            style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:30px;"
+            ?disabled="${index % 2 === 0}"
+            aria-hidden="true"
+            indexing="${index}"
+          >
+            ${data.name}
+          </div>`
+      }));
+      return newItems;
+    }
 
-        private handleListItemChange(event: CustomEvent) {
-            //API call send to end point to update the item
-        }
+    private handleListItemChange(_event: CustomEvent) {
+      //API call send to end point to update the item
+    }
 
-        render() { 
-            return html`
+    render() {
+      return html`
         <h2>Generic Item List</h2>
         <md-advance-list
           .items=${this.items}
@@ -80,16 +84,17 @@ export namespace ParentComponentGeneric {
           ariaLabelList="state selector"
           .totalRecords=${this.totalRecords}
           @list-item-change=${this.handleListItemChange}
-          @load-more=${this.loadMoreItems}>
+          @load-more=${this.loadMoreItems}
+        >
           <md-spinner size="24" slot="spin-loader"></md-spinner>
-          </md-advance-list>
-          `;
-        }
+        </md-advance-list>
+      `;
     }
+  }
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        "parent-component-generic": ParentComponentGeneric.ELEMENT;
-    }
+  interface HTMLElementTagNameMap {
+    "parent-component-generic": ParentComponentGeneric.ELEMENT;
+  }
 }