@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/content/content-7.tsx

@@ -3,44 +3,52 @@ import {
   Button,
   Container,
   Heading,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
-import React from "react";
+import type React from "react";
 
-import { type IContent7Content } from "./content-7.schema";
+import type { IContent7Content } from "./content-7.schema";
 
-const Content7: React.FC<ILevoBlockBaseProps<IContent7Content>> = ({
-  content,
-}) => (
+const Content7: React.FC<ILevoBlockBaseProps<IContent7Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_wrapper">
-        <Heading elementKey="title" />
-        <Button elementKey="view_all_cta" />
+        <Box elementKey="header_content">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="view_all_ctas_levoGroup" data-levo_group>
+          {(content?.view_all_ctas ?? []).map((_: any, index: number) => (
+            <Button
+              key={`view_all_ctas.${index}.view_all_cta`}
+              elementKey={`view_all_ctas.${index}.view_all_cta`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
       </Box>
       <Box elementKey="services_levoGroup" data-levo_group>
         {(content.services ?? []).map((_: any, index: number) => (
-          <Box
-            key={index}
-            data-levo_group_item
-            elementKey={`services.${index}.service_item`}
-          >
+          <Box key={index} data-levo_group_item elementKey={`services.${index}.service_item`}>
             <Box elementKey={`services.${index}.left_container`}>
               <Heading elementKey={`services.${index}.service_title`} />
             </Box>
             <Box elementKey={`services.${index}.right_container`}>
-              <Image
-                elementKey={`services.${index}.service_image`}
-                alt="Service image"
-              />
+              <Image elementKey={`services.${index}.service_image`} alt="Service image" />
               <Box elementKey={`services.${index}.content_wrapper`}>
-                <Typography
-                  elementKey={`services.${index}.service_description`}
-                />
-                <Button elementKey={`services.${index}.cta`} />
+                <Typography elementKey={`services.${index}.service_description`} />
+                <Box elementKey={`services.${index}.ctas_levoGroup`} data-levo_group>
+                  {(content?.services?.[index]?.ctas ?? []).map((_: any, ctaIndex: number) => (
+                    <Button
+                      key={`services.${index}.ctas.${ctaIndex}.cta`}
+                      elementKey={`services.${index}.ctas.${ctaIndex}.cta`}
+                      data-levo_group_item
+                    />
+                  ))}
+                </Box>
               </Box>
             </Box>
           </Box>

package/src/blocks/content/content-8.schema.ts

@@ -7,18 +7,21 @@ const DEFAULT_CONTENT = {
   icon_wrapper: null,
   description:
     "Transform your business with our comprehensive platform designed for modern enterprises seeking growth and efficiency.",
-  cta: "Get Started",
+  content_ctas_levoGroup: null,
+  content_ctas: [
+    {
+      cta: "Get Started",
+    },
+    {
+      cta: "Learn More",
+    },
+  ],
   icon: {
     kind: "icon",
     data: {
       id: "simcard-2",
       label: "Simcard 2",
-      tags: [
-        "computers-devices-electronics",
-        "custom",
-        "directional",
-        "simcard",
-      ],
+      tags: ["computers-devices-electronics", "custom", "directional", "simcard"],
       svgCode:
         '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.11 22.72H5.89C3.16 22.72 1.25 20.81 1.25 18.08V10.31C1.25 7.58004 3.16 5.67004 5.89 5.67004H9.72C10.94 5.67004 12.14 6.17004 13 7.03004L15.39 9.41004C16.26 10.28 16.75 11.47 16.75 12.69V18.08C16.75 20.81 14.84 22.72 12.11 22.72ZM5.89 7.17004C3.98 7.17004 2.75 8.40004 2.75 10.31V18.08C2.75 19.99 3.98 21.22 5.89 21.22H12.11C14.02 21.22 15.25 19.99 15.25 18.08V12.69C15.25 11.86 14.91 11.06 14.33 10.47L11.94 8.09004C11.35 7.50004 10.54 7.17004 9.72 7.17004H5.89Z" fill="var(--color-icon-primary)"/>\n<path d="M18.11 18.28H16C15.59 18.28 15.25 17.94 15.25 17.53V12.69C15.25 11.86 14.91 11.06 14.33 10.47L11.94 8.08997C11.35 7.49997 10.54 7.16997 9.72 7.16997H8C7.59 7.16997 7.25 6.82997 7.25 6.41997V5.85997C7.25 3.12997 9.16 1.21997 11.89 1.21997H15.72C16.94 1.21997 18.14 1.71997 19 2.57997L21.39 4.96997C22.27 5.84997 22.75 7.00997 22.75 8.24997V13.64C22.75 16.37 20.84 18.28 18.11 18.28ZM16.75 16.78H18.11C20.02 16.78 21.25 15.55 21.25 13.64V8.24997C21.25 7.40997 20.92 6.61997 20.33 6.02997L17.94 3.63997C17.36 3.05997 16.55 2.71997 15.72 2.71997H11.89C10.05 2.71997 8.83 3.86997 8.75 5.66997H9.72C10.94 5.66997 12.14 6.16997 13 7.02997L15.39 9.40997C16.26 10.28 16.75 11.47 16.75 12.69V16.78Z" fill="var(--color-icon-primary)"/>\n</svg>',
     },
@@ -62,9 +65,17 @@ export const Content8: IBlock = {
       field_interface: "TypographyWidget",
     },
     {
-      key: "cta",
-      label: "CTA Button",
-      field_interface: "ButtonWidget",
+      key: "content_ctas",
+      label: "Content CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
   ],
   layouts: [
@@ -73,20 +84,12 @@ export const Content8: IBlock = {
       title: "Default",
       styles: {
         layout: {
-          "padding-top": "base",
-          "padding-bottom": "base",
-          "padding-left": "none",
-          "padding-right": "none",
           "background-color": "background-2",
         },
         container: {
-          "margin-left": "auto",
-          "margin-right": "auto",
           display: "flex",
           "justify-content": "space-between",
           "align-items": "center",
-          "padding-left": "none",
-          "padding-right": "none",
         },
         inner_container: {
           display: "flex",
@@ -110,16 +113,18 @@ export const Content8: IBlock = {
         },
         description: {
           color: "text-1",
-          "font-size": "lg",
-          "line-height": "1.6",
           "max-width": "600px",
-          "margin-left": "auto",
-          "margin-right": "auto",
         },
         cta: {},
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+      },
     },
   ],
 };

package/src/blocks/content/content-8.tsx

@@ -3,13 +3,13 @@ import {
   Button,
   Container,
   Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
-import React from "react";
+import type React from "react";
 
-import { type IContent8Content } from "./content-8.schema";
+import type { IContent8Content } from "./content-8.schema";
 
 const Content8: React.FC<ILevoBlockBaseProps<IContent8Content>> = ({}) => (
   <Section elementKey="layout">