@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/components/material-icon/constants.ts

@@ -1,99 +1,99 @@
-//If new icon need to add, Add iconname in iconNameList array and follow instruction in README.md
-export const iconNameList = [
-  "info",
-  "download",
-  "featured_seasonal_and_gifts",
-  "visibility",
-  "paid",
-  "check_box",
-  "check_box_outline_blank",
-  "radio_button_unchecked",
-  "radio_button_checked",
-  "counter_1",
-  "counter_2",
-  "counter_3",
-  "error",
-  "search",
-  "cancel",
-  "router",
-  "broadcast_on_home",
-  "check",
-  "check_circle",
-  "lock",
-  "shield_lock",
-  "phone_in_talk",
-  "call",
-  "chevron_left",
-  "chevron_right",
-  "keyboard_arrow_down",
-  "keyboard_arrow_up",
-  "arrow_back",
-  "arrow_forward",
-  "help",
-  "home_pin",
-  "location_on",
-  "timer",
-  "schedule",
-  "add",
-  "remove",
-  "bolt",
-  "rocket",
-  "cloud_sync",
-  "close",
-  "groups",
-  "speed",
-  "mail",
-  "credit_card",
-  "language",
-  "forum",
-  "contract",
-  "local_atm",
-  "headset_mic",
-  "sensors",
-  "wifi",
-  "settings",
-  "home",
-  "devices",
-  "build",
-  "thumb_up",
-  "desktop_windows",
-  "block",
-  "all_inclusive",
-  "verified_user",
-  "extension",
-  "stadia_controller",
-  "visibility_off",
-  "close_fullscreen",
-  "progress_activity",
-  "travel_explore",
-  "share",
-  "business_center",
-  "upload",
-  "videocam",
-  "expand_circle_right",
-  "add_circle",
-  "do_not_disturb_on",
-  "expand_circle_up",
-  "expand_circle_down",
-  "replay",
-  "fiber_manual_record",
-  "menu",
-  "dangerous",
-  "star",
-  "play_arrow",
-  "calendar_clock",
-  "shopping_cart",
-] as const;
-
-export const OpticalSizes = ["20dp", "24dp", "40dp", "48dp"] as const;
-export const weights = [
-  "100",
-  "200",
-  "300",
-  "400",
-  "500",
-  "600",
-  "700",
-] as const;
-export const emphasis = [-25, 0, 200] as const;
-export const sizes = [20, 24, 32, 40, 48, 52] as const;
+//If new icon need to add, Add iconname in iconNameList array and follow instruction in README.md
+export const iconNameList = [
+  "info",
+  "download",
+  "featured_seasonal_and_gifts",
+  "visibility",
+  "paid",
+  "check_box",
+  "check_box_outline_blank",
+  "radio_button_unchecked",
+  "radio_button_checked",
+  "counter_1",
+  "counter_2",
+  "counter_3",
+  "error",
+  "search",
+  "cancel",
+  "router",
+  "broadcast_on_home",
+  "check",
+  "check_circle",
+  "lock",
+  "shield_lock",
+  "phone_in_talk",
+  "call",
+  "chevron_left",
+  "chevron_right",
+  "keyboard_arrow_down",
+  "keyboard_arrow_up",
+  "arrow_back",
+  "arrow_forward",
+  "help",
+  "home_pin",
+  "location_on",
+  "timer",
+  "schedule",
+  "add",
+  "remove",
+  "bolt",
+  "rocket",
+  "cloud_sync",
+  "close",
+  "groups",
+  "speed",
+  "mail",
+  "credit_card",
+  "language",
+  "forum",
+  "contract",
+  "local_atm",
+  "headset_mic",
+  "sensors",
+  "wifi",
+  "settings",
+  "home",
+  "devices",
+  "build",
+  "thumb_up",
+  "desktop_windows",
+  "block",
+  "all_inclusive",
+  "verified_user",
+  "extension",
+  "stadia_controller",
+  "visibility_off",
+  "close_fullscreen",
+  "progress_activity",
+  "travel_explore",
+  "share",
+  "business_center",
+  "upload",
+  "videocam",
+  "expand_circle_right",
+  "add_circle",
+  "do_not_disturb_on",
+  "expand_circle_up",
+  "expand_circle_down",
+  "replay",
+  "fiber_manual_record",
+  "menu",
+  "dangerous",
+  "star",
+  "play_arrow",
+  "calendar_clock",
+  "shopping_cart",
+] as const;
+
+export const OpticalSizes = ["20dp", "24dp", "40dp", "48dp"] as const;
+export const weights = [
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+] as const;
+export const emphasis = [-25, 0, 200] as const;
+export const sizes = [20, 24, 32, 40, 48, 52] as const;

package/src/components/material-icon/index.test.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { MaterialIcon } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+describe("MaterialIcon", () => {
+  describe("Rendering", () => {
+    it("renders the icon name as text content", () => {
+      render(<MaterialIcon name="home" />);
+      expect(screen.getByText("home")).toBeInTheDocument();
+    });
+
+    it("has correct displayName", () => {
+      expect(MaterialIcon.displayName).toBe("MaterialIcon");
+    });
+
+    it("renders as a span element", () => {
+      render(<MaterialIcon name="search" />);
+      expect(screen.getByText("search").tagName).toBe("SPAN");
+    });
+
+    it("applies material-symbols-rounded class", () => {
+      render(<MaterialIcon name="settings" />);
+      expect(screen.getByText("settings").className).toContain(
+        "material-symbols-rounded"
+      );
+    });
+  });
+
+  describe("Font variation settings", () => {
+    it("sets default font variation settings", () => {
+      render(<MaterialIcon name="home" />);
+      const el = screen.getByText("home");
+      expect(el.style.fontVariationSettings).toContain("'FILL' 0");
+      expect(el.style.fontVariationSettings).toContain("'wght' 200");
+      expect(el.style.fontVariationSettings).toContain("'GRAD' 145");
+      expect(el.style.fontVariationSettings).toContain("'opsz' 48");
+    });
+
+    it("sets fill when provided", () => {
+      render(<MaterialIcon name="star" fill={1} />);
+      const el = screen.getByText("star");
+      expect(el.style.fontVariationSettings).toContain("'FILL' 1");
+    });
+
+    it("sets custom weight", () => {
+      render(<MaterialIcon name="star" weight="400" />);
+      const el = screen.getByText("star");
+      expect(el.style.fontVariationSettings).toContain("'wght' 400");
+    });
+
+    it("sets custom optical size", () => {
+      render(<MaterialIcon name="star" opticalSize="24dp" />);
+      const el = screen.getByText("star");
+      expect(el.style.fontVariationSettings).toContain("'opsz' 24");
+    });
+
+    it("sets custom emphasis (GRAD)", () => {
+      render(<MaterialIcon name="star" emphasis={200} />);
+      const el = screen.getByText("star");
+      expect(el.style.fontVariationSettings).toContain("'GRAD' 200");
+    });
+  });
+
+  describe("Size", () => {
+    it("applies default font size of 24px", () => {
+      render(<MaterialIcon name="home" />);
+      const el = screen.getByText("home");
+      expect(el.style.fontSize).toBe("24px");
+    });
+
+    it("applies custom size", () => {
+      render(<MaterialIcon name="home" size={48} />);
+      const el = screen.getByText("home");
+      expect(el.style.fontSize).toBe("48px");
+    });
+  });
+
+  describe("Color", () => {
+    it("uses currentColor by default", () => {
+      render(<MaterialIcon name="home" />);
+      const el = screen.getByText("home");
+      expect(el.style.color).toBe("currentColor");
+    });
+
+    it("applies custom color", () => {
+      render(<MaterialIcon name="home" color="red" />);
+      const el = screen.getByText("home");
+      expect(el.style.color).toBe("red");
+    });
+  });
+
+  describe("Custom props", () => {
+    it("applies custom className", () => {
+      render(<MaterialIcon name="home" className="custom-icon" />);
+      const el = screen.getByText("home");
+      expect(el.className).toContain("custom-icon");
+    });
+
+    it("applies custom inline style", () => {
+      render(<MaterialIcon name="home" style={{ opacity: 0.5 }} />);
+      const el = screen.getByText("home");
+      expect(el.style.opacity).toBe("0.5");
+    });
+
+    it("applies data-testid", () => {
+      render(<MaterialIcon name="home" dataTestId="my-icon" />);
+      expect(screen.getByTestId("my-icon")).toBeInTheDocument();
+    });
+  });
+
+  describe("Event handling", () => {
+    it("calls onClick when clicked", () => {
+      const onClick = jest.fn();
+      render(<MaterialIcon name="home" onClick={onClick} />);
+      fireEvent.click(screen.getByText("home"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Font family", () => {
+    it("sets Material Symbols Rounded font family", () => {
+      render(<MaterialIcon name="home" />);
+      const el = screen.getByText("home");
+      expect(el.style.fontFamily).toContain("Material Symbols Rounded");
+    });
+  });
+});

package/src/components/material-icon/index.tsx

@@ -1,47 +1,47 @@
-import React from "react";
-import { cx } from "../../utils/cx";
-import type { IconProps } from "./types";
-
-const MaterialIcon: React.FC<IconProps> = ({
-  name,
-  fill = 0,
-  opticalSize = "48dp",
-  weight = "200",
-  emphasis = 145,
-  size = 24,
-  color = "currentColor",
-  style = {},
-  className,
-  onClick,
-  dataTestId,
-}) => {
-  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
-
-  const combinedStyle: React.CSSProperties = {
-    fontVariationSettings,
-    fontSize: `${size}px`,
-    fontFamily: "'Material Symbols Rounded'",
-    color: color || "currentColor",
-    ...style,
-  };
-
-  return (
-    <span
-      style={combinedStyle}
-      className={cx(
-        "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
-        className
-      )}
-      onClick={onClick}
-      data-testid={dataTestId}
-    >
-      {name}
-    </span>
-  );
-};
-
-export { MaterialIcon };
-
-MaterialIcon.displayName = "MaterialIcon";
-
-export type { IconProps, IconName, Size } from "./types";
+import React from "react";
+import { cx } from "../../utils/cx";
+import type { IconProps } from "./types";
+
+const MaterialIcon: React.FC<IconProps> = ({
+  name,
+  fill = 0,
+  opticalSize = "48dp",
+  weight = "200",
+  emphasis = 145,
+  size = 24,
+  color = "currentColor",
+  style = {},
+  className,
+  onClick,
+  dataTestId,
+}) => {
+  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
+
+  const combinedStyle: React.CSSProperties = {
+    fontVariationSettings,
+    fontSize: `${size}px`,
+    fontFamily: "'Material Symbols Rounded'",
+    color: color || "currentColor",
+    ...style,
+  };
+
+  return (
+    <span
+      style={combinedStyle}
+      className={cx(
+        "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
+        className
+      )}
+      onClick={onClick}
+      data-testid={dataTestId}
+    >
+      {name}
+    </span>
+  );
+};
+
+export { MaterialIcon };
+
+MaterialIcon.displayName = "MaterialIcon";
+
+export type { IconProps, IconName, Size } from "./types";

package/src/components/material-icon/types.ts

@@ -1,31 +1,31 @@
-import type { CSSProperties } from "react";
-import {
-  emphasis,
-  iconNameList,
-  OpticalSizes,
-  sizes,
-  weights,
-} from "./constants";
-
-export type Fill = 1 | 0;
-
-export type IconName = (typeof iconNameList)[number];
-
-export type OpticalSize = (typeof OpticalSizes)[number];
-export type Weight = (typeof weights)[number];
-export type Emphasis = (typeof emphasis)[number];
-export type Size = (typeof sizes)[number];
-
-export type IconProps = {
-  name: IconName;
-  fill?: Fill;
-  opticalSize?: OpticalSize;
-  weight?: Weight;
-  emphasis?: Emphasis;
-  size?: Size;
-  color?: string;
-  style?: CSSProperties;
-  className?: string;
-  onClick?: () => void;
-  dataTestId?: string;
-};
+import type { CSSProperties } from "react";
+import {
+  emphasis,
+  iconNameList,
+  OpticalSizes,
+  sizes,
+  weights,
+} from "./constants";
+
+export type Fill = 1 | 0;
+
+export type IconName = (typeof iconNameList)[number];
+
+export type OpticalSize = (typeof OpticalSizes)[number];
+export type Weight = (typeof weights)[number];
+export type Emphasis = (typeof emphasis)[number];
+export type Size = (typeof sizes)[number];
+
+export type IconProps = {
+  name: IconName;
+  fill?: Fill;
+  opticalSize?: OpticalSize;
+  weight?: Weight;
+  emphasis?: Emphasis;
+  size?: Size;
+  color?: string;
+  style?: CSSProperties;
+  className?: string;
+  onClick?: () => void;
+  dataTestId?: string;
+};