From cd26e7cf7b666da211efc7dd7af4f58a25a1b7a0 Mon Sep 17 00:00:00 2001
From: chensara <chensara0@gmail.com>
Date: Thu, 11 Apr 2024 11:10:08 +0300
Subject: [PATCH] feat: add autoFocus to CheckBox (#2059)

Co-authored-by: Yossi Saadi <yossisaadi@gmail.com>
---
 .../core/src/components/Checkbox/Checkbox.tsx |  4 +
 .../checkbox-snapshot-tests.jest.tsx.snap     | 47 +++++++++++
 .../checkbox-snapshot-tests.jest.tsx          |  5 ++
 .../__tests__/checkbox-tests.jest.tsx         | 80 ++++++++++++++-----
 4 files changed, 115 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/components/Checkbox/Checkbox.tsx b/packages/core/src/components/Checkbox/Checkbox.tsx
index b1954d63ac..9836f9bc6e 100644
--- a/packages/core/src/components/Checkbox/Checkbox.tsx
+++ b/packages/core/src/components/Checkbox/Checkbox.tsx
@@ -36,6 +36,8 @@ export interface CheckBoxProps extends VibeComponentProps {
   checked?: boolean;
   /** An in between state to display a non selected */
   indeterminate?: boolean;
+  /** is autoFocus */
+  autoFocus?: boolean;
   /** Set the option to be disabled */
   disabled?: boolean;
   /** the default value which the checkbox will start from  */
@@ -63,6 +65,7 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
       ariaLabelledBy,
       onChange = NOOP,
       checked,
+      autoFocus,
       indeterminate = false,
       disabled = false,
       defaultChecked,
@@ -127,6 +130,7 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
           value={value}
           name={name}
           type="checkbox"
+          autoFocus={autoFocus}
           onChange={onChange}
           defaultChecked={overrideDefaultChecked}
           disabled={disabled}
diff --git a/packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap b/packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap
index c3d6b4bd7f..49a900db2a 100644
--- a/packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap
+++ b/packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap
@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Checkbox renders correctly when autoFocus 1`] = `
+<label
+  className="wrapper"
+  data-testid="checkbox"
+  onClickCapture={[Function]}
+  onMouseUp={[Function]}
+>
+  <input
+    aria-label=""
+    autoFocus={true}
+    className="input"
+    defaultChecked={false}
+    disabled={false}
+    name=""
+    onChange={[Function]}
+    type="checkbox"
+    value=""
+  />
+  <div
+    className="checkbox"
+    data-testid="checkbox-checkbox"
+  >
+    <svg
+      aria-hidden={true}
+      className="icon icon noFocusStyle"
+      data-testid="icon"
+      fill="currentColor"
+      height="16"
+      onClick={[Function]}
+      viewBox="0 0 20 20"
+      width="16"
+    >
+      <path
+        clipRule="evenodd"
+        d="M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  </div>
+  <span
+    className="typography primary start singleLineEllipsis text text2Normal label"
+    data-testid="checkbox-label"
+  />
+</label>
+`;
+
 exports[`Checkbox renders correctly when checked 1`] = `
 <label
   className="wrapper"
diff --git a/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx b/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx
index 855419df9b..b8277699aa 100644
--- a/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx
+++ b/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx
@@ -25,6 +25,11 @@ describe("Checkbox renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("when autoFocus", () => {
+    const tree = renderer.create(<Checkbox autoFocus />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it("with name", () => {
     const tree = renderer.create(<Checkbox name="checkbox" />).toJSON();
     expect(tree).toMatchSnapshot();
diff --git a/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx b/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx
index 1bab9d84e5..fe562b49ca 100644
--- a/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx
+++ b/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import "@testing-library/jest-dom";
 import { fireEvent, render, cleanup, screen } from "@testing-library/react";
 import Checkbox from "../Checkbox";
 
@@ -39,6 +40,8 @@ type RenderHelper = {
   option3Text: string;
   option3Value: string;
   onChangeMock3: jest.MockedFunction<MockedFunction>;
+  defaultChecked?: boolean;
+  autoFocus?: boolean;
 };
 
 function renderCheckboxes({
@@ -54,7 +57,9 @@ function renderCheckboxes({
   checkbox3Name,
   option3Text,
   option3Value,
-  onChangeMock3
+  onChangeMock3,
+  defaultChecked,
+  autoFocus
 }: RenderHelper) {
   render(
     <form name={formName}>
@@ -62,8 +67,9 @@ function renderCheckboxes({
         name={checkbox1Name}
         value={option1Value}
         label={option1Text}
-        defaultChecked={true}
+        defaultChecked={defaultChecked}
         onChange={onChangeMock1}
+        autoFocus={autoFocus}
       />
       <Checkbox name={checkbox2Name} value={option2Value} label={option2Text} onChange={onChangeMock2} />
       <Checkbox name={checkbox3Name} value={option3Value} label={option3Text} onChange={onChangeMock3} />
@@ -87,23 +93,24 @@ function testUnselectFirstOption(
 }
 
 describe("Checkbox tests", () => {
-  describe("regular checkbox tests", () => {
-    const {
-      formName,
-      checkbox1Name,
-      option1Value,
-      option1Text,
-      checkbox2Name,
-      option2Value,
-      option2Text,
-      checkbox3Name,
-      option3Value,
-      option3Text
-    } = createCheckboxesVariables();
+  const {
+    formName,
+    checkbox1Name,
+    option1Value,
+    option1Text,
+    checkbox2Name,
+    option2Value,
+    option2Text,
+    checkbox3Name,
+    option3Value,
+    option3Text
+  } = createCheckboxesVariables();
 
-    let onChangeMock1: jest.MockedFunction<MockedFunction>,
-      onChangeMock2: jest.MockedFunction<MockedFunction>,
-      onChangeMock3: jest.MockedFunction<MockedFunction>;
+  let onChangeMock1: jest.MockedFunction<MockedFunction>,
+    onChangeMock2: jest.MockedFunction<MockedFunction>,
+    onChangeMock3: jest.MockedFunction<MockedFunction>;
+
+  describe("regular checkbox tests with default checked", () => {
     beforeEach(() => {
       onChangeMock1 = jest.fn();
       onChangeMock2 = jest.fn();
@@ -122,7 +129,8 @@ describe("Checkbox tests", () => {
         option1Value,
         checkbox1Name,
         checkbox2Name,
-        checkbox3Name
+        checkbox3Name,
+        defaultChecked: true
       });
     });
 
@@ -139,7 +147,7 @@ describe("Checkbox tests", () => {
       expect(option3.checked).toBeFalsy();
     });
 
-    it("should unselect  1st option", () => {
+    it("should unselect 1st option", () => {
       testUnselectFirstOption(option1Text, option2Text, option3Text);
     });
 
@@ -179,6 +187,35 @@ describe("Checkbox tests", () => {
       });
     });
   });
+
+  describe("regular checkbox tests with no default checked", () => {
+    it("should auto focus 1st checkbox", () => {
+      renderCheckboxes({
+        formName,
+        onChangeMock1,
+        onChangeMock2,
+        onChangeMock3,
+        option3Text,
+        option3Value,
+        option2Text,
+        option2Value,
+        option1Text,
+        option1Value,
+        checkbox1Name,
+        checkbox2Name,
+        checkbox3Name,
+        autoFocus: true
+      });
+
+      const option1 = screen.getByLabelText<HTMLInputElement>(option1Text);
+      const option2 = screen.getByLabelText<HTMLInputElement>(option2Text);
+      const option3 = screen.getByLabelText<HTMLInputElement>(option3Text);
+      expect(option1).toHaveFocus();
+      expect(option2).not.toHaveFocus();
+      expect(option3).not.toHaveFocus();
+    });
+  });
+
   describe("specific firefox checkbox tests", () => {
     const {
       formName,
@@ -230,7 +267,8 @@ describe("Checkbox tests", () => {
         option1Value,
         checkbox1Name,
         checkbox2Name,
-        checkbox3Name
+        checkbox3Name,
+        defaultChecked: true
       });
     });