@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,5 +1,23 @@
 import type { IBlock } from "@levo-so/studio";
 
+const IMG = {
+  id: "HXVK4tirkNvhr",
+  filename: "cards-3-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -8,29 +26,7 @@ const DEFAULT_CONTENT = {
   main_title: "Schedule a productivity boost",
   description:
     "Take control of your time and energy with smart planning tools. Build better habits, stay focused, and get more done—every day.",
-  hero_image: {
-    id: "7141014160938075687",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/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",
-    },
-  },
+  hero_image: IMG,
   stats_section: null,
   stats_cards: [
     {
@@ -138,22 +134,8 @@ export const Cards3: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-          "padding-left": "base",
-          "padding-right": "base",
-          "background-color": "background-1",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          mobile: {
-            filter: "none",
-          },
-          filter: "none",
-        },
+        layout: {},
+        container: {},
         hero_section: {
           display: "flex",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -192,26 +174,17 @@ export const Cards3: IBlock = {
           },
         },
         main_title: {
-          color: "text-1",
+          width: "500px",
           mobile: {
-            filter: "none",
             width: "100%",
             "text-align": "center",
           },
-          filter: "none",
-          width: "500px",
         },
         description: {
-          "font-size": "lg",
-          color: "text-2",
-          "line-height": "1.6",
           mobile: {
-            "font-size": "base",
-            filter: "none",
             width: "100%",
             "text-align": "center",
           },
-          filter: "none",
           width: "400px",
         },
         hero_image: {
@@ -286,56 +259,50 @@ export const Cards3: IBlock = {
               },
             },
             number: {
-              filter: "none",
               mobile: {
-                filter: "none",
                 "text-align": "center",
               },
             },
-            label: {
-              filter: "none",
-            },
+            label: {},
+            card: {},
           },
           {
             number: {
-              filter: "none",
-
               mobile: {
-                filter: "none",
                 "text-align": "center",
               },
             },
             separator: {
               filter: "none",
-              width: "1px",
               height: "100px",
+              width: "1px",
               "background-color": "black",
               mobile: {
                 filter: "none",
                 display: "none",
               },
-              tablet: {
-                filter: "none",
-              },
-            },
-            label: {
-              filter: "none",
-              "font-weight": 500,
             },
+            label: {},
+            card: {},
           },
           {
             number: {
-              filter: "none",
-
               mobile: {
-                filter: "none",
                 "text-align": "center",
               },
             },
-            label: {
+            label: {},
+            separator: {
               filter: "none",
-              "font-weight": 500,
+              height: "100px",
+              width: "1px",
+              "background-color": "black",
+              mobile: {
+                filter: "none",
+                display: "none",
+              },
             },
+            card: {},
           },
         ],
       },
@@ -349,6 +316,37 @@ export const Cards3: IBlock = {
             Heading_Level: "H2",
           },
         },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        stats_cards: [
+          {
+            label: {
+              selectedVariants: {},
+            },
+            card: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+            card: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+            card: {
+              selectedVariants: {},
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -1,13 +1,13 @@
-import React from "react";
 import {
-  type ILevoBlockBaseProps,
-  Section,
-  Container,
   Box,
+  Container,
   Heading,
-  Typography,
+  type ILevoBlockBaseProps,
   Image,
+  Section,
+  Typography,
 } from "@levo-so/studio";
+import React from "react";
 
 import type { ICards3Content } from "./cards-3.schema";
 
@@ -25,18 +25,12 @@ const Cards3: React.FC<ILevoBlockBaseProps<ICards3Content>> = ({ content }) => (
         <Box elementKey="stats_cards_levoGroup" data-levo_group>
           {(content?.stats_cards ?? []).map((_: any, index: number) => (
             <React.Fragment key={`cards-3-stat-${index}`}>
-              <Box
-                data-levo_group_item
-                elementKey={`stats_cards.${index}.card`}
-              >
+              <Box data-levo_group_item elementKey={`stats_cards.${index}.card`}>
                 <Heading elementKey={`stats_cards.${index}.number`} />
                 <Typography elementKey={`stats_cards.${index}.label`} />
               </Box>
               {index < (content?.stats_cards?.length ?? 0) - 1 && (
-                <Box
-                  elementKey={`stats_cards.${index}.separator`}
-                  data-levo_group_item
-                />
+                <Box elementKey={`stats_cards.${index}.separator`} data-levo_group_item />
               )}
             </React.Fragment>
           ))}

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

@@ -5,14 +5,22 @@ const DEFAULT_CONTENT = {
   container: null,
   header_section: null,
   main_title: "Career Opportunity",
-  header_button: "View All",
+  description: "Career Opportunity Career Opportunity Career Opportunity Career Opportunity ",
+  header_buttons_levoGroup: null,
+  header_buttons: [
+    {
+      header_button: "View All",
+    },
+    {
+      header_button: "Apply Now",
+    },
+  ],
   grid: [
     {
       card: null,
       content_wrapper: null,
       title: "Marketing Executive",
-      details:
-        "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      details: "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
       ctas: [
         {
           button: "Apply Now",
@@ -26,8 +34,7 @@ const DEFAULT_CONTENT = {
       card: null,
       content_wrapper: null,
       title: "Product Designer",
-      details:
-        "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      details: "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
       ctas: [
         {
           button: "Apply Now",
@@ -41,8 +48,7 @@ const DEFAULT_CONTENT = {
       card: null,
       content_wrapper: null,
       title: "Web Designer",
-      details:
-        "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      details: "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
       ctas: [
         {
           button: "Apply Now",
@@ -56,8 +62,7 @@ const DEFAULT_CONTENT = {
       card: null,
       content_wrapper: null,
       title: "Software Developer",
-      details:
-        "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      details: "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
       ctas: [
         {
           button: "Apply Now",
@@ -76,20 +81,13 @@ const DEFAULT_CONTENT = {
       mimetype: "image/png",
       kind: "image",
       srcset: {
-        "1080w":
-          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp",
-        "1200w":
-          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp",
-        "1920w":
-          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp",
-        "320w":
-          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp",
-        "640w":
-          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp",
-        "750w":
-          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp",
-        "828w":
-          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp",
+        "1080w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp",
+        "1200w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp",
+        "1920w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp",
+        "320w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp",
+        "640w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp",
+        "750w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp",
+        "828w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp",
         path: "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp 1080w",
       },
     },
@@ -120,8 +118,7 @@ export const Cards4: IBlock = {
       label: "Container",
       field_interface: "ContainerWidget",
       hint: {
-        prompt_description:
-          "Main container for centering and constraining the content width.",
+        prompt_description: "Main container for centering and constraining the content width.",
       },
     },
     {
@@ -133,6 +130,11 @@ export const Cards4: IBlock = {
           "Header area containing the main title and view all button, positioned horizontally.",
       },
     },
+    {
+      key: "title_container",
+      label: "Title Container",
+      field_interface: "BoxWidget",
+    },
     {
       key: "main_title",
       label: "Main Title",
@@ -145,15 +147,28 @@ export const Cards4: IBlock = {
       },
     },
     {
-      key: "header_button",
-      label: "Header  Button",
-      field_interface: "ButtonWidget",
-      hint: {
-        prompt_description:
-          "Secondary action button for viewing all career opportunities. Should encourage exploration.",
-        min_characters: 6,
-        max_characters: 20,
-      },
+      key: "description",
+      label: "Descripton",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "header_buttons",
+      label: "Header Buttons Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "header_button",
+          label: "Header Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Secondary action button for viewing all career opportunities. Should encourage exploration.",
+            min_characters: 6,
+            max_characters: 20,
+          },
+        },
+      ],
     },
     {
       key: "grid",
@@ -240,31 +255,8 @@ export const Cards4: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "6xl",
-          "padding-bottom": "6xl",
-          "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",
-          filter: "none",
-        },
+        layout: {},
+        container: {},
         header_section: {
           display: "flex",
           "justify-content": "space-between",
@@ -279,18 +271,23 @@ export const Cards4: IBlock = {
           },
           filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
         },
-        main_title: {
-          color: "text-1",
-          filter: "none",
-        },
-        header_button: {
-          color: "text-3",
+        main_title: {},
+        header_buttons_levoGroup: {
           display: "flex",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "row-gap": "sm",
+          "flex-wrap": "wrap",
           "align-items": "center",
-          "column-gap": "xs",
-          filter: "none",
-          "text-decoration": "none",
         },
+        header_buttons: [
+          {
+            header_button: {},
+          },
+          {
+            header_button: {},
+          },
+        ],
         cards_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -308,9 +305,7 @@ export const Cards4: IBlock = {
         },
         grid: [
           {
-            title: {
-              filter: "none",
-            },
+            title: {},
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
               display: "block",
@@ -335,9 +330,7 @@ export const Cards4: IBlock = {
                 "padding-bottom": "xl",
               },
             },
-            details: {
-              filter: "none",
-            },
+            details: {},
             ctas_levoGroup: {
               filter: "none",
               display: "flex",
@@ -362,21 +355,15 @@ export const Cards4: IBlock = {
             },
             ctas: [
               {
-                button: {
-                  filter: "none",
-                },
+                button: {},
               },
               {
-                button: {
-                  filter: "none",
-                },
+                button: {},
               },
             ],
           },
           {
-            title: {
-              filter: "none",
-            },
+            title: {},
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
               display: "block",
@@ -401,9 +388,7 @@ export const Cards4: IBlock = {
                 "padding-bottom": "xl",
               },
             },
-            details: {
-              filter: "none",
-            },
+            details: {},
             ctas_levoGroup: {
               filter: "none",
               display: "flex",
@@ -428,9 +413,7 @@ export const Cards4: IBlock = {
             },
             ctas: [
               {
-                button: {
-                  filter: "none",
-                },
+                button: {},
               },
               {
                 button: {
@@ -440,9 +423,7 @@ export const Cards4: IBlock = {
             ],
           },
           {
-            title: {
-              filter: "none",
-            },
+            title: {},
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
               display: "block",
@@ -467,9 +448,7 @@ export const Cards4: IBlock = {
                 "padding-bottom": "xl",
               },
             },
-            details: {
-              filter: "none",
-            },
+            details: {},
             ctas_levoGroup: {
               filter: "none",
               display: "flex",
@@ -494,9 +473,7 @@ export const Cards4: IBlock = {
             },
             ctas: [
               {
-                button: {
-                  filter: "none",
-                },
+                button: {},
               },
               {
                 button: {
@@ -506,9 +483,7 @@ export const Cards4: IBlock = {
             ],
           },
           {
-            title: {
-              filter: "none",
-            },
+            title: {},
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
               display: "block",
@@ -533,9 +508,7 @@ export const Cards4: IBlock = {
                 "padding-bottom": "xl",
               },
             },
-            details: {
-              filter: "none",
-            },
+            details: {},
             ctas_levoGroup: {
               filter: "none",
               display: "flex",
@@ -560,9 +533,7 @@ export const Cards4: IBlock = {
             },
             ctas: [
               {
-                button: {
-                  filter: "none",
-                },
+                button: {},
               },
               {
                 button: {
@@ -598,7 +569,6 @@ export const Cards4: IBlock = {
             Heading_Level: "H2",
           },
         },
-
         "cards.0.ctas.0.button": {
           selectedVariants: {
             Button_Variants: "Primary",
@@ -639,16 +609,91 @@ export const Cards4: IBlock = {
             Button_Variants: "Secondary",
           },
         },
-        header_button: {
-          selectedVariants: {
-            Button_Variants: "Link",
+        header_buttons: [
+          {
+            header_button: {
+              selectedVariants: {
+                Button_Variants: "Link",
+              },
+              button_icons: {
+                right: {
+                  enabled: true,
+                },
+              },
+            },
           },
-          button_icons: {
-            right: {
-              enabled: true,
+          {
+            header_button: {
+              selectedVariants: {},
             },
           },
-        },
+        ],
+        grid: [
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            card: {
+              selectedVariants: {},
+            },
+            details: {
+              selectedVariants: {},
+            },
+            ctas: [
+              {
+                button: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                button: {
+                  selectedVariants: {},
+                },
+              },
+            ],
+          },
+          {
+            card: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            details: {
+              selectedVariants: {},
+            },
+          },
+          {
+            card: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            details: {
+              selectedVariants: {},
+            },
+          },
+          {
+            card: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            details: {
+              selectedVariants: {},
+            },
+          },
+        ],
       },
     },
   ],