qpp-style 2.1.13 → 2.2.0-sm.0

package/js/components/Error/Collapsible.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-const Collapsible = (props) => {
-
-    let show = <span className="collapsible-show-label">{props.showLabel}</span>
-    let hide = props.hideLabel ? <span className="collapsible-hide-label">{props.hideLabel}</span> : ''
-    let isArray = Array.isArray(props.content);
-
-  return (
-    <div className="collapsible-container">
-        <button className="collapsible-summary" type="button" aria-expanded="false">
-            {show}
-            {hide}
-        </button>
-
-        <div className="collapsible-details" hidden>
-            { isArray
-                ? <ul className="items">
-                    {props.content.map((c) =>
-                        <li key={c.contentTitle}>
-                            <p><b>{c.contentTitle}</b></p>
-                            <p>{c.content}</p>
-                        </li>
-                    )}
-                    </ul>
-                : <div>
-                    <p><b>{props.contentTitle}</b></p>
-                    <p>{props.content}</p></div>
-            }
-        </div>
-    </div>
-  )
-};
-
-export default Collapsible;

package/js/components/Error/ErrorUI.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import Collapsible from './Collapsible';
-
-const ErrorUI = (props) => {
-
-  let errorTitle = `${props.type || 'Error'} ${props.code || ''}`;
-  let errorDetails = props.message;
-
-  return (
-    <section className="page-error">
-        <div className="responsive-container">
-            <h1>We're sorry.</h1>
-            <p className="h2">We cannot access this page.</p>
-                <Collapsible
-                    showLabel="Open technical details about the error"
-                    hideLabel="Close technical details about the error"
-                    contentTitle={errorTitle}
-                    content={errorDetails}/>
-        </div>
-    </section>
-  )
-};
-
-export default ErrorUI;

package/js/components/Error/error.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import ErrorUI from './ErrorUI';
-
-export default class ErrorPage {
-    constructor (options) {
-        render(
-            <ErrorUI type={options.type} code={options.code} message={options.message}/>,
-            options.rootElement);
-    }
-}

package/js/components/Footer/FooterUI.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-// Because this is purely a presentational component with no state management, we should
-// leverage functional stateless components to reduce noise when this is bundled.
-const Footer = (props) => {
-
-  return (
-        <footer>
-            <div className="build-version" id="build-version">{ props.buildVersion }</div>
-            <div className={props.isFullWidth ? "container-full-width" : "responsive-container"}>
-                <div className="row">
-                    <div className={props.isFullWidth ? "col-sm-12 col-md-8 col-lg-8" : "col-sm-8 col-md-9 col-lg-9"}>
-                        <div className="logo-container"><img src="/images/qpp_logo_reversed.png" alt="qpp logo" className="qpp-logo"/></div>
-                        <div className="links">
-                            <ul>
-                                <li><a href="/developers" data-track-category="FooterNav" data-track-action="OpenDeveloperTools" data-track-label="Quality Payment Program">Developer Tools</a></li>
-                                <li><a href="/about/resource-library" data-track-category="FooterNav" data-track-action="OpenEducationAndTools" data-track-label="Education and Tools">Resource Library</a></li>
-                                <li><a href="/about/help-and-support" data-track-category="FooterNav" data-track-action="OpenHelpAndSupport" data-track-label="Help and Support">Help and Support</a></li>
-                                <li><a href="#" data-toggle="modal" data-target="#modal-subscribe" data-track-category="FooterNav" data-track-action="OpenModal" data-track-label="Subscribe to Email Updates" className="subscribe-link">Subscribe to Updates</a></li>
-                            </ul>
-                            <ul className="small">
-                                <li><a href="/privacy" data-track-category="FooterNav" data-track-action="OpenPrivacyDisclaimer" data-track-label="Notice of Privacy and Disclaimer">CMS Privacy Notice</a></li>
-                                <li><a href="/accessibility" data-track-category="FooterNav" data-track-action="OpenAccessibility" data-track-label="Accessibility">Accessibility</a></li>
-                                <li><a href="mailto:QPP@cms.hhs.gov" className="email-link">Send Us Questions</a></li>
-                                <li>1-866-288-8292</li>
-                                <li>TTY: 1-877-715-6222</li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className={props.isFullWidth ? "col-sm-12 col-md-4 col-lg-4" : "col-sm-4 col-md-3 col-lg-3"}>
-                        <div className="hhs-logo-container"><img alt="Center for Medicaid &amp; Medicare Services" src="/images/hhs-logo-white.svg"/></div>
-                    </div>
-                </div>
-            </div>
-        </footer>
-    )
-};
-
-export default Footer;

package/js/components/Footer/footer.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import FooterUI from './FooterUI';
-
-export default class Footer {
-    constructor (options) {
-        if (options.hasOwnProperty('rootElement')) {
-            render(
-                <FooterUI buildVersion={buildVersion} isFullWidth={options.isFullWidth}/>,
-                options.rootElement);
-          } else {
-            render(
-                <FooterUI buildVersion={buildVersion}/>,
-                options);
-        }
-    }
-}

package/js/components/Header/HeaderAbout.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-export default (props) => {
-    return(
-            <li className="dropdown" id="about">
-                <a className="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                    <div className="content-wrapper">
-                        <div className="dropdown-title">About</div>
-                        <div className="dropdown-description">The Quality <span className="lg-menu-break" />Payment Program
-                        </div>
-                    </div>
-                </a>
-                <div className="dropdown-menu single-column">
-                    <div className="row">
-                        <div className="col-sm-12">
-                            <ul>
-                                <li className="dropdown-header">Program Information</li>
-                                <li><a id="help-and-support" href="/about/help-and-support">Help and Support</a></li>
-                                <li><a id="resource-library" href="/about/resource-library">Resource Library</a></li>
-                                <li><a id="surps" href="/about/small-underserved-rural-practices">Small, Underserved, and Rural Practices</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </li>
-    );
-}

package/js/components/Header/HeaderAccountMenu.jsx

@@ -1,147 +0,0 @@
-import React from 'react';
-import cookie from 'cookie';
-import jwtDecode from 'jwt-decode';
-import InfoModal from '../InfoModal'
-import SessionDialogUI from '../SessionDialogUI'
-import { LogoutSession } from '../../session';
-
-export default class HeaderAccountMenu extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            isWarningDisplayed: false
-        }
-
-        // This sets the first name for the account dropdown
-        // which is an indicator of being authenticated
-        let cookies = cookie.parse(document.cookie);
-        if (cookies.hasOwnProperty('qpp_auth_token')) {
-            const { data } = jwtDecode(cookies.qpp_auth_token);
-            this.state.firstName = data.firstName;
-        } else {
-            this.state.firstName = null;
-        }
-
-        this.hideLogoutWarning = this.hideLogoutWarning.bind(this);
-        this.showLogoutWarning = this.showLogoutWarning.bind(this);
-        this.logout = this.logout.bind(this);
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        let cookies = cookie.parse(document.cookie);
-
-        if (this.state.firstName && !cookies.hasOwnProperty('qpp_auth_token')) {
-          // In this case, you were logged in and have a name set, but have logged out.
-          // Desired behavior here is to send user to the logout confirmation screen
-
-          LogoutSession(window);
-          return false;
-        }
-        return true;
-    }
-
-    logout() {
-        LogoutSession(window);
-    }
-
-    showLogoutWarning() {
-        this.setState({ isWarningDisplayed: true });
-    }
-
-    hideLogoutWarning() {
-        this.setState({ isWarningDisplayed: false });
-    }
-
-    render() {
-
-        const infoBullets = {
-          header: 'Performance Year 2017 Submission Window Dates',
-          bullets: [
-            'January 2 - March 31, 2018 for standard reporting',
-            'January 22 - March 16, 2018 for CMS Web Interface quality reporting'
-          ]
-        };
-
-        if (this.state.firstName) {
-            return (
-                <li className="dropdown account">
-                    <a className="dropdown-toggle"
-                        href="#"
-                        data-toggle='dropdown'
-                        role='button'
-                        aria-haspopup='true'
-                        aria-expanded='false'>
-                        <div className="content-wrapper">
-                            <div className="dropdown-title">
-                                {this.state.firstName}
-                            </div>
-                            <div className="dropdown-description">
-                                My Account
-                            <span className="lg-menu-break">&nbsp;</span>
-                            </div>
-                        </div>
-                    </a>
-                    <SessionDialogUI />
-                    <InfoModal isOpen={this.state.isWarningDisplayed}
-                        bodyBullets={infoBullets}
-                        primaryAction="Sign Out"
-                        primaryCallback={this.logout}
-                        secondaryAction="Keep me signed in"
-                        secondaryCallback={this.hideLogoutWarning}
-                        closeXAction={this.hideLogoutWarning}
-                        titleText="You are about to be signed out"
-                        bodyText="You can sign back in to update your data any time the submission window is open"
-                     />
-                    <div className="dropdown-menu single-column">
-                        <div className="row">
-                            <div className="col-sm-12">
-                                <ul>
-                                    <li className="dropdown-header">
-                                        My Account
-                                    </li>
-                                    <li>
-                                        <a className="my-account"
-                                            href="/user/dashboard">
-                                            Account Dashboard
-                                        </a>
-                                    </li>
-                                    { this.props.showManageAccountLink &&
-                                      <li>
-                                          <a className="manage-user-access"
-                                              href="/user/manage-access">
-                                              Manage User Access
-                                          </a>
-                                      </li>
-                                    }
-                                    <li>
-                                        <button className="logout"
-                                            onClick={this.showLogoutWarning}>
-                                            Sign Out
-                                        </button>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </li>
-            );
-        }
-        else {
-            return (
-                <li className="login">
-                    <a href="/login">
-                        <div className="content-wrapper">
-                            <div className="nav-title">
-                                Sign In
-                            </div>
-                            <div className="nav-description">
-                                Submit and <span className="lg-menu-break">Manage Data</span>
-                            </div>
-                        </div>
-                    </a>
-                </li>
-            );
-        }
-    }
-}

package/js/components/Header/HeaderApms.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-export default (props) => {
-    return(
-            <li className="dropdown" id="apms">
-                <a className="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                    <div className="content-wrapper">
-                        <div className="dropdown-title">APMs</div>
-                        <div className="dropdown-description">Alternative Payment <span className="lg-menu-break" />Models
-                        </div>
-                    </div>
-                </a>
-                <div className="dropdown-menu single-column">
-                    <div className="row">
-                        <div className="col-sm-12">
-                            <ul>
-                                <li className="dropdown-header">The Track</li>
-                                <li><a id="apms-overview" href="/apms/overview">APMs Overview</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </li>
-    );
-}

package/js/components/Header/HeaderMips.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-export default (props) => {
-    return(
-            <li className="dropdown" id="mips">
-                <a className="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                    <div className="content-wrapper">
-                        <div className="dropdown-title">MIPS</div>
-                        <div className="dropdown-description">Merit-based Incentive <span className="lg-menu-break" />Payment System
-                        </div>
-                    </div>
-                </a>
-                <div className="dropdown-menu double-column">
-                    <div className="row">
-                        <div className="col-sm-6">
-                            <ul>
-                                <li className="dropdown-header">The Track</li>
-                                <li><a id="mips-overview" href="/mips/overview">MIPS Overview</a></li>
-                                <li><a id="individual-or-group" href="/mips/individual-or-group-participation">Individual
-                                                or Group Participation</a></li>
-                                <li><a id="what-to-report" href="/mips/what-to-report">What To Report</a></li>
-                            </ul>
-                        </div>
-                        <div className="col-sm-6">
-                            <ul>
-                                <li className="dropdown-header">Explore Measures</li>
-                                <li><a id="quality-measures" href="/mips/quality-measures">Quality Measures</a></li>
-                                <li><a id="advancing-care-information" href="/mips/advancing-care-information">Advancing
-                                                Care Information</a></li>
-                                <li><a id="improvement-activities" href="/mips/improvement-activities">Improvement
-                                                Activities</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="row">
-                        <div className="col-xs-12"><a className="btn btn-tertiary btn-inverse" href="/participation-lookup" data-track-category="MainContent"
-                                data-track-action="Click" data-track-label="Check Now">Check Your Participation Status</a>
-                        </div>
-                    </div>
-                </div>
-            </li>
-    );
-}

package/js/components/Header/HeaderUI.jsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import HeaderAbout from './HeaderAbout.jsx';
-import HeaderApms from './HeaderApms.jsx';
-import HeaderMips from './HeaderMips.jsx';
-import HeaderAccountMenu from './HeaderAccountMenu.jsx';
-
-export default class HeaderUI extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this._jumpToLink = this.jumpToLink.bind(this);
-
-        this.state = {
-            isLoginEnabled: props.isLoginEnabled
-        }
-    }
-
-    // Just using the hash in the href wasn't working properly
-    // in all browsers, so we manually focus instead
-    jumpToLink(e, id) {
-        e.preventDefault();
-        document.getElementById(id).focus();
-    }
-
-    render() {
-        return(
-            <div>
-                <a className="skip"
-                    onClick={(e) => this._jumpToLink(e, `${this.props.skipToContentId || 'mainContent'}`)}
-                    href={`#${this.props.skipToContentId || 'mainContent'}`}>Skip to content</a>
-                {
-                    this.props.includeSkipToSidebar &&
-                    <a className="skip"
-                        onClick={(e) => this._jumpToLink(e, 'qppSidebar')}
-                        href="#qppSidebar">Skip to sidebar</a>
-                }
-                <header id="top">
-                    <nav className="navbar navbar-default navbar-fixed-top">
-                        <div className="navbar-header">
-                            <div className="header-mobile-brand">
-                                <a className="header-brand"
-                                    href="/"
-                                    data-track-category="HeaderNav"
-                                    data-track-action="OpenQPPHome"
-                                    data-track-label="Quality Payment Program">
-                                    <img className="qpp-logo"
-                                        src="/images/qpp_logo_rgb_color.png"
-                                        alt="qpp logo"/>
-                                </a>
-                                <a className="help"
-                                    href="tel:1-866-288-8292"
-                                    data-track-category="MainContent" data-track-action="CallQPPServiceCenter"
-                                    data-track-label="QPP Service Center Phone">
-                                    <div className="help-icon" />
-                                    <span>Help</span>
-                                </a>
-                            </div>
-                            <button className="header-mobile-btn navbar-toggle collapsed"
-                                type="button"
-                                data-toggle="collapse"
-                                data-target="#nav-mobile"
-                                aria-expanded="false"
-                                aria-controls="nav-mobile">
-                                <div className="icon">
-                                    <span className="icon-bar" />
-                                    <span className="icon-bar" />
-                                    <span className="icon-bar" />
-                                </div>
-                                <div className="toggle-text">Menu</div>
-                            </button>
-                        </div>
-                        <div className="navbar-collapse collapse"
-                            id="nav-mobile"
-                            aria-expanded="true">
-                            <ul className="nav navbar-nav navbar-right">
-                                <HeaderMips />
-                                <HeaderApms />
-                                <HeaderAbout />
-                                {this.props.isLoginEnabled && <HeaderAccountMenu showManageAccountLink={this.props.showManageAccountLink} />}
-                            </ul>
-                        </div>
-                    </nav>
-                </header>
-            </div>
-        );
-    }
-}

package/js/components/Header/header.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import HeaderUI from './HeaderUI.jsx';
-
-export default class Header {
-    constructor(options) {
-        render(
-            <HeaderUI
-                isLoginEnabled={options.isLoginEnabled}
-                skipToContentId={options.skipToContentId}
-                showManageAccountLink={options.showManageAccountLink}
-                includeSkipToSidebar={options.includeSkipToSidebar} />,
-            options.rootElement);
-    }
-}
-

package/js/components/InfoModal/index.jsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import Modal from 'react-modal';
-import SVGInline from "react-svg-inline"
-import SVGIcons from '../../../_includes/svg-definitions.svg';
-
-export default (props) => {
-    Modal.setAppElement('body > *:not(.ReactModalPortal)');
-
-    const displayBullets = (bullets) => {
-      return (
-        <div className="list-section">
-          <p>{bullets.header}</p>
-          <ul>
-            {bullets.bullets.map((item) => <li>{item}</li>)}
-          </ul>
-        </div>
-      )
-    };
-
-    return (
-        <Modal
-            role="alertdialog"
-            isOpen={props.isOpen}
-            onRequestClose={props.onRequestClose}
-            contentLabel={props.titleText}
-            className="info-modal-content"
-            overlayClassName="info-modal-overlay">
-            <SVGInline svg={ typeof SVGIcons === 'string' ? SVGIcons : '' } />
-            <button
-              className="closeModal"
-              aria-label="Close modal"
-              onClick={props.closeXAction}
-            >
-              <svg
-                className="close-icon"
-                aria-hidden="true"
-              >
-                    <use xlinkHref="#closex" />
-                </svg>
-            </button>
-            <h1>
-                { props.titleText }
-            </h1>
-            <p className="body-text">
-                { props.bodyText }
-            </p>
-            { props.bodyBullets && displayBullets(props.bodyBullets) }
-            <div className="actions">
-                <button
-                    className="btn primary-action"
-                    type="button"
-                    onClick={props.primaryCallback}>
-                {props.primaryAction}
-                </button>
-                <button
-                    className="btn secondary-action"
-                    type="button"
-                    onClick={props.secondaryCallback}>
-                {props.secondaryAction}
-                </button>
-            </div>
-        </Modal>
-    );
-}