@madie/madie-design-system 1.0.39 → 1.0.41

package/coverage/lcov-report/react/components/Textfield/index.jsx.html

@@ -32,7 +32,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>6/6</span>
+                <span class='fraction'>16/16</span>
             </div>
         
             
@@ -137,7 +137,74 @@
 <a name='L72'></a><a href='#L72'>72</a>
 <a name='L73'></a><a href='#L73'>73</a>
 <a name='L74'></a><a href='#L74'>74</a>
-<a name='L75'></a><a href='#L75'>75</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L75'></a><a href='#L75'>75</a>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a>
+<a name='L91'></a><a href='#L91'>91</a>
+<a name='L92'></a><a href='#L92'>92</a>
+<a name='L93'></a><a href='#L93'>93</a>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</a>
+<a name='L97'></a><a href='#L97'>97</a>
+<a name='L98'></a><a href='#L98'>98</a>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</a>
+<a name='L114'></a><a href='#L114'>114</a>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a>
+<a name='L128'></a><a href='#L128'>128</a>
+<a name='L129'></a><a href='#L129'>129</a>
+<a name='L130'></a><a href='#L130'>130</a>
+<a name='L131'></a><a href='#L131'>131</a>
+<a name='L132'></a><a href='#L132'>132</a>
+<a name='L133'></a><a href='#L133'>133</a>
+<a name='L134'></a><a href='#L134'>134</a>
+<a name='L135'></a><a href='#L135'>135</a>
+<a name='L136'></a><a href='#L136'>136</a>
+<a name='L137'></a><a href='#L137'>137</a>
+<a name='L138'></a><a href='#L138'>138</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -151,7 +218,66 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -212,7 +338,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from "react";
-import { FormControl, TextField as MUITextField } from "@mui/material";
+import {
+    FormControl,
+    TextField as MUITextField,
+    FormHelperText,
+} from "@mui/material";
 import InputLabel from "../InputLabel";
 import PropTypes from "prop-types";
 &nbsp;
@@ -227,20 +357,73 @@ const TextField = ({
 }) =&gt; {
     return (
         &lt;FormControl fullWidth error={error}&gt;
+            &lt;div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/&gt; 
             &lt;InputLabel
                 disabled={disabled}
                 shrink
                 required={required}
                 error={error}
                 htmlFor={id}
+                style={{marginBottom: 0, height: 16}} // force a heignt
+                sx={[
+                {
+                    backgroundColor: "transparent",
+                    display: "flex",
+                    flexDirection: "row-reverse",
+                    alignSelf: "baseline",
+                    textTransform: "none",
+                    // force it outside the select box
+                    position: "initial",
+                    transform: "translateX(0px) translateY(0px)",
+                    fontFamily: "Rubik",
+                    fontWeight: 500,
+                    fontSize: 14,
+                    color: "#333",
+                    "&amp; .MuiInputLabel-asterisk": {
+                        color: "#AE1C1C !important",
+                        marginRight: "3px !important", //this was
+                    },
+                },
+                required &amp;&amp; {
+                    transform: "translateX(-12px) translateY(0px)",
+                    "&amp; .MuiInputLabel-asterisk": {
+                        color: "#D92F2",
+                        marginRight: "3px !important", //this was
+                    },
+                },
+                disabled &amp;&amp; {
+                    color: "rgba(0,0,0,0.6)",
+                },
+                error &amp;&amp; {
+                    color: "#AE1C1C !important",
+                },
+            ]}
             &gt;
                 {label}
             &lt;/InputLabel&gt;
+            { helperText &amp;&amp; (&lt;FormHelperText
+                tabIndex={0}
+                aria-live="polite"
+                id={`${id}-helper-text`}
+                data-testid={`${id}-helper-text`}
+                sx={[{
+                    margin: "4px 0px 0px 0px",
+                    color: "#515151", 
+                    lineHeight: 1
+                },
+                error &amp;&amp; {
+                    color: "#AE1C1C !important",
+                },
+            ]}
+                    &gt;
+                {helperText}
+            &lt;/FormHelperText&gt;)}
             &lt;MUITextField
-                sx={{
+                sx={[{
                     borderRadius: "3px",
                     height: 40, //there's a .13 coming from somewhere.
                     border: "1px solid #DDDDDD",
+                    marginTop: "8px",
                     // remove weird line break from legend
                     "&amp; .MuiOutlinedInput-notchedOutline": {
                         borderRadius: "3px",
@@ -255,22 +438,28 @@ const TextField = ({
                     },
                     // input base selector
                     "&amp; .MuiInputBase-input": {
+                        color: "#333",
                         fontFamily: "Rubik",
                         fontSize: 14,
                         borderRadius: "3px",
                         padding: "9px 14px",
                         "&amp;::placeholder": {
-                            opacity: 0.6,
+                            opacity: 1,
+                            color: "#717171"
                         },
                     },
-                }}
+                },
+                error &amp;&amp; {
+                    "&amp; .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#AE1C1C !important",
+                    },
+                }]}
                 label={null}
                 error={error}
                 disabled={disabled}
                 id={id}
                 {...rest}
             /&gt;
-            {helperText &amp;&amp; helperText}
         &lt;/FormControl&gt;
     );
 };
@@ -292,7 +481,7 @@ export default TextField;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-10-05T16:42:33.067Z
+                at 2023-01-27T19:04:06.319Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Toast/index.html

@@ -25,14 +25,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>10/10</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/6</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>10/10</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
@@ -84,13 +84,13 @@
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="10" class="abs high">10/10</td>
-	<td data-value="66.66" class="pct medium">66.66%</td>
-	<td data-value="6" class="abs medium">4/6</td>
+	<td data-value="7" class="abs high">7/7</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="7" class="abs high">7/7</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="10" class="abs high">10/10</td>
+	<td data-value="7" class="abs high">7/7</td>
 	</tr>
 
 </tbody>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-10-05T16:42:33.067Z
+                at 2023-01-27T19:04:06.319Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Toast/index.jsx.html

@@ -25,14 +25,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>10/10</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/6</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>10/10</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
@@ -178,29 +178,7 @@
 <a name='L113'></a><a href='#L113'>113</a>
 <a name='L114'></a><a href='#L114'>114</a>
 <a name='L115'></a><a href='#L115'>115</a>
-<a name='L116'></a><a href='#L116'>116</a>
-<a name='L117'></a><a href='#L117'>117</a>
-<a name='L118'></a><a href='#L118'>118</a>
-<a name='L119'></a><a href='#L119'>119</a>
-<a name='L120'></a><a href='#L120'>120</a>
-<a name='L121'></a><a href='#L121'>121</a>
-<a name='L122'></a><a href='#L122'>122</a>
-<a name='L123'></a><a href='#L123'>123</a>
-<a name='L124'></a><a href='#L124'>124</a>
-<a name='L125'></a><a href='#L125'>125</a>
-<a name='L126'></a><a href='#L126'>126</a>
-<a name='L127'></a><a href='#L127'>127</a>
-<a name='L128'></a><a href='#L128'>128</a>
-<a name='L129'></a><a href='#L129'>129</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L116'></a><a href='#L116'>116</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -208,22 +186,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -235,18 +205,22 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -305,10 +279,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -320,75 +294,86 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from "react";
-import PropTypes from "prop-types";
+&nbsp;
+import ErrorIcon from "@mui/icons-material/Error"; // warning
+import InfoIcon from "@mui/icons-material/Info"; // info
+import CancelIcon from "@mui/icons-material/Cancel"; // error
+import CheckCircleIcon from "@mui/icons-material/CheckCircle"; //success
+&nbsp;
 import { IconButton, Snackbar } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ClearIcon from "@mui/icons-material/Clear";
+&nbsp;
+import classNames from "classnames";
+import PropTypes from "prop-types";
 &nbsp;
 const Toast = ({
-    open,
+    toastType = "warning",
+    open = true,
     message,
-    toastType, // 'danger | success, more later when mockups come out
-    autoHideDuration,
+    canClose = true,
     onClose,
+    autoHideDuration,
     testId,
     toastKey,
+    toastProps, // props to pass to outer component
+    closeButtonProps, // props to pass to close button
     ...rest
 }) =&gt; {
-    const dangerColor = "#D92F2F";
-    const successColor = "#4d7e23";
-    // we can map our colors and icons to make this reusable for multiple info types.
-    const colorMap = {
-        danger: dangerColor,
-        success: successColor,
-    };
-    const iconMap = {
-        danger: ErrorOutlineIcon,
-        success: CheckCircleOutlineIcon,
+    // we have four states to render for
+    const typeSelect = {
+        warning: ErrorIcon,
+        info: InfoIcon,
+        danger: CancelIcon,
+        success: CheckCircleIcon,
     };
-    const selectedColor = colorMap[toastType];
-    const SelectedIcon = iconMap[toastType];
+    const Icon = typeSelect[toastType];
+&nbsp;
+    const toastClass = classNames("toast", toastType);
+    const iconClass = classNames("alert-icon", toastType);
 &nbsp;
-    const Message = (
-        &lt;div className="messageCont"&gt;
-            &lt;div&gt;
-                &lt;div className="errorCont"&gt;
-                    {SelectedIcon &amp;&amp; &lt;SelectedIcon className="leftIcon" /&gt;}
-                &lt;/div&gt;
-                &lt;p className="messageText" data-testid={testId}&gt;
-                    {message}
-                &lt;/p&gt;
-            &lt;/div&gt;
-            &lt;div style={{ display: "block" }}&gt;
-                &lt;IconButton
-                    className="icon-button"
-                    aria-label="close"
-                    color="inherit"
-                    sx={{ p: 0 }}
-                    onClick={onClose}
-                    data-testId="close-error-button"
-                &gt;
-                    &lt;CloseIcon /&gt;
-                &lt;/IconButton&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    );
     return (
         &lt;Snackbar
-            key={toastKey ? toastKey : <span class="branch-1 cbranch-no" title="branch not covered" >undefined}</span>
-            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+            key={toastKey ? toastKey : undefined}
+            anchorOrigin={{ vertical: "top", horizontal: "center" }}
+            autoHideDuration={autoHideDuration}
+            open={open}
+            onClose={onClose}
+            message={
+                &lt;div className={toastClass} {...toastProps}&gt;
+                    &lt;Icon className={iconClass} /&gt;
+                    &lt;div id="message" data-testid={testId}&gt;{message}&lt;/div&gt;
+                    {canClose &amp;&amp; (
+                        &lt;IconButton
+                            onClick={onClose}
+                            sx={{
+                                marginLeft: "auto",
+                                "&amp;:after": {
+                                    content: `''`,
+                                    position: "absolute",
+                                    left: "0px",
+                                    width: "1px",
+                                    height: "40px",
+                                    backgroundColor: "#B0B0B0",
+                                    pointerEvents: "none",
+                                },
+                            }}
+                            {...closeButtonProps}
+                        &gt;
+                            &lt;ClearIcon sx={{ color: "#242424" }} /&gt;
+                        &lt;/IconButton&gt;
+                    )}
+                &lt;/div&gt;
+            }
             sx={{
                 overflow: "hidden",
-                color: selectedColor,
-                borderRadius: 1,
+                // borderRadius: 4,
                 "&amp; .MuiPaper-root": {
                     backgroundColor: "#fff",
                     padding: 0,
-                    color: selectedColor,
                 },
-                "&amp; .MuiSvgIcon-root": {
-                    color: "#242424",
+                "&amp; .MuiSnackbar-root": {
+                    overflow: "hidden",
+                    borderRadius: 4,
                 },
                 "&amp; .MuiSnackbarContent-message": {
                     padding: 0,
@@ -400,50 +385,26 @@ const Toast = ({
                         justifyContent: "space-between",
                         div: {
                             display: "flex",
-                            ".messageText": {
-                                m: 0,
-                                p: 2.375,
-                                fontFamily: "Rubik",
-                                fontWeight: 500,
-                                fontSize: 14,
-                            },
-                            ".errorCont": {
-                                backgroundColor: selectedColor,
-                                ".leftIcon": {
-                                    m: 2,
-                                    color: "#fff",
-                                },
-                            },
-                            ".icon-button": {
-                                m: 2,
-                                "&amp;. MuiSvgIcon-root": {
-                                    color: "#242424",
-                                },
-                            },
                         },
                     },
-                    "&amp; .MuiSvgIcon-root": {
-                        color: "#242424",
-                    },
                 },
             }}
-            autoHideDuration={autoHideDuration}
-            open={open}
-            onClose={onClose}
-            message={message ? Message : <span class="branch-1 cbranch-no" title="branch not covered" >undefined}</span>
             {...rest}
         /&gt;
     );
 };
 &nbsp;
 Toast.propTypes = {
+    toastType: PropTypes.string,
     open: PropTypes.bool,
-    message: PropTypes.string,
-    toastType: PropTypes.string, // 'danger | success, more later when mockups come out
-    autoHideDuration: PropTypes.number,
+    message: PropTypes.node,
+    canClose: PropTypes.bool,
     onClose: PropTypes.func,
+    autoHideDuration: PropTypes.number,
     testId: PropTypes.string,
     toastKey: PropTypes.string,
+    toastProps: PropTypes.object,
+    closeButtonProps: PropTypes.object,
 };
 &nbsp;
 export default Toast;
@@ -454,7 +415,7 @@ export default Toast;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-10-05T16:42:33.067Z
+                at 2023-01-27T19:04:06.319Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>