@windstream/react-shared-components 0.2.16 → 0.2.18

package/src/contentful/blocks/primary-hero/index.tsx

@@ -21,14 +21,18 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     checklist,
     renderCheckPlans,
     badgeImage,
+    pricingDescription,
     pricingDescriptionDisclaimer,
     secondaryCta,
     secondaryCtaPrefix,
     onModalButtonClick,
     hideOnMobileCta1,
+    textColor = "light",
+    logoLockup,
   } = props;
 
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
+  const textColorClass = textColor === "light" ? " text-white" : " text-text";
   return (
     <div className="component-container p-5 xl:flex xl:min-h-[724px] xl:items-center xl:p-0 xl:py-4">
       <div
@@ -37,7 +41,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         )}
       >
         {/* Left column: navy background, headline, body, address, button, link */}
-        <div className={cx("relative flex flex-col text-white sm:w-[485px]")}>
+        <div
+          className={cx(
+            `relative flex flex-col ${textColorClass} sm:w-[485px]`
+          )}
+        >
           <div className="flex flex-col gap-5 lg:gap-6">
             {title && (
               <Text
@@ -81,10 +89,25 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               </div>
             ) : null}
 
+            {pricingDescription ? (
+              <Text
+                data-cy="hero-pricing-disclaimer"
+                className={cx("text-left sm:text-center xl:text-left")}
+              >
+                {pricingDescription}
+              </Text>
+            ) : null}
+
+            {pricingDescriptionDisclaimer ? (
+              <Text data-cy="hero-pricing-disclaimer" as="p" className="body3">
+                {pricingDescriptionDisclaimer}
+              </Text>
+            ) : null}
+
             {/* checklist */}
             {checklist && (
               <Checklist
-                listItemClassName="body2 text-white text-left"
+                listItemClassName={`body2 text-left ${textColorClass}`}
                 items={checklist.map(item =>
                   item.iconUrl
                     ? { title: item.title, iconUrl: item.iconUrl }
@@ -93,6 +116,20 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               />
             )}
 
+            {logoLockup ? (
+              <div className="text-left sm:text-center xl:mb-0 xl:text-left">
+                <NextImage
+                  src={logoLockup}
+                  alt={"Logo Lockup"}
+                  className="inline-block"
+                  width={201}
+                  height={24}
+                  quality={90}
+                  loading="eager"
+                />
+              </div>
+            ) : null}
+
             {/* CTA section */}
             <div className="flex flex-col gap-3">
               {/* desktop CTA */}
@@ -107,7 +144,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   />
                 </div>
               )}
-              {secondaryCtaPrefix || secondaryCta ? (
+              {secondaryCtaPrefix && secondaryCta ? (
                 <div className="hidden md:flex">
                   {secondaryCtaPrefix && (
                     <Text as="span" className="body2 mr-1">
@@ -116,7 +153,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   )}
                   {secondaryCta && (
                     <Button
-                      linkClassName="body2 text-text-inverse"
+                      linkClassName={`body2 ${textColorClass}`}
                       onModalButtonClick={onModalButtonClick}
                       {...secondaryCta}
                     />
@@ -129,17 +166,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 <div className="hidden md:block">
                   <Button
                     {...bottomLink}
-                    linkClassName="text-footnote text-white"
+                    linkClassName={`text-footnote ${textColorClass}`}
                     onModalButtonClick={onModalButtonClick}
                   />
                 </div>
               )}
-
-              {pricingDescriptionDisclaimer ? (
-                <Text as="p" className="body3 hidden md:block">
-                  {pricingDescriptionDisclaimer}
-                </Text>
-              ) : null}
             </div>
           </div>
         </div>
@@ -177,19 +208,15 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               <Button
                 {...bottomLink}
                 onModalButtonClick={onModalButtonClick}
-                linkClassName="body3 text-white"
+                linkClassName={`body3 ${textColorClass}`}
               />
             </div>
           )}
 
-          {pricingDescriptionDisclaimer ? (
-            <Text as="p" className="body3 md:hidden">
-              {pricingDescriptionDisclaimer}
-            </Text>
-          ) : null}
-
           {secondaryCtaPrefix || secondaryCta ? (
-            <div className="flex flex-wrap items-center text-white md:hidden">
+            <div
+              className={`flex flex-wrap items-center ${textColorClass} md:hidden`}
+            >
               {secondaryCtaPrefix && (
                 <Text as="span" className="body2 mr-1">
                   {secondaryCtaPrefix}
@@ -199,7 +226,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 <Button
                   {...secondaryCta}
                   onModalButtonClick={onModalButtonClick}
-                  linkClassName="text-white"
+                  linkClassName={`${textColorClass}`}
                 />
               )}
             </div>

package/src/contentful/blocks/primary-hero/types.ts

@@ -30,7 +30,7 @@ export type PrimaryHeroProps = {
   carouselImages?: string[];
   squareImage?: boolean;
   badgeImage?: string;
-  textColor?: string;
+  textColor?: "light" | "dark";
   maxWidth?: boolean;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   onModalButtonClick?: (id?: string) => void;