feat: adds sub-component mapping to tabs and tooltips

Author: geotrev

packages/tabs/demo/stories/TabsStory.tsx

@@ -6,27 +6,27 @@
  */
 
 import React from 'react';
-import { Story } from '@storybook/react';
-import { ITabsProps, Tab, TabList, TabPanel, Tabs } from '@zendeskgarden/react-tabs';
+import { StoryFn } from '@storybook/react';
+import { ITabsProps, Tabs } from '@zendeskgarden/react-tabs';
 import { ITab } from './types';
 
 interface IArgs extends ITabsProps {
   tabs: ITab[];
 }
 
-export const TabsStory: Story<IArgs> = ({ tabs, ...args }) => (
+export const TabsStory: StoryFn<IArgs> = ({ tabs, ...args }) => (
   <Tabs {...args}>
-    <TabList>
+    <Tabs.TabList>
       {tabs.map(tab => (
-        <Tab key={tab.value} item={tab.value} disabled={tab.disabled}>
+        <Tabs.Tab key={tab.value} item={tab.value} disabled={tab.disabled}>
           {tab.value}
-        </Tab>
+        </Tabs.Tab>
       ))}
-    </TabList>
+    </Tabs.TabList>
     {tabs.map(tab => (
-      <TabPanel key={tab.value} item={tab.value}>
+      <Tabs.TabPanel key={tab.value} item={tab.value}>
         {tab.panel}
-      </TabPanel>
+      </Tabs.TabPanel>
     ))}
   </Tabs>
 );

packages/tabs/src/elements/Tabs.tsx

@@ -15,11 +15,11 @@ import { ITabsProps } from '../types';
 import { toTabs } from '../utils/toTabs';
 import { TabsContext } from '../utils/useTabsContext';
 import { StyledTabs } from '../styled/StyledTabs';
+import { Tab } from './Tab';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
 
-/**
- * @extends HTMLAttributes<HTMLDivElement>
- */
-export const Tabs = forwardRef<HTMLDivElement, ITabsProps>(
+export const TabsComponent = forwardRef<HTMLDivElement, ITabsProps>(
   (
     { isVertical, children, onChange, selectedItem: controlledSelectedItem, ...otherProps },
     ref
@@ -55,14 +55,27 @@ export const Tabs = forwardRef<HTMLDivElement, ITabsProps>(
   }
 );
 
-Tabs.propTypes = {
+TabsComponent.propTypes = {
   isVertical: PropTypes.bool,
   selectedItem: PropTypes.any,
   onChange: PropTypes.func
 };
 
-Tabs.defaultProps = {
+TabsComponent.defaultProps = {
   isVertical: false
 };
 
-Tabs.displayName = 'Tabs';
+TabsComponent.displayName = 'Tabs';
+
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export const Tabs = TabsComponent as typeof TabsComponent & {
+  Tab: typeof Tab;
+  TabList: typeof TabList;
+  TabPanel: typeof TabPanel;
+};
+
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.TabPanel = TabPanel;

packages/tabs/src/index.ts

@@ -5,9 +5,13 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+/** @deprecated use `Tabs.Tab` instead */
 export { Tab } from './elements/Tab';
+/** @deprecated use `Tabs.TabList` instead */
 export { TabList } from './elements/TabList';
+/** @deprecated use `Tabs.TabPanel` instead */
 export { TabPanel } from './elements/TabPanel';
+
 export { Tabs } from './elements/Tabs';
 
 export type { ITabProps, ITabPanelProps, ITabsProps } from './types';

packages/tooltips/demo/stories/TooltipStory.tsx

@@ -6,26 +6,26 @@
  */
 
 import React from 'react';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import { PALETTE } from '@zendeskgarden/react-theming';
 import { Col, Grid, Row } from '@zendeskgarden/react-grid';
-import { ITooltipProps, Paragraph, Title, Tooltip } from '@zendeskgarden/react-tooltips';
+import { ITooltipProps, Tooltip } from '@zendeskgarden/react-tooltips';
 import { ITooltipContent } from './types';
 
 interface IArgs extends Omit<ITooltipProps, 'content'> {
   content: ITooltipContent;
 }
 
-export const TooltipStory: Story<IArgs> = ({ content, ...args }: IArgs) => (
+export const TooltipStory: StoryFn<IArgs> = ({ content, ...args }: IArgs) => (
   <Grid>
     <Row style={{ height: 'calc(100vh - 80px)' }}>
       <Col textAlign="center" alignSelf="center">
         <Tooltip
           {...args}
           content={
             <>
-              <Title>{content.title}</Title>
-              <Paragraph>{content.paragraph}</Paragraph>
+              <Tooltip.Title>{content.title}</Tooltip.Title>
+              <Tooltip.Paragraph>{content.paragraph}</Tooltip.Paragraph>
             </>
           }
         >

packages/tooltips/src/elements/Tooltip.tsx

@@ -17,11 +17,10 @@ import { Modifiers } from 'popper.js';
 import { getPopperPlacement, getRtlPopperPlacement } from '../utils/gardenPlacements';
 import { StyledTooltipWrapper, StyledTooltip } from '../styled';
 import { ITooltipProps, PLACEMENT, SIZE, TYPE } from '../types';
+import { Paragraph } from './Paragraph';
+import { Title } from './Title';
 
-/**
- * @extends HTMLAttributes<HTMLDivElement>
- */
-export const Tooltip = ({
+export const TooltipComponent = ({
   id,
   delayMS,
   isInitialVisible,
@@ -146,9 +145,9 @@ export const Tooltip = ({
   );
 };
 
-Tooltip.displayName = 'Tooltip';
+TooltipComponent.displayName = 'Tooltip';
 
-Tooltip.propTypes = {
+TooltipComponent.propTypes = {
   appendToNode: PropTypes.any,
   hasArrow: PropTypes.bool,
   delayMS: PropTypes.number,
@@ -164,11 +163,22 @@ Tooltip.propTypes = {
   refKey: PropTypes.string
 };
 
-Tooltip.defaultProps = {
+TooltipComponent.defaultProps = {
   hasArrow: true,
   eventsEnabled: true,
   type: 'dark',
   placement: 'top',
   delayMS: 500,
   refKey: 'ref'
 };
+
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export const Tooltip = TooltipComponent as typeof TooltipComponent & {
+  Paragraph: typeof Paragraph;
+  Title: typeof Title;
+};
+
+Tooltip.Paragraph = Paragraph;
+Tooltip.Title = Title;

packages/tooltips/src/index.ts

@@ -5,8 +5,11 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-export { Tooltip } from './elements/Tooltip';
+/** @deprecated use `Tooltip.Paragraph` instead */
 export { Paragraph } from './elements/Paragraph';
+/** @deprecated use `Tooltip.Title` instead */
 export { Title } from './elements/Title';
 
+export { Tooltip } from './elements/Tooltip';
+
 export type { ITooltipProps } from './types';