@madie/madie-design-system 1.0.0

package/components/SideNav/Links/NavLinkInline.jsx

@@ -0,0 +1,107 @@
+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,
+  label,
+  isActive,
+  showLabel,
+  linkCallback,
+  disabled,
+  useTooltips,
+  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 && useTooltips && svgRef.current) {
+      const existingMouseenter = svgRef.current.onmouseover;
+      const existingMouseout = svgRef.current.onmouseout;
+
+      svgRef.current.onmouseover = () => {
+        if (tooltipRef.current && useTooltips) {
+          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">{label}</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,
+  label: PropTypes.string,
+  isActive: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  linkCallback: PropTypes.func,
+  disabled: PropTypes.bool,
+  useTooltips: 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/SideNav.stories.js

@@ -0,0 +1,379 @@
+import React from 'react';
+import SideNav from './UI/SideNavUI';
+import {
+  withKnobs,
+  boolean,
+  number,
+  select,
+  text,
+} from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'SideNav',
+  component: SideNav,
+  decorators: [withKnobs],
+};
+
+const PERFORMANCE_YEARS = ['2017', '2018', '2019', '2020'];
+
+const CONFIG_GROUP_ID = 'config prop';
+
+/*
+type Config = {
+  openDrawersByDefault: Boolean,
+  linkActiveFunc: Function,
+  linkCallback: Function,
+  animationType: String,
+  useTooltips: Boolean,
+  navClassName: String,
+  chartActive: Boolean,
+  openDrawersByDefault: Boolean,
+  updateTime: String,
+  practiceId: String,
+  practiceName: String,
+  practiceTin: String,
+  apmEntityId: String,
+  isConnectedUsersPage: Boolean,
+  vgId: String,
+  roleAbbr: String,
+  performanceYear: String,
+  finalFeedbackOpen: Boolean,
+  isApmPaymentDetailsPage: Boolean,
+  cpcPlusId: String,
+}
+
+type Category = {
+  name: String,
+  link: String,
+  value: Number,
+  maxContribution: Number,
+}
+
+type ChartData = {
+  finalScore: Number,
+  categories: [ Category ],
+}
+*/
+
+const demoChartData = {
+  finalScore: 50,
+  categories: [
+    {
+      name: 'name1',
+      link: 'https://google.com',
+      value: 10,
+      maxContribution: 20,
+    },
+    {
+      name: 'name2',
+      link: 'https://google.com',
+      value: 10,
+      maxContribution: 20,
+    },
+    {
+      name: 'name3',
+      link: 'https://google.com',
+      value: 10,
+      maxContribution: 20,
+    },
+    {
+      name: 'name4',
+      link: 'https://google.com',
+      value: 20,
+      maxContribution: 40,
+    },
+  ],
+};
+
+export const Example = () => (
+  <div style={{ height: '840px' }}>
+    <SideNav
+      currentLevel={number('currentLevel', 1)}
+      isExpanded={boolean('isExpanded', true)}
+      onExpanded={action('onExpanded')}
+      onCollapsed={action('onCollapsed')}
+      chartData={demoChartData}
+      // items={demoItems}
+      isAltStyle={boolean('isAltStyle', false)}
+      showReportingLinks={boolean('showReportingLinks', false)}
+      performanceYear={select(
+        'performanceYear',
+        PERFORMANCE_YEARS,
+        PERFORMANCE_YEARS[0]
+      )}
+      config={{
+        linkActiveFunc: action('linkActiveFunc'),
+        linkCallback: action('linkCallback'),
+        animationType: text('animationType', '', CONFIG_GROUP_ID),
+        navClassName: text('navClassName', '', CONFIG_GROUP_ID),
+        updateTime: text('updateTime', '', CONFIG_GROUP_ID),
+        practiceId: text('practiceId', 'PRACTICE_ID', CONFIG_GROUP_ID),
+        practiceName: text('practiceName', 'PRACTICE_NAME', CONFIG_GROUP_ID),
+        practiceTin: text('practiceTin', 'PRACTICE_TIN', CONFIG_GROUP_ID),
+        apmEntityId: text('apmEntityId', 'APM_ENTITY_ID', CONFIG_GROUP_ID),
+        cpcPlusId: text('cpcPlusId', 'CPC_PLUS_ID', CONFIG_GROUP_ID),
+        vgId: text('vgId', 'VG ID', CONFIG_GROUP_ID),
+        roleAbbr: text('roleAbbr', 'ROLE-ABBR', CONFIG_GROUP_ID),
+        performanceYear: text(
+          'performanceYear',
+          PERFORMANCE_YEARS[0],
+          CONFIG_GROUP_ID
+        ),
+        openDrawersByDefault: boolean(
+          'openDrawersByDefault',
+          false,
+          CONFIG_GROUP_ID
+        ),
+        chartActive: boolean('chartActive', true, CONFIG_GROUP_ID),
+        isConnectedUsersPage: boolean(
+          'isConnectedUsersPage',
+          false,
+          CONFIG_GROUP_ID
+        ),
+        finalFeedbackOpen: boolean('finalFeedbackOpen', false, CONFIG_GROUP_ID),
+        isApmPaymentDetailsPage: boolean(
+          'isApmPaymentDetailsPage',
+          false,
+          CONFIG_GROUP_ID
+        ),
+        useTooltips: boolean('useTooltips', false, CONFIG_GROUP_ID),
+      }}
+    />
+  </div>
+);
+
+/*
+type Item = {
+  type: String,
+  url: String,
+  label: String,
+  className: String,
+  icon: Element,
+  practiceName: String,
+  practiceTin: String,
+  apmEntityId: String,
+  vgId: String,
+  cpcPlusId: String,
+  individualName: String,
+  individualNpi: String,
+  isAlwaysOpen: Boolean,
+  content: String,
+  customClassName: String,
+  chartData: ChartData,
+  disabled: Boolean,
+  items: [ Item ]
+}
+
+type Items = [ Item ]
+*/
+
+const demoItems = [
+  {
+    type: 'container',
+    className: 'foobar',
+    items: [
+      {
+        type: 'linkBack',
+        url: 'https://qpp.cms.gov',
+        label: 'link back',
+      },
+      {
+        type: 'linkHome',
+        icon: 'AccountHomeIcon',
+        url: 'https://qpp.cms.gov',
+        label: 'link home',
+      },
+    ],
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'practiceDetails',
+    practiceName: 'Demo Practice',
+    practiceTin: '123456789',
+    //apmEntityId: '111111111',
+    //vgId: '987654321',
+    //cpcPlusId: '999999999',
+  },
+  {
+    type: 'individualDetails',
+    individualName: 'Demo Individual',
+    individualNpi: '333333333',
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'linkDrawer',
+    icon: 'StarIcon',
+    isAlwaysOpen: false,
+    label: 'Link Drawer',
+    // disabled: false,
+    items: [
+      {
+        type: 'link',
+        className: 'foo',
+        label: 'Link 1',
+        icon: 'PaymentIcon',
+        url: 'https://qpp.cms.gov',
+      },
+      {
+        type: 'link',
+        className: 'bar',
+        label: 'Link 2',
+        icon: 'ReportsIcon',
+        url: 'https://qpp.cms.gov',
+      },
+      {
+        type: 'link',
+        className: 'baz',
+        label: 'Link 3',
+        url: 'https://qpp.cms.gov',
+      },
+    ],
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'linkDrawer',
+    isAlwaysOpen: false,
+    label: 'Highlighted Link Drawer No Icon',
+    isHighlighted: true,
+    items: [
+      {
+        type: 'link',
+        className: 'foo',
+        label: 'Link 1',
+        url: 'https://qpp.cms.gov',
+      },
+      {
+        type: 'link',
+        className: 'bar',
+        label: 'Link 2',
+        url: 'https://qpp.cms.gov',
+      },
+      {
+        type: 'link',
+        className: 'baz',
+        label: 'Link 3',
+        url: 'https://qpp.cms.gov',
+      },
+    ],
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'custom',
+    content: `
+        <div style="margin-left: 20px;">
+          <h4 style="color: white;">Custom Content</h4>
+          <ul>
+            <li>foo</li>
+            <li>bar</li>
+          </ul>
+        </div>
+      `,
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'chart',
+    chartData: demoChartData,
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'switchLink',
+    label: 'Switch Link',
+    url: 'https://qpp.cms.gov',
+  },
+  {
+    type: 'divider',
+  },
+  {
+    type: 'link',
+    label: 'Default Link',
+    icon: 'HardshipIcon',
+  },
+  {
+    type: 'link',
+    label: 'Default Disabled Link',
+    icon: 'TargetIcon',
+    disabled: true,
+  },
+];
+
+export const DynamicItems = () => (
+  <div style={{ height: '840px' }}>
+    <SideNav
+      isExpanded={boolean('isExpanded', true)}
+      onExpanded={action('onExpanded')}
+      onCollapsed={action('onCollapsed')}
+      items={demoItems}
+    />
+  </div>
+);
+
+export const LevelTwoUsage = () => (
+  <div style={{ height: '840px' }}>
+    <SideNav
+      currentLevel={number('currentLevel', 2)}
+      isExpanded={boolean('isExpanded', true)}
+      onExpanded={action('onExpanded')}
+      onCollapsed={action('onCollapsed')}
+      chartData={demoChartData}
+      // items={demoItems}
+      isAltStyle={boolean('isAltStyle', false)}
+      showReportingLinks={boolean('showReportingLinks', false)}
+      performanceYear={select(
+        'performanceYear',
+        PERFORMANCE_YEARS,
+        PERFORMANCE_YEARS[0]
+      )}
+      config={{
+        linkActiveFunc: action('linkActiveFunc'),
+        linkCallback: action('linkCallback'),
+        animationType: text('animationType', '', CONFIG_GROUP_ID),
+        navClassName: text('navClassName', '', CONFIG_GROUP_ID),
+        updateTime: text('updateTime', '', CONFIG_GROUP_ID),
+        practiceId: text('practiceId', 'PRACTICE_ID', CONFIG_GROUP_ID),
+        practiceName: text('practiceName', 'PRACTICE_NAME', CONFIG_GROUP_ID),
+        practiceTin: text('practiceTin', 'PRACTICE_TIN', CONFIG_GROUP_ID),
+        apmEntityId: text('apmEntityId', 'APM_ENTITY_ID', CONFIG_GROUP_ID),
+        cpcPlusId: text('cpcPlusId', 'CPC_PLUS_ID', CONFIG_GROUP_ID),
+        pcfId: text('pcfId', 'PCF_ID', CONFIG_GROUP_ID),
+        vgId: text('vgId', 'VG ID', CONFIG_GROUP_ID),
+        roleAbbr: text('roleAbbr', 'ROLE-ABBR', CONFIG_GROUP_ID),
+        performanceYear: text(
+          'performanceYear',
+          PERFORMANCE_YEARS[0],
+          CONFIG_GROUP_ID
+        ),
+        openDrawersByDefault: boolean(
+          'openDrawersByDefault',
+          false,
+          CONFIG_GROUP_ID
+        ),
+        chartActive: boolean('chartActive', true, CONFIG_GROUP_ID),
+        isConnectedUsersPage: boolean(
+          'isConnectedUsersPage',
+          false,
+          CONFIG_GROUP_ID
+        ),
+        finalFeedbackOpen: boolean('finalFeedbackOpen', false, CONFIG_GROUP_ID),
+        isApmPaymentDetailsPage: boolean(
+          'isApmPaymentDetailsPage',
+          false,
+          CONFIG_GROUP_ID
+        ),
+        useTooltips: boolean('useTooltips', false, CONFIG_GROUP_ID),
+      }}
+    />
+  </div>
+);