@levo-so/blocks 0.1.58 → 0.1.60

package/src/blocks/cards/cards-14.schema.ts

@@ -1,5 +1,30 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA = {
+  id: "2EYrb5YIeOsSw",
+  filename: "cards-14-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1920w.webp 1920w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -10,21 +35,7 @@ const DEFAULT_CONTENT = {
   main_wrapper: null,
   left_container: null,
   right_container: null,
-  main_image: {
-    id: "2",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-      "320w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "1080w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w",
-    },
-  },
+  main_image: MEDIA,
   cards: [
     {
       card: null,
@@ -174,19 +185,8 @@ export const Cards14: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-          "padding-left": "base",
-          "padding-right": "base",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "none",
-          "padding-right": "none",
-        },
+        layout: {},
+        container: {},
         header_section: {
           "text-align": "center",
           "margin-bottom": "3xl",
@@ -198,14 +198,7 @@ export const Cards14: IBlock = {
             "flex-direction": "column",
           },
         },
-        main_description: {
-          "font-size": "lg",
-          color: "text-2",
-          "line-height": "1.6",
-          mobile: {
-            "font-size": "base",
-          },
-        },
+        main_description: {},
         main_wrapper: {
           display: "flex",
           "align-items": "center",
@@ -311,13 +304,7 @@ export const Cards14: IBlock = {
               "flex-direction": "column",
             },
             description: {
-              tablet: {
-                "font-size": "base",
-              },
-              "font-size": "base",
-              mobile: {
-                "font-size": "sm",
-              },
+              color: "brandSecondaryForeground",
             },
             value_container: {
               display: "flex",
@@ -343,6 +330,7 @@ export const Cards14: IBlock = {
               mobile: {
                 "font-size": "base",
               },
+              color: "brandSecondaryForeground",
             },
             value: {
               tablet: {
@@ -351,6 +339,7 @@ export const Cards14: IBlock = {
               mobile: {
                 "font-size": "lg",
               },
+              color: "brandSecondaryForeground",
             },
           },
           {
@@ -365,13 +354,7 @@ export const Cards14: IBlock = {
               "flex-direction": "column",
             },
             description: {
-              tablet: {
-                "font-size": "base",
-              },
-              "font-size": "base",
-              mobile: {
-                "font-size": "sm",
-              },
+              color: "brandSecondaryForeground",
             },
             value_container: {
               display: "flex",
@@ -397,6 +380,7 @@ export const Cards14: IBlock = {
               mobile: {
                 "font-size": "base",
               },
+              color: "brandSecondaryForeground",
             },
             value: {
               tablet: {
@@ -405,128 +389,48 @@ export const Cards14: IBlock = {
               mobile: {
                 "font-size": "lg",
               },
+              color: "brandSecondaryForeground",
             },
           },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        main_description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        cards: [
           {
-            card: {
-              "background-color": "brandSecondary",
-              "padding-top": "3xl",
-              "padding-right": "3xl",
-              "padding-left": "3xl",
-              "padding-bottom": "3xl",
-              "border-radius": "base",
-              display: "flex",
-              "flex-direction": "column",
-            },
             description: {
-              tablet: {
-                "font-size": "base",
-              },
-              "font-size": "base",
-              mobile: {
-                "font-size": "sm",
-              },
-            },
-            value_container: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "base",
-            },
-            icon: {
-              height: "34px",
-              width: "34px",
-              "font-size": "34px",
+              selectedVariants: {},
             },
-            text_container: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
+            value: {
+              selectedVariants: {},
             },
             title: {
-              tablet: {
-                "font-size": "lg",
-              },
-              "font-size": "lg",
-              mobile: {
-                "font-size": "base",
-              },
-            },
-            value: {
-              "font-size": "xl",
-              "font-weight": "700",
-              tablet: {
-                "font-size": "xl",
-              },
-              mobile: {
-                "font-size": "lg",
-              },
+              selectedVariants: {},
             },
           },
           {
-            card: {
-              "background-color": "brandSecondary",
-              "padding-top": "3xl",
-              "padding-right": "3xl",
-              "padding-left": "3xl",
-              "padding-bottom": "3xl",
-              "border-radius": "base",
-              display: "flex",
-              "flex-direction": "column",
-            },
             description: {
-              tablet: {
-                "font-size": "base",
-              },
-              "font-size": "base",
-              mobile: {
-                "font-size": "sm",
-              },
-            },
-            value_container: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "base",
+              selectedVariants: {},
             },
-            icon: {
-              height: "34px",
-              width: "34px",
-              "font-size": "34px",
-            },
-            text_container: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
+            value: {
+              selectedVariants: {},
             },
             title: {
-              tablet: {
-                "font-size": "lg",
-              },
-              "font-size": "lg",
-              mobile: {
-                "font-size": "base",
-              },
-            },
-            value: {
-              "font-size": "xl",
-              "font-weight": "700",
-              tablet: {
-                "font-size": "xl",
-              },
-              mobile: {
-                "font-size": "lg",
-              },
+              selectedVariants: {},
             },
           },
         ],
       },
-      content: DEFAULT_CONTENT,
-      config: {
-        main_title: {
-          selectedVariants: {
-            Heading_Level: "H2",
-          },
-        },
-      },
     },
   ],
 };

package/src/blocks/cards/cards-15.schema.ts

@@ -1,26 +1,39 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_IMAGE = {
-  id: "2",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA = {
+  id: "DNP1ms1aXWQFH",
+  filename: "cards-15-1.png",
   kind: "image",
-  mimetype: "image/png",
+  location: "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G.png",
   srcset: {
-    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
     "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w",
+      "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-828w.webp 828w",
   },
+  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   content_wrapper: null,
-  image: DEFAULT_IMAGE,
+  image: MEDIA,
   info_section: null,
   title: "Tapadia Diagnostics in your city",
+  description:
+    "Tapadia Diagnostics in your city Tapadia Diagnostics in your city Tapadia Diagnostics in your city Tapadia Diagnostics in your city ",
   cities_levoGroup: null,
   cities: [
     {
@@ -54,7 +67,8 @@ const DEFAULT_CONTENT = {
       city_name: "Kolkata",
     },
   ],
-  cta: "Book Your Test",
+  ctas_levoGroup: null,
+  ctas: [{ cta: "Book Your Test" }, { cta: "Find Centers" }],
 };
 
 export type ICards15Content = typeof DEFAULT_CONTENT;
@@ -99,6 +113,11 @@ export const Cards15: IBlock = {
       label: "Title",
       field_interface: "HeadingWidget",
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "cities",
       label: "Cities",
@@ -113,9 +132,17 @@ export const Cards15: IBlock = {
       ],
     },
     {
-      key: "cta",
-      label: "CTA ",
-      field_interface: "ButtonWidget",
+      key: "ctas",
+      label: "CTA Buttons Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
   ],
   layouts: [
@@ -123,18 +150,12 @@ export const Cards15: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-          "background-color": "background-2",
-          "border-radius": "base",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "lg",
-          "padding-right": "lg",
+        layout: {},
+        container: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
         },
         content_wrapper: {
           display: "flex",
@@ -146,12 +167,10 @@ export const Cards15: IBlock = {
             "flex-direction": "column",
             gap: "lg",
           },
-          "background-color": "oklch(0.9738 0.013 11.5415)",
           "padding-right": "3xl",
           "padding-left": "3xl",
           "margin-top": "none",
         },
-
         image: {
           "object-fit": "contain",
           width: "500px",
@@ -175,10 +194,8 @@ export const Cards15: IBlock = {
           },
         },
         title: {
-          color: "text-1",
-          "font-size": "2xl",
-          "font-weight": "700",
           "margin-bottom": "lg",
+          "font-weight": 700,
         },
         cities_levoGroup: {
           display: "flex",
@@ -271,7 +288,13 @@ export const Cards15: IBlock = {
         ],
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+        },
+      },
     },
   ],
 };

package/src/blocks/cards/cards-15.tsx

@@ -19,7 +19,10 @@ const Cards15: React.FC<ILevoBlockBaseProps<ICards15Content>> = ({
       <Box elementKey="content_wrapper">
         <Image alt="India Map" elementKey="image" width={500} height={500} />
         <Box elementKey="info_section">
-          <Heading elementKey="title" />
+          <Box elementKey="header">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
           <Box data-levo_group elementKey="cities_levoGroup">
             {(content.cities ?? []).map((_, index) => (
               <Typography
@@ -30,7 +33,15 @@ const Cards15: React.FC<ILevoBlockBaseProps<ICards15Content>> = ({
             ))}
           </Box>
 
-          <Button elementKey="cta" />
+          <Box elementKey={`ctas_levoGroup`} data-levo_group>
+            {(content?.ctas ?? []).map((_: any, index: number) => (
+              <Button
+                key={`ctas.${index}.cta`}
+                elementKey={`ctas.${index}.cta`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
         </Box>
       </Box>
     </Container>