@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -2,7 +2,6 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
   Box,
   Button,
   Carousel,
@@ -11,6 +10,7 @@ import {
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
 } from "@levo-so/studio";
@@ -18,9 +18,7 @@ import { useEffect, useState } from "react";
 
 import type { ITestimonial6Content } from "./testimonial-6.schema";
 
-const Testimonial6: React.FC<ILevoBlockBaseProps<ITestimonial6Content>> = ({
-  content,
-}) => {
+const Testimonial6: React.FC<ILevoBlockBaseProps<ITestimonial6Content>> = ({ content }) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
@@ -83,27 +81,15 @@ const Testimonial6: React.FC<ILevoBlockBaseProps<ITestimonial6Content>> = ({
                       <Icon elementKey={`testimonials.${index}.icon`} />
                     </Box>
                     <Box elementKey={`testimonials.${index}.content-container`}>
-                      <Box
-                        elementKey={`testimonials.${index}.testimonial-content`}
-                      >
-                        <Typography
-                          elementKey={`testimonials.${index}.testimonial-text`}
-                        />
+                      <Box elementKey={`testimonials.${index}.testimonial-content`}>
+                        <Typography elementKey={`testimonials.${index}.testimonial-text`} />
                       </Box>
                       <Box elementKey={`testimonials.${index}.bottom-section`}>
-                        <Box
-                          elementKey={`testimonials.${index}.author-section`}
-                        >
-                          <Icon
-                            elementKey={`testimonials.${index}.author-avatar`}
-                          />
+                        <Box elementKey={`testimonials.${index}.author-section`}>
+                          <Icon elementKey={`testimonials.${index}.author-avatar`} />
                           <Box elementKey={`testimonials.${index}.author-info`}>
-                            <Heading
-                              elementKey={`testimonials.${index}.author-name`}
-                            />
-                            <Typography
-                              elementKey={`testimonials.${index}.author-position`}
-                            />
+                            <Heading elementKey={`testimonials.${index}.author-name`} />
+                            <Typography elementKey={`testimonials.${index}.author-position`} />
                           </Box>
                         </Box>
                         {count > 0 && index === current && (
@@ -114,9 +100,7 @@ const Testimonial6: React.FC<ILevoBlockBaseProps<ITestimonial6Content>> = ({
                               disabled={isFirstSlide}
                               style={{
                                 opacity: isFirstSlide ? 0.5 : 1,
-                                cursor: isFirstSlide
-                                  ? "not-allowed"
-                                  : "pointer",
+                                cursor: isFirstSlide ? "not-allowed" : "pointer",
                               }}
                             ></Button>
                             <Button

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

@@ -166,7 +166,7 @@ export const Testimonial7: IBlock = {
         {
           key: "title",
           label: "Title",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "description",
@@ -181,7 +181,7 @@ export const Testimonial7: IBlock = {
         {
           key: "persona_name",
           label: "Persona Name",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "designation",
@@ -224,27 +224,16 @@ export const Testimonial7: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "lg",
-          "padding-right": "lg",
-        },
+        layout: {},
+        container: {},
         header_container: {
           "text-align": "center",
           "margin-bottom": "2xl",
         },
         title: {
-          color: "text-1",
           "margin-bottom": "base",
         },
         description: {
-          color: "text-2",
           "max-width": "600px",
           "margin-left": "auto",
           "margin-right": "auto",
@@ -273,15 +262,10 @@ export const Testimonial7: IBlock = {
               "text-align": "center",
             },
             title: {
-              color: "text-1",
-              "font-size": "lg",
-              "font-weight": "600",
+              "font-weight": 600,
               "margin-bottom": "sm",
             },
-            description: {
-              color: "text-2",
-              "line-height": "1.6",
-            },
+            description: {},
             persona_container: {
               display: "flex",
               "flex-direction": "column",
@@ -289,9 +273,7 @@ export const Testimonial7: IBlock = {
               gap: "sm",
             },
             persona_name: {
-              color: "text-1",
-              "font-weight": "600",
-              "text-align": "center",
+              "font-weight": 600,
             },
             stars: {
               display: "flex",
@@ -323,15 +305,10 @@ export const Testimonial7: IBlock = {
               "text-align": "center",
             },
             title: {
-              color: "text-1",
-              "font-size": "lg",
-              "font-weight": "600",
+              "font-weight": 600,
               "margin-bottom": "sm",
             },
-            description: {
-              color: "text-2",
-              "line-height": "1.6",
-            },
+            description: {},
             persona_container: {
               display: "flex",
               "flex-direction": "column",
@@ -339,9 +316,7 @@ export const Testimonial7: IBlock = {
               gap: "sm",
             },
             persona_name: {
-              color: "text-1",
-              "font-weight": "600",
-              "text-align": "center",
+              "font-weight": 600,
             },
             stars: {
               display: "flex",
@@ -373,15 +348,10 @@ export const Testimonial7: IBlock = {
               "text-align": "center",
             },
             title: {
-              color: "text-1",
-              "font-size": "lg",
-              "font-weight": "600",
+              "font-weight": 600,
               "margin-bottom": "sm",
             },
-            description: {
-              color: "text-2",
-              "line-height": "1.6",
-            },
+            description: {},
             persona_container: {
               display: "flex",
               "flex-direction": "column",
@@ -389,9 +359,7 @@ export const Testimonial7: IBlock = {
               gap: "sm",
             },
             persona_name: {
-              color: "text-1",
-              "font-weight": "600",
-              "text-align": "center",
+              "font-weight": 600,
             },
             stars: {
               display: "flex",
@@ -432,6 +400,67 @@ export const Testimonial7: IBlock = {
             loop: true,
           },
         },
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        testimonials: [
+          {
+            description: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+            persona_name: {
+              heading: {
+                level: "5",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+            persona_name: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+              heading: {
+                level: "5",
+              },
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+            persona_name: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+              heading: {
+                level: "5",
+              },
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -2,7 +2,6 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
   Box,
   Carousel,
   CarouselContent,
@@ -10,6 +9,7 @@ import {
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
 } from "@levo-so/studio";
@@ -17,9 +17,7 @@ import { useEffect, useState } from "react";
 
 import type { ITestimonial7Content } from "./testimonial-7.schema";
 
-const Testimonial7: React.FC<ILevoBlockBaseProps<ITestimonial7Content>> = ({
-  content,
-}) => {
+const Testimonial7: React.FC<ILevoBlockBaseProps<ITestimonial7Content>> = ({ content }) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
@@ -56,31 +54,22 @@ const Testimonial7: React.FC<ILevoBlockBaseProps<ITestimonial7Content>> = ({
                 <Box elementKey={`testimonials.${index}.card`}>
                   <Box elementKey={`testimonials.${index}.content_container`}>
                     <Box elementKey={`testimonials.${index}.title_desc_box`}>
-                      <Typography elementKey={`testimonials.${index}.title`} />
-                      <Typography
-                        elementKey={`testimonials.${index}.description`}
-                      />
+                      <Heading elementKey={`testimonials.${index}.title`} />
+                      <Typography elementKey={`testimonials.${index}.description`} />
                     </Box>
                     <Box elementKey={`testimonials.${index}.persona_container`}>
-                      <Typography
-                        elementKey={`testimonials.${index}.persona_name`}
-                      />
-                      <Typography
-                        elementKey={`testimonials.${index}.designation`}
-                      />
-                      <Box
-                        elementKey={`testimonials.${index}.stars_levoGroup`}
-                        data-levo_group
-                      >
-                        {(
-                          (content?.testimonials?.[index] as any)?.stars ?? []
-                        ).map((_: any, starIndex: number) => (
-                          <Icon
-                            key={`star-${starIndex}`}
-                            data-levo_group_item
-                            elementKey={`testimonials.${index}.stars.${starIndex}.star`}
-                          />
-                        ))}
+                      <Heading elementKey={`testimonials.${index}.persona_name`} />
+                      <Typography elementKey={`testimonials.${index}.designation`} />
+                      <Box elementKey={`testimonials.${index}.stars_levoGroup`} data-levo_group>
+                        {((content?.testimonials?.[index] as any)?.stars ?? []).map(
+                          (_: any, starIndex: number) => (
+                            <Icon
+                              key={`star-${starIndex}`}
+                              data-levo_group_item
+                              elementKey={`testimonials.${index}.stars.${starIndex}.star`}
+                            />
+                          ),
+                        )}
                       </Box>
                     </Box>
                   </Box>