@madie/madie-design-system 1.0.7 → 1.0.10

package/components/Button/Button.stories.js

@@ -43,6 +43,12 @@ export const Danger = () => (
     </Container>
 );
 
+export const DangerPrimary = () => (
+    <Container>
+        <Button variant="danger-primary">Button</Button>
+    </Container>
+);
+
 export const Outline = () => (
     <Container className="qpp-u-fill--blue-80">
         <Button variant="outline">Button</Button>

package/components/Button/index.js

@@ -1,7 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const VARIANTS = ["secondary", "outline", "danger", "white"];
+const VARIANTS = [
+    "secondary",
+    "outline",
+    "cyan",
+    "danger",
+    "danger-primary",
+    "white",
+];
 const SIZES = ["big"];
 
 const Button = ({

package/components/FormControlLabel/index.jsx

@@ -1,23 +1,23 @@
 import React from "react";
 import { FormControlLabel as MUIFormControlLabel } from "@mui/material";
-import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles({
-    root: {
-        flexGrow: 1,
-        textTransform: "none",
-        margin: 0,
-        "& .MuiTypography-root": {
-            color: "#333",
-            fontSize: 14,
-            fontFamily: "Rubik",
-            fontWeight: 500,
-        },
-    },
-});
 const Label = (props) => {
-    const classes = useStyles();
-    return <MUIFormControlLabel classes={classes} {...props} />;
+    return (
+        <MUIFormControlLabel
+            sx={{
+                flexGrow: 1,
+                textTransform: "none",
+                margin: 0,
+                "& .MuiTypography-root": {
+                    color: "#333",
+                    fontSize: 14,
+                    fontFamily: "Rubik",
+                    fontWeight: 500,
+                },
+            }}
+            {...props}
+        />
+    );
 };
 
 export default Label;

package/components/InputLabel/index.jsx

@@ -1,57 +1,45 @@
 import React from "react";
 import { InputLabel as MUIInputLabel } from "@mui/material";
-import { makeStyles } from "@mui/styles";
-const useStyles = makeStyles({
-    asterisk: {
-        color: "#D92F2F",
-    },
-    root: {
-        "&&": {
-            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",
-        },
-    },
-    required: {
-        "&&": {
-            transform: "translateX(-12px) translateY(0px)",
-            "& .MuiInputLabel-asterisk": {
-                color: "#D92F2F",
-                marginRight: "3px !important", //this was hitting an mui bug.
-            },
-        },
-    },
-    error: {
-        "&&": {
-            color: "#D92F2F",
-        },
-    },
-    disabled: {
-        "&&": {
-            color: "rgba(0,0,0,0.6)",
-        },
-    },
-});
-const Label = (props) => {
-    const classes = useStyles();
+const Label = ({ required, disabled, error, ...rest }) => {
     return (
         <MUIInputLabel
-            classes={{
-                root: classes.root,
-                required: classes.required,
-                error: classes.error,
-                disabled: classes.disabled,
-            }}
-            {...props}
+            required={required}
+            disabled={disabled}
+            error={error}
+            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: "#D92F2F",
+                        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: "#D92F2F",
+                },
+            ]}
+            {...rest}
         />
     );
 };

package/components/MadieSpinner/MadieSpinner.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import MadieSpinner from "./index";
+
+export default {
+    title: "MadieSpinner",
+    component: MadieSpinner,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export const ExampleSpinner = () => (
+    <Wrapper>
+        <MadieSpinner />
+    </Wrapper>
+);
+
+ExampleSpinner.storyName = "example Madie Spinner";

package/components/MadieSpinner/index.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { CircularProgress } from "@mui/material";
+import PropTypes from "prop-types";
+
+// To change the spinner size you have to pass style props for height and width.
+const MadieSpinner = (props) => {
+    return (
+        <CircularProgress
+            aria-label="loading-spinner"
+            sx={{
+                "& .MuiCircularProgress-svg": {
+                    backgroundColor: "transparent",
+                    borderRadius: "100%",
+                    boxShadow: `inset 0 0 0px ${
+                        props.thickness ? props.thickness : "7"
+                    }px #DDDDDD`,
+                },
+                "& .MuiCircularProgress-circle": {
+                    color: "#209FA6",
+                    strokeLinecap: "round",
+                },
+            }}
+            thickness={7}
+            style={{ height: 50, width: 50 }}
+            // Props overwrite whatever they want.
+            {...props}
+        />
+    );
+};
+
+MadieSpinner.propTypes = {
+    thickness: PropTypes.number,
+};
+
+export default MadieSpinner;

package/components/Pagination/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { makeStyles } from "@mui/styles";
 import PropTypes from "prop-types";
 import {
     Pagination as PaginationComponent,
@@ -8,90 +7,7 @@ import {
     MenuItem,
     Typography,
 } from "@mui/material";
-
-const useStyles = makeStyles({
-    root: {
-        display: "flex",
-        flexGrow: 1,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        minHeight: 90,
-        padding: "0px 24px",
-    },
-    row: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    // text
-    dark: {
-        color: "#333333",
-    },
-    faded: {
-        color: "#757575",
-    },
-    //select
-    selectRoot: {
-        margin: '0 11px',
-        "& .MuiOutlinedInput-notchedOutline": {
-            "& legend": {
-                width: 0,
-            },
-        },
-        "& .MuiInputBase-input": {
-            fontFamily: "Rubik",
-            fontSize: 14,
-            borderRadius: 3,
-        },
-    },
-    // pagination
-    ul: {
-        "& .MuiPaginationItem-root": {
-            color: "#0073C8",
-            border: "solid 1px #CACACA",
-            "&:focus": {
-                border: "0.0625rem solid #125496",
-                borderRadius: "0.1875rem",
-                boxShadow: "0 0 0 0.25rem #cbe4ff",
-                outline: "none",
-            },
-        },
-        "& .Mui-selected": {
-            color: "#fff",
-            backgroundColor: "#0073C8 !important",
-        },
-        "& .MuiPaginationItem-ellipsis": {
-            border: "solid 1px transparent",
-        },
-        "& .MuiPaginationItem-previousNext": {
-            border: "solid 1px transparent",
-        },
-    },
-    next: {
-        border: "solid 1px transparent",
-        "&::before": {
-            content: '"Next  "',
-            marginRight: 5,
-            fontSize: 14,
-            fontFamily: "Rubik",
-        },
-    },
-    prev: {
-        border: "solid 1px transparent",
-        "&::after": {
-            content: '"  Previous"',
-            marginLeft: 5,
-            fontSize: 14,
-            fontFamily: "Rubik",
-        },
-    },
-    selected: {
-        backgroundColor: "#0073C8",
-        border: "solid 1px #0073C8",
-        color: "#fff",
-    },
-});
+import { styled } from "@mui/system";
 
 // for ts later implemeentation.
 // interface PaginationProps {
@@ -109,7 +25,20 @@ const useStyles = makeStyles({
 //     hidePrevButton: boolean;
 //     hideNextButton: boolean;
 //   }
-
+const Container = styled("div")({
+    display: "flex",
+    flexGrow: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    minHeight: 90,
+    padding: "0px 24px",
+});
+const Row = styled("div")({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+});
 const Pagination = ({
     totalItems = 0,
     visibleItems = 0,
@@ -124,20 +53,33 @@ const Pagination = ({
     hidePrevButton = true,
     hideNextButton = false,
 }) => {
-    const classes = useStyles();
     return (
-        <div className={classes.root}>
-            <div className={classes.row}>
+        <Container>
+            <Row>
                 <Typography
                     fontSize={14}
                     fontFamily="Rubik"
-                    className={classes.dark}
+                    sx={{
+                        color: "#333333",
+                    }}
                 >
                     Items per page
                 </Typography>
                 <Select
                     size="small"
-                    className={classes.selectRoot}
+                    sx={{
+                        margin: "0 11px",
+                        "& .MuiOutlinedInput-notchedOutline": {
+                            "& legend": {
+                                width: 0,
+                            },
+                        },
+                        "& .MuiInputBase-input": {
+                            fontFamily: "Rubik",
+                            fontSize: 14,
+                            borderRadius: 3,
+                        },
+                    }}
                     id="pagination-limit-select"
                     value={limit}
                     label={null}
@@ -155,31 +97,75 @@ const Pagination = ({
                 </Select>
                 <Typography
                     fontSize={14}
-                    className={classes.faded}
+                    sx={{
+                        color: "#757575",
+                    }}
                     fontFamily="Rubik"
                 >{`${offset + 1} - ${
                     visibleItems + offset
                 } of ${totalItems}`}</Typography>
-            </div>
+            </Row>
             <PaginationComponent
-                classes={{
-                    ul: classes.ul,
-                    selected: classes.selected,
+                sx={{
+                    "& .MuiPagination-ul": {
+                        "& .MuiPaginationItem-root": {
+                            color: "#0073C8",
+                            border: "solid 1px #CACACA",
+                            "&:focus": {
+                                border: "0.0625rem solid #125496",
+                                borderRadius: "0.1875rem",
+                                boxShadow: "0 0 0 0.25rem #cbe4ff",
+                                outline: "none",
+                            },
+                        },
+                        "& .Mui-selected": {
+                            color: "#fff",
+                            backgroundColor: "#0073C8 !important",
+                        },
+                        "& .MuiPaginationItem-ellipsis": {
+                            border: "solid 1px transparent",
+                        },
+                        "& .MuiPaginationItem-previousNext": {
+                            border: "solid 1px transparent",
+                        },
+                    },
                 }}
                 renderItem={(props) => {
                     if (props.type === "next") {
                         return (
                             <PaginationItem
+                                sx={{
+                                    border: "solid 1px transparent",
+                                    "& .Mui-selected": {
+                                        backgroundColor: "#0073C8",
+                                        border: "solid 1px #0073C8",
+                                        color: "#fff",
+                                    },
+                                    "&::before": {
+                                        content: '"Next  "',
+                                        marginRight: "5px",
+                                        fontSize: 14,
+                                        fontFamily: "Rubik",
+                                    },
+                                }}
                                 {...props}
-                                classes={{ text: classes.next }}
                             />
                         );
                     }
                     if (props.type === "previous") {
                         return (
                             <PaginationItem
+                                sx={{
+                                    border: "solid 1px transparent",
+                                    "& .Mui-selected": {},
+                                    "&::after": {
+                                        content: '"  Previous"',
+                                        marginLeft: "5px",
+                                        fontSize: 14,
+                                        fontFamily: "Rubik",
+                                    },
+                                }}
                                 {...props}
-                                classes={{ text: classes.prev }}
                             />
                         );
                     }
@@ -194,7 +180,7 @@ const Pagination = ({
                 hidePrevButton={hidePrevButton}
                 hideNextButton={hideNextButton}
             />
-        </div>
+        </Container>
     );
 };
 

package/components/Select/index.jsx

@@ -1,33 +1,10 @@
 import React from "react";
 import { FormControl, Select as MUISelect, MenuItem } from "@mui/material";
-import { makeStyles } from "@mui/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import InputLabel from "../InputLabel";
 import FormHelperText from "@mui/material/FormHelperText";
 import PropTypes from "prop-types";
 
-const useStyles = makeStyles({
-    icon: {
-        color: "#323232",
-    },
-    select: {
-        border: "1px solid #DDDDDD",
-        // hide legend
-        "& .MuiOutlinedInput-notchedOutline": {
-            "& legend": {
-                width: 0,
-            },
-        },
-        "& .MuiInputBase-input": {
-            paddingTop: 7.5,
-            paddingBottom: 7.5,
-            fontFamily: "Rubik",
-            fontSize: 14,
-            borderRadius: 3,
-        },
-    },
-});
-//   custom select to make this way easier
 const Select = ({
     placeHolder = undefined, // expects placeholder objects of { name: value } and inserts into the render item function.
     required = false,
@@ -47,8 +24,12 @@ const Select = ({
     ],
     ...rest
 }) => {
-    const classes = useStyles();
-    const placehold = <span>{placeHolder?.name || "placeholder"}</span>;
+    // const classes = useStyles();
+    const placehold = (
+        <span style={{ opacity: 0.6 }}>
+            {placeHolder?.name || "placeholder"}
+        </span>
+    );
     return (
         <FormControl error={error} fullWidth>
             <InputLabel
@@ -60,8 +41,36 @@ const Select = ({
                 {label}
             </InputLabel>
             <MUISelect
-                className={classes.select}
-                classes={{ icon: classes.icon }}
+                sx={{
+                    borderRadius: "3px",
+                    height: 40, //there's a .13 coming from somewhere.
+                    border: "1px solid #DDDDDD",
+                    // remove weird line break from legend
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        borderRadius: "3px",
+                        "& legend": {
+                            width: 0,
+                        },
+                    },
+                    "& .MuiOutlinedInput-root": {
+                        "&&": {
+                            borderRadius: "3px",
+                        },
+                    },
+                    // input base selector
+                    "& .MuiInputBase-input": {
+                        fontFamily: "Rubik",
+                        fontSize: 14,
+                        borderRadius: "3px",
+                        padding: "9px 14px",
+                        "&::placeholder": {
+                            opacity: 0.6,
+                        },
+                    },
+                    "& 	.MuiSelect-icon": {
+                        color: "#323232",
+                    },
+                }}
                 displayEmpty
                 IconComponent={ExpandMoreIcon}
                 error={error}

package/components/TextField/index.jsx

@@ -1,39 +1,8 @@
 import React from "react";
 import { FormControl, TextField as MUITextField } from "@mui/material";
-import { makeStyles } from "@mui/styles";
 import InputLabel from "../InputLabel";
 import PropTypes from "prop-types";
 
-const useStyles = makeStyles({
-    asterisk: {
-        color: "#D92F2F",
-    },
-    select: {
-        borderRadius: 3,
-        height: 40, //there's a .13 coming from somewhere.
-        border: "1px solid #DDDDDD",
-        // remove weird line break from legend
-        "& .MuiOutlinedInput-notchedOutline": {
-            "& legend": {
-                width: 0,
-            },
-        },
-        "& .MuiOutlinedInput-root": {
-            borderRadius: 3,
-        },
-        // input base selector
-        "& .MuiInputBase-input": {
-            fontFamily: "Rubik",
-            fontSize: 14,
-            borderRadius: 3,
-            padding: "9px 14px",
-            "&::placeholder": {
-                opacity: 1,
-            },
-        },
-    },
-    // add a little space
-});
 const TextField = ({
     id,
     error = false,
@@ -43,7 +12,6 @@ const TextField = ({
     label,
     ...rest
 }) => {
-    const classes = useStyles();
     return (
         <FormControl fullWidth error={error}>
             <InputLabel
@@ -56,7 +24,33 @@ const TextField = ({
                 {label}
             </InputLabel>
             <MUITextField
-                className={classes.select}
+                sx={{
+                    borderRadius: "3px",
+                    height: 40, //there's a .13 coming from somewhere.
+                    border: "1px solid #DDDDDD",
+                    // remove weird line break from legend
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        borderRadius: "3px",
+                        "& legend": {
+                            width: 0,
+                        },
+                    },
+                    "& .MuiOutlinedInput-root": {
+                        "&&": {
+                            borderRadius: "3px",
+                        },
+                    },
+                    // input base selector
+                    "& .MuiInputBase-input": {
+                        fontFamily: "Rubik",
+                        fontSize: 14,
+                        borderRadius: "3px",
+                        padding: "9px 14px",
+                        "&::placeholder": {
+                            opacity: 0.6,
+                        },
+                    },
+                }}
                 label={null}
                 error={error}
                 disabled={disabled}