From f83c2b9e2770d314d0e5e9ba9bf0405f3f9dcac7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=95=B7=E7=94=B0=E6=B7=B3=E5=8F=B2?= <> Date: Wed, 14 Jun 2023 14:40:55 +0900 Subject: [PATCH 1/7] chore(web): Add CheckboxField component --- .../CheckboxField/index.stories.tsx | 20 +++++++ .../beta/components/CheckboxField/index.tsx | 53 +++++++++++++++++++ .../beta/components/Icon/Icons/checkMark.svg | 3 ++ web/src/beta/components/Icon/icons.ts | 2 + 4 files changed, 78 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 0000000000..ec15ba4ca0 --- /dev/null +++ b/web/src/beta/components/CheckboxField/index.stories.tsx @@ -0,0 +1,20 @@ +import { action } from "@storybook/addon-actions"; +import { Meta, StoryObj } from "@storybook/react"; + +import CheckBoxField from "."; + +const meta: Meta = { + component: CheckBoxField, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + label: "takanawa_3D_Tiles", + checked: false, + onChange: action("onchange"), + }, +}; diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx new file mode 100644 index 0000000000..8b1f7b12a7 --- /dev/null +++ b/web/src/beta/components/CheckboxField/index.tsx @@ -0,0 +1,53 @@ +import type { FC } from "react"; + +import { styled, colors } from "@reearth/services/theme"; + +import Icon from "../Icon"; +import Text from "../Text"; + +export type Props = { + onChange?: (value: boolean) => void; + checked?: boolean; + label: string; +}; + +const CheckBoxField: FC = ({ onChange, checked, label }) => { + return ( + + onChange?.(checked !== undefined ? checked : false)}> + {checked && } + + {label && ( + + {label} + + )} + + ); +}; + +const Field = styled.div` + display: flex; + align-items: center; + gap: 12px; + width: 100%; + height: 20px; +`; + +const BoxFeild = styled.button` + box-sizing: border-box; + width: 20px; + height: 20px; + border: 1px solid ${({ theme }) => theme.main.border}; + border-radius: 4px; +`; + +const CheckMark = styled(Icon)` + padding-left: 15%; + padding-right: 10%; + padding-top: 25%; + padding-bottom: 20.83%; + color: ${colors.publish.dark.text.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 0000000000..fc1282316f --- /dev/null +++ b/web/src/beta/components/Icon/Icons/checkMark.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts index b358fd6d56..241246808b 100644 --- a/web/src/beta/components/Icon/icons.ts +++ b/web/src/beta/components/Icon/icons.ts @@ -25,6 +25,7 @@ import Crosshair from "./Icons/crosshair.svg"; import PlusSquare from "./Icons/plusSquare.svg"; import Cancel from "./Icons/cancel.svg"; import ActionButton from "./Icons/actionButton.svg"; +import CheckMark from "./Icons/checkMark.svg"; // Dataset import File from "./Icons/fileIcon.svg"; @@ -57,4 +58,5 @@ export default { playLeft: PlayLeft, timeline: Timeline, actionbutton: ActionButton, + checkmark: CheckMark, }; From 2b6cf2976a3a8b1e6fe79bb0129008f295445954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=95=B7=E7=94=B0=E6=B7=B3=E5=8F=B2?= <> Date: Fri, 16 Jun 2023 16:03:03 +0900 Subject: [PATCH 2/7] chore(web): Update CheckboxField component --- .../beta/components/CheckboxField/index.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx index 8b1f7b12a7..b89cd3397e 100644 --- a/web/src/beta/components/CheckboxField/index.tsx +++ b/web/src/beta/components/CheckboxField/index.tsx @@ -1,24 +1,28 @@ import type { FC } from "react"; -import { styled, colors } from "@reearth/services/theme"; +import { styled, useTheme, PublishTheme } from "@reearth/services/theme"; import Icon from "../Icon"; import Text from "../Text"; export type Props = { + publishedTheme?: PublishTheme; onChange?: (value: boolean) => void; checked?: boolean; label: string; }; -const CheckBoxField: FC = ({ onChange, checked, label }) => { +const CheckBoxField: FC = ({ onChange, checked, label, publishedTheme }) => { + const theme = useTheme(); return ( - onChange?.(checked !== undefined ? checked : false)}> - {checked && } + onChange?.(checked !== undefined ? checked : false)} + publishedTheme={publishedTheme}> + {checked && } {label && ( - + {label} )} @@ -34,20 +38,20 @@ const Field = styled.div` height: 20px; `; -const BoxFeild = styled.button` +const BoxFeild = styled.button<{ publishedTheme?: PublishTheme }>` box-sizing: border-box; width: 20px; height: 20px; - border: 1px solid ${({ theme }) => theme.main.border}; + border: 1px solid ${({ theme, publishedTheme }) => publishedTheme?.weakText || theme.main.weak}; border-radius: 4px; `; -const CheckMark = styled(Icon)` +const CheckMark = styled(Icon)<{ publishedTheme?: PublishTheme }>` padding-left: 15%; padding-right: 10%; padding-top: 25%; padding-bottom: 20.83%; - color: ${colors.publish.dark.text.main}; + color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text}; `; export default CheckBoxField; From bdc39d364a21b9fa9f53da0e3972288698f6a7cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=95=B7=E7=94=B0=E6=B7=B3=E5=8F=B2?= <> Date: Mon, 19 Jun 2023 13:23:28 +0900 Subject: [PATCH 3/7] chore(web): Update CheckboxField component --- web/src/beta/components/CheckboxField/index.stories.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/web/src/beta/components/CheckboxField/index.stories.tsx b/web/src/beta/components/CheckboxField/index.stories.tsx index ec15ba4ca0..9de39fb9cb 100644 --- a/web/src/beta/components/CheckboxField/index.stories.tsx +++ b/web/src/beta/components/CheckboxField/index.stories.tsx @@ -1,4 +1,3 @@ -import { action } from "@storybook/addon-actions"; import { Meta, StoryObj } from "@storybook/react"; import CheckBoxField from "."; @@ -15,6 +14,5 @@ export const Default: Story = { args: { label: "takanawa_3D_Tiles", checked: false, - onChange: action("onchange"), }, }; From d71563db3f5220d036944b7283f82d0c3c85d724 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=95=B7=E7=94=B0=E6=B7=B3=E5=8F=B2?= <> Date: Mon, 19 Jun 2023 14:39:21 +0900 Subject: [PATCH 4/7] chore(web): Update CheckboxField component --- web/src/beta/components/CheckboxField/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx index b89cd3397e..fbfb1cfde0 100644 --- a/web/src/beta/components/CheckboxField/index.tsx +++ b/web/src/beta/components/CheckboxField/index.tsx @@ -7,17 +7,17 @@ import Text from "../Text"; export type Props = { publishedTheme?: PublishTheme; - onChange?: (value: boolean) => void; + onClick?: (value: boolean) => void; checked?: boolean; label: string; }; -const CheckBoxField: FC = ({ onChange, checked, label, publishedTheme }) => { +const CheckBoxField: FC = ({ onClick, checked, label, publishedTheme }) => { const theme = useTheme(); return ( onChange?.(checked !== undefined ? checked : false)} + onClick={() => onClick?.(checked !== undefined ? checked : false)} publishedTheme={publishedTheme}> {checked && } From 1c7ec59bb87cb351a0a4a45a77e997c55b08bae0 Mon Sep 17 00:00:00 2001 From: koji endo Date: Tue, 20 Jun 2023 16:12:51 +0900 Subject: [PATCH 5/7] fix(web): Update color and font order for new theme. --- .../beta/components/CheckboxField/index.tsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx index fbfb1cfde0..e773092fe0 100644 --- a/web/src/beta/components/CheckboxField/index.tsx +++ b/web/src/beta/components/CheckboxField/index.tsx @@ -1,28 +1,25 @@ import type { FC } from "react"; -import { styled, useTheme, PublishTheme } from "@reearth/services/theme"; +import { styled, useTheme } from "@reearth/services/theme"; import Icon from "../Icon"; import Text from "../Text"; export type Props = { - publishedTheme?: PublishTheme; onClick?: (value: boolean) => void; checked?: boolean; label: string; }; -const CheckBoxField: FC = ({ onClick, checked, label, publishedTheme }) => { +const CheckBoxField: FC = ({ onClick, checked, label }) => { const theme = useTheme(); return ( - onClick?.(checked !== undefined ? checked : false)} - publishedTheme={publishedTheme}> - {checked && } + onClick?.(checked !== undefined ? checked : false)}> + {checked && } {label && ( - + {label} )} @@ -38,20 +35,20 @@ const Field = styled.div` height: 20px; `; -const BoxFeild = styled.button<{ publishedTheme?: PublishTheme }>` +const BoxFeild = styled.button` box-sizing: border-box; width: 20px; height: 20px; - border: 1px solid ${({ theme, publishedTheme }) => publishedTheme?.weakText || theme.main.weak}; + border: 1px solid ${({ theme }) => theme.general.content.weak}; border-radius: 4px; `; -const CheckMark = styled(Icon)<{ publishedTheme?: PublishTheme }>` +const CheckMark = styled(Icon)` padding-left: 15%; padding-right: 10%; padding-top: 25%; padding-bottom: 20.83%; - color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text}; + color: ${({ theme }) => theme.general.content.main}; `; export default CheckBoxField; From 31626b49580f501f5bfcccf85d1dc94b7c8f0c9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=95=B7=E7=94=B0=E6=B7=B3=E5=8F=B2?= <> Date: Fri, 23 Jun 2023 15:31:33 +0900 Subject: [PATCH 6/7] fix(web): Update CheckboxField component --- .../beta/components/CheckboxField/index.tsx | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx index e773092fe0..ec6921bf9e 100644 --- a/web/src/beta/components/CheckboxField/index.tsx +++ b/web/src/beta/components/CheckboxField/index.tsx @@ -1,23 +1,18 @@ -import type { FC } from "react"; - +import Icon from "@reearth/beta/components/Icon"; +import Text from "@reearth/beta/components/Text"; import { styled, useTheme } from "@reearth/services/theme"; -import Icon from "../Icon"; -import Text from "../Text"; - export type Props = { onClick?: (value: boolean) => void; checked?: boolean; label: string; }; -const CheckBoxField: FC = ({ onClick, checked, label }) => { +const CheckBoxField: React.FC = ({ onClick, checked, label }) => { const theme = useTheme(); return ( - - onClick?.(checked !== undefined ? checked : false)}> - {checked && } - + onClick?.(checked !== undefined ? checked : false)}> + {checked && } {label && ( {label} @@ -27,7 +22,7 @@ const CheckBoxField: FC = ({ onClick, checked, label }) => { ); }; -const Field = styled.div` +const Field = styled.button` display: flex; align-items: center; gap: 12px; @@ -35,7 +30,10 @@ const Field = styled.div` height: 20px; `; -const BoxFeild = styled.button` +const BoxField = styled.div` + display: flex; + align-items: center; + justify-content: center; box-sizing: border-box; width: 20px; height: 20px; @@ -44,10 +42,8 @@ const BoxFeild = styled.button` `; const CheckMark = styled(Icon)` - padding-left: 15%; - padding-right: 10%; - padding-top: 25%; - padding-bottom: 20.83%; + width: 15px; + height: 10.83px; color: ${({ theme }) => theme.general.content.main}; `; From ee31cab2b1272c53d3894ae76d4b0b233d1216ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=95=B7=E7=94=B0=E6=B7=B3=E5=8F=B2?= <> Date: Mon, 26 Jun 2023 13:57:18 +0900 Subject: [PATCH 7/7] fix(web): Update CheckboxField component --- web/src/beta/components/CheckboxField/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx index ec6921bf9e..01e5cd274f 100644 --- a/web/src/beta/components/CheckboxField/index.tsx +++ b/web/src/beta/components/CheckboxField/index.tsx @@ -11,7 +11,7 @@ export type Props = { const CheckBoxField: React.FC = ({ onClick, checked, label }) => { const theme = useTheme(); return ( - onClick?.(checked !== undefined ? checked : false)}> + onClick?.(!checked)}> {checked && } {label && (