@madie/madie-design-system 1.0.5 → 1.0.8

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/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";
@@ -120,6 +121,7 @@ export {
     Icons,
     Infotip,
     Modal,
+    MadieSpinner,
     Pagination,
     Search,
     Select,