Some toasts cleanup and reorg (#8748)

* Reorg

* Move animation into css file

* Update style comment

* Extract core component, use platform-specific wrappers

* Pull out platform specific styles

* Just move styles into Toast component itself

* Rename cleanup

* Update API

* Add duration optional prop

* Add some type docs

* add exp eased slide aniamtions

* Make toasts full width on mobile web

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 24 insertions, 0 deletions

diff --git a/src/components/Toast/types.ts b/src/components/Toast/types.ts
new file mode 100644
index 000000000..9f1245fa2
--- /dev/null
+++ b/src/components/Toast/types.ts
@@ -0,0 +1,24 @@
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
+
+export type ToastApi = {
+  show: (props: {
+    /**
+     * The type of toast to show. This determines the styling and icon used.
+     */
+    type: ToastType
+    /**
+     * A string, `Text`, or `Span` components to render inside the toast. This
+     * allows additional formatting of the content, but should not be used for
+     * interactive elements link links or buttons.
+     */
+    content: React.ReactNode | string
+    /**
+     * Accessibility label for the toast, used for screen readers.
+     */
+    a11yLabel: string
+    /**
+     * Defaults to `DEFAULT_TOAST_DURATION` from `#components/Toast/const`.
+     */
+    duration?: number
+  }) => void
+}