From 78fdeddb2dfd57b3901aef4bc5063578347a8f06 Mon Sep 17 00:00:00 2001
From: Wayne W <zwang63@stjude.org>
Date: Thu, 25 May 2023 16:26:23 -0500
Subject: [PATCH 1/2] make autodismiss and timeout configurable

---
 packages/react/src/Alert.js             | 16 ++++++++++++----
 packages/react/stories/Alert.stories.js |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Alert.js b/packages/react/src/Alert.js
index 484ac088..6a0789ee 100644
--- a/packages/react/src/Alert.js
+++ b/packages/react/src/Alert.js
@@ -17,8 +17,10 @@ library.add(
   faXmark
 );
 
-function Alert({ message, style }) {
+function Alert({style, message, autoDismiss, timeout}) {
   const [showAlert, setShowAlert] = useState(true);
+  const autoHideEnabled = autoDismiss && typeof autoDismiss === "boolean" ? autoDismiss : false;
+  const timeoutValue = autoHideEnabled && timeout && typeof timeout === "number" ? timeout : 5000;
 
   const dismissAlert = () => setShowAlert(!showAlert);
 
@@ -80,7 +82,11 @@ function Alert({ message, style }) {
 
   return (
     <ToastContainer position="bottom-center">
-      <Toast onClose={() => setShowAlert(false)} className={`alert ${variantClass}`} show={showAlert} delay={3000} autohide>
+      <Toast onClose={() => setShowAlert(false)} 
+             className={`alert ${variantClass}`} 
+             show={showAlert} 
+             delay={timeoutValue}
+             autohide={autoHideEnabled}>
         <Toast.Body>
           <Row className="no-gutters g-0">
             <Col className="col-1 d-flex align-items-center justify-content-end">
@@ -103,8 +109,10 @@ Alert.propTypes = {
   message: {
     type: PropTypes.oneOf(["success", "warning", "error", "info"]),
     title: PropTypes.string,
-    body: PropTypes.string
-  }
+    body: PropTypes.string,
+  },
+  autoDismiss: PropTypes.bool,
+  timeout: PropTypes.number,
 }
 
 export default Alert;
\ No newline at end of file
diff --git a/packages/react/stories/Alert.stories.js b/packages/react/stories/Alert.stories.js
index 41315665..2c28bbbf 100644
--- a/packages/react/stories/Alert.stories.js
+++ b/packages/react/stories/Alert.stories.js
@@ -6,7 +6,7 @@ export default {
   component: Alert,
 };
 
-export const DefaultOneline = () => <Alert message={{ type: "info", title: "Notification Title", body: "Here is the information or diections"}} style="oneline" />;
+export const DefaultOneline = () => <Alert message={{ type: "info", title: "Notification Title", body: "Here is the information or diections"}} style="oneline" autoDismiss={false} timeout={1000}/>;
 export const SuccessOneline = () => <Alert message={{ type: "success", title: "I am a title", body: " i am the body"}} style="oneline"/>;
 export const WarningOneLine = () => <Alert message={{ type: "warning", title: "I am a title", body: " i am the body"}} style="oneline"/>;
 export const ErrorOneline = () => <Alert message={{ type: "error", title: "I am a title", body: " i am the body"}} style="oneline"/>;

From efdd6c35c0ee4fc318db869ac8b4fcf222f705fd Mon Sep 17 00:00:00 2001
From: Wayne W <zwang63@stjude.org>
Date: Fri, 26 May 2023 13:56:58 -0500
Subject: [PATCH 2/2] update

---
 packages/react/src/Alert.js             |  19 ++---
 packages/react/stories/Alert.stories.js | 100 +++++++++++++++++++++---
 2 files changed, 99 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/Alert.js b/packages/react/src/Alert.js
index 6a0789ee..341b48c1 100644
--- a/packages/react/src/Alert.js
+++ b/packages/react/src/Alert.js
@@ -17,16 +17,17 @@ library.add(
   faXmark
 );
 
-function Alert({style, message, autoDismiss, timeout}) {
+function Alert({style, variant, message, autohide, delay}) {
   const [showAlert, setShowAlert] = useState(true);
-  const autoHideEnabled = autoDismiss && typeof autoDismiss === "boolean" ? autoDismiss : false;
-  const timeoutValue = autoHideEnabled && timeout && typeof timeout === "number" ? timeout : 5000;
+
+  autohide && typeof autohide === "boolean" ? autohide : false;
+  autohide && delay && typeof delay === "number" ? delay : 5000;
 
   const dismissAlert = () => setShowAlert(!showAlert);
 
   let variantClass, icon, col;
 
-  switch (message.type) {
+  switch (variant) {
     case "success":
       variantClass = "alert-success";
       icon = (
@@ -85,8 +86,8 @@ function Alert({style, message, autoDismiss, timeout}) {
       <Toast onClose={() => setShowAlert(false)} 
              className={`alert ${variantClass}`} 
              show={showAlert} 
-             delay={timeoutValue}
-             autohide={autoHideEnabled}>
+             delay={delay}
+             autohide={autohide}>
         <Toast.Body>
           <Row className="no-gutters g-0">
             <Col className="col-1 d-flex align-items-center justify-content-end">
@@ -106,13 +107,13 @@ function Alert({style, message, autoDismiss, timeout}) {
 Alert.displayName = "St.Jude Cloud Alert";
 Alert.propTypes = {
   style: PropTypes.oneOf(["oneline", "multiplelines"]),
+  variant: PropTypes.oneOf(["success", "warning", "error", "info"]),
   message: {
-    type: PropTypes.oneOf(["success", "warning", "error", "info"]),
     title: PropTypes.string,
     body: PropTypes.string,
   },
-  autoDismiss: PropTypes.bool,
-  timeout: PropTypes.number,
+  autohide: PropTypes.bool,
+  delay: PropTypes.number,
 }
 
 export default Alert;
\ No newline at end of file
diff --git a/packages/react/stories/Alert.stories.js b/packages/react/stories/Alert.stories.js
index 2c28bbbf..6a4c5435 100644
--- a/packages/react/stories/Alert.stories.js
+++ b/packages/react/stories/Alert.stories.js
@@ -6,14 +6,92 @@ export default {
   component: Alert,
 };
 
-export const DefaultOneline = () => <Alert message={{ type: "info", title: "Notification Title", body: "Here is the information or diections"}} style="oneline" autoDismiss={false} timeout={1000}/>;
-export const SuccessOneline = () => <Alert message={{ type: "success", title: "I am a title", body: " i am the body"}} style="oneline"/>;
-export const WarningOneLine = () => <Alert message={{ type: "warning", title: "I am a title", body: " i am the body"}} style="oneline"/>;
-export const ErrorOneline = () => <Alert message={{ type: "error", title: "I am a title", body: " i am the body"}} style="oneline"/>;
-export const ExtraLongMessageOneLine = () => <Alert message={{ type: "error", title: "My name is Giovanni Giorgio", body: "but everybody calls me Giorgio"}} style="oneline"/>;
-
-export const DefaultMultiplelines = () => <Alert message={{ type: "info", title: "Notification Title", body: "Here is the information or diections" }} style="multiplelines"/>;
-export const SuccessMultiplelines = () => <Alert message={{ type: "success", title: "I am a title", body: " i am the body" }} style="multiplelines"/>;
-export const WarningMultiplelines = () => <Alert message={{ type: "warning", title: "I am a title", body: " i am the body" }} style="multiplelines"/>;
-export const ErrorMultiplelines = () => <Alert message={{ type: "error", title: "I am a title", body: " i am the body" }} style="multiplelines"/>;
-export const ExtraLongMessageMultiplelines = () => <Alert message={{ type: "error", title: "My name is Giovanni Giorgio", body: "but everybody calls me Giorgio." }} style="multiplelines"/>;
+export const DefaultOneline = () =>
+  <Alert
+    message={{ title: "Do you know?", body: "My cat can backflip"}}
+    style="oneline" 
+    autohide={false} 
+    delay={5000} 
+    variant="info"
+  />;
+
+export const SuccessOneline = () => 
+  <Alert 
+    message={{ title: "I am a title", body: " i am the body" }} 
+    style="oneline"
+    autohide={true}
+    delay={6000}
+    variant="success"
+  />;
+
+export const WarningOneLine = () => 
+  <Alert 
+    message={{title: "Warning", body: "Hungry kitten is approaching"}}
+    style="oneline"
+    autohide={false}
+    delay={5000}
+    variant="warning"
+  />;
+
+export const ErrorOneline = () =>
+  <Alert 
+    message={{ type: "error", title: "My Cat is", body: "Broken"}} 
+    style="oneline"
+    autohide={true}
+    delay={5000}
+    variant="error"
+  />;
+
+export const ExtraLongMessageOneLine = () => 
+  <Alert 
+    message={{title: "My name is Giovanni Giorgio", body: "but everybody calls me Giorgio, Giorgio"}}
+    style="oneline"
+    autohide={true}
+    delay={5000}
+    variant="error"
+  />;
+
+export const DefaultMultiplelines = () =>
+  <Alert 
+    message={{title: "Warning", body: "Hungry kitten is approaching"}}
+    style="multiplelines"
+    autohide={true}
+    delay={5000}
+    variant="info"
+  />;
+
+export const SuccessMultiplelines = () =>
+  <Alert
+    message={{title: "I am a title", body: " i am the body" }} 
+    style="multiplelines"
+    autohide={false}
+    delay={5000}
+    variant="success"
+  />;
+
+export const WarningMultiplelines = () =>
+  <Alert 
+    message={{title: "I am a title", body: " i am the body" }} 
+    style="multiplelines"
+    autohide={false}
+    delay={5000}
+    variant="warning"
+  />;
+
+export const ErrorMultiplelines = () => 
+  <Alert 
+    message={{title: "I am a title", body: " i am the body" }} 
+    style="multiplelines"
+    variant="error"
+    autohide={true}
+    delay={2000}
+  />;
+
+export const ExtraLongMessageMultiplelines = () => 
+  <Alert 
+    message={{title: "My name is Giovanni Giorgio", body: "but everybody calls me Giorgio." }} 
+    style="multiplelines"
+    autohide={true}
+    delay={5000}
+    variant="error"
+  />;