qpp-style 9.25.2-beta.1 → 9.25.2-beta.2

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,
 };