diff --git a/package.json b/package.json index 50a3ed17..4484e8c4 100644 --- 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 index c5e423a2..abdc065c 100644 --- 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 index 426ce993..2c66f695 100644 --- 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 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]} )) diff --git a/src/components/input/checkbox/TCheckbox.tsx b/src/components/input/checkbox/TCheckbox.tsx index 8109ebb3..11f800ad 100644 --- 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) => 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) => } 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 index a9dd4575..cb5ccee7 100644 --- 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 index f1ca512c..5449653b 100644 --- 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 index 28777283..52d7c083 100644 --- 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(); + + 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( + , + ); + + 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 index 018659f8..7a3b5955 100644 --- a/tests/unit/react/tks/component/input/checkbox/TCheckbox.test.tsx +++ b/tests/unit/react/tks/component/input/checkbox/TCheckbox.test.tsx @@ -54,7 +54,7 @@ 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(Test); @@ -62,7 +62,7 @@ describe('TCheckbox', () => { const root = screen.getByTestId('t-checkbox-root'); // Assert - expect(root).toHaveClass('t-checkbox--readOnly'); + expect(root).toHaveClass('t-checkbox--read-only'); });