@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -2,7 +2,6 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
   Box,
   Button,
   Carousel,
@@ -10,8 +9,9 @@ import {
   CarouselItem,
   Container,
   Heading,
-  Iframe,
   Icon,
+  Iframe,
+  type ILevoBlockBaseProps,
   Media,
   Section,
   Typography,
@@ -20,9 +20,7 @@ import { useEffect, useState } from "react";
 
 import type { ITestimonial4Content } from "./testimonial-4.schema";
 
-const Testimonial4: React.FC<ILevoBlockBaseProps<ITestimonial4Content>> = ({
-  content,
-}) => {
+const Testimonial4: React.FC<ILevoBlockBaseProps<ITestimonial4Content>> = ({ content }) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
@@ -64,7 +62,10 @@ const Testimonial4: React.FC<ILevoBlockBaseProps<ITestimonial4Content>> = ({
             <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">
@@ -129,37 +130,18 @@ const Testimonial4: React.FC<ILevoBlockBaseProps<ITestimonial4Content>> = ({
                 <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"
-                      />
-                      <Iframe
-                        elementKey={`testimonials.${index}.cover_embed`}
-                      />
+                      <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-5/variants/default.ts

@@ -11,11 +11,64 @@ const DUMMY_ICON = {
   },
 };
 
+const MEDIA_AVATAR_1 = {
+  id: "R6eXNbORkdbl",
+  filename: "testimonial-5-avatar-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-1-oilprpqbsdSL-1920w.webp 1920w",
+  },
+  mimetype: "image/png",
+};
+
+const MEDIA_AVATAR_2 = {
+  id: "6Hg6xxyV3ZKJ",
+  filename: "testimonial-5-avatar-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-2-xlo5CSMxu0Fc-1200w.webp 1200w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_AVATAR_3 = {
+  id: "VbXFFm7BySJX9",
+  filename: "testimonial-5-avatar-3.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/testimonial-5-avatar-3-6HgExxyV3ABY-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_TESTIMONIALS_CONTENT = [
   {
     card: null,
     profileSection: null,
-    avatar: DUMMY_ICON,
+    avatar: MEDIA_AVATAR_1,
     clientInfo: null,
     name: "John Smith",
     position: "Director, Global Supply Chain",
@@ -25,7 +78,7 @@ const DEFAULT_TESTIMONIALS_CONTENT = [
   {
     card: null,
     profileSection: null,
-    avatar: DUMMY_ICON,
+    avatar: MEDIA_AVATAR_1,
     clientInfo: null,
     name: "Sarah Chen",
     position: "VP of Operations",
@@ -35,7 +88,7 @@ const DEFAULT_TESTIMONIALS_CONTENT = [
   {
     card: null,
     profileSection: null,
-    avatar: DUMMY_ICON,
+    avatar: MEDIA_AVATAR_1,
     clientInfo: null,
     name: "Michael Rodriguez",
     position: "Chief Technology Officer",
@@ -45,7 +98,7 @@ const DEFAULT_TESTIMONIALS_CONTENT = [
   {
     card: null,
     profileSection: null,
-    avatar: DUMMY_ICON,
+    avatar: MEDIA_AVATAR_1,
     clientInfo: null,
     name: "Emily Johnson",
     position: "Supply Chain Manager",
@@ -68,108 +121,20 @@ export const DEFAULT_CONTENT = {
   "carousel-navigation-pill": null,
 };
 
-const TESTIMONIAL_CARD_STYLE = {
-  card: {
-    display: "flex",
-    "flex-direction": "column",
-    "background-color": "var(--color-background)",
-    "border-radius": "2xl",
-    "box-shadow": "lg",
-    padding: "2xl",
-    "row-gap": "xl",
-    border: "1px solid",
-    "border-color": "var(--color-border)",
-    height: "100%",
-    mobile: {
-      padding: "lg",
-      "row-gap": "lg",
-    },
-  },
-  profileSection: {
-    display: "flex",
-    "align-items": "center",
-    "column-gap": "lg",
-    mobile: {
-      "column-gap": "sm",
-    },
-  },
-  avatar: {
-    height: "64px",
-    width: "64px",
-    "border-radius": "50%",
-    "object-fit": "cover",
-    border: "2px solid",
-    "border-color": "var(--color-border)",
-    mobile: {
-      height: "48px",
-      width: "48px",
-    },
-  },
-  clientInfo: {
-    display: "flex",
-    "flex-direction": "column",
-    "row-gap": "4xs",
-  },
-  name: {
-    color: "var(--color-text-1)",
-    "font-size": "xl",
-    "font-weight": "bold",
-    mobile: {
-      "font-size": "lg",
-    },
-  },
-  position: {
-    color: "var(--color-text-2)",
-    "font-size": "sm",
-    "font-weight": "medium",
-  },
-  quote: {
-    color: "var(--color-text-1)",
-    "font-size": "base",
-    "line-height": 1.6,
-    "font-style": "italic",
-    mobile: {
-      "font-size": "sm",
-    },
-  },
-};
-
-const TESTIMONIALS_STYLES = Array(DEFAULT_TESTIMONIALS_CONTENT.length)
-  ?.fill(0)
-  ?.map(() => TESTIMONIAL_CARD_STYLE);
-
 export const defaultTestimonial5Variant: IBlockLayouts = {
   key: "default",
   title: "Default",
   styles: {
-    layout: {
-      width: "100%",
-      "padding-top": "10xl",
-      "padding-bottom": "10xl",
-      "padding-right": "8xl",
-      "padding-left": "8xl",
-      "media:max:768px": {
-        "padding-top": "5xl",
-        "padding-bottom": "5xl",
-        "padding-right": "5xl",
-        "padding-left": "5xl",
-      },
-      "media:max:480px": {
-        "padding-top": "2xl",
-        "padding-bottom": "2xl",
-        "padding-right": "2xl",
-        "padding-left": "2xl",
-      },
-    },
+    layout: {},
     container: {
       width: "100%",
       display: "flex",
       "flex-direction": "column",
       "row-gap": "7xl",
-      "media:max:768px": {
+      tablet: {
         "row-gap": "3xl",
       },
-      "media:max:480px": {
+      mobile: {
         "row-gap": "4xl",
       },
     },
@@ -189,21 +154,8 @@ export const defaultTestimonial5Variant: IBlockLayouts = {
       "row-gap": "sm",
       "max-width": "600px",
     },
-    title: {
-      "font-size": "3xl",
-      "font-weight": "bold",
-      color: "var(--color-text-1)",
-      tablet: {
-        "font-size": "2xl",
-      },
-    },
-    description: {
-      "font-size": "lg",
-      color: "var(--color-text-2)",
-      tablet: {
-        "font-size": "base",
-      },
-    },
+    title: {},
+    description: {},
     testimonials_levoGroup: {
       number_of_slides: 1,
       tablet: {
@@ -257,26 +209,13 @@ export const defaultTestimonial5Variant: IBlockLayouts = {
           "row-gap": "4xs",
         },
         name: {
-          color: "var(--color-text-1)",
-          "font-size": "xl",
-          "font-weight": "bold",
-          mobile: {
-            "font-size": "lg",
-          },
+          "font-weight": 700,
         },
         position: {
-          color: "var(--color-text-2)",
-          "font-size": "sm",
-          "font-weight": "medium",
+          "font-weight": 500,
         },
         quote: {
-          color: "var(--color-text-1)",
-          "font-size": "base",
-          "line-height": 1.6,
           "font-style": "italic",
-          mobile: {
-            "font-size": "sm",
-          },
         },
       },
       {
@@ -322,26 +261,13 @@ export const defaultTestimonial5Variant: IBlockLayouts = {
           "row-gap": "4xs",
         },
         name: {
-          color: "var(--color-text-1)",
-          "font-size": "xl",
-          "font-weight": "bold",
-          mobile: {
-            "font-size": "lg",
-          },
+          "font-weight": 700,
         },
         position: {
-          color: "var(--color-text-2)",
-          "font-size": "sm",
-          "font-weight": "medium",
+          "font-weight": 500,
         },
         quote: {
-          color: "var(--color-text-1)",
-          "font-size": "base",
-          "line-height": 1.6,
           "font-style": "italic",
-          mobile: {
-            "font-size": "sm",
-          },
         },
       },
       {
@@ -387,32 +313,19 @@ export const defaultTestimonial5Variant: IBlockLayouts = {
           "row-gap": "4xs",
         },
         name: {
-          color: "var(--color-text-1)",
-          "font-size": "xl",
-          "font-weight": "bold",
-          mobile: {
-            "font-size": "lg",
-          },
+          "font-weight": 700,
         },
         position: {
-          color: "var(--color-text-2)",
-          "font-size": "sm",
-          "font-weight": "medium",
+          "font-weight": 500,
         },
         quote: {
-          color: "var(--color-text-1)",
-          "font-size": "base",
-          "line-height": 1.6,
           "font-style": "italic",
-          mobile: {
-            "font-size": "sm",
-          },
         },
       },
       {
         card: {
           display: "flex",
-          "flex-direction": "column",
+          "flex-direction": "column-reverse",
           "background-color": "var(--color-background)",
           "border-radius": "2xl",
           "box-shadow": "lg",
@@ -452,26 +365,13 @@ export const defaultTestimonial5Variant: IBlockLayouts = {
           "row-gap": "4xs",
         },
         name: {
-          color: "var(--color-text-1)",
-          "font-size": "xl",
-          "font-weight": "bold",
-          mobile: {
-            "font-size": "lg",
-          },
+          "font-weight": 700,
         },
         position: {
-          color: "var(--color-text-2)",
-          "font-size": "sm",
-          "font-weight": "medium",
+          "font-weight": 500,
         },
         quote: {
-          color: "var(--color-text-1)",
-          "font-size": "base",
-          "line-height": 1.6,
           "font-style": "italic",
-          mobile: {
-            "font-size": "sm",
-          },
         },
       },
     ],
@@ -506,5 +406,89 @@ export const defaultTestimonial5Variant: IBlockLayouts = {
         autoPlay: false,
       },
     },
+    title: {
+      selectedVariants: {
+        Heading_Level: "H2",
+      },
+    },
+    description: {
+      selectedVariants: {
+        Typography_Variants: "Large",
+      },
+    },
+    testimonials: [
+      {
+        name: {
+          heading: {
+            level: "4",
+          },
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+        },
+        position: {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+        quote: {
+          selectedVariants: {},
+        },
+      },
+      {
+        name: {
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+          heading: {
+            level: "4",
+          },
+        },
+        quote: {
+          selectedVariants: {},
+        },
+        position: {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+      },
+      {
+        name: {
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+          heading: {
+            level: "4",
+          },
+        },
+        quote: {
+          selectedVariants: {},
+        },
+        position: {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+      },
+      {
+        name: {
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+          heading: {
+            level: "4",
+          },
+        },
+        quote: {
+          selectedVariants: {},
+        },
+        position: {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+      },
+    ],
   },
 };

package/src/blocks/testimonial/testimonial-5/variants/index.ts

@@ -1,4 +1,4 @@
-import { defaultTestimonial5Variant, DEFAULT_CONTENT } from "./default";
+import { DEFAULT_CONTENT, defaultTestimonial5Variant } from "./default";
 import { testimonialWithRatings } from "./testimonialWithRatings";
 
 export { defaultTestimonial5Variant, testimonialWithRatings, DEFAULT_CONTENT };