@stackshift-ui/checkbox-group 6.0.11 → 7.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/checkbox-group",
   "description": "",
-  "version": "6.0.11",
+  "version": "7.0.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -13,7 +13,9 @@
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.7.0",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
@@ -29,20 +31,20 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.10",
-    "@stackshift-ui/typescript-config": "6.0.10"
+    "@stackshift-ui/typescript-config": "6.0.10",
+    "@stackshift-ui/eslint-config": "6.0.10"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/system": "6.0.11",
-    "@stackshift-ui/scripts": "6.0.10"
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0"
   },
   "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
-    "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "react-dom": "16.8 - 19"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/checkbox-group.test.tsx

@@ -7,7 +7,64 @@ describe.concurrent("checkbox-group", () => {
 
   test("Common: Checkbox Group - test if renders without errors", ({ expect }) => {
     const clx = "my-class";
-    render(<CheckboxGroup className={clx} />);
+    const { unmount } = render(<CheckboxGroup data-testid="div" className={clx} />);
     expect(screen.getByTestId("div").classList).toContain(clx);
+    unmount();
+  });
+
+  test("Common: Checkbox Group - test if renders with correct label", ({ expect }) => {
+    const label = "My Label";
+    const { unmount } = render(<CheckboxGroup label={label} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: Checkbox Group - test if renders with correct variant", ({ expect }) => {
+    const clx = "w-full";
+    const { unmount: unmountPrimary } = render(
+      <CheckboxGroup
+        data-testid="primary-checkbox-group"
+        variant="primary"
+        label="Primary"
+        className={clx}
+      />,
+    );
+    const checkboxGroup = screen.getByTestId("primary-checkbox-group");
+    screen.debug(checkboxGroup);
+    expect(checkboxGroup.classList).toContain(clx);
+    expect(checkboxGroup.classList).toContain("block");
+    expect(screen.getByText("Primary")).toBeInTheDocument();
+
+    const { unmount: unmountInline } = render(
+      <CheckboxGroup
+        data-testid="inline-checkbox-group"
+        variant="inline"
+        label="Inline"
+        className={clx}
+      />,
+    );
+    const inlineCheckboxGroup = screen.getByTestId("inline-checkbox-group");
+    expect(inlineCheckboxGroup.classList).toContain(clx);
+    expect(inlineCheckboxGroup.classList).toContain("flex");
+    expect(inlineCheckboxGroup.classList).toContain("gap-4");
+    expect(screen.getByText("Inline")).toBeInTheDocument();
+
+    unmountPrimary();
+    unmountInline();
+  });
+
+  test("Common: Checkbox Group - test render with checkboxes", ({ expect }) => {
+    const { unmount } = render(
+      <CheckboxGroup>
+        <input type="checkbox" id="1" name="1" value="1" />
+        <label htmlFor="1">Option 1</label>
+        <input type="checkbox" id="2" name="2" value="2" />
+        <label htmlFor="2">Option 2</label>
+      </CheckboxGroup>,
+    );
+
+    expect(screen.getByLabelText("Option 1")).toBeInTheDocument();
+    expect(screen.getByLabelText("Option 2")).toBeInTheDocument();
+    unmount();
   });
 });

package/src/checkbox-group.tsx

@@ -1,6 +1,6 @@
 import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import { Fragment, type ElementType, type HTMLProps, type ReactNode } from "react";
 import cn from "classnames";
+import { forwardRef, Fragment, type ElementType, type HTMLProps, type ReactNode } from "react";
 
 type StyleVariants<T extends string> = Record<T, string>;
 type Variant = "primary" | "inline";
@@ -19,17 +19,19 @@ export interface CheckboxGroupProps extends Omit<HTMLProps<HTMLElement>, "as"> {
 
 const displayName = "CheckboxGroup";
 
-export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
-  variant = "primary",
-  name,
-  label,
-  noLabel = false,
-  labelClass,
-  children,
-  className,
-  as,
-  ...props
-}) => {
+export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
+  const {
+    variant = "primary",
+    name,
+    label,
+    noLabel = false,
+    labelClass,
+    children,
+    className,
+    as,
+    ...rest
+  } = props;
+
   const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   const commonClass = "ml-2";
@@ -41,20 +43,16 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
     inline,
   };
 
-  const variantClass = variants[variant] ?? primary;
+  const variantClass = variants[variant as Variant] ?? primary;
 
   return (
     <Fragment>
       {!noLabel && <p className={labelClass}>{label || name}</p>}
-      <Component
-        as={as}
-        className={cn(variantClass, className)}
-        {...props}
-        data-testid={displayName}>
+      <Component ref={ref} as={as} className={cn(variantClass, className)} {...rest}>
         {children}
       </Component>
     </Fragment>
   );
-};
+});
 
 CheckboxGroup.displayName = displayName;

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+