feature. Add readOnly props on CheckBoxGroup

Author: Siyeop

src/components/input/checkbox-group/TCheckboxGroup.interface.ts

@@ -1,6 +1,5 @@
-import {CSSProperties} from 'react';
 import {TValidatorProps} from '@/common/validator/TValidator.interface';
-import {TCheckboxValue} from '../checkbox/TCheckbox.interface';
+import {TCheckboxValue} from '@/components';
 import {TBaseProps} from '@/common/base/TBase.interface';
 
 export type TCheckboxGroupValue = TCheckboxValue[];
@@ -12,6 +11,7 @@ export interface TCheckboxGroupProps extends TBaseProps, TValidatorProps {
     value: TCheckboxGroupValue,
     items: TCheckboxGroupItem[],
     disabled?: boolean,
+    readOnly?: boolean,
 
     textKey?: string,
     valueKey?: string,

src/components/input/checkbox-group/TCheckboxGroup.tsx

@@ -28,6 +28,7 @@ const TCheckboxGroup = forwardRef((props: TCheckboxGroupProps, ref: Ref<TCheckbo
 
         if (props.className) { clazz.push(props.className); }
         if (props.disabled) { clazz.push('t-checkbox-group--disabled'); }
+        if (props.readOnly) { clazz.push('t-checkbox-group--read-only'); }
         if (!validator.result) { clazz.push('t-checkbox-group--failure'); }
         if (validator.result && validator.message) { clazz.push('t-checkbox-group--success'); }
 
@@ -105,7 +106,9 @@ const TCheckboxGroup = forwardRef((props: TCheckboxGroupProps, ref: Ref<TCheckbo
                                    negativeValue={null}
                                    value={props.value.some((v) => v === item[props.valueKey]) ? item[props.valueKey] : null}
                                    onChange={onChangeChildren}
-                                   disabled={props.disabled || item.disabled}>
+                                   disabled={props.disabled || item.disabled}
+                                   readOnly={props.readOnly || item.readOnly}
+                        >
                             {props.labelTemplate ? props.labelTemplate(item) : item[props.textKey]}
                         </TCheckbox>
                     ))

src/components/input/checkbox/TCheckbox.tsx

@@ -39,7 +39,7 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref<TCheckboxRef>) =>
         const clazz: string[] = [];
 
         if (props.className) { clazz.push(props.className); }
-        if (props.readOnly) { clazz.push('t-checkbox--readOnly'); }
+        if (props.readOnly) { clazz.push('t-checkbox--read-only'); }
         if (props.disabled) { clazz.push('t-checkbox--disabled'); }
         if (!validator.result) { clazz.push('t-checkbox--failure'); }
         if (validator.result && validator.message) { clazz.push('t-checkbox--success'); }

src/styles/component/input/checkbox-group/TCheckboxGroup.scss

@@ -13,7 +13,8 @@
         @include typo-element-3;
     }
 
-    &.t-checkbox-group--disabled {
+    &.t-checkbox-group--disabled,
+    &.t-checkbox-group--read-only {
         pointer-events: none;
     }
 

src/styles/component/input/checkbox/TCheckbox.scss

@@ -37,7 +37,7 @@
         }
     }
 
-    &.t-checkbox--readOnly .t-checkbox__container {
+    &.t-checkbox--read-only .t-checkbox__container {
         pointer-events: none;
     }
 

tests/unit/react/tks/component/input/checkbox-group/TCheckboxGroup.test.tsx

@@ -80,6 +80,25 @@ describe('TCheckboxGroup', () => {
 
         });
 
+        it('When readOnly prop is applied, root has t-checkbox-group--read-only class', () => {
+
+            // Arrange
+            const testValue = [];
+            const testItems = [
+                {text: 'Apple', koreanText: '사과', value: 'apple', value2: 'a'},
+                {text: 'Banana', koreanText: '바나나', value: 'banana', value2: 'b'},
+            ];
+
+            render(<TCheckboxGroup readOnly={true} onChange={mockFn} value={testValue} items={testItems}/>);
+
+            const root = screen.getByTestId('t-checkbox-group-root');
+
+            // Assert
+            expect(root).toHaveClass('t-checkbox-group--read-only');
+
+        });
+
+
         it('When disabled prop is applied, root will be applied -1 to tabIndex', () => {
 
             // Arrange
@@ -383,7 +402,7 @@ describe('TCheckboxGroup', () => {
 
         });
 
-        it('When  disabled attribute is applied to an item, that item should not be changed', () => {
+        it('When disabled attribute is applied to an item, that item should not be changed', () => {
 
             // Arrange
             const testValue = [];
@@ -402,6 +421,31 @@ describe('TCheckboxGroup', () => {
 
         });
 
+        it('When readOnly attribute is applied to an item, that item should not be changed', () => {
+
+            // Arrange
+            const testValue = [];
+            const testItems = [
+                {text: 'Apple', koreanText: '사과', value: 'apple', value2: 'a'},
+                {text: 'Banana', koreanText: '바나나', value: 'banana', value2: 'b'},
+                {text: 'ReadOnly', koreanText: '선택 불가 과일', value: 'readonly', value2: 'd2', readOnly: true},
+            ];
+
+            render(
+                <TCheckboxGroup onChange={mockFn}
+                                value={testValue}
+                                items={testItems}
+                />,
+            );
+
+            const checkboxButtons = screen.getAllByTestId('t-checkbox-root');
+
+            // Assert
+            expect(checkboxButtons[2]).toHaveClass('t-checkbox--read-only');
+
+        });
+
+
         it('When textKey prop is applied, the text will have the key of that item', () => {
 
             // Arrange

tests/unit/react/tks/component/input/checkbox/TCheckbox.test.tsx

@@ -54,15 +54,15 @@ describe('TCheckbox', () => {
 
         });
 
-        it('When readOnly prop is applied, root has t-checkbox--readOnly class', () => {
+        it('When readOnly prop is applied, root has t-checkbox--read-only class', () => {
 
             // Arrange
             render(<TCheckbox readOnly>Test</TCheckbox>);
 
             const root = screen.getByTestId('t-checkbox-root');
 
             // Assert
-            expect(root).toHaveClass('t-checkbox--readOnly');
+            expect(root).toHaveClass('t-checkbox--read-only');
 
         });