From edb98a5d9362961719061de5aab3d89d189f7faa Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Mon, 10 Jun 2024 15:26:01 +0200
Subject: [PATCH 1/2] fix(Checkbox): prevent changes on readOnly

When readOnly is true:
- Disable onChange event handler
- Stop propagation of onClick to parents
- Adjust story not to be decieving

Closes FEPLT-2020
---
 packages/orbit-components/src/Checkbox/Checkbox.stories.tsx | 2 +-
 packages/orbit-components/src/Checkbox/index.tsx            | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/orbit-components/src/Checkbox/Checkbox.stories.tsx b/packages/orbit-components/src/Checkbox/Checkbox.stories.tsx
index 62fcf09d10..8507a4912a 100644
--- a/packages/orbit-components/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/orbit-components/src/Checkbox/Checkbox.stories.tsx
@@ -126,7 +126,7 @@ export const Playground = () => {
       dataTest={dataTest}
       info={info}
       readOnly={readOnly}
-      onChange={!readOnly ? action("changed") : undefined}
+      onChange={action("changed")}
     />
   );
 };
diff --git a/packages/orbit-components/src/Checkbox/index.tsx b/packages/orbit-components/src/Checkbox/index.tsx
index 2a93cbbbf7..d6d4955447 100644
--- a/packages/orbit-components/src/Checkbox/index.tsx
+++ b/packages/orbit-components/src/Checkbox/index.tsx
@@ -60,7 +60,8 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
         name={name}
         tabIndex={tabIndex ? Number(tabIndex) : undefined}
         checked={checked}
-        onChange={onChange}
+        onChange={!readOnly ? onChange : undefined}
+        onClick={e => readOnly && e.stopPropagation()}
         ref={ref}
         readOnly={readOnly}
       />

From 45d3a1d50a0ae84f32fcc301da5b10b11af6a0a6 Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Mon, 10 Jun 2024 15:33:01 +0200
Subject: [PATCH 2/2] chore(ListChoice): add story controlled by useState

---
 .../src/ListChoice/ListChoice.stories.tsx     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/orbit-components/src/ListChoice/ListChoice.stories.tsx b/packages/orbit-components/src/ListChoice/ListChoice.stories.tsx
index bbb0ac64a7..6960b0119c 100644
--- a/packages/orbit-components/src/ListChoice/ListChoice.stories.tsx
+++ b/packages/orbit-components/src/ListChoice/ListChoice.stories.tsx
@@ -130,6 +130,26 @@ Playground.story = {
   },
 };
 
+export const Controlled = () => {
+  const [selected, setSelected] = React.useState(false);
+
+  const Icon = getIcon(getIcons("icon", "Accommodation"));
+
+  return (
+    <ListChoice
+      title="Controlled ListChoice"
+      description="This ListChoice is controlled by React.useState"
+      icon={Icon && <Icon />}
+      selectable
+      selected={selected}
+      onClick={e => {
+        action("onClick")(e);
+        setSelected(!selected);
+      }}
+    />
+  );
+};
+
 export const Rtl = () => (
   <RenderInRtl>
     <>