@windstream/react-shared-components 0.2.87 → 0.2.88

package/package.json

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

package/src/components/checklist/index.test.tsx

@@ -19,11 +19,18 @@ jest.mock("@shared/components/list", () => ({
   ListItem: ({
     children,
     className,
+    ...rest
   }: {
     children: React.ReactNode;
     className?: string;
   }) => (
-    <li data-testid="list-item" className={className}>
+    <li
+      data-testid="list-item"
+      className={className}
+      {...Object.fromEntries(
+        Object.entries(rest).filter(([k]) => k.startsWith("data-"))
+      )}
+    >
       {children}
     </li>
   ),
@@ -109,6 +116,29 @@ describe("Checklist", () => {
     });
   });
 
+  describe("fieldProps", () => {
+    it("spreads each structured item's fieldProps onto its own row", () => {
+      render(
+        <Checklist
+          items={[
+            { title: "One", fieldProps: { "data-contentful-entry-id": "a" } },
+            { title: "Two", fieldProps: { "data-contentful-entry-id": "b" } },
+          ]}
+        />
+      );
+      const rows = screen.getAllByTestId("list-item");
+      expect(rows[0]).toHaveAttribute("data-contentful-entry-id", "a");
+      expect(rows[1]).toHaveAttribute("data-contentful-entry-id", "b");
+    });
+
+    it("renders no tagging attributes for plain or untagged items", () => {
+      render(<Checklist items={["Plain", { title: "Structured" }]} />);
+      screen.getAllByTestId("list-item").forEach(row => {
+        expect(row).not.toHaveAttribute("data-contentful-entry-id");
+      });
+    });
+  });
+
   describe("icons", () => {
     it("renders check icons by default", () => {
       render(<Checklist items={["Item 1"]} />);

package/src/components/checklist/index.tsx

@@ -74,6 +74,7 @@ export const Checklist: React.FC<ChecklistProps> = props => {
               `${showIcons ? "flex" : ""} ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
               listItemClassName
             )}
+            {...(structured ? item.fieldProps : undefined)}
           >
             {showIcons && hasCustomIcon ? (
               <div className="flex shrink-0 leading-none">

package/src/components/checklist/types.ts

@@ -2,6 +2,8 @@ export type ChecklistItem = {
   title: React.ReactNode;
   iconUrl?: string;
   iconAlt?: string;
+  /** Extra DOM attribute props, spread onto this item's list row. */
+  fieldProps?: Record<string, unknown>;
 };
 
 export type ChecklistProps = {

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

@@ -179,6 +179,29 @@ describe("ProductCard", () => {
     });
   });
 
+  describe("Missing price", () => {
+    it.each([
+      ["empty", ""],
+      ["undefined", undefined],
+    ])("hides the price block when price is %s", (_label, price) => {
+      const { container } = render(
+        <ProductCard
+          {...defaultProps}
+          price={price}
+          priceSuffixBottom="for 12 months"
+        />
+      );
+      expect(screen.queryByText("$")).not.toBeInTheDocument();
+      expect(screen.queryByText(/\/mo/)).not.toBeInTheDocument();
+      expect(screen.queryByText("for 12 months")).not.toBeInTheDocument();
+      expect(container.textContent).not.toContain("0.00");
+      expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+        "Kinetic 500"
+      );
+      expect(screen.getByTestId("select-plan-btn")).toBeInTheDocument();
+    });
+  });
+
   describe("Best Value", () => {
     it("renders best value banner when bestValue is true", () => {
       render(<ProductCard {...defaultProps} bestValue={true} />);
@@ -300,11 +323,13 @@ describe("ProductCard", () => {
     });
 
     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 giftBadge = [{ title: "Free router", icon: "/router.png" }] as any;
       const { container } = render(
-        <ProductCard {...defaultProps} giftBadge={giftBadge} hasAnyGift={true} />
+        <ProductCard
+          {...defaultProps}
+          giftBadge={giftBadge}
+          hasAnyGift={true}
+        />
       );
       expect(
         container.querySelector("[data-pc-gift-empty]")

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

@@ -137,51 +137,53 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               ) : null}
             </Text>
           </div>
-          <div className="flex flex-col items-start md:items-end">
-            <div className="flex items-start" {...fieldProps?.price}>
-              <Text
-                as="span"
-                className={cx(
-                  priceUnitClass,
-                  "mr-1 mt-[2px]",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                $
-              </Text>
-              <Text
-                as="span"
-                className={cx(
-                  priceIntegerClass,
-                  "leading-none",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {price.split(".")[0]}
-              </Text>
-              <Text
-                as="span"
-                className={cx(
-                  priceUnitClass,
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {`${price.split(".")[1]}${priceUnit}`}
-              </Text>
+          {price ? (
+            <div className="flex flex-col items-start md:items-end">
+              <div className="flex items-start" {...fieldProps?.price}>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceUnitClass,
+                    "mr-1 mt-[2px]",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  $
+                </Text>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceIntegerClass,
+                    "leading-none",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {price.split(".")[0]}
+                </Text>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceUnitClass,
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {`${price.split(".")[1]}${priceUnit}`}
+                </Text>
+              </div>
+              {priceSuffixBottom ? (
+                <Text
+                  as="span"
+                  {...fieldProps?.priceSuffixBottom}
+                  className={cx(
+                    "micro text-nowrap",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {priceSuffixBottom}
+                </Text>
+              ) : null}
             </div>
-            {priceSuffixBottom ? (
-              <Text
-                as="span"
-                {...fieldProps?.priceSuffixBottom}
-                className={cx(
-                  "micro text-nowrap",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {priceSuffixBottom}
-              </Text>
-            ) : null}
-          </div>
+          ) : null}
         </header>
 
         {/* Description */}

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

@@ -10,7 +10,7 @@ export interface ProductCardProps {
   speed: string;
   techType?: string;
   ismaxSpeed?: boolean;
-  price: string;
+  price?: string;
   /** The price unit rendered after the cents, e.g. "/mo" or "/mo*". Defaults
    *  to "/mo". Lets Contentful control a trailing disclaimer star. */
   priceUnit?: string;

package/src/contentful/blocks/carousel/helper.test.tsx

@@ -34,11 +34,13 @@ jest.mock("@shared/contentful/blocks/cards/product-card", () => ({
     enableBusinessSettings,
     giftBadge,
     hasAnyGift,
+    price,
   }: any) => (
     <article
       data-testid="product-card"
       data-plan={planName}
       data-speed={speed}
+      data-price={price}
       data-expanded={isExpanded}
       data-business={enableBusinessSettings ? "true" : "false"}
     >
@@ -373,6 +375,28 @@ describe("ProductCardCarousel", () => {
     expect(card).toHaveAttribute("data-plan", "500 Mbps");
   });
 
+  it("passes the formatted price when a price is authored", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toHaveAttribute(
+      "data-price",
+      "49.99"
+    );
+  });
+
+  it.each([
+    ["undefined", undefined],
+    ["empty", ""],
+  ])("passes an empty price (not 0.00) when price is %s", (_label, price) => {
+    const item = { ...sampleProduct, price };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toHaveAttribute(
+      "data-price",
+      ""
+    );
+  });
+
   it("renders Next arrow and hides Previous on first slide in carousel mode", async () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,

package/src/contentful/blocks/carousel/helper.tsx

@@ -380,7 +380,7 @@ function ProductCardPanel({
     const planName = planContent?.[0] || "";
     const planSubtext = planContent?.[1] || "";
     const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
-    const formattedPrice = `${item?.price || "0"}.${priceCents}`;
+    const formattedPrice = item?.price ? `${item.price}.${priceCents}` : "";
     // Preserve the full unit after the cents (e.g. "/mo*") so a Contentful
     // disclaimer star renders; fall back to "/mo" when no unit is present.
     const suffixParts = item?.priceSuffix?.split("/") || [];