feat: add inactive controls (PDS-266) (#765)

* feat(checkbox): add inactive variant

* feat(radio): add inactive variant

* feat(switch): add interactive variant

* style: fix css-variables in inactive controls

* test: add tests for inactive controls

* test: update sreenshots for inactive screenshots

packages/checkbox/src/Component.test.tsx

@@ -122,5 +122,29 @@ describe('Checkbox', () => {
 
             expect(cb).not.toBeCalled();
         });
+
+        test('should not call `onChange` prop if inactive', () => {
+            const cb = jest.fn();
+
+            const { container } = render(<Checkbox onChange={cb} inactive={true} />);
+
+            if (container.firstElementChild) {
+                fireEvent.click(container.firstElementChild);
+            }
+
+            expect(cb).not.toBeCalled();
+        });
+
+        test('should not call `onChange` prop if inactive and checked', () => {
+            const cb = jest.fn();
+
+            const { container } = render(<Checkbox onChange={cb} checked={true} inactive={true} />);
+
+            if (container.firstElementChild) {
+                fireEvent.click(container.firstElementChild);
+            }
+
+            expect(cb).not.toBeCalled();
+        });
     });
 });

packages/checkbox/src/Component.tsx

@@ -57,6 +57,16 @@ export type CheckboxProps = Omit<NativeProps, 'size' | 'onChange'> & {
      */
     block?: boolean;
 
+    /**
+     * Управление состоянием включен / выключен
+     */
+    disabled?: boolean;
+
+    /**
+     * Управление состоянием активен / неактивен
+     */
+    inactive?: boolean;
+
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -82,6 +92,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
             className,
             name,
             disabled,
+            inactive,
             dataTestId,
             indeterminate = false,
             ...restProps
@@ -103,6 +114,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
             <label
                 className={cn(styles.component, styles[size], styles[align], className, {
                     [styles.disabled]: disabled,
+                    [styles.inactive]: inactive,
                     [styles.checked]: checked,
                     [styles.indeterminate]: indeterminate,
                     [styles.focused]: focused,
@@ -114,7 +126,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                     <input
                         type='checkbox'
                         onChange={handleChange}
-                        disabled={disabled}
+                        disabled={disabled || inactive}
                         checked={checked}
                         data-test-id={dataTestId}
                         {...restProps}

packages/checkbox/src/component.screenshots.test.tsx

@@ -30,6 +30,7 @@ describe('Checkbox | size, disabled, checked', () => {
                             hint: ['Дополнительная информация'],
                             size: ['s', 'm'],
                             disabled: [true, false],
+                            inactive: [true, false],
                             indeterminate: [true, false],
                         },
                         size: { width: 400, height: 100 },

packages/checkbox/src/docs/Component.stories.mdx

@@ -24,6 +24,7 @@ import styles from '!!raw-loader!../index.module.css';
         const handleChange = () => setChecked(!checked);
         const size = select('size', ['s', 'm'], 's');
         const disabled = boolean('disabled', false);
+        const inactive = boolean('inactive', false);
         const checkedKnob = boolean('checked', false);
         const label = text('label', 'Согласен с условиями');
         const indeterminate = boolean('indeterminate', false);
@@ -34,6 +35,7 @@ import styles from '!!raw-loader!../index.module.css';
         return (
             <Checkbox
                 disabled={disabled}
+                inactive={inactive}
                 size={size}
                 block={block}
                 addons={addons}

packages/checkbox/src/index.module.css

@@ -25,8 +25,12 @@
     --checkbox-disabled-bg-color: var(--color-light-graphic-primary-inverted);
     --checkbox-disabled-border-color: var(--color-light-graphic-neutral);
 
+    /* inactive */
+    --checkbox-inactive-border-color: var(--color-light-border-secondary-inverted);
+    --checkbox-checked-inactive-color: var(--color-light-graphic-tertiary);
+
     /* disabled and checked */
-    --checkbox-checked-disabled-bg-color: var(--color-light-graphic-neutral);
+    --checkbox-checked-disabled-bg-color: var(--color-light-bg-neutral);
     --checkbox-checked-disabled-border-color: transparent;
 
     /* icon */
@@ -86,12 +90,12 @@
     margin: var(--gap-2xs) var(--gap-3xs);
 }
 
-.component:hover:not(.disabled) .box {
+.component:hover:not(.disabled):not(.inactive) .box {
     background-color: var(--checkbox-hover-bg-color);
     border-color: var(--checkbox-hover-border-color);
 }
 
-.component:active:not(.disabled) .box {
+.component:active:not(.disabled):not(.inactive) .box {
     background-color: var(--checkbox-active-bg-color);
     border-color: var(--checkbox-active-border-color);
 }
@@ -101,12 +105,12 @@
     border-color: var(--checkbox-checked-border-color);
 }
 
-.checked:hover:not(.disabled) .box {
+.checked:hover:not(.disabled):not(.inactive) .box {
     background-color: var(--checkbox-checked-hover-bg-color);
     border-color: var(--checkbox-checked-hover-border-color);
 }
 
-.checked:active:not(.disabled) .box {
+.checked:active:not(.disabled):not(.inactive) .box {
     background-color: var(--checkbox-checked-active-bg-color);
     border-color: var(--checkbox-checked-active-border-color);
 }
@@ -116,17 +120,18 @@
     border-color: var(--checkbox-checked-border-color);
 }
 
-.indeterminate:hover:not(.disabled) .box {
+.indeterminate:hover:not(.disabled):not(.inactive) .box {
     background-color: var(--checkbox-checked-hover-bg-color);
     border-color: var(--checkbox-checked-hover-border-color);
 }
 
-.indeterminate:active:not(.disabled) .box {
+.indeterminate:active:not(.disabled):not(.inactive) .box {
     background-color: var(--checkbox-checked-active-bg-color);
     border-color: var(--checkbox-checked-active-border-color);
 }
 
-.disabled {
+.disabled,
+.inactive {
     cursor: var(--disabled-cursor);
 }
 
@@ -153,6 +158,20 @@
     color: var(--checkbox-disabled-color);
 }
 
+.inactive .box {
+    background-color: var(--checkbox-checked-disabled-bg-color);
+    border-color: var(--checkbox-inactive-border-color);
+}
+
+.inactive.checked .box {
+    color: var(--checkbox-checked-inactive-color);
+    border-color: var(--checkbox-checked-disabled-border-color);
+}
+
+.inactive.indeterminate .box {
+    border-color: var(--checkbox-checked-disabled-border-color);
+}
+
 .focused .box {
     @mixin focus-outline;
 }
@@ -182,6 +201,10 @@
     color: var(--checkbox-hint-color);
 }
 
+.inactive .indeterminateLine {
+    background-color: var(--checkbox-checked-inactive-color);
+}
+
 .indeterminateLine {
     position: absolute;
     width: 10px;

packages/radio/src/Component.test.tsx

@@ -126,5 +126,29 @@ describe('Radio', () => {
 
             expect(cb).not.toBeCalled();
         });
+
+        test('should not call `onChange` prop if inactive', () => {
+            const cb = jest.fn();
+
+            const { container } = render(<Radio onChange={cb} inactive={true} />);
+
+            if (container.firstElementChild) {
+                fireEvent.click(container.firstElementChild);
+            }
+
+            expect(cb).not.toBeCalled();
+        });
+
+        test('should not call `onChange` prop if inactive and checked', () => {
+            const cb = jest.fn();
+
+            const { container } = render(<Radio onChange={cb} checked={true} inactive={true} />);
+
+            if (container.firstElementChild) {
+                fireEvent.click(container.firstElementChild);
+            }
+
+            expect(cb).not.toBeCalled();
+        });
     });
 });

packages/radio/src/Component.tsx

@@ -38,10 +38,15 @@ export type RadioProps = Omit<
     checked?: boolean;
 
     /**
-     * Управление состоянием активен / не активен
+     * Управление состоянием включен / выключен
      */
     disabled?: boolean;
 
+    /**
+     * Управление состоянием активен / неактивен
+     */
+    inactive?: boolean;
+
     /**
      * Html аттрибут name инпута
      */
@@ -86,6 +91,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
             className,
             name,
             disabled,
+            inactive,
             dataTestId,
             label,
             checked,
@@ -113,6 +119,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
             <label
                 className={cn(styles.container, styles[size], styles[align], className, {
                     [styles.disabled]: disabled,
+                    [styles.inactive]: inactive,
                     [styles.checked]: checked,
                     [styles.focused]: focused,
                     [styles.block]: block,
@@ -123,7 +130,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
                     type='radio'
                     onChange={handleChange}
                     data-test-id={dataTestId}
-                    disabled={disabled}
+                    disabled={disabled || inactive}
                     checked={checked}
                     name={name}
                     {...restProps}

packages/radio/src/component.screenshots.test.tsx

@@ -29,6 +29,7 @@ describe('Radio', () => {
                             hint: ['', 'Подсказка'],
                             checked: [false, true],
                             disabled: [false, true],
+                            inactive: [false, true],
                         },
                         size: { width: 240, height: 60 },
                     }),

packages/radio/src/docs/Component.stories.mdx

@@ -24,6 +24,7 @@ import styles from '!!raw-loader!../index.module.css';
         const handleChange = () => setChecked(!checked);
         const size = select('size', ['s', 'm'], 's');
         const disabled = boolean('disabled', false);
+        const inactive = boolean('inactive', false);
         const checkedKnob = boolean('checked', false);
         const block = boolean('block', false);
         const label = text('label', 'Text label')
@@ -33,6 +34,7 @@ import styles from '!!raw-loader!../index.module.css';
         return (
             <Radio
                 disabled={disabled}
+                inactive={inactive}
                 addons={addons}
                 block={block}
                 size={size}

packages/radio/src/index.module.css

@@ -25,8 +25,12 @@
     --radio-disabled-bg-color: var(--color-light-graphic-primary-inverted);
     --radio-disabled-border-color: var(--color-light-graphic-neutral);
 
+    /* inactive */
+    --radio-inactive-border-color: var(--color-light-border-secondary-inverted);
+    --radio-checked-inactive-color: var(--color-light-graphic-tertiary);
+
     /* disabled and checked */
-    --radio-checked-disabled-bg-color: var(--color-light-graphic-neutral);
+    --radio-checked-disabled-bg-color: var(--color-light-bg-neutral);
     --radio-checked-disabled-border-color: transparent;
 
     /* icon */
@@ -38,7 +42,7 @@
     align-items: flex-start;
     cursor: pointer;
 
-    &:not(.checked):not(.disabled) {
+    &:not(.checked):not(.disabled):not(.inactive) {
         & .circle {
             background-color: var(--radio-bg-color);
             border: 1.5px solid var(--radio-border-color);
@@ -72,6 +76,19 @@
         }
     }
 
+    &.inactive {
+        cursor: var(--disabled-cursor);
+
+        & .circle {
+            background-color: var(--radio-checked-disabled-bg-color);
+            border: 1px solid var(--radio-inactive-border-color);
+        }
+
+        &.checked .circle:before {
+            background-color: var(--radio-checked-inactive-color);
+        }
+    }
+
     &.checked:not(:active) .circle:before,
     &.checked.disabled:active .circle:before {
         opacity: 1;
@@ -98,7 +115,8 @@
         @mixin focus-outline;
     }
 
-    &.disabled.checked .circle {
+    &.disabled.checked .circle,
+    &.inactive.checked .circle {
         background-color: var(--radio-checked-disabled-bg-color);
         border-color: var(--radio-checked-disabled-border-color);
     }