@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -2,19 +2,17 @@ import {
   Box,
   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 { ICards11Content } from "./cards-11.schema";
 
-const Cards11: React.FC<ILevoBlockBaseProps<ICards11Content>> = ({
-  content,
-}) => (
+const Cards11: React.FC<ILevoBlockBaseProps<ICards11Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_section">
@@ -25,11 +23,7 @@ const Cards11: React.FC<ILevoBlockBaseProps<ICards11Content>> = ({
         <Box elementKey="left_container">
           <Box elementKey="cards_levoGroup" data-levo_group>
             {(content?.cards ?? []).map((_, index: number) => (
-              <Box
-                key={`card-${index}`}
-                data-levo_group_item
-                elementKey={`cards.${index}.card`}
-              >
+              <Box key={`card-${index}`} data-levo_group_item elementKey={`cards.${index}.card`}>
                 <Icon elementKey={`cards.${index}.icon`} />
                 <Box elementKey={`cards.${index}.content_wrapper`}>
                   <Heading elementKey={`cards.${index}.title`} />

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

@@ -1,5 +1,23 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA = {
+  id: "aytAUN3yAYoHd",
+  filename: "cards-12-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-12-1-UpLA9Wh31o5St-1920w.webp 1920w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -11,30 +29,7 @@ const DEFAULT_CONTENT = {
   right_container: null,
   images: [
     {
-      image: {
-        id: "7141014160938075687",
-        location:
-          "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-        kind: "image",
-        mimetype: "image/png",
-        srcset: {
-          "1080w":
-            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-          "1200w":
-            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-          "1920w":
-            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-          "320w":
-            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-          "640w":
-            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-          "750w":
-            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-          "828w":
-            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-          path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-        },
-      },
+      image: MEDIA,
     },
   ],
   cards: [
@@ -231,29 +226,8 @@ export const Cards12: 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",
-          },
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        layout: {},
+        container: {},
         main_wrapper: {
           display: "flex",
           "column-gap": "5xl",
@@ -272,23 +246,8 @@ export const Cards12: IBlock = {
           "flex-direction": "column",
           "row-gap": "xl",
         },
-        left_title: {
-          "font-size": "4xl",
-          "font-weight": "700",
-          color: "text-1",
-          "line-height": "1.2",
-          tablet: {
-            "font-size": "3xl",
-          },
-          mobile: {
-            "font-size": "2xl",
-          },
-        },
-        left_description: {
-          "font-size": "lg",
-          color: "text-2",
-          "line-height": "1.6",
-        },
+        left_title: {},
+        left_description: {},
         images_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(1, minmax(0, 1fr))",
@@ -330,9 +289,12 @@ export const Cards12: IBlock = {
               "border-width": "1px",
               "border-color": "border",
             },
+            title: {
+              "font-weight": 600,
+            },
+            description: {},
             small_desc: {
-              "font-size": "sm",
-              "font-weight": "600",
+              "font-weight": 600,
               color: "text-3",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
@@ -344,17 +306,6 @@ export const Cards12: IBlock = {
               "padding-bottom": "4xs",
               "border-radius": "3xl",
             },
-            title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-            },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.6",
-            },
           },
           {
             card: {
@@ -369,9 +320,12 @@ export const Cards12: IBlock = {
               "border-width": "1px",
               "border-color": "border",
             },
+            title: {
+              "font-weight": 600,
+            },
+            description: {},
             small_desc: {
-              "font-size": "sm",
-              "font-weight": "600",
+              "font-weight": 600,
               color: "text-3",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
@@ -383,34 +337,10 @@ export const Cards12: IBlock = {
               "padding-bottom": "4xs",
               "border-radius": "3xl",
             },
-            title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-            },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.6",
-            },
           },
           {
-            card: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
-              "padding-top": "lg",
-              "padding-bottom": "lg",
-              "padding-left": "lg",
-              "padding-right": "lg",
-              "border-radius": "lg",
-              "border-width": "1px",
-              "border-color": "border",
-            },
             small_desc: {
-              "font-size": "sm",
-              "font-weight": "600",
+              "font-weight": 600,
               color: "text-3",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
@@ -422,19 +352,6 @@ export const Cards12: IBlock = {
               "padding-bottom": "4xs",
               "border-radius": "3xl",
             },
-            title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-            },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.6",
-            },
-          },
-          {
             card: {
               display: "flex",
               "flex-direction": "column",
@@ -447,9 +364,14 @@ export const Cards12: IBlock = {
               "border-width": "1px",
               "border-color": "border",
             },
+            title: {
+              "font-weight": 600,
+            },
+            description: {},
+          },
+          {
             small_desc: {
-              "font-size": "sm",
-              "font-weight": "600",
+              "font-weight": 600,
               color: "text-3",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
@@ -461,19 +383,6 @@ export const Cards12: IBlock = {
               "padding-bottom": "4xs",
               "border-radius": "3xl",
             },
-            title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-            },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.6",
-            },
-          },
-          {
             card: {
               display: "flex",
               "flex-direction": "column",
@@ -486,93 +395,98 @@ export const Cards12: IBlock = {
               "border-width": "1px",
               "border-color": "border",
             },
-            small_desc: {
-              "font-size": "sm",
-              "font-weight": "600",
-              color: "text-3",
-              "text-transform": "uppercase",
-              "letter-spacing": "0.05em",
-            },
             title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-            },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.6",
+              "font-weight": 600,
             },
+            description: {},
           },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        left_title: {
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+        },
+        left_description: {
+          selectedVariants: {},
+        },
+        cards: [
           {
-            card: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
-              "padding-top": "lg",
-              "padding-bottom": "lg",
-              "padding-left": "lg",
-              "padding-right": "lg",
-              "border-radius": "lg",
-              "border-width": "1px",
-              "border-color": "border",
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            description: {
+              selectedVariants: {},
             },
             small_desc: {
-              "font-size": "sm",
-              "font-weight": "600",
-              color: "text-3",
-              "text-transform": "uppercase",
-              "letter-spacing": "0.05em",
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
             },
+          },
+          {
             title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.6",
+              selectedVariants: {},
+            },
+            small_desc: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
             },
           },
           {
-            card: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
-              "padding-top": "lg",
-              "padding-bottom": "lg",
-              "padding-left": "lg",
-              "padding-right": "lg",
-              "border-radius": "lg",
-              "border-width": "1px",
-              "border-color": "border",
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            description: {
+              selectedVariants: {},
             },
             small_desc: {
-              "font-size": "sm",
-              "font-weight": "600",
-              color: "text-3",
-              "text-transform": "uppercase",
-              "letter-spacing": "0.05em",
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
             },
+          },
+          {
             title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.6",
+              selectedVariants: {},
+            },
+            small_desc: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
             },
           },
         ],
       },
-      content: DEFAULT_CONTENT,
-      config: {},
     },
   ],
 };

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

@@ -2,18 +2,16 @@ import {
   Box,
   Container,
   Heading,
-  Image,
   type ILevoBlockBaseProps,
+  Image,
   Section,
   Typography,
 } from "@levo-so/studio";
-import React from "react";
+import type React from "react";
 
 import type { ICards12Content } from "./cards-12.schema";
 
-const Cards12: React.FC<ILevoBlockBaseProps<ICards12Content>> = ({
-  content,
-}) => (
+const Cards12: React.FC<ILevoBlockBaseProps<ICards12Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="main_wrapper">
@@ -34,11 +32,7 @@ const Cards12: React.FC<ILevoBlockBaseProps<ICards12Content>> = ({
         <Box elementKey="right_container">
           <Box elementKey="cards_levoGroup" data-levo_group>
             {(content?.cards ?? []).map((_, index: number) => (
-              <Box
-                key={`card-${index}`}
-                data-levo_group_item
-                elementKey={`cards.${index}.card`}
-              >
+              <Box key={`card-${index}`} data-levo_group_item elementKey={`cards.${index}.card`}>
                 <Typography elementKey={`cards.${index}.small_desc`} />
                 <Heading elementKey={`cards.${index}.title`} />
                 <Typography elementKey={`cards.${index}.description`} />