@levo-so/blocks 0.1.58 → 0.1.60

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

@@ -121,7 +121,20 @@ const Cards7: React.FC<ILevoBlockBaseProps<ICards7Content>> = ({ content }) => {
                           ),
                         )}
                       </Box>
-                      <Button elementKey={`cards.${index}.cta`} />
+                      <Box
+                        elementKey={`cards.${index}.ctas_levoGroup`}
+                        data-levo_group
+                      >
+                        {(content?.cards?.[index]?.ctas ?? []).map(
+                          (_: unknown, ctaIndex: number) => (
+                            <Button
+                              data-levo_group_item
+                              elementKey={`cards.${index}.ctas.${ctaIndex}.cta`}
+                              key={ctaIndex}
+                            />
+                          ),
+                        )}
+                      </Box>
                     </Box>
                   </Box>
                 </CarouselItem>

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

@@ -5,7 +5,13 @@ const DEFAULT_CONTENT = {
   container: null,
   header_section: null,
   main_title: "Career Opportunity",
-  header_button: "View All",
+  main_description:
+    "Career Opportunity Career Opportunity Career Opportunity Career Opportunity Career Opportunity ",
+  header_buttons_levoGroup: null,
+  header_buttons: [
+    { header_button: "View All" },
+    { header_button: "Learn More" },
+  ],
   grid: [
     {
       card: null,
@@ -15,7 +21,8 @@ const DEFAULT_CONTENT = {
       title: "Senior Software Engineer",
       description:
         "Join our innovative development team to build cutting-edge solutions using modern technologies and agile methodologies.",
-      cta: "Apply Now",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Apply Now" }, { cta: "Learn More" }],
     },
     {
       card: null,
@@ -25,7 +32,8 @@ const DEFAULT_CONTENT = {
       title: "Product Marketing Manager",
       description:
         "Drive product growth and market expansion through strategic marketing campaigns and data-driven insights.",
-      cta: "Apply Now",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Apply Now" }, { cta: "Learn More" }],
     },
     {
       card: null,
@@ -35,7 +43,8 @@ const DEFAULT_CONTENT = {
       title: "UX Research Specialist",
       description:
         "Lead user research initiatives to enhance product experiences and inform design decisions across our platform.",
-      cta: "Apply Now",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Apply Now" }, { cta: "Learn More" }],
     },
     {
       card: null,
@@ -45,7 +54,8 @@ const DEFAULT_CONTENT = {
       title: "Data Science Lead",
       description:
         "Spearhead machine learning projects and analytics initiatives to unlock business insights and drive innovation.",
-      cta: "Apply Now",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Apply Now" }, { cta: "Learn More" }],
     },
   ],
   header_button_rightIcon: {
@@ -113,6 +123,11 @@ export const Cards8: 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",
@@ -125,14 +140,33 @@ export const Cards8: IBlock = {
       },
     },
     {
-      key: "header_button",
-      label: "Header Button",
-      field_interface: "ButtonWidget",
+      key: "main_description",
+      label: "Main Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "header_buttons",
+      label: "Header Button Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "header_button",
+          label: "Header Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Action button for career opportunities. Should encourage exploration.",
+            min_characters: 6,
+            max_characters: 20,
+          },
+        },
+      ],
       hint: {
         prompt_description:
-          "Secondary action button for viewing all career opportunities. Should encourage exploration.",
-        min_characters: 6,
-        max_characters: 20,
+          "Group of header action buttons for viewing career opportunities and related actions.",
+        min_items: 1,
+        max_items: 3,
       },
     },
     {
@@ -202,15 +236,28 @@ export const Cards8: IBlock = {
           },
         },
         {
-          key: "cta",
-          label: "Apply Button",
-          field_interface: "ButtonWidget",
-          hint: {
-            prompt_description:
-              "Primary call-to-action button for job application. Should be compelling and action-oriented.",
-            min_characters: 6,
-            max_characters: 20,
-          },
+          key: "ctas_levoGroup",
+          label: "Apply Buttons Group",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "ctas",
+          label: "Apply Buttons",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "cta",
+              label: "Apply Button",
+              field_interface: "ButtonWidget",
+              hint: {
+                prompt_description:
+                  "Primary call-to-action button for job application. Should be compelling and action-oriented.",
+                min_characters: 6,
+                max_characters: 20,
+              },
+            },
+          ],
         },
       ],
       hint: {
@@ -226,31 +273,8 @@ export const Cards8: 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",
@@ -265,16 +289,15 @@ export const Cards8: IBlock = {
           },
           filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
         },
-        header_button: {
-          color: "text-3",
-          "font-size": "base",
-          "font-weight": "500",
+        header_buttons_levoGroup: {
           display: "flex",
-          "align-items": "center",
+          "flex-direction": "row",
           "column-gap": "xs",
-          filter: "none",
-          "text-decoration": "none",
+          "row-gap": "xs",
+          "flex-wrap": "wrap",
+          "align-items": "center",
         },
+        header_buttons: [{}, {}],
         grid_levoGroup: {
           filter: "none",
           display: "grid",
@@ -286,8 +309,9 @@ export const Cards8: IBlock = {
             "grid-template-columns": "repeat(1, minmax(0, 1fr))",
           },
         },
-        grid: [
-          {
+        grid: Array(4)
+          .fill(0)
+          .map((v) => ({
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
               display: "block",
@@ -312,12 +336,13 @@ export const Cards8: IBlock = {
                 "padding-bottom": "xl",
               },
             },
+            title: {
+              "font-weight": 700,
+            },
             badge: {
-              filter: "none",
-              "font-size": "sm",
-              "font-weight": "500",
-              "background-color": "oklch(0.9289 0.0214 142.4953)",
-              color: "oklch(0.4451 0.1328 142.4953)",
+              "font-weight": 500,
+              "background-color": "brandSecondary",
+              color: "brandSecondaryForeground",
               "padding-top": "xs",
               "padding-bottom": "xs",
               "padding-left": "sm",
@@ -350,341 +375,135 @@ export const Cards8: IBlock = {
               "row-gap": "sm",
               "flex-grow": "1",
             },
-            title: {
-              filter: "none",
-              "font-size": "2xl",
-              "font-weight": "700",
-              color: "text-1",
-              "line-height": "1.3",
-            },
             description: {
-              filter: "none",
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.5",
               display: "none",
             },
-            cta: {
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              gap: "sm",
               filter: "none",
               "border-radius": "base",
               "flex-shrink": "0",
               mobile: {
                 filter: "none",
+                "flex-direction": "column",
                 width: "100%",
               },
               tablet: {
                 filter: "none",
+                "flex-direction": "column",
                 width: "100%",
               },
             },
+            ctas: [
+              {
+                cta: {},
+              },
+              {
+                cta: {},
+              },
+            ],
+          })),
+        header_button_rightIcon: {
+          width: "18px",
+          filter: "none",
+        },
+        header_buttons_levoGroupItem: {
+          header_button: {},
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          selectedVariants: {
+            Heading_Level: "H2",
           },
+        },
+        "grid.0.ctas": [null, null],
+        "grid.1.ctas": [null, null],
+        "grid.2.ctas": [null, null],
+        "grid.3.ctas": [null, null],
+        header_buttons: [
           {
-            card: {
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              display: "block",
-              "background-color": "white",
-              "padding-top": "3xl",
-              "padding-bottom": "3xl",
-              "padding-left": "3xl",
-              "padding-right": "3xl",
-              "border-radius": "xl",
-              mobile: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-bottom": "xl",
-              },
-              tablet: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-right": "xl",
-                "padding-left": "xl",
-                "padding-bottom": "xl",
+            header_button: {
+              selectedVariants: {},
+              button_icons: {
+                right: {
+                  enabled: true,
+                },
               },
             },
-            badge: {
-              filter: "none",
-              "font-size": "sm",
-              "font-weight": "500",
-              "background-color": "oklch(0.9289 0.0214 142.4953)",
-              color: "oklch(0.4451 0.1328 142.4953)",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "sm",
-              "padding-right": "sm",
-              "border-radius": "3xl",
-              display: "inline-block",
-              "margin-bottom": "lg",
+          },
+          {
+            header_button: {
+              selectedVariants: {},
             },
-            content_container: {
-              filter: "none",
-              display: "flex",
-              "align-items": "flex-start",
-              "column-gap": "lg",
-              mobile: {
-                filter: "none",
-                "flex-direction": "column",
-                "row-gap": "lg",
+          },
+        ],
+        grid: [
+          {
+            title: {
+              heading: {
+                level: "4",
               },
-              tablet: {
-                filter: "none",
-                "flex-direction": "column",
-                "row-gap": "lg",
+              selectedVariants: {
+                Heading_Level: "H5",
               },
             },
-            text_section: {
-              filter: "none",
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
-              "flex-grow": "1",
-            },
-            title: {
-              filter: "none",
-              "font-size": "2xl",
-              "font-weight": "700",
-              color: "text-1",
-              "line-height": "1.3",
-            },
-            description: {
-              filter: "none",
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.5",
-              display: "none",
-            },
-            cta: {
-              filter: "none",
-              "border-radius": "base",
-              "flex-shrink": "0",
-              mobile: {
-                filter: "none",
-                width: "100%",
-              },
-              tablet: {
-                filter: "none",
-                width: "100%",
+            badge: {
+              selectedVariants: {
+                Typography_Variants: "Small",
               },
             },
           },
           {
-            card: {
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              display: "block",
-              "background-color": "white",
-              "padding-top": "3xl",
-              "padding-bottom": "3xl",
-              "padding-left": "3xl",
-              "padding-right": "3xl",
-              "border-radius": "xl",
-              mobile: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-bottom": "xl",
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
               },
-              tablet: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-right": "xl",
-                "padding-left": "xl",
-                "padding-bottom": "xl",
+              heading: {
+                level: "4",
               },
             },
             badge: {
-              filter: "none",
-              "font-size": "sm",
-              "font-weight": "500",
-              "background-color": "oklch(0.9289 0.0214 142.4953)",
-              color: "oklch(0.4451 0.1328 142.4953)",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "sm",
-              "padding-right": "sm",
-              "border-radius": "3xl",
-              display: "inline-block",
-              "margin-bottom": "lg",
-            },
-            content_container: {
-              filter: "none",
-              display: "flex",
-              "align-items": "flex-start",
-              "column-gap": "lg",
-              mobile: {
-                filter: "none",
-                "flex-direction": "column",
-                "row-gap": "lg",
-              },
-              tablet: {
-                filter: "none",
-                "flex-direction": "column",
-                "row-gap": "lg",
-              },
-            },
-            text_section: {
-              filter: "none",
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
-              "flex-grow": "1",
-            },
-            title: {
-              filter: "none",
-              "font-size": "2xl",
-              "font-weight": "700",
-              color: "text-1",
-              "line-height": "1.3",
-            },
-            description: {
-              filter: "none",
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.5",
-              display: "none",
-            },
-            cta: {
-              filter: "none",
-              "border-radius": "base",
-              "flex-shrink": "0",
-              mobile: {
-                filter: "none",
-                width: "100%",
-              },
-              tablet: {
-                filter: "none",
-                width: "100%",
+              selectedVariants: {
+                Typography_Variants: "Small",
               },
             },
           },
           {
-            card: {
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              display: "block",
-              "background-color": "white",
-              "padding-top": "3xl",
-              "padding-bottom": "3xl",
-              "padding-left": "3xl",
-              "padding-right": "3xl",
-              "border-radius": "xl",
-              mobile: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-bottom": "xl",
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
               },
-              tablet: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-right": "xl",
-                "padding-left": "xl",
-                "padding-bottom": "xl",
+              heading: {
+                level: "4",
               },
             },
             badge: {
-              filter: "none",
-              "font-size": "sm",
-              "font-weight": "500",
-              "background-color": "oklch(0.9289 0.0214 142.4953)",
-              color: "oklch(0.4451 0.1328 142.4953)",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "sm",
-              "padding-right": "sm",
-              "border-radius": "3xl",
-              display: "inline-block",
-              "margin-bottom": "lg",
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
             },
-            content_container: {
-              filter: "none",
-              display: "flex",
-              "align-items": "flex-start",
-              "column-gap": "lg",
-              mobile: {
-                filter: "none",
-                "flex-direction": "column",
-                "row-gap": "lg",
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
               },
-              tablet: {
-                filter: "none",
-                "flex-direction": "column",
-                "row-gap": "lg",
+              heading: {
+                level: "4",
               },
             },
-            text_section: {
-              filter: "none",
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
-              "flex-grow": "1",
-            },
-            description: {
-              filter: "none",
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.5",
-              display: "none",
-            },
-            cta: {
-              filter: "none",
-              "border-radius": "base",
-              "flex-shrink": "0",
-              mobile: {
-                filter: "none",
-                width: "100%",
-              },
-              tablet: {
-                filter: "none",
-                width: "100%",
+            badge: {
+              selectedVariants: {
+                Typography_Variants: "Small",
               },
             },
           },
         ],
-        header_button_rightIcon: {
-          width: "18px",
-          filter: "none",
-        },
-      },
-      content: DEFAULT_CONTENT,
-      config: {
-        main_title: {
-          selectedVariants: {
-            Heading_Level: "H2",
-          },
-        },
-
-        "grid.0.cta": {
-          selectedVariants: {
-            Button_Variants: "Primary",
-          },
-        },
-        "grid.1.cta": {
-          selectedVariants: {
-            Button_Variants: "Primary",
-          },
-        },
-        "grid.2.cta": {
-          selectedVariants: {
-            Button_Variants: "Primary",
-          },
-        },
-        "grid.3.cta": {
-          selectedVariants: {
-            Button_Variants: "Primary",
-          },
-        },
-        header_button: {
-          selectedVariants: {
-            Button_Variants: "Link",
-          },
-          button_icons: {
-            right: {
-              enabled: true,
-            },
-          },
-        },
       },
     },
   ],