@kaizen/components 1.70.16 → 1.70.18

package/dist/types/ToggleSwitch/ToggleSwitch/ToggleSwitch.d.ts

@@ -10,6 +10,6 @@ export type ToggleSwitchProps = {
     reversed?: boolean;
 } & OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onToggle'>>;
 export declare const ToggleSwitch: {
-    ({ toggledStatus, onToggle, reversed, ...restProps }: ToggleSwitchProps): JSX.Element;
+    ({ toggledStatus, onToggle, reversed, disabled, ...restProps }: ToggleSwitchProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.16",
+  "version": "1.70.18",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss

@@ -27,19 +27,20 @@ $focus-ring-offset: 1px;
 
   /* TODO: Fix */
   /* stylelint-disable no-descending-specificity */
-  .checkbox:focus + &,
-  .checkbox:hover:focus + & {
+  .checkbox:not(.disabled):focus + &,
+  .checkbox:not(.disabled):hover:focus + & {
     border-color: transparent;
     outline: 2px solid $color-blue-500;
     outline-offset: $focus-ring-offset;
     background-color: $color-gray-600;
   }
 
-  .checkbox + &:hover,
-  label:hover .checkbox + & {
+  .checkbox:not(.disabled) + &:hover,
+  label:hover .checkbox:not(.disabled) + & {
     background-color: $color-purple-500;
     background-color: $color-gray-600;
   }
+
   /* stylelint-enable no-descending-specificity */
 }
 
@@ -54,6 +55,7 @@ $focus-ring-offset: 1px;
   transition:
     left $animation-timing,
     right $animation-timing;
+  cursor: default;
 }
 
 .checkIcon {
@@ -71,7 +73,7 @@ $focus-ring-offset: 1px;
 
   .checkbox:focus + .track {
     border-color: transparent;
-    background-color: $color-green-500;
+    background-color: $color-green-600;
   }
 
   .thumb {
@@ -86,8 +88,8 @@ $focus-ring-offset: 1px;
     transition-duration: $animation-duration-fast;
   }
 
-  .checkbox + .track:hover,
-  label:hover & .checkbox + .track {
+  .checkbox:not(.disabled) + .track:hover,
+  label:hover & .checkbox:not(.disabled) + .track {
     background-color: $color-green-600;
   }
 }
@@ -116,10 +118,20 @@ $focus-ring-offset: 1px;
       background-color: rgba($color-white-rgb, 0.65);
     }
 
-    .checkbox + .track:hover,
-    label:hover & .checkbox + .track {
+    .checkbox:not(.disabled) + .track:hover,
+    label:hover & .checkbox:not(.disabled) + .track {
       background-color: rgba($color-white-rgb, 0.65);
     }
   }
 }
+
+// When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component
+label .disabled.track {
+  opacity: 100%;
+}
+
+.disabled.track {
+  opacity: 30%;
+}
+
 /* stylelint-enable no-descending-specificity */

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx

@@ -19,6 +19,7 @@ export const ToggleSwitch = ({
   toggledStatus,
   onToggle,
   reversed,
+  disabled,
   ...restProps
 }: ToggleSwitchProps): JSX.Element => {
   const isOn = toggledStatus === 'on'
@@ -27,12 +28,13 @@ export const ToggleSwitch = ({
     <span className={classnames(isOn ? styles.on : styles.off, reversed && styles.reversed)}>
       <input
         type="checkbox"
-        className={styles.checkbox}
+        className={classnames(styles.checkbox, disabled && styles.disabled)}
         checked={isOn ? true : false}
         onChange={onToggle}
+        disabled={disabled}
         {...restProps}
       />
-      <span className={styles.track}>
+      <span className={classnames(styles.track, disabled && styles.disabled)}>
         <span className={styles.thumb}>
           <Icon name="check" isPresentational className={styles.checkIcon} />
         </span>