@madie/madie-design-system 1.0.39 → 1.0.41

package/coverage/lcov-report/react/components/Select/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'>16/16</span>
+                <span class='fraction'>26/26</span>
             </div>
         
             
@@ -177,7 +177,68 @@
 <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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a>
+<a name='L167'></a><a href='#L167'>167</a>
+<a name='L168'></a><a href='#L168'>168</a>
+<a name='L169'></a><a href='#L169'>169</a>
+<a name='L170'></a><a href='#L170'>170</a>
+<a name='L171'></a><a href='#L171'>171</a>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</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>
@@ -204,11 +265,50 @@
 <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">4x</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-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-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>
@@ -257,12 +357,8 @@
 <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">12x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">10x</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>
@@ -276,6 +372,32 @@
 <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-yes">16x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">14x</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-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -318,26 +440,80 @@ const Select = ({
     ...rest
 }) =&gt; {
     const placehold = (
-        &lt;span style={{ opacity: 0.6 }}&gt;
+        &lt;span style={{ color: "#717171" }}&gt;
             {placeHolder?.name || "placeholder"}
         &lt;/span&gt;
     );
     return (
         &lt;FormControl error={error} fullWidth&gt;
+            {/* to deal with multiple height helper text in a single row*/}
+            &lt;div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/&gt; 
             &lt;InputLabel
+                // {/* has init at .2rem/3.2 px bottom. passing sx breaks style. */}
+                id={`${id}-label`}
                 disabled={disabled}
-                htmlFor={id}
                 required={required}
                 shrink
+                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"
+                    data-testid={`${id}-helper-text`}
+                    id={`${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;MUISelect
-                sx={{
+                sx={[{
                     borderRadius: "3px",
-                    height: 40, //there's a .13 coming from somewhere.
+                    height: 40,
                     border: "1px solid #DDDDDD",
-                    // remove weird line break from legend
+                    marginTop: "8px",
                     "&amp; .MuiOutlinedInput-notchedOutline": {
                         borderRadius: "3px",
                         "&amp; legend": {
@@ -351,25 +527,36 @@ const Select = ({
                     },
                     // input base selector
                     "&amp; .MuiInputBase-input": {
+                        color: "#333",
                         fontFamily: "Rubik",
                         fontSize: 14,
                         borderRadius: "3px",
                         padding: "9px 14px",
                         "&amp;::placeholder": {
-                            opacity: 0.6,
+                            color: "#717171"
                         },
                     },
                     "&amp; 	.MuiSelect-icon": {
                         color: "#323232",
                     },
-                }}
+                    "&amp; .Mui-disabled" : {
+                        backgroundColor: "#EDEDED",
+                        border: "#EDEDED",
+                    }},
+                    error &amp;&amp; {
+                        "&amp; .MuiOutlinedInput-notchedOutline": {
+                            borderColor: "#AE1C1C !important",
+                        },
+                    },
+                ]
+                }
                 displayEmpty
                 IconComponent={ExpandMoreIcon}
                 disabled={disabled}
                 required={required}
                 id={id}
-                label={null}
-                {...rest}
+                aria-describedby={`${id}-helper-text`}
+                labelId={`${id}-label`}
                 renderValue={(selected) =&gt; {
                     if (placeHolder) {
                         if (selected === placeHolder.value) {
@@ -378,14 +565,10 @@ const Select = ({
                     }
                     return selected;
                 }}
+                {...rest}
             &gt;
                 {options &amp;&amp; options}
             &lt;/MUISelect&gt;
-            {helperText &amp;&amp; (
-                &lt;FormHelperText data-testid={`helper-text`}&gt;
-                    {helperText}
-                &lt;/FormHelperText&gt;
-            )}
         &lt;/FormControl&gt;
     );
 };
@@ -412,7 +595,7 @@ export default Select;
             <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/SessionDialog/index.html

@@ -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-27T18:47:07.861Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SessionDialog/sessionDialog.js.html

@@ -148,7 +148,7 @@ export default class SessionDialog {
             <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-27T18:47:07.861Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/SessionDialogUI.jsx.html

@@ -889,7 +889,7 @@ SessionDialogUI.defaultProps = {
             <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-27T18:47:07.861Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Textfield/index.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>
         
             
@@ -86,7 +86,7 @@
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="3" class="abs high">3/3</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="6" class="abs high">6/6</td>
+	<td data-value="16" class="abs high">16/16</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>
@@ -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>