feat(toast): added icon as a slot

Endava · Mar 28, 2023 · a0f1fdb · a0f1fdb
1 parent a9dea41
commit a0f1fdb
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 38 deletions.
diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
@@ -416,9 +416,9 @@ export namespace Components {
          */
         "hideToast": () => Promise<void>;
         /**
-          * Icon of Toast
+          * Should show icon of Toast
          */
-        "icon": string;
+        "showIcon": boolean;
         /**
           * Trigers function to show toast
          */
@@ -1029,9 +1029,9 @@ declare namespace LocalJSX {
     }
     interface BqToast {
         /**
-          * Icon of Toast
+          * Should show icon of Toast
          */
-        "icon"?: string;
+        "showIcon"?: boolean;
         /**
           * Text color of Toast
          */

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
@@ -13,21 +13,19 @@ export default {
   argTypes: {
     type: { control: 'select', options: [...TOAST_TYPE] },
     textColor: { control: 'text' },
-    icon: { control: 'text' },
   },
   args: {
     type: 'default',
     textColor: 'ui--brand',
-    icon: 'default',
   },
 };
 
 const Template = (args) => {
   const showToast = async () => {
     await customElements.whenDefined('bq-toast');
-    const notificationElement = document.querySelector('bq-toast');
+    const toastElement = document.querySelector('bq-toast');
 
-    await notificationElement.showToast();
+    await toastElement.showToast();
   };
   return html`
     <div class="mb-2 inline-block w-full text-left">
@@ -37,6 +35,7 @@ const Template = (args) => {
     </div>
     <div class="mb-2 inline-block w-full text-left">
       <bq-toast type=${args.type} icon=${args.icon} text-color=${args.textColor}>
+        <bq-icon slot="icon" name="info" color="ui--brand" size="24" weight="bold"></bq-icon>
         <span slot="text">This is some toast text message! </span></bq-toast
       >
     </div>

diff --git a/packages/bee-q/src/components/toast/bq-toast.tsx b/packages/bee-q/src/components/toast/bq-toast.tsx
@@ -28,8 +28,8 @@ export class BqToast {
   @Prop({ reflect: true, mutable: true }) type: TToastType = 'default';
   /** Text color of Toast */
   @Prop({ reflect: true }) textColor: string;
-  /** Icon of Toast */
-  @Prop({ reflect: true }) icon: string;
+  /** Should show icon of Toast */
+  @Prop({ reflect: true }) showIcon = true;
 
   // Prop lifecycle events
   // =======================
@@ -113,10 +113,17 @@ export class BqToast {
     const styles = { ...(this.textColor && { color: getColorCSSVariable(this.textColor) }) };
     const { color, icon } = this.getColorAndIcon();
     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="24" weight="bold"></bq-icon>
-          <div style={styles} class="font-medium">
+      <Host style={styles} aria-hidden={!this.shouldShowToast} hidden={!this.shouldShowToast}>
+        <div class="toast-shadow inline-flex items-center gap-2 rounded-m font-semibold ">
+          {this.showIcon && (
+            <div class="icon-wraper inline-block text-left align-middle" part="icon">
+              <slot name="icon" />
+            </div>
+          )}
+          {!this.showIcon && (
+            <bq-icon class={`.bq-toast__icon`} name={icon} color={color} size="24" weight="bold"></bq-icon>
+          )}
+          <div class="inline-block align-middle font-medium">
             <slot name="text" />
           </div>
         </div>

diff --git a/packages/bee-q/src/components/toast/readme.md b/packages/bee-q/src/components/toast/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property    | Attribute    | Description         | Type                                                                  | Default     |
-| ----------- | ------------ | ------------------- | --------------------------------------------------------------------- | ----------- |
-| `icon`      | `icon`       | Icon of Toast       | `string`                                                              | `undefined` |
-| `textColor` | `text-color` | Text color of Toast | `string`                                                              | `undefined` |
-| `type`      | `type`       | Type of Toast       | `"alert" \| "default" \| "error" \| "info" \| "loading" \| "success"` | `'default'` |
+| Property    | Attribute    | Description               | Type                                                                  | Default     |
+| ----------- | ------------ | ------------------------- | --------------------------------------------------------------------- | ----------- |
+| `showIcon`  | `show-icon`  | Should show icon of Toast | `boolean`                                                             | `true`      |
+| `textColor` | `text-color` | Text color of Toast       | `string`                                                              | `undefined` |
+| `type`      | `type`       | Type of Toast             | `"alert" \| "default" \| "error" \| "info" \| "loading" \| "success"` | `'default'` |
 
 
 ## Methods
@@ -37,6 +37,13 @@ Type: `Promise<void>`
 
 
 
+## Shadow Parts
+
+| Part     | Description |
+| -------- | ----------- |
+| `"icon"` |             |
+
+
 ## Dependencies
 
 ### Depends on

diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.scss b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -4,25 +4,6 @@
 
 @import './bq-toast-variables';
 
-@layer components {
-  /* SVG loading icon animation */
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes loading--spin {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(1turn);
-    }
-  }
-}
-
 :host {
   @apply relative;
 }
@@ -36,6 +17,10 @@
   margin-top: 200px;
 }
 
+.icon-wraper {
+  height: 24px;
+}
+
 .bq-toast__icon {
   &.default {
     @apply text-text-primary;