@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -2,25 +2,23 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
-  Heading,
-  Image,
-  Typography,
-  Container,
-  Section,
+  Box,
+  Button,
   Carousel,
   CarouselContent,
   CarouselItem,
-  Box,
-  Button,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 import { useEffect, useState } from "react";
 
 import type { IFeature6Content } from "./features-6.schema";
 
-const Feature6: React.FC<ILevoBlockBaseProps<IFeature6Content>> = ({
-  content,
-}) => {
+const Feature6: React.FC<ILevoBlockBaseProps<IFeature6Content>> = ({ content }) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
@@ -41,7 +39,10 @@ const Feature6: React.FC<ILevoBlockBaseProps<IFeature6Content>> = ({
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
-        <Heading elementKey="title" />
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
 
         <Carousel
           elementKey="features_levoGroup"
@@ -53,37 +54,30 @@ const Feature6: React.FC<ILevoBlockBaseProps<IFeature6Content>> = ({
             {(content?.features ?? []).map((_, index: number) => (
               <CarouselItem key={index} data-levo_group_item>
                 <Box elementKey={`features.${index}.card`}>
-                  <Image
-                    elementKey={`features.${index}.image`}
-                    alt="Feature image"
-                  />
+                  <Image elementKey={`features.${index}.image`} alt="Feature image" />
                   <Box elementKey={`features.${index}.content_wrapper`}>
                     <Box elementKey={`features.${index}.meta_container`}>
                       <Box elementKey={`features.${index}.date_wrapper`}>
-                        <Image
-                          elementKey={`features.${index}.date_icon`}
-                          alt="Date icon"
-                        />
-                        <Typography
-                          elementKey={`features.${index}.date_text`}
-                        />
+                        <Image elementKey={`features.${index}.date_icon`} alt="Date icon" />
+                        <Typography elementKey={`features.${index}.date_text`} />
                       </Box>
                       <Box elementKey={`features.${index}.category_wrapper`}>
-                        <Image
-                          elementKey={`features.${index}.category_icon`}
-                          alt="Category icon"
-                        />
-                        <Typography
-                          elementKey={`features.${index}.category_text`}
-                        />
+                        <Image elementKey={`features.${index}.category_icon`} alt="Category icon" />
+                        <Typography elementKey={`features.${index}.category_text`} />
                       </Box>
                     </Box>
                     <Box elementKey={`features.${index}.text_container`}>
                       <Heading elementKey={`features.${index}.feature_title`} />
-                      <Typography
-                        elementKey={`features.${index}.description`}
-                      />
-                      <Button elementKey={`features.${index}.cta`} />
+                      <Typography elementKey={`features.${index}.description`} />
+                      <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>

package/src/blocks/filter-listing/filter-listing-1.tsx

@@ -1,14 +1,14 @@
 import {
-  type ILevoBlockBaseProps,
-  AccordionRoot,
+  AccordionContent,
   AccordionItem,
+  AccordionRoot,
   AccordionTrigger,
-  AccordionContent,
   Box,
   Button,
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   IntegrationFilters,
   Media,
   Section,
@@ -18,9 +18,7 @@ import {
 
 import type { IFilterListing1Content } from "./filter-listing-1.schema";
 
-const FilterListing1: React.FC<ILevoBlockBaseProps<IFilterListing1Content>> = ({
-  config,
-}) => {
+const FilterListing1: React.FC<ILevoBlockBaseProps<IFilterListing1Content>> = ({ config }) => {
   const { data, query, setQuery, meta } = useContentEngine("listing");
 
   const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
@@ -33,19 +31,10 @@ const FilterListing1: React.FC<ILevoBlockBaseProps<IFilterListing1Content>> = ({
         </Box>
         <Box elementKey="listing_wrapper">
           {config?.listing_levoGroup?.filters?.schema && (
-            <AccordionRoot
-              type="single"
-              elementKey="filters_accordion"
-              defaultValue="filters"
-            >
-              <AccordionItem
-                value="filters"
-                elementKey="filters_accordion_item"
-              >
+            <AccordionRoot type="single" elementKey="filters_accordion" defaultValue="filters">
+              <AccordionItem value="filters" elementKey="filters_accordion_item">
                 <AccordionTrigger elementKey="filters_accordion_trigger">
-                  <Typography elementKey="filters_accordion_title">
-                    Filters
-                  </Typography>
+                  <Typography elementKey="filters_accordion_title">Filters</Typography>
                 </AccordionTrigger>
                 <AccordionContent elementKey="filters_accordion_content">
                   <Box elementKey="filters_box">
@@ -53,10 +42,7 @@ const FilterListing1: React.FC<ILevoBlockBaseProps<IFilterListing1Content>> = ({
                       query={query}
                       setQuery={setQuery}
                       schema={config?.listing_levoGroup?.filters?.schema}
-                      selectedFields={
-                        config?.listing_levoGroup?.filters?.selected_fields ??
-                        []
-                      }
+                      selectedFields={config?.listing_levoGroup?.filters?.selected_fields ?? []}
                     />
                   </Box>
                 </AccordionContent>
@@ -70,29 +56,19 @@ const FilterListing1: React.FC<ILevoBlockBaseProps<IFilterListing1Content>> = ({
                 data-levo_group_item
                 elementKey={`listing.${index}.card`}
               >
-                <Media
-                  elementKey={`listing.${index}.media`}
-                  alt="Filter Media"
-                />
+                <Media elementKey={`listing.${index}.media`} alt="Filter Media" />
                 <Box elementKey={`listing.${index}.filter_info_wrapper`}>
                   <Box elementKey={`listing.${index}.filter_content`}>
                     <Heading elementKey={`listing.${index}.title`} />
-                    <Box
-                      elementKey={`listing.${index}.points_levoGroup`}
-                      data-levo_group
-                    >
+                    <Box elementKey={`listing.${index}.points_levoGroup`} data-levo_group>
                       {(item.points || [])?.map((_: any, pIndex: number) => (
                         <Box
                           key={pIndex}
                           elementKey={`listing.${index}.points.${pIndex}.container`}
                           data-levo_group_item
                         >
-                          <Icon
-                            elementKey={`listing.${index}.points.${pIndex}.icon`}
-                          />
-                          <Typography
-                            elementKey={`listing.${index}.points.${pIndex}.text`}
-                          />
+                          <Icon elementKey={`listing.${index}.points.${pIndex}.icon`} />
+                          <Typography elementKey={`listing.${index}.points.${pIndex}.text`} />
                         </Box>
                       ))}
                     </Box>

package/src/blocks/floating-buttons/floating-button-1.schema.ts

@@ -0,0 +1,100 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  button_group: [
+    {
+      button: " ",
+      button_leftIcon: {
+        kind: "custom",
+        data: {
+          id: "R6ervNbOZfcD9",
+          location: "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd.png",
+          mimetype: "image/png",
+          kind: "image",
+          srcset: {
+            "1080w":
+              "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-1080w.webp",
+            "1200w":
+              "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-1200w.webp",
+            "1920w":
+              "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-1920w.webp",
+            "320w": "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-320w.webp",
+            "640w": "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-640w.webp",
+            "750w": "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-750w.webp",
+            "828w": "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-828w.webp",
+            path: "https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/whatsapp-logopng4-2EYM5YIjokcd-640w.webp 640w",
+          },
+        },
+      },
+    },
+  ],
+};
+
+export type IFloatingButton1Content = typeof DEFAULT_CONTENT;
+
+export const FloatingButton1: IBlock = {
+  category_id: "floating-buttons",
+  title: "Floating Button 1",
+  key: "floating-button-1",
+  version: "v1",
+  content_schema: [
+    {
+      key: "button_group",
+      label: "Buttons",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        button_group: [
+          {
+            button: {
+              "border-radius": "3xl",
+              "background-color": "transparent",
+            },
+            button_leftIcon: {
+              height: "50px",
+              width: "50px",
+              "font-size": "50px",
+            },
+          },
+        ],
+        button_group_levoGroup: {
+          position: "fixed",
+          right: "24px",
+          bottom: "40px",
+          "z-index": "999999",
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "flex-end",
+          "row-gap": "12px",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        button_group: [
+          {
+            button: {
+              button_icons: {
+                left: {
+                  enabled: true,
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  ],
+};

package/src/blocks/floating-buttons/floating-button-1.tsx

@@ -0,0 +1,14 @@
+import { Box, Button, type ILevoBlockBaseProps } from "@levo-so/studio";
+import type React from "react";
+
+import type { IFloatingButton1Content } from "./floating-button-1.schema";
+
+const FloatingButton1: React.FC<ILevoBlockBaseProps<IFloatingButton1Content>> = ({ content }) => (
+  <Box elementKey="button_group_levoGroup" data-levo_group>
+    {(content?.button_group ?? []).map((_, index) => (
+      <Button key={index} elementKey={`button_group.${index}.button`} data-levo_group_item />
+    ))}
+  </Box>
+);
+
+export default FloatingButton1;

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

@@ -11,6 +11,24 @@ const DUMMY_ICON = {
   },
 };
 
+const MEDIA = {
+  id: "A8sG1BvgdtgE",
+  filename: "footer-1-logo.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/footer-1-logo-w9fpJutzREEV-320w.webp 320w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -18,29 +36,7 @@ const DEFAULT_CONTENT = {
 
   // logo and description
   logoTextWrapper: null,
-  logo: {
-    id: "7141014160938075687",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-      "1080w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-    },
-  },
+  logo: MEDIA,
   logoDescription: "Expert Guidance, Ensuring Clear Verdicts Every Time.",
 
   // icon links below logo description
@@ -193,7 +189,7 @@ export const Footer1: IBlock = {
         {
           key: "category",
           label: "Category",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "links",
@@ -256,19 +252,7 @@ export const Footer1: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "80px",
-          "padding-left": "112px",
-          "padding-right": "112px",
-          tablet: {
-            padding: "50px",
-            "padding-bottom": "0px",
-          },
-          mobile: {
-            padding: "40px",
-            "padding-bottom": "0px",
-          },
-        },
+        layout: {},
         container: {
           display: "flex",
           "flex-direction": "column",
@@ -277,7 +261,7 @@ export const Footer1: IBlock = {
         },
         footerBottomWrapper: {
           "border-style": "solid",
-          "border-color": "var(--color-border)",
+          "border-color": "border",
           "border-top-width": "1px",
           "padding-top": "xl",
           display: "flex",
@@ -293,9 +277,7 @@ export const Footer1: IBlock = {
         footerBottomRightArea: [
           {
             link: {},
-            cta: {
-              color: "text-2",
-            },
+            cta: {},
             separator: {
               width: "1px",
               height: "1rem",
@@ -306,9 +288,7 @@ export const Footer1: IBlock = {
           },
           {
             link: {},
-            cta: {
-              color: "text-2",
-            },
+            cta: {},
             separator: {
               width: "1px",
               height: "1rem",
@@ -392,7 +372,7 @@ export const Footer1: IBlock = {
           {
             category: {
               "margin-bottom": "sm",
-              color: "text-1",
+              "font-weight": 700,
             },
             links_levoGroup: {
               display: "flex",
@@ -465,7 +445,7 @@ export const Footer1: IBlock = {
           {
             category: {
               "margin-bottom": "sm",
-              color: "text-1",
+              "font-weight": 700,
             },
             links_levoGroup: {
               display: "flex",
@@ -550,7 +530,7 @@ export const Footer1: IBlock = {
           {
             category: {
               "margin-bottom": "sm",
-              color: "text-1",
+              "font-weight": 700,
             },
             links_levoGroup: {
               display: "flex",
@@ -605,7 +585,89 @@ export const Footer1: IBlock = {
           },
         },
       },
-      config: {},
+      config: {
+        links: [
+          {
+            category: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+          {
+            category: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            links: [
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+            ],
+          },
+          {
+            category: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            links: [
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+              {
+                iconCtaWrapper: {
+                  selectedVariants: {},
+                },
+              },
+            ],
+          },
+        ],
+      },
       content: DEFAULT_CONTENT,
     },
   ],

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

@@ -1,19 +1,18 @@
-import React from "react";
 import {
   Box,
   Container,
+  Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
+import React from "react";
 
-import { type IFooter1Content } from "./footer-1.schema";
+import type { IFooter1Content } from "./footer-1.schema";
 
-const Footer1: React.FC<ILevoBlockBaseProps<IFooter1Content>> = ({
-  content,
-}) => (
+const Footer1: React.FC<ILevoBlockBaseProps<IFooter1Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="contentWrapper">
@@ -21,15 +20,13 @@ const Footer1: React.FC<ILevoBlockBaseProps<IFooter1Content>> = ({
           <Image elementKey="logo" height={26} width={26} alt="footer-logo" />
           <Typography elementKey="logoDescription" />
           <Box elementKey="icon_links_levoGroup" data-levo_group>
-            {((content as any)?.icon_links ?? [])?.map(
-              (_: any, index: number) => (
-                <Icon
-                  key={`footer-1-icon-${index}`}
-                  data-levo_group_item
-                  elementKey={`icon_links.${index}.icon`}
-                />
-              ),
-            )}
+            {((content as any)?.icon_links ?? [])?.map((_: any, index: number) => (
+              <Icon
+                key={`footer-1-icon-${index}`}
+                data-levo_group_item
+                elementKey={`icon_links.${index}.icon`}
+              />
+            ))}
           </Box>
         </Box>
         <Box data-levo_group elementKey="links_levoGroup">
@@ -39,20 +36,15 @@ const Footer1: React.FC<ILevoBlockBaseProps<IFooter1Content>> = ({
               key={`footer-1-links-${index}`}
               data-levo_group_item
             >
-              <Typography elementKey={`links.${index}.category`} />
-              <Box
-                elementKey={`links.${index}.links_levoGroup`}
-                data-levo_group
-              >
+              <Heading elementKey={`links.${index}.category`} />
+              <Box elementKey={`links.${index}.links_levoGroup`} data-levo_group>
                 {(content?.links?.[index]?.links ?? [])?.map((_, subIndex) => (
                   <Box
                     elementKey={`links.${index}.links.${subIndex}.iconCtaWrapper`}
                     key={`footer-1-links-${index}-${subIndex}`}
                     data-levo_group_item
                   >
-                    <Icon
-                      elementKey={`links.${index}.links.${subIndex}.icon`}
-                    />
+                    <Icon elementKey={`links.${index}.links.${subIndex}.icon`} />
                     <Typography
                       elementKey={`links.${index}.links.${subIndex}.cta`}
                       key={`footer-1-links-${index}-${subIndex}`}
@@ -69,15 +61,9 @@ const Footer1: React.FC<ILevoBlockBaseProps<IFooter1Content>> = ({
         <Box elementKey="footerBottomRightArea_levoGroup" data-levo_group>
           {(content?.footerBottomRightArea ?? [])?.map((_, index) => (
             <React.Fragment key={`footer-1-right-area-${index}`}>
-              <Typography
-                data-levo_group_item
-                elementKey={`footerBottomRightArea.${index}.cta`}
-              />
+              <Typography data-levo_group_item elementKey={`footerBottomRightArea.${index}.cta`} />
               {index < (content?.footerBottomRightArea?.length ?? 0) - 1 && (
-                <Box
-                  elementKey={`footerBottomRightArea.${index}.separator`}
-                  data-levo_group_item
-                />
+                <Box elementKey={`footerBottomRightArea.${index}.separator`} data-levo_group_item />
               )}
             </React.Fragment>
           ))}