Docs

client/coral-ui/components/Tab.js

@@ -3,6 +3,10 @@ import styles from './Tab.css';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 
+/**
+ * The `Tab` component is used inside the `TabBar` Component, to
+ * render tabs.
+ */
 class Tab extends React.Component {
   handleTabClick = () => {
     if (this.props.onTabClick) {
@@ -69,7 +73,11 @@ class Tab extends React.Component {
 }
 
 Tab.propTypes = {
+
+  // className to be added to the root element.
   className: PropTypes.string,
+
+  // classNames allows full design customization of the component.
   classNames: PropTypes.shape({
     root: PropTypes.string,
     rootActive: PropTypes.string,
@@ -80,9 +88,22 @@ Tab.propTypes = {
     buttonSub: PropTypes.string,
     buttonSubActive: PropTypes.string,
   }),
+
+  // active indicates that this tab is currently active.
+  // This is injected by the `TabBar` component.
   active: PropTypes.bool,
+
+  // onTabClick is fired whenever the tab was clicked. The tabId is passed as
+  // the first argument.
   onTabClick: PropTypes.func,
+
+  // Sub indicates that this is a tab of a sub-tab-panel.
+  // This is injected by the `TabBar` component.
   sub: PropTypes.bool,
+
+  // `aria-controls` should be set to the `id` of the `TabContent` for accessibility.
+  // This is injected by the `TabBar` component.
+  'aria-controls': PropTypes.string,
 };
 
 export default Tab;

client/coral-ui/components/TabBar.js

@@ -4,6 +4,10 @@ import cn from 'classnames';
 import Tab from './Tab';
 import PropTypes from 'prop-types';
 
+/**
+ * The `TabBar` component accepts `Tab` components to create
+ * a tab bar.
+ */
 class TabBar extends React.Component {
 
   getRootClassName({className, classNames = {}, sub} = this.props) {
@@ -52,15 +56,31 @@ class TabBar extends React.Component {
 }
 
 TabBar.propTypes = {
+
+  // className to be added to the root element.
   className: PropTypes.string,
+
+  // classNames allows full design customization of the component.
   classNames: PropTypes.shape({
     root: PropTypes.string,
     rootSub: PropTypes.string,
   }),
+
+  // classNames to be passed to the children.
   tabClassNames: Tab.propTypes.classNames,
+
+  // activeTab should be set to the currently active tabId.
   activeTab: PropTypes.string,
+
+  // onTabClick is fired whenever the tab was clicked. The tabId is passed as
+  // the first argument.
   onTabClick: PropTypes.func,
+
+  // Sub indicates that this is a sub-tab-panel.
   sub: PropTypes.bool,
+
+  // `aria-controls` should be set to the `id` of the `TabContent` for accessibility.
+  'aria-controls': PropTypes.string,
 };
 
 export default TabBar;

client/coral-ui/components/TabContent.js

@@ -7,6 +7,10 @@ function getRootClassName(className) {
   return cn('talk-tab-content', className, styles.root);
 }
 
+/**
+ * The `TabContent` component accepts `TabPane` components to render
+ * the content of a `Tab`.
+ */
 const TabContent = ({children, className, activeTab, sub, ...rest}) => (
   <div
     {...rest}
@@ -25,8 +29,14 @@ const TabContent = ({children, className, activeTab, sub, ...rest}) => (
 );
 
 TabContent.propTypes = {
+
+  // className to be added to the root element.
   className: PropTypes.string,
+
+  // activeTab should be set to the currently active tabId.
   activeTab: PropTypes.string,
+
+  // Sub indicates that this component belongs to a sub-tab-panel.
   sub: PropTypes.bool,
 };
 

client/coral-ui/components/TabCount.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './TabCount.css';
+import PropTypes from 'prop-types';
 
 function getNumber(no) {
   let result = Number.parseInt(no);
@@ -24,6 +25,23 @@ function getRootClassName({className, active, sub}) {
   );
 }
 
-export default ({children, active, sub, className}) => (
+/**
+ * The `TabCount` renders a count number next to a tab name.
+ */
+const TabCount = ({children, active, sub, className}) => (
   <span className={getRootClassName({className, active, sub})}>{getNumber(children)}</span>
 );
+
+TabCount.propTypes = {
+
+  // className to be added to the root element.
+  className: PropTypes.string,
+
+  // active indicates that the related tab is currently active.
+  active: PropTypes.bool,
+
+  // Sub indicates that this component belongs to a sub-tab-panel.
+  sub: PropTypes.bool,
+};
+
+export default TabCount;

client/coral-ui/components/TabPane.js

@@ -6,6 +6,10 @@ function getRootClassName(className) {
   return cn('talk-pane', className);
 }
 
+/**
+ * The `TabPane` component is used inside the `TabContent` component to render
+ * the content of a `Tab`.
+ */
 const TabPane = ({children, className, tabId: _a, sub: _b, ...rest}) => (
   <div
     {...rest}
@@ -16,8 +20,14 @@ const TabPane = ({children, className, tabId: _a, sub: _b, ...rest}) => (
 );
 
 TabPane.propTypes = {
+
+  // className to be added to the root element.
   className: PropTypes.string,
+
   tabId: PropTypes.string,
+
+  // Sub indicates that this component belongs to a sub-tab-panel.
+  // This is injected by the `TabContent` component.
   sub: PropTypes.bool,
 };