qpp-style 9.34.0 → 9.34.2-beta.0

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/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(() => {
@@ -39,7 +39,7 @@ const Accordion = (props) => {
     <div className="accordion-section" data-testid="accordion">
       <button
         className={`accordion ${setActive} ${
-          setActive && props.isSticky ? 'sticky' : ''
+          setActive && props.isSticky ? "sticky" : ""
         }`}
         aria-label={props.title}
         aria-pressed={ariaPressed}
@@ -89,7 +89,7 @@ Accordion.propTypes = {
 };
 
 Accordion.defaultProps = {
-  title: '',
+  title: "",
   isOpen: false,
   isSticky: false,
 };

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.

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>
@@ -67,7 +67,7 @@ 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),

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,7 +14,7 @@ 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}

package/components/Footer/FooterUI.jsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import InfoTip from '../Infotip/Infotip';
-import Subscribe from './Subscribe';
-import SocialLinks from './SocialLinks';
-import pjson from '../../package.json';
-import { OpenInNewIcon } from '../../lib/SvgComponents';
+import React from "react";
+import InfoTip from "../Infotip/Infotip";
+import Subscribe from "./Subscribe";
+import SocialLinks from "./SocialLinks";
+import pjson from "../../package.json";
+import { OpenInNewIcon } from "../../lib/SvgComponents";
 
 const infoTipLabel =
-  'When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.';
+  "When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.";
 const { version: buildVersion } = pjson;
 
 const FooterUI = () => (
@@ -16,7 +16,7 @@ const FooterUI = () => (
         <hr />
         <p>
           <strong>Help shape the future of QPP.</strong> Participate in a user
-          feedback session.{' '}
+          feedback session.{" "}
           <a className="email-note-link" href="/about/hcd-research">
             Sign up now
           </a>
@@ -152,7 +152,7 @@ const FooterUI = () => (
                 CMS Privacy Notice
               </a>
             </li>
-            <li className="divider"></li>{' '}
+            <li className="divider"></li>{" "}
             <li>
               <a
                 href="/accessibility"
@@ -164,7 +164,7 @@ const FooterUI = () => (
                 Accessibility
               </a>
             </li>
-            <li className="divider"></li>{' '}
+            <li className="divider"></li>{" "}
             <li>
               <a
                 aria-label="Download Adobe Reader"

package/components/Footer/SocialLinks.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const SocialLinks = () => (
   <div className="social-container">

package/components/Footer/Subscribe.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const Subscribe = () => (
   <div className="subscriber-form">

package/components/Footer/footer.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { render } from 'react-dom';
-import FooterUI from './FooterUI';
+import React from "react";
+import { render } from "react-dom";
+import FooterUI from "./FooterUI";
 
 /**
  * Renders the QPP Footer content.
@@ -11,7 +11,7 @@ export default class Footer {
    * @param {HTMLElement} options.rootElement - Elem inside which to render
    */
   constructor(options) {
-    if (options.hasOwnProperty('rootElement')) {
+    if (options.hasOwnProperty("rootElement")) {
       render(<FooterUI />, options.rootElement);
     } else {
       render(<FooterUI />, options);