chore(web): Add CheckboxField component (#508)

Co-authored-by: 長田淳史 <> Co-authored-by: koji endo <kouendou@fab.pasona.tech> Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
reearth · Jun 28, 2023 · 3a12f5f · 3a12f5f
1 parent 61c9378
commit 3a12f5f
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 0 deletions.
diff --git a/web/src/beta/components/CheckboxField/index.stories.tsx 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
@@ -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
diff --git 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,
 };