qpp-style 2.1.13 → 2.2.0-sm.0

package/js/components/SideNav/Content/LevelOneContent.jsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import cookie from 'cookie';
-import jwtDecode from 'jwt-decode';
-import { NavLinkContainer, NavLinkInline } from '../Links';
-
-const LevelOneContent = ({
-    isExpanded,
-    showManageAccountLink,
-    config: {
-        levelTwoActive = true
-    } = {}
-}) => {
-    let name = '';
-    let cookies = cookie.parse(document.cookie);
-    if (cookies.hasOwnProperty('qpp_auth_token')) {
-        const { data } = jwtDecode(cookies.qpp_auth_token);
-        name = `${data.firstName} ${data.lastName}`;
-    }
-
-    const linkClass = isExpanded ? "link-inline" : "link-collapsed";
-    const listOfLinks = [
-        <NavLinkInline
-            icon="dashboard"
-            className={linkClass}
-            url="/user/dashboard"
-            label="Account Dashboard"
-            showLabel={isExpanded} />
-    ];
-
-
-    if (levelTwoActive) {
-        listOfLinks.push(
-            <NavLinkInline icon="account-settings"
-                           className={linkClass}
-                           url="/user/settings"
-                           label="Account Settings"
-                           showLabel={isExpanded} />,
-        );
-        if (showManageAccountLink) {
-          listOfLinks.push(
-              <NavLinkInline icon="manage-users"
-                             className={linkClass}
-                             url="/user/manage-access"
-                             label="Manage User Access"
-                             showLabel={isExpanded} />,
-          );
-        }
-        listOfLinks.push(
-            <NavLinkInline icon="help-support"
-                           className={linkClass}
-                           url="/about/help-and-support"
-                           label="Help and Support"
-                           showLabel={isExpanded} />
-        );
-    }
-    return (
-        <div className="sidebar-content">
-            {isExpanded && <h1 className="label">{name}</h1>}
-            <NavLinkContainer listOfLinks={listOfLinks} />
-        </div>
-    );
-};
-
-export default LevelOneContent;

package/js/components/SideNav/Content/LevelThreeContent.jsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import { NavLinkContainer, NavLinkBack, NavLinkDrawer } from '../Links';
-import { PracticeDetails, IndividualDetails } from '../Details';
-import { ScoreChart } from '../Chart';
-
-const LevelThreeContent = ({
-    isExpanded,
-    chartData,
-    config: {
-        chartActive = true,
-        openDrawersByDefault,
-        updateTime,
-        practiceId,
-        practiceName,
-        practiceTin,
-        individualName,
-        individualNpi,
-        submissionId,
-        listOfPractices,
-        listOfOrganizations
-    } = {}
-}) => {
-    const linkClass = isExpanded ? "link-inline" : "link-collapsed";
-
-    return (
-        <div className="sidebar-content alt-style">
-            {isExpanded &&
-                <div>
-                    {practiceName && practiceTin &&
-                        <div className="alt-style-header">
-                            <NavLinkBack
-                                icon="chevron-left"
-                                url={`/user/dashboard/practice/${practiceId}/individual`}
-                                label="Connected Clinicians"
-                                showLabel={isExpanded} />
-                            <hr />
-                            <PracticeDetails
-                                isLevelThree
-                                practiceName={practiceName}
-                                practiceTin={practiceTin}
-                                listOfPractices={listOfPractices}
-                                listOfOrganizations={listOfOrganizations}
-                            />
-                        </div>
-                    }
-                    {individualName && individualNpi &&
-                        <div>
-                            <IndividualDetails
-                                individualName={individualName}
-                                individualNpi={individualNpi}
-                                listOfPractices={listOfPractices}
-                                listOfOrganizations={listOfOrganizations}
-                            />
-                            <hr />
-                        </div>
-                    }
-                </div>
-            }
-            <NavLinkContainer
-                listOfLinks={[
-                    <NavLinkDrawer
-                        isAlwaysOpen
-                        isExpanded={isExpanded}
-                        openByDefault={openDrawersByDefault}
-                        leftIcon="individual-reporting"
-                        className={`${linkClass} freeze`}
-                        label="Individual Reporting"
-                        listOfLinks={[
-                            { url: `/user/submissions/${submissionId}/quality`, label: "Quality Measures" },
-                            { url: `/user/submissions/${submissionId}/aci`, label: "Advancing Care Information" },
-                            { url: `/user/submissions/${submissionId}/ia`, label: "Improvement Activities" }
-                        ]}
-                    />
-                ]}
-            />
-            {isExpanded && chartActive &&
-                <div>
-                    <hr />
-                    <div className="chart-title">
-                        <p className="title">Final Individual Score</p>
-                        <p className="disclaimer">
-                            <svg className="left-icon" aria-hidden="true">
-                                <use xlinkHref="#score-increase" />
-                            </svg>
-                            Score may increase
-                            <svg className="right-icon" aria-hidden="true">
-                                <use xlinkHref="#tooltip" />
-                            </svg>
-                        </p>
-                        {updateTime && <p className="timestamp">Last update at {updateTime}</p>}
-                    </div>
-                    <ScoreChart chartData={chartData} />
-                </div>
-            }
-        </div>
-    );
-};
-
-export default LevelThreeContent;

package/js/components/SideNav/Content/LevelTwoContent.jsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { NavLinkContainer, NavLinkBack, NavLinkInline, NavLinkDrawer } from '../Links';
-import { PracticeDetails } from '../Details';
-import { ScoreChart } from '../Chart';
-
-const LevelTwoContent = ({
-    isExpanded,
-    chartData,
-    config: {
-        chartActive = true,
-        openDrawersByDefault,
-        updateTime,
-        practiceId,
-        practiceName,
-        practiceTin,
-        submissionId,
-        listOfPractices,
-        listOfOrganizations
-    } = {}
-}) => {
-    const linkClass = isExpanded ? "link-inline" : "link-collapsed";
-
-    return (
-        <div className="sidebar-content">
-            {isExpanded &&
-                <div>
-                    <NavLinkBack
-                        icon="chevron-left"
-                        url="/user/dashboard"
-                        label="Account Dashboard"
-                        showLabel={true} />
-                    <hr />
-                    <PracticeDetails
-                        practiceName={practiceName}
-                        practiceTin={practiceTin}
-                        listOfPractices={listOfPractices}
-                        listOfOrganizations={listOfOrganizations}
-                    />
-                    <hr />
-                </div>
-            }
-            <NavLinkContainer
-                listOfLinks={[
-                    <NavLinkInline
-                        icon="clinicians"
-                        className={linkClass}
-                        url={`/user/dashboard/practice/${practiceId}/individual`}
-                        label="Connected Clinicians"
-                        showLabel={isExpanded} />,
-                    <NavLinkDrawer
-                        isExpanded={isExpanded}
-                        openByDefault={openDrawersByDefault}
-                        rightIcon="chevron-down"
-                        leftIcon="group-reporting"
-                        className={linkClass}
-                        label="Group Reporting"
-                        listOfLinks={[
-                            { url: `/user/dashboard/practice/${practiceId}/group`, label: "Group Dashboard" },
-                            { url: `/user/submissions/${submissionId}/quality`, label: "Quality Measures" },
-                            { url: `/user/submissions/${submissionId}/aci`, label: "Advancing Care Information" },
-                            { url: `/user/submissions/${submissionId}/ia`, label: "Improvement Activities" }
-                        ]}
-                    />
-                ]}
-            />
-            {isExpanded && chartActive &&
-                <div>
-                    <hr />
-                    <div className="chart-title">
-                        <p className="title">Final Group Score</p>
-                        <p className="disclaimer">
-                            <svg className="left-icon" aria-hidden="true">
-                                <use xlinkHref="#score-increase" />
-                            </svg>
-                            Score may increase
-                            <svg className="right-icon" aria-hidden="true">
-                                <use xlinkHref="#tooltip" />
-                            </svg>
-                        </p>
-                        {updateTime && <p className="timestamp">Last update at {updateTime}</p>}
-                    </div>
-                    <ScoreChart chartData={chartData} />
-                </div>
-            }
-        </div>
-    );
-};
-
-export default LevelTwoContent;

package/js/components/SideNav/Content/index.js

@@ -1,5 +0,0 @@
-export { default as LevelOneContent } from './LevelOneContent';
-export { default as LevelTwoContent } from './LevelTwoContent';
-export { default as LevelThreeContent } from './LevelThreeContent';
-export { default as CmsContent } from './CmsContent';
-export { default as FeedbackContent } from './FeedbackContent.jsx';

package/js/components/SideNav/Details/IndividualDetails.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { NavLinkSlideOut } from '../Links';
-
-const IndividualDetails = ({
-    individualName,
-    individualNpi,
-    listOfPractices,
-    listOfOrganizations
-}) => {
-    return (
-        <div>
-            <div className="individual-container">
-                <h3 className="individual-name">{individualName}</h3>
-                <p className="individual-npi">NPI# {individualNpi}</p>
-                {listOfPractices && listOfOrganizations &&
-                    <div>
-                        <a href="#" className="individual-link">Clinician details and practices</a>
-                        <p className="switch-clinician">
-                            <NavLinkSlideOut
-                                rightIcon="switch-practice"
-                                leftIcon="chevron-right"
-                                url="#"
-                                label="Switch Clinician"
-                                listOfPractices={listOfPractices}
-                                listOfOrganizations={listOfOrganizations}
-                            />
-                        </p>
-                    </div>
-                }
-            </div>
-        </div>
-    )
-};
-
-export default IndividualDetails;

package/js/components/SideNav/Details/PracticeDetails.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { NavLinkSlideOut } from '../Links';
-
-const PracticeDetails = ({
-    isLevelThree,
-    practiceName,
-    practiceTin,
-    listOfPractices,
-    listOfOrganizations
-}) => {
-    return (
-        <div>
-            <div className="practice-container">
-                <h2 className="practice-name">{practiceName || 'No name on record'}</h2>
-                <p className="practice-tin">TIN# {practiceTin}</p>
-                {!isLevelThree && listOfPractices && listOfOrganizations &&
-                    <p className="switch-practice">
-                        <NavLinkSlideOut
-                            rightIcon="switch-practice"
-                            leftIcon="chevron-right"
-                            url="#"
-                            label="Switch Practice"
-                            listOfPractices={listOfPractices}
-                            listOfOrganizations={listOfOrganizations}
-                        />
-                    </p>
-                }
-            </div>
-        </div>
-    )
-};
-
-export default PracticeDetails;

package/js/components/SideNav/Details/index.js

@@ -1,2 +0,0 @@
-export { default as IndividualDetails } from './IndividualDetails';
-export { default as PracticeDetails } from './PracticeDetails';

package/js/components/SideNav/Links/CmsReportLink.jsx

@@ -1,117 +0,0 @@
-import React, { Component } from 'react';
-
-export default class CmsReportLink extends Component {
-    constructor(props) {
-        super(props);
-        this._toggleDrawer = this.toggleDrawer.bind(this);
-        this._toggleActive = this.toggleActive.bind(this);
-        this.state = {
-            isOpen: false,
-            activeLink: null
-        };
-    }
-
-    componentWillMount() {
-        const { isAlwaysOpen } = this.props;
-        if (isAlwaysOpen) {
-            this.setState((state) => ({isOpen: isAlwaysOpen}));
-        }
-    }
-
-    toggleDrawer() {
-        const { isAlwaysOpen } = this.props;
-        if (!isAlwaysOpen) {
-            this.setState((state) => ({isOpen: !state.isOpen}));
-        }
-    }
-
-    toggleActive(idx) {
-        this.setState((state) => ({activeLink: idx}));
-    }
-
-    endsWithY(value) {
-        return value.substr(-1).toLowerCase() === 'y';
-      }
-
-    pluralize(value, count, uppercase) {
-        const exceptions = ['Day', 'day'];
-        let newValue = value;
-
-        if (value == null) {
-          newValue = '';
-        } else if (count === 0 && this.endsWithY(value) && !exceptions.includes(value)) {
-          newValue = `${value.slice(0, -1)}ies`;
-        } else if (count > 1 && this.endsWithY(value) && !exceptions.includes(value)) {
-          newValue = `${value.slice(0, -1)}ies`;
-        } else if (count > 1 || count === 0) {
-          newValue = `${value}s`;
-        }
-
-        if (uppercase) {
-          return `${newValue.toUpperCase()}`;
-        }
-
-        return newValue;
-    }
-
-    render() {
-        const {
-            isExpanded,
-            isAlwaysOpen,
-            isActive,
-            url,
-            className,
-            rightIcon,
-            leftIcon,
-            label,
-            disabled,
-            days,
-            measures,
-            isTrialPeriod,
-            trialPeriodEnd,
-        } = this.props;
-        const { isOpen } = this.state;
-
-        return (
-            <div className="link-drawer">
-                <button
-                    className={!isAlwaysOpen ? `${className} ${isActive ? 'active' : ''}` : className}
-                    {...!isAlwaysOpen ? { 'aria-pressed': isOpen } : {}}
-                    {...disabled || isAlwaysOpen ? { 'disabled': disabled } : {}}
-                    onClick={this._toggleDrawer}
-                    aria-label={label}
-                >
-                    <div className={isExpanded ? "link-body" : "left-body collapsed"}>
-                        <svg className="left-icon" aria-hidden="true" focusable="false">
-                            <use xlinkHref={`#${leftIcon}`} />
-                        </svg>
-                        {isExpanded && <span>{label}</span>}
-                    </div>
-                    {(isExpanded && !isAlwaysOpen) &&
-                        <svg className={`${isOpen && !disabled ? 'right-icon rotated' : 'right-icon'}`}
-                             aria-hidden="true"
-                             focusable="false"
-                        >
-                            <use xlinkHref={`#${rightIcon}`}/>
-                        </svg>
-                    }
-                </button>
-                {isExpanded &&
-                    <div className={`${isOpen && !disabled ? 'drawer open' : 'drawer'}`} aria-hidden={!isOpen}>
-                        <div className="cms-content">
-                            {isTrialPeriod ? (
-                                <p className="trial-period completed">You can test your data through <span>{trialPeriodEnd}</span></p>
-                            ) : (
-                                <div>
-                                    <p className="due-date">Due in <span>{days}</span> {this.pluralize('day', days)}</p>
-                                    <p className="completed"><span>{measures}</span> {this.pluralize('measure', measures)} complete</p>
-                                </div>
-                            )}
-                            <a className="button" href={url} data-track-category='SidebarNav' data-track-action={`GoTo${(isTrialPeriod ? 'Test Data' : 'Report Data').split(' ').join('')}`} data-track-label={isTrialPeriod ? 'Test Data' : 'Report Data'}>{isTrialPeriod ? 'Test Data' : 'Report Data'}</a>
-                        </div>
-                    </div>
-                }
-            </div>
-        )
-    }
-}

package/js/components/SideNav/Links/NavLinkBack.jsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import NavLinkInline from './NavLinkInline';
-
-const NavLinkBack = ({icon, url, label, showLabel}) => {
-    return (<NavLinkInline icon={icon} className="link-back" url={url} label={label} showLabel={showLabel} />)
-};
-
-export default NavLinkBack;

package/js/components/SideNav/Links/NavLinkContainer.jsx

@@ -1,33 +0,0 @@
-import React, { Component, cloneElement } from 'react';
-
-export default class NavLinkContainer extends Component {
-    constructor(props) {
-        super(props);
-        this._toggleActive = this.toggleActive.bind(this);
-        this.state = {
-            activeLink: null
-        };
-    }
-
-    toggleActive(idx) {
-        this.setState((state) => ({activeLink: idx}));
-    }
-
-    render() {
-        const { activeLink } = this.state;
-        const { listOfLinks } = this.props;
-
-        return (
-            <nav>
-                <ul>
-                    {listOfLinks && listOfLinks.map((link, idx) =>
-                        <li role="none"
-                            onClick={() => this._toggleActive(idx)}>
-                            {cloneElement(link, { isActive: activeLink === idx })}
-                        </li>
-                    )}
-                </ul>
-            </nav>
-        )
-    }
-}

package/js/components/SideNav/Links/NavLinkDrawer.jsx

@@ -1,86 +0,0 @@
-import React, { Component } from 'react';
-
-export default class NavLinkDrawer extends Component {
-    constructor(props) {
-        super(props);
-        this._toggleDrawer = this.toggleDrawer.bind(this);
-        this._isLinkActive = this.isLinkActive.bind(this);
-        this.state = {
-            isOpen: !!props.openByDefault
-        };
-    }
-
-    componentWillMount() {
-        const { isAlwaysOpen } = this.props;
-        if (isAlwaysOpen) {
-            this.setState((state) => ({isOpen: isAlwaysOpen}));
-        }
-    }
-
-    toggleDrawer() {
-        const { isAlwaysOpen } = this.props;
-        if (!isAlwaysOpen) {
-            this.setState((state) => ({isOpen: !state.isOpen}));
-        }
-    }
-
-    isLinkActive(link, func) {
-        if (typeof func === 'function') {
-            return func(link);
-        }
-
-        return window.location.href.includes(link.url);
-    }
-
-    render() {
-        const { isExpanded, isAlwaysOpen, className, rightIcon, leftIcon, label, disabled, isActive, listOfLinks, linkActiveFunc } = this.props;
-        const { isOpen } = this.state;
-
-        // Classes for the link drawer button
-        const currentPage = listOfLinks.some((link) => this._isLinkActive(link, linkActiveFunc));
-        const expandedClass = currentPage ? 'expanded' : '';
-
-        return (
-            <div className="link-drawer">
-                <button
-                    className={`${className} ${expandedClass}`}
-                    {...!isAlwaysOpen ? { 'aria-pressed': isOpen } : {}}
-                    {...disabled || isAlwaysOpen ? { 'disabled': disabled } : {}}
-                    onClick={this._toggleDrawer}
-                    aria-label={label}
-                >
-                    <div className={isExpanded ? "link-body" : "left-body collapsed"}>
-                        <svg className="left-icon" aria-hidden="true" focusable="false">
-                            <use xlinkHref={`#${leftIcon}`} />
-                        </svg>
-                        {isExpanded && <span>{label}</span>}
-                    </div>
-                    {(isExpanded && !isAlwaysOpen) &&
-                        <svg className={`${isOpen && !disabled ? 'right-icon rotated' : 'right-icon'}`}
-                             aria-hidden="true"
-                             focusable="false"
-                        >
-                            <use xlinkHref={`#${rightIcon}`}/>
-                        </svg>
-                    }
-                </button>
-                {isExpanded &&
-                    <div className={`${currentPage ? 'currentPage' : ''} ${isOpen && !disabled ? 'drawer open' : 'drawer'}`}>
-                        <ul aria-hidden={!isOpen} role="none">
-                            {listOfLinks && listOfLinks.map(link =>
-                                <li className={this._isLinkActive(link, linkActiveFunc) ? 'active-link' : ''} role="none">
-                                    <a href={link.url}
-                                        tabIndex={isOpen ? '0' : '-1'}
-                                        data-track-category='SidebarNav'
-                                        data-track-action={`GoTo${link.label ? link.label.split(' ').join('') : ''}`}
-                                        data-track-label={link.label}>{link.label}</a>
-                                </li>
-                            )}
-                        </ul>
-                    </div>
-                }
-            </div>
-        )
-    }
-}
-

package/js/components/SideNav/Links/NavLinkInline.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-const NavLinkInline = ({url, className, icon, label, isActive, showLabel})  => {
-    const urlRegExp = new RegExp(`${url}$`);
-    const currentPage = window.location.href.match(urlRegExp);
-    return (
-        <a href={url}
-           className={`${className} ${currentPage || isActive ? 'active' : ''}`}
-           data-track-category='SidebarNav'
-           data-track-action={`GoTo${label ? label.split(' ').join('') : ''}`}
-           data-track-label={label}
-           aria-label={label}
-        >
-            <svg className="left-icon" aria-hidden="true" focusable="false">
-              <use xlinkHref={`#${icon}`} />
-            </svg>
-            {showLabel && <span tabIndex="-1">{label}</span>}
-        </a>
-    )
-};
-
-export default NavLinkInline;

package/js/components/SideNav/Links/NavLinkSlideOut.jsx

@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-
-export default class NavLinkSlideOut extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isOpen: false
-        };
-        this._toggleMenu = this.toggleMenu.bind(this);
-    }
-
-    toggleMenu(evt) {
-        evt.preventDefault();
-        this.setState(state => ({ isOpen: !state.isOpen }));
-    }
-
-    render() {
-        const { url, rightIcon, leftIcon, label, listOfPractices, listOfOrganizations } = this.props;
-        const { isOpen } = this.state;
-
-        return (
-            <div className="link-slide-out">
-                <a href={url} className="switcher" onClick={evt => this._toggleMenu(evt)} aria-label={label}>
-                    <div className="link-body">
-                        <svg className="left-icon" aria-hidden="true" focusable="false">
-                            <use xlinkHref={`#${rightIcon}`} />
-                        </svg>
-                        <span>{label}</span>
-                    </div>
-                    <svg className={isOpen ? "right-icon rotated" : "right-icon"} aria-hidden="true" focusable="false">
-                        <use xlinkHref={`#${leftIcon}`} />
-                    </svg>
-                </a>
-                <div className={isOpen ? "switcher-content open" : "switcher-content"} aria-hidden={!isOpen}>
-                    <h2 className="practices-title">Practices</h2>
-                    <ul>
-                        {listOfPractices && listOfPractices.map(practice => <li>{practice}</li>)}
-                    </ul>
-                    <h2 className="practices-title">Accountable Care Organizations</h2>
-                    <ul>
-                        {listOfOrganizations && listOfOrganizations.map(organization => <li>{organization}</li>)}
-                    </ul>
-                </div>
-            </div>
-        )
-    }
-}