@windstream/react-shared-components 0.1.11 → 0.1.13

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

@@ -1,229 +1,234 @@
-import React from "react";
-import { PrimaryHeroProps } from "./types";
-
-import { Checklist } from "@shared/components/checklist";
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-import { Button } from "@shared/contentful/blocks/button";
-import { cx } from "@shared/utils";
-
-export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
-  const {
-    title,
-    showAsHeading,
-    subTitle,
-    primaryCta1,
-    carouselImages,
-    bottomLink,
-    price,
-    priceCallout,
-    priceSuffix,
-    checklist,
-    renderCheckPlans,
-    badgeImage,
-    pricingDescriptionDisclaimer,
-    secondaryCta,
-    secondaryCtaPrefix,
-    onModalButtonClick,
-  } = props;
-
-  const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
-
-  return (
-    <div className="component-container p-5 lg:h-[724px] lg:p-0">
-      <div
-        className={cx(
-          "primary-hero-container mx-auto flex flex-col sm:items-center sm:text-center lg:h-full lg:max-w-120 lg:flex-row lg:items-center lg:justify-between lg:gap-4 lg:px-4 lg:text-left"
-        )}
-      >
-        {/* Left column: navy background, headline, body, address, button, link */}
-        <div className={cx("relative flex flex-col text-white sm:w-[485px]")}>
-          <div className="flex flex-col gap-5 lg:gap-6">
-            {title && (
-              <Text
-                as={showAsHeading ? "h1" : "h2"}
-                className="heading2 lg:heading1"
-              >
-                {title}
-              </Text>
-            )}
-            {subTitle && (
-              <Text as="p" className="subheading3 lg:subheading1">
-                {subTitle}
-              </Text>
-            )}
-
-            {/* price callout */}
-            {price ? (
-              <div className="flex sm:justify-center sm:text-left lg:justify-start">
-                <div className="mr-2 mt-0.5">
-                  {priceCallout
-                    ? priceCallout.split("|").map((line, index) => (
-                        <Text key={index} as="p" className="body2">
-                          {line}
-                        </Text>
-                      ))
-                    : null}
-                </div>
-                <div className="flex">
-                  <Text as="p" className="subheading1 mt-0.5">
-                    $
-                  </Text>
-                  <Text as="p" className="subheading5">
-                    {price}
-                  </Text>
-                  {priceSuffix ? (
-                    <Text as="p" className="subheading1 mt-0.5">
-                      {priceSuffix}
-                    </Text>
-                  ) : null}
-                </div>
-              </div>
-            ) : null}
-
-            {/* checklist */}
-            {checklist && (
-              <Checklist
-                listItemClassName="text-white body2 text-left"
-                items={checklist.map(item => item.title)}
-              />
-            )}
-
-            {/* CTA section */}
-            <div className="flex flex-col gap-3">
-              {/* desktop CTA */}
-              {primaryCta1 && (
-                <div className={cx("hidden md:flex md:flex-col")}>
-                  <Button
-                    {...primaryCta1}
-                    renderCheckPlans={renderCheckPlans}
-                    onModalButtonClick={onModalButtonClick}
-                  />
-                </div>
-              )}
-
-              {secondaryCtaPrefix || secondaryCta ? (
-                <div className="hidden md:flex">
-                  {secondaryCtaPrefix && (
-                    <Text as="span" className="body2 mr-1">
-                      {secondaryCtaPrefix}
-                    </Text>
-                  )}
-                  {secondaryCta && (
-                    <Button
-                      linkClassName="body2 text-text-inverse"
-                      onModalButtonClick={onModalButtonClick}
-                      {...secondaryCta}
-                    />
-                  )}
-                </div>
-              ) : null}
-
-              {/* desktop bottom link */}
-              {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
-                <div className="hidden md:block">
-                  <Button
-                    {...bottomLink}
-                    linkClassName="text-footnote text-white"
-                    onModalButtonClick={onModalButtonClick}
-                  />
-                </div>
-              )}
-
-              {pricingDescriptionDisclaimer ? (
-                <Text as="p" className="body3 hidden md:block">
-                  {pricingDescriptionDisclaimer}
-                </Text>
-              ) : null}
-            </div>
-          </div>
-        </div>
-
-        {/* mobile hero image and bottom link */}
-        <div className="lg:hidden">
-          <div className={"relative my-8"}>
-            {badgeImage ? (
-              <NextImage
-                src={badgeImage}
-                alt={"Badge"}
-                className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
-                width={100}
-                height={100}
-                loading="eager"
-              />
-            ) : null}
-            {carouselImages && carouselImages[0] ? (
-              <NextImage
-                src={carouselImages[0]}
-                alt={"Hero"}
-                className="aspect-[1.71:1] sm:aspect-[1.41:1] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
-                width={350}
-                height={205}
-                loading="eager"
-              />
-            ) : null}
-          </div>
-
-          {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
-            <div className="md:hidden">
-              <Button
-                {...bottomLink}
-                onModalButtonClick={onModalButtonClick}
-                linkClassName="body3 text-white"
-              />
-            </div>
-          )}
-
-          {pricingDescriptionDisclaimer ? (
-            <Text as="p" className="body3 md:hidden">
-              {pricingDescriptionDisclaimer}
-            </Text>
-          ) : null}
-
-          {secondaryCtaPrefix || secondaryCta ? (
-            <div className="flex md:hidden">
-              {secondaryCtaPrefix && (
-                <Text as="span" className="body2 mr-1">
-                  {secondaryCtaPrefix}
-                </Text>
-              )}
-              {secondaryCta && (
-                <Button
-                  {...secondaryCta}
-                  onModalButtonClick={onModalButtonClick}
-                  linkClassName="text-white"
-                />
-              )}
-            </div>
-          ) : null}
-        </div>
-
-        {/* Right column: bright blue background, diagonal top edge, hero image */}
-        <div className={cx("relative hidden lg:block")}>
-          {badgeImage ? (
-            <NextImage
-              src={badgeImage}
-              alt={"Badge"}
-              className="absolute -left-26 top-18 aspect-square w-52 object-cover object-center"
-              width={200}
-              height={200}
-              loading="eager"
-            />
-          ) : null}
-          {carouselImages && carouselImages[0] ? (
-            <NextImage
-              src={carouselImages[0]}
-              alt={"Hero"}
-              className="aspect-square rounded-[40px] object-cover object-center"
-              width={600}
-              height={600}
-              loading="eager"
-            />
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PrimaryHero;
+import React from "react";
+import { PrimaryHeroProps } from "./types";
+
+import { Checklist } from "@shared/components/checklist";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
+  const {
+    title,
+    showAsHeading,
+    subTitle,
+    primaryCta1,
+    carouselImages,
+    bottomLink,
+    price,
+    priceCallout,
+    priceSuffix,
+    checklist,
+    renderCheckPlans,
+    badgeImage,
+    pricingDescriptionDisclaimer,
+    secondaryCta,
+    secondaryCtaPrefix,
+    onModalButtonClick,
+  } = props;
+
+  const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
+
+  return (
+    <div className="component-container p-5 lg:h-[724px] lg:p-0">
+      <div
+        className={cx(
+          "primary-hero-container mx-auto flex flex-col sm:items-center sm:text-center lg:h-full lg:max-w-120 lg:flex-row lg:items-center lg:justify-between lg:gap-4 lg:px-4 lg:text-left"
+        )}
+      >
+        {/* Left column: navy background, headline, body, address, button, link */}
+        <div className={cx("relative flex flex-col text-white sm:w-[485px]")}>
+          <div className="flex flex-col gap-5 lg:gap-6">
+            {title && (
+              <Text
+                as={showAsHeading ? "h1" : "h2"}
+                className="heading2 lg:heading1"
+              >
+                {title}
+              </Text>
+            )}
+            {subTitle && (
+              <Text as="p" className="subheading3 lg:subheading1">
+                {subTitle}
+              </Text>
+            )}
+
+            {/* price callout */}
+            {price ? (
+              <div className="flex sm:justify-center sm:text-left lg:justify-start">
+                <div className="mr-2 mt-0.5">
+                  {priceCallout
+                    ? priceCallout.split("|").map((line, index) => (
+                        <Text key={index} as="p" className="body2">
+                          {line}
+                        </Text>
+                      ))
+                    : null}
+                </div>
+                <div className="flex">
+                  <Text as="p" className="subheading1 mt-0.5">
+                    $
+                  </Text>
+                  <Text as="p" className="subheading5">
+                    {price}
+                  </Text>
+                  {priceSuffix ? (
+                    <Text as="p" className="subheading1 mt-0.5">
+                      {priceSuffix}
+                    </Text>
+                  ) : null}
+                </div>
+              </div>
+            ) : null}
+
+            {/* checklist */}
+            {checklist && (
+              <Checklist
+                listItemClassName="text-white body2 text-left"
+                items={checklist.map(item => item.title)}
+              />
+            )}
+
+            {/* CTA section */}
+            <div className="flex flex-col gap-3">
+              {/* desktop CTA */}
+              {primaryCta1 && (
+                <div className={cx("hidden md:flex md:flex-col")}>
+                  <Button
+                    {...primaryCta1}
+                    renderCheckPlans={renderCheckPlans}
+                    onModalButtonClick={onModalButtonClick}
+                  />
+                </div>
+              )}
+
+              {secondaryCtaPrefix || secondaryCta ? (
+                <div className="hidden md:flex">
+                  {secondaryCtaPrefix && (
+                    <Text as="span" className="body2 mr-1">
+                      {secondaryCtaPrefix}
+                    </Text>
+                  )}
+                  {secondaryCta && (
+                    <Button
+                      linkClassName="body2 text-text-inverse"
+                      onModalButtonClick={onModalButtonClick}
+                      {...secondaryCta}
+                    />
+                  )}
+                </div>
+              ) : null}
+
+              {/* desktop bottom link */}
+              {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
+                <div className="hidden md:block">
+                  <Button
+                    {...bottomLink}
+                    linkClassName="text-footnote text-white"
+                    onModalButtonClick={onModalButtonClick}
+                  />
+                </div>
+              )}
+
+              {pricingDescriptionDisclaimer ? (
+                <Text as="p" className="body3 hidden md:block">
+                  {pricingDescriptionDisclaimer}
+                </Text>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        {/* mobile hero image and bottom link */}
+        <div className="lg:hidden">
+          <div className={"relative my-8"}>
+            {badgeImage ? (
+              <NextImage
+                src={badgeImage}
+                alt={"Badge"}
+                className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
+                width={104}
+                height={104}
+                quality={90}
+                loading="eager"
+              />
+            ) : null}
+            {carouselImages && carouselImages[0] ? (
+              <NextImage
+                src={carouselImages[0]}
+                alt={"Hero"}
+                className="aspect-[1.71:1] sm:aspect-[1.41:1] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
+                width={1024}
+                height={600}
+                sizes="100vw"
+                quality={90}
+                loading="eager"
+              />
+            ) : null}
+          </div>
+
+          {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
+            <div className="md:hidden">
+              <Button
+                {...bottomLink}
+                onModalButtonClick={onModalButtonClick}
+                linkClassName="body3 text-white"
+              />
+            </div>
+          )}
+
+          {pricingDescriptionDisclaimer ? (
+            <Text as="p" className="body3 md:hidden">
+              {pricingDescriptionDisclaimer}
+            </Text>
+          ) : null}
+
+          {secondaryCtaPrefix || secondaryCta ? (
+            <div className="flex md:hidden">
+              {secondaryCtaPrefix && (
+                <Text as="span" className="body2 mr-1">
+                  {secondaryCtaPrefix}
+                </Text>
+              )}
+              {secondaryCta && (
+                <Button
+                  {...secondaryCta}
+                  onModalButtonClick={onModalButtonClick}
+                  linkClassName="text-white"
+                />
+              )}
+            </div>
+          ) : null}
+        </div>
+
+        {/* Right column: bright blue background, diagonal top edge, hero image */}
+        <div className={cx("relative hidden lg:block")}>
+          {badgeImage ? (
+            <NextImage
+              src={badgeImage}
+              alt={"Badge"}
+              className="absolute -left-26 top-18 aspect-square w-52 object-cover object-center"
+              width={208}
+              height={208}
+              quality={90}
+              loading="eager"
+            />
+          ) : null}
+          {carouselImages && carouselImages[0] ? (
+            <NextImage
+              src={carouselImages[0]}
+              alt={"Hero"}
+              className="aspect-square rounded-[40px] object-cover object-center"
+              width={600}
+              height={600}
+              quality={90}
+              loading="eager"
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrimaryHero;

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

@@ -1,35 +1,35 @@
-import React from "react";
-
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export type PrimaryHeroProps = {
-  title: string;
-  showAsHeading?: boolean;
-  subTitle?: string;
-  price?: string;
-  priceSuffix?: string;
-  priceCallout?: string;
-  pricingDescription?: string;
-  pricingDescriptionDisclaimer?: string;
-  checklist?: {
-    title: string;
-    iconUrl?: string;
-    anchorId?: string;
-  }[];
-  logoLockup?: string;
-  checkAvailabilityEyebrow?: string;
-  primaryCtaPrefix1?: string;
-  primaryCtaPrefix2?: string;
-  primaryCta1?: any;
-  primaryCta2?: any;
-  secondaryCtaPrefix?: string;
-  secondaryCta?: any;
-  bottomLink?: any;
-  carouselImages?: string[];
-  squareImage?: boolean;
-  badgeImage?: string;
-  textColor?: string;
-  maxWidth?: boolean;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-  onModalButtonClick?: (id?: string) => void;
-};
+import React from "react";
+
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export type PrimaryHeroProps = {
+  title: string;
+  showAsHeading?: boolean;
+  subTitle?: string;
+  price?: string;
+  priceSuffix?: string;
+  priceCallout?: string;
+  pricingDescription?: string;
+  pricingDescriptionDisclaimer?: string;
+  checklist?: {
+    title: string;
+    iconUrl?: string;
+    anchorId?: string;
+  }[];
+  logoLockup?: string;
+  checkAvailabilityEyebrow?: string;
+  primaryCtaPrefix1?: string;
+  primaryCtaPrefix2?: string;
+  primaryCta1?: any;
+  primaryCta2?: any;
+  secondaryCtaPrefix?: string;
+  secondaryCta?: any;
+  bottomLink?: any;
+  carouselImages?: string[];
+  squareImage?: boolean;
+  badgeImage?: string;
+  textColor?: string;
+  maxWidth?: boolean;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  onModalButtonClick?: (id?: string) => void;
+};