@levo-so/blocks 0.1.58 → 0.1.60

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

@@ -1,28 +1,81 @@
 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",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1080w.webp",
     "1200w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-1200w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1200w.webp",
     "1920w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-1920w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-1920w.webp",
     "320w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-320w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-320w.webp",
     "640w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-640w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-640w.webp",
     "750w":
-      "https://static.levostg.online/W6OEVMW8/image-8eR70ULi9jcm-750w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-2-1-w9frJuthKQ8f-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",
+      "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 +83,18 @@ 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 +102,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 +117,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 +125,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 +140,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 +148,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 +189,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 +274,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 +294,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 +307,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 +351,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 +362,6 @@ export const ProductsListing2: IBlock = {
               "padding-right": "none",
             },
             description: {
-              color: "text-2",
               "margin-bottom": "sm",
             },
             rating_container: {
@@ -296,12 +374,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 +408,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 +419,6 @@ export const ProductsListing2: IBlock = {
               "padding-right": "none",
             },
             description: {
-              color: "text-2",
               "margin-bottom": "sm",
             },
             rating_container: {
@@ -354,12 +431,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 +465,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 +476,6 @@ export const ProductsListing2: IBlock = {
               "padding-right": "none",
             },
             description: {
-              color: "text-2",
               "margin-bottom": "sm",
             },
             rating_container: {
@@ -412,148 +488,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: {
-              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: {
+            rating_text: {},
+            ctas_levoGroup: {
               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 +505,10 @@ export const ProductsListing2: IBlock = {
       config: {
         title: {
           heading: {
-            level: "1",
+            level: "2",
           },
           selectedVariants: {
-            Heading_Level: "H1",
+            Heading_Level: "H2",
           },
         },
         products: [
@@ -573,6 +517,20 @@ export const ProductsListing2: IBlock = {
               selectedVariants: {
                 Heading_Level: "H4",
               },
+              heading: {
+                level: "4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            rating_text: {
+              selectedVariants: {},
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
+              },
             },
           },
           {
@@ -580,6 +538,20 @@ export const ProductsListing2: IBlock = {
               selectedVariants: {
                 Heading_Level: "H4",
               },
+              heading: {
+                level: "4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            rating_text: {
+              selectedVariants: {},
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
+              },
             },
           },
           {
@@ -587,6 +559,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

@@ -18,8 +18,19 @@ const ProductsListing2: 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="products_levoGroup">
         {(content.products ?? []).map((_, index) => (
@@ -45,7 +56,18 @@ 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>