From 04abeebc0abd188705fbf24b16afe29a04dc248d Mon Sep 17 00:00:00 2001
From: Godwin Pang <gypang24@gmail.com>
Date: Wed, 9 Sep 2020 15:07:33 -0700
Subject: [PATCH] Add card with vertical tabs. (#156)

* Add card with vertical tabs.

* Add border, grid, remove ripple.
---
 .../cards/CardWithVerticalTabs.stories.tsx    | 26 ++++++++++
 src/components/cards/CardWithVerticalTabs.tsx | 49 +++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 src/components/cards/CardWithVerticalTabs.stories.tsx
 create mode 100644 src/components/cards/CardWithVerticalTabs.tsx

diff --git a/src/components/cards/CardWithVerticalTabs.stories.tsx b/src/components/cards/CardWithVerticalTabs.stories.tsx
new file mode 100644
index 00000000..f7d711cf
--- /dev/null
+++ b/src/components/cards/CardWithVerticalTabs.stories.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import {
+  CardWithVerticalTabs,
+  CardWithVerticalTabsProps,
+} from './CardWithVerticalTabs';
+
+export default {
+  title: 'Cards/Card with Vertical Tabs',
+  component: CardWithVerticalTabs,
+} as Meta;
+
+const Template: Story<CardWithVerticalTabsProps> = args => {
+  const { items } = args;
+  return <CardWithVerticalTabs items={items} />;
+};
+
+export const SampleCardWithVerticalTabs = Template.bind({});
+SampleCardWithVerticalTabs.args = {
+  items: [
+    { title: 'Title 1', element: <h1>Title 1</h1> },
+    { title: 'Title 2', element: <h1>Title 2</h1> },
+    { title: 'Title 3', element: <h1>Title 3</h1> },
+  ],
+};
diff --git a/src/components/cards/CardWithVerticalTabs.tsx b/src/components/cards/CardWithVerticalTabs.tsx
new file mode 100644
index 00000000..d95a6999
--- /dev/null
+++ b/src/components/cards/CardWithVerticalTabs.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import {
+  Grid,
+  Tabs as MuiTabs,
+  Tab as MuiTab,
+  makeStyles,
+  Theme,
+} from '@material-ui/core';
+
+import { Card } from './Card';
+
+export interface CardWithVerticalTabsProps {
+  items: { title: string; element: JSX.Element }[];
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+  tabs: { borderRight: `1px solid ${theme.palette.divider}` },
+}));
+
+export function CardWithVerticalTabs({ items }: CardWithVerticalTabsProps) {
+  const [index, setIndex] = useState(0);
+  const classes = useStyles();
+
+  const handleChange = (_: React.ChangeEvent<unknown>, newValue: number) => {
+    setIndex(newValue);
+  };
+
+  const tabElements: JSX.Element[] = items.map(item => (
+    <MuiTab disableRipple label={item.title} key={item.title} />
+  ));
+
+  return (
+    <Card>
+      <Grid container spacing={2}>
+        <Grid item>
+          <MuiTabs
+            orientation='vertical'
+            value={index}
+            onChange={handleChange}
+            className={classes.tabs}
+          >
+            {tabElements}
+          </MuiTabs>
+        </Grid>
+        <Grid item>{items[index].element}</Grid>
+      </Grid>
+    </Card>
+  );
+}