feat(toast): add animation

Endava · Jun 29, 2023 · f55d951 · f55d951
1 parent 0e8a280
commit f55d951
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/bee-q/src/components/toast/readme.md b/packages/bee-q/src/components/toast/readme.md
@@ -61,11 +61,11 @@ Type: `Promise<void>`
 
 | Part          | Description                                              |
 | ------------- | -------------------------------------------------------- |
-| `"base"`      | `<div>` container element of toast bq-icon component.    |
+| `"base"`      | The `<div>` container of the internal bq-icon component. |
 | `"icon"`      |                                                          |
-| `"icon-info"` | `<div>` container element of toast icon component.       |
-| `"svg"`       | `<svg>` element inside toast bq-icon component.          |
-| `"wrapper"`   | The component's internal wrapper of the Toast component. |
+| `"icon-info"` | The `<div>` container that holds the icon component.     |
+| `"svg"`       | The `<svg>` element of the internal bq-icon component.   |
+| `"wrapper"`   | The component's internal wrapper inside the shadow DOM.  |
 
 
 ## Dependencies

diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.scss b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -5,7 +5,7 @@
 @import './bq-toast.variables';
 
 :host {
-  @apply inline-block;
+  @apply inline-block animate-slide-in will-change-transform;
 }
 
 .bq-toast {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -85,6 +85,20 @@ const config: Config = {
         xxl3: 'var(--bq-spacing-xxl3)',
         xxl4: 'var(--bq-spacing-xxl4)',
       },
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        'slide-up': {
+          '0%': {
+            transform: 'translateY(10px)',
+          },
+        },
+      },
+      animation: {
+        'slide-in': 'fade-in 0.3s ease, slide-up 0.3s ease',
+      },
     },
   },
   plugins: [