@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Header/HeaderMenuLink.js

@@ -1,50 +1,50 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { submissionsUrl } from '../SideNav/helpers';
-import { useHeaderState } from './hooks';
-import { setUtagLink } from './utag-helpers';
+import React from "react";
+import PropTypes from "prop-types";
+import { submissionsUrl } from "../SideNav/helpers";
+import { useHeaderState } from "./hooks";
+import { setUtagLink } from "./utag-helpers";
 
 // exclude submissions urls
 const isNotExcluded = (href) => !href.includes(submissionsUrl);
 
 const HeaderMenuLink = ({ href, name }) => {
-  const { RouterLink, closeMenus } = useHeaderState();
-  if (RouterLink && isNotExcluded(href)) {
+    const { RouterLink, closeMenus } = useHeaderState();
+    if (RouterLink && isNotExcluded(href)) {
+        return (
+            <RouterLink
+                to={href}
+                onClick={() => {
+                    closeMenus();
+                    setUtagLink("main navbar", "click", href);
+                }}
+                data-track-category="TopNav"
+                data-track-action="click"
+                data-track-label={name}
+                className="nav-link"
+            >
+                {name}
+            </RouterLink>
+        );
+    }
     return (
-      <RouterLink
-        to={href}
-        onClick={() => {
-          closeMenus();
-          setUtagLink('main navbar', 'click', href);
-        }}
-        data-track-category="TopNav"
-        data-track-action="click"
-        data-track-label={name}
-        className="nav-link"
-      >
-        {name}
-      </RouterLink>
+        <a
+            href={href}
+            className="nav-link"
+            data-track-category="TopNav"
+            data-track-action="click"
+            data-track-label={name}
+            onClick={() => {
+                setUtagLink("main navbar", "click", href);
+            }}
+        >
+            {name}
+        </a>
     );
-  }
-  return (
-    <a
-      href={href}
-      className="nav-link"
-      data-track-category="TopNav"
-      data-track-action="click"
-      data-track-label={name}
-      onClick={() => {
-        setUtagLink('main navbar', 'click', href);
-      }}
-    >
-      {name}
-    </a>
-  );
 };
 
 HeaderMenuLink.propTypes = {
-  href: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
 };
 
 export default HeaderMenuLink;

package/components/Header/HeaderMenuSignOutButton.js

@@ -1,62 +1,62 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
 
-import { LogoutSession } from '../../session';
-import { setUtagLink } from './utag-helpers';
-import Modal from '../Modal/index';
+import { LogoutSession } from "../../session";
+import { setUtagLink } from "./utag-helpers";
+import Modal from "../Modal/index";
 
 const useModal = () => {
-  const [open, setOpen] = useState(false);
-  const openModal = () => setOpen(true);
-  const closeModal = () => setOpen(false);
-  return [open, openModal, closeModal];
+    const [open, setOpen] = useState(false);
+    const openModal = () => setOpen(true);
+    const closeModal = () => setOpen(false);
+    return [open, openModal, closeModal];
 };
 
 const HeaderMenuSignOutButton = ({ name }) => {
-  const [open, openModal, closeModal] = useModal();
-  const showLogoutWarning = () => {
-    LogoutSession(window);
-  };
-  return (
-    <>
-      <button
-        className="signout-button"
-        aria-label="Sign out"
-        onClick={openModal}
-        data-track-category="TopNav"
-        data-track-action="click"
-        data-track-label={name}
-      >
-        {name}
-      </button>
-      <Modal
-        useDesignSystem
-        isOpen={open}
-        title="Sign out"
-        onRequestClose={closeModal}
-        primary={{
-          title: 'Sign me out now',
-          onClick: () => {
-            showLogoutWarning();
-            setUtagLink('button', 'click', 'Sign me out now');
-          },
-        }}
-        secondary={{
-          title: 'Keep me signed in',
-          onClick: () => {
-            closeModal();
-            setUtagLink('button', 'click', 'Keep me signed in');
-          },
-        }}
-      >
-        <p>Are you sure you want to sign out?</p>
-      </Modal>
-    </>
-  );
+    const [open, openModal, closeModal] = useModal();
+    const showLogoutWarning = () => {
+        LogoutSession(window);
+    };
+    return (
+        <>
+            <button
+                className="signout-button"
+                aria-label="Sign out"
+                onClick={openModal}
+                data-track-category="TopNav"
+                data-track-action="click"
+                data-track-label={name}
+            >
+                {name}
+            </button>
+            <Modal
+                useDesignSystem
+                isOpen={open}
+                title="Sign out"
+                onRequestClose={closeModal}
+                primary={{
+                    title: "Sign me out now",
+                    onClick: () => {
+                        showLogoutWarning();
+                        setUtagLink("button", "click", "Sign me out now");
+                    },
+                }}
+                secondary={{
+                    title: "Keep me signed in",
+                    onClick: () => {
+                        closeModal();
+                        setUtagLink("button", "click", "Keep me signed in");
+                    },
+                }}
+            >
+                <p>Are you sure you want to sign out?</p>
+            </Modal>
+        </>
+    );
 };
 
 HeaderMenuSignOutButton.propTypes = {
-  name: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
 };
 
 export default HeaderMenuSignOutButton;

package/components/Header/HeaderMobileButton.js

@@ -1,37 +1,37 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+import React from "react";
+import PropTypes from "prop-types";
+import { CloseXIcon } from "../../lib/SvgComponents.jsx";
 
 const HeaderMobileButton = ({ isMobileMenuExpanded, handleClick }) => (
-  <button
-    className="mobile-menu-btn-new"
-    type="button"
-    data-toggle="collapse"
-    data-target="#nav-mobile"
-    aria-label="Navigation menu"
-    aria-expanded={isMobileMenuExpanded ? 'true' : 'false'}
-    aria-controls="nav-mobile"
-    onClick={handleClick}
-  >
-    {!isMobileMenuExpanded && (
-      <div className="icon">
-        <span className="icon-bar" />
-        <span className="icon-bar" />
-        <span className="icon-bar" />
-      </div>
-    )}
-    {isMobileMenuExpanded && (
-      <svg className="close-icon" aria-hidden="true">
-        <CloseXIcon />
-      </svg>
-    )}
-    <div className="toggle-text">Menu</div>
-  </button>
+    <button
+        className="mobile-menu-btn-new"
+        type="button"
+        data-toggle="collapse"
+        data-target="#nav-mobile"
+        aria-label="Navigation menu"
+        aria-expanded={isMobileMenuExpanded ? "true" : "false"}
+        aria-controls="nav-mobile"
+        onClick={handleClick}
+    >
+        {!isMobileMenuExpanded && (
+            <div className="icon">
+                <span className="icon-bar" />
+                <span className="icon-bar" />
+                <span className="icon-bar" />
+            </div>
+        )}
+        {isMobileMenuExpanded && (
+            <svg className="close-icon" aria-hidden="true">
+                <CloseXIcon />
+            </svg>
+        )}
+        <div className="toggle-text">Menu</div>
+    </button>
 );
 
 HeaderMobileButton.propTypes = {
-  isMobileMenuExpanded: PropTypes.bool.isRequired,
-  handleClick: PropTypes.func.isRequired,
+    isMobileMenuExpanded: PropTypes.bool.isRequired,
+    handleClick: PropTypes.func.isRequired,
 };
 
 export default HeaderMobileButton;

package/components/Header/HeaderUI.jsx

@@ -1,167 +1,184 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
 
-import HeaderAccountMenu from './HeaderAccountMenu.jsx';
-import HeaderCancel from './HeaderCancel.jsx';
-import HeaderContainer from './HeaderContainer';
-import HeaderMenuItem from './HeaderMenuItem';
-import HeaderMobileButton from './HeaderMobileButton';
-import ImpersonatorBanner from './ImpersonatorBanner';
-import HelpIcon from './HelpIcon';
-import defaultHeaderContent from './default-content.json';
-import { HeaderStateProvider } from './hooks';
-import useGetConfig from '../hooks/useGetConfig';
+import HeaderAccountMenu from "./HeaderAccountMenu.jsx";
+import HeaderCancel from "./HeaderCancel.jsx";
+import HeaderContainer from "./HeaderContainer";
+import HeaderMenuItem from "./HeaderMenuItem";
+import HeaderMobileButton from "./HeaderMobileButton";
+import ImpersonatorBanner from "./ImpersonatorBanner";
+import HelpIcon from "./HelpIcon";
+import defaultHeaderContent from "./default-content.json";
+import { HeaderStateProvider } from "./hooks";
+import useGetConfig from "../hooks/useGetConfig";
 
 const HeaderUI = ({
-  fbpPerformanceYear,
-  feedbackPerformanceYear,
-  handleCancel,
-  includeSkipToSidebar,
-  isDevPre,
-  isLoginEnabled,
-  performanceYear,
-  showCancelButton,
-  showPhysicianCompareLink,
-  showFacilityBasedPreviewLink,
-  skipToContentId,
-  RouterLink,
-  isIESupportPage,
+    fbpPerformanceYear,
+    feedbackPerformanceYear,
+    handleCancel,
+    includeSkipToSidebar,
+    isDevPre,
+    isLoginEnabled,
+    performanceYear,
+    showCancelButton,
+    showPhysicianCompareLink,
+    showFacilityBasedPreviewLink,
+    skipToContentId,
+    RouterLink,
+    isIESupportPage,
 }) => {
-  const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
+    const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
 
-  const mapContentToRows = (config) => {
-    // Append transposed array to content
-    return config?.map((section) => {
-      // Only header items with multiple columns need to be transposed
-      // Single column menus' tab order will remain the same
-      if (section.columns?.length > 1) {
-        const { columns } = section;
-        return {
-          ...section,
-          rows: columns[0].map((_, colIndex) =>
-            columns.map((row) => row[colIndex])
-          ),
-        };
-      }
-      return { ...section, rows: section.columns };
+    const mapContentToRows = (config) => {
+        // Append transposed array to content
+        return config?.map((section) => {
+            // Only header items with multiple columns need to be transposed
+            // Single column menus' tab order will remain the same
+            if (section.columns?.length > 1) {
+                const { columns } = section;
+                return {
+                    ...section,
+                    rows: columns[0].map((_, colIndex) =>
+                        columns.map((row) => row[colIndex])
+                    ),
+                };
+            }
+            return { ...section, rows: section.columns };
+        });
+    };
+
+    const result = useGetConfig({
+        localStorageName: "qpp_top_nav_content",
+        url: "/config/header",
+        timeout: 30,
+        defaultContent: defaultHeaderContent,
     });
-  };
 
-  const result = useGetConfig({
-    localStorageName: 'qpp_top_nav_content',
-    url: '/config/header',
-    timeout: 30,
-    defaultContent: defaultHeaderContent,
-  });
+    const content = mapContentToRows(result?.content);
 
-  const content = mapContentToRows(result?.content);
+    if (showCancelButton) {
+        return (
+            <HeaderStateProvider RouterLink={RouterLink}>
+                <HeaderContainer
+                    showCancelButton
+                    skipToContentId={skipToContentId}
+                    includeSkipToSidebar={includeSkipToSidebar}
+                >
+                    <HeaderCancel handleCancel={handleCancel} />
+                </HeaderContainer>
+            </HeaderStateProvider>
+        );
+    }
 
-  if (showCancelButton) {
-    return (
-      <HeaderStateProvider RouterLink={RouterLink}>
-        <HeaderContainer
-          showCancelButton
-          skipToContentId={skipToContentId}
-          includeSkipToSidebar={includeSkipToSidebar}
-        >
-          <HeaderCancel handleCancel={handleCancel} />
-        </HeaderContainer>
-      </HeaderStateProvider>
-    );
-  }
+    if (isDevPre) {
+        return (
+            <HeaderStateProvider RouterLink={RouterLink}>
+                <HeaderContainer
+                    isIESupportPage={isIESupportPage}
+                    skipToContentId={skipToContentId}
+                    includeSkipToSidebar={includeSkipToSidebar}
+                >
+                    <nav
+                        aria-label="Primary navigation"
+                        hidden={!isMobileMenuExpanded}
+                    >
+                        <ul className="navigation-menu">
+                            <HeaderAccountMenu
+                                isDevPre
+                                isLoginEnabled={isLoginEnabled}
+                            />
+                        </ul>
+                    </nav>
+                </HeaderContainer>
+            </HeaderStateProvider>
+        );
+    }
+
+    if (!content) {
+        return null;
+    }
 
-  if (isDevPre) {
     return (
-      <HeaderStateProvider RouterLink={RouterLink}>
-        <HeaderContainer
-          isIESupportPage={isIESupportPage}
-          skipToContentId={skipToContentId}
-          includeSkipToSidebar={includeSkipToSidebar}
-        >
-          <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
-            <ul className="navigation-menu">
-              <HeaderAccountMenu isDevPre isLoginEnabled={isLoginEnabled} />
-            </ul>
-          </nav>
-        </HeaderContainer>
-      </HeaderStateProvider>
+        <HeaderStateProvider RouterLink={RouterLink}>
+            <HeaderContainer
+                isIESupportPage={isIESupportPage}
+                skipToContentId={skipToContentId}
+                includeSkipToSidebar={includeSkipToSidebar}
+            >
+                <HelpIcon />
+                <HeaderMobileButton
+                    handleClick={() =>
+                        setIsMobileMenuExpanded(!isMobileMenuExpanded)
+                    }
+                    isMobileMenuExpanded={isMobileMenuExpanded}
+                />
+                <nav
+                    aria-label="Primary navigation"
+                    hidden={!isMobileMenuExpanded}
+                >
+                    <ul className="navigation-menu navigation-new-style">
+                        {content.map((header) => (
+                            <HeaderMenuItem
+                                handleClick={() => {
+                                    setIsMobileMenuExpanded(
+                                        !isMobileMenuExpanded
+                                    );
+                                }}
+                                isMobileMenuExpanded={isMobileMenuExpanded}
+                                key={header.name}
+                                {...header}
+                            />
+                        ))}
+                        <HeaderAccountMenu
+                            handleClick={() =>
+                                setIsMobileMenuExpanded(!isMobileMenuExpanded)
+                            }
+                            fbpPerformanceYear={fbpPerformanceYear}
+                            feedbackPerformanceYear={feedbackPerformanceYear}
+                            isLoginEnabled={isLoginEnabled}
+                            performanceYear={performanceYear}
+                            showPhysicianCompareLink={showPhysicianCompareLink}
+                            showFacilityBasedPreviewLink={
+                                showFacilityBasedPreviewLink
+                            }
+                        />
+                    </ul>
+                </nav>
+            </HeaderContainer>
+            <ImpersonatorBanner />
+        </HeaderStateProvider>
     );
-  }
-
-  if (!content) {
-    return null;
-  }
-
-  return (
-    <HeaderStateProvider RouterLink={RouterLink}>
-      <HeaderContainer
-        isIESupportPage={isIESupportPage}
-        skipToContentId={skipToContentId}
-        includeSkipToSidebar={includeSkipToSidebar}
-      >
-        <HelpIcon />
-        <HeaderMobileButton
-          handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
-          isMobileMenuExpanded={isMobileMenuExpanded}
-        />
-        <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
-          <ul className="navigation-menu navigation-new-style">
-            {content.map((header) => (
-              <HeaderMenuItem
-                handleClick={() => {
-                  setIsMobileMenuExpanded(!isMobileMenuExpanded);
-                }}
-                isMobileMenuExpanded={isMobileMenuExpanded}
-                key={header.name}
-                {...header}
-              />
-            ))}
-            <HeaderAccountMenu
-              handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
-              fbpPerformanceYear={fbpPerformanceYear}
-              feedbackPerformanceYear={feedbackPerformanceYear}
-              isLoginEnabled={isLoginEnabled}
-              performanceYear={performanceYear}
-              showPhysicianCompareLink={showPhysicianCompareLink}
-              showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
-            />
-          </ul>
-        </nav>
-      </HeaderContainer>
-      <ImpersonatorBanner />
-    </HeaderStateProvider>
-  );
 };
 
 HeaderUI.propTypes = {
-  fbpPerformanceYear: PropTypes.string,
-  feedbackPerformanceYear: PropTypes.string,
-  handleCancel: PropTypes.func,
-  includeSkipToSidebar: PropTypes.bool,
-  isDevPre: PropTypes.bool,
-  isLoginEnabled: PropTypes.bool,
-  performanceYear: PropTypes.number,
-  showCancelButton: PropTypes.bool,
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
-  skipToContentId: PropTypes.string,
-  RouterLink: PropTypes.func,
-  isIESupportPage: PropTypes.bool,
+    fbpPerformanceYear: PropTypes.string,
+    feedbackPerformanceYear: PropTypes.string,
+    handleCancel: PropTypes.func,
+    includeSkipToSidebar: PropTypes.bool,
+    isDevPre: PropTypes.bool,
+    isLoginEnabled: PropTypes.bool,
+    performanceYear: PropTypes.number,
+    showCancelButton: PropTypes.bool,
+    showPhysicianCompareLink: PropTypes.bool,
+    showFacilityBasedPreviewLink: PropTypes.bool,
+    skipToContentId: PropTypes.string,
+    RouterLink: PropTypes.func,
+    isIESupportPage: PropTypes.bool,
 };
 HeaderUI.defaultProps = {
-  fbpPerformanceYear: null,
-  feedbackPerformanceYear: null,
-  handleCancel: Function.prototype,
-  includeSkipToSidebar: false,
-  isDevPre: false,
-  isLoginEnabled: true,
-  performanceYear: 2017,
-  showCancelButton: false,
-  showPhysicianCompareLink: false,
-  showFacilityBasedPreviewLink: false,
-  skipToContentId: null,
-  RouterLink: null,
-  isIESupportPage: false,
+    fbpPerformanceYear: null,
+    feedbackPerformanceYear: null,
+    handleCancel: Function.prototype,
+    includeSkipToSidebar: false,
+    isDevPre: false,
+    isLoginEnabled: true,
+    performanceYear: 2017,
+    showCancelButton: false,
+    showPhysicianCompareLink: false,
+    showFacilityBasedPreviewLink: false,
+    skipToContentId: null,
+    RouterLink: null,
+    isIESupportPage: false,
 };
 
 export default HeaderUI;

package/components/Header/HelpIcon.jsx

@@ -1,16 +1,16 @@
-import React from 'react';
+import React from "react";
 
 const HelpIcon = () => (
-  <a
-    className="header-help"
-    href="tel:1-866-288-8292"
-    data-track-category="MainContent"
-    data-track-action="CallQPPServiceCenter"
-    data-track-label="QPP Service Center Phone"
-  >
-    <svg viewBox="0 0 28 28" className="header-help-icon">
-      <path
-        d="M23.9,5.9c0-0.6-0.2-1.1-0.6-1.5c-2.5-2.5-5.7-3.8-9.2-3.8S7.2,1.9,4.8,4.4c-0.4,0.4-0.6,1-0.6,1.5
+    <a
+        className="header-help"
+        href="tel:1-866-288-8292"
+        data-track-category="MainContent"
+        data-track-action="CallQPPServiceCenter"
+        data-track-label="QPP Service Center Phone"
+    >
+        <svg viewBox="0 0 28 28" className="header-help-icon">
+            <path
+                d="M23.9,5.9c0-0.6-0.2-1.1-0.6-1.5c-2.5-2.5-5.7-3.8-9.2-3.8S7.2,1.9,4.8,4.4c-0.4,0.4-0.6,1-0.6,1.5
         c0,0.4,0.1,0.8,0.3,1.1c-1.3,1.9-2,4.1-2,6.6v2.9c0,2.1,1.1,4,2.9,5.1c0,1.2,1,2.1,2.2,2.1c1.2,0,2.2-1,2.2-2.2v-6.5
         c0-1.2-1-2.2-2.2-2.2c-1.1,0-2,0.8-2.1,1.8H3.8v-1.1c0-2.1,0.6-4,1.7-5.6C5.8,8.1,6,8.1,6.3,8.1c0.6,0,1.1-0.2,1.5-0.6
         c1.6-1.6,3.8-2.5,6.2-2.5s4.5,0.9,6.2,2.5c0.4,0.4,1,0.6,1.5,0.6c0.3,0,0.5,0,0.7-0.1c1.1,1.6,1.7,3.6,1.7,5.6v1.1h-1.5
@@ -23,10 +23,10 @@ const HelpIcon = () => (
         S19.8,22,19.8,21.6z M22.7,16.2h1.5v0.4c0,1.3-0.5,2.5-1.5,3.3V16.2z M21.2,6.5c-1.9-1.9-4.5-3-7.2-3s-5.3,1.1-7.2,3
         c-0.3,0.3-0.8,0.3-1,0C5.7,6.3,5.6,6.1,5.6,5.9s0.1-0.4,0.2-0.5C8,3.2,10.9,2,14,2s6,1.2,8.2,3.4l0,0c0.1,0.1,0.2,0.3,0.2,0.5
         s-0.1,0.4-0.2,0.5C21.9,6.7,21.5,6.7,21.2,6.5z"
-      />
-    </svg>
-    <span>Help</span>
-  </a>
+            />
+        </svg>
+        <span>Help</span>
+    </a>
 );
 
 export default HelpIcon;