feat: checkbox/radio/switch design updates (PDS-252) (#735)

* feat: design updates

* chore: add checked to controls stories

* chore: update screenshots

* chore: add size to radio\check groups

* fix: change disabled color

packages/checkbox-group/src/Component.test.tsx

@@ -128,6 +128,24 @@ describe('Checkbox', () => {
             expect(getByText(errorText)).toBeInTheDocument();
         });
 
+        it('should contain hint message', () => {
+            const hint = 'hint';
+
+            const { queryByText } = render(<Group hint={hint} />);
+
+            expect(queryByText(hint)).toBeInTheDocument();
+        });
+
+        it('should error instread hint', () => {
+            const errorText = 'I am error';
+            const hint = 'hint';
+
+            const { queryByText } = render(<Group error={errorText} hint={hint} />);
+
+            expect(queryByText(errorText)).toBeInTheDocument();
+            expect(queryByText(hint)).not.toBeInTheDocument();
+        });
+
         it('should disable all checkboxes if `disabled` prop is present', () => {
             const { container } = render(<Group disabled={true} />);
 

packages/checkbox-group/src/Component.tsx

@@ -37,9 +37,14 @@ export type CheckboxGroupProps = {
     className?: string;
 
     /**
-     * Текст ошибки
+     * Отображение ошибки
      */
-    error?: string;
+    error?: string | boolean;
+
+    /**
+     * Текст подсказки снизу
+     */
+    hint?: ReactNode;
 
     /**
      * Дочерние элементы. Ожидаются компоненты `Checkbox` или `Tag`
@@ -74,6 +79,7 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = ({
     direction = 'vertical',
     label,
     error,
+    hint,
     onChange,
     type = 'checkbox',
     dataTestId,
@@ -123,6 +129,8 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = ({
         );
     };
 
+    const errorMessage = typeof error === 'string' ? error : '';
+
     return (
         <div
             className={cn(
@@ -148,7 +156,11 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = ({
                 </div>
             ) : null}
 
-            {error && <span className={styles.errorMessage}>{error}</span>}
+            {errorMessage && (
+                <span className={cn(styles.sub, styles.errorMessage)}>{errorMessage}</span>
+            )}
+
+            {hint && !errorMessage && <span className={cn(styles.sub, styles.hint)}>{hint}</span>}
         </div>
     );
 };

packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap

@@ -77,6 +77,7 @@ Object {
             </span>
           </label>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -153,6 +154,7 @@ Object {
           </span>
         </label>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],
@@ -287,7 +289,7 @@ Object {
           </label>
         </div>
         <span
-          class="errorMessage"
+          class="sub errorMessage"
         >
           Error
         </span>
@@ -368,7 +370,7 @@ Object {
         </label>
       </div>
       <span
-        class="errorMessage"
+        class="sub errorMessage"
       >
         Error
       </span>
@@ -465,6 +467,7 @@ Object {
             </span>
           </label>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -501,6 +504,7 @@ Object {
           </span>
         </label>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],
@@ -625,6 +629,7 @@ Object {
             />
           </label>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -692,6 +697,7 @@ Object {
           />
         </label>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],
@@ -764,6 +770,7 @@ Object {
         <div
           class="checkboxList"
         />
+        
       </div>
     </div>
   </body>,
@@ -779,6 +786,7 @@ Object {
       <div
         class="checkboxList"
       />
+      
     </div>
   </div>,
   "debug": [Function],

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

@@ -7,19 +7,36 @@ const screenshotTesting = setupScreenshotTesting({
     expect,
 });
 
-const clip = { x: 0, y: 0, width: 600, height: 250 };
+const clip = { x: 0, y: 0, width: 600, height: 200 };
 
 describe(
-    'CheckboxGroup',
+    'CheckboxGroup | main props',
     screenshotTesting({
         cases: generateTestCases({
             componentName: 'CheckboxGroup',
+            testStory: false,
             knobs: {
                 direction: ['horizontal', 'vertical'],
-                error: ['', 'Error'],
-                disabled: [true, false],
+                label: ['', 'Заголовок'],
+                error: ['', 'Ошибка'],
+                hint: ['', 'Подсказка'],
             },
+        }),
+        screenshotOpts: {
+            clip,
+        },
+    }),
+);
+
+describe(
+    'CheckboxGroup | disabled',
+    screenshotTesting({
+        cases: generateTestCases({
+            componentName: 'CheckboxGroup',
             testStory: false,
+            knobs: {
+                disabled: true,
+            },
         }),
         screenshotOpts: {
             clip,

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

@@ -27,17 +27,20 @@ import Description from './description.mdx';
         const error = text('error', '');
         const disabled = boolean('disabled', false);
         const label = text('label', 'Заголовок группы');
+        const hint = text('hint', '');
+        const size = select('Checkbox.size', ['s', 'm'], 's');
         return (
             <CheckboxGroup
                 label={label}
+                hint={hint}
                 onChange={onChange}
                 direction={direction}
                 error={error}
                 disabled={disabled}
             >
-                <Checkbox label='Первый вариант' name='one' checked={value.one} />
-                <Checkbox label='Второй вариант' name='two' checked={value.two} />
-                <Checkbox label='Третий вариант' name='three' checked={value.three} />
+                <Checkbox size={size} label='Первый вариант' name='one' checked={value.one} />
+                <Checkbox size={size} label='Второй вариант' name='two' checked={value.two} />
+                <Checkbox size={size} label='Третий вариант' name='three' checked={value.three} />
             </CheckboxGroup>
         );
     })}

packages/checkbox-group/src/index.module.css

@@ -1,12 +1,18 @@
 @import '../../themes/src/default.css';
 
+:root {
+    --checkbox-group-error-color: var(--color-light-text-negative);
+    --checkbox-group-hint-color: var(--color-light-text-secondary);
+    --checkbox-group-label-color: var(--color-light-text-primary);
+}
+
 .component {
     display: flex;
     flex-direction: column;
 }
 
 .error {
-    padding-left: var(--gap-m);
+    padding-left: var(--gap-xs);
     border-left: 1px solid var(--color-light-text-negative);
 }
 
@@ -47,15 +53,22 @@
 }
 
 .label {
+    @mixin system_16-24_regular;
+    margin-bottom: var(--gap-s);
+    color: var(--checkbox-group-label-color);
+}
+
+.sub {
     @mixin system_14-18_regular;
-    margin-bottom: var(--gap-m);
-    color: var(--color-light-text-secondary);
+    margin-top: var(--gap-s);
 }
 
 .errorMessage {
-    @mixin system_14-18_regular;
-    margin-top: var(--gap-m);
-    color: var(--color-light-text-negative);
+    color: var(--checkbox-group-error-color);
+}
+
+.hint {
+    color: var(--checkbox-group-hint-color);
 }
 
 .hiddenInput {