feat(odyssey-storybook): remove title prop, add isDismissible variant…

… to Toast

packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.mdx

@@ -15,12 +15,10 @@ Each Toast is made up of up to three parts: Severity, Title, and Message.
   <dd>
     This indicates the toast's status as Info, Success, Warning, or Error.
   </dd>
-  <dt>Title (optional)</dt>
-  <dd>Provides quick context; one line max</dd>
-  <dt>Message</dt>
+  <dt>Content</dt>
   <dd>
-    Supplemental information. Be concise - less than three lines of content - as
-    your Toast will soon vanish!
+    Be concise - less than three lines of content - as your Toast will soon
+    vanish!
   </dd>
 </dl>
 
@@ -36,6 +34,12 @@ The Toast pen will take care of positioning and layout automatically. Toasts wil
 
 If multiple Toasts are triggered in a short time, they will stack in order of appearance. For visual consistency, Toasts will resize to match the largest Toast visible.
 
+### Dismissible
+
+<Canvas>
+  <Story id="mui-components-alerts-toast--dismissible-static" />
+</Canvas>
+
 ## Severity
 
 ### Info

packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.stories.tsx

@@ -16,6 +16,8 @@ import {
   Alert,
   AlertTitle,
   Button,
+  CloseIcon,
+  Link,
   Snackbar,
   Stack,
 } from "@okta/odyssey-react-mui";
@@ -32,11 +34,19 @@ export default {
     },
   },
   argTypes: {
+    action: {
+      control: "text",
+      default: null,
+    },
     content: {
       control: "text",
       defaultValue:
         "The mission to Sagitarius A has been scheduled for January 7.",
     },
+    isDismissible: {
+      control: "boolean",
+      defaultValue: null,
+    },
     role: {
       control: "radio",
       options: ["status", null],
@@ -47,10 +57,6 @@ export default {
       options: ["error", "info", "success", "warning"],
       defaultValue: "info",
     },
-    title: {
-      control: "string",
-      defaultValue: "Moonbase Alpha-6",
-    },
   },
   decorators: [MuiThemeDecorator],
 };
@@ -68,13 +74,34 @@ const DefaultTemplate: Story = (args) => {
   return (
     <>
       <Button variant="primary" onClick={handleClick}>
-        Open {args.severity} snackbar
+        Open {args.severity} toast
       </Button>
       <Stack spacing={2} sx={{ width: "100%" }}>
-        <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-          <Alert severity={args.severity} variant="toast">
-            {args.title && <AlertTitle>{args.title}</AlertTitle>}
-            {args.content}
+        <Snackbar
+          open={open}
+          autoHideDuration={args.isDismissible === true ? undefined : 6000}
+          onClose={handleClose}
+        >
+          <Alert
+            severity={args.severity}
+            variant="toast"
+            action={
+              args.isDismissible && (
+                <Button
+                  aria-label="close"
+                  onClick={() => {
+                    setOpen(false);
+                  }}
+                  variant="floating"
+                  size="s"
+                >
+                  <CloseIcon fontSize="inherit" />
+                </Button>
+              )
+            }
+          >
+            <AlertTitle>{args.content}</AlertTitle>
+            {args.action && args.action}
           </Alert>
         </Snackbar>
       </Stack>
@@ -84,67 +111,90 @@ const DefaultTemplate: Story = (args) => {
 
 const StaticTemplate: Story = (args) => {
   return (
-    <Alert severity={args.severity} variant="toast">
-      {args.title && <AlertTitle>{args.title}</AlertTitle>}
-      {args.content}
+    <Alert
+      severity={args.severity}
+      variant="toast"
+      action={
+        args.isDismissible && (
+          <Button
+            aria-label="close"
+            variant="floating"
+            size="s"
+            startIcon={<CloseIcon />}
+          ></Button>
+        )
+      }
+    >
+      <AlertTitle>{args.content}</AlertTitle>
+      {args.action && args.action}
     </Alert>
   );
 };
 
 export const Info = DefaultTemplate.bind({});
-Info.args = {
-  title: null,
-};
+Info.args = {};
 
 export const InfoStatic = StaticTemplate.bind({});
-InfoStatic.args = {
-  title: null,
-};
+InfoStatic.args = {};
 
 export const Error = DefaultTemplate.bind({});
 Error.args = {
   content: "Hangar 18 has been compromised.",
   role: "alert",
   severity: "error",
-  title: "Security breach",
 };
 
 export const ErrorStatic = StaticTemplate.bind({});
 ErrorStatic.args = {
   content: "Hangar 18 has been compromised.",
   role: "alert",
   severity: "error",
-  title: "Security breach",
 };
 
 export const Warning = DefaultTemplate.bind({});
 Warning.args = {
   content: "Severe solar winds detected. Local system flights may be delayed.",
   role: "status",
   severity: "warning",
-  title: "Safety warning",
 };
 
 export const WarningStatic = StaticTemplate.bind({});
 WarningStatic.args = {
   content: "Severe solar winds detected. Local system flights may be delayed.",
   role: "status",
   severity: "warning",
-  title: "Safety warning",
 };
 
 export const Success = DefaultTemplate.bind({});
 Success.args = {
   content: "Docking completed successfully.",
   role: "status",
   severity: "success",
-  title: null,
 };
 
 export const SuccessStatic = StaticTemplate.bind({});
 SuccessStatic.args = {
   content: "Docking completed successfully.",
   role: "status",
   severity: "success",
-  title: null,
+};
+
+export const Dismissible = DefaultTemplate.bind({});
+Dismissible.args = {
+  action: (
+    <Link href="#anchor" variant="monochrome">
+      View report
+    </Link>
+  ),
+  isDismissible: true,
+};
+
+export const DismissibleStatic = StaticTemplate.bind({});
+DismissibleStatic.args = {
+  action: (
+    <Link href="#anchor" variant="monochrome">
+      View report
+    </Link>
+  ),
+  isDismissible: true,
 };