Merge pull request #90 from openinfradev/feature-checkbox-read-only

feature. Add readOnly Icon to Checkbox
openinfradev · Apr 17, 2024 · 0868298 · 0868298
2 parents 27e5756 + 1c781bd
commit 0868298
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "tksui-components",
-    "version": "0.6.8",
+    "version": "0.6.9",
     "private": false,
     "type": "module",
     "module": "lib/esm/index.js",

diff --git a/src/components/icon/TIconOriginal.tsx b/src/components/icon/TIconOriginal.tsx
@@ -12,9 +12,25 @@ const TOriginalImage = {
             <rect x='0.5' y='0.5' width='15' height='15' rx='3.5'/>
         </svg>
     ),
+    t_checkbox_read_only_on: (
+        <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <g>
+                <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC'/>
+                <path d='M6.58327 11.25L3.7666 8.41667L4.59993 7.58333L6.58327 9.55L11.3999 4.75L12.2333 5.6L6.58327 11.25Z' fill='#71747A'
+                      stroke='none'/>
+            </g>
+        </svg>
+    ),
+    t_checkbox_read_only_off: (
+        <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <g>
+                <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC'/>
+            </g>
+        </svg>
+    ),
     t_checkbox_disabled_on: (
         <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-            <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='currentColor' stroke='#B8BABC' />
+            <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC' />
             <path d='M6.58327 11.25L3.7666 8.41667L4.59993 7.58333L6.58327 9.55L11.3999 4.75L12.2333 5.6L6.58327 11.25Z' fill='#B8BABC'
                   stroke='none'/>
         </svg>

diff --git a/src/components/input/checkbox/TCheckbox.interface.ts b/src/components/input/checkbox/TCheckbox.interface.ts
@@ -17,6 +17,8 @@ export interface TCheckboxProps extends TValidatorProps, TBaseProps {
     negativeValue?: boolean | string
 
     disabled?: boolean,
+    readOnly?: boolean,
+
     onChange?(value: boolean | string, positiveValue?: boolean | string): void,
 
 }

diff --git a/src/components/input/checkbox/TCheckbox.tsx b/src/components/input/checkbox/TCheckbox.tsx
@@ -7,6 +7,8 @@ import themeToken from '~style/designToken/ThemeToken.module.scss';
 const checkboxIcons = {
     check: 't_checkbox_on',
     uncheck: 't_checkbox_off',
+    readOnlyCheck: 't_checkbox_read_only_on',
+    readOnlyUnCheck: 't_checkbox_read_only_off',
     disabledCheck: 't_checkbox_disabled_on',
     disabledUnCheck: 't_checkbox_disabled_off',
     indeterminate: 't_checkbox_indeterminate',
@@ -34,12 +36,13 @@ 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.disabled) { clazz.push('t-checkbox--disabled'); }
         if (!validator.result) { clazz.push('t-checkbox--failure'); }
         if (validator.result && validator.message) { clazz.push('t-checkbox--success'); }
 
         return clazz.join(' ');
-    }, [props.className, props.disabled, validator.result, validator.message]);
+    }, [props.className, props.readOnly, props.disabled, validator.result, validator.message]);
 
     const getRootStyle = useCallback(() => {
         let style: CSSProperties = {};
@@ -54,7 +57,7 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref<TCheckboxRef>) =>
         if (status === 'check' || status === 'indeterminate') { return themeToken.tPrimaryColor; }
         if (status === 'uncheck' || props.disabled) { return themeToken.tGrayColor3; }
         return '';
-    }, [status, props.disabled]);
+    }, [props.disabled, status]);
 
     // endregion
 
@@ -86,7 +89,7 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref<TCheckboxRef>) =>
         } else {
             setStatus('uncheck');
         }
-    }, [props.value, props.checked, props.indeterminate, props.positiveValue]);
+    }, [props.value, props.checked, props.indeterminate, props.positiveValue, props.readOnly]);
 
     // endregion
 
@@ -118,14 +121,18 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref<TCheckboxRef>) =>
 
         if (status === 'indeterminate') {
             iconType = checkboxIcons.indeterminate;
-        } else if (status === 'check' && !props.disabled) {
+        } else if (status === 'check' && !props.disabled && !props.readOnly) {
             iconType = checkboxIcons.check;
-        } else if (status === 'check' && props.disabled) {
+        } else if (status === 'check' && !props.disabled && props.readOnly) {
+            iconType = checkboxIcons.readOnlyCheck;
+        } else if (status === 'check' && props.disabled && !props.readOnly) {
             iconType = checkboxIcons.disabledCheck;
-        } else if (status === 'uncheck' && props.disabled) {
-            iconType = checkboxIcons.disabledUnCheck;
-        } else if (status === 'uncheck' && !props.disabled) {
+        } else if (status === 'uncheck' && props.disabled && !props.readOnly) {
             iconType = checkboxIcons.uncheck;
+        } else if (status === 'uncheck' && !props.disabled && props.readOnly) {
+            iconType = checkboxIcons.readOnlyUnCheck;
+        } else if (status === 'uncheck' && !props.disabled && !props.readOnly) {
+            iconType = checkboxIcons.disabledUnCheck;
         } else {
             throw Error('Invalid status');
         }
@@ -136,7 +143,7 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref<TCheckboxRef>) =>
                    color={iconColorByStatus}
                    fill
             >{iconType}</TIcon>);
-    }, [iconColorByStatus, props.disabled, status]);
+    }, [iconColorByStatus, props.disabled, props.readOnly, status]);
 
     // region [Effect]
 

diff --git a/src/styles/component/input/checkbox/TCheckbox.scss b/src/styles/component/input/checkbox/TCheckbox.scss
@@ -37,6 +37,10 @@
         }
     }
 
+    &.t-checkbox--readOnly .t-checkbox__container {
+        pointer-events: none;
+    }
+
     &.t-checkbox--disabled .t-checkbox__container {
         pointer-events: none;
         color: $t-font-color--read-only;

diff --git a/stories/components/input/checkbox/TCheckbox.stories.tsx b/stories/components/input/checkbox/TCheckbox.stories.tsx
@@ -45,8 +45,8 @@ const NormalTemplate = (args: TCheckboxProps) => {
     const checkbox3 = useInputState(true);
     const checkbox4 = useInputState(false);
 
-    const checkbox5 = useInputState(false);
-    const checkbox6 = useInputState(true);
+    const checkbox5 = useInputState(true);
+    const checkbox6 = useInputState(false);
 
     const [checkbox5Indeterminate, setCheckbox5Indeterminate] = useState(true);
 
@@ -72,15 +72,26 @@ const NormalTemplate = (args: TCheckboxProps) => {
             </ItemContainer>
 
             <ItemContainer label={`Disabled checked (value: ${checkbox3.value.toString()})`}>
-                <TCheckbox {...args} disabled onChange={checkbox3.onChange} value={checkbox3.value}>바나나</TCheckbox>
-                <TCheckbox {...args} disabled onChange={checkbox3.onChange} value={checkbox3.value}>Banana</TCheckbox>
+                <TCheckbox {...args} disabled onChange={checkbox3.onChange} value={checkbox3.value}>오렌지</TCheckbox>
+                <TCheckbox {...args} disabled onChange={checkbox3.onChange} value={checkbox3.value}>Orange</TCheckbox>
             </ItemContainer>
 
             <ItemContainer label={`Disabled unchecked (value: ${checkbox4.value.toString()})`}>
                 <TCheckbox {...args} disabled onChange={checkbox4.onChange} value={checkbox4.value}>오렌지</TCheckbox>
                 <TCheckbox {...args} disabled onChange={checkbox4.onChange} value={checkbox4.value}>Orange</TCheckbox>
             </ItemContainer>
 
+            <ItemContainer label={`ReadOnly checked (value: ${checkbox5.value.toString()})`}>
+                <TCheckbox {...args} readOnly onChange={checkbox5.onChange} value={checkbox5.value}>바나나</TCheckbox>
+                <TCheckbox {...args} readOnly onChange={checkbox5.onChange} value={checkbox5.value}>Banana</TCheckbox>
+            </ItemContainer>
+
+            <ItemContainer label={`ReadOnly unchecked (value: ${checkbox6.value.toString()})`}>
+                <TCheckbox {...args} readOnly onChange={checkbox6.onChange} value={checkbox6.value}>오렌지</TCheckbox>
+                <TCheckbox {...args} readOnly onChange={checkbox6.onChange} value={checkbox6.value}>Orange</TCheckbox>
+            </ItemContainer>
+
+
             <ItemContainer label={`Indeterminate(${checkbox5Indeterminate}) (value: ${checkbox5.value.toString()}) : `}>
                 <TCheckbox {...args} onChange={onChangeCheckbox5} value={checkbox5.value}
                            indeterminate={checkbox5Indeterminate}>수박</TCheckbox>

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,6 +54,18 @@ describe('TCheckbox', () => {
 
         });
 
+        it('When readOnly prop is applied, root has t-checkbox--readOnly class', () => {
+
+            // Arrange
+            render(<TCheckbox readOnly>Test</TCheckbox>);
+
+            const root = screen.getByTestId('t-checkbox-root');
+
+            // Assert
+            expect(root).toHaveClass('t-checkbox--readOnly');
+
+        });
+
         it('When disabled prop is applied, root has t-checkbox--disabled class', () => {
 
             // Arrange