Skip to content

Commit

Permalink
chore(web): Add CheckboxField component (#508)
Browse files Browse the repository at this point in the history
Co-authored-by: 長田淳史 <>
Co-authored-by: koji endo <[email protected]>
Co-authored-by: KaWaite <[email protected]>
  • Loading branch information
3 people authored Jun 28, 2023
1 parent 61c9378 commit 3a12f5f
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 0 deletions.
18 changes: 18 additions & 0 deletions web/src/beta/components/CheckboxField/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
};
50 changes: 50 additions & 0 deletions web/src/beta/components/CheckboxField/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 3 additions & 0 deletions web/src/beta/components/Icon/Icons/checkMark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions web/src/beta/components/Icon/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -81,4 +82,5 @@ export default {
logout: Logout,
workspaceAdd: WorkspaceAdd,
workspaces: Workspaces,
checkmark: CheckMark,
};

0 comments on commit 3a12f5f

Please sign in to comment.