@madie/madie-design-system 1.0.0

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/UnwrappedSpinner/index.js

@@ -0,0 +1,8 @@
+import React, { Component } from 'react';
+import DSSpinner from '@cmsgov/design-system/dist/components/Spinner/Spinner';
+
+export default class SpinnerUI extends Component {
+  render() {
+    return <DSSpinner />;
+  }
+}

package/components/hooks/useGetConfig.js

@@ -0,0 +1,74 @@
+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,126 @@
+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 Spinner from './UnwrappedSpinner';
+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 DSLink from './Link';
+import {
+  MyApplicationsIcon,
+  UserSignInIcon,
+  MyTestDataIcon,
+  ReportDataIcon,
+  ManageUsersIcon,
+  AccountHomeIcon,
+  FacilityBasedPreviewIcon,
+  PaymentIcon,
+  PhysicianCompareIcon,
+  HardshipIcon,
+  TargetIcon,
+  ReportsIcon,
+  HelpSupportIcon,
+  DashboardIcon,
+  AccountSettings,
+  DetailsIcon,
+  StarIcon,
+  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,
+  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,
+  Spinner,
+  TabPanel,
+  Tabs,
+  TextButton,
+  TextInput,
+  Dropdown,
+  Tooltip,
+  DSLink,
+};