Merge pull request #97 from openinfradev/feature-checkbox

Feature. Modify Checkbox Style
openinfradev · Apr 26, 2024 · 5bc4431 · 5bc4431
2 parents 42bd322 + 9527046
commit 5bc4431
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "tksui-components",
-    "version": "0.6.14",
+    "version": "0.6.15",
     "private": false,
     "type": "module",
     "module": "lib/esm/index.js",

diff --git a/src/components/input/checkbox-group/TCheckboxGroup.interface.ts b/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,

diff --git a/src/components/input/checkbox-group/TCheckboxGroup.tsx b/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>
                     ))

diff --git a/src/components/input/checkbox/TCheckbox.tsx b/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'); }
@@ -131,11 +131,11 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref<TCheckboxRef>) =>
         } else if (status === 'check' && props.disabled && !props.readOnly) {
             iconType = checkboxIcons.disabledCheck;
         } else if (status === 'uncheck' && props.disabled && !props.readOnly) {
-            iconType = checkboxIcons.uncheck;
+            iconType = checkboxIcons.disabledUnCheck;
         } else if (status === 'uncheck' && !props.disabled && props.readOnly) {
             iconType = checkboxIcons.readOnlyUnCheck;
         } else if (status === 'uncheck' && !props.disabled && !props.readOnly) {
-            iconType = checkboxIcons.disabledUnCheck;
+            iconType = checkboxIcons.uncheck;
         } else {
             throw Error('Invalid status');
         }

diff --git a/src/styles/component/input/checkbox-group/TCheckboxGroup.scss b/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;
     }
 

diff --git a/src/styles/component/input/checkbox/TCheckbox.scss b/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;
     }
 

diff --git a/tests/unit/react/tks/component/input/checkbox-group/TCheckboxGroup.test.tsx b/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

diff --git a/tests/unit/react/tks/component/input/checkbox/TCheckbox.test.tsx b/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');
 
         });
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ @@
             }
         }
-        &.t-checkbox--readOnly .t-checkbox__container {
+        &.t-checkbox--read-only .t-checkbox__container {
             pointer-events: none;
         }
@@ Expand Down @@