qpp-style 0.0.10 → 1.0.0-bv.0

package/.editorconfig

@@ -6,7 +6,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

package/.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:react/recommended'],
-  parser: '@babel/eslint-parser',
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  parser: "@babel/eslint-parser",
   parserOptions: {
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
     },
@@ -15,17 +15,18 @@ module.exports = {
     mocha: true,
   },
   rules: {
-    'no-unused-vars': [
-      'error',
+    "no-unused-vars": [
+      "error",
       {
-        args: 'none',
+        args: "none",
       },
     ],
-    'linebreak-style': ['error', 'unix'],
-    'no-console': 0,
-    'no-prototype-builtins': [0],
+    "linebreak-style": ["error", "unix"],
+    "no-console": 0,
+    "no-prototype-builtins": [0],
+    "react/no-deprecated": [0],
   },
   settings: {
-    react: { version: 'detect' },
+    react: { version: "detect" },
   },
 };

package/.prettierrc

@@ -0,0 +1 @@
+{}

package/README.md

@@ -43,3 +43,18 @@ npm publish
 ```
 
 7. Once published successfully, merge into main.
+
+The Side Nav contains multiple item array types: divider, container, linkBack, linkHome, practiceDetails, individualDetails, linkDrawer, custom, chart, and switchLink.
+
+| Item Array Type   | Description                                                                                                                                                                                                                                                                                    |
+|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| divider           | <hr> element that is located above and below the practice container.                                                                                                                                                                                                                           |
+| container         | gets Dynamic Content of multiple items and contains the linkDrawer item. Level One and Level Two content are located in this container.                                                                                                                                                        |
+| linkBack          | <button> that links the user back to a URL. This uses a chevron Left icon.                                                                                                                                                                                                                     |
+| linkHome          | <a> tag element which sends the user back to the “Account Home” page /user/submissions. This uses the home icon SVG and is located at the top of the side nav.                                                                                                                                 |
+| practiceDetails   | <div> element with the class name practice-container. Inside this container is the <h2> element which includes the Practice Name and the <p> element which is the Practice Tin. The Practice Tin shows either the CPC+ ID, PCF ID, APM Entity ID, VG ID, or Practice Tin.                      |
+| individualDetails | <div> element with the class name “individual-container”. This parent element contains two other elements which are the <h3> Individual Name and the <p> Individual NPI.                                                                                                                       |
+| linkDrawer        | This is the most complex item type. This item displays the Level One and Level Two <button> elements which contain navigation links depending on each page as well as specific SVG icons. Depending on the page there can be multiple links to the user can access quickly using the side nav. |
+| custom            | This option is for sanitized HTML content. This custom HTML will be cleaned of any potentially harmful elements that could compromise the security of the web app.                                                                                                                             |
+| chart             | This option uses the ScoreChart component to display Chart Data on the Side Nav. This data includes categories from Quality Measures, Advancing Care Info, Promoting Interoperability, Improvement Activities, and Cost.                                                                       |
+| switchLink        | This is an implementation of the “Switch Practice” button for the Side Nav. Clicking 'Switch Practice' will take the user back to the TIN list for the part of the application they are viewing.                                                                                               |

package/components/Accordion/index.jsx

@@ -1,30 +1,30 @@
-import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Chevron } from '../../lib/Chevron.jsx';
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Chevron } from "../../lib/Chevron.jsx";
 
 const Accordion = (props) => {
   const content = useRef(null);
-  const [setActive, setActiveState] = useState(props.isOpen ? 'active' : '');
-  const ariaPressed = setActive ? 'true' : 'false';
+  const [setActive, setActiveState] = useState(props.isOpen ? "active" : "");
+  const ariaPressed = setActive ? "true" : "false";
   const getHeight = (node) => {
     if (node) {
       return `${node.scrollHeight}px`;
     }
-    return 'auto';
+    return "auto";
   };
-  const height = setActive ? getHeight(content.current) : '0px';
-  const rotate = setActive ? 'accordion-icon rotate' : 'accordion-icon';
+  const height = setActive ? getHeight(content.current) : "0px";
+  const rotate = setActive ? "accordion-icon rotate" : "accordion-icon";
 
   function toggleAccordion() {
-    setActiveState(setActive === '' ? 'active' : '');
+    setActiveState(setActive === "" ? "active" : "");
   }
 
   function openAccordion() {
-    setActiveState('active');
+    setActiveState("active");
   }
 
   function closeAccordion() {
-    setActiveState('');
+    setActiveState("");
   }
 
   useEffect(() => {
@@ -38,7 +38,9 @@ const Accordion = (props) => {
   return (
     <div className="accordion-section" data-testid="accordion">
       <button
-        className={`accordion ${setActive}`}
+        className={`accordion ${setActive} ${
+          setActive && props.isSticky ? "sticky" : ""
+        }`}
         aria-label={props.title}
         aria-pressed={ariaPressed}
         aria-expanded={ariaPressed}
@@ -83,11 +85,13 @@ Accordion.propTypes = {
   centerItem: PropTypes.string,
   rightItem: PropTypes.string,
   isOpen: PropTypes.bool,
+  isSticky: PropTypes.bool,
 };
 
 Accordion.defaultProps = {
-  title: '',
+  title: "",
   isOpen: false,
+  isSticky: false,
 };
 
 export default Accordion;

package/components/Alert/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 const Alert = ({
   title,
@@ -9,7 +9,7 @@ const Alert = ({
   className,
   ...rest
 }) => {
-  const HeadingComponent = title?.headingLevel || 'h2';
+  const HeadingComponent = title?.headingLevel || "h2";
   return (
     <div
       className={`qpp-c-alert qpp-c-alert--${variant} ${className}`}
@@ -19,7 +19,7 @@ const Alert = ({
       <div className="qpp-c-alert__body">
         {title && (
           <HeadingComponent className="h4 qpp-c-alert__heading">
-            {typeof title === 'object' ? title.text : title}
+            {typeof title === "object" ? title.text : title}
           </HeadingComponent>
         )}
         {description && <p className="qpp-c-alert__text">{description}</p>}
@@ -40,14 +40,14 @@ Alert.propTypes = {
       headingLevel: PropTypes.string,
     }),
   ]),
-  variant: PropTypes.oneOf(['info', 'warning', 'success', 'error']),
+  variant: PropTypes.oneOf(["info", "warning", "success", "error"]),
 };
 Alert.defaultProps = {
   children: null,
-  className: '',
+  className: "",
   description: null,
   title: null,
-  variant: 'info',
+  variant: "info",
 };
 
 export default Alert;

package/components/Breadcrumb/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 const Breadcrumb = ({
   breadcrumbClass,
@@ -11,7 +11,7 @@ const Breadcrumb = ({
   return (
     <nav
       className={`qpp-c-breadcrumbs ${
-        !dark ? 'qpp-c-breadcrumbs--light' : ''
+        !dark ? "qpp-c-breadcrumbs--light" : ""
       } ${breadcrumbClass}`}
       aria-label="Breadcrumbs"
     >
@@ -51,7 +51,7 @@ const Breadcrumb = ({
               <li
                 key={crumb}
                 className={`${
-                  i === crumbs.length - 1 ? 'sr-only' : ''
+                  i === crumbs.length - 1 ? "sr-only" : ""
                 } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}
                 aria-current="page"
               >
@@ -74,7 +74,7 @@ Breadcrumb.propTypes = {
 };
 
 Breadcrumb.defaultProps = {
-  breadcrumbClass: '',
+  breadcrumbClass: "",
   dark: false,
   RouterLink: null,
   routerExcludedLinks: [],

package/components/Button/index.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-const VARIANTS = ['secondary', 'outline', 'danger', 'white'];
-const SIZES = ['big'];
+const VARIANTS = ["secondary", "outline", "danger", "white"];
+const SIZES = ["big"];
 
 const Button = ({
   children,
@@ -15,16 +15,16 @@ const Button = ({
   type,
   ...rest
 }) => {
-  let btnClass = 'qpp-c-button';
+  let btnClass = "qpp-c-button";
 
   if (VARIANTS.includes(variant)) {
-    btnClass = btnClass.concat(' ', `qpp-c-button--${variant}`);
+    btnClass = btnClass.concat(" ", `qpp-c-button--${variant}`);
   }
   if (SIZES.includes(size)) {
-    btnClass = btnClass.concat(' ', `qpp-c-button--${size}`);
+    btnClass = btnClass.concat(" ", `qpp-c-button--${size}`);
   }
   if (className) {
-    btnClass = btnClass.concat(' ', className);
+    btnClass = btnClass.concat(" ", className);
   }
 
   if (href) {
@@ -32,7 +32,7 @@ const Button = ({
       <a
         href={href}
         data-testid="ds-btn"
-        className={btnClass || ''}
+        className={btnClass || ""}
         onClick={onClick}
       >
         {children}
@@ -42,7 +42,7 @@ const Button = ({
   return (
     <button
       data-testid="ds-btn"
-      className={btnClass || ''}
+      className={btnClass || ""}
       onClick={onClick}
       disabled={loading}
       type={type}
@@ -66,16 +66,16 @@ Button.propTypes = {
 
 Button.defaultProps = {
   children: false,
-  className: '',
-  href: '',
+  className: "",
+  href: "",
   loading: false,
   onClick: () => null,
   size: null,
-  type: 'button',
+  type: "button",
   variant: null,
 };
 
-export const TextButton = ({ className = '', ...props }) => (
+export const TextButton = ({ className = "", ...props }) => (
   <Button className={`qpp-c-button--text ${className}`} {...props} />
 );
 
@@ -84,7 +84,7 @@ TextButton.propTypes = {
 };
 
 TextButton.defaultProps = {
-  className: '',
+  className: "",
 };
 
 export default Button;

package/components/Details/DetailsIcons.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 export const Add = ({ iconText }) => (
   <>
@@ -12,7 +12,7 @@ export const Add = ({ iconText }) => (
       focusable="false"
     >
       <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-    </svg>{' '}
+    </svg>{" "}
     {iconText}
   </>
 );

package/components/Details/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Add, Remove } from './DetailsIcons';
+import React from "react";
+import PropTypes from "prop-types";
+import { Add, Remove } from "./DetailsIcons";
 
 const Details = ({ children, title, variant, className, ...rest }) => {
-  if (variant === 'header') {
+  if (variant === "header") {
     return (
       <details className="qpp-c-details qpp-c-details--header">
         <summary>
@@ -24,7 +24,7 @@ const Details = ({ children, title, variant, className, ...rest }) => {
     <details className={`qpp-c-details ${className}`} {...rest}>
       <summary
         className={
-          variant === 'text-button' ? 'qpp-c-button qpp-c-button--text' : ''
+          variant === "text-button" ? "qpp-c-button qpp-c-button--text" : ""
         }
       >
         <Add />
@@ -39,7 +39,7 @@ const Details = ({ children, title, variant, className, ...rest }) => {
 Details.propTypes = {
   children: PropTypes.node,
   title: PropTypes.node,
-  variant: PropTypes.oneOf(['header', 'text-button']),
+  variant: PropTypes.oneOf(["header", "text-button"]),
   className: PropTypes.string,
 };
 
@@ -47,7 +47,7 @@ Details.defaultProps = {
   children: false,
   title: null,
   variant: null,
-  className: '',
+  className: "",
 };
 
 export default Details;

package/components/Dropdown/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 const Dropdown = ({
   className,
@@ -18,19 +18,19 @@ const Dropdown = ({
   ...rest
 }) => {
   const dropdownClass = [
-    'qpp-c-dropdown',
-    size === 'big' && 'qpp-c-dropdown--big',
+    "qpp-c-dropdown",
+    size === "big" && "qpp-c-dropdown--big",
     className,
   ]
     .filter(Boolean)
-    .join(' ');
+    .join(" ");
 
   return (
     <select
       id={id}
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
-      className={dropdownClass || ''}
+      className={dropdownClass || ""}
       onChange={onChange}
       data-testid={dataTestId}
       name={name}
@@ -61,14 +61,14 @@ Dropdown.propTypes = {
   name: PropTypes.string,
   dataType: PropTypes.string,
   disabled: PropTypes.bool,
-  size: PropTypes.oneOf(['big']),
+  size: PropTypes.oneOf(["big"]),
   options: PropTypes.array,
   parentElement: PropTypes.string,
 };
 
 Dropdown.defaultProps = {
   children: false,
-  className: 'qpp-u-width--100',
+  className: "qpp-u-width--100",
   id: null,
   ariaLabelledBy: null,
   ariaLabel: null,
@@ -79,7 +79,7 @@ Dropdown.defaultProps = {
   disabled: false,
   size: null,
   options: [],
-  parentElement: 'span',
+  parentElement: "span",
 };
 
 export default Dropdown;

package/components/DropdownButton/Menu.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Menu as AriaKitMenu } from 'ariakit/menu';
+import React from "react";
+import PropTypes from "prop-types";
+import { Menu as AriaKitMenu } from "ariakit/menu";
 
 function Menu({ state, className, children, ...props }) {
   return (
@@ -18,7 +18,7 @@ Menu.propTypes = {
 
 Menu.defaultProps = {
   className:
-    'qpp-c-dropdown-menu qpp-c-dropdown-menu__box qpp-c-dropdown-menu__list',
+    "qpp-c-dropdown-menu qpp-c-dropdown-menu__box qpp-c-dropdown-menu__list",
   children: null,
 };
 

package/components/DropdownButton/MenuButton.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MenuButton as AriaKitButton } from 'ariakit/menu';
+import React from "react";
+import PropTypes from "prop-types";
+import { MenuButton as AriaKitButton } from "ariakit/menu";
 
 function MenuButton({ state, className, iconExist, children, ...props }) {
   const dropDownIsOpen = state.open;
 
-  const CheveronUpIcon = 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z';
-  const CheveronDownIcon = 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z';
+  const CheveronUpIcon = "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z";
+  const CheveronDownIcon = "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z";
 
   return (
     <AriaKitButton state={state} className={className} {...props}>
-      {children}{' '}
+      {children}{" "}
       {iconExist && (
         <svg
           className="qpp-icon-mat qpp-icon-inline--lg"
@@ -33,7 +33,7 @@ MenuButton.propTypes = {
 };
 
 MenuButton.defaultProps = {
-  className: 'qpp-c-button',
+  className: "qpp-c-button",
   iconExist: true,
   children: null,
 };

package/components/DropdownButton/MenuItem.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MenuItem as AriaKitMenuItem } from 'ariakit/menu';
+import React from "react";
+import PropTypes from "prop-types";
+import { MenuItem as AriaKitMenuItem } from "ariakit/menu";
 
 function MenuItem({ as, className, children, ...props }) {
   return (
@@ -17,8 +17,8 @@ MenuItem.propTypes = {
 };
 
 MenuItem.defaultProps = {
-  as: 'li',
-  className: 'qpp-c-dropdown-menu__item',
+  as: "li",
+  className: "qpp-c-dropdown-menu__item",
   children: null,
 };
 

package/components/DropdownButton/MenuItemLink.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MenuItem as AriaKitMenuItem } from 'ariakit/menu';
+import React from "react";
+import PropTypes from "prop-types";
+import { MenuItem as AriaKitMenuItem } from "ariakit/menu";
 
 function MenuItemLink({ as, className, children, ...props }) {
   return (
@@ -19,8 +19,8 @@ MenuItemLink.propTypes = {
 };
 
 MenuItemLink.defaultProps = {
-  as: 'a',
-  className: 'qpp-c-dropdown-menu__item',
+  as: "a",
+  className: "qpp-c-dropdown-menu__item",
   children: null,
 };
 

package/components/Error/Collapsible.jsx

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
 class Collapsible extends Component {
   constructor(props) {
@@ -32,7 +32,7 @@ class Collapsible extends Component {
         <span className="collapsible-hide-label">{this.props.hideLabel}</span>
       );
     } else {
-      return '';
+      return "";
     }
   }
 

package/components/Error/ErrorUI.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import Collapsible from './Collapsible';
-import PropTypes from 'prop-types';
+import React from "react";
+import Collapsible from "./Collapsible";
+import PropTypes from "prop-types";
 
 const ErrorUI = (props) => {
-  let errorTitle = `${props.type || 'Error'} ${props.code || ''}`;
+  let errorTitle = `${props.type || "Error"} ${props.code || ""}`;
   let errorDetails = props.message;
 
   return (

package/components/Error/error.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { render } from 'react-dom';
-import ErrorUI from './ErrorUI';
+import React from "react";
+import { render } from "react-dom";
+import ErrorUI from "./ErrorUI";
 
 /**
  * Renders the QPP Error Page content.
@@ -20,7 +20,7 @@ export default class ErrorPage {
         code={options.code}
         message={options.message}
       />,
-      options.rootElement
+      options.rootElement,
     );
   }
 }

package/components/FlashNotification/FlashNotificationUI.jsx

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import reactDOM from 'react-dom';
-import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import reactDOM from "react-dom";
+import { CloseXIcon } from "../../lib/SvgComponents.jsx";
 
 class FlashNotification extends Component {
   constructor(props) {
@@ -16,14 +16,14 @@ class FlashNotification extends Component {
       <div
         className={
           this.state.isClosed
-            ? 'flash-notification notification-closed'
-            : 'flash-notification'
+            ? "flash-notification notification-closed"
+            : "flash-notification"
         }
         ref={(elem) => {
           this.element = elem;
         }}
       >
-        <div className={this.props.success ? 'success' : 'error'}>
+        <div className={this.props.success ? "success" : "error"}>
           <div className="icon"></div>
           <div className="text-content">
             <p className="title-text">{this.props.titleText}</p>
@@ -51,14 +51,14 @@ class FlashNotification extends Component {
       function () {
         this.setState({ isClosed: false });
       }.bind(this),
-      250
+      250,
     );
 
     this.timer = setTimeout(
       function () {
         this._fadeOutNotification();
       }.bind(this),
-      10000
+      10000,
     );
   }
 
@@ -67,11 +67,11 @@ class FlashNotification extends Component {
     setTimeout(
       function () {
         reactDOM.unmountComponentAtNode(this.element.parentElement);
-        if (typeof this.props.onClose === 'function') {
+        if (typeof this.props.onClose === "function") {
           this.props.onClose();
         }
       }.bind(this),
-      500
+      500,
     );
   }
 

package/components/FlashNotification/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { render } from 'react-dom';
-import FlashNotificationUI from './FlashNotificationUI';
+import React from "react";
+import { render } from "react-dom";
+import FlashNotificationUI from "./FlashNotificationUI";
 
 /**
  * Renders the Confirmation/Error Flash Component
@@ -14,14 +14,14 @@ export default class FlashNotification {
    * @param {HTMLElement} options.rootElement - Elem inside which to render
    */
   constructor(options) {
-    if (options.hasOwnProperty('rootElement')) {
+    if (options.hasOwnProperty("rootElement")) {
       render(
         <FlashNotificationUI
           success={options.success}
           titleText={options.titleText}
           bodyText={options.bodyText}
         />,
-        options.rootElement
+        options.rootElement,
       );
     } else {
       render(<FlashNotificationUI />, options);