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

packages/ui/src/core/tabs/tabs.component.tsx

@@ -6,11 +6,11 @@ import Styled from './tabs.styles';
 
 const Tabs = intrinsicComponent<TabsProps, HTMLDivElement>((
   {
-    children, value, onChange
+    children, value, onChange, ...rest
   }: TabsProps,
   ref
 ): JSX.Element => (
-  <Styled.Tabs ref={ref}>
+  <Styled.Tabs ref={ref} {...rest}>
     {React.Children.map(children, (child, index) => {
       const childValue = child.props.value || index;
       const active = value === childValue;

packages/ui/stories/core/tabs.story.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import type { Meta, Story } from '@storybook/react';
+import _Tabs, { TabsProps } from '../../src/core/tabs';
+import Tab from '../../src/core/tab';
+import TabPanel from '../../src/core/tab-panel';
+import { StoryGroup } from './types';
+
+export const Tabs = _Tabs;
+
+export default {
+  title: `${StoryGroup.Navigation}/Tabs`,
+  component: Tabs,
+  excludeStories: ['Tabs'],
+
+  argTypes: {
+    children: {
+      description: 'Tabs contents, normally `Tab`s.',
+    }
+  }
+} as Meta;
+
+const defaultArgs = {
+};
+
+const BasicTemplate: Story<TabsProps> = ({
+  ...args
+}) => {
+  const tabs = ['Assets', 'Collections', 'Products'];
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+  const handleTabClick = (newValue: any): void => setActiveTabIndex(newValue);
+
+  return (
+    <div>
+      <Tabs value={activeTabIndex} onChange={handleTabClick} {...args}>
+        {tabs.map((tab, index) => (
+          <Tab
+            key={tab}
+            value={index}
+            label={tab}
+          />
+        ))}
+      </Tabs>
+
+      {tabs.map((tab, index) => (
+        <TabPanel
+          key={tab}
+          value={activeTabIndex}
+          index={index}
+        >
+          {tab}
+        </TabPanel>
+      ))}
+    </div>
+  );
+};
+
+// Basic
+export const Basic = BasicTemplate.bind({});
+Basic.args = { ...defaultArgs };