@windstream/react-shared-components 0.2.73 → 0.2.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.73",
+  "version": "0.2.75",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/rich-text-basic/index.tsx

@@ -87,7 +87,8 @@ export const RichTextBasic: FC<RichTextBasicProps> = props => {
       }
       className={cx(
         "last:[&_p]:mb-0",
-        "text-body1 leading-normal",
+        // mobile-first: body3/leading-6 below md, body1/leading-normal from md up
+        "text-body3 leading-6 md:text-body1 md:leading-normal",
         "[&_b]:font-bold [&_strong]:font-bold [&_i]:italic [&_em]:italic",
         className,
         !enableMaxWidth && "max-w-none"

package/src/contentful/blocks/cards/product-card/index.test.tsx

@@ -281,6 +281,37 @@ describe("ProductCard", () => {
       expect(screen.queryByText("Free router")).not.toBeInTheDocument();
     });
 
+    it("omits the empty gift slot when no visible card has a gift", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} hasAnyGift={false} />
+      );
+      expect(
+        container.querySelector("[data-pc-gift-empty]")
+      ).not.toBeInTheDocument();
+    });
+
+    it("reserves the empty gift slot when a visible card has a gift", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} hasAnyGift={true} />
+      );
+      expect(
+        container.querySelector("[data-pc-gift-empty]")
+      ).toBeInTheDocument();
+    });
+
+    it("renders the real gift slot (not the empty placeholder) when the card has its own gift", () => {
+      const giftBadge = [
+        { title: "Free router", icon: "/router.png" },
+      ] as any;
+      const { container } = render(
+        <ProductCard {...defaultProps} giftBadge={giftBadge} hasAnyGift={true} />
+      );
+      expect(
+        container.querySelector("[data-pc-gift-empty]")
+      ).not.toBeInTheDocument();
+      expect(container.querySelector("[data-pc-gift]")).toBeInTheDocument();
+    });
+
     it("renders the piped dollar value with the heavier label3 weight", () => {
       const giftBadge = [
         { title: "|$100| prepaid Mastercard®", icon: "/card.png" },

package/src/contentful/blocks/cards/product-card/index.tsx

@@ -53,6 +53,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   ismaxSpeed,
   priceSuffixBottom,
   hasAnyBadge = false,
+  hasAnyGift = false,
   twoColumn = false,
   enableBusinessSettings = false,
 }) => {
@@ -109,7 +110,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
       >
         {/* Plan Name & Price */}
         <header
-          data-pc-header
+          data-pc-header={true}
           className="overflow-none flex flex-wrap items-start justify-between gap-2 md:gap-4"
         >
           <div className="flex w-full flex-col md:w-auto">
@@ -178,7 +179,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         </header>
 
         {/* Description */}
-        <section data-pc-description>
+        <section data-pc-description={true}>
           <Text
             className={cx(
               twoColumn ? "footnote md:body2" : "body2",
@@ -192,7 +193,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
         {/* Gift Badge */}
         {giftBadge?.length ? (
-          <div data-pc-gift className="min-h-[76px]">
+          <div data-pc-gift={true}>
             <div
               className={cx(
                 "flex w-full flex-col gap-3 rounded-surface-sm p-2",
@@ -225,11 +226,11 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               })}
             </div>
           </div>
-        ) : (
+        ) : hasAnyGift ? (
           <div
-            data-pc-gift
-            data-pc-gift-empty
-            className="invisible min-h-[76px] p-2"
+            data-pc-gift={true}
+            data-pc-gift-empty={true}
+            className="invisible p-2"
             aria-hidden="true"
           >
             <Text
@@ -242,7 +243,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               &nbsp;
             </Text>
           </div>
-        )}
+        ) : null}
 
         {/* CTA + features pinned to the bottom so they align across cards of
             differing content height (e.g. with/without a gift badge). */}

package/src/contentful/blocks/cards/product-card/types.ts

@@ -31,6 +31,7 @@ export interface ProductCardProps {
   /** True when any card in the set has a best-value badge, so non-badge cards
    *  reserve the banner height and stay vertically aligned. */
   hasAnyBadge?: boolean;
+  hasAnyGift?: boolean;
   /** True when the card renders in the two-column mobile layout, which uses the
    *  compact mobile typography below `md`. One-column stacks keep the standard
    *  sizes at every breakpoint. */

package/src/contentful/blocks/carousel/Carousel.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Carousel } from "./index";
 import type { carouselFieldsInterface } from "./types";
 
@@ -31,7 +32,8 @@ const sampleProduct = (
   productCardDescription = "Reliable internet for your home.",
   giftRewards: { list: { items: Array<{ title: string; icon: string }> } } = {
     list: { items: [] },
-  }
+  },
+  productCategory?: string
 ) => ({
   __typename: "ComponentProductCard" as const,
   sys: { id },
@@ -41,6 +43,7 @@ const sampleProduct = (
   techType: "Fiber",
   highlighted,
   productCardDescription,
+  productCategory,
   benefitsTitle: "Plan benefits",
   benefitsExpanded: false,
   cta: { buttonLabel: "Select plan" },
@@ -83,8 +86,20 @@ const twoColumnFields: carouselFieldsInterface = {
           },
         }
       ),
-      sampleProduct("plan-3", "1 Gig", "69", false, "Good for most day-to-day internet uses including streaming video."),
-      sampleProduct("plan-4", "2 Gig", "89", false, "Worry-free internet for the whole home."),
+      sampleProduct(
+        "plan-3",
+        "1 Gig",
+        "69",
+        false,
+        "Good for most day-to-day internet uses including streaming video."
+      ),
+      sampleProduct(
+        "plan-4",
+        "2 Gig",
+        "89",
+        false,
+        "Worry-free internet for the whole home."
+      ),
     ],
   },
 };
@@ -106,3 +121,288 @@ export const TwoColumnProductCards: Story = {
   },
 };
 
+const mastercardGift = (amount: string) => ({
+  list: {
+    items: [
+      {
+        title: `|$${amount}| prepaid Mastercard®`,
+        icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' rx='4' fill='%23ffd200'/%3E%3C/svg%3E",
+      },
+    ],
+  },
+});
+
+const tabbedFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-tabbed-gift" },
+  title: "fiber internet plans that fit your way of working",
+  twoColumn: false,
+  backgroundColor: "white",
+  items: {
+    items: [
+      // "Business Ready" tab — cards carry a gift badge, so the gift slot is
+      // reserved and the CTAs stay aligned.
+      sampleProduct(
+        "br-1",
+        "fiber 1 gig",
+        "99",
+        true,
+        "Fast, secure connectivity solution for growing teams.",
+        mastercardGift("100"),
+        "Business Ready"
+      ),
+      sampleProduct(
+        "br-2",
+        "fiber 2 gig",
+        "129",
+        false,
+        "Ultra-fast connectivity solution for high-traffic businesses.",
+        mastercardGift("200"),
+        "Business Ready"
+      ),
+      // "Internet Only" tab — no gift badges, so the gift slot must collapse and
+      // the CTA should sit flush with the description (the fix under test).
+      sampleProduct(
+        "io-1",
+        "fiber 300 mbps",
+        "49",
+        true,
+        "Ideal for guest Wi-Fi, multiple POS devices, video uploads and streaming.",
+        { list: { items: [] } },
+        "Internet Only"
+      ),
+    ],
+  },
+};
+
+const TabbedTemplate = () => {
+  const [activeTab, setActiveTab] = useState("Business Ready");
+  return (
+    <div style={{ width: "100%", maxWidth: 960 }}>
+      <Carousel
+        fields={tabbedFields}
+        hasProductCards={true}
+        hasTestimonialCards={false}
+        disclaimerText={
+          "Price includes a $5.00/mo credit with AutoPay, option to disable at the next step."
+        }
+        backgroundColor="bg-white"
+        showSwitch={true}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        tabs={["Business Ready", "Internet Only"]}
+      />
+    </div>
+  );
+};
+
+/**
+ * Reproduces the reported gap: switching to the "Internet Only" tab (whose cards
+ * have no gift badge) must collapse the gift slot so the Select plan CTA sits
+ * flush with the description, while the "Business Ready" tab (gift badges
+ * present) keeps the slot reserved so CTAs stay aligned.
+ */
+export const TabbedGiftAlignment: Story = {
+  parameters: { layout: "fullscreen" },
+  render: () => <TabbedTemplate />,
+};
+
+const mixedGiftFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-mixed-gift" },
+  title: "Mixed gift / no-gift cards",
+  subTitle: "The no-gift card reserves the gift height so both CTAs align.",
+  twoColumn: false,
+  backgroundColor: "white",
+  items: {
+    items: [
+      sampleProduct(
+        "mixed-1",
+        "fiber 1 gig",
+        "99",
+        true,
+        "Fast, secure connectivity solution for growing teams.",
+        mastercardGift("100")
+      ),
+      sampleProduct(
+        "mixed-2",
+        "fiber 2 gig",
+        "129",
+        false,
+        "Ultra-fast connectivity solution for high-traffic businesses."
+      ),
+    ],
+  },
+};
+
+/**
+ * One card has a single gift badge, the other has none. The no-gift card must
+ * reserve the gift-slot height so both Select plan CTAs sit at the same height,
+ * while the gift card's CTA sits directly below its badge (no over-reservation).
+ */
+export const MixedGiftAlignment: Story = {
+  parameters: { layout: "fullscreen" },
+  args: {
+    fields: mixedGiftFields,
+    hasProductCards: true,
+    hasTestimonialCards: false,
+    disclaimerText: null,
+    backgroundColor: "bg-white",
+    activeTab: "",
+    setActiveTab: () => {},
+    tabs: [],
+  },
+};
+
+const tabbedMixedFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-tabbed-mixed-gift" },
+  title: "fiber internet plans that fit your way of working",
+  twoColumn: false,
+  backgroundColor: "white",
+  items: {
+    items: [
+      // "Business Ready" tab — one card has a gift badge, one does not. The
+      // no-gift card must reserve the gift height so both CTAs align.
+      sampleProduct(
+        "tm-br-1",
+        "fiber 1 gig",
+        "99",
+        true,
+        "Fast, secure connectivity solution for growing teams.",
+        mastercardGift("100"),
+        "Business Ready"
+      ),
+      sampleProduct(
+        "tm-br-2",
+        "fiber 2 gig",
+        "129",
+        false,
+        "Ultra-fast connectivity solution for high-traffic businesses.",
+        { list: { items: [] } },
+        "Business Ready"
+      ),
+      // "Internet Only" tab — neither card has a gift badge, so both gift slots
+      // collapse and both CTAs sit flush with the description (recalculated for
+      // this tab on switch).
+      sampleProduct(
+        "tm-io-1",
+        "fiber 300 mbps",
+        "49",
+        false,
+        "Ideal for guest Wi-Fi, multiple POS devices, video uploads and streaming.",
+        { list: { items: [] } },
+        "Internet Only"
+      ),
+      sampleProduct(
+        "tm-io-2",
+        "fiber 500 mbps",
+        "59",
+        true,
+        "Great for busy storefronts with several connected devices.",
+        { list: { items: [] } },
+        "Internet Only"
+      ),
+    ],
+  },
+};
+
+const TabbedMixedTemplate = () => {
+  const [activeTab, setActiveTab] = useState("Business Ready");
+  return (
+    <div style={{ width: "100%", maxWidth: 960 }}>
+      <Carousel
+        fields={tabbedMixedFields}
+        hasProductCards={true}
+        hasTestimonialCards={false}
+        disclaimerText={
+          "Price includes a $5.00/mo credit with AutoPay, option to disable at the next step."
+        }
+        backgroundColor="bg-white"
+        showSwitch={true}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        tabs={["Business Ready", "Internet Only"]}
+      />
+    </div>
+  );
+};
+
+/**
+ * Tab-switch coverage: the "Business Ready" tab mixes one gift card with one
+ * no-gift card (the no-gift card reserves the gift height so both CTAs align),
+ * while the "Internet Only" tab has two no-gift cards (both gift slots collapse
+ * and the CTAs sit flush with the description). Switching tabs recalculates the
+ * gift-slot height for only the visible cards.
+ */
+export const TabbedMixedGiftAlignment: Story = {
+  parameters: { layout: "fullscreen" },
+  render: () => <TabbedMixedTemplate />,
+};
+
+const twoColumnRowGiftFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-two-column-row-gift" },
+  title: "Two-column rows: per-row gift height",
+  subTitle:
+    "On mobile (resize below 768px) the giftless top row collapses while the gift row below reserves its own height.",
+  twoColumn: true,
+  backgroundColor: "white",
+  items: {
+    items: [
+      // Row 1 — both giftless: the gift slot must collapse so these CTAs sit
+      // flush with the description (they must NOT borrow row 2's gift height).
+      sampleProduct(
+        "row-1a",
+        "fiber 100 mbps",
+        "19",
+        false,
+        "Reliable support for essentials like email, browsing, and video chat."
+      ),
+      sampleProduct(
+        "row-1b",
+        "fiber 300 mbps",
+        "34",
+        false,
+        "Good for most day-to-day internet uses including streaming video."
+      ),
+      // Row 2 — both have a gift badge: this row reserves its own gift height.
+      sampleProduct(
+        "row-2a",
+        "fiber 1 gig",
+        "39",
+        false,
+        "Boosted speed and capacity for working from a home office.",
+        mastercardGift("100")
+      ),
+      sampleProduct(
+        "row-2b",
+        "fiber 2 gig",
+        "59",
+        false,
+        "Ultra-fast speeds for large smart homes.",
+        mastercardGift("200")
+      ),
+    ],
+  },
+};
+
+/**
+ * Two-column mobile regression guard: gift-slot height is equalized per row
+ * (the cards next to each other), never across the whole tab. Resize below
+ * 768px — row 1 (both giftless) collapses so its CTAs sit flush with the
+ * description, while row 2 (both with a gift) reserves only its own height.
+ */
+export const TwoColumnRowGiftAlignment: Story = {
+  parameters: { layout: "fullscreen" },
+  args: {
+    fields: twoColumnRowGiftFields,
+    hasProductCards: true,
+    hasTestimonialCards: false,
+    disclaimerText: null,
+    backgroundColor: "bg-white",
+    activeTab: "",
+    setActiveTab: () => {},
+    tabs: [],
+  },
+};