@levo-so/blocks 0.1.75 → 0.1.76

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

@@ -18,7 +18,6 @@ const DEFAULT_CONTENT = {
   title: "Events",
   description:
     "Stay updated on our upcoming community gatherings, workshops, and networking events!",
-  "cta-button": "View all",
   events: [
     {
       eventWrapper: null,
@@ -43,23 +42,19 @@ const DEFAULT_CONTENT = {
       title: "Afghan American Inauguration",
       description:
         "Join us for this historic celebration of community leadership and cultural pride.",
-      details: [
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "3:00 PM - 6:00 PM",
-        },
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "2200 Harvard St, Sacramento, CA 95815",
-        },
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "11 Apr",
-        },
-      ],
+      details_container: null,
+      date_detail_wrapper: null,
+      date_icon: DUMMY_ICON,
+      date_text: "Apr 11, 2024",
+      time_detail_wrapper: null,
+      time_icon: DUMMY_ICON,
+      time_text: "3:00 PM - 6:00 PM",
+      location_detail_wrapper: null,
+      location_icon: DUMMY_ICON,
+      location_text: "2200 Harvard St, Sacramento, CA 95815",
+      type_detail_wrapper: null,
+      type_icon: DUMMY_ICON,
+      type_text: "In-Person Event",
     },
     {
       eventWrapper: null,
@@ -82,29 +77,26 @@ const DEFAULT_CONTENT = {
       "content-wrapper": null,
       title: "Community Health Workshop",
       description: "Learn about wellness resources and health services available in our community.",
-      details: [
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "10:00 AM - 2:00 PM",
-        },
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "1500 Main St, Sacramento, CA 95814",
-        },
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "25 Apr",
-        },
-      ],
+      details_container: null,
+      date_detail_wrapper: null,
+      date_icon: DUMMY_ICON,
+      date_text: "Apr 25, 2024",
+      time_detail_wrapper: null,
+      time_icon: DUMMY_ICON,
+      time_text: "10:00 AM - 2:00 PM",
+      location_detail_wrapper: null,
+      location_icon: DUMMY_ICON,
+      location_text: "1500 Main St, Sacramento, CA 95814",
+      type_detail_wrapper: null,
+      type_icon: DUMMY_ICON,
+      type_text: "Virtual Event",
     },
   ],
   paginationWrapper: null,
   paginationLeftButton: "Previous",
   paginationText: "",
   paginationRightButton: "Next",
+  "cta-buttons": [{ "cta-button": "Learn More" }, { "cta-button": "View All" }],
 };
 
 export type IEventListing2Content = typeof DEFAULT_CONTENT;
@@ -115,7 +107,7 @@ export const EventListing2: IBlock = {
   key: "event-listing-2",
   version: "v1",
   prompt_description:
-    "Event listing with header section containing title, description and CTA button, followed by event cards with images and detailed information including time, location, and date with icons",
+    "Event listing with header section containing title and description, followed by event cards with images and 4 auto-populated detail items (date, time, location, event type) with manually configurable icons. Uses opinionated integration with real event data.",
   content_schema: [
     {
       key: "layout",
@@ -176,21 +168,35 @@ export const EventListing2: IBlock = {
       },
     },
     {
-      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: "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",
       field_interface: "BoxWidget",
       kind: "group",
+      options: {
+        module_field: {
+          module: "event",
+        },
+      },
       fields: [
         {
           key: "eventWrapper",
@@ -208,6 +214,12 @@ export const EventListing2: IBlock = {
             size: "medium",
             usecase: "hero",
           },
+          options: {
+            module_field: {
+              module: "event",
+              key: "cover_image",
+            },
+          },
         },
         {
           key: "content-wrapper",
@@ -223,6 +235,12 @@ export const EventListing2: IBlock = {
             min_characters: 15,
             max_characters: 50,
           },
+          options: {
+            module_field: {
+              module: "event",
+              key: "title",
+            },
+          },
         },
         {
           key: "description",
@@ -234,47 +252,149 @@ export const EventListing2: IBlock = {
             min_characters: 40,
             max_characters: 120,
           },
+          options: {
+            module_field: {
+              module: "event",
+              key: "description",
+            },
+          },
+        },
+        {
+          key: "details_container",
+          label: "Details Container",
+          field_interface: "BoxWidget",
         },
         {
-          key: "details",
-          label: "Event Details",
+          key: "date_detail_wrapper",
+          label: "Date Detail Wrapper",
           field_interface: "BoxWidget",
-          kind: "group",
-          fields: [
-            {
-              key: "detailWrapper",
-              label: "Detail Wrapper",
-              field_interface: "BoxWidget",
+        },
+        {
+          key: "date_icon",
+          label: "Date Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description: "Icon for the event date. Typically a calendar icon.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "date_text",
+          label: "Date Text (Auto-populated)",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Event date automatically populated from starts_at field in format 'MMM D, YYYY'. This text is auto-generated and not editable.",
+            min_characters: 5,
+            max_characters: 50,
+          },
+          options: {
+            module_field: {
+              module: "event",
+              key: "starts_at",
             },
-            {
-              key: "icon",
-              label: "Detail Icon",
-              field_interface: "ImageWidget",
-              hint: {
-                prompt_description:
-                  "Icon representing the type of detail (time, location, date). Should be simple and recognizable.",
-                orientation: "square",
-                size: "icon",
-                usecase: "icon",
-              },
+          },
+        },
+        {
+          key: "time_detail_wrapper",
+          label: "Time Detail Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "time_icon",
+          label: "Time Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description: "Icon for the event time. Typically a clock icon.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "time_text",
+          label: "Time Text (Auto-populated)",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Event time range automatically populated from starts_at and ends_at fields in format 'h:mm A - h:mm A'. This text is auto-generated and not editable.",
+            min_characters: 5,
+            max_characters: 50,
+          },
+          options: {
+            module_field: {
+              module: "event",
+              key: "starts_at",
             },
-            {
-              key: "text",
-              label: "Detail Text",
-              field_interface: "TypographyWidget",
-              hint: {
-                prompt_description:
-                  "Detail information such as time, location, or date. Should be clear and specific.",
-                min_characters: 5,
-                max_characters: 50,
-              },
+          },
+        },
+        {
+          key: "location_detail_wrapper",
+          label: "Location Detail Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "location_icon",
+          label: "Location Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description: "Icon for the event location. Typically a map pin icon.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "location_text",
+          label: "Location Text (Auto-populated)",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Event location automatically populated from location.place_name field. Shows 'Location TBA' if not available. This text is auto-generated and not editable.",
+            min_characters: 5,
+            max_characters: 50,
+          },
+          options: {
+            module_field: {
+              module: "event",
+              key: "location",
             },
-          ],
+          },
+        },
+        {
+          key: "type_detail_wrapper",
+          label: "Event Type Detail Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "type_icon",
+          label: "Event Type Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Icon for the event type. Typically a computer/monitor icon for virtual or location pin for in-person.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "type_text",
+          label: "Event Type Text (Auto-populated)",
+          field_interface: "TypographyWidget",
           hint: {
             prompt_description:
-              "Collection of event details including time, location, and date with corresponding icons.",
-            min_items: 3,
-            max_items: 3,
+              "Event type automatically populated from kind field. Shows 'Virtual Event' or 'In-Person Event'. This text is auto-generated and not editable.",
+            min_characters: 5,
+            max_characters: 50,
+          },
+          options: {
+            module_field: {
+              module: "event",
+              key: "kind",
+            },
           },
         },
       ],
@@ -339,26 +459,34 @@ export const EventListing2: IBlock = {
       },
     },
   ],
+  source: [{ required: true, module: "event", type: "block", field_key: "events" }],
   layouts: [
     {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "4xl",
-          "padding-bottom": "4xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          filter: "none",
+        "cta-buttons_levoGroup": {
+          display: "flex",
+          "column-gap": "md",
+          "align-items": "center",
         },
+        "cta-buttons": [
+          {
+            "cta-button": {
+              "white-space": "nowrap",
+            },
+          },
+          {
+            "cta-button": {
+              "white-space": "nowrap",
+            },
+          },
+        ],
+        layout: {},
         container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
           display: "flex",
           "flex-direction": "column",
           "row-gap": "3xl",
-          filter: "none",
         },
         "header-section": {
           display: "flex",
@@ -367,34 +495,32 @@ export const EventListing2: IBlock = {
           "text-align": "center",
           "row-gap": "lg",
           "margin-bottom": "xl",
-          filter: "none",
           "justify-content": "space-between",
           tablet: {
             "flex-direction": "column",
+            "align-items": "start",
           },
           mobile: {
             "flex-direction": "column",
+            "align-items": "center",
           },
+          "column-gap": "base",
         },
         "header-content": {
           display: "flex",
           "flex-direction": "column",
-          "row-gap": "base",
+          "row-gap": "none",
           "text-align": "left",
           mobile: {
             "text-align": "center",
           },
+          width: "100%",
+          "justify-content": "start",
         },
-        title: {
-          color: "text-1",
-        },
+        title: {},
         description: {
-          "font-size": "lg",
-          color: "text-2",
           "max-width": "600px",
-          "line-height": "1.6",
         },
-
         events_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -406,7 +532,6 @@ export const EventListing2: IBlock = {
           mobile: {
             "grid-template-columns": "repeat(1, minmax(0, 1fr))",
           },
-          filter: "none",
         },
         paginationWrapper: {
           width: "100%",
@@ -415,110 +540,94 @@ export const EventListing2: IBlock = {
           "column-gap": "lg",
           "align-items": "center",
         },
-        events: Array(2)
-          ?.fill(0)
-          .map((v) => {
-            return {
-              eventWrapper: {
-                "background-color": "white",
-                "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)",
-                display: "flex",
-                "flex-direction": "column",
-                filter: "none",
-                "padding-bottom": "none",
-                height: "min-content",
-              },
-              image: {
-                width: "100%",
-                height: "auto",
-                "object-fit": "cover",
-                filter: "none",
-                "min-height": "260px",
-              },
-              "content-wrapper": {
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-top": "lg",
-                "padding-bottom": "xl",
-                display: "flex",
-                "flex-direction": "column",
-                "row-gap": "base",
-                filter: "none",
-                "background-color": "white",
-              },
-              title: {
-                "font-size": "xl",
-                "font-weight": "600",
-                color: "text-1",
-                "line-height": "1.3",
-                filter: "none",
-              },
-              description: {
-                "font-size": "base",
-                color: "text-2",
-                "line-height": "1.5",
-                "margin-bottom": "sm",
-                filter: "none",
-                display: "none",
-              },
-              details_levoGroup: {
-                display: "flex",
-                "flex-direction": "column",
-                "row-gap": "xs",
-                filter: "none",
-              },
-              details: [
-                {
-                  detailWrapper: {
-                    display: "flex",
-                    "align-items": "center",
-                    "column-gap": "sm",
-                    filter: "none",
-                  },
-                  icon: {
-                    width: "22px",
-                    height: "22px",
-                    "flex-shrink": "0",
-                    filter: "none",
-                  },
-                  text: {
-                    "font-size": "sm",
-                    color: "text-2",
-                    "line-height": "1.4",
-                  },
-                },
-                {
-                  icon: {
-                    filter: "none",
-                    width: "22px",
-                    height: "22px",
-                  },
-                  detailWrapper: {
-                    filter: "none",
-                    display: "flex",
-                    "column-gap": "sm",
-                  },
-                  text: {
-                    filter: "none",
-                  },
-                },
-                {
-                  icon: {
-                    filter: "none",
-                    height: "22px",
-                    width: "22px",
-                  },
-                  detailWrapper: {
-                    filter: "none",
-                    display: "flex",
-                    "column-gap": "sm",
-                  },
-                },
-              ],
-            };
-          }),
+        events_levoGroupItem: {
+          eventWrapper: {
+            "background-color": "white",
+            "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)",
+            display: "flex",
+            "flex-direction": "column",
+            "padding-bottom": "none",
+            height: "min-content",
+          },
+          image: {
+            width: "100%",
+            height: "auto",
+            "object-fit": "cover",
+            "min-height": "260px",
+            "max-height": "260px",
+          },
+          "content-wrapper": {
+            "padding-left": "xl",
+            "padding-right": "xl",
+            "padding-top": "lg",
+            "padding-bottom": "xl",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "base",
+            "background-color": "white",
+          },
+          title: {
+            "font-weight": "600",
+          },
+          description: {
+            "margin-bottom": "sm",
+            display: "none",
+            "-webkit-line-clamp": "3",
+            "-webkit-box-orient": "vertical",
+            overflow: "hidden",
+          },
+          details_container: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+          },
+          date_detail_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+          },
+          date_icon: {
+            width: "22px",
+            height: "22px",
+            "flex-shrink": "0",
+          },
+          date_text: {},
+          time_detail_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+          },
+          time_icon: {
+            width: "22px",
+            height: "22px",
+            "flex-shrink": "0",
+          },
+          time_text: {},
+          location_detail_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+          },
+          location_icon: {
+            width: "22px",
+            height: "22px",
+            "flex-shrink": "0",
+          },
+          location_text: {},
+          type_detail_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+          },
+          type_icon: {
+            width: "22px",
+            height: "22px",
+            "flex-shrink": "0",
+          },
+          type_text: {},
+        },
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -530,6 +639,132 @@ export const EventListing2: IBlock = {
             level: 2,
           },
         },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        "cta-buttons": [
+          {
+            "cta-button": {
+              selectedVariants: {},
+            },
+          },
+          {
+            "cta-button": {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+        events: [
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Body",
+              },
+            },
+            date_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            time_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            location_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            type_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+          },
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Body",
+              },
+            },
+            date_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            time_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            location_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            type_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+          },
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Body",
+              },
+            },
+            date_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            time_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            location_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            type_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+          },
+        ],
       },
     },
   ],