@madie/madie-design-system 1.0.6 → 1.0.9

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,7 @@
 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/Footer/FooterUI.jsx

@@ -18,6 +18,27 @@ const FooterUI = (props) => {
         : "mailto:QPPUserResearch@cms.hhs.gov?subject=Sign up for feedback sessions&body=Please let us know your role and how many Tax Identification Numbers (TINs) you represent. Don’t send us your actual TINs, that is confidential information that should not be shared with this email address. If you do not represent a practice, let us know what work you do in connection to QPP.";
     const [listServ, setListServ] = useState(false);
 
+    // Default footer assets
+    const assets = {
+        ...{
+            hhsLogo: (
+                <img
+                    className="hhs-logo"
+                    alt="Department of Health &amp; Human Services USA"
+                    src="/images/hhs-logo-black.svg"
+                />
+            ),
+            qppLogo: (
+                <img
+                    className="qpp-logo"
+                    src="/images/qpp_logo_rgb_color.png"
+                    alt="qpp logo"
+                />
+            ),
+        },
+        ...props.assets,
+    };
+
     const setLink = (link) => {
         return isIESupportPage ? "/" : link;
     };
@@ -236,18 +257,10 @@ const FooterUI = (props) => {
                         </div>
                         <div className="qpp-hhs-logo-container">
                             <div className="qpp-logo-container">
-                                <img
-                                    className="qpp-logo"
-                                    src="/images/qpp_logo_rgb_color.png"
-                                    alt="qpp logo"
-                                />
+                                {assets.qppLogo}
                             </div>
                             <div className="hhs-logo-container">
-                                <img
-                                    className="hhs-logo"
-                                    alt="Department of Health &amp; Human Services USA"
-                                    src="/images/hhs-logo-black.svg"
-                                />
+                                {assets.hhsLogo}
                                 <p>
                                     A federal government website managed and
                                     paid for by the U.S Centers for Medicare
@@ -276,6 +289,10 @@ FooterUI.propTypes = {
     isNewFooter: PropTypes.bool,
     isIESupportPage: PropTypes.bool,
     showHcdResearch: PropTypes.bool,
+    assets: PropTypes.shape({
+        hhsLogo: PropTypes.element,
+        qppLogo: PropTypes.element,
+    }),
 };
 
 export default FooterUI;

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,37 @@
+import React from 'react';
+import { CircularProgress } from '@mui/material';
+import { makeStyles } from "@mui/styles";
+import PropTypes from "prop-types";
+
+// To change the spinner size you have to pass style props for height and width.
+const MadieSpinner = (props) => {
+    const useStyles = makeStyles({
+        svg: {
+            backgroundColor: 'transparent',
+            borderRadius: '100%',
+            // box shadow is our track. It needs to match the thickness of the svg element to look like it
+            // if we get a thickness value, we update our box shadow
+            boxShadow: `inset 0 0 0px ${props.thickness ? props.thickness : '7'}px #DDDDDD`,
+        },
+        circle: {
+            color: '#209FA6',
+            strokeLinecap: 'round',
+        }
+    });
+    const classes = useStyles();
+    return (
+    <CircularProgress
+        aria-label="loading-spinner"
+        classes={classes}
+        thickness={7}
+        style={{ height: 50, width: 50 }}
+        // Props overwrite whatever they want.
+        {...props}
+    />)
+}
+
+MadieSpinner.propTypes = {
+    thickness: PropTypes.number
+};
+
+export default MadieSpinner;

package/components/Select/index.jsx

@@ -23,7 +23,7 @@ const useStyles = makeStyles({
             paddingBottom: 7.5,
             fontFamily: "Rubik",
             fontSize: 14,
-            borderRadius: 3,
+            borderRadius: 3
         },
     },
 });
@@ -48,7 +48,7 @@ const Select = ({
     ...rest
 }) => {
     const classes = useStyles();
-    const placehold = <span>{placeHolder?.name || "placeholder"}</span>;
+    const placehold = <span style={{ opacity: .6 }}>{placeHolder?.name || "placeholder"}</span>;
     return (
         <FormControl error={error} fullWidth>
             <InputLabel

package/components/TextField/index.jsx

@@ -28,7 +28,7 @@ const useStyles = makeStyles({
             borderRadius: 3,
             padding: "9px 14px",
             "&::placeholder": {
-                opacity: 1,
+                opacity: .6,
             },
         },
     },

package/components/Toast/Toast.stories.js

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { withKnobs } from "@storybook/addon-knobs";
+import Toast from './index'
+
+export default {
+    title: "Toast",
+    component: Toast,
+    decorators: [withKnobs],
+};
+
+export const SuccessToast = () => {
+    const [toastOpen, setToastOpen] = useState(false);
+    return (
+        <div style={{ height: '100vh', width: '100vw', backgroundColor: '#242424'}}>
+            <button onClick={() => setToastOpen(true)} style={{ position: 'absolute', top: '50%', left: 'calc(50% - 80px)'}}>
+                Simulate Success
+            </button>
+            <Toast
+                toastKey='toast-key'
+                testId="success-toast"
+                toastType='success'
+                open={toastOpen}
+                message='An action has successfully been completed'
+                onClose={() => setToastOpen(false)}
+                autoHideDuration={3000}
+            />
+        </div>
+    )
+}
+
+export const DangerToast = () => {
+    const [toastOpen, setToastOpen] = useState(false);
+    return (
+        <div style={{ height: '100vh', width: '100vw', backgroundColor: '#242424'}}>
+            <button onClick={() => setToastOpen(true)} style={{ position: 'absolute', top: '50%', left: 'calc(50% - 80px)'}}>
+                Simulate Danger
+            </button>
+            <Toast
+                toastKey='toast-key'
+                toastType='danger'
+                testId="danger-toast"
+                open={toastOpen}
+                message='Something has gone wrong. Please try again'
+                onClose={() => setToastOpen(false)}
+                autoHideDuration={3000}
+            />
+        </div>
+    )
+}

package/components/Toast/index.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+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';
+
+const Toast = ({
+    open,
+    message,
+    toastType, // 'danger | success, more later when mockups come out
+    autoHideDuration,
+    onClose,
+    testId,
+    toastKey,
+    ...rest
+}) => {
+    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
+    }
+    const selectedColor = colorMap[toastType];
+    const SelectedIcon = iconMap[toastType];
+
+    const Message = (
+    <div className='messageCont'>
+        <div>
+            <div className='errorCont'>
+            {SelectedIcon && (
+                <SelectedIcon
+                className='leftIcon'
+                />
+            )}
+            </div>
+            <p className='messageText' data-testid={testId}>
+            {message}
+            </p>
+        </div>
+        <div style={{display: 'block'}}>
+            <IconButton
+                className='icon-button'
+                aria-label="close"
+                color="inherit"
+                sx={{ p: 0}}
+                onClick={onClose}
+            >
+                <CloseIcon />
+            </IconButton>
+        </div>
+    </div>
+    )
+    return (
+        <Snackbar
+            key={toastKey ? toastKey : undefined}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+            sx={{
+            overflow:'hidden',
+            color: selectedColor,
+            borderRadius: 1,
+            '& .MuiPaper-root': {
+                backgroundColor: '#fff',
+                padding: 0,
+                color: selectedColor
+            },
+            '& .MuiSvgIcon-root': {
+                color: '#242424'
+            },
+            '& .MuiSnackbarContent-message': {
+                padding: 0,
+                flexGrow: 1,
+                '.messageCont': {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexGrow: 1,
+                    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,
+                            '&. MuiSvgIcon-root': {
+                                color: '#242424'
+                            }
+                        }
+                    }
+                },
+                '& .MuiSvgIcon-root': {
+                    color: '#242424'
+
+                }
+            }
+        }}
+
+        autoHideDuration={autoHideDuration}
+        open={open}
+        onClose={onClose}
+        message={message ? Message : undefined}
+        {...rest}
+      />)
+}
+
+export default Toast;

package/components/index.js

@@ -9,6 +9,7 @@ import Footer from "./Footer/FooterUI";
 import Header from "./Header/HeaderUI";
 import InputLabel from "./InputLabel";
 import FormControlLabel from "./FormControlLabel";
+import MadieSpinner from './MadieSpinner';
 import Modal from "./Modal";
 import { Pagination } from "./Pagination";
 import SideNav from "./SideNav/UI/SideNavUI";
@@ -18,6 +19,7 @@ import TabPanel from "./Tabs/TabPanel";
 import Tabs from "./Tabs/index";
 import TextField from "./TextField";
 import Tooltip from "./Tooltip";
+import Toast from './Toast';
 import Infotip from "./Infotip";
 import Search from "./Search";
 import TextInput from "./TextInput";
@@ -120,6 +122,7 @@ export {
     Icons,
     Infotip,
     Modal,
+    MadieSpinner,
     Pagination,
     Search,
     Select,
@@ -130,6 +133,7 @@ export {
     TextButton,
     TextInput,
     TextField,
+    Toast,
     Dropdown,
     Tooltip,
     DSLink,