STCOM-922: Add tabbed interface components

index.js

@@ -61,6 +61,13 @@ export {
   expandAllFunction
 } from './lib/Accordion';
 
+export {
+  Tabs,
+  Tab,
+  TabList,
+  TabPanel
+} from './lib/Tabs';
+
 /* misc */
 export { default as Icon } from './lib/Icon';
 export { default as IconButton } from './lib/IconButton';

lib/Tabs/Tabs.css

@@ -0,0 +1,42 @@
+@import '@folio/stripes-components/lib/variables';
+
+ul {
+    margin: 0;
+}
+
+.tabList {
+    display: flex;
+    list-style-type: none;
+    padding: 0;
+}
+
+.tab {
+    padding: 8px;
+    cursor: pointer;
+    text-align: center;
+    font-weight: var(--text-weight-button);
+    font-size: var(--font-size-medium);
+    transition: background-color 0.25s, color 0.25s, opacity 0.07s;
+    border: 1px solid var(--primary);
+    border-right: 0;
+    border-bottom: 0;
+}
+.tab:last-child {
+    border-right: 1px solid var(--primary);
+}
+.tab.default {
+    background-color: transparent;
+    color: var(--primary);
+}
+.tab.primary {
+    background-color: var(--primary);
+    color: #fff;
+}
+.tab:hover {
+    opacity: 0.9;
+}
+
+.tabPanel {
+    border: 1px solid var(--primary);
+    padding: 15px;
+}

lib/Tabs/Tabs.js

@@ -0,0 +1,195 @@
+import React, { useContext, cloneElement, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { TabsContext, TabsContextProvider } from './TabsContext';
+
+import css from './Tabs.css';
+
+const Tabs = (props) => {
+  const { children } = props;
+
+  const childrenArray = Array.isArray(children) ? children : [children];
+  const childIndexes = {};
+  const childrenWithIndex = childrenArray.flat().map((child, index) => {
+    // children can consist of <TabList> & <TabPanel> components,
+    // ensure that the children of different types get correct indexes
+    const current = childIndexes[child.type.name];
+    childIndexes[child.type.name] = current >= 0 ? current + 1 : 0;
+    return cloneElement(
+      child,
+      {
+        index: childIndexes[child.type.name],
+        key: index
+      }
+    );
+  });
+
+  return (
+    <TabsContextProvider>
+      {childrenWithIndex}
+    </TabsContextProvider>
+  );
+};
+
+Tabs.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.array
+  ])
+};
+
+const TabList = (props) => {
+  const {
+    ariaLabel,
+    children
+  } = props;
+
+  const {
+    selectedTabIndex,
+    setSelectedTabIndex
+  } = useContext(TabsContext);
+
+  // Add the index to each child, which will allow us to ensure the current
+  // tab is styled correctly and has focus etc.
+  const childrenArray = Array.isArray(children) ? children : [children];
+  const childrenWithIndex = childrenArray.map((child, index) => cloneElement(child, { index, key: index }));
+
+  // Handle setting of the next index when navigating
+  // by keyboard
+  const calculateNextIndex = (action) => {
+    if (action === 'increase') {
+      const maxIndex = children.length - 1;
+      return selectedTabIndex < maxIndex ?
+        selectedTabIndex + 1 :
+        selectedTabIndex;
+    }
+    if (action === 'decrease') {
+      return selectedTabIndex > 0 ?
+        selectedTabIndex - 1 :
+        selectedTabIndex;
+    }
+    return selectedTabIndex;
+  };
+
+  // Handle the right and left cursor keys for navigating
+  // via keyboard.
+  const handleKeyDown = (e) => {
+    switch (e.keyCode) {
+      case 39: // Right arrow
+        setSelectedTabIndex(calculateNextIndex('increase'));
+        break;
+      case 37: // Left arrow
+        setSelectedTabIndex(calculateNextIndex('decrease'));
+        break;
+      default:
+    }
+  };
+
+  return (
+    <ul
+      onKeyDown={handleKeyDown}
+      aria-label={ariaLabel}
+      className={css.tabList}
+      role="tablist"
+    >
+      {childrenWithIndex}
+    </ul>
+  );
+};
+
+TabList.propTypes = {
+  ariaLabel: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.array
+  ])
+};
+
+const Tab = (props) => {
+  const {
+    children,
+    index
+  } = props;
+
+  const thisTab = useRef(null);
+
+  const {
+    selectedTabIndex,
+    setSelectedTabIndex
+  } = useContext(TabsContext);
+
+  // Ensure the correct tab has focus
+  useEffect(() => {
+    if (selectedTabIndex === index) {
+      thisTab.current.focus();
+    }
+  // Having index as a dep makes no sense, it's never
+  // going to change
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTabIndex]);
+
+  const activeStyle = selectedTabIndex === index ? css.primary : css.default;
+  const finalStyles = [css.tab, activeStyle].join(' ');
+
+  return (
+    // Keyboard based interactivity with the tabs is handled in TabList
+    // so we don't need a onKey* handler here
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    <li
+      ref={thisTab}
+      tabIndex={selectedTabIndex === index ? 0 : -1}
+      onClick={() => setSelectedTabIndex(index)}
+      aria-selected={selectedTabIndex === index}
+      aria-controls={`tabpanel-${index}`}
+      className={finalStyles}
+      id={`tab-${index}`}
+      role="tab"
+    >
+      {children}
+    </li>
+  );
+};
+
+Tab.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  index: PropTypes.number
+};
+
+const TabPanel = (props) => {
+  const {
+    children,
+    index
+  } = props;
+
+  const { selectedTabIndex } = useContext(TabsContext);
+
+  return selectedTabIndex === index && (
+    <div
+      tabIndex={selectedTabIndex === index ? 0 : -1}
+      id={`tabpanel-${index}`}
+      className={css.tabPanel}
+      role="tabpanel"
+    >
+      {children}
+    </div>
+  );
+};
+
+TabPanel.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string
+  ]),
+  index: PropTypes.number
+};
+
+export {
+  TabList,
+  Tabs,
+  Tab,
+  TabPanel
+};

lib/Tabs/TabsContext.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const TabsContext = React.createContext();
+
+const TabsContextProvider = ({ children }) => {
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const defaultContext = {
+    selectedTabIndex,
+    setSelectedTabIndex
+  };
+
+  return (
+    <TabsContext.Provider value={defaultContext}>
+      {children}
+    </TabsContext.Provider>
+  );
+};
+
+TabsContextProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.array
+  ])
+};
+
+export {
+  TabsContext,
+  TabsContextProvider
+};

lib/Tabs/index.js

@@ -0,0 +1 @@
+export { Tabs, TabList, Tab, TabPanel } from './Tabs';

lib/Tabs/tests/Tabs-test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  describe,
+  beforeEach,
+  it,
+} from 'mocha';
+
+import {
+  TabList as TabListInteractor,
+  Tab as TabInteractor,
+  TabPanel as TabPanelInteractor,
+  including,
+  Keyboard
+} from '@folio/stripes-testing';
+
+import { mount } from '../../../tests/helpers';
+import { Tabs, Tab, TabList, TabPanel } from '../Tabs';
+
+const doMount = () => {
+  return mount(
+    <Tabs>
+      <TabList ariaLabel="My test aria label">
+        <Tab>Tab 0</Tab>
+        <Tab>Tab 1</Tab>
+        <Tab>Tab 2</Tab>
+      </TabList>
+      <TabPanel><>Panel 0</></TabPanel>
+      <TabPanel><>Panel 1</></TabPanel>
+      <TabPanel><>Panel 2</></TabPanel>
+    </Tabs>
+  );
+};
+
+describe('Tabs', () => {
+  beforeEach(async () => {
+    await doMount();
+  });
+  const tabList = TabListInteractor();
+  const tab = TabInteractor('Tab 1');
+  it('should render ul element', async () => {
+    await tabList.exists();
+  });
+  it('ul element should have aria-label attribute containing passed prop', async () => {
+    await tabList.has({ ariaLabel: 'My test aria label' });
+  });
+  it('renders correct number of tabs', async () => {
+    await tabList.has({ tabsLength: 3 });
+  });
+  it('clicking a tab displays the appropriate tab panel', async () => {
+    const tabPanel = TabPanelInteractor('Panel 1');
+    await tab.click();
+    await tabPanel.exists();
+  });
+  it('clicking a tab highlights it', async () => {
+    await tab.click();
+    await tab.has({ className: including('primary') });
+  });
+  it('clicking a tab gives it focus', async () => {
+    await tab.click();
+    await tab.has({ focused: true });
+  });
+  it('pressing right arrow when a tab has focus displays the next tab panel', async () => {
+    const tabPanel2 = await TabPanelInteractor('Panel 2');
+    await tab.click();
+    await Keyboard.arrowRight();
+    await tabPanel2.exists();
+  });
+  it('pressing left arrow when a tab has focus displays the previous tab panel', async () => {
+    const tabPanel0 = await TabPanelInteractor('Panel 0');
+    await tab.click();
+    await Keyboard.arrowLeft();
+    await tabPanel0.exists();
+  });
+  it('pressing left arrow when the first tab has focus displays does nothing', async () => {
+    const tab0 = TabInteractor('Tab 0');
+    const tabPanel0 = await TabPanelInteractor('Panel 0');
+    await tab0.click();
+    await Keyboard.arrowLeft();
+    await tab0.has({ focused: true });
+    await tabPanel0.exists();
+  });
+  it('pressing right arrow when the last tab has focus displays does nothing', async () => {
+    const tab2 = TabInteractor('Tab 2');
+    const tabPanel2 = await TabPanelInteractor('Panel 2');
+    await tab2.click();
+    await Keyboard.arrowRight();
+    await tab2.has({ focused: true });
+    await tabPanel2.exists();
+  });
+});