@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/products/products-listing-3.tsx

@@ -1,119 +1,148 @@
 import {
-  type ILevoBlockBaseProps,
+  Box,
   Button,
+  Container,
   Heading,
+  type ILevoBlockBaseProps,
   Image,
-  Typography,
-  Container,
   Section,
-  Box,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IProductsListing3Content } from "./products-listing-3.schema";
 
-const ProductsListing3: React.FC<
-  ILevoBlockBaseProps<IProductsListing3Content>
-> = ({ content }) => (
+const ProductsListing3: React.FC<ILevoBlockBaseProps<IProductsListing3Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_container">
-        <Heading elementKey="title" />
-        <Button elementKey="header_cta" />
+        <Box elementKey="header_content">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="header_ctas_levoGroup" data-levo_group>
+          {(content.header_ctas ?? []).map((_, index) => (
+            <Button
+              key={`header_ctas.${index}.header_cta`}
+              elementKey={`header_ctas.${index}.header_cta`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
       </Box>
       <Box data-levo_group elementKey="product_groups_levoGroup">
         {(content?.product_groups ?? []).map((_, groupIndex) => (
-          <Box
-            key={groupIndex}
-            elementKey={`product_groups.${groupIndex}.groups_container`}
-          >
+          <Box key={groupIndex} elementKey={`product_groups.${groupIndex}.groups_container`}>
             <Box
               data-levo_group
               elementKey={`product_groups.${groupIndex}.products_with_images_levoGroup`}
             >
-              {(
-                content.product_groups?.[groupIndex]?.products_with_images ?? []
-              ).map((_, index) => (
-                <Box
-                  data-levo_group_item
-                  elementKey={`product_groups.${groupIndex}.products_with_images.${index}.card`}
-                  key={index}
-                >
-                  <Image
-                    alt="product image"
-                    elementKey={`product_groups.${groupIndex}.products_with_images.${index}.image`}
-                    width={400}
-                    height={400}
-                  />
+              {(content.product_groups?.[groupIndex]?.products_with_images ?? []).map(
+                (_, index) => (
                   <Box
-                    elementKey={`product_groups.${groupIndex}.products_with_images.${index}.content_wrapper`}
+                    data-levo_group_item
+                    elementKey={`product_groups.${groupIndex}.products_with_images.${index}.card`}
+                    key={index}
                   >
-                    <Heading
-                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.title`}
-                    />
-                    <Typography
-                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.description`}
+                    <Image
+                      alt="product image"
+                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.image`}
+                      width={400}
+                      height={400}
                     />
                     <Box
-                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.price_container`}
+                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.content_wrapper`}
                     >
-                      <Typography
-                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.actual_price`}
+                      <Heading
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.title`}
                       />
                       <Typography
-                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.discount_price`}
-                      />
-                      <Typography
-                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.off_percent`}
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.description`}
                       />
+                      <Box
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.price_container`}
+                      >
+                        <Typography
+                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.actual_price`}
+                        />
+                        <Typography
+                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.discount_price`}
+                        />
+                        <Typography
+                          elementKey={`product_groups.${groupIndex}.products_with_images.${index}.off_percent`}
+                        />
+                      </Box>
+                      <Box
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas_levoGroup`}
+                        data-levo_group
+                      >
+                        {(
+                          content?.product_groups?.[groupIndex]?.products_with_images?.[index]
+                            ?.ctas ?? []
+                        ).map((_, i) => (
+                          <Button
+                            key={`product_groups.${groupIndex}.products_with_images.${index}.ctas.${i}.cta`}
+                            elementKey={`product_groups.${groupIndex}.products_with_images.${index}.ctas.${i}.cta`}
+                            data-levo_group_item
+                          />
+                        ))}
+                      </Box>
                     </Box>
-                    <Button
-                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.cta`}
-                    />
                   </Box>
-                </Box>
-              ))}
+                ),
+              )}
             </Box>
             <Box
               data-levo_group
               elementKey={`product_groups.${groupIndex}.products_without_images_levoGroup`}
             >
-              {(
-                content.product_groups?.[groupIndex]?.products_without_images ??
-                []
-              ).map((_, index) => (
-                <Box
-                  data-levo_group_item
-                  elementKey={`product_groups.${groupIndex}.products_without_images.${index}.card`}
-                  key={index}
-                >
+              {(content.product_groups?.[groupIndex]?.products_without_images ?? []).map(
+                (_, index) => (
                   <Box
-                    elementKey={`product_groups.${groupIndex}.products_without_images.${index}.content_wrapper`}
+                    data-levo_group_item
+                    elementKey={`product_groups.${groupIndex}.products_without_images.${index}.card`}
+                    key={index}
                   >
-                    <Heading
-                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.title`}
-                    />
-                    <Typography
-                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.description`}
-                    />
                     <Box
-                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.price_container`}
+                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.content_wrapper`}
                     >
-                      <Typography
-                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.actual_price`}
-                      />
-                      <Typography
-                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.discount_price`}
+                      <Heading
+                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.title`}
                       />
                       <Typography
-                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.off_percent`}
+                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.description`}
                       />
+                      <Box
+                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.price_container`}
+                      >
+                        <Typography
+                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.actual_price`}
+                        />
+                        <Typography
+                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.discount_price`}
+                        />
+                        <Typography
+                          elementKey={`product_groups.${groupIndex}.products_without_images.${index}.off_percent`}
+                        />
+                      </Box>
+                      <Box
+                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas_levoGroup`}
+                        data-levo_group
+                      >
+                        {(
+                          content?.product_groups?.[groupIndex]?.products_without_images?.[index]
+                            ?.ctas ?? []
+                        ).map((_, i) => (
+                          <Button
+                            key={`product_groups.${groupIndex}.products_without_images.${index}.ctas.${i}.cta`}
+                            elementKey={`product_groups.${groupIndex}.products_without_images.${index}.ctas.${i}.cta`}
+                            data-levo_group_item
+                          />
+                        ))}
+                      </Box>
                     </Box>
-                    <Button
-                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.cta`}
-                    />
                   </Box>
-                </Box>
-              ))}
+                ),
+              )}
             </Box>
           </Box>
         ))}

package/src/blocks/profile/profile-1.schema.ts

@@ -1,34 +1,29 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA = {
+  id: "lDiRGwMyorBH",
+  filename: "profile-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/profile-1-EBhkxBH4PWVj-1920w.webp 1920w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   main_container: null,
   left_container: null,
-  image: {
-    id: "CISQRrr8Fa61r",
-    filename: "image.png",
-    kind: "image",
-    location: "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV.png",
-    srcset: {
-      "1080w":
-        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1080w.webp",
-      "1200w":
-        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1200w.webp",
-      "1920w":
-        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1920w.webp",
-      "320w":
-        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-320w.webp",
-      "640w":
-        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-640w.webp",
-      "750w":
-        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-750w.webp",
-      "828w":
-        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-828w.webp",
-      path: "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1920w.webp 1920w",
-    },
-    mimetype: "image/png",
-  },
+  image: MEDIA,
   ctas: [],
   right_container: null,
   content_container: null,
@@ -169,7 +164,7 @@ export const Profile1: IBlock = {
     {
       key: "name",
       label: "Name",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
     },
     {
       key: "groups",
@@ -185,7 +180,7 @@ export const Profile1: IBlock = {
         {
           key: "title",
           label: "Label Title",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "description",
@@ -210,17 +205,8 @@ export const Profile1: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "48px",
-          "padding-bottom": "48px",
-          "padding-left": "48px",
-          "padding-right": "48px",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        layout: {},
+        container: {},
         main_container: {
           display: "flex",
           "flex-direction": "row",
@@ -329,19 +315,11 @@ export const Profile1: IBlock = {
           "flex-direction": "column",
           "align-items": "flex-start",
         },
-        content_description: {
-          "font-size": "16px",
-          color: "text-2",
-          "line-height": "1.6",
-        },
-        name: {
-          "font-size": "5xl",
-          "font-weight": 700,
-        },
+        content_description: {},
+        name: {},
         groups: [
           {
             title: {
-              "font-size": "2xl",
               "font-weight": 600,
             },
             wrapper: {
@@ -352,7 +330,6 @@ export const Profile1: IBlock = {
           },
           {
             title: {
-              "font-size": "2xl",
               "font-weight": 600,
             },
             wrapper: {
@@ -393,7 +370,41 @@ export const Profile1: IBlock = {
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        content_description: {
+          selectedVariants: {},
+        },
+        name: {
+          heading: {
+            level: "2",
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        groups: [
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+        ],
+      },
     },
   ],
 };

package/src/blocks/profile/profile-1.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Container,
+  Heading,
   Icon,
   type ILevoBlockBaseProps,
   Image,
@@ -11,9 +12,7 @@ import {
 
 import type { IProfile1Content } from "./profile-1.schema";
 
-const Profile1: React.FC<ILevoBlockBaseProps<IProfile1Content>> = ({
-  content,
-}) => (
+const Profile1: React.FC<ILevoBlockBaseProps<IProfile1Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="main_container">
@@ -39,15 +38,11 @@ const Profile1: React.FC<ILevoBlockBaseProps<IProfile1Content>> = ({
           </Box>
         </Box>
         <Box elementKey="right_container">
-          <Typography elementKey="name" />
+          <Heading elementKey="name" />
           <Box elementKey="groups_levoGroup" data-levo_group>
             {(content?.groups || [])?.map((_, index) => (
-              <Box
-                elementKey={`groups.${index}.wrapper`}
-                key={index}
-                data-levo_group_item
-              >
-                <Typography elementKey={`groups.${index}.title`} />
+              <Box elementKey={`groups.${index}.wrapper`} key={index} data-levo_group_item>
+                <Heading elementKey={`groups.${index}.title`} />
                 <Typography elementKey={`groups.${index}.description`} />
               </Box>
             ))}