@levo-so/blocks 0.1.59 → 0.1.60

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

@@ -164,7 +164,7 @@ export const Footer3: IBlock = {
         {
           key: "category",
           label: "Section Title",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "links",
@@ -239,36 +239,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 +493,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 +648,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,6 +1,7 @@
 import {
   Box,
   Container,
+  Heading,
   Icon,
   Section,
   Typography,
@@ -23,7 +24,7 @@ const Footer3: React.FC<ILevoBlockBaseProps<IFooter3Content>> = ({
               key={`footer-3-section-${sectionIndex}`}
               data-levo_group_item
             >
-              <Typography elementKey={`links.${sectionIndex}.category`} />
+              <Heading elementKey={`links.${sectionIndex}.category`} />
               <Box
                 elementKey={`links.${sectionIndex}.links_levoGroup`}
                 data-levo_group