@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/search-block/index.test.tsx

@@ -0,0 +1,268 @@
+import React from "react";
+import { SearchBlock } from "./index";
+import { SearchBlockProps } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/button", () => ({
+  Button: ({ children, onClick, type, className, ...rest }: any) => (
+    <button onClick={onClick} type={type} className={className} {...rest}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/input", () => ({
+  Input: ({
+    value,
+    onChange,
+    placeholder,
+    className,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    containerClassName,
+    ...rest
+  }: any) => (
+    <input
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      className={className}
+      data-testid="search-input"
+      {...rest}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid={`icon-${name}`} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+const defaultProps: SearchBlockProps = {
+  title: "Search Our Plans",
+  backgroundColor: "white",
+  color: "dark",
+};
+
+describe("SearchBlock", () => {
+  describe("Rendering", () => {
+    it("renders with data-testid", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("search-block")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByText("Search Our Plans")).toBeInTheDocument();
+    });
+
+    it("renders with default anchorId", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("search-block")).toHaveAttribute(
+        "id",
+        "SearchBlock"
+      );
+    });
+
+    it("renders with custom anchorId", () => {
+      render(<SearchBlock {...defaultProps} anchorId="custom-search" />);
+      expect(screen.getByTestId("search-block")).toHaveAttribute(
+        "id",
+        "custom-search"
+      );
+    });
+
+    it("renders search input with placeholder", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          searchInputPlaceholder="Enter your address"
+        />
+      );
+      expect(screen.getByTestId("search-input")).toHaveAttribute(
+        "placeholder",
+        "Enter your address"
+      );
+    });
+
+    it("renders search icon button", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("icon-search")).toBeInTheDocument();
+    });
+
+    it("renders submit button with type submit", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const submitBtn = screen.getByTestId("icon-search").closest("button");
+      expect(submitBtn).toHaveAttribute("type", "submit");
+    });
+  });
+
+  describe("Optional content", () => {
+    it("renders subtitle when provided", () => {
+      render(<SearchBlock {...defaultProps} subTitle="Find the best plan" />);
+      expect(screen.getByText("Find the best plan")).toBeInTheDocument();
+    });
+
+    it("does not render subtitle when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByText("Find the best plan")).not.toBeInTheDocument();
+    });
+
+    it("renders searchDescription when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          searchDescription="Enter your ZIP code"
+        />
+      );
+      expect(screen.getByText("Enter your ZIP code")).toBeInTheDocument();
+    });
+
+    it("does not render searchDescription when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByText("Enter your ZIP code")).not.toBeInTheDocument();
+    });
+
+    it("renders caption ReactNode when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          caption={<div data-testid="caption">Caption content</div>}
+        />
+      );
+      expect(screen.getByTestId("caption")).toBeInTheDocument();
+    });
+
+    it("does not render caption when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByTestId("caption")).not.toBeInTheDocument();
+    });
+
+    it("renders basicCaption ReactNode when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          basicCaption={<p data-testid="basic-caption">Basic caption</p>}
+        />
+      );
+      expect(screen.getByTestId("basic-caption")).toBeInTheDocument();
+    });
+  });
+
+  describe("Heading levels", () => {
+    it("renders title as h2 when enableHeading is false/undefined", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const el = screen.getByText("Search Our Plans");
+      expect(el.tagName).toBe("H2");
+    });
+
+    it("renders title as h1 when enableHeading is true", () => {
+      render(<SearchBlock {...defaultProps} enableHeading={true} />);
+      const el = screen.getByText("Search Our Plans");
+      expect(el.tagName).toBe("H1");
+    });
+  });
+
+  describe("Background and color themes", () => {
+    it("applies supporting background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="supporting" />);
+      expect(screen.getByTestId("search-block")).toHaveClass(
+        "bg-bg-fill-brand-supporting"
+      );
+    });
+
+    it("applies white background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="white" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("bg-bg");
+    });
+
+    it("applies brand background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="brand" />);
+      expect(screen.getByTestId("search-block")).toHaveClass(
+        "bg-bg-fill-brand"
+      );
+    });
+
+    it("applies dark text color", () => {
+      render(<SearchBlock {...defaultProps} color="dark" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("text-text");
+    });
+
+    it("applies light (white) text color", () => {
+      render(<SearchBlock {...defaultProps} color="light" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("text-white");
+    });
+  });
+
+  describe("Form submission", () => {
+    it("calls onSubmit with searchText on form submit", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const input = screen.getByTestId("search-input");
+      fireEvent.change(input, { target: { value: "90210" } });
+      const form = input.closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "90210" });
+    });
+
+    it("calls onSubmit with empty string when no text entered", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "" });
+    });
+
+    it("does not throw when onSubmit is not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      expect(() => fireEvent.submit(form)).not.toThrow();
+    });
+
+    it("prevents default form submission", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true,
+      });
+      const prevented = !form.dispatchEvent(submitEvent);
+      expect(prevented).toBe(true);
+    });
+  });
+
+  describe("Input interaction", () => {
+    it("updates input value on change", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const input = screen.getByTestId("search-input") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "test query" } });
+      expect(input.value).toBe("test query");
+    });
+
+    it("submits the latest typed value", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const input = screen.getByTestId("search-input");
+      fireEvent.change(input, { target: { value: "first" } });
+      fireEvent.change(input, { target: { value: "second" } });
+      const form = input.closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "second" });
+    });
+  });
+});

package/src/contentful/blocks/search-block/index.tsx

@@ -1,90 +1,90 @@
-import React, { useState } from "react";
-import { SearchBlockProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { Input } from "@shared/components/input";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-export const SearchBlock: React.FC<SearchBlockProps> = props => {
-  const {
-    anchorId = "SearchBlock",
-    title,
-    subTitle,
-    enableHeading,
-    searchDescription,
-    searchInputPlaceholder,
-    basicCaption,
-    caption,
-    backgroundColor,
-    color,
-    onSubmit,
-  } = props;
-  const [searchText, setSearchText] = useState("");
-  const themeColorClasses = {
-    supporting: "bg-bg-fill-brand-supporting",
-    white: "bg-bg",
-    brand: "bg-bg-fill-brand",
-  };
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    onSubmit?.({ searchText });
-  };
-
-  return (
-    <div
-      className={`py-10 md:py-20 ${themeColorClasses[backgroundColor]} ${color == "dark" ? "text-text" : "text-white"}`}
-      id={anchorId}
-      data-testid="search-block"
-    >
-      <div className={"flex justify-center"}>
-        <div className="w-[1200px]">
-          <div className="mb-8 text-center">
-            <Text
-              as={enableHeading ? "h1" : "h2"}
-              className={cx("heading2 md:heading1")}
-            >
-              {title}
-            </Text>
-            {subTitle && (
-              <Text as="div" className={cx("subheading2 mt-2 md:subheading1")}>
-                {subTitle}
-              </Text>
-            )}
-          </div>
-          {searchDescription ? (
-            <Text className={`heading6 text-center`}>{searchDescription}</Text>
-          ) : null}
-
-          <span className="w-full">
-            <form
-              onSubmit={handleSubmit}
-              className="flex items-center rounded-md border bg-bg transition-colors focus-within:border-border-focus"
-            >
-              <Button type="submit" className="ml-2 inline-flex">
-                <MaterialIcon name="search" className="text-text" />
-              </Button>
-              <div className="flex-grow">
-                <Input
-                  value={searchText}
-                  onChange={(e: {
-                    target: { value: React.SetStateAction<string> };
-                  }) => setSearchText(e.target.value)}
-                  placeholder={searchInputPlaceholder}
-                  containerClassName="px-4 pl-0 rounded-md flex-grow border-none"
-                  className={"body3 rounded-md text-text"}
-                />
-              </div>
-            </form>
-          </span>
-          {caption ? caption : null}
-          {basicCaption}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SearchBlock;
+import React, { useState } from "react";
+import { SearchBlockProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { Input } from "@shared/components/input";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const SearchBlock: React.FC<SearchBlockProps> = props => {
+  const {
+    anchorId = "SearchBlock",
+    title,
+    subTitle,
+    enableHeading,
+    searchDescription,
+    searchInputPlaceholder,
+    basicCaption,
+    caption,
+    backgroundColor,
+    color,
+    onSubmit,
+  } = props;
+  const [searchText, setSearchText] = useState("");
+  const themeColorClasses = {
+    supporting: "bg-bg-fill-brand-supporting",
+    white: "bg-bg",
+    brand: "bg-bg-fill-brand",
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit?.({ searchText });
+  };
+
+  return (
+    <div
+      className={`py-10 md:py-20 ${themeColorClasses[backgroundColor]} ${color == "dark" ? "text-text" : "text-white"}`}
+      id={anchorId}
+      data-testid="search-block"
+    >
+      <div className={"flex justify-center"}>
+        <div className="w-[1200px]">
+          <div className="mb-8 text-center">
+            <Text
+              as={enableHeading ? "h1" : "h2"}
+              className={cx("heading2 md:heading1")}
+            >
+              {title}
+            </Text>
+            {subTitle && (
+              <Text as="div" className={cx("subheading2 mt-2 md:subheading1")}>
+                {subTitle}
+              </Text>
+            )}
+          </div>
+          {searchDescription ? (
+            <Text className={`heading6 text-center`}>{searchDescription}</Text>
+          ) : null}
+
+          <span className="w-full">
+            <form
+              onSubmit={handleSubmit}
+              className="flex items-center rounded-md border bg-bg transition-colors focus-within:border-border-focus"
+            >
+              <Button type="submit" className="ml-2 inline-flex">
+                <MaterialIcon name="search" className="text-text" />
+              </Button>
+              <div className="flex-grow">
+                <Input
+                  value={searchText}
+                  onChange={(e: {
+                    target: { value: React.SetStateAction<string> };
+                  }) => setSearchText(e.target.value)}
+                  placeholder={searchInputPlaceholder}
+                  containerClassName="px-4 pl-0 rounded-md flex-grow border-none"
+                  className={"body3 rounded-md text-text"}
+                />
+              </div>
+            </form>
+          </span>
+          {caption ? caption : null}
+          {basicCaption}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchBlock;

package/src/contentful/blocks/search-block/types.ts

@@ -1,15 +1,15 @@
-import React from "react";
-
-export type SearchBlockProps = {
-  anchorId?: string;
-  title?: string;
-  subTitle?: string;
-  searchDescription?: string;
-  searchInputPlaceholder?: string;
-  caption?: React.ReactNode;
-  basicCaption?: React.ReactNode;
-  enableHeading?: boolean;
-  backgroundColor: "supporting" | "white" | "brand";
-  color: "light" | "dark";
-  onSubmit?: (values: { searchText: string }) => void;
-};
+import React from "react";
+
+export type SearchBlockProps = {
+  anchorId?: string;
+  title?: string;
+  subTitle?: string;
+  searchDescription?: string;
+  searchInputPlaceholder?: string;
+  caption?: React.ReactNode;
+  basicCaption?: React.ReactNode;
+  enableHeading?: boolean;
+  backgroundColor: "supporting" | "white" | "brand";
+  color: "light" | "dark";
+  onSubmit?: (values: { searchText: string }) => void;
+};

package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx

@@ -1,26 +1,26 @@
-import { ShapeBackgroundWrapper } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof ShapeBackgroundWrapper> = {
-  title: "Contentful Blocks/ShapeBackgroundWrapper",
-  component: ShapeBackgroundWrapper,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Contentful shape background wrapper block. Wraps children with optional SVG shape background.",
-      },
-    },
-  },
-  args: {
-    children: "Content",
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { ShapeBackgroundWrapper } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ShapeBackgroundWrapper> = {
+  title: "Contentful Blocks/ShapeBackgroundWrapper",
+  component: ShapeBackgroundWrapper,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful shape background wrapper block. Wraps children with optional SVG shape background.",
+      },
+    },
+  },
+  args: {
+    children: "Content",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};