Add not-allowed cursor property on disabled checkbox (#593)

Author: pjhampton

src/components/Checkbox/Checkbox.test.tsx

@@ -27,7 +27,12 @@ describe("Checkbox", () => {
       label: "Accept terms and conditions",
       disabled: true,
     });
+
     const checkbox = getByTestId("checkbox");
+
+    const computedStyle = window.getComputedStyle(checkbox);
+    expect(computedStyle.cursor).toBe("not-allowed");
+
     fireEvent.click(checkbox);
 
     expect(counter).toEqual(0);

src/components/Checkbox/Checkbox.tsx

@@ -93,6 +93,7 @@ const CheckInput = styled(RadixCheckbox.Root)<{
     &[data-disabled] {
       background: ${theme.click.checkbox.color.background.disabled};
       border-color: ${theme.click.checkbox.color.stroke.disabled};
+      cursor: not-allowed;
       &[data-state="checked"] {
         background: ${theme.click.checkbox.color.background.disabled};
         border-color: ${theme.click.checkbox.color.stroke.disabled};