@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,10 +1,10 @@
 import {
-  type ILevoBlockBaseProps,
   Box,
   Button,
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Media,
   Section,
   Typography,
@@ -12,9 +12,7 @@ import {
 
 import type { IFeatures4Content } from "./features-4.schema";
 
-const Features4: React.FC<ILevoBlockBaseProps<IFeatures4Content>> = ({
-  content,
-}) => (
+const Features4: React.FC<ILevoBlockBaseProps<IFeatures4Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_section">
@@ -53,14 +51,20 @@ const Features4: React.FC<ILevoBlockBaseProps<IFeatures4Content>> = ({
                   <Icon elementKey={`specifications_2.${index}.icon`} />
                   <Box elementKey={`specifications_2.${index}.text_wrapper`}>
                     <Heading elementKey={`specifications_2.${index}.value`} />
-                    <Typography
-                      elementKey={`specifications_2.${index}.label`}
-                    />
+                    <Typography elementKey={`specifications_2.${index}.label`} />
                   </Box>
                 </Box>
               ))}
             </Box>
-            <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>
         <Media

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

@@ -23,7 +23,8 @@ const DEFAULT_CONTENT = {
       content_wrapper: null,
       title: "Become a Volunteer",
       description: "Join us to create meaningful change.",
-      cta: "Register",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Register" }, { cta: "Learn More" }],
       separator: null,
     },
     {
@@ -33,7 +34,8 @@ const DEFAULT_CONTENT = {
       content_wrapper: null,
       title: "Partner with Us",
       description: "Collaborate as a business or organization.",
-      cta: "Get Started",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Get Started" }, { cta: "Contact Us" }],
       separator: null,
     },
     {
@@ -42,9 +44,9 @@ const DEFAULT_CONTENT = {
       icon: DUMMY_ICON,
       content_wrapper: null,
       title: "Join as Member",
-      description:
-        "Be part of a strong network dedicated to community support.",
-      cta: "Join Today",
+      description: "Be part of a strong network dedicated to community support.",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Join Today" }, { cta: "View Benefits" }],
       separator: null,
     },
     {
@@ -54,7 +56,8 @@ const DEFAULT_CONTENT = {
       content_wrapper: null,
       title: "Donate",
       description: "Your contributions help sustain our programs.",
-      cta: "Donate Now",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Donate Now" }, { cta: "Other Ways" }],
       separator: null,
     },
   ],
@@ -156,13 +159,17 @@ export const Features5: IBlock = {
           },
         },
         {
-          key: "cta",
-          label: "CTA",
-          field_interface: "ButtonWidget",
-          hint: {
-            prompt_description:
-              "Call-to-action button for the feature. Use action verbs that encourage engagement.",
-          },
+          key: "ctas",
+          label: "CTA Buttons Group",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "cta",
+              label: "CTA Button",
+              field_interface: "ButtonWidget",
+            },
+          ],
         },
         {
           key: "separator",
@@ -187,40 +194,8 @@ export const Features5: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          display: "flex",
-          width: "100%",
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-          "padding-left": "lg",
-          "padding-right": "lg",
-          "background-color": "white",
-          mobile: {
-            "padding-top": "2xl",
-            "padding-bottom": "2xl",
-            "padding-left": "base",
-            "padding-right": "base",
-            filter: "none",
-          },
-          filter: "none",
-          tablet: {
-            filter: "none",
-          },
-        },
-        container: {
-          display: "flex",
-          width: "100%",
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          filter: "none",
-          tablet: {
-            filter: "none",
-          },
-          mobile: {
-            filter: "none",
-          },
-        },
+        layout: {},
+        container: {},
         features_levoGroup: {
           display: "flex",
           width: "100%",
@@ -276,14 +251,15 @@ export const Features5: IBlock = {
               "justify-content": "start",
             },
             icon: {
-              width: "48px",
-              height: "48px",
               "flex-shrink": "0",
               mobile: {
                 width: "40px",
                 height: "40px",
               },
               filter: "none",
+              height: "36px",
+              width: "36px",
+              "font-size": "36px",
             },
             content_wrapper: {
               display: "flex",
@@ -299,50 +275,29 @@ export const Features5: IBlock = {
               },
             },
             title: {
-              color: "text-1",
               mobile: {
                 "text-align": "center",
               },
+              "font-weight": 700,
             },
             description: {
-              "font-family": "var(--font-body)",
-              color: "text-2",
-
-              "line-height": "normal",
               "max-width": "200px",
               mobile: {
                 "max-width": "180px",
                 "text-align": "left",
-                filter: "none",
               },
             },
-            cta: {
-              "background-color": "white",
-              color: "text-1",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "none",
-              "padding-right": "sm",
-              "border-radius": "base",
-              "border-width": "1px",
-              "border-color": "border",
-
-              "text-decoration": "none",
-              "margin-top": "xs",
-              mobile: {
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "base",
-                "padding-right": "base",
-              },
-              filter: "none",
-              tablet: {
-                filter: "none",
-                "margin-top": "none",
-                "padding-top": "none",
-                "padding-bottom": "none",
-              },
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             separator: {
               width: "1px",
               height: "150px",
@@ -371,6 +326,8 @@ export const Features5: IBlock = {
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
+                filter: "none",
+                "border-bottom": "1px s",
               },
               tablet: {
                 filter: "none",
@@ -393,14 +350,15 @@ export const Features5: IBlock = {
               "justify-content": "start",
             },
             icon: {
-              width: "48px",
-              height: "48px",
               "flex-shrink": "0",
               mobile: {
                 width: "40px",
                 height: "40px",
               },
               filter: "none",
+              height: "36px",
+              width: "36px",
+              "font-size": "36px",
             },
             content_wrapper: {
               display: "flex",
@@ -416,55 +374,29 @@ export const Features5: IBlock = {
               },
             },
             title: {
-              color: "text-1",
               mobile: {
                 "text-align": "center",
               },
+              "font-weight": 700,
             },
             description: {
-              color: "text-2",
               "max-width": "200px",
               mobile: {
                 "max-width": "180px",
                 "text-align": "left",
-                filter: "none",
               },
             },
-            cta: {
+            ctas_levoGroup: {
               display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
               "align-items": "center",
-              "justify-content": "center",
-              "border-radius": "base",
-              "background-color": "white",
-              color: "text-1",
-              cursor: "pointer",
-
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "none",
-              "padding-right": "sm",
-              "border-color": "border",
-              "border-width": "1px",
-              "border-style": "solid",
-              _hover: {
-                opacity: "0.9",
-              },
-              "text-decoration": "none",
-              "margin-top": "xs",
-              mobile: {
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "base",
-                "padding-right": "base",
-              },
-              filter: "none",
-              tablet: {
-                filter: "none",
-                "margin-top": "none",
-                "padding-top": "none",
-                "padding-bottom": "none",
-              },
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             separator: {
               width: "1px",
               height: "150px",
@@ -473,11 +405,15 @@ export const Features5: IBlock = {
               "margin-right": "xl",
               mobile: {
                 display: "none",
+                filter: "none",
               },
               filter: "none",
               tablet: {
                 filter: "none",
                 display: "none",
+                height: "80px",
+                "margin-left": "none",
+                "margin-right": "none",
               },
             },
           },
@@ -489,6 +425,11 @@ export const Features5: IBlock = {
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
+                filter: "none",
+                "border-bottom": "1px s",
+              },
+              tablet: {
+                filter: "none",
               },
             },
             icon_content_wrapper: {
@@ -508,14 +449,15 @@ export const Features5: IBlock = {
               "justify-content": "start",
             },
             icon: {
-              width: "48px",
-              height: "48px",
               "flex-shrink": "0",
               mobile: {
                 width: "40px",
                 height: "40px",
               },
               filter: "none",
+              height: "36px",
+              width: "36px",
+              "font-size": "36px",
             },
             content_wrapper: {
               display: "flex",
@@ -531,58 +473,29 @@ export const Features5: IBlock = {
               },
             },
             title: {
-              color: "text-1",
               mobile: {
                 "text-align": "center",
               },
+              "font-weight": 700,
             },
             description: {
-              "font-family": "var(--font-body)",
-              color: "text-2",
-
-              "line-height": "normal",
               "max-width": "200px",
               mobile: {
                 "max-width": "180px",
                 "text-align": "left",
-                filter: "none",
               },
             },
-            cta: {
+            ctas_levoGroup: {
               display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
               "align-items": "center",
-              "justify-content": "center",
-              "border-radius": "base",
-              "background-color": "white",
-              color: "text-1",
-              cursor: "pointer",
-
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "none",
-              "padding-right": "sm",
-              "border-color": "border",
-              "border-width": "1px",
-              "border-style": "solid",
-              _hover: {
-                opacity: "0.9",
-              },
-              "text-decoration": "none",
-              "margin-top": "xs",
-              mobile: {
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "base",
-                "padding-right": "base",
-              },
-              filter: "none",
-              tablet: {
-                filter: "none",
-                "margin-top": "none",
-                "padding-top": "none",
-                "padding-bottom": "none",
-              },
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             separator: {
               width: "1px",
               height: "150px",
@@ -591,11 +504,15 @@ export const Features5: IBlock = {
               "margin-right": "xl",
               mobile: {
                 display: "none",
+                filter: "none",
               },
               filter: "none",
               tablet: {
                 filter: "none",
                 display: "none",
+                height: "80px",
+                "margin-left": "none",
+                "margin-right": "none",
               },
             },
           },
@@ -607,6 +524,11 @@ export const Features5: IBlock = {
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
+                filter: "none",
+                "border-bottom": "1px s",
+              },
+              tablet: {
+                filter: "none",
               },
             },
             icon_content_wrapper: {
@@ -626,15 +548,15 @@ export const Features5: IBlock = {
               "justify-content": "start",
             },
             icon: {
-              width: "48px",
-              height: "48px",
               "flex-shrink": "0",
               mobile: {
                 width: "40px",
                 height: "40px",
-                filter: "none",
               },
               filter: "none",
+              height: "36px",
+              width: "36px",
+              "font-size": "36px",
             },
             content_wrapper: {
               display: "flex",
@@ -650,66 +572,46 @@ export const Features5: IBlock = {
               },
             },
             title: {
-              color: "text-1",
               mobile: {
                 "text-align": "center",
               },
+              "font-weight": 700,
             },
             description: {
-              "font-family": "var(--font-body)",
-              color: "text-2",
-
-              "line-height": "normal",
               "max-width": "200px",
               mobile: {
                 "max-width": "180px",
                 "text-align": "left",
-                filter: "none",
               },
             },
-            cta: {
+            ctas_levoGroup: {
               display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
               "align-items": "center",
-              "justify-content": "center",
-              "border-radius": "base",
-              "background-color": "white",
-              color: "text-1",
-              cursor: "pointer",
-
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "none",
-              "padding-right": "sm",
-              "border-color": "border",
-              "border-width": "1px",
-              "border-style": "solid",
-              _hover: {
-                opacity: "0.9",
-              },
-              "text-decoration": "none",
-              "margin-top": "xs",
-              mobile: {
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "base",
-                "padding-right": "base",
-              },
-              filter: "none",
-              tablet: {
-                filter: "none",
-                "margin-top": "none",
-                "padding-top": "none",
-                "padding-bottom": "none",
-              },
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             separator: {
               width: "1px",
-              height: "80px",
+              height: "150px",
               "background-color": "var(--color-border)",
               "margin-left": "xl",
               "margin-right": "xl",
               mobile: {
                 display: "none",
+                filter: "none",
+              },
+              filter: "none",
+              tablet: {
+                filter: "none",
+                display: "none",
+                height: "80px",
+                "margin-left": "none",
+                "margin-right": "none",
               },
             },
           },
@@ -722,6 +624,99 @@ export const Features5: IBlock = {
             level: 2,
           },
         },
+        features: [
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {
+                    Button_Variants: "Outline",
+                  },
+                },
+              })),
+            icon: {
+              selectedVariants: {},
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {
+                    Button_Variants: "Outline",
+                  },
+                },
+              })),
+            icon: {
+              selectedVariants: {},
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {
+                    Button_Variants: "Outline",
+                  },
+                },
+              })),
+            icon: {
+              selectedVariants: {},
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {
+                    Button_Variants: "Outline",
+                  },
+                },
+              })),
+            icon: {
+              selectedVariants: {},
+            },
+          },
+        ],
       },
     },
   ],