@madie/madie-design-system 1.0.47 → 1.0.49

package/components/RadioButton/RadioButton.stories.jsx

@@ -7,10 +7,10 @@ export default {
 };
 
 const options = [
-        { label: "option 1", value: true },
-        { label: "option 2", value: false},
-        { label: "options 3", value: "options 3"},
-    ];
+    { label: "option 1", value: true },
+    { label: "option 2", value: false },
+    { label: "options 3", value: "options 3" },
+];
 
 const TemplateRadioButton = (args) => {
     const [value, setValue] = useState("test");

package/components/Select/Select.stories.js

@@ -11,7 +11,10 @@ export default {
 };
 
 const Wrapper = ({ children }) => (
-    <div className="qpp-u-padding--16" style={{ width: 300, marginBottom: "16px" }} >
+    <div
+        className="qpp-u-padding--16"
+        style={{ width: 300, marginBottom: "16px" }}
+    >
         {children}
     </div>
 );
@@ -155,78 +158,78 @@ export const Error = () => (
     </Wrapper>
 );
 
-
-
 export const VariedHeights = () => (
-    <div className="qpp-u-padding--16" style={{ width: 900, marginBottom: "16px" }} >
-        <Box sx={{display: "flex",
-                flexDirection: "row"}}>
-        <Select
-            error
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText="An error message"
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-        <Select
-            // error
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText=""
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
-        <Select
-            // error
-            placeHolder={{ name: "placeholder", value: "" }}
-            defaultValue=""
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "
-            options={options.map(({ key, value, testId, name }) => {
-                return (
-                    <MenuItem
-                        key={key}
-                        value={value}
-                        data-testid={`option-${testId}`}
-                    >
-                        {name}
-                    </MenuItem>
-                );
-            })}
-        />
+    <div
+        className="qpp-u-padding--16"
+        style={{ width: 900, marginBottom: "16px" }}
+    >
+        <Box sx={{ display: "flex", flexDirection: "row" }}>
+            <Select
+                error
+                placeHolder={{ name: "placeholder", value: "" }}
+                defaultValue=""
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText="An error message"
+                options={options.map(({ key, value, testId, name }) => {
+                    return (
+                        <MenuItem
+                            key={key}
+                            value={value}
+                            data-testid={`option-${testId}`}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            />
+            <Select
+                // error
+                placeHolder={{ name: "placeholder", value: "" }}
+                defaultValue=""
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText=""
+                options={options.map(({ key, value, testId, name }) => {
+                    return (
+                        <MenuItem
+                            key={key}
+                            value={value}
+                            data-testid={`option-${testId}`}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            />
+            <Select
+                // error
+                placeHolder={{ name: "placeholder", value: "" }}
+                defaultValue=""
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText="An error message designed to take up a lot of space to see how we space multiple input elements within the same row in a responsive manner "
+                options={options.map(({ key, value, testId, name }) => {
+                    return (
+                        <MenuItem
+                            key={key}
+                            value={value}
+                            data-testid={`option-${testId}`}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            />
         </Box>
     </div>
-)
+);

package/components/Select/index.jsx

@@ -32,14 +32,21 @@ const Select = ({
     return (
         <FormControl error={error} fullWidth>
             {/* to deal with multiple height helper text in a single row*/}
-            <div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/> 
+            <div
+                style={{
+                    width: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    flexGrow: 1,
+                }}
+            />
             <InputLabel
                 // {/* has init at .2rem/3.2 px bottom. passing sx breaks style. */}
                 id={`${id}-label`}
                 disabled={disabled}
                 required={required}
                 shrink
-                style={{marginBottom: 0, height: 16}} // force a heignt
+                style={{ marginBottom: 0, height: 16 }} // force a heignt
                 sx={[
                     {
                         backgroundColor: "transparent",
@@ -76,65 +83,69 @@ const Select = ({
             >
                 {label}
             </InputLabel>
-                {helperText && (<FormHelperText
+            {helperText && (
+                <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 && {
-                        color: "#AE1C1C !important",
-                    },
-                ]}
+                    sx={[
+                        {
+                            margin: "4px 0px 0px 0px",
+                            color: "#515151",
+                            lineHeight: 1,
+                        },
+                        error && {
+                            color: "#AE1C1C !important",
+                        },
+                    ]}
                 >
                     {helperText}
-                </FormHelperText>)}
+                </FormHelperText>
+            )}
             <MUISelect
-                sx={[{
-                    borderRadius: "3px",
-                    height: 40,
-                    border: "1px solid #DDDDDD",
-                    marginTop: "8px",
-                    "& .MuiOutlinedInput-notchedOutline": {
+                sx={[
+                    {
                         borderRadius: "3px",
-                        "& legend": {
-                            width: 0,
+                        height: 40,
+                        border: "1px solid #DDDDDD",
+                        marginTop: "8px",
+                        "& .MuiOutlinedInput-notchedOutline": {
+                            borderRadius: "3px",
+                            "& legend": {
+                                width: 0,
+                            },
                         },
-                    },
-                    "& .MuiOutlinedInput-root": {
-                        "&&": {
+                        "& .MuiOutlinedInput-root": {
+                            "&&": {
+                                borderRadius: "3px",
+                            },
+                        },
+                        // input base selector
+                        "& .MuiInputBase-input": {
+                            color: "#333",
+                            fontFamily: "Rubik",
+                            fontSize: 14,
                             borderRadius: "3px",
+                            padding: "9px 14px",
+                            "&::placeholder": {
+                                color: "#717171",
+                            },
                         },
-                    },
-                    // input base selector
-                    "& .MuiInputBase-input": {
-                        color: "#333",
-                        fontFamily: "Rubik",
-                        fontSize: 14,
-                        borderRadius: "3px",
-                        padding: "9px 14px",
-                        "&::placeholder": {
-                            color: "#717171"
+                        "& 	.MuiSelect-icon": {
+                            color: "#323232",
+                        },
+                        "& .Mui-disabled": {
+                            backgroundColor: "#EDEDED",
+                            border: "#EDEDED",
                         },
                     },
-                    "& 	.MuiSelect-icon": {
-                        color: "#323232",
-                    },
-                    "& .Mui-disabled" : {
-                        backgroundColor: "#EDEDED",
-                        border: "#EDEDED",
-                    }},
                     error && {
                         "& .MuiOutlinedInput-notchedOutline": {
                             borderColor: "#AE1C1C !important",
                         },
                     },
-                ]
-                }
+                ]}
                 displayEmpty
                 IconComponent={ExpandMoreIcon}
                 disabled={disabled}

package/components/Tabs/Tab.js

@@ -6,71 +6,64 @@ const typeA = {
     color: "#fff",
     borderRadius: "4px 4px 0px 0px !important",
     backgroundColor: "#003366",
-    "&:hover":{
-        background: "#001F3D"
+    "&:hover": {
+        background: "#001F3D",
     },
-    "&:focus":{
+    "&:focus": {
         background: "#125496",
         boxShadow: "0px 0px 0px 4px #CBE4FF",
     },
 };
 const typeB = {
     color: "#515151",
-    "&:hover":{
+    "&:hover": {
         background: "#F2F9FF",
-        color: "#242424"
+        color: "#242424",
     },
-    "&:focus":{
+    "&:focus": {
         boxShadow: "0px 0px 0px 4px #CBE4FF",
-        background: "#fff"
-    }
+        background: "#fff",
+    },
 };
 const typeC = {
     color: "#333",
     background: "#EDEDED",
-    "&:hover":{
+    "&:hover": {
         background: "#FAFAFA",
-        color: "#515151"
+        color: "#515151",
     },
-    "&:focus":{
+    "&:focus": {
         boxShadow: "0px 0px 0px 4px #CBE4FF",
-        background: "#fff"
-    }
+        background: "#fff",
+    },
 };
 
-
 const Tab = ({ type, orientation, size, ...rest }) => {
     const baseStyle = {
-        height: size === 'standard' ? '48px' : '60px',
+        height: size === "standard" ? "48px" : "60px",
         fontFamily: "Rubik, sans serif",
         fontWeight: 400,
-        padding: size === 'standard' ? "14.5px 24.5px" : "20.5px 24px",
+        padding: size === "standard" ? "14.5px 24.5px" : "20.5px 24px",
         textTransform: "none",
         fontSize: "16px",
-        alignItems: orientation === 'vertical' && "flex-start",
-        '& .Mui-disabled': {
+        alignItems: orientation === "vertical" && "flex-start",
+        "& .Mui-disabled": {
             background: "#DDDDDD",
-            color: "#717171"
+            color: "#717171",
         },
-    }
+    };
     const style = ((type) => {
         if (type === "A") {
-            return  { ...baseStyle, ...typeA}
+            return { ...baseStyle, ...typeA };
         }
         if (type === "B" || type === "D") {
-            return  { ...baseStyle, ...typeB, }
+            return { ...baseStyle, ...typeB };
         }
         if (type === "C") {
-            return  { ...baseStyle, ...typeC}
+            return { ...baseStyle, ...typeC };
         }
-    })(type)
-    return (
-        <MuiTab            
-            tabIndex={0}
-            sx={style}
-            {...rest}
-        />
-    );
+    })(type);
+    return <MuiTab tabIndex={0} sx={style} {...rest} />;
 };
 
 Tab.propTypes = {