@windstream/react-shared-components 0.1.94 → 0.1.96

package/src/components/alert-card/index.test.tsx

@@ -1,152 +1,152 @@
-import "@testing-library/jest-dom";
-
-import { AlertCard } from "./index";
-
-import { render, screen } from "@testing-library/react";
-
-// Mock dependencies
-jest.mock("@shared/components/material-icon", () => ({
-  MaterialIcon: ({ name, size, className }: any) => (
-    <span
-      data-testid="material-icon"
-      data-name={name}
-      data-size={size}
-      className={className}
-    >
-      {name}
-    </span>
-  ),
-}));
-
-jest.mock("@shared/components/text", () => ({
-  Text: ({ children, className }: any) => (
-    <span data-testid="alert-text" className={className}>
-      {children}
-    </span>
-  ),
-}));
-
-jest.mock("@shared/utils", () => ({
-  cx: (...args: any[]) => args.filter(Boolean).join(" "),
-}));
-
-describe("AlertCard", () => {
-  it("has displayName set to AlertCard", () => {
-    expect(AlertCard.displayName).toBe("AlertCard");
-  });
-
-  describe("rendering", () => {
-    it("renders null when errorMessage is undefined", () => {
-      const { container } = render(<AlertCard />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it("renders null when errorMessage is empty string", () => {
-      const { container } = render(<AlertCard errorMessage="" />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it("renders null when errorMessage is null", () => {
-      const { container } = render(<AlertCard errorMessage={null as any} />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it("renders when errorMessage is provided", () => {
-      render(<AlertCard errorMessage="Something went wrong" />);
-      expect(screen.getByTestId("alert-card")).toBeInTheDocument();
-    });
-
-    it("renders the error message text", () => {
-      render(<AlertCard errorMessage="Connection failed" />);
-      expect(screen.getByText("Connection failed")).toBeInTheDocument();
-    });
-
-    it("renders a ReactNode as errorMessage", () => {
-      render(
-        <AlertCard
-          errorMessage={<strong data-testid="custom-node">Error!</strong>}
-        />
-      );
-      expect(screen.getByTestId("custom-node")).toBeInTheDocument();
-    });
-  });
-
-  describe("icon props", () => {
-    it("renders default icon name 'dangerous'", () => {
-      render(<AlertCard errorMessage="Error" />);
-      const icon = screen.getByTestId("material-icon");
-      expect(icon).toHaveAttribute("data-name", "dangerous");
-    });
-
-    it("renders custom icon name", () => {
-      render(<AlertCard errorMessage="Error" iconName="error" />);
-      const icon = screen.getByTestId("material-icon");
-      expect(icon).toHaveAttribute("data-name", "error");
-    });
-
-    it("uses default icon size of 52", () => {
-      render(<AlertCard errorMessage="Error" />);
-      const icon = screen.getByTestId("material-icon");
-      expect(icon).toHaveAttribute("data-size", "52");
-    });
-
-    it("uses custom icon size", () => {
-      render(<AlertCard errorMessage="Error" iconSize={24} />);
-      const icon = screen.getByTestId("material-icon");
-      expect(icon).toHaveAttribute("data-size", "24");
-    });
-
-    it("applies iconClassName to icon", () => {
-      render(<AlertCard errorMessage="Error" iconClassName="custom-icon" />);
-      const icon = screen.getByTestId("material-icon");
-      expect(icon).toHaveClass("custom-icon");
-    });
-
-    it("applies text-icon-critical class to icon by default", () => {
-      render(<AlertCard errorMessage="Error" />);
-      const icon = screen.getByTestId("material-icon");
-      expect(icon).toHaveClass("text-icon-critical");
-    });
-  });
-
-  describe("className props", () => {
-    it("applies custom className to container", () => {
-      render(<AlertCard errorMessage="Error" className="custom-class" />);
-      const card = screen.getByTestId("alert-card");
-      expect(card).toHaveClass("custom-class");
-    });
-
-    it("applies textVariant to text element", () => {
-      render(<AlertCard errorMessage="Error" textVariant="body1" />);
-      const text = screen.getByTestId("alert-text");
-      expect(text).toHaveClass("body1");
-    });
-
-    it("applies default text classes", () => {
-      render(<AlertCard errorMessage="Error" />);
-      const text = screen.getByTestId("alert-text");
-      expect(text.className).toContain("body2");
-      expect(text.className).toContain("text-text");
-    });
-  });
-
-  describe("structure", () => {
-    it("renders data-testid attribute on container", () => {
-      render(<AlertCard errorMessage="Error" />);
-      expect(screen.getByTestId("alert-card")).toBeInTheDocument();
-    });
-
-    it("renders icon within a wrapper div", () => {
-      render(<AlertCard errorMessage="Error" />);
-      const icon = screen.getByTestId("material-icon");
-      expect(icon.parentElement?.tagName).toBe("DIV");
-    });
-
-    it("applies base styling classes to container", () => {
-      render(<AlertCard errorMessage="Error" />);
-      const card = screen.getByTestId("alert-card");
-      expect(card).toHaveClass("flex");
-      expect(card).toHaveClass("flex-col");
-    });
-  });
-});
+import "@testing-library/jest-dom";
+
+import { AlertCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, size, className }: any) => (
+    <span
+      data-testid="material-icon"
+      data-name={name}
+      data-size={size}
+      className={className}
+    >
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, className }: any) => (
+    <span data-testid="alert-text" className={className}>
+      {children}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("AlertCard", () => {
+  it("has displayName set to AlertCard", () => {
+    expect(AlertCard.displayName).toBe("AlertCard");
+  });
+
+  describe("rendering", () => {
+    it("renders null when errorMessage is undefined", () => {
+      const { container } = render(<AlertCard />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it("renders null when errorMessage is empty string", () => {
+      const { container } = render(<AlertCard errorMessage="" />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it("renders null when errorMessage is null", () => {
+      const { container } = render(<AlertCard errorMessage={null as any} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it("renders when errorMessage is provided", () => {
+      render(<AlertCard errorMessage="Something went wrong" />);
+      expect(screen.getByTestId("alert-card")).toBeInTheDocument();
+    });
+
+    it("renders the error message text", () => {
+      render(<AlertCard errorMessage="Connection failed" />);
+      expect(screen.getByText("Connection failed")).toBeInTheDocument();
+    });
+
+    it("renders a ReactNode as errorMessage", () => {
+      render(
+        <AlertCard
+          errorMessage={<strong data-testid="custom-node">Error!</strong>}
+        />
+      );
+      expect(screen.getByTestId("custom-node")).toBeInTheDocument();
+    });
+  });
+
+  describe("icon props", () => {
+    it("renders default icon name 'dangerous'", () => {
+      render(<AlertCard errorMessage="Error" />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveAttribute("data-name", "dangerous");
+    });
+
+    it("renders custom icon name", () => {
+      render(<AlertCard errorMessage="Error" iconName="error" />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveAttribute("data-name", "error");
+    });
+
+    it("uses default icon size of 52", () => {
+      render(<AlertCard errorMessage="Error" />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveAttribute("data-size", "52");
+    });
+
+    it("uses custom icon size", () => {
+      render(<AlertCard errorMessage="Error" iconSize={24} />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveAttribute("data-size", "24");
+    });
+
+    it("applies iconClassName to icon", () => {
+      render(<AlertCard errorMessage="Error" iconClassName="custom-icon" />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveClass("custom-icon");
+    });
+
+    it("applies text-icon-critical class to icon by default", () => {
+      render(<AlertCard errorMessage="Error" />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveClass("text-icon-critical");
+    });
+  });
+
+  describe("className props", () => {
+    it("applies custom className to container", () => {
+      render(<AlertCard errorMessage="Error" className="custom-class" />);
+      const card = screen.getByTestId("alert-card");
+      expect(card).toHaveClass("custom-class");
+    });
+
+    it("applies textVariant to text element", () => {
+      render(<AlertCard errorMessage="Error" textVariant="body1" />);
+      const text = screen.getByTestId("alert-text");
+      expect(text).toHaveClass("body1");
+    });
+
+    it("applies default text classes", () => {
+      render(<AlertCard errorMessage="Error" />);
+      const text = screen.getByTestId("alert-text");
+      expect(text.className).toContain("body2");
+      expect(text.className).toContain("text-text");
+    });
+  });
+
+  describe("structure", () => {
+    it("renders data-testid attribute on container", () => {
+      render(<AlertCard errorMessage="Error" />);
+      expect(screen.getByTestId("alert-card")).toBeInTheDocument();
+    });
+
+    it("renders icon within a wrapper div", () => {
+      render(<AlertCard errorMessage="Error" />);
+      const icon = screen.getByTestId("material-icon");
+      expect(icon.parentElement?.tagName).toBe("DIV");
+    });
+
+    it("applies base styling classes to container", () => {
+      render(<AlertCard errorMessage="Error" />);
+      const card = screen.getByTestId("alert-card");
+      expect(card).toHaveClass("flex");
+      expect(card).toHaveClass("flex-col");
+    });
+  });
+});

package/src/components/alert-card/index.tsx

@@ -1,41 +1,41 @@
-import React from "react";
-import { AlertCardProps } from "./types";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-export const AlertCard: React.FC<AlertCardProps> = ({
-  errorMessage,
-  className,
-  iconClassName,
-  iconSize = 52,
-  iconName = "dangerous",
-  textVariant,
-}) => {
-  if (!errorMessage) return null;
-
-  return (
-    <div
-      className={cx(
-        "flex flex-col items-center justify-center gap-5 rounded-surface-sm border-2 border-border-critical bg-bg-fill-critical-secondary px-4 py-6 md:flex-row md:py-4",
-        className
-      )}
-      data-testid="alert-card"
-    >
-      <div>
-        <MaterialIcon
-          name={iconName}
-          size={iconSize}
-          className={cx("text-icon-critical", iconClassName)}
-        />
-      </div>
-
-      <Text className={cx("body2 text-text", textVariant)}>{errorMessage}</Text>
-    </div>
-  );
-};
-
-AlertCard.displayName = "AlertCard";
-
-export type { AlertCardProps };
+import React from "react";
+import { AlertCardProps } from "./types";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const AlertCard: React.FC<AlertCardProps> = ({
+  errorMessage,
+  className,
+  iconClassName,
+  iconSize = 52,
+  iconName = "dangerous",
+  textVariant,
+}) => {
+  if (!errorMessage) return null;
+
+  return (
+    <div
+      className={cx(
+        "flex flex-col items-center justify-center gap-5 rounded-surface-sm border-2 border-border-critical bg-bg-fill-critical-secondary px-4 py-6 md:flex-row md:py-4",
+        className
+      )}
+      data-testid="alert-card"
+    >
+      <div>
+        <MaterialIcon
+          name={iconName}
+          size={iconSize}
+          className={cx("text-icon-critical", iconClassName)}
+        />
+      </div>
+
+      <Text className={cx("body2 text-text", textVariant)}>{errorMessage}</Text>
+    </div>
+  );
+};
+
+AlertCard.displayName = "AlertCard";
+
+export type { AlertCardProps };

package/src/components/alert-card/types.ts

@@ -1,13 +1,13 @@
-import { ReactNode } from "react";
-import { IconName, Size } from "../material-icon";
-
-import { TextVariant } from "@shared/components/text";
-
-export type AlertCardProps = {
-  errorMessage?: string | ReactNode;
-  className?: string;
-  iconName?: IconName;
-  iconClassName?: string;
-  textVariant?: TextVariant;
-  iconSize?: Size;
-};
+import { ReactNode } from "react";
+import { IconName, Size } from "../material-icon";
+
+import { TextVariant } from "@shared/components/text";
+
+export type AlertCardProps = {
+  errorMessage?: string | ReactNode;
+  className?: string;
+  iconName?: IconName;
+  iconClassName?: string;
+  textVariant?: TextVariant;
+  iconSize?: Size;
+};