qpp-style 9.45.0 → 9.45.2

package/.babelrc

@@ -1,10 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-env"
-  ],
-  "plugins": [
-    "transform-es2015-modules-umd",
-    "transform-class-properties"
-  ]
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
+  "plugins": ["transform-es2015-modules-umd"]
 }

package/.browserlistrc

@@ -0,0 +1,3 @@
+"browserlist": [
+  "defaults"
+]

package/components/Accordion/index.jsx

@@ -2,9 +2,17 @@ import React, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Chevron } from "../../lib/Chevron.jsx";
 
-const Accordion = (props) => {
+const Accordion = ({
+  title = "",
+  subTitle,
+  children,
+  centerItem,
+  rightItem,
+  isOpen = false,
+  isSticky = false,
+}) => {
   const content = useRef(null);
-  const [setActive, setActiveState] = useState(props.isOpen ? "active" : "");
+  const [setActive, setActiveState] = useState(isOpen ? "active" : "");
   const ariaPressed = setActive ? "true" : "false";
   const getHeight = (node) => {
     if (node) {
@@ -28,39 +36,37 @@ const Accordion = (props) => {
   }
 
   useEffect(() => {
-    if (props.isOpen) {
+    if (isOpen) {
       openAccordion();
     } else {
       closeAccordion();
     }
-  }, [props.isOpen]);
+  }, [isOpen]);
 
   return (
     <div className="accordion-section" data-testid="accordion">
       <button
         className={`accordion ${setActive} ${
-          setActive && props.isSticky ? "sticky" : ""
+          setActive && isSticky ? "sticky" : ""
         }`}
-        aria-label={props.title}
+        aria-label={title}
         aria-pressed={ariaPressed}
         aria-expanded={ariaPressed}
         tabIndex="0"
         onClick={toggleAccordion}
       >
         <div className="accordion-left-title">
-          <p className="accordion-title">{props.title}</p>
-          {props.subTitle && (
-            <p className="accordion-subtitle">{props.subTitle}</p>
-          )}
+          <p className="accordion-title">{title}</p>
+          {subTitle && <p className="accordion-subtitle">{subTitle}</p>}
         </div>
-        {props.centerItem && (
+        {centerItem && (
           <div className="accordion-center">
-            <p>{props.centerItem}</p>
+            <p>{centerItem}</p>
           </div>
         )}
-        {props.rightItem && (
+        {rightItem && (
           <div className="accordion-right">
-            <p>{props.rightItem}</p>
+            <p>{rightItem}</p>
           </div>
         )}
         <div className="chevron-container">
@@ -72,7 +78,7 @@ const Accordion = (props) => {
         style={{ maxHeight: height }}
         className="accordion-content"
       >
-        <div className="accordion-text dashed-border">{props.children}</div>
+        <div className="accordion-text dashed-border">{children}</div>
       </div>
     </div>
   );
@@ -88,10 +94,4 @@ Accordion.propTypes = {
   isSticky: PropTypes.bool,
 };
 
-Accordion.defaultProps = {
-  title: "",
-  isOpen: false,
-  isSticky: false,
-};
-
 export default Accordion;

package/components/Button/index.js

@@ -5,14 +5,14 @@ const VARIANTS = ["secondary", "outline", "danger", "white"];
 const SIZES = ["big"];
 
 const Button = ({
-  children,
+  children = null,
   className,
   href,
-  loading,
-  onClick,
-  size,
+  loading = false,
+  onClick = () => {},
+  size = null,
   variant,
-  type,
+  type = "button",
   ...rest
 }) => {
   let btnClass = "qpp-c-button";
@@ -64,17 +64,6 @@ Button.propTypes = {
   variant: PropTypes.oneOf(VARIANTS),
 };
 
-Button.defaultProps = {
-  children: false,
-  className: "",
-  href: "",
-  loading: false,
-  onClick: () => null,
-  size: null,
-  type: "button",
-  variant: null,
-};
-
 export const TextButton = ({ className = "", ...props }) => (
   <Button className={`qpp-c-button--text ${className}`} {...props} />
 );
@@ -83,8 +72,4 @@ TextButton.propTypes = {
   className: PropTypes.string,
 };
 
-TextButton.defaultProps = {
-  className: "",
-};
-
 export default Button;

package/components/Dropdown/index.js

@@ -2,19 +2,19 @@ import React from "react";
 import PropTypes from "prop-types";
 
 const Dropdown = ({
-  className,
-  id,
-  ariaLabelledBy,
-  ariaLabel,
-  onChange,
-  dataTestId,
-  name,
-  dataType,
-  disabled,
-  size,
-  options,
+  className = "qpp-u-width--100",
+  id = null,
+  ariaLabelledBy = null,
+  ariaLabel = null,
+  onChange = () => {},
+  dataTestId = null,
+  name = null,
+  dataType = null,
+  disabled = false,
+  size = null,
+  options = [],
   children,
-  parentElement,
+  parentElement = "span",
   ...rest
 }) => {
   const dropdownClass = [
@@ -66,20 +66,4 @@ Dropdown.propTypes = {
   parentElement: PropTypes.string,
 };
 
-Dropdown.defaultProps = {
-  children: false,
-  className: "qpp-u-width--100",
-  id: null,
-  ariaLabelledBy: null,
-  ariaLabel: null,
-  onChange: () => null,
-  dataTestId: null,
-  name: null,
-  dataType: null,
-  disabled: false,
-  size: null,
-  options: [],
-  parentElement: "span",
-};
-
 export default Dropdown;

package/components/Header/HeaderAccountMenu.jsx

@@ -5,7 +5,11 @@ import { setUtagLink } from "./utag-helpers";
 import HeaderMenuItem from "./HeaderMenuItem";
 import Session from "../Session";
 
-const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
+const HeaderAccountMenu = ({
+  handleClick,
+  isLoginEnabled,
+  isDevPre = false,
+}) => {
   const { closeMenus, RouterLink, headerContent } = useHeaderState();
   const { isLoggedIn, firstName, devPreMenuLinks, accountMenuLinks } =
     headerContent;
@@ -87,8 +91,4 @@ HeaderAccountMenu.propTypes = {
   handleClick: PropTypes.func.isRequired,
 };
 
-HeaderAccountMenu.defaultProps = {
-  isDevPre: false,
-};
-
 export default HeaderAccountMenu;

package/components/Header/HeaderContainer.jsx

@@ -18,12 +18,12 @@ function jumpToLink(e, id) {
 
 const HeaderContainer = ({
   children,
-  includeSkipToSidebar,
-  showCancelButton,
+  includeSkipToSidebar = false,
+  showCancelButton = false,
   skipToContentId,
-  isIESupportPage,
-  isDevPre,
-  showSearchBar,
+  isIESupportPage = false,
+  isDevPre = false,
+  showSearchBar = false,
 }) => {
   const windowWidth = useWindowWidth();
   const { currentOpenMenu } = useHeaderState();
@@ -81,12 +81,5 @@ HeaderContainer.propTypes = {
   isDevPre: PropTypes.object,
   showSearchBar: PropTypes.bool,
 };
-HeaderContainer.defaultProps = {
-  includeSkipToSidebar: false,
-  showCancelButton: false,
-  skipToContentId: null,
-  isIESupportPage: false,
-  showSearchBar: false,
-};
 
 export default HeaderContainer;

package/components/Header/HeaderLogo.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 import { useHeaderState } from "./hooks";
 
-const HeaderLogo = ({ isDevPre, hasSearchBar }) => {
+const HeaderLogo = ({ isDevPre = false, hasSearchBar }) => {
   const { closeMenus, RouterLink } = useHeaderState();
   const searchHeaderClass = hasSearchBar ? " header-logo-search" : "";
   const headerLogoClass = `header-logo${searchHeaderClass}`;

package/components/Header/HeaderMenuItem.jsx

@@ -34,9 +34,9 @@ const excludedClickOutClasses = [
 const HeaderMenuItem = ({
   handleClick,
   isMobileMenuExpanded,
-  columns,
-  menuName,
-  rows,
+  columns = [],
+  menuName = "",
+  rows = [],
   name,
   subtitle,
   className,
@@ -229,11 +229,5 @@ HeaderMenuItem.propTypes = {
   handleClick: PropTypes.func.isRequired,
   isMobileMenuExpanded: PropTypes.bool.isRequired,
 };
-HeaderMenuItem.defaultProps = {
-  menuName: "",
-  columns: [],
-  rows: [],
-  className: null,
-};
 
 export default HeaderMenuItem;

package/components/Header/HeaderUI.jsx

@@ -13,14 +13,14 @@ import { HeaderStateProvider, useWindowWidth } from "./hooks";
 import defaultContent from "./default-content.json";
 
 const HeaderUI = ({
-  handleCancel,
-  includeSkipToSidebar,
-  isDevPre,
-  isLoginEnabled,
-  showCancelButton,
+  handleCancel = () => {},
+  includeSkipToSidebar = false,
+  isDevPre = false,
+  isLoginEnabled = true,
+  showCancelButton = false,
   skipToContentId,
-  RouterLink,
-  isIESupportPage,
+  RouterLink = null,
+  isIESupportPage = false,
 }) => {
   const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
   const [headerContent, setHeaderContent] = useState({});
@@ -162,18 +162,5 @@ HeaderUI.propTypes = {
   RouterLink: PropTypes.func,
   isIESupportPage: PropTypes.bool,
 };
-HeaderUI.defaultProps = {
-  handleCancel: Function.prototype,
-  includeSkipToSidebar: false,
-  isDevPre: false,
-  isLoginEnabled: true,
-  performanceYear: 2017,
-  showCancelButton: false,
-  showPhysicianCompareLink: false,
-  showFacilityBasedPreviewLink: false,
-  skipToContentId: null,
-  RouterLink: null,
-  isIESupportPage: false,
-};
 
 export default HeaderUI;

package/components/Header/hooks.js

@@ -18,7 +18,7 @@ export const HeaderStateContext = createContext(null);
 
 export const HeaderStateProvider = ({
   children,
-  RouterLink,
+  RouterLink = null,
   headerContent, // allow header content from api request available to all child components
 }) => {
   const [currentOpenMenu, setCurrentOpenMenu] = useState("");
@@ -53,10 +53,6 @@ HeaderStateProvider.propTypes = {
   headerContent: PropTypes.object,
 };
 
-HeaderStateProvider.defaultProps = {
-  RouterLink: null,
-};
-
 export const useHeaderState = () => {
   const context = useContext(HeaderStateContext);
   if (context === undefined) {

package/components/Infotip/Infotip.jsx

@@ -36,7 +36,12 @@ const touchHandlers = {
 /**
  * Tooltip with styled information icon
  */
-const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
+const Infotip = ({
+  ariaLabel = "Information",
+  label,
+  lightIcon = false,
+  ...props
+}) => (
   <InfotipContent label={label} id="info-tip" {...props}>
     <button
       type="button"
@@ -62,10 +67,4 @@ Infotip.propTypes = {
   DEBUG_STYLE: PropTypes.bool,
 };
 
-Infotip.defaultProps = {
-  ariaLabel: "Information",
-  lightIcon: false,
-  DEBUG_STYLE: undefined,
-};
-
 export default Infotip;

package/components/Infotip/InfotipContent.jsx

@@ -28,6 +28,7 @@ const InfotipContent = ({ children, label, id }) => {
       </TooltipAnchor>
       <TooltipAriaKit
         state={tooltip}
+        id={undefined}
         ariaLabelledBy={undefined}
         className="tooltip-content"
         style={cssStyles}

package/components/Infotip/InfotipIcon.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const InfotipIcon = ({ lightIcon, ...props }) => (
+const InfotipIcon = ({ lightIcon = false, ...props }) => (
   <svg
     width="20px"
     height="20px"
@@ -35,7 +35,3 @@ export default InfotipIcon;
 InfotipIcon.propTypes = {
   lightIcon: PropTypes.bool,
 };
-
-InfotipIcon.defaultProps = {
-  lightIcon: false,
-};

package/components/Modal/Modal.jsx

@@ -6,12 +6,12 @@ import { CloseXIcon2 } from "../../lib/SvgComponents.jsx";
 
 const Modal = ({
   children,
-  onRequestClose,
+  onRequestClose = () => {},
   title,
   primary,
   secondary,
-  appElement,
-  isOpen,
+  appElement = "body > *:not(.qpp-c-modal)",
+  isOpen = false,
   ...props
 }) => {
   const [overflowSeparator, setOverflowSeparator] = useState(false);
@@ -128,13 +128,4 @@ Modal.propTypes = {
   isOpen: PropTypes.bool,
 };
 
-Modal.defaultProps = {
-  onRequestClose: () => {},
-  title: undefined,
-  primary: null,
-  secondary: null,
-  appElement: "body > *:not(.qpp-c-modal)",
-  isOpen: false,
-};
-
 export default Modal;

package/components/Modal/index.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import LegacyModal from "./LegacyModal";
 import DsModal from "./Modal";
 
-const Modal = ({ useDesignSystem, ...rest }) => {
+const Modal = ({ useDesignSystem = false, ...rest }) => {
   if (useDesignSystem) {
     return <DsModal {...rest} />;
   }
@@ -14,9 +14,6 @@ const Modal = ({ useDesignSystem, ...rest }) => {
 Modal.propTypes = {
   useDesignSystem: PropTypes.bool,
 };
-Modal.defaultProps = {
-  useDesignSystem: false,
-};
 Modal.displayName = "Modal";
 
 export default Modal;

package/components/NotificationBanner/index.js

@@ -15,7 +15,17 @@ function debounce(fn, ms) {
   };
 }
 
-const NotificationBanner = ({ result }) => {
+const NotificationBanner = ({
+  result = {
+    content: {
+      color: "blue",
+      content: null,
+      dismissable: true,
+      enabled: true,
+      label: "Update",
+    },
+  },
+}) => {
   const {
     color = "blue",
     content,
@@ -200,18 +210,6 @@ NotificationBanner.propTypes = {
   }),
 };
 
-NotificationBanner.defaultProps = {
-  result: {
-    content: {
-      color: "blue",
-      content: null,
-      dismissable: true,
-      enabled: true,
-      label: "Update",
-    },
-  },
-};
-
 export default withGetConfig(NotificationBanner, {
   timeout: 5,
   url: "/config/notification",

package/components/SideNav/Links/NavLinkContainer.jsx

@@ -30,9 +30,4 @@ NavLinkContainer.propTypes = {
   linkActiveFunc: PropTypes.func,
 };
 
-NavLinkContainer.defaultProps = {
-  listOfLinks: null,
-  linkActiveFunc: null,
-};
-
 export default NavLinkContainer;

package/components/SideNav/UI/SideNavUI.jsx

@@ -26,12 +26,12 @@ import defaultMarkup from "./default-markup";
 //    the markup on the page. Then the web component renders
 //    immediately.
 const SideNavUI = ({
-  config,
-  isAltStyle,
+  config = {},
+  isAltStyle = false,
   isExpanded,
-  items,
-  onCollapsed,
-  onExpanded,
+  items = [],
+  onCollapsed = () => {},
+  onExpanded = () => {},
 }) => {
   const isExpandedPropSet = isExpanded !== undefined;
   const [isExpandedState, setIsExpandedState] = useState(() => {
@@ -148,13 +148,4 @@ SideNavUI.propTypes = {
   onExpanded: PropTypes.func,
 };
 
-SideNavUI.defaultProps = {
-  config: {},
-  isAltStyle: false,
-  isExpanded: undefined,
-  items: null,
-  onCollapsed: () => {},
-  onExpanded: () => {},
-};
-
 export default SideNavUI;

package/components/Tabs/Tabs.js

@@ -64,10 +64,4 @@ Tabs.propTypes = {
   selected: PropTypes.string,
 };
 
-Tabs.defaultProps = {
-  defaultSelectedId: undefined,
-  onChange: undefined,
-  selected: undefined,
-};
-
 export default Tabs;