@windstream/react-shared-components 0.2.67 → 0.2.68

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

@@ -30,6 +30,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   planSubtext,
   speed,
   price,
+  priceUnit = "/mo",
   description,
   bestValue = false,
   bestValueText = "best value",
@@ -69,9 +70,9 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   // stacks keep the standard sizes at every breakpoint.
   const planNameClass = twoColumn ? "label3 md:subheading2" : "subheading2";
   const priceIntegerClass = twoColumn
-    ? "heading2 md:subheading6"
-    : "subheading6";
-  const priceUnitClass = twoColumn ? "label3 md:label2" : "label2";
+    ? "heading2 md:subheading5"
+    : "subheading5";
+  const priceUnitClass = twoColumn ? "label3" : "label1";
 
   return (
     <article className="relative flex h-full w-full max-w-[392px] flex-col">
@@ -115,15 +116,12 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               )}
             >
               {planName}
-            </Text>
-            <Text
-              as="p"
-              className={cx(
-                "label3 text-wrap lowercase",
-                isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
-              )}
-            >
-              {planSubtext}
+              {planSubtext ? (
+                <>
+                  <br />
+                  {planSubtext}
+                </>
+              ) : null}
             </Text>
           </div>
           <div className="flex flex-col items-start md:items-end">
@@ -155,14 +153,14 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                   isDark ? "text-text-inverse" : "text-text"
                 )}
               >
-                {price.split(".")[1]}/mo
+                {`${price.split(".")[1]}${priceUnit}`}
               </Text>
             </div>
             {priceSuffixBottom ? (
               <Text
                 as="span"
                 className={cx(
-                  "footnote text-nowrap",
+                  "micro text-nowrap",
                   isDark ? "text-text-inverse" : "text-text"
                 )}
               >
@@ -176,7 +174,8 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         <section data-pc-description>
           <Text
             className={cx(
-              "footnote md:body2 md:h-[56px]",
+              twoColumn ? "footnote md:body2" : "body2",
+              "md:h-[56px]",
               isDark ? "text-text-inverse" : "text-text"
             )}
           >
@@ -189,18 +188,21 @@ export const ProductCard: React.FC<ProductCardProps> = ({
           <div data-pc-gift className="min-h-[76px]">
             <div
               className={cx(
-                "flex-col items-center rounded-surface-sm p-2",
+                "flex w-full flex-col gap-3 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">
+                  <div
+                    key={badge.title}
+                    className="flex w-full items-center gap-2"
+                  >
                     <Image
                       src={badge.icon}
                       alt={badge.title}
-                      width={24}
-                      height={24}
+                      width={20}
+                      height={20}
                     />
                     <Text
                       as="div"
@@ -290,20 +292,21 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                     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"}`}
+                    listItemClassName={`body3 ${isDark ? "text-text-inverse" : "text-text"}`}
                   />
                 </div>
                 {innerBadge?.badgeIcon ? (
-                  <div className="mt-3 flex items-center gap-2 text-left">
+                  <div className="mt-3 flex items-center gap-1 text-left">
                     <Image
                       src={innerBadge.badgeIcon}
                       alt="Inner Badge"
                       width={24}
                       height={24}
+                      className="ml-1 h-auto pr-2"
                     />
                     <span
                       className={cx(
-                        "footnote",
+                        "body3",
                         isDark ? "text-text-inverse" : "text-text"
                       )}
                     >

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

@@ -10,6 +10,9 @@ export interface ProductCardProps {
   techType?: string;
   ismaxSpeed?: boolean;
   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;
   priceSuffixBottom?: string;
   description: string;
   bestValue?: boolean;

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

@@ -263,6 +263,11 @@ function ProductCardPanel({
     const planSubtext = planContent?.[1] || "";
     const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
     const formattedPrice = `${item?.price || "0"}.${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("/") || [];
+    const priceUnit =
+      suffixParts.length > 1 ? `/${suffixParts.slice(1).join("/")}` : "/mo";
     const features = item?.benefits?.items || [];
     const bestValue = item?.highlighted || false;
     const rawBadge = item?.giftRewards?.list?.items || [];
@@ -308,6 +313,7 @@ function ProductCardPanel({
           techType={item?.techType || ""}
           ismaxSpeed={item?.ismaxSpeed || ""}
           price={formattedPrice}
+          priceUnit={priceUnit}
           description={item?.productCardDescription || ""}
           giftBadge={rawBadge}
           innerBadge={innerBadge}

package/src/contentful/blocks/dynamic-form/DynamicForm.stories.tsx

@@ -54,6 +54,9 @@ const fields: DynamicFormItem[] = [
     requiredField: true,
     errorMessage: "Enter a valid phone number",
   },
+  {
+    itemType: "divider",
+  },
   {
     itemType: "formField",
     fieldId: "topic",

package/src/contentful/blocks/dynamic-form/render.test.tsx

@@ -57,6 +57,31 @@ describe("dynamicRenderingWithGroupings", () => {
     expect(screen.getByText("Custom Content")).toBeInTheDocument();
   });
 
+  it("renders a full-width divider by default", () => {
+    const { container } = renderGroups([{ itemType: "divider" }]);
+    const divider = container.querySelector<HTMLElement>('[role="separator"]');
+    expect(divider).toBeInTheDocument();
+    expect(divider).toHaveClass("w-full");
+    expect(divider?.style.height).toBe("1px");
+  });
+
+  it("renders a half-width divider with a custom thickness", () => {
+    const { container } = renderGroups([
+      { itemType: "divider", dividerLength: false, dividerThickness: 4 },
+    ]);
+    const divider = container.querySelector<HTMLElement>('[role="separator"]');
+    expect(divider).toHaveClass("w-1/2");
+    expect(divider?.style.height).toBe("4px");
+  });
+
+  it("clamps a divider thickness below 1 to 1px", () => {
+    const { container } = renderGroups([
+      { itemType: "divider", dividerThickness: 0 },
+    ]);
+    const divider = container.querySelector<HTMLElement>('[role="separator"]');
+    expect(divider?.style.height).toBe("1px");
+  });
+
   it("renders a conditional item", () => {
     renderGroups([
       {

package/src/contentful/blocks/dynamic-form/render.tsx

@@ -7,6 +7,7 @@ import FormFieldElement from "./form-field";
 import { DynamicFormItem } from "./types";
 import { groupFieldsForLayout } from "./utils";
 
+import { Divider } from "@shared/components/divider";
 import { Text } from "@shared/components/text";
 
 type FormValues = Record<string, any>;
@@ -46,6 +47,20 @@ const renderItem = (
       />
     );
   }
+  if (item.itemType === "divider") {
+    const strokeWidth = Math.max(item.dividerThickness || 1, 1);
+    const widthClass = item.dividerLength === false ? "w-1/2" : "w-full";
+    return (
+      <div key={key} className="flex w-full justify-center">
+        <Divider
+          role="separator"
+          aria-label="Content divider"
+          className={widthClass}
+          style={{ height: `${strokeWidth}px` }}
+        />
+      </div>
+    );
+  }
   return <React.Fragment key={key}>{item.content}</React.Fragment>;
 };
 

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

@@ -69,14 +69,19 @@ export interface ConditionalFieldConfig {
   grouped?: boolean;
 }
 
+export interface DynamicFormDividerConfig {
+  dividerLength?: boolean;
+  dividerThickness?: number;
+}
+
 /**
- * A flat list item rendered by the form. Either a form field, a conditional
- * field group, or an arbitrary pre-rendered node (e.g. a nested CMS block that
- * the app rendered itself and passes through).
+ * A flat list item rendered by the form: a form field, conditional field,
+ * divider, or custom React node.
  */
 export type DynamicFormItem =
   | ({ itemType: "formField" } & DynamicFormFieldConfig)
   | ({ itemType: "conditional" } & ConditionalFieldConfig)
+  | ({ itemType: "divider"; fieldId?: string } & DynamicFormDividerConfig)
   | { itemType: "custom"; fieldId?: string; content: React.ReactNode };
 
 export interface DynamicFormPayload {