@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/cards/cards-4.tsx

@@ -7,7 +7,7 @@ import {
   Section,
   Typography,
 } from "@levo-so/studio";
-import React from "react";
+import type React from "react";
 
 import type { ICards4Content } from "./cards-4.schema";
 
@@ -15,30 +15,35 @@ const Cards4: React.FC<ILevoBlockBaseProps<ICards4Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_section">
-        <Heading elementKey="main_title" />
-        <Button elementKey="header_button" />
+        <Box elementKey="title_container">
+          <Heading elementKey="main_title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="header_buttons_levoGroup" data-levo_group>
+          {(content.header_buttons ?? []).map((_: any, index: number) => (
+            <Button
+              key={`header_buttons.${index}.header_button`}
+              elementKey={`header_buttons.${index}.header_button`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
       </Box>
       <Box elementKey="grid_levoGroup" data-levo_group>
         {(content?.grid ?? []).map((_: any, index: number) => (
-          <Box
-            key={`cards-4-${index}`}
-            data-levo_group_item
-            elementKey={`grid.${index}.card`}
-          >
+          <Box key={`cards-4-${index}`} data-levo_group_item elementKey={`grid.${index}.card`}>
             <Box elementKey={`grid.${index}.content_wrapper`}>
               <Heading elementKey={`grid.${index}.title`} />
               <Typography elementKey={`grid.${index}.details`} />
             </Box>
             <Box elementKey={`grid.${index}.ctas_levoGroup`} data-levo_group>
-              {(content?.grid?.[index]?.ctas ?? []).map(
-                (_: any, ctaIndex: number) => (
-                  <Button
-                    key={`cta-${ctaIndex}`}
-                    data-levo_group_item
-                    elementKey={`grid.${index}.ctas.${ctaIndex}.button`}
-                  />
-                ),
-              )}
+              {(content?.grid?.[index]?.ctas ?? []).map((_: any, ctaIndex: number) => (
+                <Button
+                  key={`cta-${ctaIndex}`}
+                  data-levo_group_item
+                  elementKey={`grid.${index}.ctas.${ctaIndex}.button`}
+                />
+              ))}
             </Box>
           </Box>
         ))}

package/src/blocks/cards/cards-5.schema.ts

@@ -1,64 +1,60 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA_1 = {
+  id: "OaJXLqfuFTMZ",
+  filename: "cards-with-bg-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1080w.webp 1080w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_2 = {
+  id: "oilFrpqcKnhb",
+  filename: "cards-with-bg-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   main_wrapper: null,
   left_section: null,
-  left_image: {
-    id: "7141014160938075687",
-    location:
-      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-      "1080w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-      path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-    },
-  },
+  left_image: MEDIA_1,
   right_section: null,
-  background_image: {
-    id: "7141014160938075688",
-    location:
-      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-      "1080w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-      path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-    },
-  },
+  background_image: MEDIA_2,
   card_container: null,
   title: "Transform Your Business",
-  description:
-    "Discover innovative solutions that drive growth and efficiency for your enterprise",
-  cta: "Get Started Today",
+  description: "Discover innovative solutions that drive growth and efficiency for your enterprise",
+  cards_ctas_levoGroup: null,
+  cards_ctas: [
+    {
+      cards_cta: "Get Started Today",
+    },
+    {
+      cards_cta: "Learn More",
+    },
+  ],
 };
 
 export type ICards5Content = typeof DEFAULT_CONTENT;
@@ -128,7 +124,7 @@ export const Cards5: IBlock = {
     {
       key: "title",
       label: "Title",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
     },
     {
       key: "description",
@@ -136,9 +132,17 @@ export const Cards5: IBlock = {
       field_interface: "TypographyWidget",
     },
     {
-      key: "cta",
-      label: "CTA Button",
-      field_interface: "ButtonWidget",
+      key: "cards_ctas",
+      label: "Cards CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cards_cta",
+          label: "Cards Cta",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
   ],
   layouts: [
@@ -146,17 +150,8 @@ export const Cards5: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "base",
-          "padding-right": "base",
-        },
+        layout: {},
+        container: {},
         main_wrapper: {
           display: "flex",
           "align-items": "stretch",
@@ -217,17 +212,28 @@ export const Cards5: IBlock = {
           },
         },
         title: {
-          color: "text-1",
-          "font-size": "base",
           "margin-bottom": "base",
         },
         description: {
-          color: "text-2",
           "margin-bottom": "lg",
           mobile: {
             "margin-bottom": "base",
           },
         },
+        cards_ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          gap: "base",
+          "align-items": "center",
+        },
+        cards_ctas: [
+          {
+            cards_cta: {},
+          },
+          {
+            cards_cta: {},
+          },
+        ],
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -236,7 +242,7 @@ export const Cards5: IBlock = {
             level: 2,
           },
           selectedVariants: {
-            Heading_Level: "H2",
+            Heading_Level: "H4",
           },
         },
       },

package/src/blocks/cards/cards-5.tsx

@@ -1,13 +1,5 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import {
-  Box,
-  Button,
-  Container,
-  Heading,
-  Image,
-  Section,
-  Typography,
-} from "@levo-so/studio";
+import { Box, Button, Container, Heading, Image, Section, Typography } from "@levo-so/studio";
 
 import type { ICards5Content } from "./cards-5.schema";
 
@@ -23,7 +15,15 @@ const Cards5: React.FC<ILevoBlockBaseProps<ICards5Content>> = ({ content }) => (
           <Box elementKey="card_container">
             <Heading elementKey="title" />
             <Typography elementKey="description" />
-            <Button elementKey="cta" />
+            <Box elementKey="cards_ctas_levoGroup" data-levo_group>
+              {(content.cards_ctas ?? []).map((_: unknown, index: number) => (
+                <Button
+                  key={`cards_ctas.${index}.cards_cta`}
+                  elementKey={`cards_ctas.${index}.cards_cta`}
+                  data-levo_group_item
+                />
+              ))}
+            </Box>
           </Box>
         </Box>
       </Box>