From 80be2c409851a3b267f873f606701d6dbddea2c5 Mon Sep 17 00:00:00 2001 From: Jeffrey Date: Thu, 19 Feb 2026 20:30:43 +0100 Subject: [PATCH] feat: add FDButton component, fix button hover on navy, make CTA image optional --- src/blocks/FDCtaSideImageBlock/Component.tsx | 88 +++++++------------ .../FDFeatureAnnouncementBlock/Component.tsx | 25 +++--- src/blocks/FDHeroBlock/Component.tsx | 25 +++--- .../FDHeroBlock/FDHeroBlock-Component.tsx | 64 -------------- src/blocks/FDPricingCardBlock/Component.tsx | 72 +++++++++------ src/blocks/FDWideCardBlock/Component.tsx | 59 +++++++------ src/components/FDButton.tsx | 43 +++++++++ tsconfig.tsbuildinfo | 2 +- 8 files changed, 179 insertions(+), 199 deletions(-) delete mode 100644 src/blocks/FDHeroBlock/FDHeroBlock-Component.tsx create mode 100644 src/components/FDButton.tsx diff --git a/src/blocks/FDCtaSideImageBlock/Component.tsx b/src/blocks/FDCtaSideImageBlock/Component.tsx index 5517341..0b36e0d 100644 --- a/src/blocks/FDCtaSideImageBlock/Component.tsx +++ b/src/blocks/FDCtaSideImageBlock/Component.tsx @@ -2,19 +2,7 @@ import React from 'react' import type { FDCtaSideImageBlock as FDCtaSideImageBlockProps } from '@/payload-types' import type { Media } from '@/payload-types' import { FDImage } from '@/components/FDImage' - -const overlayColorMap: Record = { - navy: 'bg-fd-navy', - yellow: 'bg-fd-yellow', - black: 'bg-black', -} - -const overlayOpacityMap: Record = { - '20': 'opacity-20', - '30': 'opacity-30', - '50': 'opacity-50', - '70': 'opacity-70', -} +import { FDButton } from '@/components/FDButton' export const FDCtaSideImageBlockComponent: React.FC = ({ heading, @@ -24,69 +12,61 @@ export const FDCtaSideImageBlockComponent: React.FC = image, imagePosition = 'right', theme = 'dark', - customBackgroundColor, - customTextLight = true, - imageOverlay = 'none', - imageOverlayOpacity = '30', }) => { - const isCustom = theme === 'custom' - const isDark = isCustom ? customTextLight : theme === 'dark' - const media = image as Media - - let sectionBg: string - let sectionStyle: React.CSSProperties = {} - if (isCustom && customBackgroundColor) { - sectionStyle = { backgroundColor: customBackgroundColor } - sectionBg = '' - } else { - sectionBg = isDark ? 'bg-fd-navy' : 'bg-white' - } - - const hasOverlay = imageOverlay && imageOverlay !== 'none' - const overlayColor = overlayColorMap[imageOverlay || ''] || '' - const overlayOpacity = overlayOpacityMap[imageOverlayOpacity || '30'] || 'opacity-30' + const isDark = theme === 'dark' + const hasImage = !!image const textContent = ( -
+
-

+

{heading}

-

+

{body}

+ {ctaText && ( - + {ctaText} - + )}
) - const imageContent = media?.url ? ( -
+ const imageContent = hasImage ? ( +
- {hasOverlay && ( - ) : null return ( -
+
- {imagePosition === 'left' ? <>{imageContent}{textContent} : <>{textContent}{imageContent}} + {imagePosition === 'left' ? ( + <> + {imageContent} + {textContent} + + ) : ( + <> + {textContent} + {imageContent} + + )}
) diff --git a/src/blocks/FDFeatureAnnouncementBlock/Component.tsx b/src/blocks/FDFeatureAnnouncementBlock/Component.tsx index 7973b25..10c408e 100644 --- a/src/blocks/FDFeatureAnnouncementBlock/Component.tsx +++ b/src/blocks/FDFeatureAnnouncementBlock/Component.tsx @@ -1,5 +1,6 @@ import React from 'react' import type { FDFeatureAnnouncementBlock as FDFeatureAnnouncementBlockProps } from '@/payload-types' +import { FDButton } from '@/components/FDButton' export const FDFeatureAnnouncementBlockComponent: React.FC = ({ heading, @@ -8,31 +9,31 @@ export const FDFeatureAnnouncementBlockComponent: React.FC { - const bgClass = - theme === 'dark' - ? 'bg-fd-navy' - : theme === 'gray' - ? 'bg-fd-gray' - : 'bg-white' + const isDark = theme === 'dark' - const headingColor = theme === 'dark' ? 'text-fd-yellow' : 'text-fd-navy' - const bodyColor = theme === 'dark' ? 'text-white' : 'text-fd-navy' + const bgClass = isDark ? 'bg-fd-navy' : theme === 'gray' ? 'bg-fd-gray' : 'bg-white' + const headingColor = isDark ? 'text-fd-yellow' : 'text-fd-navy' + const bodyColor = isDark ? 'text-white' : 'text-fd-navy' return (
-

+

{heading}

-

+

{body}

{ctaText && ( - + {ctaText} - + )}
diff --git a/src/blocks/FDHeroBlock/Component.tsx b/src/blocks/FDHeroBlock/Component.tsx index 2731790..781d86f 100644 --- a/src/blocks/FDHeroBlock/Component.tsx +++ b/src/blocks/FDHeroBlock/Component.tsx @@ -1,5 +1,6 @@ import React from 'react' import type { FDHeroBlock as FDHeroBlockProps, Media } from '@/payload-types' +import { FDButton } from '@/components/FDButton' export const FDHeroBlockComponent: React.FC = ({ heading, @@ -35,8 +36,7 @@ export const FDHeroBlockComponent: React.FC = ({ const overlayClass = overlayOpacity === '30' ? 'bg-black/30' : overlayOpacity === '70' ? 'bg-black/70' : 'bg-black/50' - const secondaryBtnClass = - isDark && textColor !== 'navy' ? 'fd-btn-secondary-dark' : 'fd-btn-secondary' + const secondaryOnDark = textColor === 'navy' ? false : isDark return (
= ({ > {hasBgImage && ( <> - +