@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/footer/footer-6.tsx

@@ -1,19 +1,18 @@
 import {
   Box,
   Container,
+  Form,
+  Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
-  Form,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
 
-import { type IFooter6Content } from "./footer-6.schema";
+import type { IFooter6Content } from "./footer-6.schema";
 
-const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({
-  content,
-}) => (
+const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="contentWrapper">
@@ -21,23 +20,19 @@ const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({
           <Image elementKey="logo" height={26} width={26} alt="footer-logo" />
           <Typography elementKey="logoDescription" />
           <Box elementKey="icon_links_levoGroup" data-levo_group>
-            {((content as any)?.icon_links ?? [])?.map(
-              (_: any, index: number) => (
-                <Box
-                  key={`footer-6-icon-${index}`}
-                  data-levo_group_item
-                  elementKey={`icon_links.${index}.content_wrapper`}
-                >
-                  <Icon elementKey={`icon_links.${index}.icon`} />
-                  <Box elementKey={`icon_links.${index}.text_wrapper`}>
-                    <Typography elementKey={`icon_links.${index}.label`} />
-                    <Typography
-                      elementKey={`icon_links.${index}.description`}
-                    />
-                  </Box>
+            {((content as any)?.icon_links ?? [])?.map((_: any, index: number) => (
+              <Box
+                key={`footer-6-icon-${index}`}
+                data-levo_group_item
+                elementKey={`icon_links.${index}.content_wrapper`}
+              >
+                <Icon elementKey={`icon_links.${index}.icon`} />
+                <Box elementKey={`icon_links.${index}.text_wrapper`}>
+                  <Typography elementKey={`icon_links.${index}.label`} />
+                  <Typography elementKey={`icon_links.${index}.description`} />
                 </Box>
-              ),
-            )}
+              </Box>
+            ))}
           </Box>
         </Box>
 
@@ -48,23 +43,16 @@ const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({
               key={`footer-6-links-${index}`}
               data-levo_group_item
             >
-              <Typography elementKey={`links.${index}.category`} />
-              <Box
-                elementKey={`links.${index}.links_levoGroup`}
-                data-levo_group
-              >
+              <Heading elementKey={`links.${index}.category`} />
+              <Box elementKey={`links.${index}.links_levoGroup`} data-levo_group>
                 {(link?.links ?? [])?.map((subLink: any, subIndex: number) => (
                   <Box
                     elementKey={`links.${index}.links.${subIndex}.wrapper`}
                     key={`footer-6-links-${index}-${subIndex}`}
                     data-levo_group_item
                   >
-                    <Icon
-                      elementKey={`links.${index}.links.${subIndex}.icon`}
-                    />
-                    <Typography
-                      elementKey={`links.${index}.links.${subIndex}.cta`}
-                    />
+                    <Icon elementKey={`links.${index}.links.${subIndex}.icon`} />
+                    <Typography elementKey={`links.${index}.links.${subIndex}.cta`} />
                   </Box>
                 ))}
               </Box>
@@ -75,17 +63,15 @@ const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({
             <Form elementKey="contact_form" />
             <Typography elementKey="social_icons_title" />
             <Box data-levo_group elementKey={`social_icon_links_levoGroup`}>
-              {(content?.social_icon_links ?? []).map(
-                (_: unknown, linkIndex: number) => (
-                  <Box
-                    data-levo_group_item
-                    elementKey={`social_icon_links.${linkIndex}.wrapper`}
-                    key={`footer-6-social-icon-${linkIndex}`}
-                  >
-                    <Icon elementKey={`social_icon_links.${linkIndex}.icon`} />
-                  </Box>
-                ),
-              )}
+              {(content?.social_icon_links ?? []).map((_: unknown, linkIndex: number) => (
+                <Box
+                  data-levo_group_item
+                  elementKey={`social_icon_links.${linkIndex}.wrapper`}
+                  key={`footer-6-social-icon-${linkIndex}`}
+                >
+                  <Icon elementKey={`social_icon_links.${linkIndex}.icon`} />
+                </Box>
+              ))}
             </Box>
           </Box>
         </Box>

package/src/blocks/form/form-1.schema.ts

@@ -0,0 +1,144 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  title: "Survey Form",
+  description:
+    "Ready to discuss your financial ambitions? Connect with our team and let's build your future together.",
+  ctas: [{ cta: "Learn More" }, { cta: "Contact Us" }],
+  form: null,
+};
+
+export type IForm1Content = typeof DEFAULT_CONTENT;
+
+export const Form1: IBlock = {
+  category_id: "form",
+  title: "Form 1",
+  key: "form-1",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header",
+      label: "Layout Content Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "text-wrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+    {
+      key: "form",
+      label: "Form",
+      field_interface: "FormWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {},
+        container: {},
+        title: {
+          tablet: {
+            "text-align": "center",
+          },
+        },
+        description: {
+          tablet: {
+            "text-align": "center",
+          },
+        },
+        ctas_levoGroup: {
+          display: "flex",
+          gap: "3xl",
+          "column-gap": "md",
+        },
+        form: {
+          "border-style": "solid",
+          "border-width": "1px",
+          "border-color": "var(--color-border)",
+          "border-radius": "xl",
+        },
+        header: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "margin-bottom": "7xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "md",
+          },
+          mobile: {
+            "row-gap": "base",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H4",
+          },
+        },
+        ctas: [
+          {
+            cta: {
+              selectedVariants: {},
+            },
+          },
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/form/form-1.tsx

@@ -0,0 +1,33 @@
+import {
+  Box,
+  Button,
+  Container,
+  Form,
+  Heading,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IForm1Content } from "./form-1.schema";
+
+const Form1: React.FC<ILevoBlockBaseProps<IForm1Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header">
+        <Box elementKey="text-wrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="ctas_levoGroup" data-levo_group>
+          {(content.ctas ?? []).map((_, index) => (
+            <Button elementKey={`ctas.${index}.cta`} key={`cta-${index}`} data-levo_group_item />
+          ))}
+        </Box>
+      </Box>
+      <Form elementKey="form" />
+    </Container>
+  </Section>
+);
+
+export default Form1;