@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Header/Header.stories.js

@@ -1,32 +1,35 @@
-import React from 'react';
-import Header from './HeaderUI';
-import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
+import React from "react";
+import Header from "./HeaderUI";
+import { withKnobs, boolean, text, number } from "@storybook/addon-knobs";
+import { action } from "@storybook/addon-actions";
 
 export default {
-  title: 'Header',
-  component: Header,
-  decorators: [withKnobs],
+    title: "Header",
+    component: Header,
+    decorators: [withKnobs],
 };
 
 export const Example = () => (
-  <div id="qpp-nav-header">
-    <Header
-      isLoginEnabled={boolean('isLoginEnabled', true)}
-      skipToContentId={text('skipToContentId', '')}
-      includeSkipToSidebar={boolean('includeSkipToSidebar', false)}
-      showFacilityBasedPreviewLink={boolean(
-        'showFacilityBasedPreviewLink',
-        false
-      )}
-      showCancelButton={boolean('showCancelButton', false)}
-      handleCancel={action('handleCancel')}
-      showPhysicianCompareLink={boolean('showPhysicianCompareLink', false)}
-      performanceYear={number('performanceYear', 2019)}
-      feedbackPerformanceYear={text('feedbackPerformanceYear', '')}
-      fbpPerformanceYear={text('fbpPerformanceYear', '')}
-      showCovidLink={boolean('showCovidLink', false)}
-      isDevPre={boolean('isDevPre', false)}
-    />
-  </div>
+    <div id="qpp-nav-header">
+        <Header
+            isLoginEnabled={boolean("isLoginEnabled", true)}
+            skipToContentId={text("skipToContentId", "")}
+            includeSkipToSidebar={boolean("includeSkipToSidebar", false)}
+            showFacilityBasedPreviewLink={boolean(
+                "showFacilityBasedPreviewLink",
+                false
+            )}
+            showCancelButton={boolean("showCancelButton", false)}
+            handleCancel={action("handleCancel")}
+            showPhysicianCompareLink={boolean(
+                "showPhysicianCompareLink",
+                false
+            )}
+            performanceYear={number("performanceYear", 2019)}
+            feedbackPerformanceYear={text("feedbackPerformanceYear", "")}
+            fbpPerformanceYear={text("fbpPerformanceYear", "")}
+            showCovidLink={boolean("showCovidLink", false)}
+            isDevPre={boolean("isDevPre", false)}
+        />
+    </div>
 );

package/components/Header/HeaderAccountMenu.jsx

@@ -1,169 +1,183 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cookie from 'cookie';
-import jwtDecode from 'jwt-decode';
+import React from "react";
+import PropTypes from "prop-types";
+import cookie from "cookie";
+import jwtDecode from "jwt-decode";
 
-import { useHeaderState } from './hooks';
-import { setUtagLink } from './utag-helpers';
-import SessionDialogUI from '../SessionDialogUI';
+import { useHeaderState } from "./hooks";
+import { setUtagLink } from "./utag-helpers";
+import SessionDialogUI from "../SessionDialogUI";
 import {
-  performanceFeedbackUrl,
-  physicianCompareUrl,
-  dashboardUrl,
-  manageUrl,
-  submissionsUrl,
-  facilityBasedPreviewUrl,
-} from '../SideNav/helpers';
-import HeaderMenuItem from './HeaderMenuItem';
+    performanceFeedbackUrl,
+    physicianCompareUrl,
+    dashboardUrl,
+    manageUrl,
+    submissionsUrl,
+    facilityBasedPreviewUrl,
+} from "../SideNav/helpers";
+import HeaderMenuItem from "./HeaderMenuItem";
 
 const HeaderAccountMenu = ({
-  handleClick,
-  fbpPerformanceYear,
-  feedbackPerformanceYear,
-  isLoginEnabled,
-  isDevPre,
-  performanceYear,
-  showFacilityBasedPreviewLink,
-  showPhysicianCompareLink,
+    handleClick,
+    fbpPerformanceYear,
+    feedbackPerformanceYear,
+    isLoginEnabled,
+    isDevPre,
+    performanceYear,
+    showFacilityBasedPreviewLink,
+    showPhysicianCompareLink,
 }) => {
-  const cookies = cookie.parse(document.cookie);
-  const hasAuthToken = cookies.hasOwnProperty('qpp_auth_token');
-  const hasAuthorizations = cookies.qpp_has_authorizations === 'true';
-  const hasNonRegistryAuthorizations =
-    cookies.qpp_has_non_registry_authorizations === 'true';
-  const isDevPreAndNotAuthenticated = !hasAuthToken && isDevPre;
-  const { closeMenus, RouterLink } = useHeaderState();
+    const cookies = cookie.parse(document.cookie);
+    const hasAuthToken = cookies.hasOwnProperty("qpp_auth_token");
+    const hasAuthorizations = cookies.qpp_has_authorizations === "true";
+    const hasNonRegistryAuthorizations =
+        cookies.qpp_has_non_registry_authorizations === "true";
+    const isDevPreAndNotAuthenticated = !hasAuthToken && isDevPre;
+    const { closeMenus, RouterLink } = useHeaderState();
 
-  if (!isLoginEnabled || isDevPreAndNotAuthenticated) {
-    return null;
-  }
+    if (!isLoginEnabled || isDevPreAndNotAuthenticated) {
+        return null;
+    }
 
-  // login link
-  if (!hasAuthToken) {
-    if (RouterLink) {
-      return (
-        <li onClick={handleClick} className="header-item-login login">
-          <RouterLink
-            className="menu-link"
-            to="/login"
-            onClick={() => {
-              closeMenus();
-              setUtagLink('main navbar', 'click', '/login');
-            }}
-            data-track-category="TopNav"
-            data-track-action="click"
-            data-track-label="Sign In"
-          >
-            <div className="nav-title">Sign In</div>
-            <div className="nav-description">
-              Manage Account <br />
-              and Register
-            </div>
-          </RouterLink>
-        </li>
-      );
+    // login link
+    if (!hasAuthToken) {
+        if (RouterLink) {
+            return (
+                <li onClick={handleClick} className="header-item-login login">
+                    <RouterLink
+                        className="menu-link"
+                        to="/login"
+                        onClick={() => {
+                            closeMenus();
+                            setUtagLink("main navbar", "click", "/login");
+                        }}
+                        data-track-category="TopNav"
+                        data-track-action="click"
+                        data-track-label="Sign In"
+                    >
+                        <div className="nav-title">Sign In</div>
+                        <div className="nav-description">
+                            Manage Account <br />
+                            and Register
+                        </div>
+                    </RouterLink>
+                </li>
+            );
+        }
+        return (
+            <li className="header-item-login login">
+                <a
+                    className="menu-link"
+                    href="/login"
+                    data-track-category="TopNav"
+                    data-track-action="click"
+                    data-track-label="Sign In"
+                    onClick={() => {
+                        setUtagLink("main navbar", "click", "/login");
+                    }}
+                >
+                    <div className="nav-title">Sign In</div>
+                    <div className="nav-description">
+                        Manage Account <br />
+                        and Register
+                    </div>
+                </a>
+            </li>
+        );
     }
-    return (
-      <li className="header-item-login login">
-        <a
-          className="menu-link"
-          href="/login"
-          data-track-category="TopNav"
-          data-track-action="click"
-          data-track-label="Sign In"
-          onClick={() => {
-            setUtagLink('main navbar', 'click', '/login');
-          }}
-        >
-          <div className="nav-title">Sign In</div>
-          <div className="nav-description">
-            Manage Account <br />
-            and Register
-          </div>
-        </a>
-      </li>
-    );
-  }
 
-  if (hasAuthToken) {
-    const { firstName } = jwtDecode(cookies.qpp_auth_token);
-    const additionalLinks = [];
-    if (hasAuthorizations) {
-      additionalLinks.push(
-        { type: 'link', href: dashboardUrl, name: 'Eligibility & Reporting' },
-        {
-          type: 'link',
-          href: performanceFeedbackUrl(
-            feedbackPerformanceYear || performanceYear
-          ),
-          name: 'Performance Feedback',
+    if (hasAuthToken) {
+        const { firstName } = jwtDecode(cookies.qpp_auth_token);
+        const additionalLinks = [];
+        if (hasAuthorizations) {
+            additionalLinks.push(
+                {
+                    type: "link",
+                    href: dashboardUrl,
+                    name: "Eligibility & Reporting",
+                },
+                {
+                    type: "link",
+                    href: performanceFeedbackUrl(
+                        feedbackPerformanceYear || performanceYear
+                    ),
+                    name: "Performance Feedback",
+                }
+            );
+            if (showPhysicianCompareLink && hasNonRegistryAuthorizations) {
+                additionalLinks.push({
+                    type: "link",
+                    href: physicianCompareUrl,
+                    name: "Doctors & Clinicians Preview",
+                });
+            }
+            if (showFacilityBasedPreviewLink) {
+                additionalLinks.push({
+                    type: "link",
+                    href: facilityBasedPreviewUrl(
+                        fbpPerformanceYear || performanceYear
+                    ),
+                    name: "Facility Based Preview",
+                });
+            }
         }
-      );
-      if (showPhysicianCompareLink && hasNonRegistryAuthorizations) {
-        additionalLinks.push({
-          type: 'link',
-          href: physicianCompareUrl,
-          name: 'Doctors & Clinicians Preview',
-        });
-      }
-      if (showFacilityBasedPreviewLink) {
-        additionalLinks.push({
-          type: 'link',
-          href: facilityBasedPreviewUrl(fbpPerformanceYear || performanceYear),
-          name: 'Facility Based Preview',
-        });
-      }
+        const columns = [
+            [
+                {
+                    items: [
+                        {
+                            type: "link",
+                            href: submissionsUrl,
+                            name: "Account Home",
+                        },
+                        ...additionalLinks,
+                        {
+                            type: "link",
+                            href: manageUrl,
+                            name: "Manage Access",
+                        },
+                        { type: "signout", name: "Sign Out" },
+                    ],
+                },
+            ],
+        ];
+        const devPreColumns = [
+            [{ items: [{ type: "signout", name: "Sign Out" }] }],
+        ];
+        return (
+            <>
+                <SessionDialogUI />
+                <HeaderMenuItem
+                    hasMenu
+                    menuName="Login"
+                    name={firstName}
+                    subtitle="My Account"
+                    className="account-menu-item"
+                    columns={isDevPre ? devPreColumns : columns}
+                    rows={isDevPre ? devPreColumns : columns}
+                />
+            </>
+        );
     }
-    const columns = [
-      [
-        {
-          items: [
-            { type: 'link', href: submissionsUrl, name: 'Account Home' },
-            ...additionalLinks,
-            { type: 'link', href: manageUrl, name: 'Manage Access' },
-            { type: 'signout', name: 'Sign Out' },
-          ],
-        },
-      ],
-    ];
-    const devPreColumns = [
-      [{ items: [{ type: 'signout', name: 'Sign Out' }] }],
-    ];
-    return (
-      <>
-        <SessionDialogUI />
-        <HeaderMenuItem
-          hasMenu
-          menuName="Login"
-          name={firstName}
-          subtitle="My Account"
-          className="account-menu-item"
-          columns={isDevPre ? devPreColumns : columns}
-          rows={isDevPre ? devPreColumns : columns}
-        />
-      </>
-    );
-  }
 };
 
 HeaderAccountMenu.propTypes = {
-  isLoginEnabled: PropTypes.bool.isRequired,
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
-  performanceYear: PropTypes.number,
-  fbpPerformanceYear: PropTypes.string,
-  feedbackPerformanceYear: PropTypes.string,
-  isDevPre: PropTypes.bool,
-  handleClick: PropTypes.func.isRequired,
+    isLoginEnabled: PropTypes.bool.isRequired,
+    showPhysicianCompareLink: PropTypes.bool,
+    showFacilityBasedPreviewLink: PropTypes.bool,
+    performanceYear: PropTypes.number,
+    fbpPerformanceYear: PropTypes.string,
+    feedbackPerformanceYear: PropTypes.string,
+    isDevPre: PropTypes.bool,
+    handleClick: PropTypes.func.isRequired,
 };
 
 HeaderAccountMenu.defaultProps = {
-  showPhysicianCompareLink: false,
-  showFacilityBasedPreviewLink: false,
-  performanceYear: 2017,
-  fbpPerformanceYear: null,
-  feedbackPerformanceYear: null,
-  isDevPre: false,
+    showPhysicianCompareLink: false,
+    showFacilityBasedPreviewLink: false,
+    performanceYear: 2017,
+    fbpPerformanceYear: null,
+    feedbackPerformanceYear: null,
+    isDevPre: false,
 };
 
 export default HeaderAccountMenu;

package/components/Header/HeaderCancel.jsx

@@ -1,16 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 const HeaderCancel = ({ handleCancel }) => {
-  return (
-    <button className="header-cancel" onClick={handleCancel}>
-      Cancel
-    </button>
-  );
+    return (
+        <button className="header-cancel" onClick={handleCancel}>
+            Cancel
+        </button>
+    );
 };
 
 HeaderCancel.propTypes = {
-  handleCancel: PropTypes.func,
+    handleCancel: PropTypes.func,
 };
 
 export default HeaderCancel;

package/components/Header/HeaderContainer.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-import HeaderLogo from './HeaderLogo';
-import NotificationBanner from '../NotificationBanner';
+import HeaderLogo from "./HeaderLogo";
+import NotificationBanner from "../NotificationBanner";
 
 /**
  * Accessibility enhancement that moves focus to an element for "Skip" links
@@ -10,54 +10,59 @@ import NotificationBanner from '../NotificationBanner';
  * @param {String} id - The HTML ID of the element to be focused
  */
 function jumpToLink(e, id) {
-  e.preventDefault();
-  document.getElementById(id).focus();
+    e.preventDefault();
+    document.getElementById(id).focus();
 }
 
 const HeaderContainer = ({
-  children,
-  includeSkipToSidebar,
-  showCancelButton,
-  skipToContentId,
-  isIESupportPage,
+    children,
+    includeSkipToSidebar,
+    showCancelButton,
+    skipToContentId,
+    isIESupportPage,
 }) => (
-  <>
-    <a
-      className="skip"
-      onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
-      href={`#${skipToContentId || 'mainContent'}`}
-    >
-      Skip to content
-    </a>
-    {includeSkipToSidebar && (
-      <a
-        className="skip"
-        onClick={(e) => jumpToLink(e, 'qppSidebar')}
-        href="#qppSidebar"
-      >
-        Skip to sidebar
-      </a>
-    )}
-    {!isIESupportPage && <NotificationBanner />}
-    <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
-      <HeaderLogo />
-      {children}
-    </header>
-  </>
+    <>
+        <a
+            className="skip"
+            onClick={(e) =>
+                jumpToLink(e, `${skipToContentId || "mainContent"}`)
+            }
+            href={`#${skipToContentId || "mainContent"}`}
+        >
+            Skip to content
+        </a>
+        {includeSkipToSidebar && (
+            <a
+                className="skip"
+                onClick={(e) => jumpToLink(e, "qppSidebar")}
+                href="#qppSidebar"
+            >
+                Skip to sidebar
+            </a>
+        )}
+        {!isIESupportPage && <NotificationBanner />}
+        <header
+            id="top"
+            className={showCancelButton ? "show-cancel-button" : ""}
+        >
+            <HeaderLogo />
+            {children}
+        </header>
+    </>
 );
 
 HeaderContainer.propTypes = {
-  children: PropTypes.node.isRequired,
-  includeSkipToSidebar: PropTypes.bool,
-  showCancelButton: PropTypes.bool,
-  skipToContentId: PropTypes.string,
-  isIESupportPage: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+    includeSkipToSidebar: PropTypes.bool,
+    showCancelButton: PropTypes.bool,
+    skipToContentId: PropTypes.string,
+    isIESupportPage: PropTypes.bool,
 };
 HeaderContainer.defaultProps = {
-  includeSkipToSidebar: false,
-  showCancelButton: false,
-  skipToContentId: null,
-  isIESupportPage: false,
+    includeSkipToSidebar: false,
+    showCancelButton: false,
+    skipToContentId: null,
+    isIESupportPage: false,
 };
 
 export default HeaderContainer;

package/components/Header/HeaderLogo.jsx

@@ -1,42 +1,42 @@
-import React from 'react';
+import React from "react";
 
-import { useHeaderState } from './hooks';
+import { useHeaderState } from "./hooks";
 
 const HeaderLogo = () => {
-  const { closeMenus, RouterLink } = useHeaderState();
-  if (RouterLink) {
+    const { closeMenus, RouterLink } = useHeaderState();
+    if (RouterLink) {
+        return (
+            <RouterLink
+                className="header-logo"
+                to="/"
+                onClick={closeMenus}
+                data-track-category="HeaderNav"
+                data-track-action="OpenQPPHome"
+                data-track-label="Quality Payment Program"
+            >
+                <img
+                    className="qpp-logo"
+                    src="/images/qpp_logo_rgb_color.png"
+                    alt="QPP logo"
+                />
+            </RouterLink>
+        );
+    }
     return (
-      <RouterLink
-        className="header-logo"
-        to="/"
-        onClick={closeMenus}
-        data-track-category="HeaderNav"
-        data-track-action="OpenQPPHome"
-        data-track-label="Quality Payment Program"
-      >
-        <img
-          className="qpp-logo"
-          src="/images/qpp_logo_rgb_color.png"
-          alt="QPP logo"
-        />
-      </RouterLink>
+        <a
+            className="header-logo"
+            href="/"
+            data-track-category="HeaderNav"
+            data-track-action="OpenQPPHome"
+            data-track-label="Quality Payment Program"
+        >
+            <img
+                className="qpp-logo"
+                src="/images/qpp_logo_rgb_color.png"
+                alt="QPP logo"
+            />
+        </a>
     );
-  }
-  return (
-    <a
-      className="header-logo"
-      href="/"
-      data-track-category="HeaderNav"
-      data-track-action="OpenQPPHome"
-      data-track-label="Quality Payment Program"
-    >
-      <img
-        className="qpp-logo"
-        src="/images/qpp_logo_rgb_color.png"
-        alt="QPP logo"
-      />
-    </a>
-  );
 };
 
 export default HeaderLogo;