@levo-so/blocks 0.1.0 → 0.1.2

package/src/blocks/faq/faq-2.schema.ts

@@ -0,0 +1,356 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_IMAGE = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const 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",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+
+  // text and accordions wrapper
+  content_container: null,
+
+  // text wrapper
+  text_container: null,
+  faq_label: "FAQ's",
+  title: "Legal Queries Solved",
+
+  faqs: [
+    {
+      wrapper: null,
+      trigger: null,
+      content: null,
+      iconQuestionWrapper: null,
+      triggerIcon: DUMMY_IMAGE,
+      question: "How do I initiate a legal consultation with your team?",
+      answer:
+        "Simply reach out through our contact page, and our team will promptly schedule a confidential consultation to address your legal concerns",
+      media: FAQ_IMAGE,
+    },
+    {
+      wrapper: null,
+      trigger: null,
+      content: null,
+      iconQuestionWrapper: null,
+      triggerIcon: DUMMY_IMAGE,
+      question: "What areas of law does your firm specialize in?",
+      answer:
+        "Simply reach out through our contact page, and our team will promptly schedule a confidential consultation to address your legal concerns",
+      media: FAQ_IMAGE,
+    },
+    {
+      wrapper: null,
+      trigger: null,
+      content: null,
+      iconQuestionWrapper: null,
+      triggerIcon: DUMMY_IMAGE,
+      question: "How does your fee structure work?",
+      answer:
+        "Simply reach out through our contact page, and our team will promptly schedule a confidential consultation to address your legal concerns",
+      media: FAQ_IMAGE,
+    },
+    {
+      wrapper: null,
+      trigger: null,
+      content: null,
+      iconQuestionWrapper: null,
+      triggerIcon: DUMMY_IMAGE,
+      question: "What sets your legal team apart from others?",
+      answer:
+        "Simply reach out through our contact page, and our team will promptly schedule a confidential consultation to address your legal concerns",
+      media: FAQ_IMAGE,
+    },
+  ],
+
+  cta: "More about us",
+};
+
+export type IFaq2Content = typeof DEFAULT_CONTENT;
+
+export const Faq2: IBlock = {
+  category_id: "faqs",
+  title: "FAQ 2",
+  key: "faq-2",
+  version: "v1",
+  prompt_description:
+    "Two-column layout with a prominent FAQ heading and accordion-style list of questions on the left, paired with a large illustrative image on the right.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      // Layout widgets typically structure the page; no hint required unless the layout is content-driven.
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      // Outer container for spacing/alignment; no direct hint needed.
+    },
+    {
+      key: "content_container",
+      label: "Content Container",
+      field_interface: "BoxWidget",
+      // Section container; structural, not content-driven.
+    },
+    {
+      key: "text_container",
+      label: "Text Container",
+      field_interface: "BoxWidget",
+      // Container for stacked text; no content hint.
+    },
+    {
+      key: "faq_label",
+      label: "Label",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Section label introducing the FAQ block. Brief and clear, indicating this section is for frequently asked questions. Use a neutral, professional, approachable tone.",
+        min_characters: 4,
+        max_characters: 16,
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "The main headline for the FAQ section, reassuring visitors that their legal questions will be answered. Use a confident, helpful, and direct tone.",
+        min_characters: 16,
+        max_characters: 40,
+      },
+    },
+    {
+      key: "faqs",
+      label: "FAQs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Wrapper",
+          field_interface: "BoxWidget",
+          // Accordion item wrapper; no hint needed.
+        },
+        {
+          key: "trigger",
+          label: "Trigger",
+          field_interface: "BoxWidget",
+          // Container for question; no content hint.
+        },
+        {
+          key: "iconQuestionWrapper",
+          label: "Question Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "triggerIcon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon displayed next to each FAQ question, representing the expandable nature or category of the question.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "question",
+          label: "Question",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "A frequently asked legal question. Should be direct, clear, and phrased from the client's perspective. Professional, sincere tone.",
+            min_characters: 32,
+            max_characters: 90,
+          },
+        },
+        {
+          key: "content",
+          label: "Content",
+          field_interface: "BoxWidget",
+          // Content wrapper for the answer; no direct content hint.
+        },
+        {
+          key: "answer",
+          label: "Answer",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Concise, helpful answer to the legal FAQ. Reassure the client, provide next steps or informative details. Tone should be clear, supportive, and professional.",
+            min_characters: 56,
+            max_characters: 220,
+          },
+        },
+        {
+          key: "media",
+          label: "Media",
+          field_interface: "MediaWidget",
+          hint: {
+            prompt_description:
+              "A large, clean illustration or icon supporting the FAQ section visually. Typically abstract, law-related, or brand-aligned. Should convey trust and clarity, used as a visual balance opposite the FAQs.",
+            orientation: "portrait",
+            size: "large",
+            usecase: "other",
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A group of collapsible FAQ items, each featuring a legal question and informative answer for clients and site visitors.",
+        min_items: 4,
+        max_items: 8,
+      },
+    },
+    {
+      key: "cta",
+      label: "CTA",
+      field_interface: "ButtonWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          padding: "112px",
+          width: "100%",
+          tablet: {
+            padding: "50px",
+          },
+          mobile: {
+            padding: "40px",
+          },
+        },
+        container: {
+          display: "flex",
+          width: "100%",
+          "align-items": "center",
+          "justify-content": "between",
+          "column-gap": "12xl",
+          tablet: {
+            "column-gap": "6xl",
+          },
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        content_container: {
+          display: "flex",
+          flex: "1",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          tablet: {
+            "row-gap": "md",
+          },
+        },
+        text_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "md",
+          tablet: {
+            "row-gap": "2xs",
+          },
+        },
+        faq_image: {
+          height: "479px",
+          width: "356px",
+          tablet: {
+            width: "300px",
+            height: "403px",
+          },
+          mobile: {
+            display: "none",
+          },
+        },
+        faq_label: {
+          "font-size": "lg",
+          "font-weight": 600,
+          tablet: {
+            "font-size": "base",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          tablet: {
+            "font-size": "2xl",
+          },
+        },
+        cta: {
+          width: "fit-content",
+        },
+        faqs: Array(4)
+          .fill(4)
+          .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",
+                },
+              },
+              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",
+              },
+            };
+          }),
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

package/src/blocks/faq/faq-2.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Icon,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Button,
+  Media,
+} from "@levo-so/studio";
+
+import type { IFaq2Content } from "./faq-2.schema";
+
+const Faq2: React.FC<ILevoBlockBaseProps<IFaq2Content>> = ({ content }) => {
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+
+  const handleValueChange = (value: string | undefined) => {
+    if (typeof value === "string" && value.includes("-")) {
+      const parts = value.split("-");
+      if (parts.length > 1) {
+        const index = parseInt(parts?.[1] ?? "0", 10);
+        if (!isNaN(index)) {
+          setActiveIndex(index);
+        }
+      }
+    }
+  };
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="content_container">
+          <Box elementKey="text_container">
+            <Typography elementKey="faq_label" />
+            <Heading elementKey="title" />
+          </Box>
+
+          <AccordionRoot
+            type="single"
+            elementKey="faqs_levoGroup"
+            data-levo_group
+            defaultValue={`item-0`}
+            onValueChange={handleValueChange}
+          >
+            {(content.faqs ?? []).map((_, index) => (
+              <AccordionItem
+                value={`item-${index}`}
+                key={index}
+                elementKey={`faqs.${index}.wrapper`}
+                data-levo_group_item
+              >
+                <AccordionTrigger elementKey={`faqs.${index}.trigger`}>
+                  <Box elementKey={`faqs.${index}.iconQuestionWrapper`}>
+                    <Icon elementKey={`faqs.${index}.triggerIcon`} />
+                    <Typography elementKey={`faqs.${index}.question`} />
+                  </Box>
+                </AccordionTrigger>
+                <AccordionContent elementKey={`faqs.${index}.content`}>
+                  <Typography elementKey={`faqs.${index}.answer`} />
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </AccordionRoot>
+          <Button elementKey="cta" />
+        </Box>
+        <Media
+          elementKey={`faqs.${activeIndex}.media`}
+          width={356}
+          height={479}
+          alt={`FAQ ${activeIndex + 1} Media`}
+        />
+      </Container>
+    </Section>
+  );
+};
+
+export default Faq2;