qpp-style 0.0.8 → 0.0.10

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -1,79 +1,157 @@
-import React, { Component } from 'react';
-import { handleNavigation } from '../helpers';
-import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-export default class NavLinkDrawer extends Component {
-  constructor(props) {
-    super(props);
-    this._toggleDrawer = this.toggleDrawer.bind(this);
-    this._isLinkActive = this.isLinkActive.bind(this);
-    this._isCurrentPage = this.isCurrentPage.bind(this);
-    this._renderDrawerLinksRecursively = this.renderDrawerLinksRecursively.bind(
-      this
-    );
-    this.state = {
-      isOpen: !!props.openByDefault,
-    };
-  }
-
-  UNSAFE_componentWillMount() {
-    const { isAlwaysOpen, disabled } = this.props;
-    if (disabled) {
-      this.setState((state) => ({ isOpen: false }));
-    }
-
-    if (isAlwaysOpen) {
-      this.setState((state) => ({ isOpen: isAlwaysOpen }));
-    }
-  }
+import { handleNavigation } from '../helpers';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
 
-  toggleDrawer() {
-    const { isAlwaysOpen, disabled, isExpanded, sidebarExpand } = this.props;
+const NavLinkDrawer = ({
+  className,
+  disabled,
+  isAlwaysOpen,
+  isExpanded,
+  items,
+  label,
+  leftIcon,
+  linkActiveFunc,
+  linkCallback,
+  listOfLinks,
+  openByDefault,
+  rightIcon,
+  sidebarExpand,
+  staticDrawer,
+  url,
+  isHighlighted,
+  darkerBackground,
+  leftBorderHighlightDisabled,
+  hideLabelSection,
+  largerDrawerBottomPadding,
+}) => {
+  const [isOpen, setIsOpen] = useState(openByDefault);
+  const MANAGE_ACCESS = '/user/manage-access';
 
+  const toggleDrawer = () => {
     if (!isExpanded && typeof sidebarExpand === 'function') {
       sidebarExpand();
-      this.setState((state) => ({ isOpen: true }));
+      setIsOpen(true);
       return;
     }
 
     if (!isAlwaysOpen && !disabled) {
-      this.setState((state) => ({ isOpen: !state.isOpen }));
+      setIsOpen(!isOpen);
     }
-  }
 
-  isLinkActive(link, func) {
+    reRouteHandler();
+  };
+
+  const reRouteHandler = () => {
+    if (url === MANAGE_ACCESS) {
+      return (window.location.href = MANAGE_ACCESS);
+    }
+  };
+
+  const isLinkActive = (link, func) => {
     if (typeof func === 'function') {
       return func(link);
     }
-
     return window.location.href.indexOf(link.url) > 0;
-  }
-
-  isCurrentPage(link, linkActiveFunc) {
-    const items = link.items || link.listOfLinks;
+  };
 
-    if (link.url && this._isLinkActive(link, linkActiveFunc)) {
+  const isCurrentPage = (link, linkActiveFunc) => {
+    const targetItems = link.items || link.listOfLinks;
+    if (link.url && isLinkActive(link, linkActiveFunc)) {
       return true;
     }
-
     return (
-      items && items.some((item) => this._isCurrentPage(item, linkActiveFunc))
+      targetItems &&
+      targetItems.some((item) => isCurrentPage(item, linkActiveFunc))
     );
-  }
+  };
+
+  const buildLeftIconClasses = () => {
+    let leftIcon = `left-icon`;
+
+    if (isAlwaysOpen) {
+      leftIcon += ` always-open`;
+    }
+
+    if (isHighlighted) {
+      leftIcon += ' fill-white';
+    }
+
+    return leftIcon;
+  };
+
+  // Classes for the link drawer button
+  const currentPage = isCurrentPage(
+    { items, listOfLinks, url },
+    linkActiveFunc
+  );
+  const expandedClass = currentPage ? 'expanded' : '';
+
+  const renderLeftIcon = (leftIcon) => {
+    if (leftIcon) {
+      return (
+        <svg
+          className={`${buildLeftIconClasses()}`}
+          aria-hidden="true"
+          focusable="false"
+        >
+          {leftIcon}
+        </svg>
+      );
+    }
+  };
+
+  const hasDarkerBackground = (darkerBackground) => {
+    return darkerBackground ? 'background-highlight' : '';
+  };
+
+  const hasDarkerTitle = (darkerBackground) => {
+    return darkerBackground ? 'expanded currentPage' : '';
+  };
+
+  const isLeftBorderHighlightDisabled = (leftBorderHighlightDisabled) => {
+    return leftBorderHighlightDisabled ? 'left-border-disabled' : '';
+  };
+
+  const isLabelSectionHidden = (hideLabelSection) => {
+    return hideLabelSection ? 'hidden-label-section' : '';
+  };
+
+  const isHiddenWhileCollapsed = (isLeftBorderDisabled, isExpanded) => {
+    return isLeftBorderDisabled && !isExpanded ? 'hidden-nav-link-item' : '';
+  };
+
+  const highlightTitle = (isHighlighted) => {
+    return isHighlighted && isExpanded ? 'highlight' : '';
+  };
+
+  const hasLargerDrawBottomPadding = (largerDrawerBottomPadding) => {
+    return largerDrawerBottomPadding ? 'larger-drawer-bottom-padding' : '';
+  };
+
+  const adjustItemSpacing = (largerDrawerBottomPadding) => {
+    return largerDrawerBottomPadding ? 'larger-item-spacing' : '';
+  };
+
+  useEffect(() => {
+    if (disabled) {
+      setIsOpen(false);
+    }
+    if (isAlwaysOpen) {
+      setIsOpen(isAlwaysOpen);
+    }
+  }, []);
 
   // Render the links recursively.  This will theoretically allow for an infinite number of nested link items.
   // className will either be empty, parent-link - top most node, or child-link.
-  renderDrawerLinksRecursively(navLinks, className = '') {
-    const { linkActiveFunc, linkCallback } = this.props;
-    const { isOpen } = this.state;
-
+  const renderDrawerLinksRecursively = (navLinks, className = '') => {
     return (
       navLinks &&
-      navLinks.map((link) => {
+      navLinks.map((link, index) => {
         if (link.type === 'divider') {
           return (
-            <AnimationGroup display={true}>
+            <AnimationGroup display={true} key={index}>
               <hr />
             </AnimationGroup>
           );
@@ -83,7 +161,7 @@ export default class NavLinkDrawer extends Component {
           <li
             key={link.label}
             className={
-              this._isLinkActive(link, linkActiveFunc)
+              isLinkActive(link, linkActiveFunc)
                 ? `active-link ${className}`
                 : className
             }
@@ -91,7 +169,7 @@ export default class NavLinkDrawer extends Component {
             {link.url ? (
               <a
                 href={link.url}
-                onClick={(e) => handleNavigation(e, linkCallback)}
+                onClick={(e) => handleNavigation(e, linkCallback, link.label)}
                 tabIndex={isOpen ? '0' : '-1'}
                 data-track-category="SidebarNav"
                 data-track-action={`GoTo${
@@ -107,89 +185,70 @@ export default class NavLinkDrawer extends Component {
             )}
             {link.items && link.items.length > 0 && (
               <ul aria-hidden={!isOpen}>
-                {this._renderDrawerLinksRecursively(link.items, 'child-link')}
+                {renderDrawerLinksRecursively(link.items, 'child-link')}
               </ul>
             )}
           </li>
         );
       })
     );
-  }
-
-  render() {
-    const {
-      isExpanded,
-      disabled,
-      isAlwaysOpen,
-      className,
-      rightIcon,
-      leftIcon,
-      label,
-      linkActiveFunc,
-      listOfLinks,
-    } = this.props;
-    const { isOpen } = this.state;
-
-    // Classes for the link drawer button
-    const currentPage = this._isCurrentPage(this.props, linkActiveFunc);
-    const expandedClass = currentPage ? 'expanded' : '';
+  };
 
-    return (
-      <div
-        className={
-          this.props.staticDrawer ? 'static-drawer link-drawer' : 'link-drawer'
-        }
+  return (
+    <div className={staticDrawer ? 'static-drawer link-drawer' : 'link-drawer'}>
+      <button
+        onClick={toggleDrawer}
+        {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
+        tabIndex="0"
+        aria-label={label}
+        {...((url !== MANAGE_ACCESS && isAlwaysOpen) || disabled
+          ? { disabled: isAlwaysOpen || disabled }
+          : {})}
+        className={`${className} ${expandedClass} ${highlightTitle(
+          isHighlighted
+        )} ${hasDarkerTitle(darkerBackground)}
+         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(
+          leftBorderHighlightDisabled
+        )}
+         ${isLabelSectionHidden(hideLabelSection)}
+         ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
       >
-        <button
-          onClick={this._toggleDrawer}
-          {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
-          tabIndex="0"
-          aria-label={label}
-          {...(isAlwaysOpen || disabled
-            ? { disabled: isAlwaysOpen || disabled }
-            : {})}
-          className={`${className} ${expandedClass} ${
-            currentPage ? 'currentPage' : ''
-          }`}
-        >
-          <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
-            <svg
-              className={`left-icon${isAlwaysOpen ? ' always-open' : ''}`}
-              aria-hidden="true"
-              focusable="false"
-            >
-              {leftIcon}
-            </svg>
-            <AnimationGroup display={isExpanded}>
-              <span>{label}</span>
-            </AnimationGroup>
-          </div>
-          {isExpanded && !isAlwaysOpen && (
-            <svg
-              className={`${isOpen ? 'right-icon rotated' : 'right-icon'}`}
-              focusable="false"
-              aria-hidden="true"
-            >
-              {rightIcon}
-            </svg>
-          )}
-        </button>
-        <AnimationGroup display={isExpanded}>
-          <div
-            className={`${currentPage ? 'currentPage' : ''} ${
-              isOpen && !disabled ? 'drawer open' : 'drawer'
-            }`}
+        <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
+          {renderLeftIcon(leftIcon)}
+          <AnimationGroup display={isExpanded}>
+            <span className="sidebar-inline-link-label">{label}</span>
+          </AnimationGroup>
+        </div>
+        {isExpanded && !isAlwaysOpen && (
+          <svg
+            className={`${isOpen ? 'right-icon rotated' : 'right-icon'}`}
+            focusable="false"
+            aria-hidden="true"
           >
-            <ul aria-hidden={!isOpen}>
-              {listOfLinks &&
-                this._renderDrawerLinksRecursively(listOfLinks, 'parent-link')}
-            </ul>
-          </div>
-        </AnimationGroup>
-      </div>
-    );
-  }
-}
+            {rightIcon}
+          </svg>
+        )}
+      </button>
+      <AnimationGroup display={isExpanded}>
+        <div
+          className={`${currentPage ? 'currentPage' : ''} ${
+            isOpen && !disabled ? 'drawer open' : 'drawer'
+          } ${hasDarkerBackground(
+            darkerBackground
+          )} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
+        >
+          <ul aria-hidden={!isOpen}>
+            {listOfLinks &&
+              renderDrawerLinksRecursively(
+                listOfLinks,
+                `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`
+              )}
+          </ul>
+        </div>
+      </AnimationGroup>
+    </div>
+  );
+};
 
 NavLinkDrawer.propTypes = {
   isExpanded: PropTypes.bool,
@@ -205,4 +264,13 @@ NavLinkDrawer.propTypes = {
   disabled: PropTypes.bool,
   sidebarExpand: PropTypes.func,
   staticDrawer: PropTypes.bool,
+  items: PropTypes.object,
+  url: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  darkerBackground: PropTypes.bool,
+  leftBorderHighlightDisabled: PropTypes.bool,
+  hideLabelSection: PropTypes.bool,
+  largerDrawerBottomPadding: PropTypes.bool,
 };
+
+export default NavLinkDrawer;

package/components/SideNav/Links/NavLinkInline.jsx

@@ -8,6 +8,7 @@ const NavLinkInline = ({
   urlExpressionToMatch,
   className,
   icon,
+  rightIcon,
   label,
   isActive,
   showLabel,
@@ -59,7 +60,7 @@ const NavLinkInline = ({
     <React.Fragment>
       <a
         href={disabled ? undefined : url}
-        onClick={(e) => handleNavigation(e, linkCallback)}
+        onClick={(e) => handleNavigation(e, linkCallback, label)}
         className={`${className} ${currentPage || isActive ? 'active' : ''} ${
           disabled ? 'disabled' : ''
         }`}
@@ -78,7 +79,10 @@ const NavLinkInline = ({
           {icon}
         </svg>
         <AnimationGroup display={showLabel}>
-          <span tabIndex="-1">{label}</span>
+          <span tabIndex="-1" className="sidebar-inline-link-label">
+            {label}
+            {rightIcon}
+          </span>
         </AnimationGroup>
       </a>
       {showTooltip && (
@@ -95,6 +99,7 @@ NavLinkInline.propTypes = {
   url: PropTypes.string,
   className: PropTypes.string,
   icon: PropTypes.element,
+  rightIcon: PropTypes.element,
   label: PropTypes.string,
   isActive: PropTypes.bool,
   showLabel: PropTypes.bool,

package/components/SideNav/Links/NavLinkToggle.jsx

@@ -26,7 +26,7 @@ const NavLinkToggle = ({ isAltStyle, collapseRef, isExpanded, onClick }) => {
 
 NavLinkToggle.propTypes = {
   isAltStyle: PropTypes.bool,
-  collapseRef: PropTypes.func,
+  collapseRef: PropTypes.object,
   isExpanded: PropTypes.bool,
   onClick: PropTypes.func,
 };

package/components/SideNav/SideNav.md

@@ -4,30 +4,31 @@
 
 When a user succesfully logs into QPP the user will receive the following
 cookies.
-| Cookie | Description |
-|-------------------------------------|-----------------------------------------|
-| qpp_auth_token | auth token |
-| qpp_has_authorizations | user has authorizations |
-| qpp_has_non_registry_authorizations | user has non registry authorizations |
-| user_has_apm_payments | user has at least one APM Payment |
-| qpp_is_dev_pre | user is in Dev Pre environment |
-| qpp_ehr_authorized | user is authorized for at least one EHR |
+
+| Cookie                              | Description                             |
+| ----------------------------------- | --------------------------------------- |
+| qpp_auth_token                      | auth token                              |
+| qpp_has_authorizations              | user has authorizations                 |
+| qpp_has_non_registry_authorizations | user has non registry authorizations    |
+| user_has_apm_payments               | user has at least one APM Payment       |
+| qpp_is_dev_pre                      | user is in Dev Pre environment          |
+| qpp_ehr_authorized                  | user is authorized for at least one EHR |
 
 ## Links for authenticated users
 
-| Link                         | Cookie                                   | Property                          |
-| ---------------------------- | ---------------------------------------- | --------------------------------- |
-| Account Home                 | Always visible                           |                                   |
-| Eligibility & Reporting      | qpp_has_authorizations=true              |                                   |
-| Facility Based Preview       | qpp_has_authorizations=true              | showFacilityBasedPreviewLink=true |
-| Performance Feedback         | qpp_has_authorizations=true              | performanceYear                   |
-| APM Incentive Payments       | user_has_apm_payments=true               | showApmIncentivePaymentLink=true  |
-| Doctors & Clinicians Preview | qpp_has_non_registry_authorizations=true | showPhysicianCompareLink=true     |
-| Exceptions Applications      | Always visible                           |                                   |
-| Targeted Review              |                                          | showTargetedReviewLink            |
-| Reports                      |                                          | showReportsPortal                 |
-| Manage Access                | Always visible                           |                                   |
-| Help and Support             | Always visible                           |                                   |
+| Link                         | Cookie                                   |
+| ---------------------------- | ---------------------------------------- |
+| Account Home                 | Always visible                           |
+| Eligibility & Reporting      | qpp_has_authorizations=true              |
+| Facility Based Preview       | qpp_has_authorizations=true              |
+| Performance Feedback         | qpp_has_authorizations=true              |
+| APM Incentive Payments       | user_has_apm_payments=true               |
+| Doctors & Clinicians Preview | qpp_has_non_registry_authorizations=true |
+| Exceptions Applications      | Always visible                           |
+| Targeted Review              |                                          |
+| Reports                      |                                          |
+| Manage Access                | Always visible                           |
+| Help and Support             | Always visible                           |
 
 ## Manage Access - Registry/QCDR Self-Nomination
 
@@ -41,9 +42,9 @@ Review Claims-based Submission link has been deleted
 
 When the application is in Dev Pre mode the sidenav links are as follows.
 
-| Link            | Cookie                  | Property               |
-| --------------- | ----------------------- | ---------------------- |
-| My Applications | qpp_ehr_authorized=true |                        |
-| My Test Data    | qpp_ehr_authorized=true | showDevPreDfpLink=true |
-| Manage Access   | qpp_is_dev_pre=true     |                        |
-| Developer Tools | qpp_is_dev_pre=true     |                        |
+| Link            | Cookie                  |
+| --------------- | ----------------------- |
+| My Applications | qpp_ehr_authorized=true |
+| My Test Data    | qpp_ehr_authorized=true |
+| Manage Access   | qpp_is_dev_pre=true     |
+| Developer Tools | qpp_is_dev_pre=true     |