feat(checkbox): size m

core-ds · Dec 8, 2020 · 9fdbf2b · 9fdbf2b
1 parent 51d6188
commit 9fdbf2b
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 21 deletions.
diff --git a/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap b/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap
@@ -17,7 +17,7 @@ Object {
           class="checkboxList"
         >
           <label
-            class="component my-checkbox checkbox"
+            class="component s my-checkbox checkbox"
           >
             <span
               class="box"
@@ -37,7 +37,7 @@ Object {
             </span>
           </label>
           <label
-            class="component checkbox"
+            class="component s checkbox"
           >
             <span
               class="box"
@@ -57,7 +57,7 @@ Object {
             </span>
           </label>
           <label
-            class="component checkbox"
+            class="component s checkbox"
           >
             <span
               class="box"
@@ -93,7 +93,7 @@ Object {
         class="checkboxList"
       >
         <label
-          class="component my-checkbox checkbox"
+          class="component s my-checkbox checkbox"
         >
           <span
             class="box"
@@ -113,7 +113,7 @@ Object {
           </span>
         </label>
         <label
-          class="component checkbox"
+          class="component s checkbox"
         >
           <span
             class="box"
@@ -133,7 +133,7 @@ Object {
           </span>
         </label>
         <label
-          class="component checkbox"
+          class="component s checkbox"
         >
           <span
             class="box"
@@ -226,7 +226,7 @@ Object {
           class="checkboxList"
         >
           <label
-            class="component my-checkbox checkbox"
+            class="component s my-checkbox checkbox"
           >
             <span
               class="box"
@@ -246,7 +246,7 @@ Object {
             </span>
           </label>
           <label
-            class="component checkbox"
+            class="component s checkbox"
           >
             <span
               class="box"
@@ -266,7 +266,7 @@ Object {
             </span>
           </label>
           <label
-            class="component checkbox"
+            class="component s checkbox"
           >
             <span
               class="box"
@@ -307,7 +307,7 @@ Object {
         class="checkboxList"
       >
         <label
-          class="component my-checkbox checkbox"
+          class="component s my-checkbox checkbox"
         >
           <span
             class="box"
@@ -327,7 +327,7 @@ Object {
           </span>
         </label>
         <label
-          class="component checkbox"
+          class="component s checkbox"
         >
           <span
             class="box"
@@ -347,7 +347,7 @@ Object {
           </span>
         </label>
         <label
-          class="component checkbox"
+          class="component s checkbox"
         >
           <span
             class="box"
@@ -445,7 +445,7 @@ Object {
           class="checkboxList"
         >
           <label
-            class="component my-checkbox checkbox"
+            class="component s my-checkbox checkbox"
           >
             <span
               class="box"
@@ -481,7 +481,7 @@ Object {
         class="checkboxList"
       >
         <label
-          class="component my-checkbox checkbox"
+          class="component s my-checkbox checkbox"
         >
           <span
             class="box"

diff --git a/packages/checkbox/src/Component.stories.mdx b/packages/checkbox/src/Component.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
-import { text, boolean } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
 import { ComponentHeader } from 'storybook/blocks/component-header';
 
 import { Checkbox } from './Component';
@@ -19,13 +19,15 @@ import { name, version } from '../package.json';
     {React.createElement(() => {
         const [checked, setChecked] = React.useState(false);
         const handleChange = () => setChecked(!checked);
+        const size = select('size', ['s', 'm'], 's');
         const disabled = boolean('disabled', false);
         const label = text('label', 'Согласен с условиями');
         const indeterminate = boolean('indeterminate', false);
         const hint = text('hint', 'Дополнительная информация');
         return (
             <Checkbox
                 disabled={disabled}
+                size={size}
                 onChange={handleChange}
                 checked={checked}
                 label={label}

diff --git a/packages/checkbox/src/Component.test.tsx b/packages/checkbox/src/Component.test.tsx
@@ -41,6 +41,18 @@ describe('Checkbox', () => {
 
             expect(container.firstElementChild).toHaveClass('indeterminate');
         });
+
+        it('should set size `s` as default size', () => {
+            const { container } = render(<Checkbox />);
+
+            expect(container.firstElementChild).toHaveClass('s');
+        });
+
+        it('should set size', () => {
+            const { container } = render(<Checkbox size='m' />);
+
+            expect(container.firstElementChild).toHaveClass('m');
+        });
     });
 
     describe('Attributes tests', () => {

diff --git a/packages/checkbox/src/Component.tsx b/packages/checkbox/src/Component.tsx
@@ -10,7 +10,7 @@ import styles from './index.module.css';
 
 type NativeProps = InputHTMLAttributes<HTMLInputElement>;
 
-export type CheckboxProps = Omit<NativeProps, 'onChange'> & {
+export type CheckboxProps = Omit<NativeProps, 'size' | 'onChange'> & {
     /**
      * Управление состоянием вкл/выкл чекбокса (native prop)
      */
@@ -37,6 +37,11 @@ export type CheckboxProps = Omit<NativeProps, 'onChange'> & {
      */
     hint?: ReactNode;
 
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm';
+
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -54,6 +59,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
             checked,
             label,
             hint,
+            size = 's',
             onChange,
             className,
             name,
@@ -77,7 +83,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
         return (
             // eslint-disable-next-line jsx-a11y/label-has-associated-control
             <label
-                className={cn(styles.component, className, {
+                className={cn(styles.component, styles[size], className, {
                     [styles.disabled]: disabled,
                     [styles.checked]: checked,
                     [styles.indeterminate]: indeterminate,

diff --git a/packages/checkbox/src/__snapshots__/Component.test.tsx.snap b/packages/checkbox/src/__snapshots__/Component.test.tsx.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <label
-        class="component"
+        class="component s"
       >
         <span
           class="box"
@@ -34,7 +34,7 @@ Object {
   </body>,
   "container": <div>
     <label
-      class="component"
+      class="component s"
     >
       <span
         class="box"
@@ -119,7 +119,7 @@ Object {
   "baseElement": <body>
     <div>
       <label
-        class="component indeterminate"
+        class="component s indeterminate"
       >
         <span
           class="box"
@@ -157,7 +157,7 @@ Object {
   </body>,
   "container": <div>
     <label
-      class="component indeterminate"
+      class="component s indeterminate"
     >
       <span
         class="box"

diff --git a/packages/checkbox/src/index.module.css b/packages/checkbox/src/index.module.css
@@ -52,6 +52,13 @@
     overflow: hidden;
 }
 
+.m .box {
+    width: 20px;
+    height: 20px;
+    margin-right: var(--gap-m);
+    margin-top: 2px;
+}
+
 .component:hover:not(.disabled) .box {
     background-color: var(--checkbox-hover-bg-color);
     border-color: var(--checkbox-hover-border-color);