From 3a12f5fd4abe9942f9953c4c42c8512c9a17301e Mon Sep 17 00:00:00 2001
From: atnagata <114915037+atnagata@users.noreply.github.com>
Date: Wed, 28 Jun 2023 13:40:28 +0900
Subject: [PATCH] chore(web): Add CheckboxField component (#508)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 長田淳史 <>
Co-authored-by: koji endo <kouendou@fab.pasona.tech>
Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
---
 .../CheckboxField/index.stories.tsx           | 18 +++++++
 .../beta/components/CheckboxField/index.tsx   | 50 +++++++++++++++++++
 .../beta/components/Icon/Icons/checkMark.svg  |  3 ++
 web/src/beta/components/Icon/icons.ts         |  2 +
 4 files changed, 73 insertions(+)
 create mode 100644 web/src/beta/components/CheckboxField/index.stories.tsx
 create mode 100644 web/src/beta/components/CheckboxField/index.tsx
 create mode 100644 web/src/beta/components/Icon/Icons/checkMark.svg

diff --git a/web/src/beta/components/CheckboxField/index.stories.tsx b/web/src/beta/components/CheckboxField/index.stories.tsx
new file mode 100644
index 000000000..9de39fb9c
--- /dev/null
+++ b/web/src/beta/components/CheckboxField/index.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import CheckBoxField from ".";
+
+const meta: Meta<typeof CheckBoxField> = {
+  component: CheckBoxField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckBoxField>;
+
+export const Default: Story = {
+  args: {
+    label: "takanawa_3D_Tiles",
+    checked: false,
+  },
+};
diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx
new file mode 100644
index 000000000..01e5cd274
--- /dev/null
+++ b/web/src/beta/components/CheckboxField/index.tsx
@@ -0,0 +1,50 @@
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled, useTheme } from "@reearth/services/theme";
+
+export type Props = {
+  onClick?: (value: boolean) => void;
+  checked?: boolean;
+  label: string;
+};
+
+const CheckBoxField: React.FC<Props> = ({ onClick, checked, label }) => {
+  const theme = useTheme();
+  return (
+    <Field onClick={() => onClick?.(!checked)}>
+      <BoxField>{checked && <CheckMark icon="checkmark" />}</BoxField>
+      {label && (
+        <Text size="footnote" color={theme.general.content.main}>
+          {label}
+        </Text>
+      )}
+    </Field>
+  );
+};
+
+const Field = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: 20px;
+`;
+
+const BoxField = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 1px solid ${({ theme }) => theme.general.content.weak};
+  border-radius: 4px;
+`;
+
+const CheckMark = styled(Icon)`
+  width: 15px;
+  height: 10.83px;
+  color: ${({ theme }) => theme.general.content.main};
+`;
+
+export default CheckBoxField;
diff --git a/web/src/beta/components/Icon/Icons/checkMark.svg b/web/src/beta/components/Icon/Icons/checkMark.svg
new file mode 100644
index 000000000..fc1282316
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/checkMark.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.42259 5.24408C1.09715 4.91864 0.569515 4.91864 0.244078 5.24408C-0.0813592 5.56951 -0.0813592 6.09715 0.244078 6.42259L4.41074 10.5893C4.73618 10.9147 5.26382 10.9147 5.58926 10.5893L14.7559 1.42259C15.0814 1.09715 15.0814 0.569515 14.7559 0.244078C14.4305 -0.0813592 13.9028 -0.0813592 13.5774 0.244078L5 8.82149L1.42259 5.24408Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
index 083426059..143c73498 100644
--- a/web/src/beta/components/Icon/icons.ts
+++ b/web/src/beta/components/Icon/icons.ts
@@ -28,6 +28,7 @@ import PlusSquare from "./Icons/plusSquare.svg";
 import Cancel from "./Icons/cancel.svg";
 import ActionButton from "./Icons/actionButton.svg";
 import Help from "./Icons/help.svg";
+import CheckMark from "./Icons/checkMark.svg";
 
 // Dataset
 import File from "./Icons/fileIcon.svg";
@@ -81,4 +82,5 @@ export default {
   logout: Logout,
   workspaceAdd: WorkspaceAdd,
   workspaces: Workspaces,
+  checkmark: CheckMark,
 };