refactor: add custom text options for ToggleContainer

src/components/Text/cmp.builder.tsx

@@ -3,7 +3,7 @@ import { TEXT_PROPS } from "@/constants/builderProps";
 import Text from ".";
 import { CSS_EDITABLE_INPUTS_ADVANCED } from "@/constants/builderInputs";
 
-const filteredTextInputs = TEXT_PROPS.inputs.filter((input) => {
+export const filteredTextInputs = TEXT_PROPS.inputs.filter((input) => {
   return input.name !== "children";
 });
 

src/components/ToggleContainer/cmp.builder.tsx

@@ -1,14 +1,32 @@
 import { Builder, withChildren } from "@builder.io/react";
-import { DEFAULT_PROPS } from "@/constants/builderProps";
+import { DEFAULT_PROPS, TEXT_PROPS } from "@/constants/builderProps";
 import ToggleContainer from ".";
+import { CSS_EDITABLE_INPUTS_ADVANCED } from "@/constants/builderInputs";
+import { filteredTextInputs } from "../Text/cmp.builder";
 
 Builder.registerComponent(withChildren(ToggleContainer), {
   ...DEFAULT_PROPS,
   name: "Toggle Container",
   canHaveChildren: true,
   inputs: [
     ...DEFAULT_PROPS.inputs,
-    { name: "title", type: "string", defaultValue: "Toggle Container" },
     { name: "noisyContainer", type: "boolean", defaultValue: true },
+    {
+      name: "titleText",
+      type: "richText",
+      defaultValue: "Toggle container title",
+    },
+    {
+      name: "titleClosedStyles",
+      friendlyName: "Title styles when closed",
+      type: "object",
+      subFields: [...filteredTextInputs, ...CSS_EDITABLE_INPUTS_ADVANCED],
+    },
+    {
+      name: "titleOpenedStyles",
+      friendlyName: "Title styles when opened",
+      type: "object",
+      subFields: [...filteredTextInputs, ...CSS_EDITABLE_INPUTS_ADVANCED],
+    },
   ],
 });

src/components/ToggleContainer/cmp.tsx

@@ -5,9 +5,12 @@ import {
 import { ToggleContainerProps } from "./types";
 import { memo, useCallback, useState } from "react";
 import { StyledIcon, StyledPlainContainer, StyledTitle } from "./styles";
+import Text from "../Text";
 
 export const ToggleContainer = ({
-  title,
+  titleText,
+  titleClosedStyles,
+  titleOpenedStyles = titleClosedStyles,
   noisyContainer,
   children,
 }: ToggleContainerProps) => {
@@ -19,16 +22,13 @@ export const ToggleContainer = ({
   );
 
   const Container = noisyContainer ? NoisyContainer : StyledPlainContainer;
-
+  const textProps = open ? titleOpenedStyles : titleClosedStyles;
   return (
     <Container>
       <div tw="flex justify-between items-center gap-x-6">
-        <StyledTitle
-          className={"tp-body3 " + (open ? " text-main0" : "text-base2")}
-          onClick={handleClickOpen}
-        >
-          {title}
-        </StyledTitle>
+        <div onClick={handleClickOpen}>
+          <Text {...textProps}>titleText</Text>
+        </div>
         <StyledIcon
           {...{
             $isOpen: open,

src/components/ToggleContainer/types.ts

@@ -1,7 +1,10 @@
+import { TextProps } from "@/types/TextProps";
 import { ReactNode } from "react";
 
 export type ToggleContainerProps = {
-  title: string;
-  noisyContainer: boolean;
+  titleText: string;
+  titleClosedStyles: TextProps;
+  titleOpenedStyles?: TextProps;
+  noisyContainer?: boolean;
   children: ReactNode;
 };