feat: Add prototype of Tabs component (#101)

* Add prototype of Tabs component

* Improve markup

Author: tassoevan

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Default_Story.png

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { createStyledComponent } from '../../styles';
+
+const Container = createStyledComponent('rcx-tabs', 'div');
+const ItemsWrapper = createStyledComponent('rcx-tabs__wrapper', 'div');
+const ItemContainer = createStyledComponent('rcx-tabs__item', 'button');
+
+export const Tabs = React.forwardRef(function Tabs({
+  children,
+  ...props
+}, ref) {
+  return <Container ref={ref} {...props}>
+    <ItemsWrapper children={children} role='tablist' />
+  </Container>;
+});
+
+Tabs.displayName = 'Tabs';
+
+export const TabsItem = React.forwardRef(function TabsItem({
+  active,
+  ...props
+}, ref) {
+  return <ItemContainer
+    aria-selected={active ? 'true' : 'false'}
+    mod-active={active}
+    ref={ref}
+    role='tab'
+    {...props}
+  />;
+});
+
+Tabs.Item = TabsItem;

packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Default_Story.png

@@ -1,8 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { Tabs } from './index';
-
+import { Tabs } from '../..';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

packages/fuselage/src/components/Tabs/index.js

@@ -0,0 +1,25 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { Tabs } from '../..';
+
+<Meta title='Misc|Tabs' parameters={{ jest: ['Tabs/spec'] }} />
+
+# Tabs
+
+<Preview>
+  <Story name='Default'>
+    <Tabs>
+      <Tabs.Item active>Tab text 1</Tabs.Item>
+      <Tabs.Item>Tab text 2</Tabs.Item>
+      <Tabs.Item>Tab text 3</Tabs.Item>
+    </Tabs>
+  </Story>
+</Preview>
+
+### Tabs
+
+<Props of={Tabs} />
+
+### Tabs.Item
+
+<Props of={Tabs.Item} />

packages/fuselage/src/components/_Tabs/spec.js.disabled packages/fuselage/src/components/Tabs/spec.js

@@ -0,0 +1,42 @@
+.rcx-tabs {
+  @include box;
+
+  margin-block-end: $spaces-x8;
+
+  border-bottom: #{ $borders-width-x1 } solid #{ map-get($colors, dark400) };
+}
+
+.rcx-tabs__wrapper {
+  display: flex;
+  flex: 1 1 0;
+
+  width: 100%;
+  margin-inline: calc(-1 * #{ $spaces-x8 });
+  margin-block-end: calc(-1 * #{ $borders-width-x1 });
+}
+
+.rcx-tabs__item {
+  @include box;
+
+  flex: 0 0 auto;
+
+  margin-inline: $spaces-x8;
+  padding-block: $spaces-x8;
+  padding-inline: $spaces-x32;
+
+  color: map-get($colors, dark600);
+  border-style: solid;
+  border-color: transparent;
+
+  background-color: transparent;
+  border-block-end-width: $borders-width-x4;
+
+  @include clickable;
+  @include subtitle;
+  @include subtitle-bold;
+
+  &--active {
+    color: map-get($colors, blue500);
+    border-block-end-color: map-get($colors, blue500);
+  }
+}

packages/fuselage/src/components/Tabs/stories.mdx

@@ -20,6 +20,7 @@ export * from './Scrollable';
 export * from './SearchInput';
 export * from './SelectInput';
 export * from './Subtitle';
+export * from './Tabs';
 export * from './TelephoneInput';
 export * from './Text';
 export * from './TextAreaInput';

packages/fuselage/src/components/Tabs/styles.scss

@@ -15,6 +15,7 @@
 @import './Subtitle/styles.scss';
 @import './RadioButton/styles.scss';
 @import './Scrollable/styles.scss';
+@import './Tabs/styles.scss';
 @import './Text/styles.scss';
 @import './Tile/styles.scss';
 @import './ToggleSwitch/styles.scss';

packages/fuselage/src/components/_Tab/index.js.disabled

@@ -1,6 +1,8 @@
 @import '~@rocket.chat/fuselage-tokens/borders.scss';
 
+$borders-width-x1: theme('borders-width-x1', to-rem(1));
 $borders-width-x2: theme('borders-width-x2', to-rem(get-map-value($borders, widths, 1)));
+$borders-width-x4: theme('borders-width-x1', to-rem(4));
 
 $borders-radius-x2: theme('borders-radius-x2', to-rem(get-map-value($borders, radii, 1)));
 $borders-radius-full: 9999px;