From 527c3fc0c9a651646d89d725e551c352790e9f0d Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 22 May 2023 15:24:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20set=20specific=20cursor=20on?=
 =?UTF-8?q?=20checkbox=20related=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Even if this is not the default behavior of the native checkbox, based on
recent feedbacks and by comparing what other components libraries do, it
appears that setting a custom cursor on checkbox hover is the most
intuitive thing to do.

Resolve #59
---
 .changeset/hip-cups-drive.md                            | 5 +++++
 packages/react/src/components/Forms/Checkbox/index.scss | 3 +++
 packages/react/src/components/Forms/Radio/index.scss    | 1 +
 3 files changed, 9 insertions(+)
 create mode 100644 .changeset/hip-cups-drive.md

diff --git a/.changeset/hip-cups-drive.md b/.changeset/hip-cups-drive.md
new file mode 100644
index 0000000..dfb7605
--- /dev/null
+++ b/.changeset/hip-cups-drive.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+set specific cursor on checkbox related components
diff --git a/packages/react/src/components/Forms/Checkbox/index.scss b/packages/react/src/components/Forms/Checkbox/index.scss
index f068e89..7d5cf72 100644
--- a/packages/react/src/components/Forms/Checkbox/index.scss
+++ b/packages/react/src/components/Forms/Checkbox/index.scss
@@ -21,6 +21,7 @@
   border-color: transparent;
   // To automatically align the checkbox to the left side.
   margin-left: -1 * $padding;
+  cursor: pointer;
 
   &:hover, &:focus-within {
     background-color: var(--c--theme--colors--greyscale-200);
@@ -57,6 +58,7 @@
       border: 1.5px solid var(--c--components--forms-checkbox--border-color);
       border-radius: var(--c--components--forms-checkbox--border-radius);
       display: block;
+      cursor: pointer;
 
       &:focus {
         outline: none;
@@ -108,6 +110,7 @@
   &--disabled {
     border-color: transparent;
     color: var(--c--theme--colors--greyscale-600);
+    cursor: not-allowed;
 
     svg {
       color: var(--c--theme--colors--greyscale-400);
diff --git a/packages/react/src/components/Forms/Radio/index.scss b/packages/react/src/components/Forms/Radio/index.scss
index bac97ba..97d9ad8 100644
--- a/packages/react/src/components/Forms/Radio/index.scss
+++ b/packages/react/src/components/Forms/Radio/index.scss
@@ -9,6 +9,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
 
     &:focus {
       outline: none;