@levo-so/blocks 0.1.2 → 0.1.52

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

@@ -100,6 +100,36 @@ const DEFAULT_CONTENT = {
 
 export type IFooter3Content = typeof DEFAULT_CONTENT;
 
+const DEFAULT_LAYOUT_LINKS_STYLE = {
+  category: {
+    "font-weight": "600",
+    color: "text-1",
+    "margin-bottom": "xs",
+  },
+  links_levoGroup: {
+    display: "flex",
+    "flex-direction": "column",
+    "row-gap": "xs",
+  },
+  links: Array(6)
+    .fill(0)
+    .map(() => {
+      return {
+        text: {
+          mobile: {
+            "font-size": "sm",
+          },
+        },
+      };
+    }),
+};
+
+const DEFAULT_LAYOUT_LINKS_STYLES = Array(3)
+  .fill(0)
+  .map(() => {
+    return DEFAULT_LAYOUT_LINKS_STYLE;
+  });
+
 export const Footer3: IBlock = {
   category_id: "footer",
   title: "Footer 3",
@@ -208,27 +238,35 @@ export const Footer3: IBlock = {
       title: "Default",
       key: "default",
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        links: Array(4)
+          .fill(0)
+          .map(() => ({
+            category: {
+              selectedVariants: {
+                Typography_Variants: "Large",
+              },
+            },
+            links: Array(6)
+              .fill(0)
+              .map(() => {
+                return {
+                  text: {
+                    selectedVariants: {
+                      Typography_Variants: "Body",
+                    },
+                  },
+                };
+              }),
+          })),
+      },
       styles: {
-        layout: {
-          "background-color": "background-1",
-          "padding-top": "3xl",
-          "padding-bottom": "none",
-        },
         container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          filter: "none",
-          "padding-bottom": "none",
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
           mobile: {
-            filter: "none",
-          },
-          tablet: {
-            filter: "none",
-            display: "block",
+            "padding-top": "5xl",
+            "padding-bottom": "5xl",
           },
         },
         mainFooterWrapper: {
@@ -276,149 +314,37 @@ export const Footer3: IBlock = {
           width: "100%",
         },
         links: [
+          ...DEFAULT_LAYOUT_LINKS_STYLES,
           {
-            category: {
-              "font-size": "base",
-              "font-weight": "600",
-              color: "text-1",
-              "margin-bottom": "xs",
-              filter: "none",
-              tablet: {
-                filter: "none",
-              },
-            },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
-              filter: "none",
-            },
-            links: [
-              {
-                text: {
-                  "font-size": "sm",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  filter: "none",
-                },
-              },
-            ],
-          },
-          {
-            category: {
-              "font-size": "base",
-              "font-weight": "600",
-              color: "text-1",
-              "margin-bottom": "xs",
-              filter: "none",
-            },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
-              filter: "none",
-            },
-            links: [
-              {
-                text: {
-                  "font-size": "sm",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  filter: "none",
-                },
-              },
-            ],
-          },
-          {
-            category: {
-              "font-size": "base",
-              "font-weight": "600",
-              color: "text-1",
-              "margin-bottom": "xs",
-              filter: "none",
-            },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
-              filter: "none",
-            },
-            links: [
-              {
-                text: {
-                  "font-size": "sm",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  filter: "none",
-                },
-              },
-            ],
-          },
-          {
-            category: {
-              "font-size": "base",
-              "font-weight": "600",
-              color: "text-1",
-              "margin-bottom": "xs",
-              filter: "none",
-            },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "md",
-              filter: "none",
-            },
-            links: [
-              {
-                contactWrapper: {
-                  display: "flex",
-                  "align-items": "center",
-                  "column-gap": "xs",
-                  filter: "none",
-                },
-                icon: {
-                  "object-fit": "contain",
-                  "flex-shrink": "0",
-                  filter: "none",
-                  width: "20px",
-                  height: "20px",
-                },
-                text: {
-                  "font-size": "sm",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  filter: "none",
-                },
-              },
-              {
-                contactWrapper: {
-                  filter: "none",
-                  display: "flex",
-                  "column-gap": "xs",
-                  "align-items": "center",
-                },
-                icon: {
-                  filter: "none",
-                },
-              },
-              {
-                contactWrapper: {
-                  filter: "none",
-                  mobile: {
+            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",
                   },
-                  display: "flex",
-                  "flex-shrink": "0",
-                  "column-gap": "xs",
-                  width: "100%",
-                  "align-items": "center",
-                },
-                text: {
-                  filter: "none",
-                  "max-width": "250px",
-                },
-              },
-            ],
+                  text: {
+                    mobile: {
+                      "font-size": "sm",
+                    },
+                    ...(index === 2 ? { "max-width": "250px" } : {}),
+                  },
+                };
+              }),
           },
         ],
         bottomSection: {
@@ -444,7 +370,6 @@ export const Footer3: IBlock = {
           },
         },
         copyright: {
-          "font-size": "sm",
           color: "text-2",
         },
         bottomLinks_levoGroup: {
@@ -464,7 +389,6 @@ export const Footer3: IBlock = {
           },
         },
         "bottomLinks.$.text": {
-          "font-size": "sm",
           color: "text-2",
         },
         "bottomLinks.$.separator": {
@@ -480,6 +404,7 @@ export const Footer3: IBlock = {
         },
         "socialIcons.$.icon": {
           "object-fit": "contain",
+          "border-radius": "base",
         },
       },
     },

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

@@ -1,13 +1,12 @@
-import React from "react";
 import {
   Box,
   Container,
   Icon,
-  Image,
   Section,
   Typography,
   type ILevoBlockBaseProps,
 } from "@levo-so/studio";
+import React from "react";
 
 import { type IFooter3Content } from "./footer-3.schema";
 

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

@@ -311,7 +311,9 @@ export const Footer4: IBlock = {
         footerBottomRightArea: [
           {
             link: {},
-            cta: {},
+            cta: {
+              color: "text-2",
+            },
             separator: {
               width: "1px",
               height: "1rem",
@@ -322,7 +324,9 @@ export const Footer4: IBlock = {
           },
           {
             link: {},
-            cta: {},
+            cta: {
+              color: "text-2",
+            },
             separator: {
               width: "1px",
               height: "1rem",
@@ -439,7 +443,7 @@ export const Footer4: IBlock = {
           {
             category: {
               "margin-bottom": "sm",
-              "font-weight": 600,
+              color: "text-1",
             },
             links_levoGroup: {
               display: "flex",
@@ -507,7 +511,7 @@ export const Footer4: IBlock = {
           {
             category: {
               "margin-bottom": "sm",
-              "font-weight": 600,
+              color: "text-1",
             },
             links_levoGroup: {
               display: "flex",
@@ -586,7 +590,7 @@ export const Footer4: IBlock = {
           {
             category: {
               "margin-bottom": "sm",
-              "font-weight": 600,
+              color: "text-1",
             },
             links_levoGroup: {
               display: "flex",
@@ -632,6 +636,7 @@ export const Footer4: IBlock = {
         ],
         logo: {
           width: "80px",
+          "border-radius": "base",
           tablet: {
             width: "60px",
           },

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

@@ -50,7 +50,7 @@ const Footer4: React.FC<ILevoBlockBaseProps<IFooter4Content>> = ({
                 {(content?.links?.[index]?.links ?? [])?.map(
                   (_: any, subIndex: number) => (
                     <Box
-                      elementKey={`links.${index}.links.${subIndex}.iconCtaWrapper`}
+                      elementKey={`links.${index}.links.${subIndex}.iconWrapper`}
                       key={`footer-4-links-${index}-${subIndex}`}
                       data-levo_group_item
                     >

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

@@ -168,6 +168,16 @@ export const Footer5: IBlock = {
           field_interface: "BoxWidget",
           kind: "group",
           fields: [
+            {
+              key: "iconWrapper",
+              label: "Icon Wrapper",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "icon",
+              label: "Icon",
+              field_interface: "IconWidget",
+            },
             {
               key: "text",
               label: "Text",

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

@@ -37,11 +37,19 @@ const Footer5: React.FC<ILevoBlockBaseProps<IFooter5Content>> = ({
                 data-levo_group
               >
                 {(content?.links?.[index]?.links ?? []).map((_, subIndex) => (
-                  <Typography
-                    elementKey={`links.${index}.links.${subIndex}.text`}
+                  <Box
+                    elementKey={`links.${index}.links.${subIndex}.iconWrapper`}
                     key={`footer-5-links-${index}-${subIndex}`}
                     data-levo_group_item
-                  />
+                  >
+                    <Icon
+                      elementKey={`links.${index}.links.${subIndex}.icon`}
+                    />
+                    <Typography
+                      elementKey={`links.${index}.links.${subIndex}.text`}
+                      key={`footer-4-links-${index}-${subIndex}`}
+                    />
+                  </Box>
                 ))}
               </Box>
             </Box>