@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,23 +1,21 @@
 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",
-    "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-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",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/profile-2-pKkeltJT8kdI-1200w.webp",
+    "1920w": "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 +34,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 +217,11 @@ export const Profile2: IBlock = {
         max_characters: 60,
       },
     },
+    {
+      key: "description",
+      label: "Profile Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "stats",
       label: "Expertise Badges",
@@ -268,19 +273,14 @@ 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",
       label: "Discount Price",
       field_interface: "TypographyWidget",
       hint: {
-        prompt_description:
-          "Original price before discount to show value (e.g., '$999').",
+        prompt_description: "Original price before discount to show value (e.g., '$999').",
       },
     },
     {
@@ -288,8 +288,7 @@ export const Profile2: IBlock = {
       label: "Off Percent",
       field_interface: "TypographyWidget",
       hint: {
-        prompt_description:
-          "Discount percentage highlighting the savings (e.g., '50% OFF').",
+        prompt_description: "Discount percentage highlighting the savings (e.g., '50% OFF').",
       },
     },
   ],
@@ -298,30 +297,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 +333,6 @@ export const Profile2: IBlock = {
         },
         title: {
           "margin-bottom": "lg",
-          "font-size": "4xl",
           tablet: {
             "font-size": "2xl",
           },
@@ -378,22 +354,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 +373,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 +381,7 @@ export const Profile2: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -442,9 +389,7 @@ export const Profile2: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -452,9 +397,7 @@ export const Profile2: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
         ],
         breadcrumbs: [
@@ -488,15 +431,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: "H2",
+            Heading_Level: "H5",
+          },
+        },
+        off_percent: {
+          selectedVariants: {
+            Typography_Variants: "Large",
           },
         },
       },

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

@@ -3,19 +3,17 @@ import {
   Button,
   Container,
   Heading,
-  Image,
+  Icon,
   type ILevoBlockBaseProps,
+  Image,
   Section,
   Typography,
-  Icon,
 } from "@levo-so/studio";
-import React from "react";
+import type React from "react";
 
 import type { IProfile2Content } from "./profile-2.schema";
 
-const Profile2: React.FC<ILevoBlockBaseProps<IProfile2Content>> = ({
-  content,
-}) => (
+const Profile2: React.FC<ILevoBlockBaseProps<IProfile2Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="breadcrumbs_levoGroup" data-levo_group>
@@ -50,10 +48,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>