@windstream/react-shared-components 0.2.34 → 0.2.36

package/src/contentful/blocks/ordered-list/index.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { ReactNode } from "react";
+import { OrderedListProps } from "./types";
+
+import { Link } from "@shared/components/link";
+import { Text } from "@shared/components/text";
+import { DynamicTabs } from "@shared/contentful/blocks/dynamic-tabs";
+
+export const OrderedList = ({
+  anchorId,
+  backgroundColor = "white",
+  title,
+  description,
+  tabs,
+}: OrderedListProps) => {
+  const formatItemName = (name: string) =>
+    name
+      .split(" ")
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(" ");
+
+  // Child rendering for a single list item (itemName / itemSlug). The tab
+  // section UI and the column wrapper for these nodes live in DynamicTabs.
+  const renderChild = (
+    item: OrderedListProps["tabs"][number]["items"]["tabContent"][number],
+    index: number
+  ): ReactNode => {
+    if (!item.itemSlug) {
+      return (
+        <Text
+          key={`ordered-item-${index}`}
+          className="body2 relative text-left leading-7"
+        >
+          {formatItemName(item.itemName)}
+        </Text>
+      );
+    }
+
+    return (
+      <Link
+        key={`ordered-item-${index}`}
+        href={item.itemSlug}
+        title={item.itemName.toUpperCase()}
+        className="flex items-center underline underline-offset-4"
+      >
+        <Text className="body2 relative cursor-pointer text-left leading-7">
+          {formatItemName(item.itemName)}
+        </Text>
+      </Link>
+    );
+  };
+
+  // Build the DynamicTabs `tabs` prop. Each tab's `tabContent` holds the list
+  // of React nodes; DynamicTabs arranges them into columns in ordered mode.
+  const dynamicTabs = {
+    items: tabs.map((tab, index) => ({
+      tabName: tab.items.tabName,
+      anchorId: `tab-${index}`,
+      tabContent: tab.items.tabContent.map(renderChild),
+    })),
+  };
+
+  return (
+    <section
+      className={`bg-secondary-${backgroundColor}`}
+      data-testid="non-fiber-city-list"
+      id={anchorId}
+    >
+      <div className="mx-auto w-full max-w-120 px-0 py-12 md:px-6 md:py-20 lg:px-3">
+        <div className="mb-11 px-4 md:px-0">
+          <Text as={"h2"} className="heading2 text-center md:heading1">
+            {title}
+          </Text>
+          <Text
+            as={"h3"}
+            className="subheading3 mt-2 text-center md:subheading1"
+          >
+            {description}
+          </Text>
+        </div>
+        <div className="section-body">
+          {dynamicTabs.items.length > 0 ? (
+            <div>
+              <DynamicTabs
+                dynamic={true}
+                isOrderedList={true}
+                tabs={dynamicTabs}
+                navigationType={false}
+                mobileSidebarTabType={false}
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default OrderedList;

package/src/contentful/blocks/ordered-list/types.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export interface OrderedListProps {
+  anchorId?: string;
+  backgroundColor?: "white" | "cream";
+  title: ReactNode;
+  description: ReactNode;
+  tabs: any[];
+}

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

@@ -285,6 +285,27 @@ describe("PrimaryHero", () => {
   });
 
   describe("Pricing description disclaimer", () => {
+    it("renders pricingDescription with subheading and responsive alignment classes", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          pricingDescription="Building a new home? Contact us to see if you're eligible for Kinetic Internet."
+        />
+      );
+
+      const pricingText = screen.getByText(
+        "Building a new home? Contact us to see if you're eligible for Kinetic Internet."
+      );
+
+      expect(pricingText).toBeInTheDocument();
+      expect(pricingText).toHaveClass("subheading1");
+      expect(pricingText).toHaveClass(
+        "text-left",
+        "sm:text-center",
+        "xl:text-left"
+      );
+    });
+
     it("renders pricingDescriptionDisclaimer (desktop and mobile)", () => {
       render(
         <PrimaryHero
@@ -300,7 +321,6 @@ describe("PrimaryHero", () => {
       expect(screen.queryByText("Taxes apply")).not.toBeInTheDocument();
     });
   });
-
   describe("Images", () => {
     it("renders carousel image (mobile and desktop)", () => {
       render(

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

@@ -126,15 +126,19 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
 
             {pricingDescription ? (
               <Text
-                data-cy="hero-pricing-disclaimer"
-                className={cx("text-left sm:text-center xl:text-left")}
+                data-cy="hero-pricing-description"
+                className={cx("subheading1", "text-left sm:text-center xl:text-left")}
               >
                 {pricingDescription}
               </Text>
             ) : null}
 
             {pricingDescriptionDisclaimer ? (
-              <Text data-cy="hero-pricing-disclaimer" as="p" className="body3">
+              <Text
+                data-cy="hero-pricing-disclaimer"
+                as="p"
+                className={cx("body3", "text-left sm:text-center xl:text-left")}
+              >
                 {pricingDescriptionDisclaimer}
               </Text>
             ) : null}

package/src/contentful/index.ts

@@ -29,6 +29,8 @@ export type { NavigationProps } from "./blocks/navigation/types";
 export { PrimaryHero } from "./blocks/primary-hero";
 export type { PrimaryHeroProps } from "./blocks/primary-hero/types";
 
+export { OrderedList } from "./blocks/ordered-list";
+export type { OrderedListProps } from "./blocks/ordered-list/types";
 export { Text } from "./blocks/text";
 export type { TextProps } from "./blocks/text/types";