@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/services/service-1.tsx

@@ -1,24 +1,22 @@
 import {
-  type ILevoBlockBaseProps,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  Box,
+  Button,
+  Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
-  Typography,
-  Container,
   Section,
-  Box,
-  AccordionRoot,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-  Button,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IService1Content } from "./service-1.schema";
 
-const Service1: React.FC<ILevoBlockBaseProps<IService1Content>> = ({
-  content,
-}) => (
+const Service1: React.FC<ILevoBlockBaseProps<IService1Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="main-wrapper">
@@ -39,23 +37,13 @@ const Service1: React.FC<ILevoBlockBaseProps<IService1Content>> = ({
                   elementKey={`services-accordion.${index}.wrapper`}
                   data-levo_group_item
                 >
-                  <AccordionTrigger
-                    elementKey={`services-accordion.${index}.trigger`}
-                  >
-                    <Box
-                      elementKey={`services-accordion.${index}.iconQuestionWrapper`}
-                    >
-                      <Typography
-                        elementKey={`services-accordion.${index}.question`}
-                      />
+                  <AccordionTrigger elementKey={`services-accordion.${index}.trigger`}>
+                    <Box elementKey={`services-accordion.${index}.iconQuestionWrapper`}>
+                      <Heading elementKey={`services-accordion.${index}.question`} />
                     </Box>
                   </AccordionTrigger>
-                  <AccordionContent
-                    elementKey={`services-accordion.${index}.content`}
-                  >
-                    <Typography
-                      elementKey={`services-accordion.${index}.answer`}
-                    />
+                  <AccordionContent elementKey={`services-accordion.${index}.content`}>
+                    <Typography elementKey={`services-accordion.${index}.answer`} />
                   </AccordionContent>
                 </AccordionItem>
               ))}
@@ -66,10 +54,7 @@ const Service1: React.FC<ILevoBlockBaseProps<IService1Content>> = ({
             <Heading elementKey="features-title" />
             <Box elementKey="features-list_levoGroup" data-levo_group>
               {(content?.["features-list"] ?? []).map((_, index) => (
-                <Typography
-                  key={index}
-                  elementKey={`features-list.${index}.title`}
-                />
+                <Typography key={index} elementKey={`features-list.${index}.title`} />
               ))}
             </Box>
           </Box>
@@ -88,43 +73,45 @@ const Service1: React.FC<ILevoBlockBaseProps<IService1Content>> = ({
                   elementKey={`service-cards.${cardIndex}.image`}
                   alt={`Service ${cardIndex + 1} image`}
                 />
-                <Typography
-                  elementKey={`service-cards.${cardIndex}.description`}
-                />
-                <Button elementKey={`service-cards.${cardIndex}.cta`} />
+                <Typography elementKey={`service-cards.${cardIndex}.description`} />
+                <Box elementKey={`service-cards.${cardIndex}.ctas_levoGroup`} data-levo_group>
+                  {(content?.["service-cards"]?.[cardIndex]?.ctas ?? []).map((_, ctaIndex) => (
+                    <Button
+                      key={`service-cards.${cardIndex}.ctas.${ctaIndex}.cta`}
+                      elementKey={`service-cards.${cardIndex}.ctas.${ctaIndex}.cta`}
+                      data-levo_group_item
+                    />
+                  ))}
+                </Box>
 
-                {content?.["service-cards"]?.[cardIndex]?.[
-                  "service-features"
-                ] && (
+                {content?.["service-cards"]?.[cardIndex]?.["service-features"] && (
                   <Box
                     elementKey={`service-cards.${cardIndex}.service-features_levoGroup`}
                     data-levo_group
                   >
-                    {(
-                      content?.["service-cards"]?.[cardIndex]?.[
-                        "service-features"
-                      ] ?? []
-                    ).map((_, featureIndex) => (
-                      <Box
-                        key={`feature-${featureIndex}`}
-                        data-levo_group_item
-                        elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.feature-container`}
-                      >
-                        <Icon
-                          elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.icon`}
-                        />
+                    {(content?.["service-cards"]?.[cardIndex]?.["service-features"] ?? []).map(
+                      (_, featureIndex) => (
                         <Box
-                          elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.text-container`}
+                          key={`feature-${featureIndex}`}
+                          data-levo_group_item
+                          elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.feature-container`}
                         >
-                          <Typography
-                            elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.title`}
-                          />
-                          <Typography
-                            elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.description`}
+                          <Icon
+                            elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.icon`}
                           />
+                          <Box
+                            elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.text-container`}
+                          >
+                            <Typography
+                              elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.title`}
+                            />
+                            <Typography
+                              elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.description`}
+                            />
+                          </Box>
                         </Box>
-                      </Box>
-                    ))}
+                      ),
+                    )}
                   </Box>
                 )}
               </Box>

package/src/blocks/services/service-2.schema.ts

@@ -1,23 +1,23 @@
 import type { IBlock } from "@levo-so/studio";
-const DUMMY_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+
+const MEDIA = {
+  id: "pKkmltJTMHQl",
+  filename: "services-2.png",
   kind: "image",
-  mimetype: "image/png",
+  location: "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw.png",
   srcset: {
-    "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-    "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-    "1920w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-320w.webp 320w",
   },
+  mimetype: "image/png",
 };
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -28,7 +28,15 @@ const DEFAULT_CONTENT = {
   title: "Expert Business Consulting Solutions",
   description:
     "Strategic consulting services that drive growth and innovation for your business. Our expert team delivers tailored solutions for sustainable success.",
-  cta: "Get Started",
+  ctas_levoGroup: null,
+  ctas: [
+    {
+      cta: "Get Started",
+    },
+    {
+      cta: "Learn More",
+    },
+  ],
   stats_container: null,
   stats: [
     {
@@ -50,7 +58,7 @@ const DEFAULT_CONTENT = {
   search_input_wrapper: null,
   search_button: "Search",
   right_container: null,
-  hero_image: DUMMY_IMAGE,
+  hero_image: MEDIA,
 };
 
 export type IService2Content = typeof DEFAULT_CONTENT;
@@ -136,15 +144,23 @@ export const Service2: IBlock = {
       },
     },
     {
-      key: "cta",
-      label: "Call to Action",
-      field_interface: "ButtonWidget",
-      hint: {
-        prompt_description:
-          "Primary action button that encourages user engagement. Should be clear and action-oriented.",
-        min_characters: 8,
-        max_characters: 20,
-      },
+      key: "ctas",
+      label: "CTA Buttons Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "Call to Action",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Primary action button that encourages user engagement. Should be clear and action-oriented.",
+            min_characters: 8,
+            max_characters: 20,
+          },
+        },
+      ],
     },
     {
       key: "stats_container",
@@ -219,8 +235,7 @@ export const Service2: IBlock = {
       label: "Search Button",
       field_interface: "ButtonWidget",
       hint: {
-        prompt_description:
-          "Button that initiates the search based on entered zipcode.",
+        prompt_description: "Button that initiates the search based on entered zipcode.",
         min_characters: 8,
         max_characters: 20,
       },
@@ -266,30 +281,8 @@ export const Service2: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "oklch(0.9643 0.0169 61.9599)",
-          tablet: {
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-            "padding-left": "lg",
-            "padding-right": "lg",
-          },
-          mobile: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
-          },
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        layout: {},
+        container: {},
         main_wrapper: {
           display: "flex",
           "align-items": "center",
@@ -321,23 +314,24 @@ export const Service2: IBlock = {
           "padding-right": "2xs",
           "padding-top": "4xs",
           "padding-bottom": "4xs",
-          color: "white",
-        },
-        title: {
-          color: "text-1",
-        },
-        description: {
-          color: "text-2",
+          color: "brandForeground",
         },
-        cta: {
-          "background-color": "oklch(0.3451 0.1175 164.4309)",
-          color: "white",
-          "padding-top": "sm",
-          "padding-bottom": "sm",
-          "padding-left": "lg",
-          "padding-right": "lg",
+        title: {},
+        description: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "md",
+          "row-gap": "md",
+          "flex-wrap": "wrap",
+          "align-items": "center",
           "align-self": "flex-start",
         },
+        ctas: Array(2)
+          .fill(0)
+          .map(() => ({
+            cta: {},
+          })),
         stats_container: {
           display: "flex",
           "flex-direction": "column",
@@ -372,12 +366,8 @@ export const Service2: IBlock = {
               "flex-direction": "column",
               "row-gap": "xs",
             },
-            value: {
-              color: "text-1",
-            },
-            label: {
-              color: "text-2",
-            },
+            value: {},
+            label: {},
           },
           {
             stat_wrapper: {
@@ -385,9 +375,7 @@ export const Service2: IBlock = {
               "flex-direction": "column",
               "row-gap": "xs",
             },
-            value: {
-              color: "text-1",
-            },
+            value: {},
             label: {
               color: "text-2",
             },
@@ -398,9 +386,7 @@ export const Service2: IBlock = {
               "flex-direction": "column",
               "row-gap": "xs",
             },
-            value: {
-              color: "text-1",
-            },
+            value: {},
             label: {
               color: "text-2",
             },
@@ -411,10 +397,10 @@ export const Service2: IBlock = {
       config: {
         title: {
           heading: {
-            level: 1,
+            level: "2",
           },
           selectedVariants: {
-            Heading_Level: "H1",
+            Heading_Level: "H2",
           },
         },
         cta: {
@@ -427,6 +413,32 @@ export const Service2: IBlock = {
             Button_Variants: "Secondary",
           },
         },
+        stats: [
+          {
+            value: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+          {
+            value: {
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+          {
+            value: {
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+        ],
       },
     },
   ],

package/src/blocks/services/service-2.tsx

@@ -4,20 +4,18 @@ import {
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
   useBlockContext,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 
 import type { IService2Content } from "./service-2.schema";
 
-const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({
-  content,
-  config,
-}) => {
+const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({ content, config }) => {
   const [zipcode, setZipcode] = useState("");
   const { isBuilder } = useBlockContext();
   return (
@@ -29,7 +27,15 @@ const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({
               <Typography elementKey="label" />
               <Heading elementKey="title" />
               <Typography elementKey="description" />
-              <Button elementKey="cta" />
+              <Box elementKey="ctas_levoGroup" data-levo_group>
+                {(content?.ctas ?? []).map((_: any, index: number) => (
+                  <Button
+                    key={`ctas.${index}.cta`}
+                    elementKey={`ctas.${index}.cta`}
+                    data-levo_group_item
+                  />
+                ))}
+              </Box>
             </Box>
             <Box elementKey="stats_container">
               <Box elementKey="stats_levoGroup" data-levo_group>