qpp-style 9.11.3 → 9.13.0

package/components/Header/HeaderMenuItem.jsx

@@ -33,6 +33,7 @@ const excludedClickOutClasses = [
 
 const HeaderMenuItem = ({
   handleClick,
+  isMobileMenuExpanded,
   columns,
   menuName,
   rows,
@@ -76,12 +77,19 @@ const HeaderMenuItem = ({
       ) {
         return;
       }
+      setOpenMobileSubMenu('')
       closeMenus();
     };
     document.addEventListener('mousedown', listener);
     return () => document.removeEventListener('mousedown', listener);
   }, [menuRef]);
 
+  useEffect(() => {
+    if (!isMobileMenuExpanded || !isOpen){
+      setOpenMobileSubMenu('')
+    }
+  }, [isMobileMenuExpanded, isOpen])
+
   return (
     <li
       key={`header-item-${menuIdentifier}`}
@@ -162,7 +170,7 @@ const HeaderMenuItem = ({
                       >
                         <Accordion
                           title={c.heading}
-                          isOpen={openMobileSubMenu === c.heading}
+                          isOpen={isMobileMenuExpanded && openMobileSubMenu === c.heading}
                         >
                           <ul>
                             {c.items.map((item) => {
@@ -212,6 +220,7 @@ HeaderMenuItem.propTypes = {
   subtitle: PropTypes.string.isRequired,
   className: PropTypes.string,
   handleClick: PropTypes.func.isRequired,
+  isMobileMenuExpanded: PropTypes.bool.isRequired,
 };
 HeaderMenuItem.defaultProps = {
   menuName: '',

package/components/Header/HeaderUI.jsx

@@ -111,6 +111,7 @@ const HeaderUI = ({
                 handleClick={() => {
                   setIsMobileMenuExpanded(!isMobileMenuExpanded);
                 }}
+                isMobileMenuExpanded={isMobileMenuExpanded}
                 key={header.name}
                 {...header}
               />

package/components/Header/ImpersonatorBanner.jsx

@@ -4,11 +4,26 @@ import axios from 'axios';
 import CloseIcon from '@material-ui/icons/Close';
 
 import { TextButton } from '../Button';
-import { deleteImpersonatedUser, revertQppHasAuthsCookie } from '../../session/logout';
+import {
+  deleteImpersonatedUser,
+  revertQppHasAuthsCookie,
+} from '../../session/logout';
+
+const getViewType = (viewType) => ({
+  username: 'HARP ID',
+  npi: 'NPI',
+  tin: 'TIN',
+  apm_id: 'APM Entity',
+  cms_id: 'Registry',
+  vg_id: 'Virtual Group',
+}[viewType]);
 
 const ImpersonatorBanner = () => {
-  const { qpp_auth_token: token = null, qpp_impersonated_user: user = null } =
-    cookie.parse(document.cookie);
+  const {
+    qpp_auth_token: token = null,
+    qpp_impersonated_user: user = null,
+    qpp_impersonated_type: viewType = null,
+  } = cookie.parse(document.cookie);
 
   const className = [
     'qpp-u-display--flex',
@@ -21,14 +36,17 @@ const ImpersonatorBanner = () => {
   ].join(' ');
 
   const onClick = () => {
-    const fn = () => {      
-      deleteImpersonatedUser({ qpp_impersonated_user: user });
+    const fn = () => {
+      deleteImpersonatedUser({
+        qpp_impersonated_user: user,
+        qpp_impersonated_type: viewType,
+      });
       // Set qpp_has_authorizations cookie back to impersonator's value
       revertQppHasAuthsCookie();
       window.location.reload();
     };
     return axios
-      .delete('/api/auth/users/impersonate', {
+      .delete('/api/auth/helpdesk/view', {
         headers: {
           Accept: 'application/vnd.qpp.cms.gov.v1+json',
           Authorization: `Bearer ${token}`,
@@ -42,11 +60,10 @@ const ImpersonatorBanner = () => {
     user && (
       <div className={className}>
         <div>
-          VIEW ONLY | You are currently impersonating HARP user:{' '}
-          <strong>{user}</strong>
+          VIEW ONLY | You are currently viewing {getViewType(viewType)}: <strong>{user}</strong>
         </div>
         <TextButton onClick={onClick} className="qpp-u-color--gray-80">
-          Exit Impersonation Mode
+          Exit View Mode
           <CloseIcon />
         </TextButton>
       </div>

package/components/Link/Link.stories.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import DSLink from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+
+export default {
+  title: 'Link',
+  component: DSLink,
+  decorators: [withKnobs],
+};
+
+export const LinkLabel = () => <DSLink href="#">Link Label</DSLink>;
+
+export const LinkColorVariants = () => (
+  <>
+    <div className=" qpp-dark-background qpp-u-padding--16">
+      <DSLink href="#" variant="white">
+        Link Label
+      </DSLink>
+    </div>
+    <p>
+      <DSLink href="#" variant="gray">
+        Link Label
+      </DSLink>
+    </p>
+  </>
+);
+
+export const inlineLinks = () => (
+  <div className="qpp-u-padding--16">
+    <p className="qpp-u-width--60">
+      Aenean lacinia <DSLink href="#">inline link</DSLink> nulla sed{' '}
+      <DSLink href="#">inline link</DSLink>. Integer posuere erat a ante
+      venenatis dapibus posuere velit aliquet. Integer posuere erat a ante
+      venenatis <DSLink href="#">inline link</DSLink> dapibus posuere velit
+      aliquet.
+    </p>
+  </div>
+);
+
+export const inlineLinksDarkBackground = () => (
+  <div className="qpp-dark-background qpp-u-padding--16">
+    Aenean lacinia{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>{' '}
+    nulla sed{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>
+    . Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
+    Integer posuere erat a ante venenatis{' '}
+    <DSLink href="#" variant="white">
+      inline link
+    </DSLink>{' '}
+    dapibus posuere velit aliquet.
+  </div>
+);
+
+export const linkWithIcon = () => {
+  const icon = <OpenInNewIcon classes={{ root: 'qpp-icon-mat' }} />;
+  return (
+    <div className="qpp-u-padding--16">
+      <DSLink href="#">
+        Standalone Link With Icon
+        {icon}
+      </DSLink>{' '}
+      <p className=" qpp-u-width--60">
+        Aenean lacinia{' '}
+        <DSLink href="#">
+          inline link
+          {icon}
+        </DSLink>{' '}
+        nulla sed <DSLink href="#">inline link {icon}</DSLink>. Integer posuere
+        erat a ante venenatis dapibus posuere velit aliquet. Integer posuere
+        erat a ante venenatis <DSLink href="#">inline link {icon}</DSLink>{' '}
+        dapibus posuere velit aliquet.
+      </p>
+    </div>
+  );
+};

package/components/Link/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const VARIANTS = ['white', 'gray'];
+
+const DSLink = ({
+  className,
+  href,
+  download,
+  ariaLabel,
+  onClick,
+  children,
+  variant,
+  ...rest
+}) => {
+  let linkClass = 'qpp-c-link';
+  if (VARIANTS.includes(variant)) {
+    variant === 'gray'
+      ? (linkClass = linkClass.concat(' ', 'qpp-u-color--gray-60'))
+      : (linkClass = linkClass.concat(' ', `qpp-u-color--${variant}`));
+  }
+
+  if (className) {
+    linkClass = linkClass.concat(' ', className);
+  }
+
+  return (
+    <a
+      aria-label={ariaLabel}
+      className={linkClass || ''}
+      href={href}
+      download={download}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+
+DSLink.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  download: PropTypes.bool,
+  variant: PropTypes.oneOf(VARIANTS),
+};
+
+DSLink.defaultProps = {
+  children: null,
+  className: '',
+  href: '',
+  ariaLabel: null,
+  onClick: () => null,
+  download: false,
+  variant: null,
+};
+
+export default DSLink;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -48,9 +48,10 @@ const getIcon = (url) =>
     '/user/targeted-review/#/landing': TargetIcon,
     '/user/test-data': MyTestDataIcon,
     '/user/self-nomination/#/landing': IndividualReporting,
+    '/user/reviewers': DashboardIcon,
     '/reviewer/exception': HardshipIcon,
     '/reviewer/targeted-review': TargetIcon,
-    '/reviewer/self-nomination': IndividualReporting,
+    '/self-nomination': IndividualReporting,
   }[url] || null);
 
 const LevelOneContent = ({
@@ -115,7 +116,7 @@ const LevelOneContent = ({
     '/reviewer/targeted-review': (internalReviewerNames || []).includes(
       'QPP Targeted Review & Exceptions'
     ),
-    '/reviewer/self-nomination': (internalReviewerNames || []).includes(
+    '/self-nomination': (internalReviewerNames || []).includes(
       'QPP Self-Nomination'
     ),
 

package/components/SideNav/UI/default-content.json

@@ -43,8 +43,8 @@
       "label": "Manage Access",
       "listOfLinks": [
         {
-          "url": "/user/impersonate",
-          "label": "QPP User Impersonation"
+          "url": "/user/helpdesk-viewing-tool",
+          "label": "Viewing Tool"
         },
         {
           "url": "/user/self-nomination/#/landing",
@@ -78,7 +78,7 @@
   ],
   "internalReviewers": [
     {
-      "url": "/user/submissions",
+      "url": "/user/reviewers",
       "label": "Dashboard Home"
     },
     {
@@ -91,7 +91,7 @@
       "label": "Targeted Review"
     },
     {
-      "url": "/reviewer/self-nomination",
+      "url": "/self-nomination",
       "label": "Self Nomination"
     }
   ],

package/components/index.js

@@ -17,6 +17,7 @@ import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
 import Dropdown from './Dropdown';
+import DSLink from './Link';
 import {
   MyApplicationsIcon,
   UserSignInIcon,
@@ -121,4 +122,5 @@ export {
   TextInput,
   Dropdown,
   Tooltip,
+  DSLink,
 };