@levo-so/blocks 0.1.59 → 0.1.60

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

@@ -64,7 +64,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">

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

@@ -11,11 +11,88 @@ 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 +102,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 +112,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 +122,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 +145,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 +178,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 +233,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 +285,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 +337,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 +389,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 +430,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",
+          },
+        },
+      },
+    ],
   },
 };