chore(web): Add SidePanelSectionField component (#505)

Co-authored-by: koji endo <[email protected]>
Co-authored-by: KaWaite <[email protected]>

web/src/beta/components/Icon/icons.ts

@@ -18,6 +18,7 @@ import ArrowRight from "./Icons/arrowRight.svg";
 import ArrowLongLeft from "./Icons/arrowLongLeft.svg";
 import ArrowLongRight from "./Icons/arrowLongRight.svg";
 import ArrowDown from "./Icons/arrowDown.svg";
+import ArrowToggle from "./Icons/arrowToggle.svg";
 
 // Indicator
 import Crosshair from "./Icons/crosshair.svg";
@@ -60,6 +61,7 @@ export default {
   arrowLongLeft: ArrowLongLeft,
   arrowLongRight: ArrowLongRight,
   arrowDown: ArrowDown,
+  arrowToggle: ArrowToggle,
   cancel: Cancel,
   crosshair: Crosshair,
   plusSquare: PlusSquare,

web/src/beta/components/SidePanelSectionField/index.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import Component from ".";
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Component>;
+
+export const Default: Story = {
+  args: {
+    title: "Title",
+    children: <p>Item</p>,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    title: "Title",
+  },
+};

web/src/beta/components/SidePanelSectionField/index.tsx

@@ -0,0 +1,55 @@
+import { useState, ReactNode } from "react";
+
+import { styled, useTheme } from "@reearth/services/theme";
+
+import Icon from "../Icon";
+import Text from "../Text";
+
+const SidePanelSectionField: React.FC<{
+  title: string;
+  children?: ReactNode;
+}> = ({ title, children }) => {
+  const theme = useTheme();
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <Field>
+      <Header onClick={() => setOpened(!opened)}>
+        <Text
+          size="footnote"
+          color={theme.general.content.strong}
+          otherProperties={{ height: "16px" }}>
+          {title}
+        </Text>
+        <ArrowIcon
+          icon="arrowToggle"
+          size={12}
+          color={theme.general.content.main}
+          opened={opened}
+        />
+      </Header>
+      {opened && children}
+    </Field>
+  );
+};
+
+const Field = styled.div`
+  box-sizing: border-box;
+
+  border-bottom: 1px solid ${props => props.theme.general.bg.weak};
+`;
+const Header = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+
+  height: 32px;
+  cursor: pointer;
+`;
+const ArrowIcon = styled(Icon)<{ opened: boolean }>`
+  transform: rotate(${props => (props.opened ? 90 : 180)}deg);
+`;
+
+export default SidePanelSectionField;