fix(toast): story animation (#352)

* fix: toast animation

* refactor: uncomment FromDialog story

Author: Cr0zy07

packages/components/toast/src/stories/FromDialog.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import {
   OkuToast, OkuToastAction,
   OkuToastDescription, OkuToastProvider, OkuToastViewport,
 } from '@oku-ui/toast'
-import { ref } from 'vue'
+import {
+  OkuDialog, OkuDialogClose, OkuDialogContent, OkuDialogDescription, OkuDialogOverlay, OkuDialogTitle, OkuDialogTrigger,
+} from '@oku-ui/dialog'
 
 const open = ref(false)
 </script>

packages/components/toast/src/stories/Toast.stories.ts

@@ -51,20 +51,20 @@ export const Controlled: Story = {
   }),
 }
 
-// export const FromDialog: Story = {
-//   args: {
-//     template: 'FromDialog',
-//   },
-//   render: (args: any) => ({
-//     components: { OkuToastComponent },
-//     setup() {
-//       return { args }
-//     },
-//     template: `
-//       <OkuToastComponent v-bind="args" />
-//     `,
-//   }),
-// }
+export const FromDialog: Story = {
+  args: {
+    template: 'FromDialog',
+  },
+  render: (args: any) => ({
+    components: { OkuToastComponent },
+    setup() {
+      return { args }
+    },
+    template: `
+      <OkuToastComponent v-bind="args" />
+    `,
+  }),
+}
 
 export const Promise: Story = {
   args: {

packages/components/toast/src/stories/ToastDemo.vue

@@ -7,6 +7,7 @@ import Animated from './Animated.vue'
 import Cypress from './Cypress.vue'
 import Chromatic from './Chromatic.vue'
 import Styled from './Styled.vue'
+import FromDialog from './FromDialog.vue'
 
 withDefaults(defineProps<IToastProps>(), {})
 const VIEWPORT_PADDING = '20px'
@@ -25,10 +26,10 @@ export interface IToastProps {
     <template v-if="template === 'Controlled' || allshow">
       <Controlled />
     </template>
-    <!-- TODO: Needs OkuDialog Component -->
-    <!-- <template v-if="template === 'FromDialog' || allshow">
+
+    <template v-if="template === 'FromDialog' || allshow">
       <FromDialog />
-    </template> -->
+    </template>
 
     <template v-if="template === 'Promise' || allshow">
       <Promise />
@@ -216,15 +217,15 @@ export interface IToastProps {
 }
 
 [data-swipe="end"][data-swipe-direction="left"] {
-  animation-name: slideRight;
+  animation-name: slideLeft;
 }
 
 [data-swipe="end"][data-swipe-direction="up"] {
-  animation-name: slideRight;
+  animation-name: slideUp;
 }
 
 [data-swipe="end"][data-swipe-direction="down"] {
-  animation-name: slideRight;
+  animation-name: slideDown;
 }
 
 .chromatic-viewport {

packages/components/toast/src/stories/toast.css

@@ -157,15 +157,15 @@
 }
 
 [data-swipe="end"][data-swipe-direction="left"] {
-  animation-name: slideRight;
+  animation-name: slideLeft;
 }
 
 [data-swipe="end"][data-swipe-direction="up"] {
-  animation-name: slideRight;
+  animation-name: slideUp;
 }
 
 [data-swipe="end"][data-swipe-direction="down"] {
-  animation-name: slideRight;
+  animation-name: slideDown;
 }
 
 .chromatic-viewport {