qpp-style 2.1.13 → 2.2.0-sm.0

package/components/SideNav/Links/NavLinkInline.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import { handleNavigation } from "../helpers";
+import AnimationGroup from "../AnimationGroup/AnimationGroup";
+import PropTypes from "prop-types";
+
+const NavLinkInline = ({
+  url,
+  urlExpressionToMatch,
+  className,
+  icon,
+  rightIcon,
+  label,
+  isActive,
+  showLabel,
+  linkCallback,
+  disabled,
+  target,
+}) => {
+  const localUrl = urlExpressionToMatch || url;
+  const urlRegExp = new RegExp(`${localUrl}/?$`);
+  const path = window.location.href && window.location.href.split("?")[0];
+  const currentPage = path && path.match(urlRegExp);
+  const svgRef = React.useRef();
+  const [showTooltip, setShowTooltip] = useState(false);
+  const tooltipRef = React.useRef();
+
+  React.useEffect(() => {
+    if (!showLabel && svgRef.current) {
+      const existingMouseenter = svgRef.current.onmouseover;
+      const existingMouseout = svgRef.current.onmouseout;
+
+      svgRef.current.onmouseover = () => {
+        if (tooltipRef.current) {
+          const svgOffset = svgRef.current.getBoundingClientRect();
+          tooltipRef.current.style.top = `${svgOffset.top - 5}px`;
+          tooltipRef.current.style.display = "block";
+        }
+        if (typeof existingMouseenter === "function") {
+          existingMouseenter();
+        }
+      };
+
+      svgRef.current.onmouseout = () => {
+        if (tooltipRef.current) {
+          tooltipRef.current.style.display = "none";
+        }
+        if (typeof existingMouseout === "function") {
+          existingMouseout();
+        }
+      };
+      setShowTooltip(true);
+    }
+    if (showLabel) {
+      setShowTooltip(false);
+    }
+  }, [svgRef.current, showLabel]);
+
+  return (
+    <React.Fragment>
+      <a
+        href={disabled ? undefined : url}
+        onClick={(e) => handleNavigation(e, linkCallback, label)}
+        className={`${className} ${currentPage || isActive ? "active" : ""} ${
+          disabled ? "disabled" : ""
+        }`}
+        data-track-category="SidebarNav"
+        data-track-action={`GoTo${label ? label.split(" ").join("") : ""}`}
+        data-track-label={label}
+        aria-label={label}
+        target={`${target ? target : "_self"}`}
+      >
+        <svg
+          className={`left-icon ${disabled ? "disabled" : ""}`}
+          aria-hidden="true"
+          focusable="false"
+          ref={svgRef}
+        >
+          {icon}
+        </svg>
+        <AnimationGroup display={showLabel}>
+          <span tabIndex="-1" className="sidebar-inline-link-label">
+            {label}
+            {rightIcon}
+          </span>
+        </AnimationGroup>
+      </a>
+      {showTooltip && (
+        <div ref={tooltipRef} className="sidebar-tooltip">
+          <span className="sidebar-tooltip-text">{label}</span>
+        </div>
+      )}
+    </React.Fragment>
+  );
+};
+
+NavLinkInline.propTypes = {
+  urlExpressionToMatch: PropTypes.string,
+  url: PropTypes.string,
+  className: PropTypes.string,
+  icon: PropTypes.element,
+  rightIcon: PropTypes.element,
+  label: PropTypes.string,
+  isActive: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  linkCallback: PropTypes.func,
+  disabled: PropTypes.bool,
+  target: PropTypes.string,
+};
+
+export default NavLinkInline;

package/components/SideNav/Links/NavLinkToggle.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { NavCollapse, NavExpand } from "../../../lib/SvgComponents";
+
+const NavLinkToggle = ({ isAltStyle, collapseRef, isExpanded, onClick }) => {
+  const expandedStyle = isExpanded ? "link-collapse" : "link-expand";
+  const altStyle = isAltStyle ? "alt-style" : "";
+
+  return (
+    <button
+      type="button"
+      aria-label={`Click to ${
+        isExpanded ? "collapse" : "expand"
+      } the sidebar menu`}
+      ref={collapseRef}
+      className={`${expandedStyle} ${altStyle}`}
+      onClick={onClick}
+    >
+      <svg className="left-icon" aria-hidden="true" focusable="false">
+        {isExpanded ? <NavCollapse /> : <NavExpand />}
+      </svg>
+      <span>{isExpanded ? "Collapse" : "Expand"}</span>
+    </button>
+  );
+};
+
+NavLinkToggle.propTypes = {
+  isAltStyle: PropTypes.bool,
+  collapseRef: PropTypes.object,
+  isExpanded: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default NavLinkToggle;

package/components/SideNav/Links/index.js

@@ -0,0 +1,13 @@
+import NavLinkContainer from "./NavLinkContainer";
+import NavLinkDrawer from "./NavLinkDrawer";
+import NavLinkInline from "./NavLinkInline";
+import NavLinkToggle from "./NavLinkToggle";
+import NavItemInline from "./NavItemInline";
+
+export {
+  NavLinkContainer,
+  NavLinkDrawer,
+  NavLinkInline,
+  NavLinkToggle,
+  NavItemInline,
+};

package/components/SideNav/SideNav.md

@@ -0,0 +1,50 @@
+# SideNav Component
+
+## Cookies
+
+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 |
+
+## Links for authenticated users
+
+| 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
+
+When showSelfNomination property is true the Registry/QCDR Self-Nomination link is available.
+
+## Review Claims-based Submission Link
+
+Review Claims-based Submission link has been deleted
+
+## Dev Pre Environment
+
+When the application is in Dev Pre mode the sidenav links are as follows.
+
+| 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     |

package/components/SideNav/UI/SideNavUI.jsx

@@ -0,0 +1,323 @@
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+
+import { setSideNavExpanded, isSideNavExpanded } from "../helpers";
+import { LevelOneContent } from "../Content";
+import {
+  NavLinkContainer,
+  NavLinkInline,
+  NavLinkDrawer,
+  NavLinkToggle,
+} from "../Links";
+import AnimationGroup from "../AnimationGroup/AnimationGroup";
+import { PracticeDetails, IndividualDetails } from "../Details";
+import SanitizedContent from "../../SanitizedContent";
+import * as SvgComponents from "../../../lib/SvgComponents.jsx";
+import CmsSwitchLink from "../Links/CmsSwitchLink";
+import defaultMarkup from "./default-markup";
+
+// TODO: For an SSR version of the SideNavUI we would need to have
+// the whole SideNav markup render on the server. Less reliance on
+// window and document.
+// We can have an API created where we send it certain parameters
+// like items. All of the markup is then returned. The SideNav can
+// just render the markup provided by the Frontend Server.
+// The only code left behind would be triggers to respond to
+// toggling the sidenav's expand state
+// Things to consider when implmenting an SSR version:
+// 1. any buttons will need event listeners to trigger actions.
+// 2. we need a feature flag to roll this out since it will be
+//    a breaking change.
+// 3. we may want to consider creating a web component since they
+//    are server friendly. https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/
+// 4. If you do use web components be sure to come up with a
+//    strategy to register the web component before React loads
+//    the markup on the page. Then the web component renders
+//    immediately.
+const SideNavUI = ({
+  config,
+  isAltStyle,
+  isExpanded,
+  items,
+  onCollapsed,
+  onExpanded,
+}) => {
+  const isExpandedPropSet = isExpanded !== undefined;
+  const [isExpandedState, setIsExpandedState] = useState(() => {
+    if (isExpandedPropSet) {
+      return isExpanded;
+    }
+    return isSideNavExpanded(window.document);
+  });
+  const [sideNavContent, setSideNavContent] = useState("<nav></nav>");
+
+  const collapseRef = useRef(null);
+
+  const expand = () => {
+    setSideNavExpanded(window.document, "true");
+    setIsExpandedState(true);
+    if (onExpanded) {
+      onExpanded();
+    }
+  };
+
+  const collapse = () => {
+    setSideNavExpanded(window.document, "false");
+    setIsExpandedState(false);
+    if (onCollapsed) {
+      onCollapsed();
+    }
+  };
+
+  const toggleExpanded = () => {
+    isExpandedState ? collapse() : expand();
+  };
+
+  useEffect(() => {
+    // some applications use the isExpanded prop instead of reading the cookie
+    // this will ensure the application ignores the cookie
+    if (isExpandedPropSet) {
+      setIsExpandedState(isExpanded);
+    } else {
+      isSideNavExpanded(window.document);
+    }
+  }, [isExpanded, isExpandedPropSet]);
+
+  useEffect(() => {
+    isSideNavExpanded(window.document);
+    let cancelRequest = false;
+    const { origin } = window.location;
+    const isRunningLocally = origin.includes("localhost");
+    let sideNavMenuItems;
+
+    async function getSideNavConfig() {
+      try {
+        const { data } = await axios.get(`${origin}/config/side-navigation`);
+        sideNavMenuItems = data.markup;
+      } catch (error) {
+        if (isRunningLocally) {
+          sideNavMenuItems = defaultMarkup;
+        } else {
+          sideNavMenuItems = "<nav></nav>";
+        }
+      }
+      if (!cancelRequest) {
+        setSideNavContent(sideNavMenuItems);
+      }
+    }
+    getSideNavConfig();
+    return () => {
+      cancelRequest = true;
+    };
+  }, []);
+
+  const getDynamicContent = (contentItems, className, recursionId) => {
+    const { openDrawersByDefault, linkActiveFunc, linkCallback } = config;
+    let linkClass = isExpandedState ? "link-inline" : "link-collapsed";
+    const containerRecursionId = recursionId || 0;
+
+    const getDynamicIcon = (icon) => {
+      const Component = SvgComponents[icon];
+      return Component ? <Component /> : null;
+    };
+
+    const hasDarkerBackground = (darkerBackground) => {
+      return darkerBackground ? "hr-smaller-vertical-spacing" : "";
+    };
+
+    const itemsMarkup = (contentItems || []).map((item, index) => {
+      const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;
+
+      return (
+        {
+          divider: (
+            <AnimationGroup
+              display={isExpandedState}
+              key={key}
+              darkerBackground={item.darkerBackground}
+            >
+              <hr className={`${hasDarkerBackground(item.darkerBackground)}`} />
+            </AnimationGroup>
+          ),
+          container: getDynamicContent(
+            item.items,
+            item.className,
+            containerRecursionId + 1
+          ),
+          linkBack: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <NavLinkInline
+                className="link-back"
+                icon={getDynamicIcon("ChevronLeft")}
+                url={item.url}
+                label={item.label}
+                linkCallback={linkCallback}
+                showLabel={true}
+              />
+            </AnimationGroup>
+          ),
+          linkHome: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <NavLinkInline
+                className="account-home-link"
+                icon={getDynamicIcon(item?.icon)}
+                url={item.url}
+                label={item.label}
+                linkCallback={linkCallback}
+                showLabel={true}
+              />
+            </AnimationGroup>
+          ),
+          practiceDetails: (
+            <AnimationGroup
+              display={isExpandedState}
+              className={"details"}
+              key={key}
+            >
+              <PracticeDetails
+                practiceName={item.practiceName}
+                {...(!item.practiceTin
+                  ? {}
+                  : { practiceTin: item.practiceTin })}
+                {...(!item.apmEntityId
+                  ? {}
+                  : { apmEntityId: item.apmEntityId })}
+                {...(!item.vgId ? {} : { vgId: item.vgId })}
+                {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
+                {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
+                {...(!item.subgroupId ? {} : { subgroupId: item.subgroupId })}
+              />
+            </AnimationGroup>
+          ),
+          individualDetails: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <IndividualDetails
+                individualName={item.individualName}
+                individualNpi={item.individualNpi}
+              />
+            </AnimationGroup>
+          ),
+          linkDrawer: (
+            <NavLinkDrawer
+              key={key}
+              isExpanded={isExpandedState}
+              isAlwaysOpen={item.isAlwaysOpen}
+              openByDefault={openDrawersByDefault}
+              rightIcon="chevron-down"
+              leftIcon={getDynamicIcon(item?.icon)}
+              className={linkClass}
+              label={item.label}
+              linkActiveFunc={linkActiveFunc}
+              linkCallback={linkCallback}
+              listOfLinks={item.items}
+              url={item.url}
+              sidebarExpand={expand}
+              isHighlighted={item.isHighlighted}
+              darkerBackground={item.darkerBackground}
+              leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
+              hideLabelSection={item.hideLabelSection}
+              largerDrawerBottomPadding={item.largerDrawerBottomPadding}
+            />
+          ),
+          custom: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <SanitizedContent
+                html={item.content}
+                customClassName={item.customClassName}
+              />
+            </AnimationGroup>
+          ),
+          switchLink: (
+            <AnimationGroup display={isExpandedState} key={key}>
+              <CmsSwitchLink
+                linkCallback={linkCallback}
+                label={item.label}
+                url={item.url}
+              />
+            </AnimationGroup>
+          ),
+        }[item.type] || (
+          <NavLinkInline
+            key={key}
+            icon={getDynamicIcon(item?.icon)}
+            className={item.className ? item.className : linkClass}
+            url={item.url}
+            label={item.label}
+            linkCallback={linkCallback}
+            showLabel={isExpandedState}
+            disabled={item.disabled}
+            target={item.target}
+          />
+        )
+      );
+    });
+
+    if (className === "link-container") {
+      return (
+        <div
+          className="animation-flat"
+          key={`nav-link-container-${recursionId}`}
+        >
+          <NavLinkContainer
+            listOfLinks={itemsMarkup}
+            linkActiveFunc={linkActiveFunc}
+          />
+        </div>
+      );
+    } else {
+      return <div className={className}>{itemsMarkup}</div>;
+    }
+  };
+
+  const content = !items?.length ? (
+    <LevelOneContent
+      levelOneContent={sideNavContent}
+      isExpanded={isExpandedState}
+      config={config}
+    />
+  ) : (
+    getDynamicContent(
+      items,
+      "sidebar-content" + (isAltStyle ? " alt-style" : "")
+    )
+  );
+
+  return (
+    <aside
+      id="qppSidebar"
+      tabIndex="-1"
+      className={`${isExpandedState ? "sidebar" : "sidebar closed"} sidebar-${
+        config.navClassName
+      }`}
+    >
+      {content}
+      <NavLinkToggle
+        isAltStyle={isAltStyle}
+        collapseRef={collapseRef}
+        isExpanded={isExpandedState}
+        onClick={toggleExpanded}
+      />
+    </aside>
+  );
+};
+
+SideNavUI.propTypes = {
+  config: PropTypes.object,
+  isAltStyle: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  items: PropTypes.object,
+  onCollapsed: PropTypes.func,
+  onExpanded: PropTypes.func,
+};
+
+SideNavUI.defaultProps = {
+  config: {},
+  isAltStyle: false,
+  isExpanded: undefined,
+  items: null,
+  onCollapsed: () => {},
+  onExpanded: () => {},
+};
+
+export default SideNavUI;

package/components/SideNav/UI/default-markup.js

@@ -0,0 +1,4 @@
+const defaultMarkup =
+  '<nav><ul><li><div class="link-drawer "><a href="/user/submissions" class="link-inline nav-li     " aria-label="Account Home" target="_self" data-track-category="SidebarNav" data-track-action="Go To Account Home" data-track-label="Account Home"><svg class="left-icon " aria-hidden="true" focusable="false"><svg class="account-home-icon" viewBox="0 0 25 25"><path d="M8.5,24 L8.5,15 C8.5,14.7238576 8.72385763,14.5 9,14.5 L16,14.5 C16.2761424,14.5 16.5,14.7238576 16.5,15 L16.5,24 L22.5,24 L22.5,9.238536 L12.5,1.14329791 L2.5,9.238536 L2.5,24 L8.5,24 Z M1.68540089,8.61137756 L12.1854009,0.111377565 C12.3688463,-0.0371258549 12.6311537,-0.0371258549 12.8145991,0.111377565 L23.3145991,8.61137756 C23.4318689,8.70631024 23.5,8.8491212 23.5,9 L23.5,24.5 C23.5,24.7761424 23.2761424,25 23,25 L2,25 C1.72385763,25 1.5,24.7761424 1.5,24.5 L1.5,9 C1.5,8.8491212 1.56813111,8.70631024 1.68540089,8.61137756 Z M9.5,15.5 L9.5,24 L15.5,24 L15.5,15.5 L9.5,15.5 Z"></path></svg></svg><div class="animation-group animation-group-default animation-group-enter"><span tabindex="-1" class="sidebar-inline-link-label">Account Home</span></div></a></div></li><li><div class="link-drawer "><a href="/user/exception/" class="link-inline nav-li     " aria-label="Exceptions Application" target="_self" data-track-category="SidebarNav" data-track-action="Go To Exceptions Application" data-track-label="Exceptions Application"><svg class="left-icon " aria-hidden="true" focusable="false"><svg class="hardship-icon" viewBox="0 0 25 25" version="1.1"><g><g transform="translate(2.000000, 0.000000)" fill-rule="nonzero"><path d="M18.7721739,2.6119403 L14.4991304,2.6119403 L12.4813043,2.6119403 C12.5178261,2.44402985 12.5543478,2.2761194 12.5543478,2.0988806 C12.5543478,0.942164179 11.6321739,0 10.5,0 C9.36782609,0 8.44565217,0.942164179 8.44565217,2.0988806 C8.44565217,2.2761194 8.47304348,2.44402985 8.51869565,2.6119403 L6.49173913,2.6119403 L2.21869565,2.6119403 C0.995217391,2.6119403 0,3.62873134 0,4.8880597 L0,22.733209 C0,23.983209 0.995217391,25 2.21869565,25 L18.7721739,25 C19.9956522,25 21,23.983209 21,22.7238806 L21,4.8880597 C21,3.62873134 19.9956522,2.6119403 18.7721739,2.6119403 Z M10.5,0.932835821 C11.13,0.932835821 11.6413043,1.45522388 11.6413043,2.0988806 C11.6413043,2.31343284 11.5682609,2.5 11.4769565,2.66791045 C11.403913,2.7891791 11.3126087,2.9011194 11.2030435,2.99440299 C11.1482609,3.04104478 11.0843478,3.08768657 11.0204348,3.125 C10.9747826,3.14365672 10.9382609,3.17164179 10.8926087,3.19029851 C10.7647826,3.22761194 10.6369565,3.26492537 10.5,3.26492537 C10.3630435,3.26492537 10.2352174,3.22761194 10.1165217,3.18097015 C10.0708696,3.16231343 10.0343478,3.14365672 9.98869565,3.11567164 C9.92478261,3.07835821 9.86086957,3.03171642 9.80608696,2.98507463 C9.6873913,2.89179104 9.59608696,2.77052239 9.52304348,2.63992537 C9.43173913,2.47201493 9.36782609,2.29477612 9.36782609,2.08955224 C9.35869565,1.45522388 9.87,0.932835821 10.5,0.932835821 Z M20.0869565,22.7238806 C20.0869565,23.4608209 19.5026087,24.0671642 18.7721739,24.0671642 L2.21869565,24.0671642 C1.4973913,24.0671642 0.903913043,23.4701493 0.903913043,22.7238806 L0.903913043,4.8880597 C0.913043478,4.14179104 1.4973913,3.54477612 2.21869565,3.54477612 L6.49173913,3.54477612 L6.49173913,4.38432836 C6.49173913,4.95335821 6.93913043,5.41044776 7.49608696,5.41044776 L13.503913,5.41044776 C14.0608696,5.41044776 14.5082609,4.95335821 14.5082609,4.38432836 L14.5082609,3.54477612 L18.7813043,3.54477612 C19.5026087,3.54477612 20.096087,4.14179104 20.096087,4.8880597 L20.096087,22.7238806 L20.0869565,22.7238806 L20.0869565,22.7238806 Z"></path><g transform="translate(4.000000, 9.000000)"><rect x="3.50571429" y="7.24" width="7.97142857" height="1"></rect><rect x="0.848571429" y="7.24" width="1.37142857" height="1"></rect><rect x="6.50571429" y="2.17" width="4.97142857" height="1"></rect><polygon points="2.13428571 4.04 0.402857143 2.01 1.01142857 1.31 2.13428571 2.62 4.03714286 0.41 4.64571429 1.11"></polygon></g></g></g></svg></svg><div class="animation-group animation-group-default animation-group-enter"><span tabindex="-1" class="sidebar-inline-link-label">Exceptions Application</span></div></a></div></li><li><div class="link-drawer "><a href="/user/targeted-review/" class="link-inline nav-li    stroke-based-icon " aria-label="Targeted Review" target="_self" data-track-category="SidebarNav" data-track-action="Go To Targeted Review" data-track-label="Targeted Review"><svg class="left-icon " aria-hidden="true" focusable="false"><svg class="target-icon stroke-based-icon" viewBox="0 0 25 25"><g stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(1.000000, 1.000000)"><path d="M15.6521739,13.3410862 C14.9799955,14.9155188 13.3391142,15.8471825 11.6426584,15.617619 C9.9462025,15.3880555 8.61194453,14.0537975 8.38238102,12.3573416 C8.15281751,10.6608858 9.08448121,9.0200045 10.6589138,8.34782609" stroke-linecap="round"></path><path d="M19.826087,11.4686261 C19.5475194,15.6524455 16.0240274,18.8752139 11.8318419,18.780577 C7.63965639,18.6859401 4.26519733,15.3074531 4.17572893,11.1153254 C4.08626053,6.92319774 7.31350554,3.40382874 11.4978365,3.13043478" stroke-linecap="round"></path><path d="M22.9565217,10.4801044 C22.9565217,10.8094757 22.9565217,11.1488279 22.9565217,11.4781992 C22.9565217,16.1251852 20.1544991,20.3136359 15.8592987,22.0872623 C11.5640982,23.8608888 6.62327363,22.8696906 3.3445233,19.5766243 C0.065772964,16.283558 -0.903887735,11.3384639 0.888438166,7.05103466 C2.68076407,2.7636054 6.8813862,-0.0200950351 11.5283306,0 C11.867683,0 12.2070354,0 12.5264259,0" stroke-linecap="round"></path><path d="M23.4104348,8.34782609 C23.4626087,8.69217391 23.5147826,9.04695652 23.546087,9.39130435" stroke-linecap="round"></path><path d="M19.0559527,8.3085908 L16.1993898,7.27346855 C15.9679825,7.18675289 15.7867762,7.00255341 15.7042523,6.77015223 L14.6758896,3.9211919 C14.5392501,3.60164864 14.6150694,3.23112279 14.8663271,2.99053153 L17.5610181,0.255529619 C17.7680939,0.0454487694 18.069052,-0.043464617 18.357445,0.020237671 C18.6458381,0.083939959 18.8810085,0.291277194 18.9797777,0.568915255 L19.7415278,2.61067015 C19.8301804,2.85007338 20.017334,3.04018548 20.2557092,3.13297955 L22.4076532,3.94968151 C22.6793557,4.05644917 22.8788566,4.29253202 22.938341,4.57768034 C22.9978255,4.86282867 22.9092906,5.15867892 22.7028314,5.36466513 L19.960531,8.07117744 C19.7289278,8.31564041 19.3782081,8.40768945 19.0559527,8.3085908 Z"></path><line x1="12.5217391" y1="10.4347826" x2="16.6956522" y2="6.26086957" stroke-linecap="round"></line></g></g></svg></svg><div class="animation-group animation-group-default animation-group-enter"><span tabindex="-1" class="sidebar-inline-link-label">Targeted Review</span></div></a></div></li><li><div class="link-drawer "><a href="/user/manage-access" class="link-inline nav-li     " aria-label="Manage Access" target="_self" data-track-category="SidebarNav" data-track-action="Go To Manage Access" data-track-label="Manage Access"><svg class="left-icon " aria-hidden="true" focusable="false"><svg class="manage-users-svg" viewBox="0 0 25 25"><g><path d="M4.4,10.8V0.2H3.6v10.7c-1.9,0.2-3.4,1.8-3.4,3.8s1.5,3.6,3.4,3.8v6.4h0.9v-6.4c1.9-0.2,3.4-1.8,3.4-3.8 S6.3,11.1,4.4,10.8z M4,17.6c-1.6,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S5.6,17.6,4,17.6z"></path><path d="M12.9,2.3V0.2h-0.9v2.2c-1.9,0.2-3.4,1.8-3.4,3.8c0,2,1.5,3.6,3.4,3.8v14.9h0.9V9.9c1.9-0.2,3.4-1.8,3.4-3.8 C16.3,4.2,14.8,2.6,12.9,2.3z M12.5,9.1c-1.6,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S14.1,9.1,12.5,9.1z"></path><path d="M24.8,18.9c0-2-1.5-3.6-3.4-3.8V0.2h-0.9v14.9c-1.9,0.2-3.4,1.8-3.4,3.8s1.5,3.6,3.4,3.8v2.2h0.9v-2.2 C23.3,22.4,24.8,20.8,24.8,18.9z M21,21.8c-1.6,0-3-1.3-3-3c0-1.6,1.3-3,3-3s3,1.3,3,3C24,20.5,22.6,21.8,21,21.8z"></path></g></svg></svg><div class="animation-group animation-group-default animation-group-enter"><span tabindex="-1" class="sidebar-inline-link-label">Manage Access</span></div></a><div class="drawer nav-drawer"><ul aria-hidden="false"><li class=" parent-link"><a href="/user/self-nomination/" tabindex="0" data-track-category="SidebarNav" data-track-action="Go To Registry/QCDR Self-Nomination" data-track-label="Registry/QCDR Self-Nomination" target="_self">Registry/QCDR Self-Nomination</a></li></ul></div></div></li><li><div class="link-drawer "><a href="/resources/help-and-support" class="link-inline nav-li     " aria-label="Help and Support" target="_self" data-track-category="SidebarNav" data-track-action="Go To Help and Support" data-track-label="Help and Support"><svg class="left-icon " aria-hidden="true" focusable="false"><svg class="help-support" viewBox="0 0 25 25"><g><path d="M12.5,0.3C5.8,0.3,0.3,5.8,0.3,12.5s5.5,12.2,12.2,12.2s12.2-5.5,12.2-12.2S19.2,0.3,12.5,0.3z M12.5,23.8 c-6.2,0-11.3-5.1-11.3-11.3S6.3,1.2,12.5,1.2s11.3,5.1,11.3,11.3S18.7,23.8,12.5,23.8z"></path><path d="M12.5,10.7h-0.4c-0.1,0-0.3,0-0.3,0.1c-0.1,0.1-0.1,0.2-0.1,0.3v8c0,0.1,0,0.3,0.1,0.3 c0.1,0.1,0.2,0.1,0.3,0.1h0.4c0.1,0,0.3,0,0.3-0.1c0.1-0.1,0.1-0.2,0.1-0.3v-8c0-0.1,0-0.3-0.1-0.3C12.8,10.7,12.7,10.7,12.5,10.7z"></path><path d="M12.6,6.7h-0.5c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.1,0.3-0.1,0.4v0.5c0,0.1,0,0.3,0.1,0.3 c0.1,0.1,0.2,0.1,0.3,0.1h0.5c0.1,0,0.3,0,0.4-0.1C13,7.9,13,7.8,13,7.6V7.2c0-0.1,0-0.3-0.1-0.4C12.8,6.7,12.7,6.7,12.6,6.7z"></path></g></svg></svg><div class="animation-group animation-group-default animation-group-enter"><span tabindex="-1" class="sidebar-inline-link-label">Help and Support</span></div></a></div></li></ul></nav>';
+
+export default defaultMarkup;

package/components/SideNav/UI/index.js

@@ -0,0 +1,3 @@
+import SideNavUI from "./SideNavUI";
+
+export { SideNavUI };