qpp-style 9.25.1 → 9.26.0

package/components/Footer/FooterUI.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import OpenInNewIcon from '@material-ui/icons/OpenInNew';
-
 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.';
@@ -126,7 +125,7 @@ const FooterUI = () => (
                   rel="noopener noreferrer"
                 >
                   <strong>Create or Track a QPP Service Center Ticket</strong>
-                  <OpenInNewIcon classes={{ root: 'ccsq-link-icon' }} />
+                  <OpenInNewIcon className="ccsq-link-icon" />
                 </a>
               </h3>
             </div>

package/components/Header/ImpersonatorBanner.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import cookie from 'cookie';
 import axios from 'axios';
-import CloseIcon from '@material-ui/icons/Close';
-
+import { CloseIcon } from '../../lib/SvgComponents';
 import { TextButton } from '../Button';
 import {
   deleteImpersonatedUser,

package/components/Infotip/Infotip.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tooltip from '../Tooltip';
+import InfotipContent from './InfotipContent';
 import InfotipIcon from './InfotipIcon';
 
 const BUTTON_SIZE = '16px';
@@ -16,10 +16,6 @@ const buttonStyle = {
   userSelect: 'none',
 };
 
-// Use basic touch handlers for mobile "tap-to-open" ui.  Mobile touch
-// is currently not supported by @reach/tooltip; this may change in future.
-// Leverages @reach/tooltip "focus" behavior to open tooltip on tap,
-// and close tooltip on second tap or loss of focus.
 // TODO: We may want to improve this by tracking touch positions to ensure
 // that a 'touchend' event must be reasonably close to the tooltip target.
 const touchHandlers = {
@@ -41,7 +37,7 @@ const touchHandlers = {
  * Tooltip with styled information icon
  */
 const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
-  <Tooltip label={label} {...props}>
+  <InfotipContent label={label} {...props}>
     <button
       type="button"
       aria-label={ariaLabel}
@@ -56,7 +52,7 @@ const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
         style={{ float: 'left' }}
       />
     </button>
-  </Tooltip>
+  </InfotipContent>
 );
 
 Infotip.propTypes = {

package/components/Infotip/InfotipContent.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Tooltip as TooltipAriaKit,
+  TooltipAnchor,
+  TooltipArrow,
+  useTooltipState,
+} from 'ariakit/tooltip';
+
+const TEXT_COLOR = '#FFF';
+const BACKGROUND_COLOR = '#333';
+
+const InfotipContent = ({ children, label }) => {
+  const tooltip = useTooltipState();
+
+  const cssStyles = {
+    maxWidth: '300px',
+    padding: '8px',
+    borderRadius: '4px',
+    fontSize: '0.9rem',
+    backgroundColor: BACKGROUND_COLOR,
+    color: TEXT_COLOR,
+  };
+  return (
+    <>
+      <TooltipAnchor as={'span'} state={tooltip} className="tooltip-anchor">
+        {children}
+      </TooltipAnchor>
+      <TooltipAriaKit
+        state={tooltip}
+        className="tooltip-content"
+        style={cssStyles}
+      >
+        {label}
+        <TooltipArrow />
+      </TooltipAriaKit>
+    </>
+  );
+};
+
+InfotipContent.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.node.isRequired,
+};
+
+export default InfotipContent;

package/components/Search/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import SearchIcon from '@material-ui/icons/Search';
+import { SearchIcon } from '../../lib/SvgComponents';
 
 const Search = ({
   id,
@@ -55,7 +55,7 @@ const Search = ({
             className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
           >
             <span className="qpp-u-visually-hidden">Search</span>
-            <SearchIcon classes={{ root: 'qpp-icon-mat' }} />
+            <SearchIcon viewBox="0 0 45 50" />
           </button>
         </div>
       </form>

package/components/Tabs/TabPanel.js

@@ -1,41 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const TabPanel = ({
-  children,
-  value,
-  id,
-  index,
-  className,
-  disabled,
-}) => {
-  const classes = ['qpp-c-tabs__panel', className].filter(Boolean).join(' ');
-  return (
-    <div
-      role="tabpanel"
-      id={id}
-      aria-hidden={value !== index}
-      aria-labelledby={`qpp-c-tabs__item--${id}`}
-      aria-disabled={disabled}
-      className={classes}
-    >
-      {value === index && children}
-    </div>
-  );
-};
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  index: PropTypes.number.isRequired,
-  id: PropTypes.string,
-  value: PropTypes.number.isRequired,
-  disabled: PropTypes.bool,
-};
-
-TabPanel.defaultProps = {
-  index: 0,
-  value: 0,
+const TabPanel = ({ children }) => {
+  return children;
 };
 
 export default TabPanel;

package/components/Tabs/Tabs.js

@@ -0,0 +1,73 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import { TabList, Tab, TabPanel, useTabState } from 'ariakit/tab';
+
+function Tabs({ defaultSelectedId, children, onChange, selected }) {
+  const tab = useTabState({
+    defaultSelectedId: selected ?? defaultSelectedId,
+    selectOnMove: false,
+  });
+
+  const onTabClick = (tabHref, id) => {
+    if (tabHref) {
+      const currentUrl = new URL(window.location.href);
+      const newParams = new URLSearchParams(tabHref);
+      newParams.forEach((value, key) => {
+        currentUrl.searchParams.set(key, value);
+      });
+      window.history.replaceState(null, '', currentUrl);
+    }
+
+    if (onChange) {
+      onChange(id);
+    }
+  };
+
+  return (
+    <>
+      <div className="qpp-c-tabs qpp-c-tabs--mui">
+        <TabList state={tab} aria-label="qpp tabs">
+          {Children.map(children, (child) => (
+            <Tab
+              key={child.props.id}
+              id={child.props.id}
+              className="qpp-c-tabs__item"
+              disabled={child.props.disabled}
+              onClick={() => onTabClick(child.props.tabHref, child.props.id)}
+            >
+              {child.props.tab}
+            </Tab>
+          ))}
+        </TabList>
+      </div>
+      <div className="qpp-c-tabs__panel">
+        {Children.map(children, (child) => (
+          <TabPanel
+            key={child.props.id}
+            state={tab}
+            tabId={child.props.id}
+            className={child.props.className}
+            disabled={child.props.disabled}
+          >
+            {child.props.children}
+          </TabPanel>
+        ))}
+      </div>
+    </>
+  );
+}
+
+Tabs.propTypes = {
+  defaultSelectedId: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onChange: PropTypes.func,
+  selected: PropTypes.string,
+};
+
+Tabs.defaultProps = {
+  defaultSelectedId: undefined,
+  onChange: undefined,
+  selected: undefined,
+};
+
+export default Tabs;

package/components/index.js

@@ -9,14 +9,13 @@ import Footer from './Footer/FooterUI';
 import Header from './Header/HeaderUI';
 import Modal from './Modal';
 import SideNav from './SideNav/UI/SideNavUI';
+import Tabs from './Tabs/Tabs';
 import TabPanel from './Tabs/TabPanel';
-import Tabs from './Tabs/index';
-import Tooltip from './Tooltip';
 import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
 import Dropdown from './Dropdown';
-import Details from './Details';
+import Details from './Details/index';
 import DSLink from './Link';
 import {
   MyApplicationsIcon,
@@ -117,12 +116,11 @@ export {
   Modal,
   Search,
   SideNav,
-  TabPanel,
   Tabs,
+  TabPanel,
   TextButton,
   TextInput,
   Dropdown,
   Details,
-  Tooltip,
   DSLink,
 };

package/coverage/clover.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1675373094615" clover="3.2.0">
-  <project timestamp="1675373094615" name="All files">
-    <metrics statements="1164" coveredstatements="636" conditionals="738" coveredconditionals="186" methods="334" coveredmethods="120" elements="2236" coveredelements="942" complexity="0" loc="1164" ncloc="1164" packages="26" files="72" classes="72"/>
+<coverage generated="1678142992657" clover="3.2.0">
+  <project timestamp="1678142992657" name="All files">
+    <metrics statements="1168" coveredstatements="641" conditionals="740" coveredconditionals="187" methods="335" coveredmethods="122" elements="2243" coveredelements="950" complexity="0" loc="1168" ncloc="1168" packages="26" files="72" classes="72"/>
     <package name="react">
       <metrics statements="6" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="5" coveredmethods="0"/>
       <file name="index.js" path="/Users/rodrigomunoz/projects/qpp-style/react/index.js">
@@ -215,7 +215,7 @@
       </file>
     </package>
     <package name="react.components.Header">
-      <metrics statements="199" coveredstatements="114" conditionals="100" coveredconditionals="39" methods="69" coveredmethods="24"/>
+      <metrics statements="203" coveredstatements="119" conditionals="102" coveredconditionals="40" methods="70" coveredmethods="26"/>
       <file name="HeaderAccountMenu.jsx" path="/Users/rodrigomunoz/projects/qpp-style/react/components/Header/HeaderAccountMenu.jsx">
         <metrics statements="17" coveredstatements="10" conditionals="16" coveredconditionals="7" methods="3" coveredmethods="1"/>
         <line num="8" count="2" type="stmt"/>
@@ -243,15 +243,18 @@
         <line num="12" count="2" type="stmt"/>
       </file>
       <file name="HeaderContainer.jsx" path="/Users/rodrigomunoz/projects/qpp-style/react/components/Header/HeaderContainer.jsx">
-        <metrics statements="8" coveredstatements="4" conditionals="10" coveredconditionals="6" methods="4" coveredmethods="1"/>
+        <metrics statements="11" coveredstatements="7" conditionals="12" coveredconditionals="7" methods="4" coveredmethods="1"/>
         <line num="14" count="0" type="stmt"/>
         <line num="15" count="0" type="stmt"/>
         <line num="18" count="2" type="stmt"/>
         <line num="25" count="1" type="stmt"/>
-        <line num="28" count="0" type="cond" truecount="0" falsecount="2"/>
-        <line num="36" count="0" type="stmt"/>
-        <line num="51" count="2" type="stmt"/>
-        <line num="58" count="2" type="stmt"/>
+        <line num="26" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="28" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="32" count="1" type="stmt"/>
+        <line num="36" count="0" type="cond" truecount="0" falsecount="2"/>
+        <line num="44" count="0" type="stmt"/>
+        <line num="60" count="2" type="stmt"/>
+        <line num="67" count="2" type="stmt"/>
       </file>
       <file name="HeaderLogo.jsx" path="/Users/rodrigomunoz/projects/qpp-style/react/components/Header/HeaderLogo.jsx">
         <metrics statements="5" coveredstatements="4" conditionals="2" coveredconditionals="1" methods="1" coveredmethods="1"/>
@@ -361,7 +364,7 @@
         <line num="32" count="2" type="stmt"/>
       </file>
       <file name="HeaderUI.jsx" path="/Users/rodrigomunoz/projects/qpp-style/react/components/Header/HeaderUI.jsx">
-        <metrics statements="39" coveredstatements="29" conditionals="10" coveredconditionals="6" methods="15" coveredmethods="7"/>
+        <metrics statements="40" coveredstatements="31" conditionals="10" coveredconditionals="6" methods="16" coveredmethods="9"/>
         <line num="14" count="2" type="stmt"/>
         <line num="24" count="3" type="stmt"/>
         <line num="25" count="3" type="stmt"/>
@@ -375,32 +378,33 @@
         <line num="46" count="3" type="stmt"/>
         <line num="47" count="2" type="stmt"/>
         <line num="48" count="2" type="stmt"/>
-        <line num="50" count="2" type="stmt"/>
         <line num="51" count="2" type="stmt"/>
-        <line num="52" count="1" type="stmt"/>
-        <line num="54" count="0" type="stmt"/>
-        <line num="56" count="1" type="cond" truecount="1" falsecount="1"/>
-        <line num="57" count="1" type="stmt"/>
-        <line num="58" count="0" type="stmt"/>
-        <line num="62" count="3" type="stmt"/>
-        <line num="64" count="3" type="stmt"/>
-        <line num="65" count="0" type="stmt"/>
-        <line num="74" count="3" type="stmt"/>
-        <line num="75" count="0" type="stmt"/>
-        <line num="88" count="3" type="stmt"/>
-        <line num="89" count="1" type="stmt"/>
-        <line num="97" count="0" type="stmt"/>
-        <line num="103" count="1" type="stmt"/>
-        <line num="105" count="0" type="stmt"/>
-        <line num="113" count="0" type="stmt"/>
-        <line num="123" count="3" type="stmt"/>
-        <line num="124" count="3" type="cond" truecount="1" falsecount="1"/>
-        <line num="125" count="3" type="cond" truecount="1" falsecount="1"/>
-        <line num="126" count="3" type="cond" truecount="2" falsecount="0"/>
-        <line num="127" count="2" type="stmt"/>
-        <line num="130" count="3" type="stmt"/>
-        <line num="137" count="2" type="stmt"/>
-        <line num="150" count="2" type="stmt"/>
+        <line num="52" count="2" type="stmt"/>
+        <line num="53" count="1" type="stmt"/>
+        <line num="55" count="0" type="stmt"/>
+        <line num="57" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="59" count="2" type="stmt"/>
+        <line num="60" count="2" type="stmt"/>
+        <line num="61" count="2" type="stmt"/>
+        <line num="65" count="3" type="stmt"/>
+        <line num="67" count="3" type="stmt"/>
+        <line num="68" count="0" type="stmt"/>
+        <line num="77" count="3" type="stmt"/>
+        <line num="78" count="0" type="stmt"/>
+        <line num="91" count="3" type="stmt"/>
+        <line num="92" count="1" type="stmt"/>
+        <line num="100" count="0" type="stmt"/>
+        <line num="106" count="1" type="stmt"/>
+        <line num="108" count="0" type="stmt"/>
+        <line num="116" count="0" type="stmt"/>
+        <line num="126" count="3" type="stmt"/>
+        <line num="127" count="3" type="cond" truecount="1" falsecount="1"/>
+        <line num="128" count="3" type="cond" truecount="1" falsecount="1"/>
+        <line num="129" count="3" type="cond" truecount="2" falsecount="0"/>
+        <line num="130" count="2" type="stmt"/>
+        <line num="133" count="3" type="stmt"/>
+        <line num="140" count="2" type="stmt"/>
+        <line num="153" count="2" type="stmt"/>
       </file>
       <file name="HelpIcon.jsx" path="/Users/rodrigomunoz/projects/qpp-style/react/components/Header/HelpIcon.jsx">
         <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
@@ -453,10 +457,10 @@
         <line num="50" count="2" type="stmt"/>
         <line num="56" count="2" type="stmt"/>
         <line num="60" count="2" type="stmt"/>
-        <line num="61" count="4" type="stmt"/>
-        <line num="62" count="4" type="cond" truecount="1" falsecount="1"/>
+        <line num="61" count="5" type="stmt"/>
+        <line num="62" count="5" type="cond" truecount="1" falsecount="1"/>
         <line num="63" count="0" type="stmt"/>
-        <line num="65" count="4" type="stmt"/>
+        <line num="65" count="5" type="stmt"/>
       </file>
       <file name="utag-helpers.js" path="/Users/rodrigomunoz/projects/qpp-style/react/components/Header/utag-helpers.js">
         <metrics statements="2" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
@@ -809,30 +813,30 @@
         <line num="149" count="0" type="stmt"/>
         <line num="153" count="1" type="stmt"/>
         <line num="154" count="9" type="cond" truecount="2" falsecount="0"/>
-        <line num="155" count="3" type="stmt"/>
         <line num="156" count="3" type="stmt"/>
-        <line num="160" count="1" type="stmt"/>
-        <line num="165" count="0" type="stmt"/>
-        <line num="166" count="0" type="stmt"/>
-        <line num="172" count="0" type="stmt"/>
-        <line num="178" count="0" type="stmt"/>
-        <line num="182" count="1" type="stmt"/>
-        <line num="188" count="1" type="stmt"/>
-        <line num="195" count="1" type="stmt"/>
-        <line num="202" count="1" type="stmt"/>
-        <line num="203" count="0" type="stmt"/>
-        <line num="206" count="1" type="stmt"/>
-        <line num="207" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="157" count="3" type="stmt"/>
+        <line num="161" count="1" type="stmt"/>
+        <line num="167" count="0" type="stmt"/>
+        <line num="168" count="0" type="stmt"/>
+        <line num="174" count="0" type="stmt"/>
+        <line num="180" count="0" type="stmt"/>
+        <line num="184" count="1" type="stmt"/>
+        <line num="190" count="1" type="stmt"/>
+        <line num="197" count="1" type="stmt"/>
+        <line num="204" count="1" type="stmt"/>
+        <line num="205" count="0" type="stmt"/>
         <line num="208" count="1" type="stmt"/>
-        <line num="209" count="1" type="stmt"/>
-        <line num="213" count="1" type="cond" truecount="1" falsecount="1"/>
-        <line num="214" count="0" type="stmt"/>
-        <line num="226" count="0" type="stmt"/>
-        <line num="227" count="0" type="stmt"/>
+        <line num="209" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="210" count="1" type="stmt"/>
+        <line num="211" count="1" type="stmt"/>
+        <line num="215" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="216" count="0" type="stmt"/>
+        <line num="228" count="0" type="stmt"/>
         <line num="229" count="0" type="stmt"/>
-        <line num="240" count="1" type="stmt"/>
-        <line num="250" count="1" type="stmt"/>
-        <line num="262" count="3" type="stmt"/>
+        <line num="231" count="0" type="stmt"/>
+        <line num="242" count="1" type="stmt"/>
+        <line num="252" count="1" type="stmt"/>
+        <line num="264" count="3" type="stmt"/>
       </file>
       <file name="index.js" path="/Users/rodrigomunoz/projects/qpp-style/react/components/SideNav/Chart/index.js">
         <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>