From 4fd8c2401b1f59cc2bfb174d76994510d68e172d Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Mon, 14 Nov 2022 19:15:13 +0000
Subject: [PATCH] feat: readonly toggle (#12402)

* feat: readonly toggle

* chore: remove unnecessary scss vars

* fix: readonly cursor and text selection

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  3 ++
 .../src/components/Toggle/Toggle-test.js      | 13 ++++++++
 .../react/src/components/Toggle/Toggle.js     | 12 +++++--
 .../scss/components/toggle/_toggle.scss       | 33 +++++++++++++++++++
 4 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 27e7b1fdfd05..95e718146d54 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8457,6 +8457,9 @@ Map {
       "onToggle": Object {
         "type": "func",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "size": Object {
         "args": Array [
           Array [
diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js
index d4997cae033a..d652d1019184 100644
--- a/packages/react/src/components/Toggle/Toggle-test.js
+++ b/packages/react/src/components/Toggle/Toggle-test.js
@@ -111,6 +111,19 @@ describe('Toggle', () => {
         'true'
       );
     });
+
+    it('does not change value when readonly', () => {
+      const onClick = jest.fn();
+      const onToggle = jest.fn();
+      wrapper.rerender(
+        <Toggle {...props} onClick={onClick} onToggle={onToggle} readOnly />
+      );
+
+      expect(onClick).not.toHaveBeenCalled();
+      userEvent.click(wrapper.getByRole('switch'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onToggle).not.toHaveBeenCalled();
+    });
   });
 
   describe('emits events as expected', () => {
diff --git a/packages/react/src/components/Toggle/Toggle.js b/packages/react/src/components/Toggle/Toggle.js
index 7d47b6f5499b..f34cdbe8c052 100644
--- a/packages/react/src/components/Toggle/Toggle.js
+++ b/packages/react/src/components/Toggle/Toggle.js
@@ -22,6 +22,7 @@ export function Toggle({
   labelText,
   onClick,
   onToggle,
+  readOnly,
   size = 'md',
   toggled,
   ...other
@@ -34,8 +35,9 @@ export function Toggle({
   });
 
   function handleClick(e) {
-    setChecked(!checked);
-
+    if (!readOnly) {
+      setChecked(!checked);
+    }
     if (onClick) {
       onClick(e);
     }
@@ -48,6 +50,7 @@ export function Toggle({
     `${prefix}--toggle`,
     {
       [`${prefix}--toggle--disabled`]: disabled,
+      [`${prefix}--toggle--readonly`]: readOnly,
     },
     className
   );
@@ -151,6 +154,11 @@ Toggle.propTypes = {
    */
   onToggle: PropTypes.func,
 
+  /**
+   * Whether the toggle should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
    */
diff --git a/packages/styles/scss/components/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss
index 261ecd301832..4431c538f337 100644
--- a/packages/styles/scss/components/toggle/_toggle.scss
+++ b/packages/styles/scss/components/toggle/_toggle.scss
@@ -126,6 +126,10 @@
     visibility: visible;
   }
 
+  // ----------------------------------------
+  // disabled
+  // ----------------------------------------
+
   .#{$prefix}--toggle--disabled .#{$prefix}--toggle__appearance {
     cursor: not-allowed;
   }
@@ -147,6 +151,35 @@
     fill: button.$button-disabled;
   }
 
+  // ----------------------------------------
+  // readonly
+  // ----------------------------------------
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__appearance {
+    cursor: default;
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__switch {
+    border: 1px solid $icon-disabled;
+    background-color: transparent;
+
+    &::before {
+      top: rem(2px);
+      left: rem(2px);
+      background-color: $text-primary;
+    }
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__check {
+    top: rem(5px);
+    right: rem(4px);
+    fill: $background;
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__text {
+    cursor: text;
+    user-select: text;
+  }
+
   // HCM
 
   .#{$prefix}--toggle__switch,