From 77299ea0e4744a2836f2d913f7b0838e952f51fd Mon Sep 17 00:00:00 2001 From: Anh Pham Date: Sun, 6 Jul 2025 20:41:29 -0500 Subject: [PATCH 1/3] Fixed UI blockers --- .../variants/cdclientsDefaultVariant.tsx | 166 +++++++++++--- .../components/variants/demoVariant.tsx | 37 ++- .../components/cdclients/sanity-query.ts | 28 ++- .../components/cdclients/sanity-schema.ts | 13 +- .../variants/cdctaDefaultVariant.tsx | 26 ++- .../variants/cdinsightsDefaultVariant.tsx | 70 +++--- .../variants/cdmissionDefaultVariant.tsx | 51 +++-- .../variants/cdnavDefaultVariant.tsx | 213 +++++++++++++----- .../variants/cdpartnersDefaultVariant.tsx | 146 +++++++++--- .../components/variants/demoVariant.tsx | 43 +++- .../components/cdpartners/sanity-query.ts | 34 ++- .../components/cdpartners/sanity-schema.ts | 13 +- .../variants/cdservicesDefaultVariant.tsx | 24 +- .../variants/cdtestimonialsDefaultVariant.tsx | 64 +++--- .../components/variants/defaultVariant.tsx | 16 +- 15 files changed, 671 insertions(+), 273 deletions(-) diff --git a/src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx b/src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx index c3b144e..bbb7447 100644 --- a/src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx +++ b/src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx @@ -2,52 +2,146 @@ import React from "react"; import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps"; import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools"; import { buttonIcon as ButtonIcon } from "../../../../styles/icons/icons"; +import Link from "next/link"; +interface ClientItem { + name: string; + link?: string; + inactiveLogo?: any; + activeLogo?: any; +} -export default function DefaultVariant(props: StandardComponentProps) { +interface CdclientsDefaultVariantProps extends StandardComponentProps { + matchingData: { + title?: string; + subtitle?: string; + clientsList?: ClientItem[]; + buttonText?: string; + buttonUrl?: string; + }; +} + +const CdclientsDefaultVariant: React.FC = (props) => { const { matchingData } = props; const title = matchingData?.title?.toUpperCase() || "OUR CLIENTS"; - const clients = matchingData?.clientsList || []; - const buttonText = matchingData?.buttonText || "View All Clients"; - const buttonLink = matchingData?.buttonLink || "#"; + const subtitle = matchingData?.subtitle; + const clientsList = matchingData?.clientsList || []; + const buttonText = matchingData?.buttonText; + const buttonUrl = matchingData?.buttonUrl; return ( -
-
+
+
+ {/* Header */}
-

{title}

+ {title && ( +

+ {title} +

+ )} + {subtitle && ( +

+ {subtitle} +

+ )}
-
- {Array.isArray(clients) && - clients.map((client: any, index: number) => { - const logoUrl = client?.logo?.asset?.url; - return ( -
- {logoUrl && ( - {client?.name - )} -
- ); - })} -
- + + + {/* Clients Grid */} + {clientsList.length > 0 && ( +
+ {clientsList.map((client, index) => ( +
+ {client.link ? ( + +
+ {/* Inactive Logo */} + {client.inactiveLogo && ( + {`${client.name} + )} + + {/* Active Logo */} + {client.activeLogo && ( + {`${client.name} + )} + + {/* Fallback if only inactive logo exists */} + {client.inactiveLogo && !client.activeLogo && ( + {`${client.name} + )} +
+ + ) : ( +
+ {/* Inactive Logo */} + {client.inactiveLogo && ( + {`${client.name} + )} + + {/* Active Logo */} + {client.activeLogo && ( + {`${client.name} + )} + + {/* Fallback if only inactive logo exists */} + {client.inactiveLogo && !client.activeLogo && ( + {`${client.name} + )} +
+ )} +
+ ))} +
+ )} + + {/* Button */} + {buttonText && buttonUrl && ( +
+ + {buttonText} + + +
+ )}
); }; + +export default CdclientsDefaultVariant; diff --git a/src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx b/src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx index 7d4a20b..f54e3fb 100644 --- a/src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx +++ b/src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx @@ -17,15 +17,38 @@ const DemoVariant: React.FC = ({ {clientsList.map((client: any, index: number) => ( diff --git a/src/theme/conversion/components/cdclients/sanity-query.ts b/src/theme/conversion/components/cdclients/sanity-query.ts index dd36d5f..329e360 100644 --- a/src/theme/conversion/components/cdclients/sanity-query.ts +++ b/src/theme/conversion/components/cdclients/sanity-query.ts @@ -17,7 +17,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str clientsList { name link - logo { + inactiveLogo { + asset { + url + } + } + activeLogo { asset { url } @@ -35,7 +40,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str clientsList { name link - logo { + inactiveLogo { + asset { + url + } + } + activeLogo { asset { url } @@ -59,7 +69,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str clientsList { name link - logo { + inactiveLogo { + asset { + url + } + } + activeLogo { asset { url } @@ -77,7 +92,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str clientsList { name link - logo { + inactiveLogo { + asset { + url + } + } + activeLogo { asset { url } diff --git a/src/theme/conversion/components/cdclients/sanity-schema.ts b/src/theme/conversion/components/cdclients/sanity-schema.ts index f0c0fc3..0f3eb48 100644 --- a/src/theme/conversion/components/cdclients/sanity-schema.ts +++ b/src/theme/conversion/components/cdclients/sanity-schema.ts @@ -18,9 +18,16 @@ export const clientItem = defineType({ type: 'url' }), defineField({ - name: 'logo', - title: 'Client Logo', - type: 'image' + name: 'inactiveLogo', + title: 'Inactive Logo', + type: 'image', + description: 'Logo shown by default (grayscale or muted version)' + }), + defineField({ + name: 'activeLogo', + title: 'Active Logo', + type: 'image', + description: 'Logo shown on hover (colored or highlighted version)' }) ] }); diff --git a/src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx b/src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx index 1b8d558..f743a72 100644 --- a/src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx +++ b/src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx @@ -13,14 +13,24 @@ const DefaultVariant: React.FC = ({ const buttonUrl = matchingData?.buttonUrl || "#"; return ( -
-

- {title} -

- - {buttonLabel} - - +
+
+

+ {title} +

+ {subtitle && ( +

+ {subtitle} +

+ )} + + {buttonLabel} + + +
); }; diff --git a/src/theme/conversion/components/cdinsights/components/variants/cdinsightsDefaultVariant.tsx b/src/theme/conversion/components/cdinsights/components/variants/cdinsightsDefaultVariant.tsx index 7f72ce9..8cd8100 100644 --- a/src/theme/conversion/components/cdinsights/components/variants/cdinsightsDefaultVariant.tsx +++ b/src/theme/conversion/components/cdinsights/components/variants/cdinsightsDefaultVariant.tsx @@ -11,25 +11,25 @@ export default function DefaultVariant(props: StandardComponentProps) { const buttonText = matchingData?.buttonText || "View all insights"; return ( -
+
-
-

+
+

{heading}

-

+

{tagline}

-
+
{Array.isArray(items) && items.map((item: any, index: number) => { const { hasImage, imageLocation } = getCmsImage(item); const url = hasImage ? imageLocation : item?.imageUrl; return ( -
+
{url && ( -
+
{item?.title )} -
- {item.topics && item.topics.length > 0 && ( -
- {item.topics.map((topic: any, i: number) => ( - - {i > 0 && ", "} - - {topic.name} - - - ))} -
- )} +
+ {item.topics && item.topics.length > 0 && ( +
+ {item.topics.map((topic: any, i: number) => ( + + {i > 0 && ", "} + + {topic.name} + + + ))} +
+ )} -

- {item?.title?.toUpperCase()} -

- {item.buttonText && item.buttonUrl && ( - - {item.buttonText} - - - )} -
+

+ {item?.title?.toUpperCase()} +

+ {item.buttonText && item.buttonUrl && ( + + {item.buttonText} + + + )} +
); })}
-
+
{buttonText} diff --git a/src/theme/conversion/components/cdmission/components/variants/cdmissionDefaultVariant.tsx b/src/theme/conversion/components/cdmission/components/variants/cdmissionDefaultVariant.tsx index e7ae22a..7c626f7 100644 --- a/src/theme/conversion/components/cdmission/components/variants/cdmissionDefaultVariant.tsx +++ b/src/theme/conversion/components/cdmission/components/variants/cdmissionDefaultVariant.tsx @@ -1,3 +1,4 @@ +'use client' import React from "react"; import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps"; import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools"; @@ -15,26 +16,26 @@ export default function CdmissionDefaultVariant(props: StandardComponentProps) { const { hasImage, imageLocation, altText } = getCmsImage(matchingData); return ( -
-
+
+
{/* Left Column */} -
-

+
+

{title}

-

+

{description}

{/* Right Column - Icon List */} -
+
{keyPoints.map((point: any, i: number) => (
-
- +
+
-

{point.description}

+

{point.description}

))}
@@ -42,37 +43,39 @@ export default function CdmissionDefaultVariant(props: StandardComponentProps) { {/* Promises Section */}
-
-
-

{promiseTitle}

-
-
-
-
+ className="bg-white text-[#0D0E47] py-8 sm:py-12 md:py-16 lg:py-20 px-4 sm:px-6 md:px-8 lg:px-12"> +
+
+

{promiseTitle}

+
+
+
+
{promises[0]?.icon?.asset?.url && ( {promises[0].title} )} -
+
{promises[0]?.title}
{hasImage && ( -
+
{altText
)} -

- {promiseSubtitle} -

+
+

+ {promiseSubtitle} +

+
diff --git a/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx b/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx index 8f23166..2d2b2da 100644 --- a/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx +++ b/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx @@ -1,4 +1,5 @@ -import React from "react"; +'use client' +import React, { useState } from "react"; import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps"; import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools"; @@ -15,79 +16,177 @@ export default function cdnavDefaultVariant(props: StandardComponentProps) { const { hasImage: hasMobile, imageLocation: mobileSrc } = getCmsImage({ image: matchingData?.mobileImage }); const { hasImage: hasDesktop, imageLocation: desktopSrc } = getCmsImage({ image: matchingData?.desktopImage }); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [openDropdowns, setOpenDropdowns] = useState([]); + + const toggleDropdown = (index: number) => { + setOpenDropdowns(prev => + prev.includes(index) + ? prev.filter(i => i !== index) + : [...prev, index] + ); + }; + return ( diff --git a/src/theme/conversion/components/cdpartners/components/variants/cdpartnersDefaultVariant.tsx b/src/theme/conversion/components/cdpartners/components/variants/cdpartnersDefaultVariant.tsx index 3dbb38c..24f0486 100644 --- a/src/theme/conversion/components/cdpartners/components/variants/cdpartnersDefaultVariant.tsx +++ b/src/theme/conversion/components/cdpartners/components/variants/cdpartnersDefaultVariant.tsx @@ -1,41 +1,127 @@ import React from "react"; import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps"; -import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools"; -export default function DefaultVariant(props: StandardComponentProps) { const { matchingData } = props; - // Basic fields - const title = matchingData?.title?.toUpperCase() || "OUR PARTNERS"; - const subtitle = matchingData?.subtitle || "We work with leading technology providers."; - const partners = matchingData?.partnerLogos || []; +interface PartnerItem { + name: string; + url?: string; + inactiveLogo?: any; + activeLogo?: any; +} + +interface CdpartnersDefaultVariantProps extends StandardComponentProps { + matchingData: { + title?: string; + subtitle?: string; + partnerLogos?: PartnerItem[]; + }; +} + +const CdpartnersDefaultVariant: React.FC = (props) => { + const { matchingData } = props; + const title = matchingData?.title || "OUR PARTNERS"; + const subtitle = matchingData?.subtitle; + const partnerLogos = matchingData?.partnerLogos || []; return ( -
-
+
+
+ {/* Header */}
-

{title}

+ {title && ( +

+ {title} +

+ )} + {subtitle && ( +

+ {subtitle} +

+ )}
-
- {Array.isArray(partners) && - partners.map((partner: any, index: number) => { - const logoUrl = partner?.logo?.asset?.url; - return ( -
- {logoUrl && ( - {partner?.name - )} -
- ); - })} -
+ + {/* Partners Grid */} + {partnerLogos.length > 0 && ( +
+ {partnerLogos.map((partner: PartnerItem, index: number) => ( +
+ {partner.url ? ( + +
+ {/* Inactive Logo */} + {partner.inactiveLogo && ( + {`${partner.name} + )} + + {/* Active Logo */} + {partner.activeLogo && ( + {`${partner.name} + )} + + {/* Fallback if only inactive logo exists */} + {partner.inactiveLogo && !partner.activeLogo && ( + {`${partner.name} + )} +
+ + ) : ( +
+ {/* Inactive Logo */} + {partner.inactiveLogo && ( + {`${partner.name} + )} + + {/* Active Logo */} + {partner.activeLogo && ( + {`${partner.name} + )} + + {/* Fallback if only inactive logo exists */} + {partner.inactiveLogo && !partner.activeLogo && ( + {`${partner.name} + )} +
+ )} +
+ ))} +
+ )} +
); -} \ No newline at end of file +}; + +export default CdpartnersDefaultVariant; \ No newline at end of file diff --git a/src/theme/conversion/components/cdpartners/components/variants/demoVariant.tsx b/src/theme/conversion/components/cdpartners/components/variants/demoVariant.tsx index b934003..c434a86 100644 --- a/src/theme/conversion/components/cdpartners/components/variants/demoVariant.tsx +++ b/src/theme/conversion/components/cdpartners/components/variants/demoVariant.tsx @@ -5,22 +5,45 @@ import { demoVariantData } from "./data/demoVariantData"; const DemoVariant: React.FC = ({ matchingData }) => { const title = matchingData?.title || demoVariantData.title; const subtitle = matchingData?.subtitle || demoVariantData.subtitle; - const logos = matchingData?.partnerLogos || demoVariantData.partnerLogos; + const partnerLogos = matchingData?.partnerLogos || demoVariantData.partnerLogos; return (

{title}

{subtitle}

- {logos.map((partner: any, index: number) => ( -
- {partner.imageUrl && ( - - {partner.partnerName + {partnerLogos.map((partner: any, index: number) => ( + diff --git a/src/theme/conversion/components/cdpartners/sanity-query.ts b/src/theme/conversion/components/cdpartners/sanity-query.ts index e023cc0..502bfa5 100644 --- a/src/theme/conversion/components/cdpartners/sanity-query.ts +++ b/src/theme/conversion/components/cdpartners/sanity-query.ts @@ -15,7 +15,13 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str subtitle partnerLogos { name - logo { + url + inactiveLogo { + asset { + url + } + } + activeLogo { asset { url } @@ -26,11 +32,18 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str __typename _key _type + selectableVariant title subtitle partnerLogos { name - logo { + url + inactiveLogo { + asset { + url + } + } + activeLogo { asset { url } @@ -52,7 +65,13 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str subtitle partnerLogos { name - logo { + url + inactiveLogo { + asset { + url + } + } + activeLogo { asset { url } @@ -63,11 +82,18 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str __typename _key _type + selectableVariant title subtitle partnerLogos { name - logo { + url + inactiveLogo { + asset { + url + } + } + activeLogo { asset { url } diff --git a/src/theme/conversion/components/cdpartners/sanity-schema.ts b/src/theme/conversion/components/cdpartners/sanity-schema.ts index c424f1f..a576aef 100644 --- a/src/theme/conversion/components/cdpartners/sanity-schema.ts +++ b/src/theme/conversion/components/cdpartners/sanity-schema.ts @@ -17,9 +17,16 @@ export const partnerItem = defineType({ type: 'url' }), defineField({ - name: 'logo', - title: 'Partner Logo', - type: 'image' + name: 'inactiveLogo', + title: 'Inactive Logo', + type: 'image', + description: 'Logo shown by default (grayscale or muted version)' + }), + defineField({ + name: 'activeLogo', + title: 'Active Logo', + type: 'image', + description: 'Logo shown on hover (colored or highlighted version)' }) ] }) diff --git a/src/theme/conversion/components/cdservices/components/variants/cdservicesDefaultVariant.tsx b/src/theme/conversion/components/cdservices/components/variants/cdservicesDefaultVariant.tsx index fbe922e..ce70ad1 100644 --- a/src/theme/conversion/components/cdservices/components/variants/cdservicesDefaultVariant.tsx +++ b/src/theme/conversion/components/cdservices/components/variants/cdservicesDefaultVariant.tsx @@ -13,38 +13,38 @@ export default function DefaultVariant(props: StandardComponentProps) { const subtitle = matchingData?.subtitle || "How we help businesses thrive"; return ( -
+
-
-

{title}

-
-

{subtitle}

+
+

{title}

+
+

{subtitle}

{/* Optional image */} {hasImage && ( -
+
{altText}
)} -
+
{servicesList.map((serviceItem: any, index: number) => ( -
+
{serviceItem?.image?.asset?.url && ( {serviceItem.title} )} -

{serviceItem.title?.toUpperCase()}

-

{serviceItem.description}

+

{serviceItem.title?.toUpperCase()}

+

{serviceItem.description}

))}
diff --git a/src/theme/conversion/components/cdtestimonials/components/variants/cdtestimonialsDefaultVariant.tsx b/src/theme/conversion/components/cdtestimonials/components/variants/cdtestimonialsDefaultVariant.tsx index d7b3578..17ebb70 100644 --- a/src/theme/conversion/components/cdtestimonials/components/variants/cdtestimonialsDefaultVariant.tsx +++ b/src/theme/conversion/components/cdtestimonials/components/variants/cdtestimonialsDefaultVariant.tsx @@ -20,28 +20,28 @@ export default function DefaultVariant(props: StandardComponentProps) { return (
-
-
-
-

{title}

-
+
+
+
+

{title}

+
-
+
{Array.isArray(testimonials) && testimonials.map((item: any, index: number) => { const imageUrl = item?.image?.asset?.url; return ( -
-
"
-
"
+
+
"
+
"
-

{item?.testimonial || "Client testimonial"}

+

{item?.testimonial || "Client testimonial"}

-
-

{item?.name || "Client Name"}

-

{item?.position || "Position"}

+
+

{item?.name || "Client Name"}

+

{item?.position || "Position"}

@@ -52,25 +52,25 @@ export default function DefaultVariant(props: StandardComponentProps) {
{videoTestimonials.length > 0 && ( -
-
-
-

{videoTitle}

-
-

{videoSubtitle}

+
+
+
+

{videoTitle}

+
+

{videoSubtitle}

{/* Spotlight Video */} {videoTestimonials[0] && ( -
-
-
-

{videoTestimonials[0].name?.toUpperCase()}

-

{videoTestimonials[0].position?.toUpperCase()}

-

{videoTestimonials[0].testimonial}

+
+
+
+

{videoTestimonials[0].name?.toUpperCase()}

+

{videoTestimonials[0].position?.toUpperCase()}

+

{videoTestimonials[0].testimonial}

-
+
1 && ( <> -

More Videos

-
+

More Videos

+
{videoTestimonials.slice(1).map((testimonial: VideoTestimonial, index: number) => ( -
+
{testimonial?.videoUrl && ( )} -
-

{testimonial?.name}

-

{testimonial?.position}

+
+

{testimonial?.name}

+

{testimonial?.position}

))} diff --git a/src/theme/conversion/components/herobanner/components/variants/defaultVariant.tsx b/src/theme/conversion/components/herobanner/components/variants/defaultVariant.tsx index 6529e86..f246d94 100644 --- a/src/theme/conversion/components/herobanner/components/variants/defaultVariant.tsx +++ b/src/theme/conversion/components/herobanner/components/variants/defaultVariant.tsx @@ -11,19 +11,19 @@ export default function DefaultVariant(props: StandardComponentProps) { const buttonLabel = matchingData?.button?.label const buttonLink = matchingData?.button?.link return ( -
-
-

+
+
+

{(matchingData?.title || "Default HeroBanner Title").toUpperCase()}

-

+

{matchingData?.subtitle || "Default HeroBanner Subtitle"}

{buttonLabel && buttonLink && ( -
+
{buttonLabel} @@ -32,11 +32,11 @@ export default function DefaultVariant(props: StandardComponentProps) { )}
{imageUrl && ( -
+
{altText}
)} From 1febb5996708d4ddcdf94e5347eb74cf5cab5139 Mon Sep 17 00:00:00 2001 From: Anh Pham Date: Sun, 6 Jul 2025 21:44:38 -0500 Subject: [PATCH 2/3] UI Fixes --- .../conversion/components/cdfooter/sanity-mapping.ts | 2 +- .../components/variants/cdnavDefaultVariant.tsx | 12 ++++++------ .../components/herobanner/sanity-mapping.ts | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/theme/conversion/components/cdfooter/sanity-mapping.ts b/src/theme/conversion/components/cdfooter/sanity-mapping.ts index 522b1bd..64afa32 100644 --- a/src/theme/conversion/components/cdfooter/sanity-mapping.ts +++ b/src/theme/conversion/components/cdfooter/sanity-mapping.ts @@ -14,7 +14,7 @@ export async function mapIdentifierData(pageAndComponentCombo: PageAndSingleComp log.trace(`${logPrefix()} thisComponentsOrder: ${thisComponentsOrder}`); - const matchingData = extractComponentsFromSanityData(content, "cdfooter", log, true, '', thisComponentsOrder); + const matchingData = extractComponentsFromSanityData(content, "cdfooter", log); return matchingData } \ No newline at end of file diff --git a/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx b/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx index 2d2b2da..78b376e 100644 --- a/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx +++ b/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx @@ -28,7 +28,7 @@ export default function cdnavDefaultVariant(props: StandardComponentProps) { }; return ( -