feature. Add TButtonGroup variant

src/components/button/button-group/TButtonGroup.interface.ts

@@ -8,6 +8,14 @@ export interface TButtonGroupItem {
     value: TButtonGroupValue,
 }
 
+export const ButtonGroupVariant = {
+    primary: 'primary',
+    main: 'main',
+} as const;
+
+export type ButtonGroupVariantType = typeof ButtonGroupVariant[keyof typeof ButtonGroupVariant];
+
+
 export interface TButtonGroupProps extends TBaseProps {
     value: TButtonGroupValue,
     items: TButtonGroupItem[],
@@ -16,4 +24,8 @@ export interface TButtonGroupProps extends TBaseProps {
     multiSelect?: boolean,
 
     disabled?: boolean,
+
+    variant?: ButtonGroupVariantType,
+    primary?: boolean,
+    main?: boolean,
 }

src/components/button/button-group/TButtonGroup.tsx

@@ -1,6 +1,6 @@
 import {CSSProperties, useCallback, useMemo} from 'react';
 import TButton from '../button/TButton';
-import {TButtonGroupProps, TButtonGroupValue} from './TButtonGroup.interface';
+import {TButtonGroupProps, TButtonGroupValue} from '@/components';
 
 
 const TButtonGroup = (props: TButtonGroupProps) => {
@@ -10,17 +10,25 @@ const TButtonGroup = (props: TButtonGroupProps) => {
     const rootClass = useMemo((): string => {
         const clazz: string[] = [];
 
+        if (props.variant && (props.primary || props.main)) {
+            throw Error('Error: variant prop cannot have both primary and main simultaneously.');
+        }
+
         if (props.className) { clazz.push(props.className); }
+        if (props.variant) { clazz.push(`t-button-group--${props.variant}`); }
+        if (props.primary) { clazz.push('t-button-group--primary'); }
+        if (props.main) { clazz.push('t-button-group--main'); }
+
         if (props.multiSelect) { clazz.push('t-button-group--multi-select'); }
         if (props.disabled) { clazz.push('t-button-group--disabled'); }
 
         return clazz.join(' ');
-    }, [props.className, props.disabled, props.multiSelect]);
+    }, [props.className, props.disabled, props.multiSelect, props.variant, props.primary, props.main]);
 
     const rootStyle = useMemo((): CSSProperties => {
         let style: CSSProperties = {};
 
-        if (props.style) style = {...props.style};
+        if (props.style) { style = {...props.style}; }
 
         return style;
     }, [props.style]);

src/components/data-container/data-grid/TDataGrid.tsx

@@ -2,7 +2,7 @@ import {DomLayoutType} from 'ag-grid-community/dist/lib/entities/gridOptions';
 import {CSSProperties, forwardRef, Ref, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {AgGridReact} from 'ag-grid-react';
 import {SelectionChangedEvent} from 'ag-grid-community';
-import {TDataGridProps} from './TDataGrid.interface';
+import {TDataGridProps} from '@/components';
 import TButton from '../../button/button/TButton';
 import TPagination from '../pagination/TPagination';
 import TActionBar from '~/data-container/action-bar/TActionBar';
@@ -47,7 +47,7 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
 
         let style: CSSProperties = {};
 
-        if (props.style) style = {...props.style};
+        if (props.style) { style = {...props.style}; }
 
         return style;
     }, [props.style]);

src/components/data-container/pagination/TPagination.tsx

@@ -1,6 +1,6 @@
 import {CSSProperties, forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 
-import {TPaginationProps, TPaginationRef} from './TPagination.interface';
+import {TPaginationProps, TPaginationRef} from '@/components';
 import TIcon from '../../icon/TIcon';
 import TButton from '~/button/button/TButton';
 import TNumberField from '~/input/number-field/TNumberField';
@@ -115,12 +115,12 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
 
     const onChangeJumperPageNumber = useCallback((pageNumber: string) => {
         setJumperPage(Number(pageNumber));
-    }, [pageRange]);
+    }, []);
 
     const onClickJumperButton = useCallback(() => {
         const validResult = numberFieldRef.current?.validate();
         if (validResult === true && onChangePageNumber) { onChangePageNumber(jumperPage); }
-    }, [jumperPage, pageRange, onChangePageNumber]);
+    }, [jumperPage, onChangePageNumber]);
 
     // endregion
 

src/styles/component/button/button-group/TButtonGroup.scss

@@ -24,6 +24,26 @@
         z-index: 1;
     }
 
+    &.t-button-group--primary {
+
+        .t-button-group__button {
+            &.t-button-group__button--active {
+                border-color: $t-primary-color;
+            }
+        }
+    }
+
+    &.t-button-group--main {
+
+        .t-button-group__button {
+            &.t-button-group__button--active {
+                color: $t-white-color;
+                background: $t-primary-color;
+                border-color: $t-primary-color;
+            }
+        }
+    }
+
     &.t-button-group--disabled .t-button-group__button.t-button--disabled {
         border: 1px solid $t-gray-color-2;
     }

stories/components/button/button-group/TButtonGroup.stories.tsx

@@ -35,6 +35,14 @@ const Template = (args) => {
                 <TButtonGroup {...args} value={searchParam} onChange={onChangeSearchParam}/>
             </Container>
 
+            <Container label={`Primary(value: ${args.multiSelect ? (searchParam as string[]).join(', ') : searchParam})`}>
+                <TButtonGroup {...args} primary value={searchParam} onChange={onChangeSearchParam}/>
+            </Container>
+
+            <Container label={`Main(value: ${args.multiSelect ? (searchParam as string[]).join(', ') : searchParam})`}>
+                <TButtonGroup {...args} main value={searchParam} onChange={onChangeSearchParam}/>
+            </Container>
+
             <Container label={'Disabled'}>
                 <TButtonGroup {...args} disabled value={searchParam} onChange={onChangeSearchParam}/>
             </Container>

tests/unit/react/tks/component/button/button-group/TButtonGroup.test.tsx

@@ -4,10 +4,14 @@ import userEvent from '@testing-library/user-event';
 import TButtonGroup from '~/button/button-group/TButtonGroup';
 import useInputState from '@/common/hook/UseInputState';
 import {
+    ButtonGroupVariant,
+    ButtonGroupVariantType,
     TButtonGroupItem,
     TButtonGroupValue,
 } from '~/button/button-group/TButtonGroup.interface';
 
+const variantList = Object.values(ButtonGroupVariant);
+
 jest.mock('@/common/util/ColorUtil', () => ({
     shadeColor: jest.fn(() => 'blue'),
 }));
@@ -20,6 +24,11 @@ describe('TButtonGroup', () => {
 
         value?: TButtonGroupValue,
         items?: TButtonGroupItem[],
+        variant?: ButtonGroupVariantType,
+
+        primary?: boolean,
+        main?: boolean,
+
         onChange?(value: TButtonGroupValue): void,
 
         multiSelect?: boolean,
@@ -151,5 +160,36 @@ describe('TButtonGroup', () => {
 
     });
 
+    it.each(variantList)('Variant prop applies to the root. %s', (variant) => {
+
+        // Arrange
+        render(<ButtonGroup initialValue={[]} variant={variant} multiSelect={true}/>);
+        const root = screen.getByTestId('button-group-root');
+
+        // Assert
+        expect(root).toHaveClass(`t-button-group--${variant}`);
+    });
+
+    it('primary prop applies to the root.', () => {
+
+        // Arrange
+        const testVariant = 'primary';
+        render(<ButtonGroup initialValue={[]} variant={testVariant} multiSelect={true}/>);
+        const root = screen.getByTestId('button-group-root');
+
+        // Assert
+        expect(root).toHaveClass(`t-button-group--${testVariant}`);
+    });
+
+    it('main prop applies to the root.', () => {
+
+        // Arrange
+        const testVariant = 'main';
+        render(<ButtonGroup initialValue={[]} variant={testVariant} multiSelect={true}/>);
+        const root = screen.getByTestId('button-group-root');
+
+        // Assert
+        expect(root).toHaveClass(`t-button-group--${testVariant}`);
+    });
 
 });