ui v2: tabs

frontend/packages/core/src/stories/tab.stories.tsx

+import * as React from "react";
+import type { Meta } from "@storybook/react";
+
+import type { TabProps } from "../tab";
+import { Tab } from "../tab";
+
+export default {
+  title: "Core/Tab/Tab",
+  component: Tab,
+  argTypes: {
+    onClick: { action: "onClick event" },
+  },
+} as Meta;
+
+const Template = (props: TabProps) => <Tab {...props} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: "Tab 1",
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  label: "Tab 1",
+  selected: true,
+};

frontend/packages/core/src/stories/tabs.stories.tsx

+import * as React from "react";
+import type { Meta } from "@storybook/react";
+
+import type { TabsProps } from "../tab";
+import { Tab, Tabs } from "../tab";
+
+export default {
+  title: "Core/Tab/Tabs",
+  component: Tab,
+  argTypes: {
+    onClick: { action: "onClick event" },
+  },
+} as Meta;
+
+const Template = ({ tabCount, value, ...props }: TabsProps & { tabCount: number }) => {
+  const [selectedValue, setSelectedValue] = React.useState(value - 1);
+  return (
+    <Tabs value={selectedValue} onChange={(_, v) => setSelectedValue(v)} {...props}>
+      {[...Array(tabCount)].map((_, index: number) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Tab key={index} label={`Tab ${index + 1}`} value={index} />
+      ))}
+    </Tabs>
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  tabCount: 2,
+  value: 1,
+};

frontend/packages/core/src/tab.tsx

+import * as React from "react";
+import styled from "@emotion/styled";
+import type { TabProps as MuiTabProps, TabsProps as MuiTabsProps } from "@material-ui/core";
+import { Tab as MuiTab, Tabs as MuiTabs } from "@material-ui/core";
+
+const StyledTab = styled(MuiTab)({
+  minWidth: "111px",
+  height: "46px",
+  padding: "0",
+  color: "rgba(13, 16, 48, 0.6)",
+  borderBottom: "3px solid #E7E7EA",
+  fontSize: "14px",
+  opacity: "1",
+  "&.Mui-selected": {
+    backgroundColor: "unset",
+    color: "#3548D4",
+    border: "0",
+  },
+  "&:hover": {
+    color: "rgba(13, 16, 48, 0.6)",
+    backgroundColor: "#E7E7EA",
+    outline: "none",
+  },
+  "&:focus": {
+    color: "#3548D4",
+    backgroundColor: "#EBEDFB",
+  },
+  "&:focus-within": {
+    color: "#3548D4",
+    backgroundColor: "#EBEDFB",
+  },
+  "&:active": {
+    color: "rgba(13, 16, 48, 0.6)",
+    backgroundColor: "rgba(219, 219, 224, 1)",
+  },
+});
+
+const StyledTabs = styled(MuiTabs)({
+  ".MuiTabs-indicator": {
+    height: "4px",
+    backgroundColor: "#3548D4",
+  },
+});
+
+export interface TabProps extends Pick<MuiTabProps, "label" | "selected" | "value" | "onClick"> {}
+
+export const Tab = ({ onClick, ...props }: TabProps) => {
+  const onClickMiddleware = (e: any) => {
+    e.currentTarget.blur();
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  return <StyledTab color="primary" onClick={onClickMiddleware} {...props} />;
+};
+
+export interface TabsProps extends Pick<MuiTabsProps, "value"> {
+  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+  // n.b. we explicitly override this prop due to https://github.com/mui-org/material-ui/issues/17454
+  onChange:
+    | ((event: React.ChangeEvent<{}>, value: any) => void)
+    | ((event: React.FormEvent<HTMLButtonElement>) => void);
+}
+
+export const Tabs = ({ children, ...props }: TabsProps) => (
+  <StyledTabs {...props}>{children}</StyledTabs>
+);
+
+export default Tab;