import { defineBlock } from "@wabbit/tome-blocks-core/defineBlock";
import { highImpactHeroMeta } from "./meta";
import {
  FixedToolbarFeature,
  HeadingFeature,
  InlineToolbarFeature,
  lexicalEditor
} from "@payloadcms/richtext-lexical";
import { highImpactHeroVariants } from "./variants";
const highImpactHeroBlock = defineBlock(
  highImpactHeroMeta,
  (config) => {
    const mediaCollection = config?.mediaCollection ?? "media";
    const linkableCollections = config?.linkableCollections ?? ["pages"];
    return {
      slug: "highImpactHero",
      interfaceName: "HighImpactHeroBlock",
      labels: { singular: "High Impact Hero", plural: "High Impact Heroes" },
      fields: [
        {
          name: "orientation",
          type: "select",
          defaultValue: "left",
          label: "Orientation",
          options: [
            { label: "Left", value: "left" },
            { label: "Center", value: "center" },
            { label: "Right", value: "right" }
          ],
          required: true
        },
        {
          name: "eyebrow",
          type: "text",
          label: "Eyebrow"
        },
        {
          name: "headline",
          type: "text",
          label: "Headline"
        },
        {
          name: "headlineSize",
          type: "select",
          label: "Headline Size",
          defaultValue: "large",
          options: [
            { label: "Small", value: "small" },
            { label: "Medium", value: "medium" },
            { label: "Large", value: "large" },
            { label: "Extra Large", value: "extraLarge" }
          ],
          admin: { width: "33%" }
        },
        {
          name: "subheadline",
          type: "text",
          label: "Subheadline"
        },
        {
          name: "subheadlineSize",
          type: "select",
          label: "Subheadline Size",
          defaultValue: "medium",
          options: [
            { label: "Small", value: "small" },
            { label: "Medium", value: "medium" },
            { label: "Large", value: "large" }
          ],
          admin: { width: "33%" }
        },
        {
          name: "description",
          type: "richText",
          label: "Description",
          editor: lexicalEditor({
            features: ({ rootFeatures }) => [
              ...rootFeatures,
              HeadingFeature({ enabledHeadingSizes: ["h3", "h4"] }),
              FixedToolbarFeature(),
              InlineToolbarFeature()
            ]
          })
        },
        {
          name: "descriptionSize",
          type: "select",
          label: "Description Size",
          defaultValue: "medium",
          options: [
            { label: "Small", value: "small" },
            { label: "Medium", value: "medium" },
            { label: "Large", value: "large" }
          ],
          admin: { width: "34%" }
        },
        {
          name: "spacing",
          type: "select",
          label: "Element Spacing",
          defaultValue: "normal",
          options: [
            { label: "Tight", value: "tight" },
            { label: "Normal", value: "normal" },
            { label: "Loose", value: "loose" },
            { label: "Extra Loose", value: "extraLoose" }
          ],
          admin: {
            description: "Control the vertical spacing between hero elements",
            width: "50%"
          }
        },
        {
          name: "reviews",
          type: "group",
          label: "Reviews & Social Proof",
          fields: [
            {
              name: "showReviews",
              type: "checkbox",
              label: "Show Reviews",
              defaultValue: false
            },
            {
              name: "rating",
              type: "number",
              label: "Rating",
              min: 0,
              max: 5,
              defaultValue: 5,
              admin: {
                condition: (_, { showReviews } = {}) => showReviews,
                step: 0.1,
                width: "50%"
              }
            },
            {
              name: "reviewCount",
              type: "number",
              label: "Review Count",
              defaultValue: 100,
              admin: {
                condition: (_, { showReviews } = {}) => showReviews,
                width: "50%"
              }
            },
            {
              name: "avatars",
              type: "array",
              label: "Review Avatars",
              maxRows: 5,
              admin: {
                condition: (_, { showReviews } = {}) => showReviews,
                description: "Add up to 5 customer avatars"
              },
              fields: [
                {
                  name: "avatar",
                  type: "upload",
                  relationTo: mediaCollection,
                  required: true,
                  label: "Avatar Image"
                },
                {
                  name: "altText",
                  type: "text",
                  label: "Alt Text",
                  admin: { description: "Describe the person for accessibility" }
                }
              ]
            }
          ]
        },
        {
          name: "links",
          type: "array",
          maxRows: 2,
          fields: [
            {
              name: "link",
              type: "group",
              fields: [
                {
                  name: "type",
                  type: "radio",
                  defaultValue: "reference",
                  options: [
                    { label: "Internal link", value: "reference" },
                    { label: "Custom URL", value: "custom" }
                  ],
                  admin: { layout: "horizontal" }
                },
                {
                  name: "reference",
                  type: "relationship",
                  relationTo: linkableCollections,
                  admin: { condition: (_, s) => s?.type === "reference" }
                },
                {
                  name: "url",
                  type: "text",
                  admin: { condition: (_, s) => s?.type === "custom" }
                },
                { name: "label", type: "text", required: true },
                { name: "newTab", type: "checkbox", label: "Open in new tab" },
                {
                  name: "appearance",
                  type: "select",
                  defaultValue: "default",
                  options: [
                    { label: "Default", value: "default" },
                    { label: "Outline", value: "outline" }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: "backgroundOptions",
          type: "group",
          label: "Background Options",
          fields: [
            {
              name: "backgroundType",
              type: "radio",
              label: "Background Type",
              defaultValue: "color",
              options: [
                { label: "Color", value: "color" },
                { label: "Image", value: "image" }
              ],
              required: true
            },
            {
              name: "backgroundColor",
              type: "text",
              label: "Background Color",
              admin: {
                condition: (_, { backgroundType } = {}) => backgroundType === "color",
                description: "Enter a valid CSS color value."
              }
            },
            {
              name: "backgroundImage",
              type: "upload",
              relationTo: mediaCollection,
              label: "Background Image",
              admin: {
                condition: (_, { backgroundType } = {}) => backgroundType === "image"
              }
            },
            {
              name: "backgroundColorBehindImage",
              type: "text",
              label: "Background Color Behind Image",
              admin: {
                condition: (_, { backgroundType } = {}) => backgroundType === "image",
                description: "Optional color behind background image (useful for transparent SVGs)."
              }
            },
            {
              name: "backgroundImageFit",
              type: "select",
              label: "Background Image Fit",
              defaultValue: "cover",
              admin: {
                condition: (_, { backgroundType } = {}) => backgroundType === "image",
                width: "50%"
              },
              options: [
                { label: "Cover (fill, may crop)", value: "cover" },
                { label: "Contain (fit entirely)", value: "contain" },
                { label: "Fill (stretch)", value: "fill" },
                { label: "Scale Down", value: "scale-down" },
                { label: "None (original size)", value: "none" }
              ]
            },
            {
              name: "backgroundImageAlignment",
              type: "select",
              label: "Background Image Alignment",
              defaultValue: "center",
              admin: {
                condition: (_, { backgroundType } = {}) => backgroundType === "image",
                width: "50%"
              },
              options: [
                { label: "Top", value: "top" },
                { label: "Center", value: "center" },
                { label: "Bottom", value: "bottom" }
              ]
            },
            {
              name: "enableGradientOverlay",
              type: "checkbox",
              label: "Enable Gradient Overlay",
              defaultValue: true,
              admin: {
                condition: (_, { backgroundType } = {}) => backgroundType === "image",
                description: "Dark gradient overlay for text readability."
              }
            }
          ]
        },
        {
          name: "supportingImages",
          type: "array",
          label: "Supporting Images",
          maxRows: 3,
          admin: { description: "Add up to 3 supporting images" },
          fields: [
            {
              name: "image",
              type: "upload",
              relationTo: mediaCollection,
              required: true,
              label: "Image"
            },
            {
              name: "altText",
              type: "text",
              label: "Alt Text",
              admin: { description: "Describe the image for accessibility" }
            },
            { name: "caption", type: "text", label: "Caption" }
          ]
        },
        {
          name: "characterImage",
          type: "upload",
          relationTo: mediaCollection,
          label: "Character Illustration",
          admin: {
            condition: (data) => data?._variant === "illustrationHero",
            description: "Bold character illustration for the felt-world hero. Positioned per Character Position."
          }
        },
        {
          name: "characterPosition",
          type: "select",
          label: "Character Position",
          defaultValue: "right",
          options: [
            { label: "Left", value: "left" },
            { label: "Right", value: "right" },
            { label: "Center (behind text)", value: "center" }
          ],
          admin: {
            condition: (data) => data?._variant === "illustrationHero",
            description: "Where the character illustration is placed relative to the headline."
          }
        },
        {
          name: "enableMarquee",
          label: "Enable Marquee?",
          type: "checkbox",
          defaultValue: false,
          admin: {
            description: "Add a scrolling text marquee at the bottom of the hero."
          }
        },
        {
          name: "marqueeSettings",
          label: "Marquee Settings",
          type: "group",
          admin: {
            condition: (_, siblingData) => siblingData?.enableMarquee
          },
          fields: [
            {
              name: "text",
              label: "Marquee Text",
              type: "text",
              admin: { description: "The text that will scroll in the marquee." }
            },
            {
              name: "speed",
              label: "Scroll Speed",
              type: "number",
              defaultValue: 1,
              min: 0.1,
              max: 5,
              admin: {
                description: "Speed multiplier (1 is default).",
                step: 0.1,
                width: "50%"
              }
            },
            {
              name: "size",
              label: "Text Size",
              type: "select",
              defaultValue: "medium",
              options: [
                { label: "Small", value: "small" },
                { label: "Medium", value: "medium" },
                { label: "Large", value: "large" }
              ],
              admin: {
                description: "Adjust the visual size of the marquee text.",
                width: "50%"
              }
            }
          ]
        }
      ]
    };
  },
  highImpactHeroVariants
);
export {
  highImpactHeroBlock
};
//# sourceMappingURL=index.js.map
The marketing platform that ships with you

Install
