From 3c7edc73a2f63b4709770e6156cd5b76d2beb0ae Mon Sep 17 00:00:00 2001
From: Anurag <hazru.anurag@gmail.com>
Date: Fri, 4 Dec 2020 19:42:07 +0530
Subject: [PATCH] docs(toast): improved toast docs

---
 docs-templates/toast.md | 25 +++++++++++++++++++++++++
 docs/toast.md           | 33 +++++++++++++++++++++++++++++----
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/docs-templates/toast.md b/docs-templates/toast.md
index db06fc84f..039632fe4 100644
--- a/docs-templates/toast.md
+++ b/docs-templates/toast.md
@@ -10,6 +10,31 @@ the
 
 <!-- IMPORT_EXAMPLE src/toast/stories/__js/ToastBasic.component.jsx -->
 
+We can utilize the `toastWrapper` prop to add animations and other wrappers
+around the toast.
+
+Example:
+
+```jsx
+<ToastProvider
+  animationTimeout={500}
+  toastWrapper={({ id, isVisible, children }) => (
+    <CSSTransition className="fadeIn" in={isVisible} timeout={500}>
+      {children}
+    </CSSTransition>
+  )}
+  toastTypes={{
+    primary: ({ content }) => <span>{content}</span>,
+  }}
+>
+  <ToastTriggers />
+</ToastProvider>
+```
+
+We also have to add the `animationTimeout` inorder to specify a delay before
+removing the toast from the state, this would ensure the CSS or any other
+animations has the chance to finish without being interrupted.
+
 <!-- CODESANDBOX
 link_title: Toast Basic - Open On Sandbox
 js: src/toast/stories/__js/ToastBasic.component.jsx
diff --git a/docs/toast.md b/docs/toast.md
index a954814ec..69b540eaf 100644
--- a/docs/toast.md
+++ b/docs/toast.md
@@ -76,10 +76,35 @@ const ToastTriggers = () => {
 };
 ```
 
-[Toast Basic - Open On Sandbox](https://codesandbox.io/s/yf6i7)
+We can utilize the `toastWrapper` prop to add animations and other wrappers
+around the toast.
 
-[Toast Styled - Open On Sandbox](https://codesandbox.io/s/1297l)
+Example:
 
-[Toast CSS Animated - Open On Sandbox](https://codesandbox.io/s/i0emy)
+```jsx
+<ToastProvider
+  animationTimeout={500}
+  toastWrapper={({ id, isVisible, children }) => (
+    <CSSTransition className="fadeIn" in={isVisible} timeout={500}>
+      {children}
+    </CSSTransition>
+  )}
+  toastTypes={{
+    primary: ({ content }) => <span>{content}</span>,
+  }}
+>
+  <ToastTriggers />
+</ToastProvider>
+```
+
+We also have to add the `animationTimeout` inorder to specify a delay before
+removing the toast from the state, this would ensure the CSS or any other
+animations has the chance to finish without being interrupted.
+
+[Toast Basic - Open On Sandbox](https://codesandbox.io/s/2z7hj)
+
+[Toast Styled - Open On Sandbox](https://codesandbox.io/s/k9rki)
+
+[Toast CSS Animated - Open On Sandbox](https://codesandbox.io/s/8vkcv)
 
-[Toast React Spring - Open On Sandbox](https://codesandbox.io/s/2uhsj)
+[Toast React Spring - Open On Sandbox](https://codesandbox.io/s/2hr08)