feat(TabPanel): add story and throw rest props to main component element

packages/ui/src/core/tab-panel/tab-panel.component.tsx

@@ -6,7 +6,7 @@ import Styled from './tab-panel.styles';
 
 const TabPanel = intrinsicComponent<TabPanelProps, HTMLDivElement>((
   {
-    children, value, index
+    value, index, ...rest
   }: TabPanelProps,
   ref
 ): JSX.Element | null => {
@@ -15,15 +15,13 @@ const TabPanel = intrinsicComponent<TabPanelProps, HTMLDivElement>((
   }
 
   return (
-    <Styled.TabPanel ref={ref}>
-      {children}
-    </Styled.TabPanel>
+    <Styled.TabPanel ref={ref} {...rest} />
   );
 });
 
 TabPanel.propTypes = {
   value: PT.oneOfType([PT.string, PT.number]).isRequired,
-  index: PT.number.isRequired,
+  index: PT.oneOfType([PT.string, PT.number]).isRequired,
   children: PT.node,
 };
 

packages/ui/src/core/tab-panel/tab-panel.props.d.ts

@@ -1,5 +1,5 @@
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string | number;
-  index: number;
+  index: string | number;
   children?: ReactNode;
 }

packages/ui/stories/core/tab-panel.story.tsx

@@ -1 +1,34 @@
-// TODO
+import React from 'react';
+import type { Meta, Story } from '@storybook/react';
+import _TabPanel, { TabPanelProps } from '../../src/core/tab-panel';
+import { StoryGroup } from './types';
+
+export const TabPanel = _TabPanel;
+
+export default {
+  title: `${StoryGroup.DataDisplay}/TabPanel`,
+  component: TabPanel,
+  excludeStories: ['TabPanel'],
+
+  argTypes: {
+    value: {
+      description: 'TabPanel is visible only when value is equal to index'
+    }
+  }
+} as Meta;
+
+const defaultArgs = {
+  children: 'Asset tab content',
+  value: 1,
+  index: 1,
+};
+
+const BasicTemplate: Story<TabPanelProps> = ({
+  ...args
+}) => (
+  <TabPanel {...args} />
+);
+
+// Basic
+export const Basic = BasicTemplate.bind({});
+Basic.args = { ...defaultArgs };