feat(figma-codegen): support codegen for Toggle Button

daangn · Jan 15, 2025 · 11dee48 · 11dee48
1 parent ac1624e
commit 11dee48
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git a/tools/figma-codegen/src/codegen/component/index.ts b/tools/figma-codegen/src/codegen/component/index.ts
@@ -27,6 +27,7 @@ import type {
   SnackbarProperties,
   SwitchProperties,
   TextButtonProperties,
+  ToggleButtonProperties,
 } from "./type";
 import { getLayoutVariableName } from "../variable";
 
@@ -858,6 +859,36 @@ const textButtonHandler: ComponentHandler<TextButtonProperties> = {
 //   },
 // };
 
+const toggleButtonHandler: ComponentHandler<ToggleButtonProperties> = {
+  key: "1d240ee5fd7a56879713e69cbea1b6f006f0ea22",
+  codegen: ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const commonProps = {
+      variant: camelCase(props.Variant.value),
+      size: camelCase(props.Size.value),
+      ...(props["Show Prefix Icon#6122:392"].value && {
+        prefixIcon: createElement(createIconTagNameFromId(props["Prefix Icon#6122:98"].value)),
+      }),
+      ...(props["Show Suffix Icon#6122:147"].value && {
+        suffixIcon: createElement(createIconTagNameFromId(props["Suffix Icon#6122:343"].value)),
+      }),
+      ...(states.includes("Selected") && {
+        // XXX: selected vs pressed
+        defaultPressed: true,
+      }),
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+      ...(states.includes("Loading") && {
+        loading: true,
+      }),
+    };
+
+    return createElement("ToggleButton", commonProps, props["Label#6122:49"].value);
+  },
+};
+
 const componentHandlers = [
   actionButtonHandler,
   actionChipHandler,
@@ -879,6 +910,7 @@ const componentHandlers = [
   skeletonHandler,
   snackbarHandler,
   textButtonHandler,
+  toggleButtonHandler,
 ] as ComponentHandler[];
 
 export const componentHandlerMap = new Map(

diff --git a/tools/figma-codegen/src/codegen/component/type.ts b/tools/figma-codegen/src/codegen/component/type.ts
@@ -604,3 +604,52 @@ export type TextButtonProperties = InferFromDefinition<{
     variantOptions: ["Enabled", "Enabled-Pressed", "Disabled"];
   };
 }>;
+
+export type ToggleButtonProperties = InferFromDefinition<{
+  "Show Prefix Icon#6122:392": {
+    type: "BOOLEAN";
+    defaultValue: false;
+  };
+  "Suffix Icon#6122:343": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "102:6307";
+    preferredValues: [];
+  };
+  "Show Suffix Icon#6122:147": {
+    type: "BOOLEAN";
+    defaultValue: false;
+  };
+  "Prefix Icon#6122:98": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "8328:3989";
+    preferredValues: [];
+  };
+  "Label#6122:49": {
+    type: "TEXT";
+    defaultValue: "라벨";
+  };
+  Variant: {
+    type: "VARIANT";
+    defaultValue: "Brand Solid";
+    variantOptions: ["Neutral Weak", "Brand Solid"];
+  };
+  Size: {
+    type: "VARIANT";
+    defaultValue: "XSmall";
+    variantOptions: ["Small", "XSmall"];
+  };
+  State: {
+    type: "VARIANT";
+    defaultValue: "Enabled-Selected";
+    variantOptions: [
+      "Enabled",
+      "Disabled",
+      "Enabled-Selected",
+      "Enabled-Selected-Pressed",
+      "Enabled-Loading",
+      "Disabled-Selected",
+      "Enabled-Pressed",
+      "Enabled-Selected-Loading",
+    ];
+  };
+}>;