Merge branch 'master' into moveTestContext

src/components/Tabs/RoutedTabs.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { shape, string, number, arrayOf } from 'prop-types';
+import { Tab, Tabs } from '@patternfly/react-core';
+import { withRouter } from 'react-router-dom';
+
+function RoutedTabs (props) {
+  const { history, tabsArray } = props;
+
+  const getActiveTabId = () => {
+    const match = tabsArray.find(tab => tab.link === history.location.pathname);
+    if (match) {
+      return match.id;
+    }
+    return 0;
+  };
+
+  function handleTabSelect (event, eventKey) {
+    const match = tabsArray.find(tab => tab.id === eventKey);
+    if (match) {
+      history.push(match.link);
+    }
+  }
+
+  return (
+    <Tabs
+      activeKey={getActiveTabId()}
+      onSelect={handleTabSelect}
+    >
+      {tabsArray.map(tab => (
+        <Tab
+          className={`${tab.name}`}
+          aria-label={`${tab.name}`}
+          eventKey={tab.id}
+          key={tab.id}
+          link={tab.link}
+          title={tab.name}
+        />
+      ))}
+    </Tabs>
+  );
+}
+RoutedTabs.propTypes = {
+  history: shape({
+    location: shape({
+      pathname: string.isRequired
+    }).isRequired,
+  }).isRequired,
+  tabsArray: arrayOf(shape({
+    id: number.isRequired,
+    link: string.isRequired,
+    name: string.isRequired,
+  })).isRequired,
+};
+
+export { RoutedTabs as _RoutedTabs };
+export default withRouter(RoutedTabs);

src/components/Tabs/Tab.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NavLink } from 'react-router-dom';
-import './tabs.scss';
-
-const Tab = ({ children, link, replace }) => (
-  <li className="pf-c-tabs__item">
-    <NavLink
-      to={link}
-      replace={replace}
-      className="pf-c-tabs__button"
-      activeClassName="pf-m-current"
-    >
-      {children}
-    </NavLink>
-  </li>
-);
-
-Tab.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]).isRequired,
-  link: PropTypes.string,
-  replace: PropTypes.bool,
-};
-
-Tab.defaultProps = {
-  link: null,
-  replace: false,
-};
-
-export default Tab;

src/components/Tabs/Tabs.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { Button, Tooltip } from '@patternfly/react-core';
-import { TimesIcon } from '@patternfly/react-icons';
-import './tabs.scss';
-
-const Tabs = ({ children, labelText, closeButton }) => (
-  <div
-    aria-label={labelText}
-    className="pf-c-tabs"
-  >
-    <ul className="pf-c-tabs__list">
-      {children}
-    </ul>
-    {closeButton
-      && (
-        <Tooltip
-          content={closeButton.text}
-          position="top"
-        >
-          <Link to={closeButton.link}>
-            <Button
-              variant="plain"
-              aria-label={closeButton.text}
-            >
-              <TimesIcon />
-            </Button>
-          </Link>
-        </Tooltip>
-      )
-    }
-  </div>
-);
-
-Tabs.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]).isRequired,
-  labelText: PropTypes.string,
-  closeButton: PropTypes.shape({
-    text: PropTypes.string,
-    link: PropTypes.string,
-  }),
-};
-
-Tabs.defaultProps = {
-  labelText: null,
-  closeButton: null,
-};
-
-export default Tabs;

src/components/Tabs/tabs.scss

@@ -1,71 +0,0 @@
-.pf-c-card__header {
-  --pf-c-card__header--PaddingBottom: 0;
-  --pf-c-card__header--PaddingX: 0;
-  --pf-c-card__header--PaddingRight: 0;
-  --pf-c-card__header--PaddingLeft: 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;
-
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-
-  &: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;
-    display: block;
-    font-weight: 700;
-
-    &:after {
-      content: '';
-      bottom: 0;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-
-  .pf-c-tabs__item:first-child .pf-c-tabs__button:before {
-    border-left: 0;
-  }
-
-  .pf-c-tabs__item:not(.pf-m-current):hover
-  .pf-c-tabs__button::after {
-    border-top: none;
-  }
-
-  .pf-c-tabs__item:hover
-  .pf-c-tabs__button:not(.pf-m-current)::after {
-    border-bottom: 3px solid var(--pf-global--Color--dark-200);
-    border-top: none;
-  }
-
-  .pf-c-tabs__button.pf-m-current {
-    color: var(--pf-c-tabs__item--m-current--Color);
-  }
-
-  .pf-c-tabs__button.pf-m-current::after {
-    content: '';
-    border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
-    border-top: none;
-    margin-left: 1px;
-  }
-}
-