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

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

@@ -15,10 +15,8 @@ const Tab = intrinsicComponent<TabProps, HTMLDivElement>((
     {...rest}
     className={`${className}${active ? ' active' : ''}`}
   >
-    <Styled.Tab {...rest} className={`${className}${active ? ' active' : ''}`}>
-      {icon && <Styled.Icon>{icon}</Styled.Icon>}
-      {label && <Styled.Label>{label}</Styled.Label>}
-    </Styled.Tab>
+    {icon && <Styled.Icon>{icon}</Styled.Icon>}
+    {label && <Styled.Label>{label}</Styled.Label>}
   </Styled.Tab>
 ));
 

packages/ui/src/core/tab/tab.styles.ts

@@ -11,7 +11,7 @@ const Tab = styled.div.attrs({
   ({ theme: { palette, typography: { font } } }: WithTheme) => css`
     ${font['label-normal']}
     position: relative;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     text-align: center;
     color: ${palette[PColor.TextPrimary]};

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

@@ -1 +1,35 @@
-// TODO
+import React from 'react';
+import type { Meta, Story } from '@storybook/react';
+import AssetsIcon from '@scaleflex/icons/assets';
+import _Tab, { TabProps } from '../../src/core/tab';
+import { StoryGroup } from './types';
+
+export const Tab = _Tab;
+
+export default {
+  title: `${StoryGroup.DataDisplay}/Tab`,
+  component: Tab,
+  excludeStories: ['Tab'],
+} as Meta;
+
+const defaultArgs = {
+  label: 'Assets',
+  icon: <AssetsIcon size={10} />,
+};
+
+const BasicTemplate: Story<TabProps> = ({
+  ...args
+}) => (
+  <Tab {...args} />
+);
+
+// Basic
+export const Basic = BasicTemplate.bind({});
+Basic.args = { ...defaultArgs };
+
+// Active
+export const Active = BasicTemplate.bind({});
+Active.args = {
+  ...defaultArgs,
+  active: true,
+};