@levo-so/blocks 0.1.58 → 0.1.60

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

@@ -17,8 +17,19 @@ const ProductsListing3: React.FC<
   <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) => (
@@ -66,9 +77,21 @@ const ProductsListing3: React.FC<
                         elementKey={`product_groups.${groupIndex}.products_with_images.${index}.off_percent`}
                       />
                     </Box>
-                    <Button
-                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.cta`}
-                    />
+                    <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>
                 </Box>
               ))}
@@ -108,9 +131,21 @@ const ProductsListing3: React.FC<
                         elementKey={`product_groups.${groupIndex}.products_without_images.${index}.off_percent`}
                       />
                     </Box>
-                    <Button
-                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.cta`}
-                    />
+                    <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>
                 </Box>
               ))}

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

@@ -1,34 +1,36 @@
 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 +171,7 @@ export const Profile1: IBlock = {
     {
       key: "name",
       label: "Name",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
     },
     {
       key: "groups",
@@ -185,7 +187,7 @@ export const Profile1: IBlock = {
         {
           key: "title",
           label: "Label Title",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "description",
@@ -210,17 +212,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 +322,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 +337,6 @@ export const Profile1: IBlock = {
           },
           {
             title: {
-              "font-size": "2xl",
               "font-weight": 600,
             },
             wrapper: {
@@ -393,7 +377,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,
@@ -39,7 +40,7 @@ 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
@@ -47,7 +48,7 @@ const Profile1: React.FC<ILevoBlockBaseProps<IProfile1Content>> = ({
                 key={index}
                 data-levo_group_item
               >
-                <Typography elementKey={`groups.${index}.title`} />
+                <Heading elementKey={`groups.${index}.title`} />
                 <Typography elementKey={`groups.${index}.description`} />
               </Box>
             ))}

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

@@ -1,23 +1,28 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA = {
+  id: "HXVjtirlEM3L",
+  filename: "profile-2.png",
   kind: "image",
-  mimetype: "image/png",
+  location: "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI.png",
   srcset: {
     "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-1080w.webp",
     "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-1200w.webp",
     "1920w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+      "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-828w.webp 828w",
   },
+  mimetype: "image/png",
 };
 
 const DUMMY_ICON = {
@@ -36,10 +41,12 @@ const DEFAULT_CONTENT = {
   container: null,
   main_wrapper: null,
   left_container: null,
-  profile_image: DEFAULT_IMAGE,
+  profile_image: MEDIA,
   right_container: null,
   content_wrapper: null,
   title: "Well Women Health checkup",
+  description:
+    "Well Women Health checkup Well Women Health checkup Well Women Health checkup Well Women Health checkup Well Women Health checkup Well Women Health checkup ",
   stats: [
     {
       stat_wrapper: null,
@@ -217,6 +224,11 @@ export const Profile2: IBlock = {
         max_characters: 60,
       },
     },
+    {
+      key: "description",
+      label: "Profile Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "stats",
       label: "Expertise Badges",
@@ -268,11 +280,7 @@ export const Profile2: IBlock = {
     {
       key: "actual_price",
       label: "Actual Price",
-      field_interface: "TypographyWidget",
-      hint: {
-        prompt_description:
-          "Current promotional price that customers will pay (e.g., '$499').",
-      },
+      field_interface: "HeadingWidget",
     },
     {
       key: "discount_price",
@@ -298,30 +306,8 @@ export const Profile2: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          tablet: {
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-            "padding-left": "lg",
-            "padding-right": "lg",
-          },
-          mobile: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
-          },
-          "background-color": "oklch(0.9413 0.0138 46.228)",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        layout: {},
+        container: {},
         main_wrapper: {
           display: "flex",
           "align-items": "center",
@@ -356,7 +342,6 @@ export const Profile2: IBlock = {
         },
         title: {
           "margin-bottom": "lg",
-          "font-size": "4xl",
           tablet: {
             "font-size": "2xl",
           },
@@ -378,22 +363,17 @@ export const Profile2: IBlock = {
           "flex-direction": "row",
           "align-items": "center",
           "row-gap": "2xs",
-          "column-gap": "base",
+          "column-gap": "2xs",
         },
         actual_price: {
-          "font-size": "xl",
-          "font-weight": "700",
-          color: "text-1",
+          "font-weight": 700,
         },
         discount_price: {
-          "font-size": "sm",
           color: "text-3",
           "text-decoration": "line-through",
         },
         off_percent: {
-          "font-size": "sm",
-          "font-weight": "600",
-          color: "success",
+          "font-weight": 600,
         },
         stats: [
           {
@@ -402,29 +382,7 @@ export const Profile2: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
-          },
-          {
-            stat_wrapper: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "sm",
-            },
-            label: {
-              color: "text-2",
-            },
-          },
-          {
-            stat_wrapper: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "sm",
-            },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -432,9 +390,7 @@ export const Profile2: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -442,9 +398,7 @@ export const Profile2: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -452,9 +406,7 @@ export const Profile2: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
         ],
         breadcrumbs: [
@@ -488,15 +440,51 @@ export const Profile2: IBlock = {
           "column-gap": "xs",
           "margin-bottom": "base",
         },
+        description: {},
       },
       content: DEFAULT_CONTENT,
       config: {
         title: {
           heading: {
-            level: 2,
+            level: "3",
+          },
+          selectedVariants: {
+            Heading_Level: "H3",
           },
+        },
+        stats: [
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+        ],
+        actual_price: {
+          heading: {
+            level: "4",
+          },
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+        },
+        off_percent: {
           selectedVariants: {
-            Heading_Level: "H2",
+            Typography_Variants: "Large",
           },
         },
       },

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

@@ -50,10 +50,11 @@ const Profile2: React.FC<ILevoBlockBaseProps<IProfile2Content>> = ({
               ))}
             </Box>
             <Box elementKey="price_container">
-              <Typography elementKey="actual_price" />
+              <Heading elementKey="actual_price" />
               <Typography elementKey="discount_price" />
               <Typography elementKey="off_percent" />
             </Box>
+            <Typography elementKey="description" />
           </Box>
         </Box>
       </Box>