@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/components/select-plan-button/index.test.tsx

@@ -1,173 +1,173 @@
-import React from "react";
-import { SelectPlanButton } from "./index";
-
-import { fireEvent, render, screen } from "@testing-library/react";
-
-describe("SelectPlanButton", () => {
-  const defaultProps = {
-    onSelect: jest.fn(),
-    speed: "500",
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("renders with default props", () => {
-    render(<SelectPlanButton {...defaultProps} />);
-    expect(screen.getByText("Select plan")).toBeInTheDocument();
-  });
-
-  it("calls onSelect when clicked", () => {
-    render(<SelectPlanButton {...defaultProps} />);
-    fireEvent.click(screen.getByRole("button"));
-    expect(defaultProps.onSelect).toHaveBeenCalledTimes(1);
-  });
-
-  it("applies selected styles when isSelected is true", () => {
-    render(<SelectPlanButton {...defaultProps} isSelected={true} />);
-    const button = screen.getByRole("button");
-    expect(button.className).toContain("bg-bg-surface");
-    expect(button.className).toContain("text-text");
-  });
-
-  it("applies default (unselected) styles when isSelected is false", () => {
-    render(<SelectPlanButton {...defaultProps} isSelected={false} />);
-    const button = screen.getByRole("button");
-    expect(button.className).toContain("bg-bg-fill-brand");
-    expect(button.className).toContain("text-text-brand-on-bg-fill");
-  });
-
-  it("renders the expand_circle_right icon", () => {
-    render(<SelectPlanButton {...defaultProps} />);
-    expect(screen.getByText("expand_circle_right")).toBeInTheDocument();
-  });
-
-  it("applies icon className for unselected state", () => {
-    render(
-      <SelectPlanButton
-        {...defaultProps}
-        isSelected={false}
-        iconClassName="custom-icon"
-      />
-    );
-    const icon = screen.getByText("expand_circle_right");
-    expect(icon.className).toContain("text-icon-inverse");
-    expect(icon.className).toContain("custom-icon");
-  });
-
-  it("applies icon className for selected state", () => {
-    render(
-      <SelectPlanButton
-        {...defaultProps}
-        isSelected={true}
-        iconClassName="custom-icon"
-      />
-    );
-    const icon = screen.getByText("expand_circle_right");
-    expect(icon.className).toContain("text-icon");
-    expect(icon.className).toContain("custom-icon");
-  });
-
-  it("sets data-track attributes on the button", () => {
-    render(<SelectPlanButton {...defaultProps} speed="1000" />);
-    const button = screen.getByRole("button");
-    expect(button).toHaveAttribute(
-      "data-track-element-name",
-      "speed_plan_select_button"
-    );
-    expect(button).toHaveAttribute(
-      "data-track-click-text",
-      "Select plan speed 1000"
-    );
-    expect(button).toHaveAttribute(
-      "data-track-element-clicked",
-      "speed_plan_card"
-    );
-  });
-
-  it("calls renderCheckPlans with correct arguments", () => {
-    const renderCheckPlans = jest.fn(() => <div data-testid="check-plans" />);
-    render(
-      <SelectPlanButton
-        {...defaultProps}
-        speed="300"
-        techType="fiber"
-        isMax={true}
-        cta={{ label: "Go", url: "/go" } as any}
-        renderCheckPlans={renderCheckPlans}
-      />
-    );
-
-    expect(renderCheckPlans).toHaveBeenCalledWith({
-      speedCardConfig: expect.objectContaining({
-        speed: "300",
-        techType: "fiber",
-        isMax: true,
-        isModalOpen: false,
-      }),
-      cta: { label: "Go", url: "/go" },
-    });
-    expect(screen.getByTestId("check-plans")).toBeInTheDocument();
-  });
-
-  it("sets isModalOpen to true after click and passes setModalOpen", () => {
-    let capturedConfig: any;
-    const renderCheckPlans = jest.fn(args => {
-      capturedConfig = args;
-      return null;
-    });
-
-    const { rerender } = render(
-      <SelectPlanButton {...defaultProps} renderCheckPlans={renderCheckPlans} />
-    );
-
-    // Initially modal is closed
-    expect(renderCheckPlans).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        speedCardConfig: expect.objectContaining({ isModalOpen: false }),
-      })
-    );
-
-    // Click opens modal
-    fireEvent.click(screen.getByRole("button"));
-
-    // After click, re-render happens with open=true
-    expect(renderCheckPlans).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        speedCardConfig: expect.objectContaining({ isModalOpen: true }),
-      })
-    );
-
-    // Call setModalOpen to close
-    capturedConfig.speedCardConfig.setModalOpen();
-
-    // Need rerender to capture new state
-    rerender(
-      <SelectPlanButton {...defaultProps} renderCheckPlans={renderCheckPlans} />
-    );
-
-    expect(renderCheckPlans).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        speedCardConfig: expect.objectContaining({ isModalOpen: false }),
-      })
-    );
-  });
-
-  it("renders without renderCheckPlans (optional)", () => {
-    render(<SelectPlanButton {...defaultProps} />);
-    expect(screen.getByRole("button")).toBeInTheDocument();
-  });
-
-  it("uses default iconSize of 24", () => {
-    render(<SelectPlanButton {...defaultProps} />);
-    const icon = screen.getByText("expand_circle_right");
-    expect(icon.style.fontSize).toBe("24px");
-  });
-
-  it("uses custom iconSize", () => {
-    render(<SelectPlanButton {...defaultProps} iconSize={32} />);
-    const icon = screen.getByText("expand_circle_right");
-    expect(icon.style.fontSize).toBe("32px");
-  });
-});
+import React from "react";
+import { SelectPlanButton } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("SelectPlanButton", () => {
+  const defaultProps = {
+    onSelect: jest.fn(),
+    speed: "500",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders with default props", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    expect(screen.getByText("Select plan")).toBeInTheDocument();
+  });
+
+  it("calls onSelect when clicked", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(defaultProps.onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies selected styles when isSelected is true", () => {
+    render(<SelectPlanButton {...defaultProps} isSelected={true} />);
+    const button = screen.getByRole("button");
+    expect(button.className).toContain("bg-bg-surface");
+    expect(button.className).toContain("text-text");
+  });
+
+  it("applies default (unselected) styles when isSelected is false", () => {
+    render(<SelectPlanButton {...defaultProps} isSelected={false} />);
+    const button = screen.getByRole("button");
+    expect(button.className).toContain("bg-bg-fill-brand");
+    expect(button.className).toContain("text-text-brand-on-bg-fill");
+  });
+
+  it("renders the expand_circle_right icon", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    expect(screen.getByText("expand_circle_right")).toBeInTheDocument();
+  });
+
+  it("applies icon className for unselected state", () => {
+    render(
+      <SelectPlanButton
+        {...defaultProps}
+        isSelected={false}
+        iconClassName="custom-icon"
+      />
+    );
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.className).toContain("text-icon-inverse");
+    expect(icon.className).toContain("custom-icon");
+  });
+
+  it("applies icon className for selected state", () => {
+    render(
+      <SelectPlanButton
+        {...defaultProps}
+        isSelected={true}
+        iconClassName="custom-icon"
+      />
+    );
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.className).toContain("text-icon");
+    expect(icon.className).toContain("custom-icon");
+  });
+
+  it("sets data-track attributes on the button", () => {
+    render(<SelectPlanButton {...defaultProps} speed="1000" />);
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute(
+      "data-track-element-name",
+      "speed_plan_select_button"
+    );
+    expect(button).toHaveAttribute(
+      "data-track-click-text",
+      "Select plan speed 1000"
+    );
+    expect(button).toHaveAttribute(
+      "data-track-element-clicked",
+      "speed_plan_card"
+    );
+  });
+
+  it("calls renderCheckPlans with correct arguments", () => {
+    const renderCheckPlans = jest.fn(() => <div data-testid="check-plans" />);
+    render(
+      <SelectPlanButton
+        {...defaultProps}
+        speed="300"
+        techType="fiber"
+        isMax={true}
+        cta={{ label: "Go", url: "/go" } as any}
+        renderCheckPlans={renderCheckPlans}
+      />
+    );
+
+    expect(renderCheckPlans).toHaveBeenCalledWith({
+      speedCardConfig: expect.objectContaining({
+        speed: "300",
+        techType: "fiber",
+        isMax: true,
+        isModalOpen: false,
+      }),
+      cta: { label: "Go", url: "/go" },
+    });
+    expect(screen.getByTestId("check-plans")).toBeInTheDocument();
+  });
+
+  it("sets isModalOpen to true after click and passes setModalOpen", () => {
+    let capturedConfig: any;
+    const renderCheckPlans = jest.fn(args => {
+      capturedConfig = args;
+      return null;
+    });
+
+    const { rerender } = render(
+      <SelectPlanButton {...defaultProps} renderCheckPlans={renderCheckPlans} />
+    );
+
+    // Initially modal is closed
+    expect(renderCheckPlans).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        speedCardConfig: expect.objectContaining({ isModalOpen: false }),
+      })
+    );
+
+    // Click opens modal
+    fireEvent.click(screen.getByRole("button"));
+
+    // After click, re-render happens with open=true
+    expect(renderCheckPlans).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        speedCardConfig: expect.objectContaining({ isModalOpen: true }),
+      })
+    );
+
+    // Call setModalOpen to close
+    capturedConfig.speedCardConfig.setModalOpen();
+
+    // Need rerender to capture new state
+    rerender(
+      <SelectPlanButton {...defaultProps} renderCheckPlans={renderCheckPlans} />
+    );
+
+    expect(renderCheckPlans).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        speedCardConfig: expect.objectContaining({ isModalOpen: false }),
+      })
+    );
+  });
+
+  it("renders without renderCheckPlans (optional)", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("uses default iconSize of 24", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.style.fontSize).toBe("24px");
+  });
+
+  it("uses custom iconSize", () => {
+    render(<SelectPlanButton {...defaultProps} iconSize={32} />);
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.style.fontSize).toBe("32px");
+  });
+});

package/src/components/select-plan-button/index.tsx

@@ -1,63 +1,63 @@
-import React, { useState } from "react";
-import { Button } from "../button";
-import { MaterialIcon } from "../material-icon";
-import { SelectPlanButtonProps } from "./types";
-
-import { cx } from "@shared/utils";
-
-export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
-  onSelect,
-  speed,
-  isSelected = false,
-  renderCheckPlans,
-  iconSize = 24,
-  iconClassName,
-  cta,
-  techType,
-  isMax,
-}) => {
-  const [open, setOpen] = useState(false);
-  const className = `btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top ${isSelected ? " bg-bg-surface text-text focus:ring-bg-fill-surface-inverse" : "  bg-bg-fill-brand text-text-brand-on-bg-fill enabled:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand"} `;
-  const renderedCheckPlans = renderCheckPlans?.({
-    speedCardConfig: {
-      isModalOpen: open,
-      setModalOpen: () => {
-        setOpen(false);
-      },
-      speed,
-      techType,
-      isMax,
-    },
-    cta: cta,
-  });
-  const handleSelect = () => {
-    setOpen(true);
-    onSelect();
-  };
-
-  return (
-    <>
-      <Button
-        onClick={handleSelect}
-        className={cx(className, `w-full justify-between pl-5 pr-5`)}
-        data-track-element-name="speed_plan_select_button"
-        data-track-click-text={`Select plan speed ${speed}`}
-        data-track-element-clicked="speed_plan_card"
-      >
-        <span>Select plan</span>
-        <MaterialIcon
-          className={cx(
-            iconClassName,
-            isSelected ? "text-icon" : "text-icon-inverse"
-          )}
-          name="expand_circle_right"
-          fill={1}
-          size={iconSize}
-        />
-      </Button>
-      {renderedCheckPlans}
-    </>
-  );
-};
-
-export type { SelectPlanButtonProps } from "./types";
+import React, { useState } from "react";
+import { Button } from "../button";
+import { MaterialIcon } from "../material-icon";
+import { SelectPlanButtonProps } from "./types";
+
+import { cx } from "@shared/utils";
+
+export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
+  onSelect,
+  speed,
+  isSelected = false,
+  renderCheckPlans,
+  iconSize = 24,
+  iconClassName,
+  cta,
+  techType,
+  isMax,
+}) => {
+  const [open, setOpen] = useState(false);
+  const className = `btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top ${isSelected ? " bg-bg-surface text-text focus:ring-bg-fill-surface-inverse" : "  bg-bg-fill-brand text-text-brand-on-bg-fill enabled:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand"} `;
+  const renderedCheckPlans = renderCheckPlans?.({
+    speedCardConfig: {
+      isModalOpen: open,
+      setModalOpen: () => {
+        setOpen(false);
+      },
+      speed,
+      techType,
+      isMax,
+    },
+    cta: cta,
+  });
+  const handleSelect = () => {
+    setOpen(true);
+    onSelect();
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleSelect}
+        className={cx(className, `w-full justify-between pl-5 pr-5`)}
+        data-track-element-name="speed_plan_select_button"
+        data-track-click-text={`Select plan speed ${speed}`}
+        data-track-element-clicked="speed_plan_card"
+      >
+        <span>Select plan</span>
+        <MaterialIcon
+          className={cx(
+            iconClassName,
+            isSelected ? "text-icon" : "text-icon-inverse"
+          )}
+          name="expand_circle_right"
+          fill={1}
+          size={iconSize}
+        />
+      </Button>
+      {renderedCheckPlans}
+    </>
+  );
+};
+
+export type { SelectPlanButtonProps } from "./types";

package/src/components/select-plan-button/types.ts

@@ -1,17 +1,17 @@
-import React from "react";
-import { Size } from "../material-icon";
-
-import { ButtonProps } from "@shared/contentful/blocks/button/types";
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export type SelectPlanButtonProps = {
-  onSelect: () => void;
-  speed: string;
-  techType?: string;
-  isMax?: boolean;
-  iconSize?: Size;
-  isSelected?: boolean;
-  iconClassName?: string;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-  cta?: ButtonProps;
-};
+import React from "react";
+import { Size } from "../material-icon";
+
+import { ButtonProps } from "@shared/contentful/blocks/button/types";
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export type SelectPlanButtonProps = {
+  onSelect: () => void;
+  speed: string;
+  techType?: string;
+  isMax?: boolean;
+  iconSize?: Size;
+  isSelected?: boolean;
+  iconClassName?: string;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  cta?: ButtonProps;
+};