chore(web): Add TabButton component (#464)

Co-authored-by: 長田淳史 <> Co-authored-by: keiya sasaki <[email protected]>
reearth · Jun 6, 2023 · 342a036 · 342a036
1 parent 976835e
commit 342a036
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 0 deletions.
diff --git a/web/src/beta/components/TabButton/index.stories.tsx b/web/src/beta/components/TabButton/index.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import TabButton from ".";
+
+const meta: Meta<typeof TabButton> = {
+  component: TabButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TabButton>;
+
+export const Close: Story = {
+  args: {
+    label: "Editor",
+    selected: false,
+  },
+};
+
+export const Open: Story = {
+  args: {
+    label: "Editor",
+    selected: true,
+  },
+};
diff --git a/web/src/beta/components/TabButton/index.test.tsx b/web/src/beta/components/TabButton/index.test.tsx
@@ -0,0 +1,28 @@
+import { expect, test } from "vitest";
+
+import { render, screen } from "@reearth/test/utils";
+
+import TabButton from ".";
+
+const handleClick = () => {
+};
+
+test("1. should be rendered", () => {
+  render(<TabButton label="test1" onClick={handleClick} selected={false} />);
+});
+
+test("2. should display button label", () => {
+  render(<TabButton label="test2" onClick={handleClick} selected={false} />);
+  expect(screen.getByRole("button")).toBeInTheDocument();
+  expect(screen.getByText(/test2/)).toBeInTheDocument();
+});
+
+test("3. should disabled true button", () => {
+  render(<TabButton label="test3" onClick={handleClick} selected={true} />);
+  expect(screen.getByRole("button")).toBeDisabled();
+});
+
+test("4. should disabled false button", () => {
+  render(<TabButton label="test4" onClick={handleClick} selected={false} />);
+  expect(screen.getByRole("button")).not.toBeDisabled();
+});
diff --git a/web/src/beta/components/TabButton/index.tsx b/web/src/beta/components/TabButton/index.tsx
@@ -0,0 +1,38 @@
+import type { FC } from "react";
+
+import { styled } from "@reearth/services/theme";
+
+export type Props = {
+  label: string;
+  onClick?: () => void;
+  selected?: boolean;
+};
+
+const TabButton: FC<Props> = ({ label, onClick, selected }) => {
+  return (
+    <Button onClick={onClick} disabled={selected}>
+      {label}
+    </Button>
+  );
+};
+
+type ButtonProps = {
+  disabled?: boolean;
+};
+
+const Button = styled.button<ButtonProps>`
+  background: ${({ disabled }) => (disabled ? "#232226" : "inherit")};
+  padding: 8px 12px;
+  height: 35px;
+  border-radius: 4px;
+  :hover {
+    background: #232226;
+    transition: all 0.5s ease;
+  }
+  color: ${({ disabled }) => (disabled ? "#C7C5C5" : "#4A4A4A")};
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+`;
+
+export default TabButton;