@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -4,12 +4,12 @@ import {
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Media,
   Section,
   Typography,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
-import React from "react";
+import type React from "react";
 
 import type { ITeam2Content } from "./team-2.schema";
 
@@ -19,48 +19,33 @@ const Team2: React.FC<ILevoBlockBaseProps<ITeam2Content>> = ({ content }) => {
       <Container elementKey="container">
         <Box elementKey="header">
           <Heading elementKey="accent-title" />
-          <Heading elementKey="title" />
+          <Box elementKey="title_container">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
           <Box elementKey="ctas_levoGroup" data-levo_group>
             {(content?.ctas ?? []).map((_: any, index: number) => (
-              <Button
-                key={index}
-                data-levo_group_item
-                elementKey={`ctas.${index}.button`}
-              />
+              <Button key={index} data-levo_group_item elementKey={`ctas.${index}.button`} />
             ))}
           </Box>
         </Box>
         <Box elementKey="team_levoGroup" data-levo_group>
           {(content?.team ?? []).map((_: any, index: number) => (
-            <Box
-              key={index}
-              data-levo_group_item
-              elementKey={`team.${index}.card`}
-            >
-              <Media
-                elementKey={`team.${index}.image`}
-                alt="Team member photo"
-              />
+            <Box key={index} data-levo_group_item elementKey={`team.${index}.card`}>
+              <Media elementKey={`team.${index}.image`} alt="Team member photo" />
               <Box elementKey={`team.${index}.info`}>
                 <Heading elementKey={`team.${index}.name`} />
                 <Typography elementKey={`team.${index}.position`} />
-                <Box
-                  elementKey={`team.${index}.social_levoGroup`}
-                  data-levo_group
-                >
-                  {(content?.team?.[index]?.social ?? [])?.map(
-                    (_: any, socialIndex: number) => (
-                      <Box
-                        key={socialIndex}
-                        data-levo_group_item
-                        elementKey={`team.${index}.social.${socialIndex}.link`}
-                      >
-                        <Icon
-                          elementKey={`team.${index}.social.${socialIndex}.icon`}
-                        />
-                      </Box>
-                    ),
-                  )}
+                <Box elementKey={`team.${index}.social_levoGroup`} data-levo_group>
+                  {(content?.team?.[index]?.social ?? [])?.map((_: any, socialIndex: number) => (
+                    <Box
+                      key={socialIndex}
+                      data-levo_group_item
+                      elementKey={`team.${index}.social.${socialIndex}.link`}
+                    >
+                      <Icon elementKey={`team.${index}.social.${socialIndex}.icon`} />
+                    </Box>
+                  ))}
                 </Box>
               </Box>
             </Box>

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

@@ -11,11 +11,66 @@ const DUMMY_ICON = {
   },
 };
 
+const MEDIA_1 = {
+  id: "iPDeQfZlYFJJr",
+  filename: "teams-3-1_1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+
+const MEDIA_2 = {
+  id: "1d71iLgEFSgds",
+  filename: "teams-3-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq-1080w.webp 1080w",
+  },
+  mimetype: "image/png",
+};
+
+const MEDIA_3 = {
+  id: "8eRjr0Um3qUcP",
+  filename: "teams-3-3.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl-320w.webp 320w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   header: null,
   title: "Our Team",
+  description: "Our Team Our Team Our Team Our Team Our Team Our Team Our Team Our Team",
   team: [
     {
       card: null,
@@ -104,8 +159,7 @@ export const Team3: IBlock = {
       label: "Header",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for the section title, positioned above the team carousel.",
+        prompt_description: "Container for the section title, positioned above the team carousel.",
       },
     },
     {
@@ -119,6 +173,11 @@ export const Team3: IBlock = {
         max_characters: 30,
       },
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "carousel-navigation-container",
       label: "Carousel Navigation Container",
@@ -189,8 +248,7 @@ export const Team3: IBlock = {
           label: "Member Name",
           field_interface: "HeadingWidget",
           hint: {
-            prompt_description:
-              "Full name of the team member. Use professional, clear naming.",
+            prompt_description: "Full name of the team member. Use professional, clear naming.",
             min_characters: 8,
             max_characters: 30,
           },
@@ -259,44 +317,68 @@ export const Team3: IBlock = {
             level: 2,
           },
         },
-      },
-      content: DEFAULT_CONTENT,
-      styles: {
-        layout: {
-          "background-color": "white",
-          "padding-top": "4xl",
-          "padding-bottom": "4xl",
-          mobile: {
-            "padding-top": "2xl",
-            "padding-bottom": "2xl",
+        team: [
+          {
+            name: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
           },
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          filter: "none",
-          mobile: {
-            filter: "none",
+          {
+            name: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
           },
-          tablet: {
-            filter: "none",
+          {
+            name: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
           },
-        },
+          {
+            name: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            social: [
+              {
+                icon: {
+                  selectedVariants: {},
+                },
+              },
+            ],
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      styles: {
+        layout: {},
+        container: {},
         header: {
           "text-align": "center",
-          "margin-bottom": "3xl",
+          "margin-bottom": "4xl",
           mobile: {
             "margin-bottom": "2xl",
           },
         },
-        title: {
-          color: "text-1",
-          filter: "none",
-          "padding-bottom": "xl",
-        },
+        title: {},
         team_levoGroup: {
           number_of_slides: 3,
           mobile: {
@@ -321,8 +403,7 @@ export const Team3: IBlock = {
               "margin-right": "6xs",
               filter: "none",
               "min-height": "400px",
-              "background-image":
-                'url("https://static.levostg.online/W6OEVMW8/6a30b8841e2947b6f1fb3138bc36c5dbf7c9a6ef-4JOTlp1PZh12.png")',
+              "background-image": `url("${MEDIA_1.location}")`,
               "background-position": "center center",
               "background-size": "cover",
             },
@@ -361,14 +442,8 @@ export const Team3: IBlock = {
               "row-gap": "4xs",
               filter: "none",
             },
-            name: {
-              color: "text-1",
-              filter: "none",
-            },
-            position: {
-              color: "text-2",
-              filter: "none",
-            },
+            name: {},
+            position: {},
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -411,8 +486,7 @@ export const Team3: IBlock = {
               "margin-right": "6xs",
               filter: "none",
               "min-height": "400px",
-              "background-image":
-                'url("https://static.levostg.online/W6OEVMW8/6a30b8841e2947b6f1fb3138bc36c5dbf7c9a6ef-4JOTlp1PZh12.png")',
+              "background-image": `url("${MEDIA_2.location}")`,
               "background-position": "center center",
               "background-size": "cover",
             },
@@ -451,14 +525,8 @@ export const Team3: IBlock = {
               "row-gap": "4xs",
               filter: "none",
             },
-            name: {
-              color: "text-1",
-              filter: "none",
-            },
-            position: {
-              color: "text-2",
-              filter: "none",
-            },
+            name: {},
+            position: {},
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -501,8 +569,7 @@ export const Team3: IBlock = {
               "margin-right": "6xs",
               filter: "none",
               "min-height": "400px",
-              "background-image":
-                'url("https://static.levostg.online/W6OEVMW8/6a30b8841e2947b6f1fb3138bc36c5dbf7c9a6ef-4JOTlp1PZh12.png")',
+              "background-image": `url("${MEDIA_3.location}")`,
               "background-position": "center center",
               "background-size": "cover",
             },
@@ -541,14 +608,8 @@ export const Team3: IBlock = {
               "row-gap": "4xs",
               filter: "none",
             },
-            name: {
-              color: "text-1",
-              filter: "none",
-            },
-            position: {
-              color: "text-2",
-              filter: "none",
-            },
+            name: {},
+            position: {},
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -591,8 +652,7 @@ export const Team3: IBlock = {
               "margin-right": "6xs",
               filter: "none",
               "min-height": "400px",
-              "background-image":
-                'url("https://static.levostg.online/W6OEVMW8/6a30b8841e2947b6f1fb3138bc36c5dbf7c9a6ef-4JOTlp1PZh12.png")',
+              "background-image": `url("${MEDIA_2.location}")`,
               "background-position": "center center",
               "background-size": "cover",
             },
@@ -631,14 +691,8 @@ export const Team3: IBlock = {
               "row-gap": "4xs",
               filter: "none",
             },
-            name: {
-              color: "text-1",
-              filter: "none",
-            },
-            position: {
-              color: "text-2",
-              filter: "none",
-            },
+            name: {},
+            position: {},
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -653,17 +707,12 @@ export const Team3: IBlock = {
                   width: "40px",
                   height: "40px",
                   "object-fit": "contain",
-                  filter: "none",
                   "border-style": "solid",
                   "border-width": "1px",
                   "border-color": "brand",
                   "border-radius": "base",
                   "background-color": "white",
-                  display: "block",
                   padding: "xs",
-                  mobile: {
-                    filter: "none",
-                  },
                 },
               },
             ],

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

@@ -2,17 +2,17 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
-  Heading,
-  Typography,
-  Container,
-  Section,
+  Box,
   Carousel,
   CarouselContent,
   CarouselItem,
-  Box,
+  Container,
+  Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Media,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 import { useEffect, useState } from "react";
 
@@ -41,25 +41,20 @@ const Team3: React.FC<ILevoBlockBaseProps<ITeam3Content>> = ({ content }) => {
       <Container elementKey="container">
         <Box elementKey="header">
           <Heading elementKey="title" />
+          <Typography elementKey="description" />
         </Box>
         <Carousel elementKey="team_levoGroup" setApi={setApi} data-levo_group>
           <CarouselContent>
             {(content?.team ?? [])?.map((_: any, index: number) => (
               <CarouselItem key={index} data-levo_group_item>
                 <Box elementKey={`team.${index}.card`}>
-                  <Media
-                    elementKey={`team.${index}.img`}
-                    alt="Team member photo"
-                  />
+                  <Media elementKey={`team.${index}.img`} alt="Team member photo" />
                   <Box elementKey={`team.${index}.info`}>
                     <Box elementKey={`team.${index}.name-position-wrapper`}>
                       <Heading elementKey={`team.${index}.name`} />
                       <Typography elementKey={`team.${index}.position`} />
                     </Box>
-                    <Box
-                      elementKey={`team.${index}.social_levoGroup`}
-                      data-levo_group
-                    >
+                    <Box elementKey={`team.${index}.social_levoGroup`} data-levo_group>
                       {(content?.team?.[index]?.social ?? [])?.map(
                         (_: any, socialIndex: number) => (
                           <Icon