@madie/madie-design-system 1.0.0

package/components/Header/Header.md

@@ -0,0 +1,111 @@
+# Header Component
+
+## Config
+
+To populate the header's content, a `content` prop must provided. If one is not provided, the component will use `default-content.json`. The `content` prop is expected to be an array of objects where each object represents one of the header items (i.e. "About", "MIPs", etc.).
+
+Here is an example content structure:
+
+```json
+[
+  {
+    "name": "About",
+    "subtitle": "Quality Payment Program",
+    "href": "/about"
+  },
+  {
+    "name": "Resources",
+    "subtitle": "Help, Support and Resources",
+    "columns": [
+      [
+        {
+          "heading": "Resource column 1",
+          "items": [
+            {
+              "name": "Timeline and Important Deadlines",
+              "type": "link",
+              "href": "/"
+            }
+          ]
+        }
+      ],
+      [
+        {
+          "heading": "Resource column 2",
+          "items": [
+            {
+              "name": "Help and Support",
+              "type": "link",
+              "href": "/"
+            }
+          ]
+        }
+      ]
+    ]
+  }
+]
+```
+
+### Header Items
+
+Each of these objects represent an item in the header. These can be plain links or buttons that trigger a dropdown menu. If an `href` is provided instead of `columns`, the header item will be a link -- and vice versa.
+
+| Property name | Type     | Required | Description                                             |
+| ------------- | -------- | -------- | ------------------------------------------------------- |
+| `name`        | `String` | `true`   | Name shown for the header link                          |
+| `subtitle`    | `String` | `true`   | Text shown underneath the `name`                        |
+| `href`        | `String` | `false`  | URL link path if the header item is not a dropdown menu |
+| `columns`     | `Array`  | `false`  | Columns in the dropdown menu                            |
+
+### Menu Sections
+
+Each of these objects represent a section within a column in a header item menu.
+
+| Property name | Type     | Required | Description                          |
+| ------------- | -------- | -------- | ------------------------------------ |
+| `heading`     | `String` | `false`  | Title for link section               |
+| `items`       | `Array`  | `true`   | Each link/section in the header menu |
+
+### Menu Items
+
+Each of these objects represent a link within a header item menu.
+
+| Property name | Type     | Required | Default  | Description                                                |
+| ------------- | -------- | -------- | -------- | ---------------------------------------------------------- |
+| `name`        | `String` | `true`   | N/A      | Name shown for the header link                             |
+| `href`        | `String` | `true`   | N/A      | URL link path                                              |
+| `type`        | `String` | `false`  | `'link'` | URL link type. Can be `'link'`, `'button'`, or `'sublink'` |
+
+- `'link'`: Normal `<a>` tag link
+- `'button'`: Outline button
+- `'sublink'`: `<li>` link
+
+## 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 |
+
+## Authenticated Links
+
+| Link                         | Cookie                                   | Property                          |
+| ---------------------------- | ---------------------------------------- | --------------------------------- |
+| Account Home                 | qpp_auth_token present                   |                                   |
+| Eligibility & Reporting      | qpp_has_authorizations=true              |                                   |
+| Performance Feedback         | qpp_has_authorizations=true              |                                   |
+| Doctors & Clinicians Preview | qpp_has_non_registry_authorizations=true | showPhysicianCompareLink=true     |
+| Facility Based Preview       | qpp_has_authorizations=true              | showFacilityBasedPreviewLink=true |
+| Manage Access                | qpp_auth_token present                   |                                   |
+| Sign Out                     | qpp_auth_token present                   |                                   |
+
+## 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 Header only has the Sign Out link.

package/components/Header/Header.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Header from './HeaderUI';
+import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Header',
+  component: Header,
+  decorators: [withKnobs],
+};
+
+export const Example = () => (
+  <div id="qpp-nav-header">
+    <Header
+      isLoginEnabled={boolean('isLoginEnabled', true)}
+      skipToContentId={text('skipToContentId', '')}
+      includeSkipToSidebar={boolean('includeSkipToSidebar', false)}
+      showFacilityBasedPreviewLink={boolean(
+        'showFacilityBasedPreviewLink',
+        false
+      )}
+      showCancelButton={boolean('showCancelButton', false)}
+      handleCancel={action('handleCancel')}
+      showPhysicianCompareLink={boolean('showPhysicianCompareLink', false)}
+      performanceYear={number('performanceYear', 2019)}
+      feedbackPerformanceYear={text('feedbackPerformanceYear', '')}
+      fbpPerformanceYear={text('fbpPerformanceYear', '')}
+      showCovidLink={boolean('showCovidLink', false)}
+      isDevPre={boolean('isDevPre', false)}
+    />
+  </div>
+);

package/components/Header/HeaderAccountMenu.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cookie from 'cookie';
+import jwtDecode from 'jwt-decode';
+
+import { useHeaderState } from './hooks';
+import { setUtagLink } from './utag-helpers';
+import SessionDialogUI from '../SessionDialogUI';
+import {
+  performanceFeedbackUrl,
+  physicianCompareUrl,
+  dashboardUrl,
+  manageUrl,
+  submissionsUrl,
+  facilityBasedPreviewUrl,
+} from '../SideNav/helpers';
+import HeaderMenuItem from './HeaderMenuItem';
+
+const HeaderAccountMenu = ({
+  handleClick,
+  fbpPerformanceYear,
+  feedbackPerformanceYear,
+  isLoginEnabled,
+  isDevPre,
+  performanceYear,
+  showFacilityBasedPreviewLink,
+  showPhysicianCompareLink,
+}) => {
+  const cookies = cookie.parse(document.cookie);
+  const hasAuthToken = cookies.hasOwnProperty('qpp_auth_token');
+  const hasAuthorizations = cookies.qpp_has_authorizations === 'true';
+  const hasNonRegistryAuthorizations =
+    cookies.qpp_has_non_registry_authorizations === 'true';
+  const isDevPreAndNotAuthenticated = !hasAuthToken && isDevPre;
+  const { closeMenus, RouterLink } = useHeaderState();
+
+  if (!isLoginEnabled || isDevPreAndNotAuthenticated) {
+    return null;
+  }
+
+  // login link
+  if (!hasAuthToken) {
+    if (RouterLink) {
+      return (
+        <li onClick={handleClick} className="header-item-login login">
+          <RouterLink
+            className="menu-link"
+            to="/login"
+            onClick={() => {
+              closeMenus();
+              setUtagLink('main navbar', 'click', '/login');
+            }}
+            data-track-category="TopNav"
+            data-track-action="click"
+            data-track-label="Sign In"
+          >
+            <div className="nav-title">Sign In</div>
+            <div className="nav-description">
+              Manage Account <br />
+              and Register
+            </div>
+          </RouterLink>
+        </li>
+      );
+    }
+    return (
+      <li className="header-item-login login">
+        <a
+          className="menu-link"
+          href="/login"
+          data-track-category="TopNav"
+          data-track-action="click"
+          data-track-label="Sign In"
+          onClick={() => {
+            setUtagLink('main navbar', 'click', '/login');
+          }}
+        >
+          <div className="nav-title">Sign In</div>
+          <div className="nav-description">
+            Manage Account <br />
+            and Register
+          </div>
+        </a>
+      </li>
+    );
+  }
+
+  if (hasAuthToken) {
+    const { firstName } = jwtDecode(cookies.qpp_auth_token);
+    const additionalLinks = [];
+    if (hasAuthorizations) {
+      additionalLinks.push(
+        { type: 'link', href: dashboardUrl, name: 'Eligibility & Reporting' },
+        {
+          type: 'link',
+          href: performanceFeedbackUrl(
+            feedbackPerformanceYear || performanceYear
+          ),
+          name: 'Performance Feedback',
+        }
+      );
+      if (showPhysicianCompareLink && hasNonRegistryAuthorizations) {
+        additionalLinks.push({
+          type: 'link',
+          href: physicianCompareUrl,
+          name: 'Doctors & Clinicians Preview',
+        });
+      }
+      if (showFacilityBasedPreviewLink) {
+        additionalLinks.push({
+          type: 'link',
+          href: facilityBasedPreviewUrl(fbpPerformanceYear || performanceYear),
+          name: 'Facility Based Preview',
+        });
+      }
+    }
+    const columns = [
+      [
+        {
+          items: [
+            { type: 'link', href: submissionsUrl, name: 'Account Home' },
+            ...additionalLinks,
+            { type: 'link', href: manageUrl, name: 'Manage Access' },
+            { type: 'signout', name: 'Sign Out' },
+          ],
+        },
+      ],
+    ];
+    const devPreColumns = [
+      [{ items: [{ type: 'signout', name: 'Sign Out' }] }],
+    ];
+    return (
+      <>
+        <SessionDialogUI />
+        <HeaderMenuItem
+          hasMenu
+          menuName="Login"
+          name={firstName}
+          subtitle="My Account"
+          className="account-menu-item"
+          columns={isDevPre ? devPreColumns : columns}
+          rows={isDevPre ? devPreColumns : columns}
+        />
+      </>
+    );
+  }
+};
+
+HeaderAccountMenu.propTypes = {
+  isLoginEnabled: PropTypes.bool.isRequired,
+  showPhysicianCompareLink: PropTypes.bool,
+  showFacilityBasedPreviewLink: PropTypes.bool,
+  performanceYear: PropTypes.number,
+  fbpPerformanceYear: PropTypes.string,
+  feedbackPerformanceYear: PropTypes.string,
+  isDevPre: PropTypes.bool,
+  handleClick: PropTypes.func.isRequired,
+};
+
+HeaderAccountMenu.defaultProps = {
+  showPhysicianCompareLink: false,
+  showFacilityBasedPreviewLink: false,
+  performanceYear: 2017,
+  fbpPerformanceYear: null,
+  feedbackPerformanceYear: null,
+  isDevPre: false,
+};
+
+export default HeaderAccountMenu;

package/components/Header/HeaderCancel.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const HeaderCancel = ({ handleCancel }) => {
+  return (
+    <button className="header-cancel" onClick={handleCancel}>
+      Cancel
+    </button>
+  );
+};
+
+HeaderCancel.propTypes = {
+  handleCancel: PropTypes.func,
+};
+
+export default HeaderCancel;

package/components/Header/HeaderContainer.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import HeaderLogo from './HeaderLogo';
+import NotificationBanner from '../NotificationBanner';
+
+/**
+ * Accessibility enhancement that moves focus to an element for "Skip" links
+ * @param {Object} e - The native JS event
+ * @param {String} id - The HTML ID of the element to be focused
+ */
+function jumpToLink(e, id) {
+  e.preventDefault();
+  document.getElementById(id).focus();
+}
+
+const HeaderContainer = ({
+  children,
+  includeSkipToSidebar,
+  showCancelButton,
+  skipToContentId,
+  isIESupportPage,
+}) => (
+  <>
+    <a
+      className="skip"
+      onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
+      href={`#${skipToContentId || 'mainContent'}`}
+    >
+      Skip to content
+    </a>
+    {includeSkipToSidebar && (
+      <a
+        className="skip"
+        onClick={(e) => jumpToLink(e, 'qppSidebar')}
+        href="#qppSidebar"
+      >
+        Skip to sidebar
+      </a>
+    )}
+    {!isIESupportPage && <NotificationBanner />}
+    <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
+      <HeaderLogo />
+      {children}
+    </header>
+  </>
+);
+
+HeaderContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  includeSkipToSidebar: PropTypes.bool,
+  showCancelButton: PropTypes.bool,
+  skipToContentId: PropTypes.string,
+  isIESupportPage: PropTypes.bool,
+};
+HeaderContainer.defaultProps = {
+  includeSkipToSidebar: false,
+  showCancelButton: false,
+  skipToContentId: null,
+  isIESupportPage: false,
+};
+
+export default HeaderContainer;

package/components/Header/HeaderLogo.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { useHeaderState } from './hooks';
+
+const HeaderLogo = () => {
+  const { closeMenus, RouterLink } = useHeaderState();
+  if (RouterLink) {
+    return (
+      <RouterLink
+        className="header-logo"
+        to="/"
+        onClick={closeMenus}
+        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"
+        />
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      className="header-logo"
+      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>
+  );
+};
+
+export default HeaderLogo;

package/components/Header/HeaderMenuButton.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useHeaderState } from './hooks';
+import NavigationButtonIcon from './NavigationButtonIcon';
+import { setUtagLink } from './utag-helpers';
+
+const HeaderMenuButton = ({ href, name }) => {
+  const { RouterLink, closeMenus } = useHeaderState();
+  if (RouterLink) {
+    return (
+      <RouterLink
+        className="btn btn-navigation inverse-hover header-menu-btn"
+        to={href}
+        onClick={() => {
+          closeMenus();
+          setUtagLink('main navbar', 'click', href);
+        }}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+      >
+        {name}
+        <NavigationButtonIcon />
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      className="btn btn-navigation inverse-hover header-menu-btn"
+      href={href}
+      data-track-category="TopNav"
+      data-track-action="click"
+      data-track-label={name}
+      onClick={() => {
+        setUtagLink('main navbar', 'click', href);
+      }}
+    >
+      {name}
+      <NavigationButtonIcon />
+    </a>
+  );
+};
+
+HeaderMenuButton.propTypes = {
+  href: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuButton;