@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/testimonial/testimonial-2.tsx

@@ -2,26 +2,24 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
-  Heading,
-  Typography,
-  Container,
-  Section,
+  Box,
   Carousel,
   CarouselContent,
   CarouselItem,
-  Box,
-  Media,
-  Iframe,
+  Container,
+  Heading,
   Icon,
+  Iframe,
+  type ILevoBlockBaseProps,
+  Media,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 import { useEffect, useState } from "react";
 
 import type { ITestimonial2Content } from "./testimonial-2.schema";
 
-const Testimonial2: React.FC<ILevoBlockBaseProps<ITestimonial2Content>> = ({
-  content,
-}) => {
+const Testimonial2: React.FC<ILevoBlockBaseProps<ITestimonial2Content>> = ({ content }) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
@@ -47,7 +45,10 @@ const Testimonial2: React.FC<ILevoBlockBaseProps<ITestimonial2Content>> = ({
             <Box elementKey="badge-container">
               <Typography elementKey="badge-text" />
             </Box>
-            <Heading elementKey="title" />
+            <Box elementKey="text-container">
+              <Heading elementKey="title" />
+              <Typography elementKey="description" />
+            </Box>
           </Box>
           {count > 0 && (
             <Box elementKey="carousel-navigation-top-container">
@@ -88,35 +89,18 @@ const Testimonial2: React.FC<ILevoBlockBaseProps<ITestimonial2Content>> = ({
               <CarouselItem key={index} data-levo_group_item>
                 <Box elementKey={`testimonials.${index}.testimonial`}>
                   <Box elementKey={`testimonials.${index}.cover-container`}>
-                    <Media
-                      elementKey={`testimonials.${index}.cover`}
-                      alt="cover"
-                    />
+                    <Media elementKey={`testimonials.${index}.cover`} alt="cover" />
                     <Iframe elementKey={`testimonials.${index}.cover_embed`} />
                   </Box>
-                  <Box
-                    elementKey={`testimonials.${index}.testimonial-content-wrapper`}
-                  >
-                    <Box
-                      elementKey={`testimonials.${index}.testimonial-content`}
-                    >
+                  <Box elementKey={`testimonials.${index}.testimonial-content-wrapper`}>
+                    <Box elementKey={`testimonials.${index}.testimonial-content`}>
                       <Icon elementKey={`testimonials.${index}.icon`} />
-                      <Box
-                        elementKey={`testimonials.${index}.testimonial-info`}
-                      >
-                        <Typography
-                          elementKey={`testimonials.${index}.testimonial-text`}
-                        />
+                      <Box elementKey={`testimonials.${index}.testimonial-info`}>
+                        <Typography elementKey={`testimonials.${index}.testimonial-text`} />
 
-                        <Box
-                          elementKey={`testimonials.${index}.author-wrapper`}
-                        >
-                          <Heading
-                            elementKey={`testimonials.${index}.author-name`}
-                          />
-                          <Typography
-                            elementKey={`testimonials.${index}.author-position`}
-                          />
+                        <Box elementKey={`testimonials.${index}.author-wrapper`}>
+                          <Heading elementKey={`testimonials.${index}.author-name`} />
+                          <Typography elementKey={`testimonials.${index}.author-position`} />
                         </Box>
                       </Box>
                     </Box>

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

@@ -2,23 +2,21 @@ import type { IBlock } from "@levo-so/studio";
 
 // Extract image object into a constant for reusability
 const CLIENT_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+  id: "moxjZ3I3wRz93",
+  filename: "testimonial-3.png",
   kind: "image",
-  mimetype: "image/png",
+  location: "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s.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",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/testimonial-3-try8SJ6V5hI6s-1920w.webp 1920w",
   },
+  mimetype: "image/png",
 };
 
 // Array of testimonials content
@@ -65,6 +63,8 @@ const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   title: "What Our Clients Say",
+  description:
+    "What Our Clients Say What Our Clients Say What Our Clients Say What Our Clients Say What Our Clients Say",
   button_prev: " ",
   button_next: " ",
   testimonials: TESTIMONIALS_CONTENT,
@@ -92,59 +92,6 @@ const DEFAULT_CONTENT = {
 
 export type ITestimonial3Content = typeof DEFAULT_CONTENT;
 
-// Testimonial field styles
-const TESTIMONIAL_STYLE = {
-  testimonial_wrapper: {
-    display: "flex",
-    "flex-direction": "row",
-    "align-items": "center",
-    gap: "10xl",
-    mobile: {
-      "flex-direction": "column",
-    },
-  },
-  testimonial_content: {
-    flex: "1 1 0%",
-  },
-  author_box: {
-    "margin-bottom": "6xl",
-  },
-  author_name: {
-    "font-weight": "600",
-    "font-size": "lg",
-    color: "text-1",
-    "margin-bottom": "2xs",
-  },
-  author_role: {
-    color: "text-2",
-    "font-size": "sm",
-  },
-  testimonial_text: {
-    "font-size": "xl",
-    "line-height": "1.625",
-    color: "text-1",
-    "margin-bottom": "8xl",
-  },
-  testimonial_controls: {
-    display: "flex",
-    gap: "base",
-  },
-  image_box: {
-    flex: "1 1 0%",
-    display: "flex",
-    "justify-content": "center",
-  },
-  client_image: {
-    height: "18rem",
-    "object-fit": "cover",
-    "border-radius": "base",
-  },
-};
-
-const TESTIMONIALS_STYLES = Array.from({ length: 3 }, () =>
-  JSON.parse(JSON.stringify(TESTIMONIAL_STYLE)),
-);
-
 export const Testimonial3: IBlock = {
   category_id: "testimonial",
   title: "Testimonial 3",
@@ -161,11 +108,21 @@ export const Testimonial3: IBlock = {
       label: "Container",
       field_interface: "ContainerWidget",
     },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Title",
       field_interface: "HeadingWidget",
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "testimonials",
       label: "Testimonials",
@@ -189,7 +146,7 @@ export const Testimonial3: IBlock = {
         {
           key: "author_name",
           label: "Author Name",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "author_role",
@@ -234,17 +191,134 @@ export const Testimonial3: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        container: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-        },
+        container: {},
         title: {
-          "margin-bottom": "5xl",
           tablet: {
             "text-align": "center",
           },
         },
-        testimonials: TESTIMONIALS_STYLES,
+        testimonials: [
+          {
+            testimonial_wrapper: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              gap: "10xl",
+              mobile: {
+                "flex-direction": "column",
+              },
+            },
+            testimonial_content: {
+              flex: "1 1 0%",
+            },
+            author_box: {
+              "margin-bottom": "6xl",
+            },
+            author_name: {
+              "font-weight": 600,
+              "margin-bottom": "4xs",
+            },
+            author_role: {},
+            testimonial_text: {
+              "margin-bottom": "8xl",
+            },
+            testimonial_controls: {
+              display: "flex",
+              gap: "base",
+            },
+            image_box: {
+              flex: "1 1 0%",
+              display: "flex",
+              "justify-content": "center",
+            },
+            client_image: {
+              height: "18rem",
+              "object-fit": "cover",
+              "border-radius": "base",
+            },
+          },
+          {
+            testimonial_wrapper: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              gap: "10xl",
+              mobile: {
+                "flex-direction": "column",
+              },
+            },
+            testimonial_content: {
+              flex: "1 1 0%",
+            },
+            author_box: {
+              "margin-bottom": "6xl",
+            },
+            author_name: {
+              "font-weight": 600,
+              "margin-bottom": "4xs",
+            },
+            author_role: {},
+            testimonial_text: {
+              "margin-bottom": "8xl",
+            },
+            testimonial_controls: {
+              display: "flex",
+              gap: "base",
+            },
+            image_box: {
+              flex: "1 1 0%",
+              display: "flex",
+              "justify-content": "center",
+            },
+            client_image: {
+              height: "18rem",
+              "object-fit": "cover",
+              "border-radius": "base",
+            },
+          },
+          {
+            testimonial_wrapper: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              gap: "10xl",
+              mobile: {
+                "flex-direction": "column",
+              },
+            },
+            testimonial_content: {
+              flex: "1 1 0%",
+            },
+            author_box: {
+              "margin-bottom": "6xl",
+            },
+            author_name: {
+              "font-weight": 600,
+              "margin-bottom": "4xs",
+            },
+            author_role: {},
+            testimonial_text: {
+              "margin-bottom": "8xl",
+            },
+            testimonial_controls: {
+              display: "flex",
+              gap: "base",
+            },
+            image_box: {
+              flex: "1 1 0%",
+              display: "flex",
+              "justify-content": "center",
+            },
+            client_image: {
+              height: "18rem",
+              "object-fit": "cover",
+              "border-radius": "base",
+            },
+          },
+        ],
+        header: {
+          "margin-bottom": "5xl",
+        },
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -267,6 +341,68 @@ export const Testimonial3: IBlock = {
             Heading_Level: "H2",
           },
         },
+        testimonials: [
+          {
+            testimonial_text: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+            author_role: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            author_name: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+          },
+          {
+            author_role: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            testimonial_text: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+            author_name: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+          {
+            author_role: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            testimonial_text: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+            author_name: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -2,25 +2,23 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
+  Box,
   Button,
-  Heading,
-  Image,
-  Typography,
-  Container,
-  Section,
   Carousel,
   CarouselContent,
   CarouselItem,
-  Box,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 import { useEffect, useState } from "react";
 
 import type { ITestimonial3Content } from "./testimonial-3.schema";
 
-const Testimonial3: React.FC<ILevoBlockBaseProps<ITestimonial3Content>> = ({
-  content,
-}) => {
+const Testimonial3: React.FC<ILevoBlockBaseProps<ITestimonial3Content>> = ({ content }) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
@@ -56,7 +54,10 @@ const Testimonial3: React.FC<ILevoBlockBaseProps<ITestimonial3Content>> = ({
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
-        <Heading elementKey="title" />
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
         <Carousel
           elementKey="testimonials_levoGroup"
           className="w-full"
@@ -66,25 +67,14 @@ const Testimonial3: React.FC<ILevoBlockBaseProps<ITestimonial3Content>> = ({
           <CarouselContent>
             {(content?.testimonials ?? [])?.map((_, index) => (
               <CarouselItem key={index} className="flex w-full">
-                <Box
-                  elementKey={`testimonials.${index}.testimonial_wrapper`}
-                  data-levo_group_item
-                >
+                <Box elementKey={`testimonials.${index}.testimonial_wrapper`} data-levo_group_item>
                   <Box elementKey={`testimonials.${index}.testimonial_content`}>
                     <Box elementKey={`testimonials.${index}.author_box`}>
-                      <Typography
-                        elementKey={`testimonials.${index}.author_name`}
-                      />
-                      <Typography
-                        elementKey={`testimonials.${index}.author_role`}
-                      />
+                      <Heading elementKey={`testimonials.${index}.author_name`} />
+                      <Typography elementKey={`testimonials.${index}.author_role`} />
                     </Box>
-                    <Typography
-                      elementKey={`testimonials.${index}.testimonial_text`}
-                    />
-                    <Box
-                      elementKey={`testimonials.${index}.testimonial_controls`}
-                    >
+                    <Typography elementKey={`testimonials.${index}.testimonial_text`} />
+                    <Box elementKey={`testimonials.${index}.testimonial_controls`}>
                       <Button
                         elementKey="button_prev"
                         onClick={handlePrevious}