@levo-so/blocks 0.1.58 → 0.1.60

package/src/blocks/blogs/blog-listing-2.tsx

@@ -72,21 +72,23 @@ const BlogListing2: React.FC<
             </Box>
           ))}
         </Box>
-        <Box elementKey="pagination-wrapper">
-          <Button
-            elementKey="pagination-left"
-            disabled={query?.page === 1}
-            onClick={handlePrevious}
-          />
-          <Typography elementKey="pagination-text">
-            {`${query?.page || 0}/${meta?.pages || 0}`}
-          </Typography>
-          <Button
-            elementKey="pagination-right"
-            onClick={handleNext}
-            disabled={query?.page === meta?.pages}
-          />
-        </Box>
+        {(meta?.pages || 0) > 1 && (
+          <Box elementKey="pagination-wrapper">
+            <Button
+              elementKey="pagination-left"
+              disabled={query?.page === 1}
+              onClick={handlePrevious}
+            />
+            <Typography elementKey="pagination-text">
+              {`${query?.page || 0}/${meta?.pages || 0}`}
+            </Typography>
+            <Button
+              elementKey="pagination-right"
+              onClick={handleNext}
+              disabled={query?.page === meta?.pages}
+            />
+          </Box>
+        )}
       </Container>
     </Section>
   );

package/src/blocks/blogs/blog-listing-3.tsx

@@ -61,21 +61,23 @@ const BlogListing3: React.FC<
             </Box>
           ))}
         </Box>
-        <Box elementKey="pagination-wrapper">
-          <Button
-            elementKey="pagination-left"
-            disabled={query?.page === 1}
-            onClick={handlePrevious}
-          />
-          <Typography elementKey="pagination-text">
-            {`${query?.page || 0}/${meta?.pages || 0}`}
-          </Typography>
-          <Button
-            elementKey="pagination-right"
-            onClick={handleNext}
-            disabled={query?.page === meta?.pages}
-          />
-        </Box>
+        {(meta?.pages || 0) > 1 && (
+          <Box elementKey="pagination-wrapper">
+            <Button
+              elementKey="pagination-left"
+              disabled={query?.page === 1}
+              onClick={handlePrevious}
+            />
+            <Typography elementKey="pagination-text">
+              {`${query?.page || 0}/${meta?.pages || 0}`}
+            </Typography>
+            <Button
+              elementKey="pagination-right"
+              onClick={handleNext}
+              disabled={query?.page === meta?.pages}
+            />
+          </Box>
+        )}
       </Container>
     </Section>
   );

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

@@ -63,13 +63,32 @@ const DEFAULT_CONTENT = {
             }),
       };
     }),
+  empty_state: null,
+  empty_state_icon: {
+    kind: "icon",
+    data: {
+      id: "calendar-1",
+      label: "Calendar 1",
+      tags: ["calendar", "custom", "time"],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 14.5001C8.37 14.5001 8.24 14.4701 8.12 14.4201C7.99 14.3701 7.89 14.3001 7.79 14.2101C7.61 14.0201 7.5 13.7701 7.5 13.5001C7.5 13.3701 7.53 13.2401 7.58 13.1201C7.63 13.0001 7.7 12.8901 7.79 12.7901C7.89 12.7001 7.99 12.6301 8.12 12.5801C8.48 12.4301 8.93 12.5101 9.21 12.7901C9.39 12.9801 9.5 13.2401 9.5 13.5001C9.5 13.5601 9.49 13.6301 9.48 13.7001C9.47 13.7601 9.45 13.8201 9.42 13.8801C9.4 13.9401 9.37 14.0001 9.33 14.0601C9.3 14.1101 9.25 14.1601 9.21 14.2101C9.02 14.3901 8.76 14.5001 8.5 14.5001Z" fill="var(--color-icon-primary)"/>\n<path d="M12 14.5C11.87 14.5 11.74 14.47 11.62 14.42C11.49 14.37 11.39 14.3 11.29 14.21C11.11 14.02 11 13.77 11 13.5C11 13.37 11.03 13.24 11.08 13.12C11.13 13 11.2 12.89 11.29 12.79C11.39 12.7 11.49 12.63 11.62 12.58C11.98 12.42 12.43 12.51 12.71 12.79C12.89 12.98 13 13.24 13 13.5C13 13.56 12.99 13.63 12.98 13.7C12.97 13.76 12.95 13.82 12.92 13.88C12.9 13.94 12.87 14 12.83 14.06C12.8 14.11 12.75 14.16 12.71 14.21C12.52 14.39 12.26 14.5 12 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 14.5C15.37 14.5 15.24 14.47 15.12 14.42C14.99 14.37 14.89 14.3 14.79 14.21C14.75 14.16 14.71 14.11 14.67 14.06C14.63 14 14.6 13.94 14.58 13.88C14.55 13.82 14.53 13.76 14.52 13.7C14.51 13.63 14.5 13.56 14.5 13.5C14.5 13.24 14.61 12.98 14.79 12.79C14.89 12.7 14.99 12.63 15.12 12.58C15.49 12.42 15.93 12.51 16.21 12.79C16.39 12.98 16.5 13.24 16.5 13.5C16.5 13.56 16.49 13.63 16.48 13.7C16.47 13.76 16.45 13.82 16.42 13.88C16.4 13.94 16.37 14 16.33 14.06C16.3 14.11 16.25 14.16 16.21 14.21C16.02 14.39 15.76 14.5 15.5 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 17.9999C8.37 17.9999 8.24 17.97 8.12 17.92C8 17.87 7.89 17.7999 7.79 17.7099C7.61 17.5199 7.5 17.2599 7.5 16.9999C7.5 16.8699 7.53 16.7399 7.58 16.6199C7.63 16.4899 7.7 16.38 7.79 16.29C8.16 15.92 8.84 15.92 9.21 16.29C9.39 16.48 9.5 16.7399 9.5 16.9999C9.5 17.2599 9.39 17.5199 9.21 17.7099C9.02 17.8899 8.76 17.9999 8.5 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 17.9999C11.74 17.9999 11.48 17.8899 11.29 17.7099C11.11 17.5199 11 17.2599 11 16.9999C11 16.8699 11.03 16.7399 11.08 16.6199C11.13 16.4899 11.2 16.38 11.29 16.29C11.66 15.92 12.34 15.92 12.71 16.29C12.8 16.38 12.87 16.4899 12.92 16.6199C12.97 16.7399 13 16.8699 13 16.9999C13 17.2599 12.89 17.5199 12.71 17.7099C12.52 17.8899 12.26 17.9999 12 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 18C15.24 18 14.98 17.89 14.79 17.71C14.7 17.62 14.63 17.51 14.58 17.38C14.53 17.26 14.5 17.13 14.5 17C14.5 16.87 14.53 16.74 14.58 16.62C14.63 16.49 14.7 16.38 14.79 16.29C15.02 16.06 15.37 15.95 15.69 16.02C15.76 16.03 15.82 16.05 15.88 16.08C15.94 16.1 16 16.13 16.06 16.17C16.11 16.2 16.16 16.25 16.21 16.29C16.39 16.48 16.5 16.74 16.5 17C16.5 17.26 16.39 17.52 16.21 17.71C16.02 17.89 15.76 18 15.5 18Z" fill="var(--color-icon-primary)"/>\n<path d="M20.5 9.83997H3.5C3.09 9.83997 2.75 9.49997 2.75 9.08997C2.75 8.67997 3.09 8.33997 3.5 8.33997H20.5C20.91 8.33997 21.25 8.67997 21.25 9.08997C21.25 9.49997 20.91 9.83997 20.5 9.83997Z" fill="var(--color-icon-primary)"/>\n<path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="var(--color-icon-primary)"/>\n</svg>',
+    },
+  },
+  empty_state_title: "No Events",
+  empty_state_description:
+    "There are no events scheduled for this month. Check back later or select a different month to view upcoming events.",
+  empty_state_cta: "Show All Events",
   calendar_section: null,
   calendar_header: null,
   calendar_title: "Events Calendar",
   calendar_description:
     "You can use the calendar to find the desired events and get the required information easily",
   calendar: null,
-  calendar_cta: "View all events",
+  calendar_ctas_levoGroup: null,
+  calendar_ctas: [
+    { calendar_cta: "View all events" },
+    { calendar_cta: "Search Events" },
+  ],
 };
 
 export type ICalendar1Content = typeof DEFAULT_CONTENT;
@@ -193,7 +212,31 @@ export const Calendar1: IBlock = {
         },
       ],
     },
-
+    {
+      key: "empty_state",
+      label: "Empty State",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "empty_state_icon",
+      label: "Empty State Icon",
+      field_interface: "IconWidget",
+    },
+    {
+      key: "empty_state_title",
+      label: "Empty State Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "empty_state_description",
+      label: "Empty State Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "empty_state_cta",
+      label: "Reset Calendar CTA",
+      field_interface: "ButtonWidget",
+    },
     {
       key: "calendar_section",
       label: "Calendar Section",
@@ -220,9 +263,17 @@ export const Calendar1: IBlock = {
       field_interface: "BoxWidget",
     },
     {
-      key: "calendar_cta",
-      label: "Calendar Cta",
-      field_interface: "ButtonWidget",
+      key: "calendar_ctas",
+      label: "Calendar CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "calendar_cta",
+          label: "Calendar Cta",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
   ],
   layouts: [
@@ -230,27 +281,8 @@ export const Calendar1: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          width: "100%",
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-          "padding-right": "8xl",
-          "padding-left": "8xl",
-          tablet: {
-            "padding-top": "5xl",
-            "padding-bottom": "5xl",
-            "padding-right": "5xl",
-            "padding-left": "5xl",
-          },
-          mobile: {
-            "padding-top": "2xl",
-            "padding-bottom": "2xl",
-            "padding-right": "2xl",
-            "padding-left": "2xl",
-          },
-        },
+        layout: {},
         container: {
-          width: "100%",
           display: "flex",
           "flex-direction": "column",
           "row-gap": "xl",
@@ -291,124 +323,153 @@ export const Calendar1: IBlock = {
         },
         listing_section: Array(ITEMS_COUNT)
           .fill(0)
-          .map((v) => {
-            return {
-              event: {
-                width: "100%",
-                display: "flex",
-                "padding-top": "3xl",
-                "padding-right": "3xl",
-                "padding-bottom": "3xl",
-                "padding-left": "xl",
-                "border-style": "solid",
-                "border-right-width": "0px",
-                "border-bottom-width": "0px",
-                "border-top-width": "0px",
-                "border-left-width": "8px",
-                "border-color": "brand",
-                "border-radius": "lg",
-                "box-shadow": {
-                  x: 0,
-                  y: 4,
-                  blur: 84,
-                  spread: 0,
-                  color: "oklch(0.5193 0.0628 284.0011 / 0.13)",
-                  opacity: 13,
-                },
-                mobile: {
-                  "flex-direction": "column",
-                  "row-gap": "md",
-                },
+          .map((v) => ({
+            event: {
+              width: "100%",
+              display: "flex",
+              "padding-top": "3xl",
+              "padding-right": "3xl",
+              "padding-bottom": "3xl",
+              "padding-left": "xl",
+              "border-style": "solid",
+              "border-right-width": "0px",
+              "border-bottom-width": "0px",
+              "border-top-width": "0px",
+              "border-left-width": "8px",
+              "border-color": "brand",
+              "border-radius": "lg",
+              "box-shadow": {
+                x: 0,
+                y: 4,
+                blur: 84,
+                spread: 0,
+                color: "oklch(0.5193 0.0628 284.0011 / 0.13)",
+                opacity: 13,
               },
-              event_timing: {
-                display: "flex",
+              mobile: {
                 "flex-direction": "column",
-                "min-width": "95px",
-                "justify-content": "center",
-                "align-items": "center",
-                mobile: {
-                  "flex-direction": "row",
-                  "justify-content": "flex-start",
-                  "column-gap": "xs",
-                },
-              },
-              event_to: {
-                "font-weight": 600,
-                "margin-top": "4xs",
-                "margin-bottom": "4xs",
-                mobile: {
-                  "padding-right": "none",
-                  "margin-right": "xs",
-                },
-              },
-              event_starts: {
-                display: "flex",
-                "flex-direction": "column",
-                "margin-bottom": "3xs",
-                mobile: {
-                  "margin-bottom": "none",
-                  "align-items": "flex-start",
-                },
-              },
-              event_starts_date: {
-                "text-align": "center",
-              },
-              event_starts_month: {
-                "text-align": "center",
-                "font-weight": 600,
+                "row-gap": "md",
               },
-              event_ends_date: {
-                "text-align": "center",
+            },
+            event_timing: {
+              display: "flex",
+              "flex-direction": "column",
+              "min-width": "95px",
+              "justify-content": "center",
+              "align-items": "center",
+              mobile: {
+                "flex-direction": "row",
+                "justify-content": "flex-start",
+                "column-gap": "xs",
               },
-              event_ends_month: {
-                "text-align": "center",
-                "font-weight": 600,
+            },
+            event_to: {
+              "font-weight": 600,
+              "margin-top": "4xs",
+              "margin-bottom": "4xs",
+              mobile: {
+                "padding-right": "none",
+                "margin-right": "xs",
               },
-              divider: {
-                "margin-left": "2xs",
-                "margin-right": "3xl",
-                "border-style": "solid",
-                "border-top-width": "0px",
-                "border-right-width": "0px",
-                "border-bottom-width": "0px",
-                "border-left-width": "1px",
-                mobile: {
-                  display: "none",
-                },
+            },
+            event_starts: {
+              display: "flex",
+              "flex-direction": "column",
+              "margin-bottom": "3xs",
+              mobile: {
+                "margin-bottom": "none",
+                "align-items": "flex-start",
               },
-              event_description: {
-                "font-weight": 500,
-                mobile: {
-                  "font-size": "sm",
-                },
+            },
+            event_starts_date: {
+              "text-align": "center",
+            },
+            event_starts_month: {
+              "text-align": "center",
+              "font-weight": 600,
+            },
+            event_ends_date: {
+              "text-align": "center",
+            },
+            event_ends_month: {
+              "text-align": "center",
+              "font-weight": 600,
+            },
+            divider: {
+              "margin-left": "2xs",
+              "margin-right": "3xl",
+              "border-style": "solid",
+              "border-top-width": "0px",
+              "border-right-width": "0px",
+              "border-bottom-width": "0px",
+              "border-left-width": "1px",
+              mobile: {
+                display: "none",
               },
-              event_content: {
-                "align-self": "center",
-                width: "100%",
-                display: "flex",
-                "flex-direction": "column",
-                "row-gap": "md",
+            },
+            event_description: {
+              "font-weight": 500,
+            },
+            event_content: {
+              "align-self": "center",
+              width: "100%",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "md",
+            },
+            event_category: {
+              "font-weight": 800,
+              color: "brand",
+            },
+            event_sub_content: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "2xs",
+            },
+            event_ends: {
+              display: "flex",
+              "flex-direction": "column",
+              "margin-bottom": "3xs",
+              mobile: {
+                "margin-bottom": "none",
+                "align-items": "flex-start",
               },
-              event_category: {
-                "font-weight": 800,
-                color: "brand",
-              },
-              event_sub_content: {
-                display: "flex",
-                "flex-direction": "column",
-                "row-gap": "2xs",
-              },
-              event_ends: {
-                display: "flex",
-                "flex-direction": "column",
-                "margin-bottom": "3xs",
-                mobile: {
-                  "margin-bottom": "none",
-                  "align-items": "flex-start",
-                },
-              },
-            };
-          }),
+            },
+            event_title: {
+              "font-weight": 800,
+            },
+          })),
+        empty_state: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "justify-content": "center",
+          "text-align": "center",
+          "padding-top": "64px",
+          "padding-right": "32px",
+          "padding-bottom": "64px",
+          "padding-left": "32px",
+          "min-height": "300px",
+          width: "100%",
+        },
+        empty_state_icon: {
+          "font-size": "64px",
+          "margin-bottom": "24px",
+          opacity: 0.3,
+        },
+        empty_state_title: {
+          "font-size": "24px",
+          "font-weight": 600,
+          "margin-bottom": "16px",
+        },
+        empty_state_description: {
+          "font-size": "16px",
+          opacity: 0.7,
+          "max-width": "400px",
+          "line-height": 1.6,
+          "margin-bottom": "24px",
+        },
+        empty_state_cta: {},
         calendar_section: {
           width: "100%",
           display: "flex",
@@ -448,7 +509,14 @@ export const Calendar1: IBlock = {
           "border-width": "1px",
           "border-color": "oklch(0.9401 0 0)",
         },
-        calendar_cta: {},
+        calendar_ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+        },
+        calendar_ctas: Array(2)
+          .fill(0)
+          .map(() => ({ calendar_cta: {} })),
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -470,7 +538,7 @@ export const Calendar1: IBlock = {
             level: "3",
           },
           selectedVariants: {
-            Heading_Level: "H5",
+            Heading_Level: "H4",
           },
         },
         calendar_description: {
@@ -480,57 +548,71 @@ export const Calendar1: IBlock = {
         },
         listing_section: Array(ITEMS_COUNT)
           .fill(0)
-          .map(() => {
-            return {
-              event_to: {
-                selectedVariants: {
-                  Typography_Variants: "Small",
-                },
+          .map((v) => ({
+            event_to: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            event_ends_month: {
+              selectedVariants: {
+                Typography_Variants: "Body",
+              },
+            },
+            event_starts_month: {
+              selectedVariants: {
+                Typography_Variants: "Body",
               },
-              event_ends_month: {
-                selectedVariants: {
-                  Typography_Variants: "Body",
-                },
+            },
+            event_starts_date: {
+              selectedVariants: {
+                Heading_Level: "H2",
               },
-              event_starts_month: {
-                selectedVariants: {
-                  Typography_Variants: "Body",
-                },
+              heading: {
+                level: "4",
               },
-              event_starts_date: {
-                selectedVariants: {
-                  Heading_Level: "H2",
-                },
-                heading: {
-                  level: "4",
-                },
+            },
+            event_ends_date: {
+              selectedVariants: {
+                Heading_Level: "H2",
               },
-              event_ends_date: {
-                selectedVariants: {
-                  Heading_Level: "H2",
-                },
-                heading: {
-                  level: "4",
-                },
+              heading: {
+                level: "4",
               },
-              event_category: {
-                heading: {
-                  level: "4",
-                },
-                selectedVariants: {
-                  Heading_Level: "H6",
-                },
+            },
+            event_category: {
+              heading: {
+                level: "4",
               },
-              event_title: {
-                heading: {
-                  level: "3",
-                },
-                selectedVariants: {
-                  Heading_Level: "H5",
-                },
+              selectedVariants: {
+                Heading_Level: "H6",
               },
-            };
-          }),
+            },
+            event_title: {
+              heading: {
+                level: "3",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            event_description: {
+              selectedVariants: {},
+            },
+          })),
+        empty_state_title: {
+          heading: {
+            level: "3",
+          },
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+        },
+        empty_state_description: {
+          selectedVariants: {
+            Typography_Variants: "Body",
+          },
+        },
       },
     },
   ],