feat: Implemented Tabs component (#385)

lib/Tabs.js

@@ -0,0 +1,5 @@
+/*
+Copyright (C) 2018 The Trustees of Indiana University
+SPDX-License-Identifier: BSD-3-Clause
+*/
+export * from '../src/components/Tabs/index';

package.json

@@ -92,6 +92,10 @@
       "import": "./dist/rivet-react-table.js",
       "require": "./dist/rivet-react-table.cjs"
     },
+    "./Tabs": {
+      "import": "./dist/rivet-react-Tabs.js",
+      "require": "./dist/rivet-react-Tabs.cjs"
+    },
     "./Subnav": {
       "import": "./dist/rivet-react-subnav.js",
       "require": "./dist/rivet-react-subnav.cjs"

src/components/Tabs/TabPanel.jsx

@@ -0,0 +1,45 @@
+/*
+Copyright (C) 2018 The Trustees of Indiana University
+SPDX-License-Identifier: BSD-3-Clause
+*/
+import classNames from "classnames";
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import * as Rivet from "../util/Rivet";
+import { TestUtils } from "../util/TestUtils";
+
+const TabPanel = ({
+  children,
+  className,
+  controlId,
+  testMode = false,
+  title,
+  ...attrs
+}) => {
+  const classNameArr = [
+    "rvt-tabs__panel",
+    className
+  ]
+  return (
+    <div
+      aria-labelledby={controlId}
+      className={classNames(classNameArr)}
+      role="tabpanel"
+      tabIndex="0"
+      {...(testMode && { "data-testid": `${TestUtils.Tabs.panel}-${controlId}` })}
+      { ...attrs }
+      >
+      {children}
+    </div>
+  )
+};
+
+TabPanel.displayName = "TabPanel";
+TabPanel.propTypes = {
+  /** [Developer] Adds data-testId attributes for component testing */
+  testMode: PropTypes.bool,
+  /** The panel's title in the list of tabs*/
+  title: PropTypes.string.isRequired
+};
+
+export default Rivet.rivetize(TabPanel);

src/components/Tabs/TabPanel.md

@@ -0,0 +1 @@
+Use the `Tabs.Panel` to add a panel to `Tabs` list. See `Tabs` for usage.

src/components/Tabs/Tabs.jsx

@@ -0,0 +1,139 @@
+/*
+Copyright (C) 2018 The Trustees of Indiana University
+SPDX-License-Identifier: BSD-3-Clause
+*/
+import classNames from "classnames";
+import * as PropTypes from "prop-types";
+import React, { useState } from "react";
+import * as Rivet from "../util/Rivet";
+import { TestUtils } from "../util/TestUtils";
+import TabPanel from "./TabPanel"
+
+const createControlId = (id, index) => `tab_${id}_control_${index}`
+
+/**
+ * Allow users to switch between related groups of content without having to leave the page
+ */
+const Tabs = ({
+  children,
+  className,
+  id,
+  label,
+  initialTab,
+  testMode = false,
+  ...attrs
+}) => {
+  const validInit = initialTab && initialTab >=0 && initialTab < React.Children.count(children)
+  const [tabsId] = useState(id);
+  const [tabOpen, setOpen] = useState(validInit ? createControlId(tabsId, initialTab) : createControlId(tabsId, 0))
+
+  const tabs = !children ? [] :  React.Children.map(children, (child, index) => {
+    const { title } = child.props
+    const controlId = `tab_${tabsId}_control_${index}`
+    const onClick = () => {
+      setOpen(controlId);
+    }
+
+    const extraProps = {
+      controlId
+    }
+    if(tabOpen !== controlId) {
+      extraProps.hidden = true
+    }
+
+    const panel = React.cloneElement(child, extraProps)  
+
+    return {
+      onClick,
+      controlId,
+      label: title,
+      panel,
+      selected: tabOpen === controlId,
+      testMode
+    }
+  })
+
+  const panels = tabs.map(({panel}) => panel)
+
+  const classNameArr = [
+    "rvt-tabs",
+    className
+  ]
+
+  return (
+    <div
+      className={classNames(classNameArr)}
+      {...(testMode && { "data-testid": TestUtils.Tabs.container })}
+      {...attrs}
+    >
+      <Controls
+        label={label}
+        tabs={tabs}
+        testMode={testMode}
+      />
+      {panels}
+    </div>
+  )
+};
+
+Tabs.displayName = "Tabs";
+Tabs.propTypes = {
+  /** A unique identifier for the tab list */
+  id: PropTypes.string,
+  /** An unseen label for the menu to help with accessibility */
+  label: PropTypes.string.isRequired,
+  /** Index of initially opened tab starting at index 0 */
+  initialTab: PropTypes.number,
+  /** [Developer] Adds data-testId attributes for component testing */
+  testMode: PropTypes.bool
+};
+
+Tabs.Panel = TabPanel;
+
+const Controls = (props) => { 
+  const { label, tabs, testMode } = props
+  return (
+    <div
+      aria-label={label}
+      className="rvt-tabs__tablist"
+      role="tablist"
+      {...(testMode && { "data-testid": TestUtils.Tabs.controls })}
+    >
+      {tabs.map(tab => {
+        const { controlId } = tab
+        return (
+          <Control
+            key={`tab-${controlId}`}
+            {...tab}
+          />
+        )
+      })
+
+      }
+    </div>
+  )
+}
+
+const Control = (props) => {
+  const { controlId, label, onClick, selected, testMode } = props
+  const handleClick = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    onClick()
+  }
+  return (
+    <button
+      aria-selected={selected}
+      className="rvt-tabs__tab"
+      id={controlId}
+      onClick={handleClick}
+      role="tab"
+      {...(!selected && { "tabIndex": "-1" })}
+      {...(testMode && { "data-testid": `${TestUtils.Tabs.controls}-${controlId}` })}
+    >
+      {label}
+    </button>
+  )
+}
+
+export default Rivet.rivetize(Tabs);

src/components/Tabs/Tabs.md

@@ -0,0 +1,43 @@
+Use the tabs component to allow users to switch between related groups of content without having to leave the page.
+
+View the [Rivet documentation for Tabs](https://rivet.uits.iu.edu/components/tabs/).
+
+### Tabs Examples
+<!-- prettier-ignore-start -->
+```jsx
+<Tabs label="Basic Tab Example">
+    <Tabs.Panel title="Tab One">
+        <span class="rvt-ts-23 rvt-text-bold">Title of the Tab One Content</span>
+        <p>If initialTab is not set initial tab displayed is the first</p>
+    </Tabs.Panel>
+    <Tabs.Panel title="Tab Two">
+        <span class="rvt-ts-23 rvt-text-bold">Title of the Tab Two Content</span>
+        <p>Some content text</p>
+    </Tabs.Panel>
+    <Tabs.Panel title="Tab Three">
+        <span class="rvt-ts-23 rvt-text-bold">Title of the Tab Three Content</span>
+        <p>Some content text</p>
+    </Tabs.Panel>
+</Tabs>
+```
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+```jsx
+<Tabs label="Example of default " initialTab={1}>
+    <Tabs.Panel title="Tab One">
+        <span class="rvt-ts-23 rvt-text-bold">Title of the Tab One Content</span>
+        <p>Some content text</p>
+    </Tabs.Panel>
+    <Tabs.Panel title="Tab Two">
+        <span class="rvt-ts-23 rvt-text-bold">Title of the Tab Two Content</span>
+        <p>If initialTab is set the initial tab displayed based on the index provided to initialTab</p>
+    </Tabs.Panel>
+    <Tabs.Panel title="Tab Three">
+        <span class="rvt-ts-23 rvt-text-bold">Title of the Tab Three Content</span>
+        <p>Some content text</p>
+    </Tabs.Panel>
+</Tabs>
+```
+<!-- prettier-ignore-end -->
+