@levo-so/blocks 0.1.58 → 0.1.60

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

@@ -5,7 +5,17 @@ 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,
@@ -133,6 +143,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 +160,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 +268,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 +284,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 +318,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 +343,7 @@ export const Cards4: IBlock = {
                 "padding-bottom": "xl",
               },
             },
-            details: {
-              filter: "none",
-            },
+            details: {},
             ctas_levoGroup: {
               filter: "none",
               display: "flex",
@@ -362,21 +368,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 +401,7 @@ export const Cards4: IBlock = {
                 "padding-bottom": "xl",
               },
             },
-            details: {
-              filter: "none",
-            },
+            details: {},
             ctas_levoGroup: {
               filter: "none",
               display: "flex",
@@ -428,9 +426,7 @@ export const Cards4: IBlock = {
             },
             ctas: [
               {
-                button: {
-                  filter: "none",
-                },
+                button: {},
               },
               {
                 button: {
@@ -440,9 +436,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 +461,7 @@ export const Cards4: IBlock = {
                 "padding-bottom": "xl",
               },
             },
-            details: {
-              filter: "none",
-            },
+            details: {},
             ctas_levoGroup: {
               filter: "none",
               display: "flex",
@@ -494,9 +486,7 @@ export const Cards4: IBlock = {
             },
             ctas: [
               {
-                button: {
-                  filter: "none",
-                },
+                button: {},
               },
               {
                 button: {
@@ -506,9 +496,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 +521,7 @@ export const Cards4: IBlock = {
                 "padding-bottom": "xl",
               },
             },
-            details: {
-              filter: "none",
-            },
+            details: {},
             ctas_levoGroup: {
               filter: "none",
               display: "flex",
@@ -560,9 +546,7 @@ export const Cards4: IBlock = {
             },
             ctas: [
               {
-                button: {
-                  filter: "none",
-                },
+                button: {},
               },
               {
                 button: {
@@ -598,7 +582,6 @@ export const Cards4: IBlock = {
             Heading_Level: "H2",
           },
         },
-
         "cards.0.ctas.0.button": {
           selectedVariants: {
             Button_Variants: "Primary",
@@ -639,16 +622,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: {},
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -15,8 +15,19 @@ 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) => (

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

@@ -1,64 +1,77 @@
 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",
+  cards_ctas_levoGroup: null,
+  cards_ctas: [
+    {
+      cards_cta: "Get Started Today",
+    },
+    {
+      cards_cta: "Learn More",
+    },
+  ],
 };
 
 export type ICards5Content = typeof DEFAULT_CONTENT;
@@ -128,7 +141,7 @@ export const Cards5: IBlock = {
     {
       key: "title",
       label: "Title",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
     },
     {
       key: "description",
@@ -136,9 +149,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 +167,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 +229,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 +259,7 @@ export const Cards5: IBlock = {
             level: 2,
           },
           selectedVariants: {
-            Heading_Level: "H2",
+            Heading_Level: "H4",
           },
         },
       },

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

@@ -23,7 +23,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>