Tabs component: basic functionality.

packages/components/src/components/Tabs/Tab.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react"
+
+type TabProps = {
+  label: string
+  children: ReactNode
+}
+
+export default function Tab({
+  label,
+  children
+}: TabProps) {
+
+  // let styles = makeStyles(styleProps)
+
+  return (
+    <div>
+      {children}
+    </div>
+  )
+}

packages/components/src/components/Tabs/Tabs.style.ts

@@ -0,0 +1,32 @@
+import { css } from "@emotion/core"
+import { typography, colors, spacing } from "../../theme"
+
+export type TabsStyleProps = {
+}
+
+export let makeStyles = ({
+}: TabsStyleProps) => {
+  return {
+    container: css`
+      font-family: ${typography.fonts.base};
+      color: ${colors.white};
+    `,
+    tabs: css`
+      display: flex;
+    `,
+    tab: css`
+      flex-basis: content;
+      padding: ${spacing.m} ${spacing.l};
+      cursor: pointer;
+      border: 1px solid white;
+    `,
+    activeTab: css`
+      flex-basis: content;
+      padding: ${spacing.m} ${spacing.l};
+      cursor: pointer;
+      border: 1px solid white;
+      color: black;
+      background-color: white;
+    `
+  }
+}

packages/components/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react"
+import { makeStyles, TabsStyleProps } from "./Tabs.style"
+
+type TabsProps = {
+  children: Array<React.ReactNode>,
+  onChange?: (tab: string) => void
+} & TabsStyleProps
+
+export default function Tabs({
+  children,
+  onChange,
+  ...styleProps
+}: TabsProps) {
+
+  const [activeTab, setActiveTab] = useState(0)
+
+  function onTabChange(tab: any): void {
+    setActiveTab(tab)
+    onChange(tab)
+  }
+
+  let styles = makeStyles(styleProps)
+
+  return (
+    <div css={styles.container}>
+      <div css={styles.tabs}>
+        {children.map((tab: any, index: any) => 
+        <div
+          key={`tab-${index}`}
+          css={index === activeTab ? styles.activeTab : styles.tab}
+          onClick={() => onTabChange(index)}
+        >
+          {tab.props.label}
+        </div>)}
+      </div>
+      <div>
+        {children
+          .filter((tab: any, index: any) => index === activeTab)
+          .map((tab: any) => tab)}
+      </div>
+    </div>
+  )
+}

packages/components/src/components/Tabs/index.ts

@@ -0,0 +1,3 @@
+import { memo } from "react"
+import Tabs from "./Tabs"
+export default memo(Tabs)

packages/components/src/index.ts

@@ -4,6 +4,8 @@ export { default as Grid } from "./components/Grid"
 export { default as Header } from "./components/Header"
 export { default as NavButton } from "./components/NavButton"
 export { default as TagButton } from "./components/TagButton"
+export { default as Tabs } from "./components/Tabs"
+export { default as Tab } from "./components/Tabs/Tab"
 export { default as Tag } from "./components/Tag"
 export { default as TextField } from "./components/TextField"
 export { default as Typography } from "./components/Typography"

packages/components/stories/11-Tabs.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { Tabs } from "./../src"
+import { Tab } from "./../src"
+
+export default {
+  title: "Tabs",
+  component: Tabs,
+}
+
+export const Default = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <Tabs>
+      <Tab label="Tab 1">tab 1</Tab>
+      <Tab label="Tab 2">tab 2</Tab>
+      <Tab label="Tab 3">tab 3</Tab>
+    </Tabs>
+  </div>
+)