@levo-so/blocks 0.1.75 → 0.1.76

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

@@ -32,7 +32,8 @@ const DEFAULT_CONTENT = {
   container: null,
   "header-container": null,
   title: "Upcoming Events",
-  "cta-button": "View All Events",
+  description: "Upcoming Events Upcoming Events Upcoming Events Upcoming Events ",
+  "cta-buttons": [{ "cta-button": "Learn More" }, { "cta-button": "View All" }],
   events: [
     {
       eventWrapper: null,
@@ -116,6 +117,11 @@ export const EventListing3: IBlock = {
       label: "Container",
       field_interface: "ContainerWidget",
     },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
     {
       key: "header-container",
       label: "Header Container",
@@ -133,21 +139,45 @@ export const EventListing3: IBlock = {
       },
     },
     {
-      key: "cta-button",
-      label: "Header CTA Button",
-      field_interface: "ButtonWidget",
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
       hint: {
         prompt_description:
-          "Call-to-action button displayed next to the main heading. Should encourage exploration, such as 'View all' or 'See more events'.",
-        min_characters: 6,
-        max_characters: 15,
+          "Block headline centered at the top of the Events section. Should clearly state the purpose of the section, such as 'Events' or a similarly concise title.",
+        min_characters: 5,
+        max_characters: 18,
       },
     },
+    {
+      key: "cta-buttons",
+      label: "CTA Buttons",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta-button",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button that encourages users to explore more events. Should be action-oriented.",
+            min_characters: 6,
+            max_characters: 15,
+          },
+        },
+      ],
+    },
     {
       key: "events",
       label: "Events",
       kind: "group",
       field_interface: "BoxWidget",
+      options: {
+        module_field: {
+          module: "event",
+        },
+      },
       hint: {
         prompt_description:
           "A group representing a grid of event cards. Each card highlights an upcoming or featured event with enhanced metadata. Intended for listing multiple events at a glance.",
@@ -171,6 +201,12 @@ export const EventListing3: IBlock = {
             size: "medium",
             usecase: "hero",
           },
+          options: {
+            module_field: {
+              module: "event",
+              key: "cover_image",
+            },
+          },
         },
         {
           key: "text-wrapper",
@@ -205,10 +241,16 @@ export const EventListing3: IBlock = {
           field_interface: "TypographyWidget",
           hint: {
             prompt_description:
-              "Displays the date and time of the event. Format as 'Month DD, YYYY HH:MM AM/PM'. Keep it short, clear, and easily readable.",
+              "Displays the date and time of the event. Format as 'Month  DD, YYYY HH:MM AM/PM'. Keep it short, clear, and easily readable.",
             min_characters: 16,
             max_characters: 28,
           },
+          options: {
+            module_field: {
+              module: "event",
+              key: "starts_at",
+            },
+          },
         },
         {
           key: "author-wrapper",
@@ -256,13 +298,19 @@ export const EventListing3: IBlock = {
         {
           key: "title",
           label: "Event Title",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
           hint: {
             prompt_description:
               "Event card headline. Should be the name or title of the event, immediately catching the user's attention. Aim for clarity and engagement.",
             min_characters: 8,
             max_characters: 32,
           },
+          options: {
+            module_field: {
+              module: "event",
+              key: "title",
+            },
+          },
         },
         {
           key: "description",
@@ -274,6 +322,12 @@ export const EventListing3: IBlock = {
             min_characters: 40,
             max_characters: 120,
           },
+          options: {
+            module_field: {
+              module: "event",
+              key: "description",
+            },
+          },
         },
         {
           key: "publishedAt",
@@ -285,6 +339,12 @@ export const EventListing3: IBlock = {
             min_characters: 16,
             max_characters: 28,
           },
+          options: {
+            module_field: {
+              module: "event",
+              key: "starts_at",
+            },
+          },
         },
         {
           key: "cta",
@@ -353,64 +413,52 @@ export const EventListing3: IBlock = {
       },
     },
   ],
+  source: [{ required: true, module: "event", type: "block", field_key: "events" }],
   layouts: [
     {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-left": "10xl",
-          "padding-right": "10xl",
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          tablet: {
-            "padding-left": "8xl",
-            "padding-right": "8xl",
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-          },
-          mobile: {
-            "padding-left": "6xl",
-            "padding-right": "6xl",
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-          },
-          filter: "none",
-        },
+        layout: {},
         container: {
           display: "flex",
           "flex-direction": "column",
           "align-items": "center",
           "row-gap": "2xl",
-          filter: "none",
         },
         "header-container": {
           display: "flex",
           width: "100%",
           "justify-content": "space-between",
-          "align-items": "center",
-          "margin-bottom": "3xl",
+          "align-items": "start",
           mobile: {
             "flex-direction": "column",
-            "align-items": "flex-start",
+            "align-items": "center",
             "row-gap": "lg",
           },
+          tablet: {
+            "flex-direction": "column",
+          },
+          "flex-direction": "column",
         },
-        title: {
-          color: "text-1",
-          margin: "0",
-        },
-        "cta-button": {
-          "background-color": "transparent",
-          color: "color-brand",
-
-          "text-decoration": "none",
-          border: "none",
-          cursor: "pointer",
+        title: {},
+        "cta-buttons_levoGroup": {
           display: "flex",
+          "column-gap": "md",
           "align-items": "center",
-          "column-gap": "xs",
         },
+        "cta-buttons": [
+          {
+            "cta-button": {
+              "white-space": "nowrap",
+            },
+          },
+          {
+            "cta-button": {
+              "white-space": "nowrap",
+            },
+          },
+        ],
         events_levoGroup: {
           display: "grid",
           width: "100%",
@@ -419,137 +467,119 @@ export const EventListing3: IBlock = {
           "column-gap": "5xl",
           tablet: {
             "grid-template-columns": "repeat(1, minmax(0, 1fr))",
-            filter: "none",
             "column-gap": "base",
           },
           mobile: {
             "grid-template-columns": "repeat(1, 1fr)",
             "row-gap": "lg",
-            filter: "none",
           },
-          filter: "none",
         },
-
-        events: Array(3)
-          .fill(0)
-          ?.map((v) => {
-            return {
-              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)",
-                position: "relative",
-              },
-              image: {
-                width: "100%",
-                height: "200px",
-                "object-fit": "cover",
-              },
-              "text-wrapper": {
-                "padding-left": "none",
-                "padding-top": "none",
-                "padding-right": "none",
-                "padding-bottom": "2xl",
-                display: "flex",
-                "flex-direction": "column",
-                "row-gap": "lg",
-                filter: "none",
-              },
-              "text-container": {
-                display: "flex",
-                "justify-content": "start",
-                "align-items": "center",
-                "column-gap": "lg",
-                "margin-bottom": "base",
-                filter: "none",
-                "border-bottom": "1px solid",
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "base",
-                "padding-right": "base",
-              },
-              "caption-text": {
-                color: "white",
-                "font-size": "xs",
-                "background-color": "var(--color-brand)",
-                "font-weight": 500,
-                "padding-left": "sm",
-                "padding-right": "sm",
-                "padding-top": "2xs",
-                "padding-bottom": "2xs",
-                "border-radius": "3xl",
-              },
-              "date-wrapper": {
-                display: "flex",
-                "align-items": "center",
-                "column-gap": "xs",
-              },
-              "date-icon": {
-                width: "16px",
-                height: "16px",
-              },
-              "publishedAt-header": {
-                "font-size": "sm",
-                color: "var(--color-text-2)",
-                "font-weight": 500,
-              },
-              "author-wrapper": {
-                display: "flex",
-                "align-items": "center",
-                "column-gap": "xs",
-              },
-              "author-image": {
-                height: "24px",
-                width: "24px",
-                "border-radius": "100%",
-                "object-fit": "cover",
-              },
-              "author-name": {
-                "font-size": "sm",
-                "font-weight": 500,
-                color: "var(--color-text-1)",
-              },
-              title: {
-                "font-weight": 600,
-                "font-size": "xl",
-                "margin-bottom": "xs",
-                color: "var(--color-text-1)",
-                filter: "none",
-              },
-              description: {
-                overflow: "hidden",
-                display: "-webkit-box",
-                "-webkit-box-orient": "vertical",
-                "-webkit-line-clamp": 3,
-                color: "var(--color-text-2)",
-                "line-height": 1.5,
-                "margin-bottom": "base",
-                filter: "none",
-              },
-              publishedAt: {
-                display: "none",
-              },
-              cta: {
-                "background-color": "var(--color-brand)",
-                color: "white",
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "base",
-                "padding-right": "base",
-                "border-radius": "md",
-                "font-size": "sm",
-                "font-weight": 500,
-                border: "none",
-                cursor: "pointer",
-                "align-self": "flex-start",
-              },
-              "content-container": {
-                filter: "none",
-                "padding-left": "base",
-                "padding-right": "base",
-              },
-            };
-          }),
+        events_levoGroupItem: {
+          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)",
+            position: "relative",
+          },
+          image: {
+            width: "100%",
+            height: "200px",
+            "object-fit": "cover",
+          },
+          "text-wrapper": {
+            "padding-left": "xl",
+            "padding-top": "xl",
+            "padding-right": "xl",
+            "padding-bottom": "xl",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "base",
+          },
+          "text-container": {
+            display: "flex",
+            "justify-content": "start",
+            "align-items": "center",
+            "column-gap": "lg",
+            "margin-bottom": "base",
+            "border-bottom": "1px solid",
+            "padding-top": "xs",
+            "padding-bottom": "xs",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+          "caption-text": {
+            color: "white",
+            "font-size": "xs",
+            "background-color": "var(--color-brand)",
+            "font-weight": 500,
+            "padding-left": "sm",
+            "padding-right": "sm",
+            "padding-top": "2xs",
+            "padding-bottom": "2xs",
+            "border-radius": "3xl",
+          },
+          "date-wrapper": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "xs",
+          },
+          "date-icon": {
+            width: "16px",
+            height: "16px",
+          },
+          "publishedAt-header": {
+            "font-weight": 500,
+          },
+          "author-wrapper": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "xs",
+          },
+          "author-image": {
+            height: "24px",
+            width: "24px",
+            "border-radius": "100%",
+            "object-fit": "cover",
+          },
+          "author-name": {
+            "font-size": "sm",
+            "font-weight": 500,
+            color: "var(--color-text-1)",
+          },
+          title: {
+            "font-weight": 600,
+            "font-size": "xl",
+            "margin-bottom": "xs",
+          },
+          description: {
+            overflow: "hidden",
+            display: "-webkit-box",
+            "-webkit-box-orient": "vertical",
+            "-webkit-line-clamp": 3,
+            "margin-bottom": "none",
+          },
+          publishedAt: {
+            display: "none",
+          },
+          cta: {
+            "background-color": "var(--color-brand)",
+            color: "white",
+            "padding-top": "xs",
+            "padding-bottom": "xs",
+            "padding-left": "base",
+            "padding-right": "base",
+            "border-radius": "md",
+            "font-size": "sm",
+            "font-weight": 500,
+            border: "none",
+            cursor: "pointer",
+            "align-self": "flex-start",
+          },
+          "content-container": {
+            "padding-left": "none",
+            "padding-right": "none",
+          },
+        },
         paginationWrapper: {
           width: "100%",
           display: "flex",
@@ -557,29 +587,9 @@ export const EventListing3: IBlock = {
           "column-gap": "lg",
           "align-items": "center",
         },
-        paginationLeftButton: {
-          "background-color": "transparent",
-          border: "1px solid var(--color-border)",
-          "border-radius": "md",
-          "padding-top": "xs",
-          "padding-bottom": "xs",
-          "padding-left": "base",
-          "padding-right": "base",
-          cursor: "pointer",
-        },
-        paginationText: {
-          color: "text-1",
-        },
-        paginationRightButton: {
-          "background-color": "transparent",
-          border: "1px solid var(--color-border)",
-          "border-radius": "md",
-          "padding-top": "xs",
-          "padding-bottom": "xs",
-          "padding-left": "base",
-          "padding-right": "base",
-          cursor: "pointer",
-        },
+        paginationLeftButton: {},
+        paginationText: {},
+        paginationRightButton: {},
         paginationLeftIcon: {
           height: "16px",
           width: "16px",
@@ -588,6 +598,24 @@ export const EventListing3: IBlock = {
           height: "16px",
           width: "16px",
         },
+        description: {
+          "max-width": "600px",
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        header: {
+          mobile: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "base",
+          },
+          width: "100%",
+          display: "flex",
+          "column-gap": "base",
+          "margin-bottom": "3xl",
+        },
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -599,12 +627,20 @@ export const EventListing3: IBlock = {
             level: 2,
           },
         },
-
-        "cta-button": {
-          selectedVariants: {
-            Button_Variants: "Secondary",
+        "cta-buttons": [
+          {
+            "cta-button": {
+              selectedVariants: {},
+            },
           },
-        },
+          {
+            "cta-button": {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
       },
     },
   ],