update toast pattern docs (#2421)

* update toast pattern

updating toast notification pattern docs to add in types of toasts

* content and image update

added polite and assertive dismissal actions, added polite and assertive image example

* updated copy, added image

updated punctuation and then added animated toasts images

* updated animation

updated toast animation

* updated text with actionable content

• changed toast description within 'deciding what to use table'
• updated inline notification to include actionable
• updated toast notification with actionable guidelines
• took out assertive vs polite language

src/pages/patterns/notification-pattern/index.mdx

@@ -162,13 +162,13 @@ experience for users.
 
 <Title> Deciding what to use </Title>
 
-| Type               | Usage                                                                                                             | Duration and interaction                                                                                                                         |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Inline             | Provide users with nondisruptive feedback or the status of an action                                              | Persist until the message is resolved or dismissed by user and may include a ghost button action                                                 |
-| Toast              | Short, time-based messages that slide in and out of a page and provide nondisruptive information                  | Disappear automatically or can be dismissed by user                                                                                              |
-| Banner             | System or product level notifications that are not specific to a task                                             | Persist until dismissed by user and may include a ghost button or link                                                                           |
-| Notification panel | Notification center that provides users with system-generated messages                                            | Opened and closed by user                                                                                                                        |
-| Modal              | Highly disruptive notifications that provide users with critical information that needs their attention or action | Persist and block tasks until dismissed by user. Modals allow more user action than other notifications and can include other Carbon components. |
+| Type               | Usage                                                                                                             | Duration and interaction                                                                                                                                       |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Inline             | Provide users with nondisruptive feedback or the status of an action                                              | Persist until the message is resolved or dismissed by user and may include a ghost button action                                                               |
+| Toast              | Short, time-based messages that slide in and out of a page and provide nondisruptive information                  | Toast notifications without actions can disappear automatically or can be dismissed by user. Toast notifications with actions persist until dismissed by user. |
+| Banner             | System or product level notifications that are not specific to a task                                             | Persist until dismissed by user and may include a ghost button or link                                                                                         |
+| Notification panel | Notification center that provides users with system-generated messages                                            | Opened and closed by user                                                                                                                                      |
+| Modal              | Highly disruptive notifications that provide users with critical information that needs their attention or action | Persist and block tasks until dismissed by user. Modals allow more user action than other notifications and can include other Carbon components.               |
 
 ### Inline notification
 
@@ -183,6 +183,12 @@ Carbon offers low-contrast and high-contrast inline notifications. All inline
 notifications use a color that corresponds with their message intent and can
 also be accompanied by an icon to reinforce the message intent.
 
+Carbon inline toast notifications can be actionable. Only one ghost button is
+allowed within inline notifications. A small “x” in the top right corner is used
+to dismiss inline notifications. Including the close button is optional and
+should not be included if it is critical for a user to read or interact with the
+notification.
+
 #### Best practices:
 
 - Place inline notifications near their related items.
@@ -208,40 +214,58 @@ also be accompanied by an icon to reinforce the message intent.
 notifications that slide in and out, typically in the top right of the page.
 They are more disruptive than inline notifications and are best used with
 system-generated messages that do not correspond to a specific section of the
-UI. Toasts disappear automatically after a set amount of time but can also be
-dismissed by the user.
+UI.
 
 Carbon toasts can be either low-contrast or high-contrast. Their color should
 correspond with the message intent and they can also use an icon to convey the
 message intent.
 
+Carbon toast notifications can be actionable. Only one action button is allowed
+within toast notifications. If the toast includes an action button, then the
+notification should remain on screen until the user dismisses it. With the
+notification remaining open, the user has enough time to interact with the
+button without the toast closing too soon.
+
+<Row>
+<Column colLg={8}>
+
+![Examples of nonactionable and actionable toast notifications](/images/8_toast_types.png)
+
+<Caption>
+  Example of atoast notification without actions (left) and actionable toast
+  notification (right)
+</Caption>
+
+</Column>
+</Row>
+
 #### Long messages
 
 Removing the timestamp provides space for a third line of content for longer
 toast messages. Toasts are intended to be at-a-glance messages confined to a
 small region of the screen so their messages should not exceed three lines.
 
 If it is possible a toast will have a message longer than three lines, include a
-short message with a "View more" link that takes the user to a view of the full
-notification message. This can be either a full page with more details or a
+short message with a "View more" button that takes the user to a view of the
+full notification message. This can be either a full page with more details or a
 modal.
 
 #### Best practices:
 
-- Multiple toasts stack horizontally, with the newest appearing at the top of
-  the list.
-- Keep messages clear and concise
-- Toasts dismiss after five seconds.
+- Multiple toasts stack vertically, with the newest appearing at the top of the
+  list.
+- Keep messages clear and concise.
+- Toasts with actions should only be dismissed by a user.
 - The timestamp is optional and can be removed.
 - Toast notifications have a fixed width and should not be expanded to fit the
   content area.
 
 <Row>
 <Column colLg={8}>
 
-![Toast notification in a product](/images/4_Toast_736.png)
+![Toast notification in a product](/images/4_toast_736.gif)
 
-<Caption>Low-contrast toast notification</Caption>
+<Caption>Low-contrast toast notifications</Caption>
 
 </Column>
 </Row>