@windstream/react-shared-components 0.1.93 → 0.1.95

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

@@ -0,0 +1,252 @@
+/// <reference types="@testing-library/jest-dom" />
+import React from "react";
+import { Checkbox } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/button", () => {
+  const MockButton = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+  >(({ children, ...props }, ref) => (
+    <button ref={ref} {...props}>
+      {children}
+    </button>
+  ));
+  MockButton.displayName = "MockButton";
+  return { Button: MockButton };
+});
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: unknown[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Checkbox", () => {
+  describe("rendering", () => {
+    it("renders an unchecked checkbox by default", () => {
+      render(<Checkbox name="test" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).not.toBeChecked();
+    });
+
+    it("renders a checked checkbox when checked is true", () => {
+      render(<Checkbox name="test" checked={true} />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toBeChecked();
+    });
+
+    it("renders with the correct name attribute", () => {
+      render(<Checkbox name="agreement" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("name", "agreement");
+    });
+
+    it("renders with the correct value attribute", () => {
+      render(<Checkbox name="test" value="yes" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("value", "yes");
+    });
+
+    it("applies displayName correctly", () => {
+      expect(Checkbox.displayName).toBe("Checkbox");
+    });
+  });
+
+  describe("label", () => {
+    it("renders a string label", () => {
+      render(<Checkbox name="test" label="Accept terms" />);
+      expect(screen.getByText("Accept terms")).toBeInTheDocument();
+    });
+
+    it("renders a ReactNode label", () => {
+      render(
+        <Checkbox
+          name="test"
+          label={<span data-testid="custom-label">Custom</span>}
+        />
+      );
+      expect(screen.getByTestId("custom-label")).toBeInTheDocument();
+    });
+
+    it("does not render label element when label is not provided", () => {
+      const { container } = render(<Checkbox name="test" />);
+      const labels = container.querySelectorAll("label");
+      // Only the icon label, no text label
+      expect(labels.length).toBe(1);
+    });
+
+    it("applies labelClassName to the label", () => {
+      render(
+        <Checkbox name="test" label="Label" labelClassName="custom-label" />
+      );
+      const label = screen.getByText("Label");
+      expect(label.className).toContain("custom-label");
+    });
+
+    it("applies error class to label when error is true", () => {
+      render(<Checkbox name="test" label="Label" error={true} />);
+      const label = screen.getByText("Label");
+      expect(label.className).toContain("text-text-critical");
+    });
+  });
+
+  describe("interactive behavior", () => {
+    it("calls onChange with boolean when handler expects a parameter", () => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const handleChange = jest.fn((_isChecked: boolean) => undefined);
+      render(<Checkbox name="test" onChange={handleChange} />);
+      const input = screen.getByRole("checkbox");
+      fireEvent.click(input);
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+
+    it("calls onChange without parameters for zero-arity handler", () => {
+      const handleChange = jest.fn();
+      // Override length to simulate zero-arity
+      Object.defineProperty(handleChange, "length", { value: 0 });
+      render(<Checkbox name="test" onChange={handleChange} />);
+      const input = screen.getByRole("checkbox");
+      fireEvent.click(input);
+      expect(handleChange).toHaveBeenCalled();
+    });
+
+    it("does not call onChange when disabled", () => {
+      const handleChange = jest.fn();
+      render(<Checkbox name="test" onChange={handleChange} disabled={true} />);
+      const input = screen.getByRole("checkbox");
+      fireEvent.click(input);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it("does not call onChange when state is disabled", () => {
+      const handleChange = jest.fn();
+      render(<Checkbox name="test" onChange={handleChange} state="disabled" />);
+      const input = screen.getByRole("checkbox");
+      fireEvent.click(input);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("disabled state", () => {
+    it("sets disabled attribute when disabled prop is true", () => {
+      render(<Checkbox name="test" disabled={true} />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toBeDisabled();
+    });
+
+    it("sets disabled attribute when state is disabled", () => {
+      render(<Checkbox name="test" state="disabled" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toBeDisabled();
+    });
+
+    it("applies disabled styling to unchecked icon", () => {
+      const { container } = render(<Checkbox name="test" disabled={true} />);
+      const rect = container.querySelector("rect");
+      expect(rect).toHaveClass("fill-checkbox-bg-surface-disabled");
+    });
+
+    it("applies disabled styling to checked icon", () => {
+      const { container } = render(
+        <Checkbox name="test" disabled={true} checked={true} />
+      );
+      const rect = container.querySelector("rect");
+      expect(rect).toHaveClass("fill-checkbox-bg-surface-selected-disabled");
+    });
+  });
+
+  describe("focus state", () => {
+    it("applies focus outline class when state is focus", () => {
+      const { container } = render(<Checkbox name="test" state="focus" />);
+      const label = container.querySelector("label");
+      expect(label?.className).toContain("outline");
+    });
+  });
+
+  describe("required", () => {
+    it("sets required attribute when required is true", () => {
+      render(<Checkbox name="test" required={true} />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toBeRequired();
+    });
+  });
+
+  describe("id handling", () => {
+    it("uses provided id for input and label", () => {
+      render(<Checkbox name="test" id="custom-id" label="Label" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("id", "custom-id");
+    });
+
+    it("falls back to name when id is not provided", () => {
+      render(<Checkbox name="fallback-name" label="Label" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("id", "fallback-name");
+    });
+  });
+
+  describe("data-cy attribute", () => {
+    it("passes data-cy to the input element", () => {
+      render(<Checkbox name="test" data-cy="checkbox-cy" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("data-cy", "checkbox-cy");
+    });
+  });
+
+  describe("renderInfoIcon", () => {
+    it("renders info icon button when renderInfoIcon is provided", () => {
+      const onClick = jest.fn();
+      render(
+        <Checkbox
+          name="test"
+          renderInfoIcon={{ onClick, dataTestId: "info-btn" }}
+        />
+      );
+      expect(screen.getByTestId("info-btn")).toBeInTheDocument();
+    });
+
+    it("calls onClick when info icon is clicked", () => {
+      const onClick = jest.fn();
+      render(
+        <Checkbox
+          name="test"
+          renderInfoIcon={{ onClick, dataTestId: "info-btn" }}
+        />
+      );
+      fireEvent.click(screen.getByTestId("info-btn"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not render info icon when renderInfoIcon is not provided", () => {
+      const { container } = render(<Checkbox name="test" />);
+      const buttons = container.querySelectorAll("button");
+      expect(buttons.length).toBe(0);
+    });
+  });
+
+  describe("containerClassName", () => {
+    it("applies containerClassName to the wrapper div", () => {
+      const { container } = render(
+        <Checkbox name="test" containerClassName="wrapper-class" />
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.className).toContain("wrapper-class");
+    });
+  });
+
+  describe("checked icon rendering", () => {
+    it("renders checkmark SVG when checked", () => {
+      const { container } = render(<Checkbox name="test" checked={true} />);
+      const paths = container.querySelectorAll("path");
+      // Checked state has a checkmark path
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it("renders empty box SVG when unchecked", () => {
+      const { container } = render(<Checkbox name="test" checked={false} />);
+      const rects = container.querySelectorAll("rect");
+      // Unchecked state has border rects
+      expect(rects.length).toBeGreaterThan(0);
+    });
+  });
+});

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

@@ -0,0 +1,231 @@
+/// <reference types="@testing-library/jest-dom" />
+import React from "react";
+import { Checklist } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/list", () => ({
+  List: ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) => (
+    <ul data-testid="list" className={className}>
+      {children}
+    </ul>
+  ),
+  ListItem: ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) => (
+    <li data-testid="list-item" className={className}>
+      {children}
+    </li>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({
+    name,
+    size,
+    color,
+    className,
+  }: {
+    name: string;
+    size?: number;
+    color?: string;
+    className?: string;
+  }) => (
+    <span
+      data-testid={`icon-${name}`}
+      data-size={size}
+      data-color={color}
+      className={className}
+    >
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({
+    children,
+  }: {
+    children: React.ReactNode;
+    as?: React.ElementType;
+  }) => <div data-testid="text-component">{children}</div>,
+}));
+
+jest.mock("@shared/utils/cx", () => ({
+  cx: (...args: unknown[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Checklist", () => {
+  describe("rendering", () => {
+    it("renders null when items is empty", () => {
+      const { container } = render(<Checklist items={[]} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it("renders null when items is undefined", () => {
+      const { container } = render(
+        <Checklist items={undefined as unknown as React.ReactNode[]} />
+      );
+      expect(container.firstChild).toBeNull();
+    });
+
+    it("renders a list with items", () => {
+      render(<Checklist items={["Item 1", "Item 2", "Item 3"]} />);
+      const listItems = screen.getAllByTestId("list-item");
+      expect(listItems).toHaveLength(3);
+    });
+
+    it("renders item text content", () => {
+      render(<Checklist items={["First item", "Second item"]} />);
+      expect(screen.getByText("First item")).toBeInTheDocument();
+      expect(screen.getByText("Second item")).toBeInTheDocument();
+    });
+
+    it("renders ReactNode items", () => {
+      render(
+        <Checklist
+          items={[
+            <strong key="1">Bold item</strong>,
+            <em key="2">Italic item</em>,
+          ]}
+        />
+      );
+      expect(screen.getByText("Bold item")).toBeInTheDocument();
+      expect(screen.getByText("Italic item")).toBeInTheDocument();
+    });
+
+    it("applies displayName correctly", () => {
+      expect(Checklist.displayName).toBe("Checklist");
+    });
+  });
+
+  describe("icons", () => {
+    it("renders check icons by default", () => {
+      render(<Checklist items={["Item 1"]} />);
+      expect(screen.getByTestId("icon-check")).toBeInTheDocument();
+    });
+
+    it("renders custom icon name", () => {
+      render(<Checklist items={["Item 1"]} listIconName="check" />);
+      expect(screen.getByTestId("icon-check")).toBeInTheDocument();
+    });
+
+    it("does not render icons when listIconName is disc", () => {
+      render(<Checklist items={["Item 1"]} listIconName="disc" />);
+      expect(screen.queryByTestId("icon-check")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("icon-disc")).not.toBeInTheDocument();
+    });
+
+    it("passes correct iconSize to MaterialIcon", () => {
+      render(<Checklist items={["Item"]} iconSize={32} />);
+      const icon = screen.getByTestId("icon-check");
+      expect(icon).toHaveAttribute("data-size", "32");
+    });
+
+    it("uses default iconSize of 20", () => {
+      render(<Checklist items={["Item"]} />);
+      const icon = screen.getByTestId("icon-check");
+      expect(icon).toHaveAttribute("data-size", "20");
+    });
+  });
+
+  describe("icon colors", () => {
+    it("applies green color by default", () => {
+      render(<Checklist items={["Item"]} />);
+      const icon = screen.getByTestId("icon-check");
+      expect(icon).toHaveAttribute("data-color", "#209A61");
+    });
+
+    it("applies yellow color", () => {
+      render(<Checklist items={["Item"]} iconColor="yellow" />);
+      const icon = screen.getByTestId("icon-check");
+      expect(icon).toHaveAttribute("data-color", "#F5FF36");
+    });
+
+    it("applies blue color", () => {
+      render(<Checklist items={["Item"]} iconColor="blue" />);
+      const icon = screen.getByTestId("icon-check");
+      expect(icon).toHaveAttribute("data-color", "#0393BA");
+    });
+  });
+
+  describe("icon position", () => {
+    it("applies items-center by default (center position)", () => {
+      render(<Checklist items={["Item"]} />);
+      const listItem = screen.getByTestId("list-item");
+      expect(listItem.className).toContain("items-center");
+    });
+
+    it("applies items-start for top position", () => {
+      render(<Checklist items={["Item"]} iconPosition="top" />);
+      const listItem = screen.getByTestId("list-item");
+      expect(listItem.className).toContain("items-start");
+    });
+
+    it("applies mt-1 to icon when position is top", () => {
+      render(<Checklist items={["Item"]} iconPosition="top" />);
+      const icon = screen.getByTestId("icon-check");
+      expect(icon.className).toContain("mt-1");
+    });
+
+    it("does not apply mt-1 to icon when position is center", () => {
+      render(<Checklist items={["Item"]} iconPosition="center" />);
+      const icon = screen.getByTestId("icon-check");
+      expect(icon.className).not.toContain("mt-1");
+    });
+  });
+
+  describe("classNames", () => {
+    it("applies listContainerClassName to the List", () => {
+      render(
+        <Checklist items={["Item"]} listContainerClassName="custom-list" />
+      );
+      const list = screen.getByTestId("list");
+      expect(list.className).toContain("custom-list");
+    });
+
+    it("applies listItemClassName to ListItems", () => {
+      render(
+        <Checklist
+          items={["Item 1", "Item 2"]}
+          listItemClassName="custom-item"
+        />
+      );
+      const items = screen.getAllByTestId("list-item");
+      items.forEach(item => {
+        expect(item.className).toContain("custom-item");
+      });
+    });
+
+    it("applies iconClassName to the icon", () => {
+      render(<Checklist items={["Item"]} iconClassName="custom-icon" />);
+      const icon = screen.getByTestId("icon-check");
+      expect(icon.className).toContain("custom-icon");
+    });
+  });
+
+  describe("list variant", () => {
+    it("uses unstyled variant when icons are shown", () => {
+      render(<Checklist items={["Item"]} />);
+      // With icons (default check), the list items should have flex class
+      const listItem = screen.getByTestId("list-item");
+      expect(listItem.className).toContain("flex");
+    });
+
+    it("does not apply flex class when using disc variant", () => {
+      render(<Checklist items={["Item"]} listIconName="disc" />);
+      const listItem = screen.getByTestId("list-item");
+      expect(listItem.className).not.toContain("flex");
+    });
+  });
+});

package/src/components/checklist/index.tsx

@@ -1,11 +1,26 @@
 import React from "react";
 
-import { ChecklistProps, iconColors } from "@shared/components/checklist/types";
+import {
+  ChecklistItem,
+  ChecklistProps,
+  iconColors,
+} from "@shared/components/checklist/types";
 import { List, ListItem } from "@shared/components/list";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 import { cx } from "@shared/utils/cx";
 
+function isChecklistItem(
+  item: React.ReactNode | ChecklistItem
+): item is ChecklistItem {
+  return (
+    item !== null &&
+    typeof item === "object" &&
+    !React.isValidElement(item) &&
+    "title" in (item as Record<string, unknown>)
+  );
+}
+
 export const Checklist: React.FC<ChecklistProps> = props => {
   const {
     items,
@@ -25,37 +40,57 @@ export const Checklist: React.FC<ChecklistProps> = props => {
       className={cx("mt-2 space-y-1", listContainerClassName)}
       variant={showIcons ? "unstyled" : "default"}
     >
-      {items.map((text, idx) => (
-        <ListItem
-          variant={showIcons ? "unstyled" : "default"}
-          key={idx}
-          className={cx(
-            `${showIcons ? "flex" : ""} ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
-            listItemClassName
-          )}
-        >
-          {showIcons && (
-            <div className="flex leading-none">
-              <MaterialIcon
-                name={listIconName}
-                size={iconSize}
-                color={iconColors[iconColor]}
-                weight="600"
-                className={cx(
-                  "block",
-                  iconPosition === "top" ? "mt-1" : "",
-                  iconClassName
-                )}
-              />
-            </div>
-          )}
-          <Text as="div">{text}</Text>
-        </ListItem>
-      ))}
+      {items.map((item, idx) => {
+        const structured = isChecklistItem(item);
+        const hasCustomIcon = structured && !!item.iconUrl;
+        const content = structured ? item.title : item;
+
+        return (
+          <ListItem
+            variant={showIcons ? "unstyled" : "default"}
+            key={idx}
+            className={cx(
+              `${showIcons ? "flex" : ""} ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
+              listItemClassName
+            )}
+          >
+            {showIcons && hasCustomIcon ? (
+              <div className="flex shrink-0 leading-none">
+                <img
+                  src={item.iconUrl}
+                  alt={item.iconAlt || ""}
+                  width={iconSize}
+                  height={iconSize}
+                  className={cx(
+                    "block object-contain",
+                    iconPosition === "top" ? "mt-1" : "",
+                    iconClassName
+                  )}
+                />
+              </div>
+            ) : showIcons ? (
+              <div className="flex leading-none">
+                <MaterialIcon
+                  name={listIconName}
+                  size={iconSize}
+                  color={iconColors[iconColor]}
+                  weight="600"
+                  className={cx(
+                    "block",
+                    iconPosition === "top" ? "mt-1" : "",
+                    iconClassName
+                  )}
+                />
+              </div>
+            ) : null}
+            <Text as="div">{content}</Text>
+          </ListItem>
+        );
+      })}
     </List>
   );
 };
 
 Checklist.displayName = "Checklist";
 
-export type { ChecklistProps };
+export type { ChecklistItem, ChecklistProps };

package/src/components/checklist/types.ts

@@ -1,5 +1,11 @@
+export type ChecklistItem = {
+  title: React.ReactNode;
+  iconUrl?: string;
+  iconAlt?: string;
+};
+
 export type ChecklistProps = {
-  items: React.ReactNode[];
+  items: (React.ReactNode | ChecklistItem)[];
   // TODO: add icon names as needed
   listIconName?: "check" | "disc";
   listItemClassName?: string;