@windstream/react-shared-components 0.2.60 → 0.2.61

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

@@ -11,6 +11,20 @@ import { SelectPlanButton } from "@shared/components/select-plan-button";
 import { Text } from "@shared/components/text";
 import { cx } from "@shared/utils";
 
+/** Renders text where `|...|`-wrapped segments are bold (pipes are stripped). */
+const renderPipeBold = (value: React.ReactNode): React.ReactNode => {
+  if (typeof value !== "string" || !value.includes("|")) return value;
+  return value.split("|").map((segment, index) =>
+    index % 2 === 1 ? (
+      <span key={index} className="font-bold">
+        {segment}
+      </span>
+    ) : (
+      <React.Fragment key={index}>{segment}</React.Fragment>
+    )
+  );
+};
+
 export const ProductCard: React.FC<ProductCardProps> = ({
   planName,
   planSubtext,
@@ -31,6 +45,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   cta,
   techType,
   ismaxSpeed,
+  priceSuffixBottom,
 }) => {
   const [internalExpanded, setInternalExpanded] = useState(false);
   // Use parent state if provided, otherwise use internal state
@@ -77,7 +92,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
             <Text
               as="h3"
               className={cx(
-                "subheading2",
+                "subheading2 lowercase",
                 isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
               )}
             >
@@ -85,46 +100,65 @@ export const ProductCard: React.FC<ProductCardProps> = ({
             </Text>
             <Text
               as="p"
-              className={`label3 text-wrap ${isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"}`}
-            >
-              {planSubtext}
-            </Text>
-          </div>
-          <div className="flex items-start">
-            <Text
-              as="span"
-              className={cx(
-                "label2 mr-1 mt-[2px]",
-                isDark ? "text-text-inverse" : "text-text"
-              )}
-            >
-              $
-            </Text>
-            <Text
-              as="span"
               className={cx(
-                "subheading6",
-                isDark ? "text-text-inverse" : "text-text"
-              )}
-            >
-              {price.split(".")[0]}
-            </Text>
-            <Text
-              as="span"
-              className={cx(
-                "label2",
-                isDark ? "text-text-inverse" : "text-text"
+                "label3 text-wrap lowercase",
+                isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
               )}
             >
-              {price.split(".")[1]}/mo
+              {planSubtext}
             </Text>
           </div>
+          <div className="flex flex-col items-end">
+            <div className="flex items-start">
+              <Text
+                as="span"
+                className={cx(
+                  "label2 mr-1 mt-[2px]",
+                  isDark ? "text-text-inverse" : "text-text"
+                )}
+              >
+                $
+              </Text>
+              <Text
+                as="span"
+                className={cx(
+                  "subheading6",
+                  isDark ? "text-text-inverse" : "text-text"
+                )}
+              >
+                {price.split(".")[0]}
+              </Text>
+              <Text
+                as="span"
+                className={cx(
+                  "label2",
+                  isDark ? "text-text-inverse" : "text-text"
+                )}
+              >
+                {price.split(".")[1]}/mo
+              </Text>
+            </div>
+            {priceSuffixBottom ? (
+              <Text
+                as="span"
+                className={cx(
+                  "footnote text-nowrap",
+                  isDark ? "text-text-inverse" : "text-text"
+                )}
+              >
+                {priceSuffixBottom}
+              </Text>
+            ) : null}
+          </div>
         </header>
 
         {/* Description */}
         <section>
           <Text
-            className={cx("body2", isDark ? "text-text-inverse" : "text-text")}
+            className={cx(
+              "body2 h-[56px]",
+              isDark ? "text-text-inverse" : "text-text"
+            )}
           >
             {description}
           </Text>
@@ -132,118 +166,137 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
         {/* Gift Badge */}
         {giftBadge?.length ? (
-          <div
-            className={cx(
-              "flex-col items-center rounded-surface-sm p-2",
-              isDark ? "bg-bg-surface-inverse" : "bg-bg-surface-info"
-            )}
-          >
-            {giftBadge?.map((badge: any) => {
-              return (
-                <div key={badge.title} className="flex items-center gap-2">
-                  <Image
-                    src={badge.icon}
-                    alt={badge.title}
-                    width={24}
-                    height={24}
-                  />
-                  <Text
-                    as="div"
-                    className={cx(
-                      "body3",
-                      isDark ? "text-text-inverse" : "text-text"
-                    )}
-                  >
-                    {badge.title}
-                  </Text>
-                </div>
-              );
-            })}
-          </div>
-        ) : null}
-
-        {/* CTA */}
-        <SelectPlanButton
-          onSelect={onCtaClick}
-          speed={speed}
-          isSelected={isDark}
-          renderCheckPlans={renderCheckPlans}
-          cta={cta}
-          iconSize={40}
-          techType={techType}
-          isMax={ismaxSpeed}
-        />
-        {/* Features */}
-        {features.length > 0 && (
-          <section className="flex flex-col gap-3">
-            <Button
-              onClick={handleToggle}
-              className="group flex w-full items-center gap-2 text-left"
-            >
-              <Text
-                as="h4"
-                className={cx(
-                  "label3",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {featuresTitle}
-              </Text>
-              <MaterialIcon
-                name="keyboard_arrow_down"
-                fill={1}
-                size={24}
-                className={cx(
-                  "transition-transform duration-300",
-                  isExpanded && "rotate-180",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              />
-            </Button>
+          <div className="min-h-[76px]">
             <div
               className={cx(
-                "overflow-hidden transition-all duration-200 ease-in-out",
-                isExpanded ? "opacity-100" : "max-h-0 opacity-0"
+                "flex-col items-center rounded-surface-sm p-2",
+                isDark ? "bg-bg-surface-inverse" : "bg-bg-surface-info"
               )}
             >
-              <div className="flex flex-col">
-                <Checklist
-                  items={features}
-                  iconSize={24}
-                  iconPosition="top"
-                  iconClassName="mt-0"
-                  iconColor={isDark ? "yellow" : "green"}
-                  listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
-                  listItemClassName={`${isDark ? "text-text-inverse" : "text-text"}`}
+              {giftBadge?.map((badge: any) => {
+                return (
+                  <div key={badge.title} className="flex items-center gap-2">
+                    <Image
+                      src={badge.icon}
+                      alt={badge.title}
+                      width={24}
+                      height={24}
+                    />
+                    <Text
+                      as="div"
+                      className={cx(
+                        "body3",
+                        isDark ? "text-text-inverse" : "text-text"
+                      )}
+                    >
+                      {renderPipeBold(badge.title)}
+                    </Text>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          <div className="invisible min-h-[76px] p-2" aria-hidden="true">
+            <Text
+              as="div"
+              className={cx(
+                "body3",
+                isDark ? "text-text-inverse" : "text-text"
+              )}
+            >
+              &nbsp;
+            </Text>
+          </div>
+        )}
+
+        {/* CTA + features pinned to the bottom so they align across cards of
+            differing content height (e.g. with/without a gift badge). */}
+        <div className="flex flex-col gap-5">
+          <SelectPlanButton
+            onSelect={onCtaClick}
+            speed={speed}
+            isSelected={isDark}
+            renderCheckPlans={renderCheckPlans}
+            cta={cta}
+            iconSize={40}
+            techType={techType}
+            isMax={ismaxSpeed}
+          />
+          {/* Features */}
+          {features.length > 0 && (
+            <section className="flex flex-col gap-3">
+              <Button
+                onClick={handleToggle}
+                className="group flex w-full items-center gap-2 text-left"
+              >
+                <Text
+                  as="h4"
+                  className={cx(
+                    "label3",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {featuresTitle}
+                </Text>
+                <MaterialIcon
+                  name="keyboard_arrow_down"
+                  fill={1}
+                  size={24}
+                  className={cx(
+                    "transition-transform duration-300",
+                    isExpanded && "rotate-180",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
                 />
-              </div>
-              {innerBadge?.badgeIcon ? (
-                <div className="flex items-center gap-2 text-center">
-                  <Image
-                    src={innerBadge.badgeIcon}
-                    alt="Inner Badge"
-                    width={12}
-                    height={12}
+              </Button>
+              <div
+                className={cx(
+                  "overflow-hidden transition-all duration-200 ease-in-out",
+                  isExpanded ? "opacity-100" : "max-h-0 opacity-0"
+                )}
+              >
+                <div className="flex flex-col">
+                  <Checklist
+                    items={features}
+                    iconSize={24}
+                    iconPosition="top"
+                    iconClassName="mt-0"
+                    iconColor={isDark ? "yellow" : "green"}
+                    listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
+                    listItemClassName={`${isDark ? "text-text-inverse" : "text-text"}`}
                   />
-                  <span className="footnote text-text">
-                    {innerBadge.badgeText.includes("|") ? (
-                      <>
-                        <span className="font-bold">
-                          {innerBadge.badgeText.split("|")[0]}
-                        </span>
-                        <span className="font-normal">
-                          {innerBadge.badgeText.split("|")[1]}
-                        </span>
-                      </>
-                    ) : (
-                      <Text className="font-bold">{innerBadge.badgeText}</Text>
-                    )}
-                  </span>
                 </div>
-              ) : null}
-            </div>
-          </section>
-        )}
+                {innerBadge?.badgeIcon ? (
+                  <div className="mt-3 flex items-center gap-2 text-center">
+                    <Image
+                      src={innerBadge.badgeIcon}
+                      alt="Inner Badge"
+                      width={12}
+                      height={12}
+                    />
+                    <span className="footnote text-text">
+                      {innerBadge.badgeText.includes("|") ? (
+                        <>
+                          <span className="font-bold">
+                            {innerBadge.badgeText.split("|")[0]}
+                          </span>
+                          <span className="font-normal">
+                            {innerBadge.badgeText.split("|")[1]}
+                          </span>
+                        </>
+                      ) : (
+                        <Text className="font-bold">
+                          {innerBadge.badgeText}
+                        </Text>
+                      )}
+                    </span>
+                  </div>
+                ) : null}
+              </div>
+            </section>
+          )}
+        </div>
       </div>
     </article>
   );

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

@@ -10,6 +10,7 @@ export interface ProductCardProps {
   techType?: string;
   ismaxSpeed?: boolean;
   price: string;
+  priceSuffixBottom?: string;
   description: string;
   bestValue?: boolean;
   bestValueText?: string;
@@ -23,6 +24,5 @@ export interface ProductCardProps {
   ctaText?: string;
   cta?: ButtonProps;
   onCtaClick: () => void;
-  hostType: "residential" | "smb";
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 }

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

@@ -1,4 +1,5 @@
 import { Carousel } from "./index";
+import type { carouselFieldsInterface } from "./types";
 
 import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -21,3 +22,61 @@ const meta: Meta<typeof Carousel> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
+
+const sampleProduct = (
+  id: string,
+  planName: string,
+  price: string,
+  highlighted = false
+) => ({
+  __typename: "ComponentProductCard" as const,
+  sys: { id },
+  speed: `${planName}|Fiber internet`,
+  price,
+  priceSuffix: "99/mo",
+  techType: "Fiber",
+  highlighted,
+  productCardDescription: "Reliable internet for your home.",
+  benefitsTitle: "Plan benefits",
+  benefitsExpanded: false,
+  cta: { buttonLabel: "Select plan" },
+  benefits: {
+    items: [{ text: "No data caps" }, { text: "Free installation" }],
+  },
+  giftRewards: { list: { items: [] } },
+});
+
+const twoColumnFields: carouselFieldsInterface = {
+  __typename: "ComponentCarousel",
+  sys: { id: "carousel-two-column" },
+  title: "Two-column product cards",
+  subTitle: "Renders as a two-column grid on mobile (resize below 768px).",
+  twoColumn: true,
+  backgroundColor: "white",
+  items: {
+    items: [
+      sampleProduct("plan-1", "300 Mbps", "49"),
+      sampleProduct("plan-2", "600 Mbps", "59", true),
+      sampleProduct("plan-3", "1 Gig", "69"),
+      sampleProduct("plan-4", "2 Gig", "89"),
+    ],
+  },
+};
+
+/**
+ * Two-column variant: on mobile (below 768px) product cards render in a
+ * two-column grid instead of a vertical stack. Resize the canvas to see it.
+ */
+export const TwoColumnProductCards: Story = {
+  args: {
+    fields: twoColumnFields,
+    hasProductCards: true,
+    hasTestimonialCards: false,
+    disclaimerText: null,
+    backgroundColor: "bg-white",
+    activeTab: "",
+    setActiveTab: () => {},
+    tabs: [],
+  },
+};
+

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

@@ -162,6 +162,29 @@ describe("ProductCardCarousel", () => {
     expect(container.querySelector(".flex-col")).toBeInTheDocument();
   });
 
+  it("renders a two-column grid on mobile in carousel mode when twoColumn is set", () => {
+    const items = Array.from({ length: 4 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = createProductFields(items);
+    fields.twoColumn = true;
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    // Mobile view uses a two-column grid instead of a vertical stack
+    expect(container.querySelector(".grid.grid-cols-2")).toBeInTheDocument();
+    expect(container.querySelector(".flex-col")).not.toBeInTheDocument();
+  });
+
+  it("renders a two-column grid on mobile in non-carousel mode when twoColumn is set", () => {
+    const fields = createProductFields([
+      sampleProduct,
+      { ...sampleProduct, sys: { id: "prod-2" } },
+    ]);
+    fields.twoColumn = true;
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    expect(container.querySelector(".grid.grid-cols-2")).toBeInTheDocument();
+  });
+
   it("parses speed field correctly (planName | planSubtext)", () => {
     const fields = createProductFields([sampleProduct]);
     render(<ProductCardCarousel fields={fields} />);

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

@@ -33,6 +33,7 @@ function ProductCardPanel({
   const [swipeOffset, setSwipeOffset] = useState(0);
   const [isSwiping, setIsSwiping] = useState(false);
   const items = fields?.items?.items || [];
+  const twoColumn = fields?.twoColumn || false;
   const isCarousel = items.length > 2;
   const showArrows = fields?.showArrows !== false && isCarousel;
   const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
@@ -232,20 +233,32 @@ function ProductCardPanel({
           onCtaClick={handleCtaClick}
           renderCheckPlans={renderCheckPlans}
           cta={item.cta}
-          hostType="smb"
+          priceSuffixBottom={item?.priceSuffixBottom}
         />
       </div>
     );
   };
 
   return !isCarousel ? (
-    <div className="flex w-full max-w-[1280px] flex-wrap justify-center gap-4">
-      {items.map((item, index) => renderCard(item, index))}
+    <div
+      className={cx(
+        "w-full max-w-[1280px] gap-4",
+        twoColumn
+          ? "grid grid-cols-2 md:flex md:flex-wrap md:justify-center"
+          : "flex flex-wrap justify-center"
+      )}
+    >
+      {items.map((item, index) => renderCard(item, index, twoColumn))}
     </div>
   ) : (
     <>
-      {/* Mobile/Tablet View: Vertical Stack */}
-      <div className="flex flex-col gap-6 md:hidden">
+      {/* Mobile/Tablet View: Vertical Stack (or two-column grid) */}
+      <div
+        className={cx(
+          "md:hidden",
+          twoColumn ? "grid grid-cols-2 gap-4" : "flex flex-col gap-6"
+        )}
+      >
         {items.map((item, index) => renderCard(item, index, true))}
       </div>
 

package/src/contentful/blocks/carousel/types.ts

@@ -17,6 +17,8 @@ export interface carouselFieldsInterface {
   initialSlideIndex?: number;
   infiniteScroll?: boolean;
   mobileNavigationType?: boolean;
+  // When true, product cards render in a two-column grid on mobile instead of a vertical stack.
+  twoColumn?: boolean;
   disclaimerText?: {
     json: any;
   };
@@ -58,6 +60,7 @@ export interface ProductCardFields {
   speed?: string;
   price?: string;
   priceSuffix?: string;
+  priceSuffixBottom?: string;
   techType?: string;
   highlighted?: boolean;
   productCardDescription?: string;

package/src/contentful/blocks/dynamic-form/conditional-fields.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ConditionalFormFields from "./conditional-fields";
 import { FormContext, FormContextType } from "./context";
+import { dynamicRenderingWithGroupings } from "./render";
 import { DynamicFormItem } from "./types";
 
 import { fireEvent, render, screen } from "@testing-library/react";
@@ -46,6 +47,7 @@ const renderConditional = (
         formData={{}}
         setFormData={setFormData}
         submitErrorFields={[]}
+        renderConditionalFields={dynamicRenderingWithGroupings}
         {...props}
       />
     </FormContext.Provider>
@@ -99,6 +101,7 @@ describe("ConditionalFormFields", () => {
           formData={{}}
           setFormData={jest.fn()}
           submitErrorFields={[]}
+          renderConditionalFields={dynamicRenderingWithGroupings}
         />
       </FormContext.Provider>
     );

package/src/contentful/blocks/dynamic-form/conditional-fields.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import React, { useContext, useState } from "react";
+import { constants } from "./constants";
 import { FormContext } from "./context";
 import { FormFieldTypeMap, labelCreator } from "./field-map";
-import { dynamicRenderingWithGroupings } from "./render";
-import { ConditionalFieldConfig } from "./types";
+import { ConditionalFieldConfig, DynamicFormItem } from "./types";
 
 import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
 
 type FieldError = { fieldId?: string; errorMessage: string };
 type FormValues = Record<string, any>;
@@ -15,6 +16,13 @@ export interface ConditionalFormFieldsProps extends ConditionalFieldConfig {
   formData: FormValues;
   setFormData: (updater: (prev: FormValues) => FormValues) => void;
   submitErrorFields: string[];
+  renderConditionalFields: (
+    isLoading: boolean,
+    fields: DynamicFormItem[],
+    formData: FormValues,
+    setFormData: (updater: (prev: FormValues) => FormValues) => void,
+    submitErrorFields: string[]
+  ) => React.ReactNode[];
 }
 
 const ConditionalFormFields: React.FC<ConditionalFormFieldsProps> = props => {
@@ -29,6 +37,8 @@ const ConditionalFormFields: React.FC<ConditionalFormFieldsProps> = props => {
     formFieldsToShow = [],
     dataSource,
     note,
+    grouped = false,
+    renderConditionalFields,
   } = props;
 
   const [showElements, setShowElements] = useState(false);
@@ -37,6 +47,11 @@ const ConditionalFormFields: React.FC<ConditionalFormFieldsProps> = props => {
     errorMessage: "",
   });
 
+  const isExigentGroupedField =
+    grouped &&
+    (fieldId === constants.TARGET_EMAIL ||
+      fieldId === constants.IP_PHONE_NUMBER);
+
   const Component = FormFieldTypeMap["Radio"];
   if (!Component) return null;
 
@@ -57,7 +72,18 @@ const ConditionalFormFields: React.FC<ConditionalFormFieldsProps> = props => {
   };
 
   return (
-    <div className="w-full">
+    <div
+      className={cx(
+        "w-full",
+        isExigentGroupedField && "bg-bg-surface-secondary px-5 pt-1",
+        isExigentGroupedField &&
+          fieldId === constants.IP_PHONE_NUMBER &&
+          "rounded-t-xl border-x border-b border-border-secondary",
+        isExigentGroupedField &&
+          fieldId === constants.TARGET_EMAIL &&
+          "rounded-b-xl border-x border-t border-border-secondary pb-5"
+      )}
+    >
       <div className="mb-4">
         {labelCreator(displayName, requiredField)}
         <Component
@@ -88,7 +114,7 @@ const ConditionalFormFields: React.FC<ConditionalFormFieldsProps> = props => {
         }`}
       >
         {showElements &&
-          dynamicRenderingWithGroupings(
+          renderConditionalFields(
             false,
             formFieldsToShow,
             formData,

package/src/contentful/blocks/dynamic-form/context.ts

@@ -22,6 +22,8 @@ export type FormContextType = {
   fieldComponentOverrides?: Partial<
     Record<DynamicFormFieldType, React.FC<FieldRenderProps>>
   >;
+  /** App-injected renderer for address-autocomplete Text fields. */
+  renderAddressAutocomplete?: React.FC<FieldRenderProps>;
   /** Optional error reporter (logger) injected by the app. */
   onError?: (info: {
     type: string;