@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/products/products-listing-2.schema.ts

@@ -1,28 +1,57 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_IMAGE = {
-  id: "k5KVTx5M8f9M",
-  filename: "image.png",
+const MEDIA_1 = {
+  id: "Imv2Br3xZnrf",
+  filename: "product-listing-2-1.jpg",
   kind: "image",
-  location: "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm.png",
+  location: "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f.jpg",
   srcset: {
-    "1080w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-1080w.webp",
-    "1200w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-1200w.webp",
-    "1920w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-1920w.webp",
-    "320w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-320w.webp",
-    "640w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-640w.webp",
-    "750w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-750w.webp",
-    "828w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-828w.webp",
-    path: "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-1200w.webp 1200w",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1920w.webp 1920w",
   },
-  mimetype: "image/png",
+  mimetype: "image/jpeg",
+};
+
+const MEDIA_2 = {
+  id: "pKknltJ2E9tp",
+  filename: "product-listing-2-3.jpg",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4.jpg",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-3-aytUN3yzqdh4-750w.webp 750w",
+  },
+  mimetype: "image/jpeg",
+};
+
+const MEDIA_3 = {
+  id: "jfwkpeTXrkef",
+  filename: "product-listing-2-2.jpg",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk.jpg",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/product-listing-2-2-iPDjfZlgejpk-1080w.webp 1080w",
+  },
+  mimetype: "image/jpeg",
 };
 
 const DEFAULT_CONTENT = {
@@ -30,12 +59,14 @@ const DEFAULT_CONTENT = {
   container: null,
   header_container: null,
   title: "Our Bestsellers",
-  header_cta: "View All Bestsellers",
+  description: "Our Bestsellers Our Bestsellers Our Bestsellers Our Bestsellers Our Bestsellers ",
+  header_ctas_levoGroup: null,
+  header_ctas: [{ header_cta: "View All Bestsellers" }, { header_cta: "Learn More" }],
   products_levoGroup: null,
   products: [
     {
       card: null,
-      image: DEFAULT_IMAGE,
+      image: MEDIA_1,
       title_price_container: null,
       title: "Calm Daily CBD Oil",
       price: "$25",
@@ -43,7 +74,8 @@ const DEFAULT_CONTENT = {
       description: "25mg CBD per serving",
       rating_container: null,
       rating_text: "4.2",
-      cta: "Add to Cart",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Add to Cart" }, { cta: "Learn More" }],
       rating_icon: {
         kind: "icon",
         data: {
@@ -57,7 +89,7 @@ const DEFAULT_CONTENT = {
     },
     {
       card: null,
-      image: DEFAULT_IMAGE,
+      image: MEDIA_2,
       title_price_container: null,
       title: "Calm Daily CBD Oil",
       price: "$25",
@@ -65,7 +97,8 @@ const DEFAULT_CONTENT = {
       description: "25mg CBD per serving",
       rating_container: null,
       rating_text: "4.2",
-      cta: "Add to Cart",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Add to Cart" }, { cta: "Learn More" }],
       rating_icon: {
         kind: "icon",
         data: {
@@ -79,7 +112,7 @@ const DEFAULT_CONTENT = {
     },
     {
       card: null,
-      image: DEFAULT_IMAGE,
+      image: MEDIA_3,
       title_price_container: null,
       title: "Calm Daily CBD Oil",
       price: "$25",
@@ -87,7 +120,8 @@ const DEFAULT_CONTENT = {
       description: "25mg CBD per serving",
       rating_container: null,
       rating_text: "4.2",
-      cta: "Add to Cart",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Add to Cart" }, { cta: "Learn More" }],
       rating_icon: {
         kind: "icon",
         data: {
@@ -127,15 +161,33 @@ export const ProductsListing2: IBlock = {
       label: "Header Container",
       field_interface: "BoxWidget",
     },
+    {
+      key: "header_content",
+      label: "Header Content",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Title",
       field_interface: "HeadingWidget",
     },
     {
-      key: "header_cta",
-      label: "Header CTA",
-      field_interface: "ButtonWidget",
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "header_ctas",
+      label: "Header CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "header_cta",
+          label: "Header CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
     {
       key: "products",
@@ -194,9 +246,17 @@ export const ProductsListing2: IBlock = {
           field_interface: "TypographyWidget",
         },
         {
-          key: "cta",
-          label: "CTA Button",
-          field_interface: "ButtonWidget",
+          key: "ctas",
+          label: "CTA Buttons",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "cta",
+              label: "CTA Button",
+              field_interface: "ButtonWidget",
+            },
+          ],
         },
       ],
     },
@@ -206,17 +266,8 @@ export const ProductsListing2: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "lg",
-          "padding-right": "lg",
-        },
+        layout: {},
+        container: {},
         header_container: {
           display: "flex",
           "justify-content": "space-between",
@@ -228,10 +279,14 @@ export const ProductsListing2: IBlock = {
             "row-gap": "lg",
           },
         },
-        title: {
-          color: "text-1",
+        title: {},
+        header_ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          gap: "sm",
         },
-        header_cta: {},
+        header_ctas: Array(2).map(() => ({})),
         products_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(3, minmax(0, 1fr))",
@@ -268,12 +323,8 @@ export const ProductsListing2: IBlock = {
               "padding-left": "none",
               "padding-right": "none",
             },
-            title: {
-              color: "text-1",
-            },
-            price: {
-              color: "text-1",
-            },
+            title: {},
+            price: {},
             description_container: {
               display: "flex",
               "justify-content": "space-between",
@@ -283,7 +334,6 @@ export const ProductsListing2: IBlock = {
               "padding-right": "none",
             },
             description: {
-              color: "text-2",
               "margin-bottom": "sm",
             },
             rating_container: {
@@ -296,12 +346,16 @@ export const ProductsListing2: IBlock = {
               width: "16px",
               height: "16px",
             },
-            rating_text: {
-              color: "text-2",
-            },
-            cta: {
-              width: "100%",
+            rating_text: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              gap: "sm",
+              "margin-top": "md",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
           },
           {
             card: {
@@ -326,12 +380,8 @@ export const ProductsListing2: IBlock = {
               "padding-left": "none",
               "padding-right": "none",
             },
-            title: {
-              color: "text-1",
-            },
-            price: {
-              color: "text-1",
-            },
+            title: {},
+            price: {},
             description_container: {
               display: "flex",
               "justify-content": "space-between",
@@ -341,7 +391,6 @@ export const ProductsListing2: IBlock = {
               "padding-right": "none",
             },
             description: {
-              color: "text-2",
               "margin-bottom": "sm",
             },
             rating_container: {
@@ -354,12 +403,16 @@ export const ProductsListing2: IBlock = {
               width: "16px",
               height: "16px",
             },
-            rating_text: {
-              color: "text-2",
-            },
-            cta: {
-              width: "100%",
+            rating_text: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              gap: "sm",
+              "margin-top": "md",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
           },
           {
             card: {
@@ -384,12 +437,8 @@ export const ProductsListing2: IBlock = {
               "padding-left": "none",
               "padding-right": "none",
             },
-            title: {
-              color: "text-1",
-            },
-            price: {
-              color: "text-1",
-            },
+            title: {},
+            price: {},
             description_container: {
               display: "flex",
               "justify-content": "space-between",
@@ -399,7 +448,6 @@ export const ProductsListing2: IBlock = {
               "padding-right": "none",
             },
             description: {
-              color: "text-2",
               "margin-bottom": "sm",
             },
             rating_container: {
@@ -412,148 +460,16 @@ export const ProductsListing2: IBlock = {
               width: "16px",
               height: "16px",
             },
-            rating_text: {
-              color: "text-2",
-            },
-            cta: {
-              width: "100%",
-            },
-          },
-          {
-            card: {
-              "background-color": "background-1",
-              "border-radius": "base",
-              "box-shadow": "default",
-              "padding-top": "none",
-              "padding-bottom": "lg",
-              "padding-left": "none",
-              "padding-right": "none",
-              "border-color": "border",
-              "border-width": "1px",
-            },
-            image: {
-              width: "100%",
-              height: "280px",
-              "border-radius": "base",
-              "margin-bottom": "lg",
-              "object-fit": "cover",
-            },
-            title_price_container: {
+            rating_text: {},
+            ctas_levoGroup: {
               display: "flex",
-              "justify-content": "space-between",
-              "align-items": "flex-start",
-              "margin-bottom": "sm",
-              "padding-left": "lg",
-              "padding-right": "lg",
-            },
-            title: {
-              color: "text-1",
-            },
-            price: {
-              color: "text-1",
-            },
-            description_container: {
-              "padding-left": "lg",
-              "padding-right": "lg",
-              "margin-bottom": "lg",
-            },
-            description: {
-              color: "text-2",
-              "margin-bottom": "sm",
-            },
-            rating_container: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "xs",
-            },
-            rating_icon: {
-              color: "text-2",
-              width: "16px",
-              height: "16px",
-            },
-            rating_text: {
-              color: "text-2",
-            },
-            cta: {
-              width: "100%",
-              "background-color": "background-1",
-              color: "text-1",
-              "padding-top": "sm",
-              "padding-bottom": "sm",
-              "border-color": "border",
-              "border-width": "1px",
-              "margin-left": "lg",
-              "margin-right": "lg",
-              "justify-content": "center",
-            },
-          },
-          {
-            card: {
-              "background-color": "background-1",
-              "border-radius": "base",
-              "box-shadow": "default",
-              "padding-top": "none",
-              "padding-bottom": "lg",
-              "padding-left": "none",
-              "padding-right": "none",
-              "border-color": "border",
-              "border-width": "1px",
-            },
-            image: {
-              width: "100%",
-              height: "280px",
-              "border-radius": "base",
-              "margin-bottom": "lg",
-              "object-fit": "cover",
-            },
-            title_price_container: {
-              display: "flex",
-              "justify-content": "space-between",
-              "align-items": "flex-start",
-              "margin-bottom": "sm",
-              "padding-left": "lg",
-              "padding-right": "lg",
-            },
-            title: {
-              color: "text-1",
-            },
-            price: {
-              color: "text-1",
-            },
-            description_container: {
-              "padding-left": "lg",
-              "padding-right": "lg",
-              "margin-bottom": "lg",
-            },
-            description: {
-              color: "text-2",
-              "margin-bottom": "sm",
-            },
-            rating_container: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "xs",
-            },
-            rating_icon: {
-              color: "text-2",
-              width: "16px",
-              height: "16px",
-            },
-            rating_text: {
-              color: "text-2",
-            },
-            cta: {
-              width: "100%",
-              "background-color": "background-1",
-              color: "text-1",
-              "padding-top": "sm",
-              "padding-bottom": "sm",
-              "border-color": "border",
-              "border-width": "1px",
-              "margin-left": "lg",
-              "margin-right": "lg",
-              "justify-content": "center",
+              "flex-direction": "column",
+              gap: "sm",
+              "margin-top": "md",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
           },
         ],
       },
@@ -561,10 +477,10 @@ export const ProductsListing2: IBlock = {
       config: {
         title: {
           heading: {
-            level: "1",
+            level: "2",
           },
           selectedVariants: {
-            Heading_Level: "H1",
+            Heading_Level: "H2",
           },
         },
         products: [
@@ -573,6 +489,20 @@ export const ProductsListing2: IBlock = {
               selectedVariants: {
                 Heading_Level: "H4",
               },
+              heading: {
+                level: "4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            rating_text: {
+              selectedVariants: {},
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
+              },
             },
           },
           {
@@ -580,6 +510,20 @@ export const ProductsListing2: IBlock = {
               selectedVariants: {
                 Heading_Level: "H4",
               },
+              heading: {
+                level: "4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            rating_text: {
+              selectedVariants: {},
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
+              },
             },
           },
           {
@@ -587,6 +531,20 @@ export const ProductsListing2: IBlock = {
               selectedVariants: {
                 Heading_Level: "H4",
               },
+              heading: {
+                level: "4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            rating_text: {
+              selectedVariants: {},
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
+              },
             },
           },
         ],

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

@@ -1,33 +1,38 @@
 import {
-  type ILevoBlockBaseProps,
+  Box,
   Button,
+  Container,
   Heading,
+  Icon,
+  type ILevoBlockBaseProps,
   Image,
-  Typography,
-  Container,
   Section,
-  Box,
-  Icon,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IProductsListing2Content } from "./products-listing-2.schema";
 
-const ProductsListing2: React.FC<
-  ILevoBlockBaseProps<IProductsListing2Content>
-> = ({ content }) => (
+const ProductsListing2: React.FC<ILevoBlockBaseProps<IProductsListing2Content>> = ({ 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="products_levoGroup">
         {(content.products ?? []).map((_, index) => (
-          <Box
-            data-levo_group_item
-            elementKey={`products.${index}.card`}
-            key={index}
-          >
+          <Box data-levo_group_item elementKey={`products.${index}.card`} key={index}>
             <Image
               alt="product image"
               elementKey={`products.${index}.image`}
@@ -45,7 +50,15 @@ const ProductsListing2: React.FC<
                 <Typography elementKey={`products.${index}.rating_text`} />
               </Box>
             </Box>
-            <Button elementKey={`products.${index}.cta`} />
+            <Box elementKey={`products.${index}.ctas_levoGroup`} data-levo_group>
+              {(content?.products?.[index]?.ctas ?? []).map((_, ctaIndex) => (
+                <Button
+                  key={`products.${index}.ctas.${ctaIndex}.cta`}
+                  elementKey={`products.${index}.ctas.${ctaIndex}.cta`}
+                  data-levo_group_item
+                />
+              ))}
+            </Box>
           </Box>
         ))}
       </Box>