qpp-style 9.40.0 → 9.41.1

package/components/SideNav/UI/DynamicContent.jsx

@@ -0,0 +1,186 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import {
+  NavLinkContainer,
+  NavLinkInline,
+  NavLinkDrawer,
+} from "../Links";
+import AnimationGroup from "../AnimationGroup/AnimationGroup";
+import { PracticeDetails, IndividualDetails } from "../Details";
+import SanitizedContent from "../../SanitizedContent";
+import * as SvgComponents from "../../../lib/SvgComponents.jsx";
+import CmsSwitchLink from "../Links/CmsSwitchLink";
+
+const DynamicContent = ({contentItems, className, recursionId, config, isExpandedState, expand}) => {
+  const { openDrawersByDefault, linkActiveFunc, linkCallback } = config;
+  let linkClass = isExpandedState ? "link-inline" : "link-collapsed";
+  const containerRecursionId = recursionId ? recursionId : 0;
+
+  const getDynamicIcon = (icon) => {
+    const Component = SvgComponents[icon];
+    return Component ? <Component /> : null;
+  };
+
+  const hasDarkerBackground = (darkerBackground) => {
+    return darkerBackground ? "hr-smaller-vertical-spacing" : "";
+  };
+
+  const itemsMarkup = (contentItems || []).map((item, index) => {
+    const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;
+
+    return (
+      {
+        divider: (
+          <AnimationGroup
+            display={isExpandedState}
+            key={key}
+            darkerBackground={item.darkerBackground}
+          >
+            <hr className={`${hasDarkerBackground(item.darkerBackground)}`} />
+          </AnimationGroup>
+        ),
+        container: (
+          <DynamicContent
+            contentItems={item.items}
+            className={item.className}
+            recursionId={containerRecursionId + 1}
+            config={config}
+            isExpandedState={isExpandedState}
+          />
+        ),
+        linkBack: (
+          <AnimationGroup display={isExpandedState} key={key}>
+            <NavLinkInline
+              className="link-back"
+              icon={getDynamicIcon("ChevronLeft")}
+              url={item.url}
+              label={item.label}
+              linkCallback={linkCallback}
+              showLabel={true}
+            />
+          </AnimationGroup>
+        ),
+        linkHome: (
+          <AnimationGroup display={isExpandedState} key={key}>
+            <NavLinkInline
+              className="account-home-link"
+              icon={getDynamicIcon(item?.icon)}
+              url={item.url}
+              label={item.label}
+              linkCallback={linkCallback}
+              showLabel={true}
+            />
+          </AnimationGroup>
+        ),
+        practiceDetails: (
+          <AnimationGroup
+            display={isExpandedState}
+            className={"details"}
+            key={key}
+          >
+            <PracticeDetails
+              practiceName={item.practiceName}
+              {...(!item.practiceTin
+                ? {}
+                : { practiceTin: item.practiceTin })}
+              {...(!item.apmEntityId
+                ? {}
+                : { apmEntityId: item.apmEntityId })}
+              {...(!item.vgId ? {} : { vgId: item.vgId })}
+              {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
+              {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
+              {...(!item.subgroupId ? {} : { subgroupId: item.subgroupId })}
+            />
+          </AnimationGroup>
+        ),
+        individualDetails: (
+          <AnimationGroup display={isExpandedState} key={key}>
+            <IndividualDetails
+              individualName={item.individualName}
+              individualNpi={item.individualNpi}
+            />
+          </AnimationGroup>
+        ),
+        linkDrawer: (
+          <NavLinkDrawer
+            key={key}
+            isExpanded={isExpandedState}
+            isAlwaysOpen={item.isAlwaysOpen}
+            openByDefault={openDrawersByDefault}
+            rightIcon="chevron-down"
+            leftIcon={getDynamicIcon(item?.icon)}
+            className={linkClass}
+            label={item.label}
+            linkActiveFunc={linkActiveFunc}
+            linkCallback={linkCallback}
+            listOfLinks={item.items}
+            url={item.url}
+            sidebarExpand={expand}
+            isHighlighted={item.isHighlighted}
+            darkerBackground={item.darkerBackground}
+            leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
+            hideLabelSection={item.hideLabelSection}
+            largerDrawerBottomPadding={item.largerDrawerBottomPadding}
+          />
+        ),
+        custom: (
+          <AnimationGroup display={isExpandedState} key={key}>
+            <SanitizedContent
+              html={item.content}
+              customClassName={item.customClassName}
+            />
+          </AnimationGroup>
+        ),
+        switchLink: (
+          <AnimationGroup display={isExpandedState} key={key}>
+            <CmsSwitchLink
+              linkCallback={linkCallback}
+              label={item.label}
+              url={item.url}
+            />
+          </AnimationGroup>
+        ),
+      }[item.type] || (
+        <NavLinkInline
+          key={key}
+          icon={getDynamicIcon(item?.icon)}
+          className={item.className ? item.className : linkClass}
+          url={item.url}
+          label={item.label}
+          linkCallback={linkCallback}
+          showLabel={isExpandedState}
+          disabled={item.disabled}
+          target={item.target}
+        />
+      )
+    );
+  });
+
+  if (className === "link-container") {
+    return (
+      <div
+        className="animation-flat"
+        key={`nav-link-container-${recursionId}`}
+      >
+        <NavLinkContainer
+          listOfLinks={itemsMarkup}
+          linkActiveFunc={linkActiveFunc}
+        />
+      </div>
+    );
+  } else {
+    return <div className={className}>{itemsMarkup}</div>;
+  }
+};
+
+export default DynamicContent
+
+DynamicContent.propTypes = {
+  config: PropTypes.object,
+  isExpandedState: PropTypes.bool,
+  contentItems: PropTypes.array,
+  className: PropTypes.string,
+  recursionId: PropTypes.number,
+  expand: PropTypes.func
+};

package/components/SideNav/UI/SideNavUI.jsx

@@ -3,17 +3,8 @@ import PropTypes from "prop-types";
 
 import { setSideNavExpanded, isSideNavExpanded } from "../helpers";
 import { LevelOneContent } from "../Content";
-import {
-  NavLinkContainer,
-  NavLinkInline,
-  NavLinkDrawer,
-  NavLinkToggle,
-} from "../Links";
-import AnimationGroup from "../AnimationGroup/AnimationGroup";
-import { PracticeDetails, IndividualDetails } from "../Details";
-import SanitizedContent from "../../SanitizedContent";
-import * as SvgComponents from "../../../lib/SvgComponents.jsx";
-import CmsSwitchLink from "../Links/CmsSwitchLink";
+import DynamicContent from "./DynamicContent";
+import { NavLinkToggle } from "../Links";
 import defaultMarkup from "./default-markup";
 
 // TODO: For an SSR version of the SideNavUI we would need to have
@@ -112,164 +103,6 @@ const SideNavUI = ({
     };
   }, []);
 
-  const getDynamicContent = (contentItems, className, recursionId) => {
-    const { openDrawersByDefault, linkActiveFunc, linkCallback } = config;
-    let linkClass = isExpandedState ? "link-inline" : "link-collapsed";
-    const containerRecursionId = recursionId || 0;
-
-    const getDynamicIcon = (icon) => {
-      const Component = SvgComponents[icon];
-      return Component ? <Component /> : null;
-    };
-
-    const hasDarkerBackground = (darkerBackground) => {
-      return darkerBackground ? "hr-smaller-vertical-spacing" : "";
-    };
-
-    const itemsMarkup = (contentItems || []).map((item, index) => {
-      const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;
-
-      return (
-        {
-          divider: (
-            <AnimationGroup
-              display={isExpandedState}
-              key={key}
-              darkerBackground={item.darkerBackground}
-            >
-              <hr className={`${hasDarkerBackground(item.darkerBackground)}`} />
-            </AnimationGroup>
-          ),
-          container: getDynamicContent(
-            item.items,
-            item.className,
-            containerRecursionId + 1,
-          ),
-          linkBack: (
-            <AnimationGroup display={isExpandedState} key={key}>
-              <NavLinkInline
-                className="link-back"
-                icon={getDynamicIcon("ChevronLeft")}
-                url={item.url}
-                label={item.label}
-                linkCallback={linkCallback}
-                showLabel={true}
-              />
-            </AnimationGroup>
-          ),
-          linkHome: (
-            <AnimationGroup display={isExpandedState} key={key}>
-              <NavLinkInline
-                className="account-home-link"
-                icon={getDynamicIcon(item?.icon)}
-                url={item.url}
-                label={item.label}
-                linkCallback={linkCallback}
-                showLabel={true}
-              />
-            </AnimationGroup>
-          ),
-          practiceDetails: (
-            <AnimationGroup
-              display={isExpandedState}
-              className={"details"}
-              key={key}
-            >
-              <PracticeDetails
-                practiceName={item.practiceName}
-                {...(!item.practiceTin
-                  ? {}
-                  : { practiceTin: item.practiceTin })}
-                {...(!item.apmEntityId
-                  ? {}
-                  : { apmEntityId: item.apmEntityId })}
-                {...(!item.vgId ? {} : { vgId: item.vgId })}
-                {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
-                {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
-                {...(!item.subgroupId ? {} : { subgroupId: item.subgroupId })}
-              />
-            </AnimationGroup>
-          ),
-          individualDetails: (
-            <AnimationGroup display={isExpandedState} key={key}>
-              <IndividualDetails
-                individualName={item.individualName}
-                individualNpi={item.individualNpi}
-              />
-            </AnimationGroup>
-          ),
-          linkDrawer: (
-            <NavLinkDrawer
-              key={key}
-              isExpanded={isExpandedState}
-              isAlwaysOpen={item.isAlwaysOpen}
-              openByDefault={openDrawersByDefault}
-              rightIcon="chevron-down"
-              leftIcon={getDynamicIcon(item?.icon)}
-              className={linkClass}
-              label={item.label}
-              linkActiveFunc={linkActiveFunc}
-              linkCallback={linkCallback}
-              listOfLinks={item.items}
-              url={item.url}
-              sidebarExpand={expand}
-              isHighlighted={item.isHighlighted}
-              darkerBackground={item.darkerBackground}
-              leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
-              hideLabelSection={item.hideLabelSection}
-              largerDrawerBottomPadding={item.largerDrawerBottomPadding}
-            />
-          ),
-          custom: (
-            <AnimationGroup display={isExpandedState} key={key}>
-              <SanitizedContent
-                html={item.content}
-                customClassName={item.customClassName}
-              />
-            </AnimationGroup>
-          ),
-          switchLink: (
-            <AnimationGroup display={isExpandedState} key={key}>
-              <CmsSwitchLink
-                linkCallback={linkCallback}
-                label={item.label}
-                url={item.url}
-              />
-            </AnimationGroup>
-          ),
-        }[item.type] || (
-          <NavLinkInline
-            key={key}
-            icon={getDynamicIcon(item?.icon)}
-            className={item.className ? item.className : linkClass}
-            url={item.url}
-            label={item.label}
-            linkCallback={linkCallback}
-            showLabel={isExpandedState}
-            disabled={item.disabled}
-            target={item.target}
-          />
-        )
-      );
-    });
-
-    if (className === "link-container") {
-      return (
-        <div
-          className="animation-flat"
-          key={`nav-link-container-${recursionId}`}
-        >
-          <NavLinkContainer
-            listOfLinks={itemsMarkup}
-            linkActiveFunc={linkActiveFunc}
-          />
-        </div>
-      );
-    } else {
-      return <div className={className}>{itemsMarkup}</div>;
-    }
-  };
-
   const content = !items?.length ? (
     <LevelOneContent
       levelOneContent={sideNavContent}
@@ -277,10 +110,12 @@ const SideNavUI = ({
       config={config}
     />
   ) : (
-    getDynamicContent(
-      items,
-      "sidebar-content" + (isAltStyle ? " alt-style" : ""),
-    )
+    <DynamicContent
+      contentItems={items}
+      className={"sidebar-content" + (isAltStyle ? " alt-style" : "")}
+      config={config}
+      isExpandedState={isExpandedState}
+    />
   );
 
   return (

package/components/Tabs/TabPanel.js

@@ -0,0 +1,5 @@
+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

@@ -3,6 +3,8 @@ import Footer from "./Footer/FooterUI";
 import Header from "./Header/HeaderUI";
 import SideNav from "./SideNav/UI/SideNavUI";
 import Dropdown from "./Dropdown";
+import Tabs from "./Tabs/Tabs";
+import TabPanel from "./Tabs/TabPanel";
 import Infotip from "./Infotip";
 import {
   MyApplicationsIcon,
@@ -97,4 +99,6 @@ export {
   Infotip,
   SideNav,
   TextButton,
+  Tabs,
+  TabPanel,
 };