@levo-so/blocks 0.1.58 → 0.1.60

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

@@ -3,11 +3,18 @@ import type { IBlock } from "@levo-so/studio";
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
-
   contentWrapper: null,
   title: "Check out this amazing content",
   description: "We've got something special to share with you. Take a look!",
   embed: "",
+  ctas: [
+    {
+      cta: "Learn More",
+    },
+    {
+      cta: "Explore",
+    },
+  ],
 };
 const DEFAULT_CONTENT_2 = {
   layout: null,
@@ -89,24 +96,7 @@ export const Embed1: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-left": "8xl",
-          "padding-right": "8xl",
-          "padding-top": "8xl",
-          "padding-bottom": "8xl",
-          tablet: {
-            "padding-left": "4xl",
-            "padding-right": "4xl",
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-          },
-          mobile: {
-            "padding-left": "lg",
-            "padding-right": "lg",
-            "padding-top": "lg",
-            "padding-bottom": "lg",
-          },
-        },
+        layout: {},
         container: {
           display: "flex",
           "align-items": "center",
@@ -154,38 +144,28 @@ export const Embed1: IBlock = {
           "row-gap": "4xs",
           "align-items": "center",
         },
+        title: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "column-gap": "xl",
+          "flex-direction": "row",
+          "justify-content": "center",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
         title: {
-          "font-size": "4xl",
-          mobile: {
-            "font-size": "2xl",
+          selectedVariants: {
+            Heading_Level: "H2",
           },
         },
       },
-      content: DEFAULT_CONTENT,
-      config: {},
     },
     {
       key: "variant-1",
       title: "Variant 1",
       styles: {
-        layout: {
-          "padding-left": "8xl",
-          "padding-right": "8xl",
-          "padding-top": "8xl",
-          "padding-bottom": "8xl",
-          tablet: {
-            "padding-left": "4xl",
-            "padding-right": "4xl",
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-          },
-          mobile: {
-            "padding-left": "lg",
-            "padding-right": "lg",
-            "padding-top": "lg",
-            "padding-bottom": "lg",
-          },
-        },
+        layout: {},
         container: {
           display: "flex",
           "justify-content": "space-between",
@@ -199,7 +179,6 @@ export const Embed1: IBlock = {
             "row-gap": "base",
             "padding-top": "base",
           },
-          "max-width": "auto",
           "background-color": "background-3",
         },
         embed: {
@@ -235,19 +214,18 @@ export const Embed1: IBlock = {
           "flex-direction": "column",
           "row-gap": "4xs",
         },
+        title: {},
+        description: {},
+      },
+
+      content: DEFAULT_CONTENT_2,
+      config: {
         title: {
-          "font-size": "4xl",
-          mobile: {
-            "font-size": "2xl",
+          selectedVariants: {
+            Heading_Level: "H2",
           },
         },
-        description: {
-          "line-height": 1.625,
-        },
       },
-
-      content: DEFAULT_CONTENT_2,
-      config: {},
     },
   ],
 };

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

@@ -85,6 +85,8 @@ export type IEventDetailsContent = typeof DEFAULT_CONTENT & {
   ends_at?: string;
   kind?: string;
   timing?: string;
+  id?: string;
+  external_ticketing?: string;
 };
 
 export const EventDetails: IBlock = {
@@ -199,6 +201,11 @@ export const EventDetails: IBlock = {
       label: "Event ID",
       field_interface: "TypographyWidget",
     },
+    {
+      key: "external_ticketing",
+      label: "External Ticketing URL",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "end-date-wrapper",
       label: "End Date Wrapper",

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

@@ -76,6 +76,7 @@ const EventDetails: React.FC<ILevoBlockBaseProps<IEventDetailsContent>> = ({
               <RegisterModal
                 eventID={content?.id as string}
                 title={content?.title}
+                external={content?.external_ticketing}
               />
             ) : null}
             <Typography elementKey="description" />

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

@@ -70,22 +70,24 @@ const EventListing2: React.FC<
             </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/event/event-listing-3.tsx

@@ -73,22 +73,24 @@ const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
             </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/event/event-listing-4.tsx

@@ -82,22 +82,24 @@ const EventListing4: React.FC<ILevoBlockBaseProps<IEventListing4>> = () => {
             </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/event/event-listing.tsx

@@ -71,22 +71,24 @@ const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
             </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,31 @@ 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 +47,8 @@ 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 +96,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 +158,11 @@ export const Faq1: IBlock = {
         max_characters: 40,
       },
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "faqs",
       label: "FAQs",
@@ -191,7 +201,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 +259,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 +289,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 +331,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",
-          },
-        },
-      },
     },
   ],
 };