@levo-so/blocks 0.1.2 → 0.1.52

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

@@ -1,145 +1,12 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DUMMY_ICON = {
-  kind: "icon",
-  data: {
-    id: "archive-minus",
-    label: "Archive Minus",
-    tags: ["archive", "custom", "directional", "minus"],
-    svgCode:
-      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
-  },
-};
-
-const DEFAULT_TESTIMONIALS_CONTENT = [
-  {
-    card: null,
-    profileSection: null,
-    avatar: DUMMY_ICON,
-    clientInfo: null,
-    name: "John Smith",
-    position: "Director, Global Supply Chain",
-    quote:
-      "Partnering with SwiftLink, has completely transformed the way we manage our global supply chain. Their ability to provide real-time tracking, proactive communication, and adaptive logistics solutions has helped us reduce delays by over 30% and increase customer satisfaction across regions. What truly sets them apart is their commitment - they feel more like an extension of our internal team than an external vendor.",
-  },
-  {
-    card: null,
-    profileSection: null,
-    avatar: DUMMY_ICON,
-    clientInfo: null,
-    name: "Sarah Chen",
-    position: "VP of Operations",
-    quote:
-      "The platform's innovative approach to supply chain management has revolutionized our operations. The real-time visibility and predictive analytics have enabled us to make data-driven decisions that significantly improved our efficiency and customer satisfaction rates.",
-  },
-  {
-    card: null,
-    profileSection: null,
-    avatar: DUMMY_ICON,
-    clientInfo: null,
-    name: "Michael Rodriguez",
-    position: "Chief Technology Officer",
-    quote:
-      "Implementation was seamless and the results were immediate. The team's expertise and dedication to understanding our unique challenges made all the difference. We've seen remarkable improvements in our logistics performance metrics.",
-  },
-  {
-    card: null,
-    profileSection: null,
-    avatar: DUMMY_ICON,
-    clientInfo: null,
-    name: "Emily Johnson",
-    position: "Supply Chain Manager",
-    quote:
-      "What impressed us most was their proactive approach to problem-solving. They don't just react to issues - they anticipate them. This forward-thinking methodology has saved us countless hours and resources.",
-  },
-];
-
-const DEFAULT_CONTENT = {
-  layout: null,
-  container: null,
-  header: null,
-  textWrapper: null,
-  title: "What Our Clients Say",
-  description:
-    "Hear from industry leaders about their experience with our innovative supply chain solutions.",
-  testimonials: DEFAULT_TESTIMONIALS_CONTENT,
-  "carousel-navigation-container": null,
-  "carousel-navigation": null,
-  "carousel-navigation-pill": null,
-};
+import type { DEFAULT_CONTENT } from "./testimonial-5/variants";
+import { defaultTestimonial5Variant } from "./testimonial-5/variants";
+import { testimonialWithRatings } from "./testimonial-5/variants/testimonialWithRatings";
+import { testimonialWithLogo } from "./testimonial-5/variants/testimonialWithLogo";
 
 export type ITestimonial5Content = typeof DEFAULT_CONTENT;
 
-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 Testimonial5: IBlock = {
   category_id: "testimonial",
   title: "Testimonial 5",
@@ -248,6 +115,40 @@ export const Testimonial5: IBlock = {
               "Main container for individual testimonial card with shadow and border styling.",
           },
         },
+        {
+          key: "stars_wrapper",
+          label: "Stars Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for the star rating display above the testimonial quote.",
+          },
+        },
+        {
+          key: "stars",
+          label: "Stars",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "star",
+              label: "Star",
+              field_interface: "IconWidget",
+              hint: {
+                prompt_description:
+                  "Individual star icon for rating display. Typically shows a filled star.",
+                usecase: "icon",
+                size: "small",
+              },
+            },
+          ],
+          hint: {
+            prompt_description:
+              "Collection of star icons representing the client's rating. Usually 5 stars for testimonials.",
+            min_items: 3,
+            max_items: 5,
+          },
+        },
         {
           key: "profileSection",
           label: "Profile Section",
@@ -257,6 +158,15 @@ export const Testimonial5: IBlock = {
               "Container grouping the client avatar and their information (name and position).",
           },
         },
+        {
+          key: "profileSection_content",
+          label: "Profile Section Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container grouping the client avatar and their information (name and position).",
+          },
+        },
         {
           key: "avatar",
           label: "Avatar",
@@ -300,6 +210,18 @@ export const Testimonial5: IBlock = {
             max_characters: 50,
           },
         },
+        {
+          key: "org_logo",
+          label: "Organization Logo",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Professional headshot or avatar of the client providing the testimonial. Use professional, trustworthy imagery.",
+            orientation: "square",
+            size: "medium",
+            usecase: "icon",
+          },
+        },
         {
           key: "quote",
           label: "Quote",
@@ -321,114 +243,8 @@ export const Testimonial5: IBlock = {
     },
   ],
   layouts: [
-    {
-      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",
-          },
-        },
-        container: {
-          width: "100%",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "7xl",
-          "media:max:768px": {
-            "row-gap": "3xl",
-          },
-          "media:max:480px": {
-            "row-gap": "4xl",
-          },
-        },
-        header: {
-          display: "flex",
-          "justify-content": "center",
-          "margin-bottom": "3xl",
-          tablet: {
-            "margin-bottom": "2xl",
-          },
-        },
-        textWrapper: {
-          display: "flex",
-          "flex-direction": "column",
-          "align-items": "center",
-          "text-align": "center",
-          "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",
-          },
-        },
-        testimonials_levoGroup: {
-          number_of_slides: 1,
-          tablet: {
-            number_of_slides: 1,
-          },
-          mobile: {
-            number_of_slides: 1,
-          },
-        },
-        testimonials: TESTIMONIALS_STYLES,
-        "carousel-navigation-container": {
-          display: "flex",
-          "justify-content": "center",
-          "margin-top": "2xl",
-        },
-        "carousel-navigation": {
-          display: "flex",
-          "column-gap": "sm",
-          "align-items": "center",
-        },
-        "carousel-navigation-pill": {
-          width: "8px",
-          height: "8px",
-          "border-radius": "8px",
-          "background-color": "var(--color-border)",
-          cursor: "pointer",
-          transition: "all 0.3s ease",
-          "&:hover": {
-            "background-color": "var(--color-brand-secondary)",
-          },
-          filter: "none",
-        },
-      },
-      content: DEFAULT_CONTENT,
-      config: {
-        testimonials_levoGroup: {
-          carousel: {
-            loop: true,
-            autoPlay: false,
-          },
-        },
-      },
-    },
+    defaultTestimonial5Variant,
+    testimonialWithRatings,
+    testimonialWithLogo,
   ],
 };

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

@@ -52,19 +52,43 @@ const Testimonial5: React.FC<ILevoBlockBaseProps<ITestimonial5Content>> = ({
           data-levo_group
         >
           <CarouselContent>
-            {(content?.testimonials ?? []).map((_: any, index: number) => (
+            {(content?.testimonials ?? []).map((_, index: number) => (
               <CarouselItem key={index} data-levo_group_item>
                 <Box elementKey={`testimonials.${index}.card`}>
+                  {(content?.testimonials?.[index] as any)?.stars?.length >
+                    0 && (
+                    <Box elementKey={`testimonials.${index}.stars_wrapper`}>
+                      <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>
+                  )}
+                  <Typography elementKey={`testimonials.${index}.quote`} />
                   <Box elementKey={`testimonials.${index}.profileSection`}>
-                    <Icon elementKey={`testimonials.${index}.avatar`} />
-                    <Box elementKey={`testimonials.${index}.clientInfo`}>
-                      <Heading elementKey={`testimonials.${index}.name`} />
-                      <Typography
-                        elementKey={`testimonials.${index}.position`}
-                      />
+                    <Box
+                      elementKey={`testimonials.${index}.profileSection_content`}
+                    >
+                      <Icon elementKey={`testimonials.${index}.avatar`} />
+                      <Box elementKey={`testimonials.${index}.clientInfo`}>
+                        <Heading elementKey={`testimonials.${index}.name`} />
+                        <Typography
+                          elementKey={`testimonials.${index}.position`}
+                        />
+                      </Box>
                     </Box>
+                    <Icon elementKey={`testimonials.${index}.org_logo`} />
                   </Box>
-                  <Typography elementKey={`testimonials.${index}.quote`} />
                 </Box>
               </CarouselItem>
             ))}