Feature/tab bar no rebase

packages/pancake-uikit/src/__tests__/components/tabmenu.test.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { renderWithTheme } from "../../testHelpers";
+import { TabMenu, Tab } from "../../components/TabMenu";
+
+const handleClick = jest.fn();
+
+it("renders correctly", () => {
+  const { asFragment } = renderWithTheme(
+    <TabMenu activeIndex={0} onItemClick={handleClick}>
+      <Tab>Item 1</Tab>
+      <Tab>Item 2</Tab>
+    </TabMenu>
+  );
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div
+        class="sc-bdfBwQ sc-gsTCUz sc-dlfnbm iwJkGQ ckYhbt hfSAvK"
+      >
+        <div
+          class="sc-bdfBwQ sc-gsTCUz sc-hKgILt iwJkGQ ckYhbt kGuCa-d"
+        >
+          <button
+            class="sc-eCssSg ixipzp"
+            color="card"
+          >
+            <div
+              class="sc-jSgupP dTcSYX"
+              color="card"
+              font-weight="600"
+            >
+              Item 1
+            </div>
+          </button>
+          <button
+            class="sc-eCssSg bTcWnb"
+            color="textSubtle"
+          >
+            <div
+              class="sc-jSgupP fEsPNW"
+              color="textSubtle"
+              font-weight="600"
+            >
+              Item 2
+            </div>
+          </button>
+        </div>
+      </div>
+    </DocumentFragment>
+  `);
+});

packages/pancake-uikit/src/components/TabMenu/StyledTab.tsx

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+interface StyledTabProps {
+  color: "card" | "textSubtle";
+  bgColor: "textSubtle" | "input";
+}
+
+const StyledTab = styled.button<StyledTabProps>`
+  display: inline-flex;
+  justify-content: center;
+  cursor: pointer;
+  border: 0;
+  outline: 0;
+  flex-grow: 1;
+  padding: 8px;
+  border-radius: 16px 16px 0 0;
+  color: ${({ theme, color }) => theme.colors[color]};
+  background-color: ${({ theme, bgColor }) => theme.colors[bgColor]};
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    flex-grow: 0;
+    padding: 8px 12px;
+  }
+`;
+
+export default StyledTab;

packages/pancake-uikit/src/components/TabMenu/Tab.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import StyledTab from "./StyledTab";
+import { TabProps } from "./types";
+import { Text } from "../Text";
+
+const Tab: React.FC<TabProps> = ({ isActive = false, onClick, children }) => {
+  return (
+    <StyledTab onClick={onClick} bgColor={isActive ? "textSubtle" : "input"} color={isActive ? "card" : "textSubtle"}>
+      <Text fontWeight={600} color={isActive ? "card" : "textSubtle"}>
+        {children}
+      </Text>
+    </StyledTab>
+  );
+};
+export default Tab;

packages/pancake-uikit/src/components/TabMenu/TabMenu.tsx

@@ -0,0 +1,46 @@
+import React, { cloneElement, Children, ReactElement } from "react";
+import styled from "styled-components";
+import Flex from "../Box/Flex";
+import { TabMenuProps } from "./types";
+
+const Wrapper = styled(Flex)`
+  border-bottom: 2px solid ${({ theme }) => theme.colors.textSubtle};
+  padding: 0 16px;
+  overflow-y: scroll;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`;
+
+const Inner = styled(Flex)`
+  justify-content: space-between;
+  flex-grow: 1;
+
+  & > button + button {
+    margin-left: 4px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    flex-grow: 0;
+  }
+`;
+
+const ButtonMenu: React.FC<TabMenuProps> = ({ activeIndex = 0, onItemClick, children }) => {
+  return (
+    <Wrapper>
+      <Inner>
+        {Children.map(children, (child: ReactElement, index) => {
+          return cloneElement(child, {
+            isActive: activeIndex === index,
+            onClick: onItemClick ? () => onItemClick(index) : undefined,
+          });
+        })}
+      </Inner>
+    </Wrapper>
+  );
+};
+
+export default ButtonMenu;

packages/pancake-uikit/src/components/TabMenu/index.stories.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+/* eslint-disable import/no-unresolved */
+import { Meta } from "@storybook/react/types-6-0";
+import TabMenu from "./TabMenu";
+import Tab from "./Tab";
+
+export default {
+  title: "Components/Tab Menu",
+  component: TabMenu,
+  argTypes: {},
+} as Meta;
+
+const Row = styled.div`
+  margin-bottom: 32px;
+`;
+
+export const Default: React.FC = () => {
+  const [index, setIndex] = useState(0);
+  const [index2, setIndex2] = useState(0);
+  const [index3, setIndex3] = useState(0);
+  const handleClick = (newIndex) => setIndex(newIndex);
+  const handleClick2 = (newIndex) => setIndex2(newIndex);
+  const handleClick3 = (newIndex) => setIndex3(newIndex);
+
+  return (
+    <>
+      <Row>
+        <TabMenu activeIndex={index} onItemClick={handleClick}>
+          <Tab>Total</Tab>
+          <Tab>Cakers</Tab>
+          <Tab>Flippers</Tab>
+          <Tab>Storm</Tab>
+        </TabMenu>
+      </Row>
+      <Row>
+        <TabMenu activeIndex={index2} onItemClick={handleClick2}>
+          <Tab>#1 Team</Tab>
+          <Tab>#2 Team</Tab>
+          <Tab>#3 Team</Tab>
+        </TabMenu>
+      </Row>
+      <Row>
+        <TabMenu activeIndex={index3} onItemClick={handleClick3}>
+          <Tab>Really long tab name</Tab>
+          <Tab>Short</Tab>
+          <Tab>Medium length</Tab>
+        </TabMenu>
+      </Row>
+    </>
+  );
+};

packages/pancake-uikit/src/components/TabMenu/index.tsx

@@ -0,0 +1,3 @@
+export { default as TabMenu } from "./TabMenu";
+export { default as Tab } from "./Tab";
+export type { TabMenuProps, TabProps } from "./types";

packages/pancake-uikit/src/components/TabMenu/types.ts

@@ -0,0 +1,9 @@
+export interface TabMenuProps {
+  activeIndex?: number;
+  onItemClick?: (index: number) => void;
+  children: React.ReactElement[];
+}
+export interface TabProps {
+  isActive?: boolean;
+  onClick?: () => void;
+}