@madie/madie-design-system 1.0.47 → 1.0.49

package/components/Tabs/Tabs.stories.js

@@ -2,8 +2,7 @@ import React, { useState } from "react";
 import { withKnobs } from "@storybook/addon-knobs";
 
 import Tabs from "./index";
-import Tab from './Tab';
-
+import Tab from "./Tab";
 
 export default {
     title: "Tabs",
@@ -13,61 +12,124 @@ export default {
 
 export const TypeA = () => {
     // state, setState
-    const [selected, setSelected] = useState(1)
-
+    const [selected, setSelected] = useState(1);
 
-    const handleChange = (e,v) => {
+    const handleChange = (e, v) => {
         // 1,2,3
         setSelected(v);
     };
 
-
     return (
-        <div style={{margin: "25px"}}>
-            <div style={{ width: "fit-content"}}>
+        <div style={{ margin: "25px" }}>
+            <div style={{ width: "fit-content" }}>
                 Standard: A
-                <Tabs type="A" size="standard" value={selected} onChange={handleChange}>
-                <Tab type="A" size="standard" label="Item One" value={1}/>
-                <Tab type="A" size="standard" label="Item Two" value={2}/>
-                <Tab type="A" size="standard" label="Item Three" value={3}/>
-                <Tab type="A" size="standard" label="disabled" value={4} disabled/>
+                <Tabs
+                    type="A"
+                    size="standard"
+                    value={selected}
+                    onChange={handleChange}
+                >
+                    <Tab type="A" size="standard" label="Item One" value={1} />
+                    <Tab type="A" size="standard" label="Item Two" value={2} />
+                    <Tab
+                        type="A"
+                        size="standard"
+                        label="Item Three"
+                        value={3}
+                    />
+                    <Tab
+                        type="A"
+                        size="standard"
+                        label="disabled"
+                        value={4}
+                        disabled
+                    />
                 </Tabs>
             </div>
-            <div style={{ width: "fit-content"}}>
+            <div style={{ width: "fit-content" }}>
                 Large: A
-                <Tabs type="A" size="large" value={selected} onChange={handleChange}>
-                <Tab type="A" size="large" label="Item One" value={1}/>
-                <Tab type="A" size="large" label="Item Two" value={2}/>
-                <Tab type="A" size="large" label="Item Three" value={3}/>
-                <Tab type="A" size="large" label="disabled" value={4} disabled/>
+                <Tabs
+                    type="A"
+                    size="large"
+                    value={selected}
+                    onChange={handleChange}
+                >
+                    <Tab type="A" size="large" label="Item One" value={1} />
+                    <Tab type="A" size="large" label="Item Two" value={2} />
+                    <Tab type="A" size="large" label="Item Three" value={3} />
+                    <Tab
+                        type="A"
+                        size="large"
+                        label="disabled"
+                        value={4}
+                        disabled
+                    />
                 </Tabs>
             </div>
-            <div style={{ width: "fit-content"}}>
+            <div style={{ width: "fit-content" }}>
                 Standard: B
-                <Tabs type="B" size="standard" value={selected} onChange={handleChange}>
+                <Tabs
+                    type="B"
+                    size="standard"
+                    value={selected}
+                    onChange={handleChange}
+                >
                     <Tab type="B" size="standard" label="Item One" value={1} />
                     <Tab type="B" size="standard" label="Item Two" value={2} />
-                    <Tab type="B" size="standard" label="Item Three" value={3} />
-                    <Tab type="B" size="standard" label="disabled" value={4} disabled/>
+                    <Tab
+                        type="B"
+                        size="standard"
+                        label="Item Three"
+                        value={3}
+                    />
+                    <Tab
+                        type="B"
+                        size="standard"
+                        label="disabled"
+                        value={4}
+                        disabled
+                    />
                 </Tabs>
             </div>
-            
-            <div style={{ width: "fit-content"}}>
+
+            <div style={{ width: "fit-content" }}>
                 Large: B
-                <Tabs type="B" size="large" value={selected} onChange={handleChange}>
+                <Tabs
+                    type="B"
+                    size="large"
+                    value={selected}
+                    onChange={handleChange}
+                >
                     <Tab type="B" size="large" label="Item One" value={1} />
                     <Tab type="B" size="large" label="Item Two" value={2} />
                     <Tab type="B" size="large" label="Item Three" value={3} />
-                    <Tab type="B" size="large" label="disabled" value={4} disabled/>
+                    <Tab
+                        type="B"
+                        size="large"
+                        label="disabled"
+                        value={4}
+                        disabled
+                    />
                 </Tabs>
             </div>
-            <div style={{ width: "fit-content"}}>
+            <div style={{ width: "fit-content" }}>
                 Standard: C
                 <Tabs type="C" value={selected} onChange={handleChange}>
                     <Tab type="C" size="standard" label="Item One" value={1} />
                     <Tab type="C" size="standard" label="Item Two" value={2} />
-                    <Tab type="C" size="standard" label="Item Three"value={3} />
-                    <Tab type="C" size="standard" label="disabled" value={4} disabled/>
+                    <Tab
+                        type="C"
+                        size="standard"
+                        label="Item Three"
+                        value={3}
+                    />
+                    <Tab
+                        type="C"
+                        size="standard"
+                        label="disabled"
+                        value={4}
+                        disabled
+                    />
                 </Tabs>
             </div>
             <div style={{ width: "fit-content" }}>
@@ -75,26 +137,73 @@ export const TypeA = () => {
                 <Tabs type="C" value={selected} onChange={handleChange}>
                     <Tab type="C" size="large" label="Item One" value={1} />
                     <Tab type="C" size="large" label="Item Two" value={2} />
-                    <Tab type="C" size="large" label="Item Three"value={3} />
-                    <Tab type="C" size="large" label="disabled" value={4} disabled/>
+                    <Tab type="C" size="large" label="Item Three" value={3} />
+                    <Tab
+                        type="C"
+                        size="large"
+                        label="disabled"
+                        value={4}
+                        disabled
+                    />
                 </Tabs>
             </div>
             <div>
                 Vertical Standard: C
-                <Tabs type="C" value={selected} onChange={handleChange} orientation="vertical">
-                    <Tab type="C" size="standard" label="Item One" value={1} orientation="vertical"/>
-                    <Tab type="C" size="standard" label="Item Two" value={2} orientation="vertical"/>
-                    <Tab type="C" size="standard" label="Item Three"value={3} orientation="vertical"/>
-                    <Tab type="C" size="standard" label="disabled" value={4} disabled orientation="vertical"/>
+                <Tabs
+                    type="C"
+                    value={selected}
+                    onChange={handleChange}
+                    orientation="vertical"
+                >
+                    <Tab
+                        type="C"
+                        size="standard"
+                        label="Item One"
+                        value={1}
+                        orientation="vertical"
+                    />
+                    <Tab
+                        type="C"
+                        size="standard"
+                        label="Item Two"
+                        value={2}
+                        orientation="vertical"
+                    />
+                    <Tab
+                        type="C"
+                        size="standard"
+                        label="Item Three"
+                        value={3}
+                        orientation="vertical"
+                    />
+                    <Tab
+                        type="C"
+                        size="standard"
+                        label="disabled"
+                        value={4}
+                        disabled
+                        orientation="vertical"
+                    />
                 </Tabs>
             </div>
-            <div style={{ width: "fit-content"}}>
+            <div style={{ width: "fit-content" }}>
                 Standard: D
                 <Tabs type="D" value={selected} onChange={handleChange}>
                     <Tab type="D" size="standard" label="Item One" value={1} />
                     <Tab type="D" size="standard" label="Item Two" value={2} />
-                    <Tab type="D" size="standard" label="Item Three"value={3} />
-                    <Tab type="D" size="standard" label="disabled" value={4} disabled/>
+                    <Tab
+                        type="D"
+                        size="standard"
+                        label="Item Three"
+                        value={3}
+                    />
+                    <Tab
+                        type="D"
+                        size="standard"
+                        label="disabled"
+                        value={4}
+                        disabled
+                    />
                 </Tabs>
             </div>
             <div style={{ width: "fit-content" }}>
@@ -102,8 +211,14 @@ export const TypeA = () => {
                 <Tabs type="D" value={selected} onChange={handleChange}>
                     <Tab type="D" size="large" label="Item One" value={1} />
                     <Tab type="D" size="large" label="Item Two" value={2} />
-                    <Tab type="D" size="large" label="Item Three"value={3} />
-                    <Tab type="D" size="large" label="disabled" value={4} disabled/>
+                    <Tab type="D" size="large" label="Item Three" value={3} />
+                    <Tab
+                        type="D"
+                        size="large"
+                        label="disabled"
+                        value={4}
+                        disabled
+                    />
                 </Tabs>
             </div>
         </div>

package/components/Tabs/index.js

@@ -7,44 +7,40 @@ const typeA = {
         columnGap: "4px !important",
     },
     "& .MuiTabs-indicator": {
-        display: "none !important"
-      },
+        display: "none !important",
+    },
 };
 
 const typeB = {
     backgroundColor: "#FFF",
     color: "#515151",
     "& .MuiTabs-indicator": {
-        backgroundColor:"#209FA6",
-        height: "6px"
-      },
+        backgroundColor: "#209FA6",
+        height: "6px",
+    },
 };
 
 const typeC = {
-    color:"333",
+    color: "333",
     "& .MuiTabs-indicator": {
-        backgroundColor:"#209FA6",
+        backgroundColor: "#209FA6",
         height: "100%",
         width: "6px !important",
         left: 0,
-      },
+    },
 };
 
 const typeD = {
     backgroundColor: "#FFF",
     color: "#515151",
     "& .MuiTabs-indicator": {
-        backgroundColor:"#209FA6",
+        backgroundColor: "#209FA6",
         height: "6px",
-        top: 0
-      },
-}
+        top: 0,
+    },
+};
 
-const Tabs = ({
-    type,
-    size,
-    ...rest
-}) => {
+const Tabs = ({ type, size, ...rest }) => {
     const baseStyle = {
         outline: "none",
         fontFamily: "Rubik, sans Sarif",
@@ -56,28 +52,24 @@ const Tabs = ({
             fontWeight: 500,
             color: "#333 !important",
             backgroundColor: "#fff",
-          },
-    }
+        },
+    };
     const style = ((type) => {
         if (type === "A") {
-            return  { ...baseStyle, ...typeA}
+            return { ...baseStyle, ...typeA };
         }
         if (type === "B") {
-            return  { ...baseStyle, ...typeB}
+            return { ...baseStyle, ...typeB };
         }
         if (type === "C") {
-            return  { ...baseStyle, ...typeC}
+            return { ...baseStyle, ...typeC };
         }
         if (type === "D") {
-            return  { ...baseStyle, ...typeD}
+            return { ...baseStyle, ...typeD };
         }
-    })(type)
-    return (<MuiTabs
-        disableRipple
-        sx={style}
-        {...rest}
-    />)
-}
+    })(type);
+    return <MuiTabs disableRipple sx={style} {...rest} />;
+};
 
 Tabs.propTypes = {
     orientatin: PropTypes.string,

package/components/TextArea/TextArea.stories.js

@@ -95,8 +95,11 @@ export const Error = () => (
 );
 
 export const VariedHeights = () => (
-    <div className="qpp-u-padding--16" style={{ width: 900, marginBottom: "16px" }} >
-        <div style={{display: "flex", flexDirection: "row"}}>
+    <div
+        className="qpp-u-padding--16"
+        style={{ width: 900, marginBottom: "16px" }}
+    >
+        <div style={{ display: "flex", flexDirection: "row" }}>
             <TextArea
                 placeholder="Placeholder"
                 required
@@ -138,4 +141,5 @@ export const VariedHeights = () => (
                 helperText="An error message"
             />
         </div>
-    </div>)
+    </div>
+);

package/components/TextArea/index.jsx

@@ -1,9 +1,5 @@
 import React from "react";
-import {
-    FormControl,
-    FormHelperText,
-    TextareaAutosize
-} from "@mui/material";
+import { FormControl, FormHelperText, TextareaAutosize } from "@mui/material";
 import InputLabel from "../InputLabel";
 import PropTypes from "prop-types";
 
@@ -21,69 +17,81 @@ const TextArea = ({
     // text area autosize is deprecated and only takes style rules
     return (
         <FormControl fullWidth error={error}>
-            <div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/> 
+            <div
+                style={{
+                    width: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    flexGrow: 1,
+                }}
+            />
             <InputLabel
                 disabled={disabled}
                 shrink
                 required={required}
                 error={error}
                 htmlFor={id}
-                style={{marginBottom: 0, height: 16}} // force a heignt
+                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",
-                    "& .MuiInputLabel-asterisk": {
-                        color: "#AE1C1C !important",
-                        marginRight: "3px !important", //this was
+                    {
+                        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",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#AE1C1C !important",
+                            marginRight: "3px !important", //this was
+                        },
                     },
-                },
-                required && {
-                    transform: "translateX(-12px) translateY(0px)",
-                    "& .MuiInputLabel-asterisk": {
-                        color: "#D92F2",
-                        marginRight: "3px !important", //this was
+                    required && {
+                        transform: "translateX(-12px) translateY(0px)",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#D92F2",
+                            marginRight: "3px !important", //this was
+                        },
+                    },
+                    disabled && {
+                        color: "rgba(0,0,0,0.6)",
+                    },
+                    error && {
+                        color: "#AE1C1C !important",
                     },
-                },
-                disabled && {
-                    color: "rgba(0,0,0,0.6)",
-                },
-                error && {
-                    color: "#AE1C1C !important",
-                },
-            ]}
+                ]}
             >
                 {label}
             </InputLabel>
-            { helperText && (<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 && {
-                    color: "#AE1C1C !important",
-                },
-            ]}
-                    >
-                {helperText}
-            </FormHelperText>)}
+            {helperText && (
+                <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 && {
+                            color: "#AE1C1C !important",
+                        },
+                    ]}
+                >
+                    {helperText}
+                </FormHelperText>
+            )}
             <TextareaAutosize
-                className={error ? "text-area-variable error" : "text-area-variable"}
+                className={
+                    error ? "text-area-variable error" : "text-area-variable"
+                }
                 label={null}
                 disabled={disabled}
                 id={id}
@@ -102,6 +110,6 @@ TextArea.propTypes = {
     disabled: PropTypes.bool,
     placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.
     label: PropTypes.string,
-    inputProps: PropTypes.any
+    inputProps: PropTypes.any,
 };
 export default TextArea;

package/components/TextField/TextField.stories.js

@@ -95,38 +95,41 @@ export const Error = () => (
 );
 
 export const VariedHeights = () => (
-    <div className="qpp-u-padding--16" style={{ width: 900, marginBottom: "16px" }} >
-        <div style={{display: "flex",
-                flexDirection: "row"}}>
-                    <TextField
-            placeholder="Placeholder"
-            required
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText="An error message"
-        />
-        <TextField
-            placeholder="Placeholder"
-            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 "
-        />
-        <TextField
-            placeholder="Placeholder"
-            error
-            required
-            label="Text Label"
-            id="measureName"
-            inputProps={{ "data-testid": "measure-name-input" }}
-            data-testid="measure-name-text-field"
-            size="small"
-            helperText="An error message"
-        />
+    <div
+        className="qpp-u-padding--16"
+        style={{ width: 900, marginBottom: "16px" }}
+    >
+        <div style={{ display: "flex", flexDirection: "row" }}>
+            <TextField
+                placeholder="Placeholder"
+                required
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText="An error message"
+            />
+            <TextField
+                placeholder="Placeholder"
+                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 "
+            />
+            <TextField
+                placeholder="Placeholder"
+                error
+                required
+                label="Text Label"
+                id="measureName"
+                inputProps={{ "data-testid": "measure-name-input" }}
+                data-testid="measure-name-text-field"
+                size="small"
+                helperText="An error message"
+            />
         </div>
-    </div>)
+    </div>
+);