qpp-style 2.0.1 → 2.0.2-sm.2

package/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,88 @@
+import React, { cloneElement, useLayoutEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import positionTip, { positionTriangle } from './position';
+import { useTooltip, TooltipPopup } from '@reach/tooltip';
+import { Portal } from '@reach/portal';
+
+// TODO: investigate ways to allow more styling via css? the triangle
+// positioning effect issue may need to be resolved to allow for this.
+const TEXT_COLOR = '#FFF';
+const BACKGROUND_COLOR = '#333';
+
+/**
+ * Generic styled tooltip component.
+ * Corresponding styles: /styles/components/_tooltip.scss
+ *
+ * Extends implementation from @reach/tooltip:
+ * https://reacttraining.com/reach-ui/tooltip
+ */
+const Tooltip = ({ children, label, ariaLabel, DEBUG_STYLE }) => {
+  const [trigger, tooltip] = useTooltip({ DEBUG_STYLE });
+  const { isVisible, triggerRect } = tooltip;
+  const tooltipPopupRef = useRef();
+  const triangleRef = useRef();
+
+  useLayoutEffect(() => {
+    // For some reason, the forwardRef for the tooltipPopup points to an undefined
+    // dom element when we first render the portal containing the triangle. Using
+    // an effect here will ensure that the ref is available when applying styles.
+    // TODO: investigate and make issue for @reach-ui/tooltip?
+    if (isVisible && tooltipPopupRef.current && triggerRect) {
+      const tooltipRect = tooltipPopupRef.current.getBoundingClientRect();
+      const positionCssText = positionTriangle(triggerRect, tooltipRect);
+      const cssText = `
+                  position: absolute;
+                  width: 0;
+                  height: 0;
+                  ${positionCssText}
+                  border-top-color: ${BACKGROUND_COLOR};
+                  border-bottom-color: ${BACKGROUND_COLOR};
+                  z-index: 1;
+                `;
+      triangleRef.current.style.cssText = cssText;
+    }
+  });
+
+  return (
+    <>
+      {cloneElement(children, trigger)}
+      <TooltipPopup
+        {...tooltip}
+        label={label}
+        ariaLabel={ariaLabel}
+        style={{
+          background: BACKGROUND_COLOR,
+          color: TEXT_COLOR,
+        }}
+        ref={tooltipPopupRef}
+        position={positionTip}
+      />
+      {isVisible && (
+        <Portal>
+          <div
+            ref={triangleRef}
+            style={{
+              position: 'absolute',
+              width: 0,
+              height: 0,
+            }}
+          />
+        </Portal>
+      )}
+    </>
+  );
+};
+
+Tooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.node.isRequired,
+  ariaLabel: PropTypes.string,
+  DEBUG_STYLE: PropTypes.bool,
+};
+
+Tooltip.defaultProps = {
+  ariaLabel: undefined,
+  DEBUG_STYLE: undefined,
+};
+
+export default Tooltip;

package/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import Tooltip from './index';
+
+const offsetDecorator = (storyFn) => (
+  <div style={{ margin: '80px' }}>{storyFn()}</div>
+);
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+};
+
+export const ExampleTooltip = () => (
+  <Tooltip label="FOOBAR">
+    <button>
+      <span>Tooltip Trigger</span>
+    </button>
+  </Tooltip>
+);
+
+ExampleTooltip.storyName = 'example Tooltip';
+ExampleTooltip.decorators = [offsetDecorator];
+
+export const AriaLabelTooltip = () => (
+  <Tooltip label="FOOBAR" ariaLabel="foobar">
+    <button>
+      <span>Tooltip Trigger</span>
+    </button>
+  </Tooltip>
+);
+
+AriaLabelTooltip.storyName = 'using ariaLabel';
+AriaLabelTooltip.decorators = [offsetDecorator];
+
+export const MultipleTooltip = () => (
+  <>
+    <Tooltip label="Tooltip 1">
+      <button>
+        <span>Tooltip 1 Trigger</span>
+      </button>
+    </Tooltip>
+    <Tooltip label="Tooltip 2">
+      <button>
+        <span>Tooltip 2 Trigger</span>
+      </button>
+    </Tooltip>
+    <Tooltip label="Tooltip 3">
+      <button>
+        <span>Tooltip 3 Trigger</span>
+      </button>
+    </Tooltip>
+  </>
+);
+
+MultipleTooltip.storyName = 'multiple Tooltips';
+MultipleTooltip.decorators = [offsetDecorator];
+
+export const InputElementTooltip = () => (
+  <form>
+    <label htmlFor="foobar" style={{ marginRight: '5px ' }}>
+      Text Input
+    </label>
+    <Tooltip label="example input label tooltip">
+      <input type="text" name="foobar" />
+    </Tooltip>
+  </form>
+);
+
+InputElementTooltip.storyName = 'on text input';
+InputElementTooltip.decorators = [offsetDecorator];
+
+export const PositionedBelowTargetTooltip = () => (
+  <Tooltip label="FOOBAR">
+    <button>
+      <span>Tooltip Trigger</span>
+    </button>
+  </Tooltip>
+);
+
+PositionedBelowTargetTooltip.storyName = 'positioned below trigger';

package/components/Tooltip/index.js

@@ -0,0 +1,3 @@
+import Tooltip from './Tooltip';
+
+export default Tooltip;

package/components/Tooltip/position.js

@@ -0,0 +1,68 @@
+const OFFSET = 12; // modified from reach-ui/tooltip OFFSET value
+const TRIANGLE_SCALE_X = 6;
+const TRIANGLE_SCALE_Y = 8;
+
+const isDirectionUp = (triggerRect, tooltipRect) => {
+  const collisions = {
+    top: triggerRect.top - tooltipRect.height < 0,
+    bottom:
+      window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
+  };
+
+  return !collisions.top || collisions.bottom;
+};
+
+// modified from @reach/tooltip default positioning function
+// positions Tooltip relative to trigger
+// https://github.com/reach/reach-ui/blob/master/packages/tooltip/src/index.tsx#L532
+const positionTip = (triggerRect, tooltipRect) => {
+  if (!triggerRect || !tooltipRect) {
+    return {};
+  }
+
+  const triggerCenter = triggerRect.left + triggerRect.width / 2;
+  const left = triggerCenter - tooltipRect.width / 2;
+  const maxLeft = window.innerWidth - tooltipRect.width - 2;
+  const centerLeft = Math.min(Math.max(2, left), maxLeft) + window.pageXOffset;
+
+  const directionUp = isDirectionUp(triggerRect, tooltipRect);
+
+  return {
+    left: `${centerLeft}px`,
+    top: directionUp
+      ? `${
+          triggerRect.top - OFFSET - tooltipRect.height + window.pageYOffset
+        }px`
+      : `${
+          triggerRect.top + OFFSET + triggerRect.height + window.pageYOffset
+        }px`,
+  };
+};
+
+export default positionTip;
+
+// position triangle relative to tooltip position
+// TODO: figure out a better way to render these updates from within react
+// rendering. This method causes an additional repaint after the Tooltip
+// has been rendered. may require changes to @reach/tooltip.
+export const positionTriangle = (triggerRect, tooltipRect) => {
+  const directionUp = isDirectionUp(triggerRect, tooltipRect);
+  const triangleTop = directionUp
+    ? triggerRect.top + window.pageYOffset - OFFSET
+    : triggerRect.bottom + window.pageYOffset + OFFSET - TRIANGLE_SCALE_Y;
+
+  const triangleLeft =
+    triggerRect.left - TRIANGLE_SCALE_X + triggerRect.width / 2;
+
+  const triangleBorder = directionUp
+    ? `border-top: ${TRIANGLE_SCALE_Y}px solid;`
+    : `border-bottom: ${TRIANGLE_SCALE_Y}px solid;`;
+
+  return `
+        border-left: ${TRIANGLE_SCALE_X}px solid transparent;
+        border-right: ${TRIANGLE_SCALE_X}px solid transparent;
+        left: ${triangleLeft}px;
+        top: ${triangleTop}px;
+        ${triangleBorder}
+    `;
+};

package/components/hooks/useGetConfig.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import axios from 'axios';
+import { useState, useEffect } from 'react';
+
+// The content is populated with the following priority order:
+// 1. Use the content in localStorage if it's there
+// 2. If not, make a call to get it from a QPPFE endpoint.
+//    Hydrate the localStorage item with the response if localStorage item doesn't match call content.
+// 3. If the call fails, use the default content
+const useGetConfig = ({
+  url = '',
+  localStorageName = '',
+  equalityCheckExclude = [],
+  timeout = 30,
+  defaultContent,
+}) => {
+  const [result, setResult] = useState();
+
+  if (!url || !localStorageName) {
+    throw new Error('Arguments for url and localStorageName are required');
+  }
+
+  useEffect(() => {
+    const storageContent = JSON.parse(localStorage.getItem(localStorageName));
+    if (
+      storageContent?.content &&
+      new Date().valueOf() < storageContent.expiration
+    ) {
+      setResult(storageContent);
+    } else {
+      const origin = window.location.origin;
+      axios
+        .get(`${origin}${url}`)
+        .then(({ data: { data = {} } }) => {
+          const expiration = new Date().valueOf() + timeout * 60 * 1000;
+          const storageItem = {
+            expiration,
+          };
+
+          if (
+            data?.content &&
+            storageContent?.content &&
+            Object.keys(data.content).every((key) => {
+              if (equalityCheckExclude.includes(key)) {
+                return true;
+              }
+              return data.content[key] === storageContent.content[key];
+            })
+          ) {
+            storageItem.content = storageContent.content;
+          } else {
+            storageItem.content = data.content;
+          }
+
+          localStorage.setItem(localStorageName, JSON.stringify(storageItem));
+          setResult(storageItem);
+        })
+        .catch((e) => {
+          setResult({ content: defaultContent, expiration: 0 });
+        });
+    }
+  }, []);
+
+  return result;
+};
+
+export const withGetConfig = (Component, options) => {
+  function WrappedComponent(props) {
+    const result = useGetConfig(options);
+    return <Component result={result} {...props} />;
+  }
+  return WrappedComponent;
+};
+
+export default useGetConfig;

package/components/index.js

@@ -0,0 +1,128 @@
+import Accordion from './Accordion';
+import Alert from './Alert';
+import Breadcrumb from './Breadcrumb';
+import Button, { TextButton } from './Button';
+import CalloutBox from './CalloutBox';
+import Card from './Card';
+import FlashNotification from './FlashNotification/FlashNotificationUI';
+import Footer from './Footer/FooterUI';
+import Header from './Header/HeaderUI';
+import Modal from './Modal';
+import SideNav from './SideNav/UI/SideNavUI';
+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 DSLink from './Link';
+import {
+  MyApplicationsIcon,
+  UserSignInIcon,
+  MyTestDataIcon,
+  ReportDataIcon,
+  ManageUsersIcon,
+  AccountHomeIcon,
+  FacilityBasedPreviewIcon,
+  PaymentIcon,
+  PhysicianCompareIcon,
+  HardshipIcon,
+  TargetIcon,
+  ReportsIcon,
+  HelpSupportIcon,
+  DashboardIcon,
+  AccountSettings,
+  DetailsIcon,
+  StarIcon,
+  RegistrationIcon,
+  CliniciansIcon,
+  GroupReporting,
+  IndividualReporting,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  SwitchPractice,
+  ScoreIncrease,
+  TooltipIcon,
+  NavCollapse,
+  NavExpand,
+  CloseXIcon,
+  CloseXIcon2,
+  BellOutline,
+  EarlyClaims,
+  CliniciansList,
+  YoutubeIcon,
+  TwitterIcon,
+  WiViewReportsIcon,
+  WiViewProgressIcon,
+  WiManageGroupIcon,
+} from '../lib/SvgComponents.jsx';
+
+const Icons = {
+  MyApplicationsIcon,
+  UserSignInIcon,
+  MyTestDataIcon,
+  ReportDataIcon,
+  ManageUsersIcon,
+  AccountHomeIcon,
+  FacilityBasedPreviewIcon,
+  PaymentIcon,
+  PhysicianCompareIcon,
+  HardshipIcon,
+  TargetIcon,
+  ReportsIcon,
+  HelpSupportIcon,
+  DashboardIcon,
+  AccountSettings,
+  DetailsIcon,
+  StarIcon,
+  RegistrationIcon,
+  CliniciansIcon,
+  GroupReporting,
+  IndividualReporting,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  SwitchPractice,
+  ScoreIncrease,
+  TooltipIcon,
+  NavCollapse,
+  NavExpand,
+  CloseXIcon,
+  CloseXIcon2,
+  BellOutline,
+  EarlyClaims,
+  CliniciansList,
+  YoutubeIcon,
+  TwitterIcon,
+  WiViewReportsIcon,
+  WiViewProgressIcon,
+  WiManageGroupIcon,
+};
+
+export {
+  Accordion,
+  Alert,
+  Breadcrumb,
+  Button,
+  CalloutBox,
+  Card,
+  FlashNotification,
+  Footer,
+  Header,
+  Icons,
+  Infotip,
+  Modal,
+  Search,
+  SideNav,
+  TabPanel,
+  Tabs,
+  TextButton,
+  TextInput,
+  Dropdown,
+  Details,
+  Tooltip,
+  DSLink,
+};