From 8fd799df2d6d967d83c6a86e83218cb8a69e49c7 Mon Sep 17 00:00:00 2001
From: Asva <ontrew@gmail.com>
Date: Sat, 15 May 2021 23:31:46 +0300
Subject: [PATCH] feat: va-toast docs

closes #426

Co-authored-by: Damir Sadykov <damir.sadykov@fastdev.se>
Co-authored-by: Dmitry Kushnerevich <kushich.dmitry@gmail.com>
---
 .../ui-elements/va-toast/api-options.ts       |  25 +++
 .../ui-elements/va-toast/page-config.ts       | 111 ++++++++++++
 .../components/sidebar/navigationRoutes.ts    |   4 +
 packages/docs/src/examples/va-toast/Click.vue |  16 ++
 packages/docs/src/examples/va-toast/Close.vue |  18 ++
 packages/docs/src/examples/va-toast/Color.vue |   7 +
 .../docs/src/examples/va-toast/Default.vue    |   4 +
 .../docs/src/examples/va-toast/Offset.vue     |   3 +
 .../docs/src/examples/va-toast/Position.vue   |   6 +
 packages/docs/src/locales/en/en.json          |  61 ++++++-
 packages/docs/src/pages/ui-elements/toast.vue |  20 +++
 packages/ui/.eslintrc.js                      |   1 +
 .../vuestic-components/va-slider/VaSlider.vue |   1 -
 .../va-toast/VaToast.demo.vue                 |  38 +++-
 .../vuestic-components/va-toast/VaToast.vue   | 170 +++++++++---------
 .../va-toast/_variables.scss                  |   1 +
 .../vuestic-components/va-toast/index.ts      |   5 +-
 .../va-toast/tests/VaToast.spec.ts            |  11 ++
 18 files changed, 406 insertions(+), 96 deletions(-)
 create mode 100644 packages/docs/src/components/page-configs/ui-elements/va-toast/api-options.ts
 create mode 100644 packages/docs/src/components/page-configs/ui-elements/va-toast/page-config.ts
 create mode 100644 packages/docs/src/examples/va-toast/Click.vue
 create mode 100644 packages/docs/src/examples/va-toast/Close.vue
 create mode 100644 packages/docs/src/examples/va-toast/Color.vue
 create mode 100644 packages/docs/src/examples/va-toast/Default.vue
 create mode 100644 packages/docs/src/examples/va-toast/Offset.vue
 create mode 100644 packages/docs/src/examples/va-toast/Position.vue
 create mode 100644 packages/docs/src/pages/ui-elements/toast.vue
 create mode 100644 packages/ui/src/components/vuestic-components/va-toast/tests/VaToast.spec.ts

diff --git a/packages/docs/src/components/page-configs/ui-elements/va-toast/api-options.ts b/packages/docs/src/components/page-configs/ui-elements/va-toast/api-options.ts
new file mode 100644
index 0000000000..58e36c351a
--- /dev/null
+++ b/packages/docs/src/components/page-configs/ui-elements/va-toast/api-options.ts
@@ -0,0 +1,25 @@
+import { ManualApiOptions } from 'vuestic-ui/src/services/api-docs/ManualApiOptions'
+
+export default {
+  props: {
+    title: { local: true },
+    offsetY: { local: true },
+    offsetX: { local: true },
+    message: { local: true },
+    icon: { local: true },
+    customClass: { local: true },
+    duration: { local: true },
+    closeable: { local: true },
+    onClose: { local: true },
+    onClick: { local: true },
+    position: { local: true },
+    render: { local: true },
+    multiLine: { local: true },
+  },
+  events: {
+  },
+  methods: {
+  },
+  slots: {
+  },
+} as ManualApiOptions
diff --git a/packages/docs/src/components/page-configs/ui-elements/va-toast/page-config.ts b/packages/docs/src/components/page-configs/ui-elements/va-toast/page-config.ts
new file mode 100644
index 0000000000..44c0eca93e
--- /dev/null
+++ b/packages/docs/src/components/page-configs/ui-elements/va-toast/page-config.ts
@@ -0,0 +1,111 @@
+import VaToast from 'vuestic-ui/src/components/vuestic-components/va-toast/VaToast.vue'
+import apiOptions from './api-options'
+import { BlockType, ApiDocsBlock } from '../../../../types/configTypes'
+
+export default [
+  {
+    type: BlockType.TITLE,
+    translationString: 'toast.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.summaryText',
+  },
+  {
+    type: BlockType.SUBTITLE,
+    translationString: 'all.examples',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.default.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.default.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Default',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.color.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.color.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Color',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.offset.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.offset.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Offset',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.position.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.position.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Position',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.close.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.close.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Close',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.click.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.click.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Click',
+  },
+  {
+    type: BlockType.SUBTITLE,
+    translationString: 'all.api',
+  },
+  {
+    type: BlockType.API,
+    componentOptions: VaToast,
+    apiOptions,
+  },
+  {
+    type: BlockType.SUBTITLE,
+    translationString: 'all.faq',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.faq.questions[0].question',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.faq.questions[0].answer',
+  },
+] as ApiDocsBlock[]
diff --git a/packages/docs/src/components/sidebar/navigationRoutes.ts b/packages/docs/src/components/sidebar/navigationRoutes.ts
index b13aeb3b5e..df1b963d08 100644
--- a/packages/docs/src/components/sidebar/navigationRoutes.ts
+++ b/packages/docs/src/components/sidebar/navigationRoutes.ts
@@ -275,6 +275,10 @@ export const navigationRoutes: NavigationRoute[] = [
         name: 'progress-circle',
         displayName: 'menu.progressCircle',
       },
+      {
+        name: 'toast',
+        displayName: 'menu.toast',
+      },
       // GENERATOR_ADD - uiElements
     ],
   },
diff --git a/packages/docs/src/examples/va-toast/Click.vue b/packages/docs/src/examples/va-toast/Click.vue
new file mode 100644
index 0000000000..f19d2132b8
--- /dev/null
+++ b/packages/docs/src/examples/va-toast/Click.vue
@@ -0,0 +1,16 @@
+<template>
+  <va-button  @click="$vaToast.init({
+    message: 'Notification with onClick handler',
+    onClick: clickHandler
+  })">notification with custom onClick handler</va-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    clickHandler () {
+      alert('clicked')
+    },
+  },
+}
+</script>
diff --git a/packages/docs/src/examples/va-toast/Close.vue b/packages/docs/src/examples/va-toast/Close.vue
new file mode 100644
index 0000000000..5d95ede119
--- /dev/null
+++ b/packages/docs/src/examples/va-toast/Close.vue
@@ -0,0 +1,18 @@
+<template>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({
+    message: 'Notification with onClose handler',
+    onClose: closeHandler
+  })">notification with custom onClose handler</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.close('notification_4')">Close #4 toast</va-button>
+  <va-button @click="$vaToast.closeAll()">Close all toasts</va-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    closeHandler () {
+      alert('Toast closed')
+    },
+  },
+}
+</script>
diff --git a/packages/docs/src/examples/va-toast/Color.vue b/packages/docs/src/examples/va-toast/Color.vue
new file mode 100644
index 0000000000..0436f9f8bc
--- /dev/null
+++ b/packages/docs/src/examples/va-toast/Color.vue
@@ -0,0 +1,7 @@
+<template>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: 'primary color', color: 'primary' })">primary</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: 'success color', color: 'success' })">success</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: 'danger color', color: 'danger' })">danger</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: 'warning color', color: 'warning' })">warning</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: '#5d0cf8 color', color: '#5d0cf8' })">#5d0cf8</va-button>
+</template>
diff --git a/packages/docs/src/examples/va-toast/Default.vue b/packages/docs/src/examples/va-toast/Default.vue
new file mode 100644
index 0000000000..d4caaeb9db
--- /dev/null
+++ b/packages/docs/src/examples/va-toast/Default.vue
@@ -0,0 +1,4 @@
+<template>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init('Hello')">Basic notification</va-button>
+  <va-button @click="$vaToast.init('\<span style=\'font-weight: bold\'>Bold message</span>')">HTML code inside</va-button>
+</template>
diff --git a/packages/docs/src/examples/va-toast/Offset.vue b/packages/docs/src/examples/va-toast/Offset.vue
new file mode 100644
index 0000000000..b40600102d
--- /dev/null
+++ b/packages/docs/src/examples/va-toast/Offset.vue
@@ -0,0 +1,3 @@
+<template>
+  <va-button @click="$vaToast.init({message: 'Custom offsets, (Y: 100, X: 100)', offsetX: 100, offsetY: 100})">Y: 100, X: 100</va-button>
+</template>
diff --git a/packages/docs/src/examples/va-toast/Position.vue b/packages/docs/src/examples/va-toast/Position.vue
new file mode 100644
index 0000000000..6b622cc99e
--- /dev/null
+++ b/packages/docs/src/examples/va-toast/Position.vue
@@ -0,0 +1,6 @@
+<template>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({message: 'Top-right', position: 'top-right'})">top-right</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({message: 'Top-left', position: 'top-left'})">top-left</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({message: 'Bottom-right', position: 'bottom-right'})">bottom-right</va-button>
+  <va-button @click="$vaToast.init({message: 'Bottom-left', position: 'bottom-left'})">bottom-left</va-button>
+</template>
diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 19db4f661c..4a5ab2fcd4 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -397,6 +397,26 @@
         "default": "Insert content (for horizontal only)"
       }
     },
+    "VaToast": {
+      "props": {
+        "title": "Sets the title for the notification",
+        "offsetY": "Sets the Y offset",
+        "offsetX": "Sets the X offset",
+        "message": "Notification message",
+        "icon": "Sets the close icon",
+        "customClass": "Applies custom class to the component",
+        "duration": "Sets the duration of the notification display",
+        "closeable":"Provides the ability to close the component",
+        "onClose":"Applies a function to use when pressed a close button",
+        "onClick":"Applies a function to use when clicked",
+        "position":"Sets the position of the notification",
+        "render":"Render function to use a custom content",
+        "multiLine": "Sets more space for the Toast component"
+      },
+      "events": {},
+      "methods": {},
+      "slots": {}
+    },
     "VaCard": {
       "props": {
         "stripe": "Displays a stripe above a card title.",
@@ -1003,7 +1023,8 @@
     "colorsConfig": "Colors Config",
     "cssVariables": "CSS Variables",
     "sidebarItem": "Sidebar Item",
-    "navbar": "Navbar"
+    "navbar": "Navbar",
+    "toast": "Toast"
   },
   "all": {
     "examples": "Examples",
@@ -1385,6 +1406,44 @@
       ]
     }
   },
+  "toast": {
+    "title": "Toast",
+    "summaryText": "Component for sending a notification to the user.",
+    "examples": {
+      "default": {
+        "title": "Basic usage",
+        "text": "By default, run this component in events by using the `init` method with a setting object."
+      },
+      "color": {
+        "title": "Color",
+        "text": "Set different colors using `color` prop. You can either user theme string *HEX* color value."
+      },
+      "offset": {
+        "title": "Offset",
+        "text": "Use `offset` property to set the offset of the toast."
+      },
+      "position": {
+        "title": "Position",
+        "text": "Use `position` property to set the custom position of the toast. Available are `top-right`, `top-left`, `bottom-right`, `bottom-left`."
+      },
+      "close": {
+        "title": "Close",
+        "text": "You can use close method to close the notification and you can set custom onClose event."
+      },
+      "click": {
+        "title": "Click",
+        "text": "You can set custom onClick event to handle the click on button."
+      }
+    },
+    "faq": {
+      "questions": [
+        {
+          "question": "What is the difference between a component and a service?",
+          "answer": "The difference is in implementation. The service behaves more flexibly and it is easier to bind it to certain events than to render the whole element. \n Each prop you provide to the component you can provide to the service too by using the setting object."
+        }
+      ]
+    }
+  },
   "modal": {
     "title": "Modal",
     "description": "Classic modal overlay which represents a dialog box or other interactive component, such as a dismissible alert, sub-window, etc.",
diff --git a/packages/docs/src/pages/ui-elements/toast.vue b/packages/docs/src/pages/ui-elements/toast.vue
new file mode 100644
index 0000000000..c7b998f361
--- /dev/null
+++ b/packages/docs/src/pages/ui-elements/toast.vue
@@ -0,0 +1,20 @@
+<template>
+  <docs-content :config="configComputed" />
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component'
+import DocsContent from '../../components/DocsContent.vue'
+import toastConfig from '../../components/page-configs/ui-elements/va-toast/page-config'
+
+@Options({
+  components: {
+    DocsContent,
+  },
+})
+export default class Toast extends Vue {
+  get configComputed () {
+    return toastConfig
+  }
+}
+</script>
diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
index 031f9bb6fb..49b74013d6 100644
--- a/packages/ui/.eslintrc.js
+++ b/packages/ui/.eslintrc.js
@@ -19,6 +19,7 @@ module.exports = {
     curly: ['error', 'all'],
     indent: ['error', 2, { ignoreComments: true }],
     'prefer-arrow-callback': 'error',
+    'lines-between-class-members': 'off',
     'array-bracket-spacing': ['error', 'never'],
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
diff --git a/packages/ui/src/components/vuestic-components/va-slider/VaSlider.vue b/packages/ui/src/components/vuestic-components/va-slider/VaSlider.vue
index 77ca44cc51..34c77c28bb 100644
--- a/packages/ui/src/components/vuestic-components/va-slider/VaSlider.vue
+++ b/packages/ui/src/components/vuestic-components/va-slider/VaSlider.vue
@@ -165,7 +165,6 @@ class SliderProps {
     type: [Number, Array],
     default: () => [],
   })
-
   trackLabel = prop<string>({ type: String, default: '' })
   color = prop<string>({ type: String, default: 'primary' })
   trackColor = prop<string>({ type: String, default: '' })
diff --git a/packages/ui/src/components/vuestic-components/va-toast/VaToast.demo.vue b/packages/ui/src/components/vuestic-components/va-toast/VaToast.demo.vue
index 0a4498fab6..a99aca2852 100644
--- a/packages/ui/src/components/vuestic-components/va-toast/VaToast.demo.vue
+++ b/packages/ui/src/components/vuestic-components/va-toast/VaToast.demo.vue
@@ -21,12 +21,19 @@
     <VbCard title="Custom onClose">
       <button @click="$vaToast.init(customOnCloseHandler)">notification with custom onClose handler</button>
     </VbCard>
-    <VbCard title="Close">
-      <button @click="$vaToast.close('notification_4')">Close #4 toast</button>
-    </VbCard>
     <VbCard title="Close All">
       <button @click="$vaToast.closeAll()">Close all toasts</button>
     </VbCard>
+    <VbCard title="Custom message">
+      <button @click="$vaToast.init(customMessage)">Custom message</button>
+    </VbCard>
+    <VbCard title="Multi-line">
+      <button @click="$vaToast.init(multiLine)">Multi-line</button>
+    </VbCard>
+    <VbCard title="Return ID">
+      <button @click="handleToast">Open Toast</button>
+      <button @click="$vaToast.close(handleId)">Close {{handleId}}</button>
+    </VbCard>
   </VbDemo>
 </template>
 
@@ -62,7 +69,32 @@ export default {
         message: 'Custom handler (bottom-right)',
         onClose: () => console.log('Handle onClose'),
       },
+      customMessage: {
+        message: 'Simple message',
+        render: (h) => {
+          return h('div', [
+            'This is a ',
+            h('span', { style: 'font-weight: bold' }, 'custom'),
+            ' render message',
+          ])
+        },
+      },
+      multiLine: {
+        message: 'Multi-line message',
+        multiLine: true,
+      },
+      handleId: null,
     }
   },
+  methods: {
+    handleToast () {
+      this.handleId = this.$vaToast.init({
+        message: `Toast ${this.handleId} is opened`, // this example is buggy because of lack of reactivity inside the toast data
+        onClose: () => {
+          this.handleId = null
+        },
+      })
+    },
+  },
 }
 </script>
diff --git a/packages/ui/src/components/vuestic-components/va-toast/VaToast.vue b/packages/ui/src/components/vuestic-components/va-toast/VaToast.vue
index 6fc175c8db..1492b00b75 100644
--- a/packages/ui/src/components/vuestic-components/va-toast/VaToast.vue
+++ b/packages/ui/src/components/vuestic-components/va-toast/VaToast.vue
@@ -2,35 +2,28 @@
   <transition name="va-toast-fade">
     <div
       v-show="visible"
-      class="va-toast"
-      :class="toastClasses"
+      :class="['va-toast', $props.multiLine ? 'va-toast--multiline' : '', ...toastClasses]"
       :style="toastStyles"
       @mouseenter="clearTimer()"
       @mouseleave="startTimer()"
       @click="onToastClick()"
       role="alert"
     >
-      <template>
-        <slot name="prepend" />
-      </template>
       <div class="va-toast__group">
-        <h2 v-if="$props.title" class="va-toast__title" v-text="$props.title"></h2>
-        <div class="va-toast__content" v-show="$props.message">
-          <slot>
-            <p v-if="!$props.dangerouslyUseHTMLString" v-text="$props.message"></p>
-            <p v-else v-html="$props.message"></p>
-          </slot>
+        <h2 v-if="title" class="va-toast__title" v-text="title"></h2>
+
+        <div class="va-toast__content" v-show="message">
+          <p v-text="message"></p>
         </div>
-        <div
-          v-if="$slots.append"
-          @click.stop="onToastClose"
-        >
-          <slot name="append" />
+
+        <div class="va-toast__content" v-if="render">
+          <VaToastRenderer :content="render" />
         </div>
+
         <va-icon
-          v-else-if="$props.closeable"
+          v-if="closeable"
           size="small"
-          name="close"
+          :name="icon"
           class="va-toast__close-icon"
           @click.stop="onToastClose"
         />
@@ -40,57 +33,64 @@
 </template>
 
 <script lang="ts">
-import { watch, PropType } from 'vue'
-import { Options, Vue, prop, mixins } from 'vue-class-component'
+import { h, watch } from 'vue'
+import { prop, mixins, Vue, Options } from 'vue-class-component'
+import VaIcon from '../va-icon/VaIcon.vue'
 
 import ColorMixin from '../../../services/color-config/ColorMixin'
-import VaIcon from '../va-icon'
-
 import { NotificationPosition } from './types'
 
 class ToastProps {
   title = prop<string>({ type: String, default: '' })
   offsetY = prop<number>({ type: Number, default: 16 })
   offsetX = prop<number>({ type: Number, default: 16 })
-  message = prop<string | Function>({ type: [String, Function], default: '' })
-  iconClass = prop<string>({ type: String, default: '' })
+  message = prop<string | Function>({ type: [String, Function] as any, default: '' })
+  icon = prop<string>({ type: String, default: 'close' })
   customClass = prop<string>({ type: String, default: '' })
-  duration = prop<number>({ type: Number, default: 20000 })
-  color = prop<string>({ type: String, default: 'primary' })
+  duration = prop<number>({ type: Number, default: 5000 })
+  color = prop<string>({ type: String, default: '' })
   closeable = prop<boolean>({ type: Boolean, default: true })
-  dangerouslyUseHTMLString = prop<boolean>({ type: Boolean, default: false })
-  onClose = prop<Function>({ type: Function as PropType<() => void> })
-  onClick = prop<Function>({ type: Function as PropType<() => void> })
-  position = prop<string>({
-    type: String as PropType<NotificationPosition>,
+  onClose = prop<() => void>({ type: [Function, undefined] as any })
+  onClick = prop<() => void>({ type: [Function, undefined] as any })
+  multiLine = prop<boolean>({ type: Boolean, default: false })
+  position = prop<NotificationPosition>({
+    type: String as any,
     default: 'top-right',
+    validator: (value: string) => {
+      return ['top-right', 'top-left', 'bottom-right', 'bottom-left'].includes(value)
+    },
   })
+  render = prop<any>({ type: Function, default: undefined })
+}
+
+class VaToastRendererProps {
+  content = prop<any>({ type: Function, default: undefined })
+}
+
+const VaToastRendererPropsMixin = Vue.with(VaToastRendererProps)
+
+@Options({
+  name: 'VaToastRenderer',
+})
+class VaToastRenderer extends mixins(VaToastRendererPropsMixin) {
+  render () {
+    return this.content(h)
+  }
 }
 
 const ToastPropsMixin = Vue.with(ToastProps)
 
 @Options({
   name: 'VaToast',
-  components: { VaIcon },
-  emits: ['click', 'close'],
+  components: { VaIcon, VaToastRenderer },
+  emits: ['on-click', 'on-close'],
 })
 export default class VaToast extends mixins(
   ColorMixin,
   ToastPropsMixin,
 ) {
-  private closed = false
-  private timer: number | null = null
-
-  public visible = true
-
-  created () {
-    watch(() => this.closed, (value) => {
-      if (value) {
-        this.visible = false
-        this.$el.addEventListener('transitionend', this.destroyElement)
-      }
-    })
-  }
+  private timer: any = null
+  public visible = false
 
   get positionX (): 'right' | 'left' {
     return this.position.includes('right') ? 'right' : 'left'
@@ -130,55 +130,40 @@ export default class VaToast extends mixins(
   }
 
   onToastClose () {
-    this.closed = true
-    if (typeof this.$props.onClose === 'function') {
-      this.$props.onClose()
+    this.visible = false
+    this.$el.addEventListener('transitionend', this.destroyElement)
+    if (typeof this.onClose === 'function') {
+      this.onClose()
       return
     }
     this.$emit('close')
   }
 
   clearTimer () {
-    clearTimeout(this.timer as number)
+    if (this.timer) {
+      clearTimeout(this.timer)
+    }
   }
 
   startTimer () {
     if (this.duration > 0) {
-      this.timer = window.setTimeout(() => {
-        if (!this.closed) {
+      this.timer = setTimeout(() => {
+        if (this.visible) {
           this.onToastClose()
         }
       }, this.duration)
     }
   }
 
-  onKeydown (e: KeyboardEvent) {
-    // Reset timer if user press Delete or Backspace. I'm not sure we need this
-    if (e.keyCode === 46 || e.keyCode === 8) {
-      this.clearTimer()
-      // Close if user press Escape
-    } else if (e.keyCode === 27) {
-      if (!this.closed) {
-        this.onToastClose()
-      }
-    } else {
-      this.startTimer()
-    }
-  }
-
   mounted () {
+    this.visible = true
     if (this.duration > 0) {
-      this.timer = window.setTimeout(() => {
-        if (!this.closed) {
+      this.timer = setTimeout(() => {
+        if (this.visible) {
           this.onToastClose()
         }
       }, this.duration)
     }
-    document.addEventListener('keydown', this.onKeydown)
-  }
-
-  beforeUnmount () {
-    document.removeEventListener('keydown', this.onKeydown)
   }
 }
 </script>
@@ -187,17 +172,23 @@ export default class VaToast extends mixins(
 @import 'variables';
 
 .va-toast {
-  display: var(--va-toast-display);
-  width: var(--va-toast-width);
-  padding: var(--va-toast-padding);
-  border-radius: var(--va-toast-border-radius);
-  box-sizing: var(--va-toast-box-sizing);
-  position: var(--va-toast-position);
-  background-color: var(--va-toast-background-color);
-  color: var(--va-toast-color);
-  box-shadow: var(--va-toast-box-shadow);
-  transition: var(--va-toast-transition);
-  overflow: var(--va-toast-overflow);
+  display: flex;
+  width: $toast-width;
+  padding: $toast-padding;
+  align-items: center;
+  border-radius: $toast-radius;
+  box-sizing: border-box;
+  border: 1px solid var(--va-toast-border-color);
+  position: fixed;
+  background-color: white;
+  color: #ffffff;
+  box-shadow: $toast-shadow;
+  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
+  overflow: hidden;
+
+  &--multiline {
+    min-height: 70px;
+  }
 
   &--right {
     right: 16px;
@@ -236,11 +227,12 @@ export default class VaToast extends mixins(
   }
 
   &__close-icon {
-    position: var(--va-toast-close-icon-position);
-    top: var(--va-toast-close-icon-top);
-    right: var(--va-toast-close-icon-right);
-    cursor: var(--va-toast-close-icon-cursor);
-    font-size: var(--va-toast-close-icon-font-size);
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    cursor: pointer;
+    transform: translateY(-50%);
+    font-size: $toast-close-font-size;
 
     &:hover {
       color: var(--va-toast-hover-color);
diff --git a/packages/ui/src/components/vuestic-components/va-toast/_variables.scss b/packages/ui/src/components/vuestic-components/va-toast/_variables.scss
index c47e6882a7..fa64d9d681 100644
--- a/packages/ui/src/components/vuestic-components/va-toast/_variables.scss
+++ b/packages/ui/src/components/vuestic-components/va-toast/_variables.scss
@@ -8,6 +8,7 @@
   --va-toast-position: fixed;
   --va-toast-background-color: white;
   --va-toast-color: #ffffff;
+  --va-toast-border-color: #ffffff; // TODO Replace with proper color.
   --va-toast-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   --va-toast-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
   --va-toast-overflow: hidden;
diff --git a/packages/ui/src/components/vuestic-components/va-toast/index.ts b/packages/ui/src/components/vuestic-components/va-toast/index.ts
index b83a1414fb..eaa691f728 100644
--- a/packages/ui/src/components/vuestic-components/va-toast/index.ts
+++ b/packages/ui/src/components/vuestic-components/va-toast/index.ts
@@ -163,7 +163,7 @@ const createToastInstance = (customProps: NotificationOptions, app: App): VNode
     document.body.appendChild(el)
     const { offsetX, offsetY, position } = nodeProps
 
-    vNode.el.style.display = 'block'
+    vNode.el.style.display = 'flex'
     vNode.el.id = 'notification_' + seed
     vNode.el.style.zIndex = Z_INDEX + ''
 
@@ -201,6 +201,7 @@ const initNotification = (options: NotificationOptions | string, app: App) => {
   if (toastInstance) {
     toastInstances.push(toastInstance)
   }
+  return toastInstance
 }
 
 class Notification {
@@ -211,7 +212,7 @@ class Notification {
   }
 
   init (options: NotificationOptions) {
-    initNotification(options, this.app)
+    return initNotification(options, this.app)?.el?.id as null | string
   }
 
   close (id: string) {
diff --git a/packages/ui/src/components/vuestic-components/va-toast/tests/VaToast.spec.ts b/packages/ui/src/components/vuestic-components/va-toast/tests/VaToast.spec.ts
new file mode 100644
index 0000000000..7941366841
--- /dev/null
+++ b/packages/ui/src/components/vuestic-components/va-toast/tests/VaToast.spec.ts
@@ -0,0 +1,11 @@
+import { mount } from '@vue/test-utils'
+
+import VaToast from '../VaToast.vue'
+
+describe('VaToast', () => {
+  it('should render without an error', () => {
+    // TODO: fix icon config
+    // const wrapper = mount(VaToast)
+    // expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+})