Move Tab components out into component directory

src/components/Tabs/Tab.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+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 tabParams = () => {
+    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: tabParams(), state: { breadcrumb } }}
+        replace={tab === currentTab}>
+        {children}
+      </Link>
+    </li>
+  )
+}
+
+export default Tab;

src/components/Tabs/Tabs.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './tabs.scss';
+
+
+const Tabs = ({ children, labelText }) => (
+  <div className="pf-c-tabs" aria-label={labelText}>
+    <ul className="pf-c-tabs__list">
+      {children}
+    </ul>
+  </div>
+);
+
+export default Tabs;

src/components/Tabs/tabs.scss

@@ -0,0 +1,51 @@
+.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;
+}