@levo-so/blocks 0.1.59 → 0.1.60

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

@@ -60,7 +60,15 @@ const Features4: React.FC<ILevoBlockBaseProps<IFeatures4Content>> = ({
                 </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,
     },
     {
@@ -44,7 +46,8 @@ const DEFAULT_CONTENT = {
       title: "Join as Member",
       description:
         "Be part of a strong network dedicated to community support.",
-      cta: "Join Today",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Join Today" }, { cta: "View Benefits" }],
       separator: null,
     },
     {
@@ -54,7 +57,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 +160,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 +195,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 +252,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 +276,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 +327,8 @@ export const Features5: IBlock = {
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
+                filter: "none",
+                "border-bottom": "1px s",
               },
               tablet: {
                 filter: "none",
@@ -393,14 +351,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 +375,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 +406,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 +426,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 +450,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 +474,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 +505,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 +525,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 +549,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 +573,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 +625,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: {},
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -29,7 +29,18 @@ const Features5: React.FC<ILevoBlockBaseProps<IFeatures5Content>> = ({
                 <Box elementKey={`features.${index}.content_wrapper`}>
                   <Heading elementKey={`features.${index}.title`} />
                   <Typography elementKey={`features.${index}.description`} />
-                  <Button elementKey={`features.${index}.cta`} />
+                  <Box
+                    elementKey={`features.${index}.ctas_levoGroup`}
+                    data-levo_group
+                  >
+                    {(content?.features?.[index]?.ctas ?? []).map((_, ctaIndex) => (
+                      <Button
+                        key={`features.${index}.ctas.${ctaIndex}.cta`}
+                        elementKey={`features.${index}.ctas.${ctaIndex}.cta`}
+                        data-levo_group_item
+                      />
+                    ))}
+                  </Box>
                 </Box>
               </Box>
             </Box>