Move Tab components out into component directory

src/pages/Organizations/components/OrganizationDetail.jsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
-import { I18n } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
+import { I18n} from '@lingui/react';
 import {
   Card,
   CardHeader,
@@ -14,42 +14,10 @@ import {
   Route
 } from 'react-router-dom';
 
+import Tab from '../../../components/Tabs/Tab';
+import Tabs from '../../../components/Tabs/Tabs';
 import getTabName from '../utils';
 
-import '../tabs.scss';
-
-const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
-  const tabClasses = () => {
-    let classes = 'pf-c-tabs__item';
-    if (tab === currentTab) {
-      classes += ' pf-m-current';
-    }
-
-    return classes;
-  };
-
-  const updateTab = () => {
-    const params = new URLSearchParams(location.search);
-    if (params.get('tab') !== undefined) {
-      params.set('tab', tab);
-    } else {
-      params.append('tab', tab);
-    }
-
-    return `?${params.toString()}`;
-  };
-
-  return (
-    <li className={tabClasses()}>
-        <Link
-          className={'pf-c-tabs__button'}
-          to={{ pathname: `${match.url}`, search: updateTab(), state: { breadcrumb } }}
-          replace={tab === currentTab}>
-          {children}
-        </Link>
-    </li>
-  );
-};
 
 const OrganizationDetail = ({
   location,
@@ -61,6 +29,7 @@ const OrganizationDetail = ({
 }) => {
   // TODO: set objectName by param or through grabbing org detail get from api
   const { medium } = PageSectionVariants;
+  const tabList=['details', 'access', 'teams', 'notifications'];
 
   const deleteResourceView = () => (
     <Fragment>
@@ -93,34 +62,29 @@ const OrganizationDetail = ({
     </Fragment>
   );
 
-  const tabList = (tabs) => (
-    <I18n>
-      {({ i18n }) => (
-        <div className="pf-c-tabs" aria-label={i18n._(t`Organization detail tabs`)}>
-          <ul className="pf-c-tabs__list">
-            {tabs.map(tab => (
-              <Tab
-                key={tab}
-                tab={tab}
-                location={location}
-                match={match}
-                currentTab={currentTab}
-                breadcrumb={parentBreadcrumbObj}
-              >
-                {getTabName(tab)}
-              </Tab>
-            ))}
-          </ul>
-        </div>
-      )}
-    </I18n>
-  );
 
   return (
     <PageSection variant={medium}>
       <Card className="at-c-orgPane">
         <CardHeader>
-          {tabList(['details', 'access', 'teams', 'notifications'])}
+          <I18n>
+            {({ i18n }) => (
+              <Tabs labelText={i18n._(t`Organization detail tabs`)}>
+                {tabList.map(tab => (
+                  <Tab
+                    key={tab}
+                    tab={tab}
+                    location={location}
+                    match={match}
+                    currentTab={currentTab}
+                    breadcrumb={parentBreadcrumbObj}
+                  >
+                  {getTabName(tab)}
+                  </Tab>
+                ))}
+              </Tabs>
+            )}
+          </I18n>
         </CardHeader>
         <CardBody>
           {(currentTab && currentTab !== 'details') ? (

src/pages/Organizations/tabs.scss

@@ -1,51 +0,0 @@
-.at-c-orgPane {
-  a {
-    display: block;
-  }
-}
-
-.pf-c-card__header {
-  --pf-c-card__header--PaddingBottom: 0;
-  --pf-c-card__header--PaddingLeft: 0;
-  --pf-c-card__header--PaddingRight: 0;
-  --pf-c-card__header--PaddingTop: 0;
-}
-
-.pf-c-tabs {
-  --pf-global--link--Color: #484848;
-  --pf-global--link--Color--hover: #484848;
-  --pf-global--link--TextDecoration--hover: none;
-
-  &:before {
-    border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor);
-    border-top: 1px solid var(--pf-c-tabs__item--BorderColor);
-    bottom: 0;
-    content: " ";
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  .pf-c-tabs__button {
-    --pf-c-tabs__button--PaddingLeft: 20px;
-    --pf-c-tabs__button--PaddingRight: 20px;
-  }
-
-  .pf-c-tabs__item.pf-m-current
-  .pf-c-tabs__button::after {
-    border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
-    border-top: none;
-  }
-
-  .pf-c-tabs__item:not(.pf-m-current):hover
-  .pf-c-tabs__button::after {
-    border-bottom: 3px solid var(--pf-global--Color--dark-200);
-    border-top: none;
-  }
-}
-
-.pf-c-breadcrumb__item.heading {
-  flex: 100%;
-  font-size: 20px;
-}