qpp-style 9.39.2 → 9.41.0

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

@@ -2,6 +2,9 @@ import Button, { TextButton } from "./Button";
 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,
@@ -87,4 +90,15 @@ const Icons = {
   WiManageGroupIcon,
 };
 
-export { Button, Footer, Header, Icons, Infotip, SideNav, TextButton };
+export {
+  Button,
+  Dropdown,
+  Footer,
+  Header,
+  Icons,
+  Infotip,
+  SideNav,
+  TextButton,
+  Tabs,
+  TabPanel,
+};