✨(react) set specific cursor on checkbox related components

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

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+set specific cursor on checkbox related components

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);

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;