docs(Toast): explain how a toast can be shown (#528)

* docs(Toast): explain how a toast can be shown

Closes #519

* Update packages/main/src/webComponents/Toast/Toast.mdx

Co-authored-by: Lukas Harbarth <[email protected]>

Co-authored-by: Lukas Harbarth <[email protected]>

Author: MarcusNotheis

packages/main/src/webComponents/Toast/Toast.mdx

@@ -0,0 +1,31 @@
+import { Story, Props, Title, Subtitle, Description, Primary, Stories } from '@storybook/addon-docs/blocks';
+
+<Title />
+<Subtitle />
+<Description />
+<br />
+
+## Show a toast
+The `Toast` component has an imperative API for getting displayed. It will not be displayed just because it is part of the DOM.
+In order to show the Toast, you have to get a reference to the `Toast` DOM element and call the `show`-method.
+You can either access the DOM element by using a React `ref` or work with IDs.
+
+**Example**
+```jsx
+export const MyComponentWithAToast() {
+  const toast = useRef();
+
+  const showToast = () => {
+    toast.current.show();
+  };
+  return (
+    <ThemeProvider>
+      <Button onClick={showToast}>Show Toast</Button>
+      <Toast ref={toast}>This is my Toast!</Toast>
+    </ThemeProvider>
+  );
+}
+```
+<Story id="ui5-web-components-toast--generated-default-story"/>
+
+<Props />

packages/main/src/webComponents/Toast/Toast.stories.tsx

@@ -2,32 +2,44 @@ import { number, select } from '@storybook/addon-knobs';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { Toast } from '@ui5/webcomponents-react/lib/Toast';
 import { ToastPlacement } from '@ui5/webcomponents-react/lib/ToastPlacement';
-import React from 'react';
+import React, { useRef } from 'react';
+import mdx from './Toast.mdx';
 
 export default {
   title: 'UI5 Web Components / Toast',
-  component: Toast
+  component: Toast,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
 };
 
 const showToast = () => {
   // @ts-ignore
   document.querySelector('#web_components_react_toast_demo').show();
 };
 
-export const generatedDefaultStory = () => (
-  <>
-    <Toast
-      // @ts-ignore
-      id="web_components_react_toast_demo"
-      duration={number('duration', 3000)}
-      placement={select('placement', ToastPlacement, ToastPlacement.BottomCenter)}
-    >
-      Some Content
-    </Toast>
-    <Button onClick={showToast}>Show Toast</Button>
-  </>
-);
+export const generatedDefaultStory = () => {
+  const toast = useRef();
+
+  const showToast = () => {
+    toast.current.show();
+  };
+  return (
+    <>
+      <Toast
+        ref={toast}
+        duration={number('duration', 3000)}
+        placement={select('placement', ToastPlacement, ToastPlacement.BottomCenter)}
+      >
+        Some Content
+      </Toast>
+      <Button onClick={showToast}>Show Toast</Button>
+    </>
+  );
+};
 
 generatedDefaultStory.story = {
-  name: 'Generated default story'
+  name: 'Default story'
 };