feat: EmbeddedTabs (#253)

Author: snqb

src/components/embedded-tabs/EmbeddedTabs.tsx

@@ -0,0 +1,52 @@
+import React, { FC, useState } from 'react';
+import { Box, BoxProps } from 'rebass';
+import * as S from './styles';
+import Tab, { Props as EmbeddedTabItem } from './Tab';
+
+export interface Props extends Omit<BoxProps, 'css'> {
+  tabs: EmbeddedTabItem[];
+  initialTab?: number;
+  onTabChange?: (tabIndex: number) => void;
+}
+
+const EmbeddedTabs: FC<Props> = ({
+  tabs,
+  onTabChange,
+  initialTab = 0,
+  sx = {},
+  ...boxProps
+}: Props) => {
+  const [activeIndex, setActiveIndex] = useState(initialTab);
+
+  const handleTabClick = (newIndex: number) => {
+    setActiveIndex(newIndex);
+
+    if (onTabChange) {
+      onTabChange(newIndex);
+    }
+  };
+
+  return (
+    <Box sx={{ ...S.tabsList, ...sx }} {...boxProps}>
+      {tabs.map(({ title, onClick: onTabClick, ...tabProps }, index) => (
+        <Tab
+          key={title}
+          title={title}
+          active={index === activeIndex}
+          onClick={() => {
+            if (onTabClick) {
+              onTabClick();
+            }
+
+            handleTabClick(index);
+          }}
+          {...tabProps}
+        />
+      ))}
+      {/* This box is needed to draw the horizontal line up to the full width, it's a stylistic decision */}
+      <Box tabIndex={-1} sx={S.tabsLineEnding} />
+    </Box>
+  );
+};
+
+export default EmbeddedTabs;

src/components/embedded-tabs/Tab.tsx

@@ -0,0 +1,31 @@
+import * as R from 'ramda';
+import React, { FC } from 'react';
+import { Box, SxStyleProp } from 'rebass';
+import Label from '../label';
+import * as S from './styles';
+
+export interface Props {
+  title: string;
+  active?: boolean;
+  onClick?: () => any;
+  disabled?: boolean;
+}
+
+const getStyles = ({ active, disabled }: Props) =>
+  ({
+    ...S.tab,
+    ...(active ? S.activeTab : {}),
+    ...(disabled ? S.disabledTab : {}),
+  } as SxStyleProp);
+
+const Tab: FC<Props> = (props) => {
+  const propagatedProps = R.pick(['disabled', 'onClick'], props);
+
+  return (
+    <Box sx={getStyles(props)} {...propagatedProps}>
+      <Label pb="1px">{props.title}</Label>
+    </Box>
+  );
+};
+
+export default Tab;

src/components/embedded-tabs/embedded-tabs.stories.tsx

@@ -0,0 +1,63 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React, { useState } from 'react';
+import { Box } from 'rebass';
+import Labeling from '../typography/labeling';
+import EmbeddedTabs, { Props } from './EmbeddedTabs';
+
+export default {
+  title: 'Quartz/EmbeddedTabs',
+  component: EmbeddedTabs,
+} as Meta;
+
+const argTypes = {
+  tabs: {
+    required: true,
+    description: 'A list of tab items.',
+  },
+  initialTab: {
+    required: false,
+    description: 'The initial tab to be selected.',
+    default: 0,
+  },
+  onTabChange: {
+    description: 'Callback to be called when a tab is selected.',
+    required: false
+  },
+};
+
+const tabs = [
+  {
+    title: 'Validation Reports',
+  },
+  {
+    title: 'Results',
+  },
+  {
+    title: 'Statistics',
+  },
+  {
+    title: 'And a disabled tab',
+    disabled: true,
+  },
+];
+
+const Template: Story<Props> = (props) => {
+  const [activeTab, setActiveTab] = useState(props.initialTab ?? 0);
+
+  return (
+    <Box width="700px">
+      <EmbeddedTabs {...props} onTabChange={setActiveTab} />
+      <Box mt={3}>
+        <Labeling bold>Active tab: {tabs[activeTab].title}</Labeling>
+      </Box>
+    </Box>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  tabs,
+};
+
+Default.argTypes = argTypes;

src/components/embedded-tabs/index.ts

@@ -0,0 +1,3 @@
+export { default } from './EmbeddedTabs';
+export type { Props as EmbeddedTabsProps } from './EmbeddedTabs';
+export type { Props as EmbeddedTabsItem } from './Tab';

src/components/embedded-tabs/styles.ts

@@ -0,0 +1,55 @@
+import { SxStyleProp } from 'rebass';
+import * as R from 'ramda';
+
+export const tabsList = {
+  /* It is `inline-table` to have the ability to collapse borders */
+  display: 'inline-table',
+  verticalAlign: 'middle',
+  borderCollapse: 'collapse',
+
+  '> div:not(:last-child)': {
+    marginRight: '20px'
+  }
+} as SxStyleProp;
+
+/* this one is needed to have the line that spans across the rest of the width. Couldn't find any other solution. */
+export const tabsLineEnding = {
+  display: 'table-cell',
+  width: '100%',
+  borderBottom: '1px solid',
+  borderBottomColor: 'gray',
+  pointerEvents: 'none',
+};
+
+export const activeTab = {
+  backgroundColor: 'white',
+  borderBottomColor: 'grayShade3',
+};
+
+export const disabledTab = {
+  backgroundColor: 'grayShade1',
+  pointerEvents: 'none',
+};
+
+export const tab = {
+  display: 'table-cell',
+
+  p: 10,
+
+  backgroundColor: 'grayShade3',
+  border: '1px solid',
+  borderColor: ' gray',
+
+  whiteSpace: 'nowrap',
+  userSelect: 'none',
+  cursor: 'pointer',
+  '*': {
+    cursor: 'pointer',
+  },
+
+  transition: ({ transitions }) => transitions.button,
+
+  ':hover': {
+    ...R.dissoc('borderBottomColor', activeTab),
+  },
+} as SxStyleProp;

src/index.ts

@@ -252,6 +252,8 @@ export {
   constants,
 };
 
+export { default as EmbeddedTabs } from './components/embedded-tabs';
+
 export type { ITheme, IThemeColors, IThemeIconSizes } from './theme/types';
 export type TooltipProps = import('./components/tooltip').TooltipProps;
 export type { BadgeProps, BlinkProps } from './components/badges';
@@ -289,6 +291,10 @@ export type {
   RadioGroupProps,
   RadioGroupOption,
 } from './components/radio/radio-group';
+export type {
+  EmbeddedTabsItem,
+  EmbeddedTabsProps,
+} from './components/embedded-tabs';
 
 // Rebass components
 export { Flex, Box } from 'rebass';