@madie/madie-design-system 1.0.8 → 1.0.11

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

@@ -1,22 +1,14 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import axios from "axios";
 
-import InfoTip from "../Infotip/Infotip";
 import LegacyFooterUI from "./LegacyFooterUI";
-import Subscribe from "./Subscribe";
-import SocialLinks from "./SocialLinks";
-
-const infoTipLabel =
-    "When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.";
 
 const FooterUI = (props) => {
     const isNewFooter = props.isNewFooter;
     const isIESupportPage = props.isIESupportPage;
     const signUpNowLink = props.showHcdResearch
         ? "/about/hcd-research"
-        : "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);
+        : "mailto:madie@cms.hhs.gov?subject=Sign up for feedback sessions";
 
     // Default footer assets
     const assets = {
@@ -28,11 +20,11 @@ const FooterUI = (props) => {
                     src="/images/hhs-logo-black.svg"
                 />
             ),
-            qppLogo: (
+            madieLogo: (
                 <img
                     className="qpp-logo"
                     src="/images/qpp_logo_rgb_color.png"
-                    alt="qpp logo"
+                    alt="madie logo"
                 />
             ),
         },
@@ -43,60 +35,11 @@ const FooterUI = (props) => {
         return isIESupportPage ? "/" : link;
     };
 
-    // The footer content is populated with the following priority order:
-    // 1. Use the footer content in localStorage if it's there
-    // 2. If not, make a call to get it from the QPPFE endpoint. Hydrate the localStorage item with the response.
-    // 3. If the call fails, use the default value
-    useEffect(() => {
-        const storageContent = JSON.parse(
-            localStorage.getItem("qpp_footer_listServ")
-        );
-        if (
-            storageContent?.content &&
-            new Date().valueOf() < storageContent.expiration
-        ) {
-            setListServ(storageContent.listServ);
-        } else {
-            const origin = window.location.origin;
-            axios
-                .get(
-                    !origin.includes("localhost")
-                        ? `${origin}/config/footer`
-                        : "https://qpp.cms.gov/config/footer"
-                )
-                .then(({ data: { data = {} } }) => {
-                    localStorage.setItem(
-                        "qpp_footer_listServ",
-                        JSON.stringify({
-                            listServ: data.listServ,
-                        })
-                    );
-                    setListServ(data.listServ);
-                })
-                .catch((e) => {
-                    setListServ(false);
-                });
-        }
-    }, []);
     if (isNewFooter) {
         return (
             <>
                 {!isIESupportPage && (
-                    <div className="feedback-session-sign-up">
-                        <div className="responsive-container">
-                            <hr />
-                            <p>
-                                <strong>Help shape the future of QPP.</strong>{" "}
-                                Participate in a user feedback session.{" "}
-                                <a
-                                    className="email-note-link"
-                                    href={signUpNowLink}
-                                >
-                                    Sign up now
-                                </a>
-                            </p>
-                        </div>
-                    </div>
+                    <div className="feedback-session-sign-up" />
                 )}
                 <footer className="global-footer">
                     <div className="build-version" id="build-version">
@@ -104,156 +47,46 @@ const FooterUI = (props) => {
                     </div>
 
                     <div className="responsive-container">
-                        <>
-                            {!isIESupportPage && (
-                                <div className="global-footer-container">
-                                    <div className="footer-resources">
-                                        <p className="sub-title">Resources</p>
-                                        <ul>
-                                            <li>
-                                                <a
-                                                    href="/about/resource-library"
-                                                    aria-label="Resource Library"
-                                                    data-track-category="FooterNav"
-                                                    data-track-action="OpenEducationAndTools"
-                                                    data-track-label="Education and Tools"
-                                                >
-                                                    Resource Library
-                                                </a>
-                                            </li>
-                                            <li>
-                                                <a
-                                                    href="/resources/help-and-support"
-                                                    aria-label="Help and Support"
-                                                    data-track-category="FooterNav"
-                                                    data-track-action="OpenHelpAndSupport"
-                                                    data-track-label="Help and Support"
-                                                >
-                                                    Help and Support
-                                                </a>
-                                            </li>
-                                            <li>
-                                                <a
-                                                    href="/about/small-underserved-rural-practices"
-                                                    aria-label="Support for Small Practices"
-                                                    data-track-category="FooterNav"
-                                                    data-track-action="OpenSupportSmallPractices"
-                                                    data-track-label="Support for Small Practices"
-                                                >
-                                                    Support for Small Practices
-                                                </a>
-                                            </li>
-                                            <li>
-                                                <a
-                                                    href="/developers"
-                                                    aria-label="Developer Tools"
-                                                    data-track-category="FooterNav"
-                                                    data-track-action="OpenDeveloperTools"
-                                                    data-track-label="Quality Payment Program"
-                                                >
-                                                    Developer Tools
-                                                </a>
-                                            </li>
-                                            <li>
-                                                <a
-                                                    href="/glossary"
-                                                    aria-label="Glossary"
-                                                    data-track-category="FooterNav"
-                                                    data-track-action="OpenGlossary"
-                                                    data-track-label="Glossary"
-                                                >
-                                                    Glossary
-                                                </a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                    <div className="footer-contact-cms">
-                                        <p className="sub-title">Contact CMS</p>
-                                        <p className="contact-title">
-                                            By Phone:
-                                        </p>
-                                        <p>Monday - Friday 8 a.m - 8 p.m ET</p>
-                                        <p>
-                                            1-866-288-8292 (TRS: 711)
-                                            <span className="footer-trs-infotip">
-                                                <InfoTip label={infoTipLabel} />
-                                            </span>
-                                        </p>
-
-                                        <p className="contact-title">
-                                            By Email:
-                                        </p>
-                                        <p>
-                                            <a
-                                                aria-label="QPP@cms.hhs.gov"
-                                                href="mailto:QPP@cms.hhs.gov"
-                                                className="email-link"
-                                            >
-                                                QPP@cms.hhs.gov
-                                            </a>
-                                        </p>
-                                    </div>
-                                    <div className="footer-social-newsletter">
-                                        <p className="sub-title">
-                                            Stay Connected
-                                        </p>
-                                        <SocialLinks />
-                                        <p className="sub-title">
-                                            {listServ
-                                                ? "Sign Up for the QPP Listserv"
-                                                : "Sign Up for the QPP Newsletter"}
-                                        </p>
-                                        <Subscribe />
-                                    </div>
-                                </div>
-                            )}
-                            <hr />
-                        </>
-
                         <div className="other-links">
+                            <hr className="divider-top" />
                             <ul className="small">
-                                <li>
+                            <li>
                                     <a
-                                        href={setLink("/privacy")}
-                                        aria-label="Notice of Privacy and Disclaimer"
+                                        href={setLink("https://harp.cms.gov/login/terms-of-use")}
+                                        aria-label="Terms of Use"
                                         data-track-category="FooterNav"
-                                        data-track-action="OpenPrivacyDisclaimer"
-                                        data-track-label="Notice of Privacy and Disclaimer"
+                                        data-track-action="OpenTermsOfService"
+                                        data-track-label="Terms of Use"
                                     >
-                                        CMS Privacy Notice
+                                        Terms of Use
                                     </a>
                                 </li>
                                 <li className="divider"></li>{" "}
                                 <li>
                                     <a
-                                        href={setLink("/accessibility")}
-                                        aria-label="Accessibility"
+                                        href={setLink("https://www.cms.gov/privacy")}
+                                        aria-label="Privacy Policy"
                                         data-track-category="FooterNav"
-                                        data-track-action="OpenAccessibility"
-                                        data-track-label="Accessibility"
+                                        data-track-action="OpenPrivacyPolicy"
+                                        data-track-label="Privacy Policy"
                                     >
-                                        Accessibility
+                                        Privacy Policy
                                     </a>
                                 </li>
                                 <li className="divider"></li>{" "}
                                 <li>
                                     <a
-                                        aria-label="Download Adobe Reader"
-                                        className="adobe-link"
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                        href={setLink(
-                                            "https://get.adobe.com/reader"
-                                        )}
+                                        href={setLink("https://www.hhs.gov/web/governance/digital-strategy/it-policy-archive/hhs-rules-of-behavior-for-the-use-of-hhs-information-and-it-resources-policy.html")}
+                                        aria-label="Rules of Behavior"
                                         data-track-category="FooterNav"
-                                        data-track-action="DownloadAdobeReader"
-                                        data-track-label="AdobeReader"
+                                        data-track-action="OpenRulesofBehavior"
+                                        data-track-label="Rules of Behavior"
                                     >
-                                        Download Adobe Reader
+                                        Rules of Behavior
                                     </a>
                                 </li>
                             </ul>
-                            <hr />
+                            <hr className="divider-bottom" />
                         </div>
                         <div className="qpp-hhs-logo-container">
                             <div className="qpp-logo-container">
@@ -290,8 +123,8 @@ FooterUI.propTypes = {
     isIESupportPage: PropTypes.bool,
     showHcdResearch: PropTypes.bool,
     assets: PropTypes.shape({
-        hhsLogo: PropTypes.element,
-        qppLogo: PropTypes.element,
+        cmsLogo: PropTypes.element,
+        madieLogo: PropTypes.element,
     }),
 };
 

package/components/Footer/LegacyFooterUI.jsx

@@ -21,7 +21,7 @@ const LegacyFooterUI = ({ buildVersion, isFullWidth, signUpNowLink }) => {
                 >
                     <div className="row">
                         <div className="col-sm-12 col-md-12 col-lg-12">
-                            <span>Help shape the future of QPP</span> by
+                            <span>Help shape the future of MADiE</span> by
                             participating in user feedback sessions.{" "}
                             <a className="email-note-link" href={signUpNowLink}>
                                 Send us an email to sign up
@@ -118,7 +118,7 @@ const LegacyFooterUI = ({ buildVersion, isFullWidth, signUpNowLink }) => {
                             <ul className="small">
                                 <li>
                                     <a
-                                        href="/privacy"
+                                        href="https://www.cms.gov/privacy"
                                         data-track-category="FooterNav"
                                         data-track-action="OpenPrivacyDisclaimer"
                                         data-track-label="Notice of Privacy and Disclaimer"
@@ -129,7 +129,7 @@ const LegacyFooterUI = ({ buildVersion, isFullWidth, signUpNowLink }) => {
                                 <span className="divider"></span>
                                 <li>
                                     <a
-                                        href="/accessibility"
+                                        href="https://www.cms.gov/About-CMS/Agency-Information/Aboutwebsite/Policiesforaccessibility"
                                         data-track-category="FooterNav"
                                         data-track-action="OpenAccessibility"
                                         data-track-label="Accessibility"
@@ -157,10 +157,10 @@ const LegacyFooterUI = ({ buildVersion, isFullWidth, signUpNowLink }) => {
                                 <span className="divider"></span>
                                 <li>
                                     <a
-                                        href="mailto:QPP@cms.hhs.gov"
+                                        href="mailto:sb-mat-help@semanticbits.com"
                                         className="email-link"
                                     >
-                                        QPP@cms.hhs.gov
+                                        sb-mat-help@semanticbits.com
                                     </a>
                                 </li>
                                 <li>

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

@@ -24,6 +24,6 @@ export const ExampleSpinner = () => (
     <Wrapper>
         <MadieSpinner />
     </Wrapper>
-)
+);
 
 ExampleSpinner.storyName = "example Madie Spinner";

package/components/MadieSpinner/index.jsx

@@ -1,37 +1,35 @@
-import React from 'react';
-import { CircularProgress } from '@mui/material';
-import { makeStyles } from "@mui/styles";
+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) => {
-    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}
-    />)
-}
+        <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
+    thickness: PropTypes.number,
 };
 
 export default MadieSpinner;