feat(toast): show toast on button click

Endava · Mar 27, 2023 · a9dea41 · a9dea41
1 parent aa550ee
commit a9dea41
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/packages/bee-q/src/components/toast/_storybook/bq-toast.stories.tsx b/packages/bee-q/src/components/toast/_storybook/bq-toast.stories.tsx
@@ -23,9 +23,24 @@ export default {
 };
 
 const Template = (args) => {
-  return html`<bq-toast type=${args.type} icon=${args.icon} text-color=${args.textColor}>
-    <span slot="text">This is some toast text message! </span></bq-toast
-  > `;
+  const showToast = async () => {
+    await customElements.whenDefined('bq-toast');
+    const notificationElement = document.querySelector('bq-toast');
+
+    await notificationElement.showToast();
+  };
+  return html`
+    <div class="mb-2 inline-block w-full text-left">
+      <bq-button appearance="primary" size="small" target="" type="button" variant="standard" @bqClick=${showToast}>
+        Show Toast!
+      </bq-button>
+    </div>
+    <div class="mb-2 inline-block w-full text-left">
+      <bq-toast type=${args.type} icon=${args.icon} text-color=${args.textColor}>
+        <span slot="text">This is some toast text message! </span></bq-toast
+      >
+    </div>
+  `;
 };
 
 export const Default = (args) => Template(args);
diff --git a/packages/bee-q/src/components/toast/bq-toast.tsx b/packages/bee-q/src/components/toast/bq-toast.tsx
@@ -20,7 +20,7 @@ export class BqToast {
   // Inlined decorator, alphabetical order
   // =======================================
   /** State of Toast */
-  @State() private shouldShowToast = true;
+  @State() private shouldShowToast = false;
 
   // Public Property API
   // ========================
@@ -115,7 +115,7 @@ export class BqToast {
     return (
       <Host aria-hidden={!this.shouldShowToast} hidden={!this.shouldShowToast}>
         <div class="toast-shadow inline-flex items-center gap-2 rounded-m font-semibold">
-          <bq-icon class={`.bq-toast__icon`} name={icon} color={color} size="20" weight="bold"></bq-icon>
+          <bq-icon class={`.bq-toast__icon`} name={icon} color={color} size="24" weight="bold"></bq-icon>
           <div style={styles} class="font-medium">
             <slot name="text" />
           </div>