@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -135,8 +135,7 @@ export const Footer3: IBlock = {
   title: "Footer 3",
   key: "footer-3",
   version: "v1",
-  prompt_description:
-    "Professional footer with company info, service links, and contact details",
+  prompt_description: "Professional footer with company info, service links, and contact details",
   content_schema: [
     {
       key: "layout",
@@ -164,7 +163,7 @@ export const Footer3: IBlock = {
         {
           key: "category",
           label: "Section Title",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "links",
@@ -239,36 +238,215 @@ export const Footer3: IBlock = {
       key: "default",
       content: DEFAULT_CONTENT,
       config: {
-        links: Array(4)
-          .fill(0)
-          .map(() => ({
+        links: [
+          {
+            category: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            links: [
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            category: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            links: [
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+            ],
+          },
+          {
             category: {
               selectedVariants: {
-                Typography_Variants: "Large",
+                Heading_Level: "H6",
+              },
+              heading: {
+                level: "4",
               },
             },
-            links: Array(6)
-              .fill(0)
-              .map(() => {
-                return {
-                  text: {
-                    selectedVariants: {
-                      Typography_Variants: "Body",
-                    },
+            links: [
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
                   },
-                };
-              }),
-          })),
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            category: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            links: [
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+                contactWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+                contactWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                text: {
+                  selectedVariants: {
+                    Typography_Variants: "Body",
+                  },
+                },
+                contactWrapper: {
+                  selectedVariants: {},
+                },
+              },
+            ],
+          },
+        ],
       },
       styles: {
-        container: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-          mobile: {
-            "padding-top": "5xl",
-            "padding-bottom": "5xl",
-          },
-        },
+        container: {},
         mainFooterWrapper: {
           display: "flex",
           "grid-template-columns": "repeat(4, minmax(0, 1fr))",
@@ -314,37 +492,137 @@ export const Footer3: IBlock = {
           width: "100%",
         },
         links: [
-          ...DEFAULT_LAYOUT_LINKS_STYLES,
           {
-            category: DEFAULT_LAYOUT_LINKS_STYLE.category,
-            links_levoGroup: DEFAULT_LAYOUT_LINKS_STYLE.links_levoGroup,
-            links: Array(3)
-              .fill(0)
-              .map((_, index) => {
-                return {
-                  contactWrapper: {
-                    display: "flex",
-                    "align-items": "center",
-                    "column-gap": "xs",
-                    ...(index === 2
-                      ? { "flex-shrink": "0", width: "100%" }
-                      : {}),
-                  },
-                  icon: {
-                    "object-fit": "contain",
-                    "flex-shrink": "0",
-                    filter: "none",
-                    width: "20px",
-                    height: "20px",
-                  },
-                  text: {
-                    mobile: {
-                      "font-size": "sm",
-                    },
-                    ...(index === 2 ? { "max-width": "250px" } : {}),
-                  },
-                };
-              }),
+            category: {
+              "font-weight": 600,
+              "margin-bottom": "xs",
+            },
+            links_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            links: [
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+            ],
+          },
+          {
+            category: {
+              "font-weight": 600,
+              "margin-bottom": "xs",
+            },
+            links_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            links: [
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+            ],
+          },
+          {
+            category: {
+              "font-weight": 600,
+              "margin-bottom": "xs",
+            },
+            links_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            links: [
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+              {
+                text: {},
+              },
+            ],
+          },
+          {
+            category: {
+              "font-weight": 600,
+              "margin-bottom": "xs",
+            },
+            links_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            links: [
+              {
+                text: {},
+                contactWrapper: {
+                  display: "flex",
+                  "column-gap": "sm",
+                  "align-items": "center",
+                },
+              },
+              {
+                text: {},
+                contactWrapper: {
+                  display: "flex",
+                  "column-gap": "sm",
+                  "justify-content": "start",
+                  "align-items": "center",
+                },
+              },
+              {
+                text: {},
+                contactWrapper: {
+                  display: "flex",
+                  "column-gap": "sm",
+                  "justify-content": "start",
+                  "align-items": "center",
+                },
+              },
+            ],
           },
         ],
         bottomSection: {
@@ -369,9 +647,7 @@ export const Footer3: IBlock = {
             "flex-direction": "column",
           },
         },
-        copyright: {
-          color: "text-2",
-        },
+        copyright: {},
         bottomLinks_levoGroup: {
           display: "flex",
           "align-items": "center",

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

@@ -1,18 +1,17 @@
 import {
   Box,
   Container,
+  Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
 import React from "react";
 
-import { type IFooter3Content } from "./footer-3.schema";
+import type { IFooter3Content } from "./footer-3.schema";
 
-const Footer3: React.FC<ILevoBlockBaseProps<IFooter3Content>> = ({
-  content,
-}) => (
+const Footer3: React.FC<ILevoBlockBaseProps<IFooter3Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="mainFooterWrapper">
@@ -23,15 +22,11 @@ const Footer3: React.FC<ILevoBlockBaseProps<IFooter3Content>> = ({
               key={`footer-3-section-${sectionIndex}`}
               data-levo_group_item
             >
-              <Typography elementKey={`links.${sectionIndex}.category`} />
-              <Box
-                elementKey={`links.${sectionIndex}.links_levoGroup`}
-                data-levo_group
-              >
+              <Heading elementKey={`links.${sectionIndex}.category`} />
+              <Box elementKey={`links.${sectionIndex}.links_levoGroup`} data-levo_group>
                 {(section?.links ?? [])?.map((link, linkIndex) => {
                   // Check if this is a contact item (has icon and contactWrapper)
-                  const isContactItem =
-                    "icon" in link && "contactWrapper" in link;
+                  const isContactItem = "icon" in link && "contactWrapper" in link;
 
                   if (isContactItem) {
                     return (
@@ -40,12 +35,8 @@ const Footer3: React.FC<ILevoBlockBaseProps<IFooter3Content>> = ({
                         key={`footer-3-contact-${sectionIndex}-${linkIndex}`}
                         data-levo_group_item
                       >
-                        <Icon
-                          elementKey={`links.${sectionIndex}.links.${linkIndex}.icon`}
-                        />
-                        <Typography
-                          elementKey={`links.${sectionIndex}.links.${linkIndex}.text`}
-                        />
+                        <Icon elementKey={`links.${sectionIndex}.links.${linkIndex}.icon`} />
+                        <Typography elementKey={`links.${sectionIndex}.links.${linkIndex}.text`} />
                       </Box>
                     );
                   } else {
@@ -69,15 +60,9 @@ const Footer3: React.FC<ILevoBlockBaseProps<IFooter3Content>> = ({
         <Box elementKey="bottomLinks_levoGroup" data-levo_group>
           {(content?.bottomLinks ?? [])?.map((_, index) => (
             <React.Fragment key={`footer-3-bottom-${index}`}>
-              <Typography
-                data-levo_group_item
-                elementKey={`bottomLinks.${index}.text`}
-              />
+              <Typography data-levo_group_item elementKey={`bottomLinks.${index}.text`} />
               {index < (content?.bottomLinks?.length ?? 0) - 1 && (
-                <Box
-                  elementKey={`bottomLinks.${index}.separator`}
-                  data-levo_group_item
-                />
+                <Box elementKey={`bottomLinks.${index}.separator`} data-levo_group_item />
               )}
             </React.Fragment>
           ))}