@levo-so/blocks 0.3.13 → 0.3.15

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

@@ -3,8 +3,7 @@ import type { IBlock } from "@levo-so/studio";
 const HERO_IMAGE = {
   id: "7453352427682930486",
   kind: "image",
-  location:
-    "https://images.pexels.com/photos/5686124/pexels-photo-5686124.jpeg",
+  location: "https://images.pexels.com/photos/5686124/pexels-photo-5686124.jpeg",
   mimetype: "image/jpeg",
   srcset: {
     "320w":
@@ -150,14 +149,14 @@ const DEFAULT_CONTENT = {
     },
   ],
 
+  // Sidebar Embed
+  sidebar_embed:
+    '<div class="sidebar-video-container"><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube Video 1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><iframe src="https://www.youtube.com/embed/L_LUpnjgPso" title="YouTube Video 2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><iframe src="https://www.youtube.com/embed/3JZ_D3ELwOQ" title="YouTube Video 3" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div><style>.sidebar-video-container { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } .sidebar-video-container iframe { width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; box-sizing: border-box; display: block; }</style>',
+
   // Social section
   social_section: null,
   social_title: "Share this role",
-  social_icons: [
-    { icon: ICON_LINKEDIN },
-    { icon: ICON_TWITTER },
-    { icon: ICON_FACEBOOK },
-  ],
+  social_icons: [{ icon: ICON_LINKEDIN }, { icon: ICON_TWITTER }, { icon: ICON_FACEBOOK }],
 
   // Job content
   job_content: null,
@@ -331,8 +330,7 @@ export const Jobs1: IBlock = {
       label: "Hero Image (Mobile)",
       field_interface: "MediaWidget",
       hint: {
-        prompt_description:
-          "Optimized version of the hero image for mobile screens.",
+        prompt_description: "Optimized version of the hero image for mobile screens.",
         orientation: "portrait",
         size: "medium",
         usecase: "hero",
@@ -363,8 +361,7 @@ export const Jobs1: IBlock = {
       label: "Details Content Wrapper",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Main wrapper for the two-column layout of job details.",
+        prompt_description: "Main wrapper for the two-column layout of job details.",
       },
     },
 
@@ -374,8 +371,7 @@ export const Jobs1: IBlock = {
       label: "Sidebar",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Left sidebar container for job info cards and social sharing.",
+        prompt_description: "Left sidebar container for job info cards and social sharing.",
       },
     },
     {
@@ -410,8 +406,7 @@ export const Jobs1: IBlock = {
           field_interface: "BoxWidget",
           kind: "group",
           hint: {
-            prompt_description:
-              "Repeatable label-value pairs for job information.",
+            prompt_description: "Repeatable label-value pairs for job information.",
           },
           fields: [
             {
@@ -436,8 +431,7 @@ export const Jobs1: IBlock = {
               label: "Value",
               field_interface: "TypographyWidget",
               hint: {
-                prompt_description:
-                  "Value for the job attribute (e.g., Full-time, 3-5 years).",
+                prompt_description: "Value for the job attribute (e.g., Full-time, 3-5 years).",
                 usecase: "description",
                 min_characters: 3,
                 max_characters: 50,
@@ -450,8 +444,7 @@ export const Jobs1: IBlock = {
           label: "Card Button",
           field_interface: "ButtonWidget",
           hint: {
-            prompt_description:
-              "Call-to-action button for the card (e.g., Apply Now).",
+            prompt_description: "Call-to-action button for the card (e.g., Apply Now).",
             usecase: "button",
             min_characters: 5,
             max_characters: 20,
@@ -460,6 +453,17 @@ export const Jobs1: IBlock = {
       ],
     },
 
+    // Sidebar Embed
+    {
+      key: "sidebar_embed",
+      label: "Sidebar Video Embed",
+      field_interface: "IframeWidget",
+      hint: {
+        prompt_description:
+          "Embedded video or custom HTML widget displayed in the left sidebar below job overview card.",
+      },
+    },
+
     // Social section
     {
       key: "social_section",
@@ -486,8 +490,7 @@ export const Jobs1: IBlock = {
       field_interface: "BoxWidget",
       kind: "group",
       hint: {
-        prompt_description:
-          "Social media platform icons for sharing the job listing.",
+        prompt_description: "Social media platform icons for sharing the job listing.",
       },
       fields: [
         {
@@ -510,8 +513,7 @@ export const Jobs1: IBlock = {
       label: "Job Content Area",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Main job content area containing meta info and description.",
+        prompt_description: "Main job content area containing meta info and description.",
       },
     },
 
@@ -521,8 +523,7 @@ export const Jobs1: IBlock = {
       label: "Job Meta Information",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for job metadata like department, location, and dates.",
+        prompt_description: "Container for job metadata like department, location, and dates.",
       },
     },
     {
@@ -570,8 +571,7 @@ export const Jobs1: IBlock = {
       label: "Meta Details",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for posting date and application deadline.",
+        prompt_description: "Container for posting date and application deadline.",
       },
     },
     {
@@ -784,6 +784,7 @@ export const Jobs1: IBlock = {
             width: "100%",
           },
           "max-width": "256px",
+          "min-width": "0",
         },
         info_cards_levoGroup: {
           display: "flex",
@@ -839,6 +840,13 @@ export const Jobs1: IBlock = {
             items: [{}, {}, {}, {}],
           },
         ],
+        sidebar_embed: {
+          width: "100%",
+          "max-width": "100%",
+          "overflow-x": "hidden",
+          "overflow-y": "hidden",
+          height: "fit-content",
+        },
         social_section: {
           "padding-top": "xl",
           "border-top": "1px solid",

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

@@ -7,6 +7,7 @@ import {
   Form,
   Heading,
   Icon,
+  Iframe,
   Image,
   Section,
   Typography,
@@ -84,6 +85,8 @@ const Jobs1: React.FC<ILevoBlockBaseProps<IJobs1Content>> = ({ content }) => (
                 </Box>
               ))}
             </Box>
+            {/* Sidebar Embed Widget */}
+            <Iframe elementKey="sidebar_embed" />
             {/* Social Media Icons */}
             <Box elementKey="social_section">
               <Heading elementKey="social_title" />

package/src/blocks/services/service-2.tsx

@@ -52,6 +52,7 @@ const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({ content, co
             </Box>
             <Box elementKey="search_input_wrapper">
               <input
+                aria-label="Search"
                 value={zipcode}
                 onChange={(e) => setZipcode(e.target.value)}
                 name="search"

package/src/blocks/tabs/tab-1.tsx

@@ -79,7 +79,10 @@ const Tab1: React.FC<ILevoBlockBaseProps<ITab1Content>> = ({ content }) => {
                       >
                         <AccordionTrigger elementKey={`tabs.${index}.faqs.${faqIndex}.trigger`}>
                           <Box elementKey={`tabs.${index}.faqs.${faqIndex}.iconQuestionWrapper`}>
-                            <Icon elementKey={`tabs.${index}.faqs.${faqIndex}.triggerIcon`} />
+                            <Icon
+                              aria-label="FAQ icon"
+                              elementKey={`tabs.${index}.faqs.${faqIndex}.triggerIcon`}
+                            />
                             <Heading elementKey={`tabs.${index}.faqs.${faqIndex}.question`} />
                           </Box>
                         </AccordionTrigger>