@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/event/event-listing.schema.ts

@@ -6,20 +6,13 @@ const DUMMY_IMAGE = {
   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",
+    "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",
   },
 };
@@ -52,8 +45,7 @@ const DEFAULT_CONTENT = {
       "date-icon": DUMMY_ICON,
       publishedAt: "25 July, 2025",
       title: "Books, Brighter Futures: A Day for Change",
-      description:
-        "Over 400 children will receive new educational supplies during this Event.",
+      description: "Over 400 children will receive new educational supplies during this Event.",
     },
     {
       eventWrapper: null,
@@ -76,8 +68,7 @@ const DEFAULT_CONTENT = {
       "date-icon": DUMMY_ICON,
       publishedAt: "3 December, 2025",
       title: "Voices for a Cause: Music & Giving",
-      description:
-        "Experience an evening of soulful and delightful performances and storytelling.",
+      description: "Experience an evening of soulful and delightful performances and storytelling.",
     },
     {
       eventWrapper: null,
@@ -139,8 +130,7 @@ const DEFAULT_CONTENT_CTA = {
       "date-icon": DUMMY_ICON,
       publishedAt: "25 July, 2025",
       title: "Books, Brighter Futures: A Day for Change",
-      description:
-        "Over 400 children will receive new educational supplies during this Event.",
+      description: "Over 400 children will receive new educational supplies during this Event.",
     },
     {
       eventWrapper: null,
@@ -163,8 +153,7 @@ const DEFAULT_CONTENT_CTA = {
       "date-icon": DUMMY_ICON,
       publishedAt: "3 December, 2025",
       title: "Voices for a Cause: Music & Giving",
-      description:
-        "Experience an evening of soulful and delightful performances and storytelling.",
+      description: "Experience an evening of soulful and delightful performances and storytelling.",
     },
     {
       eventWrapper: null,
@@ -542,8 +531,7 @@ export const EventListing: IBlock = {
             eventWrapper: {
               "border-radius": "xl",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
               filter: "none",
             },
             image: {

package/src/blocks/event/event-listing.tsx

@@ -1,19 +1,19 @@
-import dayjs from "dayjs";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
-  Section,
+  Box,
+  Button,
   Container,
-  Typography,
   Heading,
-  Box,
   Icon,
   Image,
+  Section,
+  Typography,
   useContentEngine,
-  Button,
 } from "@levo-so/studio";
+import dayjs from "dayjs";
 
-import type { IEventListing } from "./event-listing.schema";
 import { ClientOnly } from "./ClientOnly";
+import type { IEventListing } from "./event-listing.schema";
 
 const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
   const { data, query, setQuery, meta } = useContentEngine("events");
@@ -48,13 +48,9 @@ const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
 
                   <Box elementKey={`events.${index}.date-wrapper`}>
                     <Icon elementKey={`events.${index}.date-icon`} />
-                    <Typography
-                      elementKey={`events.${index}.publishedAt-header`}
-                    >
+                    <Typography elementKey={`events.${index}.publishedAt-header`}>
                       <ClientOnly>
-                        {dayjs(item?.["publishedAt-header"]).format(
-                          "MMM D, YYYY",
-                        )}
+                        {dayjs(item?.["publishedAt-header"]).format("MMM D, YYYY")}
                       </ClientOnly>
                     </Typography>
                   </Box>
@@ -63,30 +59,30 @@ const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
                 <Typography elementKey={`events.${index}.title`} />
                 <Typography elementKey={`events.${index}.description`} />
                 <Typography elementKey={`events.${index}.publishedAt`}>
-                  <ClientOnly>
-                    {dayjs(item?.publishedAt).format("MMM D, YYYY")}
-                  </ClientOnly>
+                  <ClientOnly>{dayjs(item?.publishedAt).format("MMM D, YYYY")}</ClientOnly>
                 </Typography>
               </Box>
             </Box>
           ))}
         </Box>
-        <Box elementKey="paginationWrapper">
-          <Button
-            elementKey="paginationLeftButton"
-            disabled={query?.page === 1}
-            onClick={handlePrevious}
-          />
+        {(meta?.pages || 0) > 1 && (
+          <Box elementKey="paginationWrapper">
+            <Button
+              elementKey="paginationLeftButton"
+              disabled={query?.page === 1}
+              onClick={handlePrevious}
+            />
 
-          <Typography elementKey="paginationText">
-            {`${query?.page || 0}/${meta?.pages || 0}`}
-          </Typography>
-          <Button
-            elementKey="paginationRightButton"
-            onClick={handleNext}
-            disabled={query?.page === meta?.pages}
-          />
-        </Box>
+            <Typography elementKey="paginationText">
+              {`${query?.page || 0}/${meta?.pages || 0}`}
+            </Typography>
+            <Button
+              elementKey="paginationRightButton"
+              onClick={handleNext}
+              disabled={query?.page === meta?.pages}
+            />
+          </Box>
+        )}
       </Container>
     </Section>
   );

package/src/blocks/faq/faq-1.schema.ts

@@ -11,6 +11,24 @@ const DUMMY_IMAGE = {
   },
 };
 
+const MEDIA = {
+  id: "XZbHDbcwEfNIW",
+  filename: "faq-1-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/faq-1-1-QsAcZ4gZy8hjO-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -22,7 +40,7 @@ const DEFAULT_CONTENT = {
   text_container: null,
   faq_label: "FAQ's",
   title: "Legal Queries Solved",
-
+  description: "We're here to help you navigate the complexities of the legal system.",
   faqs: [
     {
       wrapper: null,
@@ -70,31 +88,10 @@ const DEFAULT_CONTENT = {
     },
   ],
 
-  cta: "More about us",
+  ctas_levoGroup: null,
+  ctas: [{ cta: "More about us" }, { cta: "Contact Support" }],
 
-  faq_image: {
-    id: "7141014160938075687",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/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",
-    },
-  },
+  faq_image: MEDIA,
 };
 
 export type IFaq1Content = typeof DEFAULT_CONTENT;
@@ -153,6 +150,11 @@ export const Faq1: IBlock = {
         max_characters: 40,
       },
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "faqs",
       label: "FAQs",
@@ -191,7 +193,7 @@ export const Faq1: IBlock = {
         {
           key: "question",
           label: "Question",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
           hint: {
             prompt_description:
               "A frequently asked legal question. Should be direct, clear, and phrased from the client's perspective. Professional, sincere tone.",
@@ -249,9 +251,17 @@ export const Faq1: 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",
+        },
+      ],
     },
     {
       key: "faq_image",
@@ -271,19 +281,9 @@ export const Faq1: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          padding: "112px",
-          width: "100%",
-          tablet: {
-            padding: "50px",
-          },
-          mobile: {
-            padding: "40px",
-          },
-        },
+        layout: {},
         container: {
           display: "flex",
-          width: "100%",
           "align-items": "center",
           "justify-content": "between",
           "column-gap": "12xl",
@@ -323,95 +323,133 @@ export const Faq1: IBlock = {
             display: "none",
           },
         },
-        faq_label: {
-          color: "text-2",
+        faq_label: {},
+        title: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "md",
+          "row-gap": "md",
+          "flex-wrap": "wrap",
+          "align-items": "center",
         },
+        ctas: Array(2)
+          .fill(0)
+          .map(() => ({
+            width: "fit-content",
+          })),
+        faqs: Array(4)
+          .fill(0)
+          .map((v) => ({
+            wrapper: {
+              "padding-top": "none",
+              "padding-bottom": "none",
+              "border-color": "var(--color-border)",
+              "border-bottom-width": "1px",
+              "border-style": "solid",
+            },
+            question: {
+              "font-weight": 600,
+              tablet: {
+                "text-align": "left",
+              },
+            },
+            content: {
+              "padding-top": "none",
+              "padding-bottom": "lg",
+            },
+            trigger: {
+              width: "100%",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "space-between",
+              "padding-top": "base",
+              "padding-bottom": "base",
+            },
+            iconQuestionWrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "base",
+            },
+            features_list: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "lg",
+              "margin-top": "base",
+              "flex-wrap": "wrap",
+            },
+            features: Array(4)
+              .fill(0)
+              .map((v) => ({
+                wrapper: {
+                  display: "flex",
+                  "align-items": "center",
+                  "column-gap": "xs",
+                  "background-color": "brand",
+                  "padding-left": "sm",
+                  "padding-right": "sm",
+                  "padding-top": "2xs",
+                  "padding-bottom": "2xs",
+                  "border-radius": "md",
+                },
+                icon: {
+                  width: "16px",
+                  height: "16px",
+                },
+                label: {
+                  color: "brandForeground",
+                },
+              })),
+            features_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+              "margin-top": "base",
+            },
+          })),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
         title: {
-          color: "text-1",
-        },
-        cta: {
-          width: "fit-content",
+          title: {
+            heading: {
+              level: 2,
+            },
+            selectedVariants: {
+              Heading_Level: "H2",
+            },
+          },
         },
         faqs: Array(4)
           .fill(0)
           .map((v) => {
             return {
-              wrapper: {
-                "padding-top": "none",
-                "padding-bottom": "none",
-                "border-color": "var(--color-border)",
-                "border-bottom-width": "1px",
-                "border-style": "solid",
-              },
               question: {
-                "font-size": "xl",
-                "font-weight": 600,
-                color: "black",
-                tablet: {
-                  "text-align": "left",
+                heading: {
+                  level: "4",
+                },
+                selectedVariants: {
+                  Heading_Level: "H5",
                 },
               },
-              content: {
-                "padding-top": "none",
-                "padding-bottom": "lg",
-              },
-              trigger: {
-                width: "100%",
-                display: "flex",
-                "align-items": "center",
-                "justify-content": "space-between",
-                "padding-top": "base",
-                "padding-bottom": "base",
-              },
-              iconQuestionWrapper: {
-                display: "flex",
-                "align-items": "center",
-                "column-gap": "base",
-              },
-              features_list: {
-                display: "flex",
-                "flex-direction": "row",
-                "column-gap": "lg",
-                "margin-top": "base",
-                "flex-wrap": "wrap",
-              },
-              features: [
-                {
-                  wrapper: {
-                    display: "flex",
-                    "align-items": "center",
-                    "column-gap": "xs",
-                    "background-color": "background-2",
-                    "padding-left": "sm",
-                    "padding-right": "sm",
-                    "padding-top": "2xs",
-                    "padding-bottom": "2xs",
-                    "border-radius": "md",
-                  },
+              features: Array(4)
+                .fill(0)
+                .map((v) => ({
                   icon: {
-                    width: "16px",
-                    height: "16px",
+                    selectedVariants: {},
                   },
                   label: {
-                    "font-size": "sm",
-                    color: "text-2",
+                    selectedVariants: {
+                      Typography_Variants: "Small",
+                    },
                   },
-                },
-              ],
+                })),
+              answer: {
+                selectedVariants: {},
+              },
             };
           }),
       },
-      content: DEFAULT_CONTENT,
-      config: {
-        title: {
-          heading: {
-            level: 2,
-          },
-          selectedVariants: {
-            Heading_Level: "H2",
-          },
-        },
-      },
     },
   ],
 };

package/src/blocks/faq/faq-1.tsx

@@ -1,17 +1,17 @@
 import {
-  type ILevoBlockBaseProps,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  Box,
+  Button,
+  Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
-  Typography,
-  Container,
   Section,
-  Box,
-  AccordionRoot,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-  Button,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IFaq1Content } from "./faq-1.schema";
@@ -23,6 +23,7 @@ const Faq1: React.FC<ILevoBlockBaseProps<IFaq1Content>> = ({ content }) => (
         <Box elementKey="text_container">
           <Typography elementKey="faq_label" />
           <Heading elementKey="title" />
+          <Typography elementKey="description" />
         </Box>
 
         <AccordionRoot
@@ -41,40 +42,37 @@ const Faq1: React.FC<ILevoBlockBaseProps<IFaq1Content>> = ({ content }) => (
               <AccordionTrigger elementKey={`faqs.${index}.trigger`}>
                 <Box elementKey={`faqs.${index}.iconQuestionWrapper`}>
                   <Icon elementKey={`faqs.${index}.triggerIcon`} />
-                  <Typography elementKey={`faqs.${index}.question`} />
+                  <Heading elementKey={`faqs.${index}.question`} />
                 </Box>
               </AccordionTrigger>
               <AccordionContent elementKey={`faqs.${index}.content`}>
                 <Typography elementKey={`faqs.${index}.answer`} />
-                <Box elementKey={`faqs.${index}.features`}>
-                  {(item.features ?? []).map(
-                    (feature: any, featureIndex: number) => (
-                      <Box
-                        key={featureIndex}
-                        elementKey={`faqs.${index}.features.${featureIndex}.wrapper`}
-                      >
-                        <Icon
-                          elementKey={`faqs.${index}.features.${featureIndex}.icon`}
-                        />
-                        <Typography
-                          elementKey={`faqs.${index}.features.${featureIndex}.label`}
-                        />
-                      </Box>
-                    ),
-                  )}
+                <Box elementKey={`faqs.${index}.features_levoGroup`}>
+                  {(item.features ?? []).map((feature: any, featureIndex: number) => (
+                    <Box
+                      key={featureIndex}
+                      elementKey={`faqs.${index}.features.${featureIndex}.wrapper`}
+                    >
+                      <Icon elementKey={`faqs.${index}.features.${featureIndex}.icon`} />
+                      <Typography elementKey={`faqs.${index}.features.${featureIndex}.label`} />
+                    </Box>
+                  ))}
                 </Box>
               </AccordionContent>
             </AccordionItem>
           ))}
         </AccordionRoot>
-        <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>
-      <Image
-        elementKey="faq_image"
-        width={356}
-        height={479}
-        alt="Lawyer consulting with client"
-      />
+      <Image elementKey="faq_image" width={356} height={479} alt="Lawyer consulting with client" />
     </Container>
   </Section>
 );