From 0f779c49108bdf192bbb991a6439e172ed3701a0 Mon Sep 17 00:00:00 2001
From: sjschlapbach <julius.schlapbach@gmx.net>
Date: Mon, 9 Sep 2024 19:46:46 +0200
Subject: [PATCH] enhance(Switch): show lock on switch thumb component when
 disabled

---
 packages/design-system/src/Switch.stories.tsx | 26 +++++++++++++++++++
 packages/design-system/src/Switch.tsx         | 10 ++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/Switch.stories.tsx b/packages/design-system/src/Switch.stories.tsx
index df0d8fbd..a3b374e7 100644
--- a/packages/design-system/src/Switch.stories.tsx
+++ b/packages/design-system/src/Switch.stories.tsx
@@ -124,8 +124,34 @@ export const Sizes = () => {
           onCheckedChange={(newValue) => setIsChecked2(newValue)}
         />
       </div>
+      <div className="mb-3">
+        <Switch
+          checked={isChecked3}
+          size="sm"
+          label="Small switch"
+          onCheckedChange={(newValue) => setIsChecked3(newValue)}
+        />
+      </div>
+      <div className="mb-3">
+        <Switch
+          disabled
+          checked={isChecked1}
+          label="Standard switch"
+          onCheckedChange={(newValue) => setIsChecked1(newValue)}
+        />
+      </div>
+      <div className="mb-3">
+        <Switch
+          disabled
+          checked={isChecked2}
+          size="lg"
+          label="Large switch"
+          onCheckedChange={(newValue) => setIsChecked2(newValue)}
+        />
+      </div>
       <div>
         <Switch
+          disabled
           checked={isChecked3}
           size="sm"
           label="Small switch"
diff --git a/packages/design-system/src/Switch.tsx b/packages/design-system/src/Switch.tsx
index 9cd78e68..8b0a407c 100644
--- a/packages/design-system/src/Switch.tsx
+++ b/packages/design-system/src/Switch.tsx
@@ -1,4 +1,4 @@
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
+import { faCircleExclamation, faLock } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import * as RadixSwitch from '@radix-ui/react-switch'
 import React from 'react'
@@ -135,14 +135,18 @@ export function Switch({
       >
         <RadixSwitch.Thumb
           className={twMerge(
-            'block rounded-full bg-white transition-transform',
+            'flex items-center justify-center rounded-full bg-white transition-transform',
             typeof checked === 'undefined' &&
               transitionSizeUndefined[size || 'md'],
             checked === true && transitionSize[size || 'md'],
             thumbSize[size || 'md'],
             className?.thumb
           )}
-        />
+        >
+          {disabled && (
+            <FontAwesomeIcon icon={faLock} className="h-3 w-3 text-gray-400" />
+          )}
+        </RadixSwitch.Thumb>
       </RadixSwitch.Root>
       {!labelLeft && label && (
         <FormLabel