Add not-allowed cursor to components in read only mode (#1716)

* Add not-allowed cursor to components in read only mode

* Update snapshot (style change)

Co-authored-by: Cristian Douce <[email protected]>

Author: Franco Correa

core/components/atoms/_simple-select/simple-select.tsx

@@ -89,6 +89,7 @@ const SimpleSelect = ({ options, ...props }: ISimpleSelectProps) => {
 };
 
 SimpleSelect.Element = styled(StyledInput).attrs({ as: "select" })`
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   appearance: none;
 
   padding-right: ${spacing.large};

core/components/atoms/checkbox/checkbox.story.tsx

@@ -1,11 +1,12 @@
-import * as React from 'react'
-import { storiesOf } from '@storybook/react'
-import { Example } from '../../_helpers/story-helpers'
+import * as React from "react";
 
-import { Checkbox, Paragraph } from '../../'
+import { storiesOf } from "@storybook/react";
 
-const CheckBoxExample = () => (
-  <Checkbox.Group name="example1" selected={['one', 'two']}>
+import { Checkbox, Paragraph } from "../../";
+import { Example } from "../../_helpers/story-helpers";
+
+const CheckBoxExample = (props) => (
+  <Checkbox.Group name="example1" selected={["one", "two"]} {...props}>
     <Checkbox name="one" value="one" readOnly>
       Option 1
     </Checkbox>
@@ -19,53 +20,62 @@ const CheckBoxExample = () => (
       Option 4
     </Checkbox>
   </Checkbox.Group>
-)
+);
 
-storiesOf('Checkbox', module).add('light', () => (
+storiesOf("Checkbox", module).add("light", () => (
   <Example>
     <CheckBoxExample />
   </Example>
-))
+));
 
-storiesOf('Checkbox', module).add('dark', () => (
+storiesOf("Checkbox", module).add("dark", () => (
   <Example background="dark">
     <CheckBoxExample />
   </Example>
-))
+));
+
+storiesOf("Checkbox", module).add("light - read only", () => (
+  <Example>
+    <CheckBoxExample readOnly={true} />
+  </Example>
+));
+
+storiesOf("Checkbox", module).add("dark - read only", () => (
+  <Example background="dark">
+    <CheckBoxExample readOnly={true} />
+  </Example>
+));
 
-storiesOf('Checkbox', module).add('long label', () => (
+storiesOf("Checkbox", module).add("long label", () => (
   <Example>
-    <Checkbox.Group name="example1" selected={['one']}>
+    <Checkbox.Group name="example1" selected={["one"]}>
       <Checkbox name="one" value="one">
         Option 1 (short label)
       </Checkbox>
       <Checkbox name="two" value="two">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur vestibulum sapien,
-        lacinia vulputate purus porttitor sit amet. Etiam tincidunt eget diam at semper. Nulla
-        pharetra odio vitae pharetra aliquet. Cras enim quam, maximus et molestie ut, rutrum vitae
-        lacus. Pellentesque pretium mi et sapien varius elementum. Phasellus egestas condimentum
-        tortor vel eleifend. Fusce lobortis varius mattis. Nam varius velit at quam rhoncus, a
-        efficitur elit ultrices. Donec sollicitudin auctor tincidunt. In congue molestie nisi id
-        egestas. Phasellus ac sodales leo. Vestibulum nec faucibus nibh, in efficitur urna. Fusce
-        fermentum convallis condimentum. (long label)
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur vestibulum sapien, lacinia vulputate
+        purus porttitor sit amet. Etiam tincidunt eget diam at semper. Nulla pharetra odio vitae pharetra aliquet. Cras
+        enim quam, maximus et molestie ut, rutrum vitae lacus. Pellentesque pretium mi et sapien varius elementum.
+        Phasellus egestas condimentum tortor vel eleifend. Fusce lobortis varius mattis. Nam varius velit at quam
+        rhoncus, a efficitur elit ultrices. Donec sollicitudin auctor tincidunt. In congue molestie nisi id egestas.
+        Phasellus ac sodales leo. Vestibulum nec faucibus nibh, in efficitur urna. Fusce fermentum convallis
+        condimentum. (long label)
       </Checkbox>
     </Checkbox.Group>
   </Example>
-))
+));
 
-storiesOf('Checkbox', module).add('single checkbox w/ long label', () => (
+storiesOf("Checkbox", module).add("single checkbox w/ long label", () => (
   <Example>
     <Paragraph>This is one paragraph!</Paragraph>
     <Paragraph>This is another paragraph!</Paragraph>
     <Checkbox name="one" value="one">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur vestibulum sapien,
-      lacinia vulputate purus porttitor sit amet. Etiam tincidunt eget diam at semper. Nulla
-      pharetra odio vitae pharetra aliquet. Cras enim quam, maximus et molestie ut, rutrum vitae
-      lacus. Pellentesque pretium mi et sapien varius elementum. Phasellus egestas condimentum
-      tortor vel eleifend. Fusce lobortis varius mattis. Nam varius velit at quam rhoncus, a
-      efficitur elit ultrices. Donec sollicitudin auctor tincidunt. In congue molestie nisi id
-      egestas. Phasellus ac sodales leo. Vestibulum nec faucibus nibh, in efficitur urna. Fusce
-      fermentum convallis condimentum. (long label)
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur vestibulum sapien, lacinia vulputate
+      purus porttitor sit amet. Etiam tincidunt eget diam at semper. Nulla pharetra odio vitae pharetra aliquet. Cras
+      enim quam, maximus et molestie ut, rutrum vitae lacus. Pellentesque pretium mi et sapien varius elementum.
+      Phasellus egestas condimentum tortor vel eleifend. Fusce lobortis varius mattis. Nam varius velit at quam rhoncus,
+      a efficitur elit ultrices. Donec sollicitudin auctor tincidunt. In congue molestie nisi id egestas. Phasellus ac
+      sodales leo. Vestibulum nec faucibus nibh, in efficitur urna. Fusce fermentum convallis condimentum. (long label)
     </Checkbox>
   </Example>
-))
+));

core/components/atoms/switch/switch.tsx

@@ -16,7 +16,7 @@ const Toggle = styled.span`
   height: var(--switch-height);
   border-radius: 21px;
   background: ${(props) => (props.on ? colors.base.green : colors.base.grayLight)};
-  cursor: pointer;
+  cursor: ${(props) => (props.readOnly ? "not-allowed" : "pointer")};
   position: relative;
 
   &:before {

internal/test/unit/__snapshots__/select.test.tsx.snap

@@ -282,7 +282,7 @@ exports[`Select simple variant renders SimpleSelect 1`] = `
     </svg>
   </i>
   <select
-    class="sc-fzXfMD sc-fzXfNg boowfx"
+    class="sc-fzXfMD sc-fzXfNg biHsse"
     data-cosmos-key="select"
     placeholder="Something"
   >