docs(tabs): categorize under Controls

This also moves TabBody and Tab inside Tabs

Author: WesSouza

src/Tab/Tab.spec.tsx renamed to src/Tabs/Tab.spec.tsx

@@ -69,22 +69,25 @@ const StyledTab = styled.button<TabProps>`
   }
 `;
 
-const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
-  { value, onClick, selected = false, children, ...otherProps },
-  ref
-) {
-  return (
-    <StyledTab
-      aria-selected={selected}
-      selected={selected}
-      onClick={(e: React.MouseEvent<HTMLButtonElement>) => onClick?.(e, value)}
-      ref={ref}
-      role='tab'
-      {...otherProps}
-    >
-      {children}
-    </StyledTab>
-  );
-});
+const Tab = forwardRef<HTMLButtonElement, TabProps>(
+  ({ value, onClick, selected = false, children, ...otherProps }, ref) => {
+    return (
+      <StyledTab
+        aria-selected={selected}
+        selected={selected}
+        onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+          onClick?.(e, value)
+        }
+        ref={ref}
+        role='tab'
+        {...otherProps}
+      >
+        {children}
+      </StyledTab>
+    );
+  }
+);
+
+Tab.displayName = 'Tab';
 
 export { Tab, TabProps };

src/Tab/Tab.tsx renamed to src/Tabs/Tab.tsx

@@ -18,15 +18,16 @@ const StyledTabBody = styled.div`
   padding: 16px;
   font-size: 1rem;
 `;
-const TabBody = forwardRef<HTMLDivElement, TabBodyProps>(function TabBody(
-  { children, ...otherProps },
-  ref
-) {
-  return (
-    <StyledTabBody ref={ref} {...otherProps}>
-      {children}
-    </StyledTabBody>
-  );
-});
+const TabBody = forwardRef<HTMLDivElement, TabBodyProps>(
+  ({ children, ...otherProps }, ref) => {
+    return (
+      <StyledTabBody ref={ref} {...otherProps}>
+        {children}
+      </StyledTabBody>
+    );
+  }
+);
+
+TabBody.displayName = 'TabBody';
 
 export { TabBody, TabBodyProps };

src/TabBody/TabBody.spec.tsx renamed to src/Tabs/TabBody.spec.tsx

@@ -20,7 +20,7 @@ const Wrapper = styled.div`
 `;
 
 export default {
-  title: 'Tabs',
+  title: 'Controls/Tabs',
   component: Tabs,
   subcomponents: { Tab, TabBody },
   decorators: [story => <Wrapper>{story()}</Wrapper>]

src/TabBody/TabBody.tsx renamed to src/Tabs/TabBody.tsx

@@ -2,8 +2,8 @@ import React, { forwardRef, useMemo } from 'react';
 
 import styled from 'styled-components';
 import { noOp } from '../common/utils';
-import { TabProps } from '../Tab/Tab';
 import { CommonStyledProps } from '../types';
+import { TabProps } from './Tab';
 
 type TabsProps = {
   value?: TabProps['value'];
@@ -56,45 +56,55 @@ function splitToChunks<T>(array: T[], parts: number) {
   return result;
 }
 
-const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { value, onChange = noOp, children, rows = 1, ...otherProps },
-  ref
-) {
-  // split tabs into equal rows and assign key to each row
-  const tabRowsToRender = useMemo(() => {
-    const childrenWithProps =
-      React.Children.map(children, child => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-        const tabProps = {
-          selected: child.props.value === value,
-          onClick: onChange
-        };
-        return React.cloneElement(child, tabProps);
-      }) ?? [];
+const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ value, onChange = noOp, children, rows = 1, ...otherProps }, ref) => {
+    // split tabs into equal rows and assign key to each row
+    const tabRowsToRender = useMemo(() => {
+      const childrenWithProps =
+        React.Children.map(children, child => {
+          if (!React.isValidElement(child)) {
+            return null;
+          }
+          const tabProps = {
+            selected: child.props.value === value,
+            onClick: onChange
+          };
+          return React.cloneElement(child, tabProps);
+        }) ?? [];
 
-    const tabRows = splitToChunks(childrenWithProps, rows).map((tabs, i) => ({
-      key: i,
-      tabs
-    }));
+      const tabRows = splitToChunks(childrenWithProps, rows).map((tabs, i) => ({
+        key: i,
+        tabs
+      }));
 
-    // move row containing currently selected tab to the bottom
-    const currentlySelectedRowIndex = tabRows.findIndex(tabRow =>
-      tabRow.tabs.some(tab => tab.props.selected)
+      // move row containing currently selected tab to the bottom
+      const currentlySelectedRowIndex = tabRows.findIndex(tabRow =>
+        tabRow.tabs.some(tab => tab.props.selected)
+      );
+      tabRows.push(tabRows.splice(currentlySelectedRowIndex, 1)[0]);
+
+      return tabRows;
+    }, [children, onChange, rows, value]);
+
+    return (
+      <StyledTabs
+        {...otherProps}
+        isMultiRow={rows > 1}
+        role='tablist'
+        ref={ref}
+      >
+        {tabRowsToRender.map(row => (
+          <Row key={row.key}>{row.tabs}</Row>
+        ))}
+      </StyledTabs>
     );
-    tabRows.push(tabRows.splice(currentlySelectedRowIndex, 1)[0]);
+  }
+);
+
+Tabs.displayName = 'Tabs';
 
-    return tabRows;
-  }, [children, onChange, rows, value]);
+export * from './Tab';
 
-  return (
-    <StyledTabs {...otherProps} isMultiRow={rows > 1} role='tablist' ref={ref}>
-      {tabRowsToRender.map(row => (
-        <Row key={row.key}>{row.tabs}</Row>
-      ))}
-    </StyledTabs>
-  );
-});
+export * from './TabBody';
 
 export { Tabs, TabsProps };

src/Tabs/Tabs.mdx

@@ -24,8 +24,6 @@ export * from './ScrollView/ScrollView';
 export * from './Select/Select';
 export * from './Separator/Separator';
 export * from './Slider/Slider';
-export * from './Tab/Tab';
-export * from './TabBody/TabBody';
 export * from './Table/Table';
 export * from './TableBody/TableBody';
 export * from './TableDataCell/TableDataCell';