@windstream/react-shared-components 0.1.6 → 0.1.7

package/src/components/checkbox/index.tsx

@@ -1,197 +1,197 @@
-"use client";
-
-import React, { useCallback } from "react";
-import { CheckboxProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { cx } from "@shared/utils";
-
-export const Checkbox: React.FC<CheckboxProps> = ({
-  state,
-  checked = false,
-  onChange,
-  className,
-  label,
-  labelClassName,
-  containerClassName,
-  name,
-  value,
-  id,
-  disabled = false,
-  required = false,
-  error = false,
-  "data-cy": dataCy,
-  renderInfoIcon,
-  ...rest
-}) => {
-  const isDisabled = disabled || state === "disabled";
-  const isFocused = state === "focus";
-  const inputId = id || name;
-
-  const checkboxClasses = cx(
-    "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
-    isFocused && "outline",
-    className
-  );
-
-  const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (!isDisabled) {
-        if (onChange) {
-          // Check if onChange expects a boolean parameter (new signature)
-          if (onChange.length === 1) {
-            (onChange as (isChecked: boolean) => void)(e.target.checked);
-          } else {
-            // Old signature - just call without parameters
-            (onChange as () => void)();
-          }
-        }
-      }
-    },
-    [isDisabled, onChange]
-  );
-
-  const renderIcon = () => {
-    if (checked) {
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <rect
-            width="24"
-            height="24"
-            rx="4"
-            className={cx(
-              isDisabled
-                ? "fill-checkbox-bg-surface-selected-disabled"
-                : "fill-bg-fill-brand"
-            )}
-          />
-          <path
-            d="M8 11.9593L11.0316 15L17 9"
-            stroke="white"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      );
-    }
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <rect
-          x="0.5"
-          y="0.5"
-          width="23"
-          height="23"
-          rx="3.5"
-          className={cx(
-            isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white"
-          )}
-        />
-        <rect
-          x="0.5"
-          y="0.5"
-          width="23"
-          height="23"
-          rx="3.5"
-          stroke="#CECECE"
-        />
-      </svg>
-    );
-  };
-
-  const checkboxElement = (
-    <div className={cx("flex items-center gap-3", containerClassName)}>
-      <div className="relative">
-        <input
-          type="checkbox"
-          id={inputId}
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={handleInputChange}
-          disabled={isDisabled}
-          required={required}
-          className="peer sr-only"
-          data-cy={dataCy}
-          {...rest}
-        />
-        <label
-          htmlFor={inputId}
-          className={cx("peer-focus:outline", checkboxClasses)}
-          style={{ pointerEvents: isDisabled ? "none" : "auto" }}
-        >
-          {renderIcon()}
-        </label>
-      </div>
-      {label && (
-        <label
-          htmlFor={inputId}
-          className={cx(
-            "cursor-pointer",
-            error && "text-text-critical",
-            labelClassName
-          )}
-        >
-          {label}
-        </label>
-      )}
-      {renderInfoIcon && (
-        <Button
-          type="button"
-          onClick={renderInfoIcon.onClick}
-          data-testid={renderInfoIcon.dataTestId}
-          className="ml-2 cursor-pointer text-icon-info"
-          aria-label="More information"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <circle
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="2"
-            />
-            <path
-              d="M12 16v-4"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M12 8h.01"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </Button>
-      )}
-    </div>
-  );
-
-  return checkboxElement;
-};
-
-Checkbox.displayName = "Checkbox";
-
-export type { CheckboxProps };
+"use client";
+
+import React, { useCallback } from "react";
+import { CheckboxProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { cx } from "@shared/utils";
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  state,
+  checked = false,
+  onChange,
+  className,
+  label,
+  labelClassName,
+  containerClassName,
+  name,
+  value,
+  id,
+  disabled = false,
+  required = false,
+  error = false,
+  "data-cy": dataCy,
+  renderInfoIcon,
+  ...rest
+}) => {
+  const isDisabled = disabled || state === "disabled";
+  const isFocused = state === "focus";
+  const inputId = id || name;
+
+  const checkboxClasses = cx(
+    "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
+    isFocused && "outline",
+    className
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isDisabled) {
+        if (onChange) {
+          // Check if onChange expects a boolean parameter (new signature)
+          if (onChange.length === 1) {
+            (onChange as (isChecked: boolean) => void)(e.target.checked);
+          } else {
+            // Old signature - just call without parameters
+            (onChange as () => void)();
+          }
+        }
+      }
+    },
+    [isDisabled, onChange]
+  );
+
+  const renderIcon = () => {
+    if (checked) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <rect
+            width="24"
+            height="24"
+            rx="4"
+            className={cx(
+              isDisabled
+                ? "fill-checkbox-bg-surface-selected-disabled"
+                : "fill-bg-fill-brand"
+            )}
+          />
+          <path
+            d="M8 11.9593L11.0316 15L17 9"
+            stroke="white"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    }
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <rect
+          x="0.5"
+          y="0.5"
+          width="23"
+          height="23"
+          rx="3.5"
+          className={cx(
+            isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white"
+          )}
+        />
+        <rect
+          x="0.5"
+          y="0.5"
+          width="23"
+          height="23"
+          rx="3.5"
+          stroke="#CECECE"
+        />
+      </svg>
+    );
+  };
+
+  const checkboxElement = (
+    <div className={cx("flex items-center gap-3", containerClassName)}>
+      <div className="relative">
+        <input
+          type="checkbox"
+          id={inputId}
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={handleInputChange}
+          disabled={isDisabled}
+          required={required}
+          className="peer sr-only"
+          data-cy={dataCy}
+          {...rest}
+        />
+        <label
+          htmlFor={inputId}
+          className={cx("peer-focus:outline", checkboxClasses)}
+          style={{ pointerEvents: isDisabled ? "none" : "auto" }}
+        >
+          {renderIcon()}
+        </label>
+      </div>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cx(
+            "cursor-pointer",
+            error && "text-text-critical",
+            labelClassName
+          )}
+        >
+          {label}
+        </label>
+      )}
+      {renderInfoIcon && (
+        <Button
+          type="button"
+          onClick={renderInfoIcon.onClick}
+          data-testid={renderInfoIcon.dataTestId}
+          className="ml-2 cursor-pointer text-icon-info"
+          aria-label="More information"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="2"
+            />
+            <path
+              d="M12 16v-4"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M12 8h.01"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </Button>
+      )}
+    </div>
+  );
+
+  return checkboxElement;
+};
+
+Checkbox.displayName = "Checkbox";
+
+export type { CheckboxProps };

package/src/components/checkbox/types.ts

@@ -1,27 +1,27 @@
-import { InputHTMLAttributes, ReactNode } from "react";
-
-type InfoIconProps = {
-  onClick?: () => void;
-  dataTestId?: string;
-};
-
-export type CheckboxProps = {
-  checked?: boolean;
-  onChange?: ((isChecked: boolean) => void) | (() => void);
-  state?: "default" | "focus" | "disabled";
-  className?: string;
-  containerClassName?: string;
-  label?: string | ReactNode;
-  labelClassName?: string;
-  name?: string;
-  value?: string | number | boolean;
-  id?: string;
-  disabled?: boolean;
-  required?: boolean;
-  error?: boolean;
-  "data-cy"?: string;
-  renderInfoIcon?: InfoIconProps;
-} & Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "type" | "checked" | "onChange"
->;
+import { InputHTMLAttributes, ReactNode } from "react";
+
+type InfoIconProps = {
+  onClick?: () => void;
+  dataTestId?: string;
+};
+
+export type CheckboxProps = {
+  checked?: boolean;
+  onChange?: ((isChecked: boolean) => void) | (() => void);
+  state?: "default" | "focus" | "disabled";
+  className?: string;
+  containerClassName?: string;
+  label?: string | ReactNode;
+  labelClassName?: string;
+  name?: string;
+  value?: string | number | boolean;
+  id?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: boolean;
+  "data-cy"?: string;
+  renderInfoIcon?: InfoIconProps;
+} & Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "checked" | "onChange"
+>;