feat: add minHeight and separate heading/body color controls to FDHeroBlock

src/blocks/FDHeroBlock/Component.tsx

@@ -3,6 +3,14 @@ import type { FDHeroBlock as FDHeroBlockProps, Media } from '@/payload-types'
 import { FDButton } from '@/components/FDButton'
 import { FDImage } from '@/components/FDImage'
 
+const minHeightMap: Record<string, string> = {
+  auto:   '',
+  sm:     '400px',
+  md:     '560px',
+  lg:     '720px',
+  screen: '100vh',
+}
+
 export const FDHeroBlockComponent: React.FC<FDHeroBlockProps> = ({
   heading,
   subheading,
@@ -12,8 +20,10 @@ export const FDHeroBlockComponent: React.FC<FDHeroBlockProps> = ({
   secondaryCtaText,
   secondaryCtaLink = '#',
   backgroundImage,
+  minHeight = 'auto',
   overlayOpacity = '50',
-  textColor = 'auto',
+  headingColor: headingColorProp = 'auto',
+  bodyColor: bodyColorProp = 'auto',
   theme = 'light',
   anchorId,
 }) => {
@@ -21,29 +31,36 @@ export const FDHeroBlockComponent: React.FC<FDHeroBlockProps> = ({
   const hasBgImage = Boolean(media?.url)
   const isDark = hasBgImage || theme === 'dark'
 
-  let headingColor: string
-  let textBodyColor: string
-  if (textColor === 'white') {
-    headingColor = 'text-white'
-    textBodyColor = 'text-white'
-  } else if (textColor === 'navy') {
-    headingColor = 'text-fd-navy'
-    textBodyColor = 'text-fd-navy'
-  } else {
-    headingColor = isDark ? 'text-fd-yellow' : 'text-fd-navy dark:text-fd-yellow'
-    textBodyColor = isDark ? 'text-white'     : 'text-fd-navy dark:text-white'
+  const headingColorMap: Record<string, string> = {
+    auto:   isDark ? 'text-fd-yellow' : 'text-fd-navy dark:text-fd-yellow',
+    yellow: 'text-fd-yellow',
+    white:  'text-white',
+    navy:   'text-fd-navy',
   }
 
+  const bodyColorMap: Record<string, string> = {
+    auto:   isDark ? 'text-white' : 'text-fd-navy dark:text-white',
+    white:  'text-white',
+    navy:   'text-fd-navy',
+    yellow: 'text-fd-yellow',
+  }
+
+  const headingColor = headingColorMap[headingColorProp || 'auto']
+  const textBodyColor = bodyColorMap[bodyColorProp || 'auto']
+
   const overlayClass =
     overlayOpacity === '30' ? 'bg-black/30' : overlayOpacity === '70' ? 'bg-black/70' : 'bg-black/50'
 
-  const secondaryOnDark = textColor === 'navy' ? false : isDark
+  const secondaryOnDark = isDark
+
+  const minHeightStyle = minHeightMap[minHeight || 'auto']
 
   return (
     <section id={anchorId || undefined}
       className={`relative w-full py-16 md:py-20 lg:py-[99px] ${
         hasBgImage ? '' : isDark ? 'bg-fd-navy' : 'bg-white dark:bg-fd-navy'
       } overflow-hidden`}
+      style={minHeightStyle ? { minHeight: minHeightStyle } : undefined}
     >
       {/* Priority #2: Use FDImage instead of raw <img> for Next.js optimization */}
       {hasBgImage && media && (

src/blocks/FDHeroBlock/config.ts

@@ -71,6 +71,23 @@ export const FDHeroBlock: Block = {
         description: 'Fullbreddsbild bakom texten. Lämna tom för enfärgad bakgrund.',
       },
     },
+    {
+      name: 'minHeight',
+      type: 'select',
+      label: 'Minsta höjd',
+      defaultValue: 'auto',
+      admin: {
+        condition: (_, siblingData) => Boolean(siblingData?.backgroundImage),
+        description: 'Kontrollerar sektionens minsta höjd när bakgrundsbild används',
+      },
+      options: [
+        { label: 'Auto (baserat på innehåll)', value: 'auto' },
+        { label: 'Liten (400px)', value: 'sm' },
+        { label: 'Medium (560px)', value: 'md' },
+        { label: 'Stor (720px)', value: 'lg' },
+        { label: 'Helskärm (100vh)', value: 'screen' },
+      ],
+    },
     {
       name: 'overlayOpacity',
       type: 'select',
@@ -87,14 +104,27 @@ export const FDHeroBlock: Block = {
       ],
     },
     {
-      name: 'textColor',
+      name: 'headingColor',
       type: 'select',
-      label: 'Textfärg',
+      label: 'Rubrikfärg',
       defaultValue: 'auto',
       options: [
-        { label: 'Automatisk (baserat på tema)', value: 'auto' },
+        { label: 'Automatisk (gul på mörkt, navy på ljust)', value: 'auto' },
+        { label: 'Gul', value: 'yellow' },
         { label: 'Vit', value: 'white' },
-        { label: 'Blå (navy)', value: 'navy' },
+        { label: 'Navy', value: 'navy' },
+      ],
+    },
+    {
+      name: 'bodyColor',
+      type: 'select',
+      label: 'Brödtextfärg',
+      defaultValue: 'auto',
+      options: [
+        { label: 'Automatisk (vit på mörkt, navy på ljust)', value: 'auto' },
+        { label: 'Vit', value: 'white' },
+        { label: 'Navy', value: 'navy' },
+        { label: 'Gul', value: 'yellow' },
       ],
     },
     {