pds-dev-kit-web 2.2.161 → 2.2.162

package/dist/src/common/styles/colorSet/UIColor.json

@@ -308,7 +308,7 @@
     "ui_cpnt_card_icon_background_03": "sys_widget_success_01",
     "ui_cpnt_bannerslide_gradient_1": "sys_component_base_05",
     "ui_cpnt_bannerslide_gradient_2": "sys_component_base_05_opacity00",
-    "ui_cpnt_videoplayer_gradient_1": "sys_component_base_black_opacity50",
+    "ui_cpnt_modal_gradient_1": "sys_component_base_black_opacity00",
     "ui_cpnt_modal_gradient_2": "sys_component_base_black",
     "ui_cpnt_list_icon_04": "sys_widget_white",
     "ui_cpnt_list_thumbnail_border": "sys_border_line_01",
@@ -316,6 +316,7 @@
     "ui_cpnt_list_thumbnail_gradient_2": "sys_component_base_black_opacity00",
     "ui_cpnt_list_base_area_active": "sys_component_base_01",
     "ui_cpnt_contextmenu_base": "sys_component_base_02",
+    "ui_cpnt_videoplayer_gradient_1": "sys_component_base_black_opacity50",
     "ui_cpnt_videoplayer_gradient_2": "sys_component_base_black_opacity00",
     "ui_cpnt_videoplayer_overlay": "sys_component_base_black_opacity50",
     "ui_globalmenucontainer_background": "sys_container_background_01",
@@ -888,10 +889,13 @@
     "ui_135": "sys_widget_grey_01",
     "ui_136": "sys_component_base_18",
     "ui_137": "sys_component_base_50",
-    "ui_cpnt_modal_gradient_1": "sys_component_base_black_opacity00",
     "ui_138": "sys_cpnt_sheet_base_12",
     "ui_139": "sys_dimmed_01",
     "ui_cpnt_sheet_base_29": "sys_cpnt_sheet_base_51",
     "ui_cpnt_sheet_base_30": "sys_cpnt_sheet_base_52",
-    "ui_cpnt_sheet_base_31": "sys_cpnt_sheet_base_53"
+    "ui_cpnt_sheet_base_31": "sys_cpnt_sheet_base_53",
+    "ui_cpnt_selcontrols_icon_white": "sys_widget_white",
+    "ui_cpnt_selcontrols_text_white": "sys_text_white",
+    "ui_cpnt_selcontrols_icon_grey_01": "sys_widget_grey_01",
+    "ui_cpnt_selcontrols_text_grey_01": "sys_text_grey_01"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -123,7 +123,7 @@ declare const colorSet: {
         grey450: string;
         darkgrey450: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -500,7 +500,7 @@ declare const colorSet: {
         sys_cpnt_sheet_base_52: string;
         sys_cpnt_sheet_base_53: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -1187,7 +1187,7 @@ declare const colorSet: {
         ui_cpnt_card_icon_background_03: string;
         ui_cpnt_bannerslide_gradient_1: string;
         ui_cpnt_bannerslide_gradient_2: string;
-        ui_cpnt_videoplayer_gradient_1: string;
+        ui_cpnt_modal_gradient_1: string;
         ui_cpnt_modal_gradient_2: string;
         ui_cpnt_list_icon_04: string;
         ui_cpnt_list_thumbnail_border: string;
@@ -1195,6 +1195,7 @@ declare const colorSet: {
         ui_cpnt_list_thumbnail_gradient_2: string;
         ui_cpnt_list_base_area_active: string;
         ui_cpnt_contextmenu_base: string;
+        ui_cpnt_videoplayer_gradient_1: string;
         ui_cpnt_videoplayer_gradient_2: string;
         ui_cpnt_videoplayer_overlay: string;
         ui_globalmenucontainer_background: string;
@@ -1767,12 +1768,15 @@ declare const colorSet: {
         ui_135: string;
         ui_136: string;
         ui_137: string;
-        ui_cpnt_modal_gradient_1: string;
         ui_138: string;
         ui_139: string;
         ui_cpnt_sheet_base_29: string;
         ui_cpnt_sheet_base_30: string;
         ui_cpnt_sheet_base_31: string;
+        ui_cpnt_selcontrols_icon_white: string;
+        ui_cpnt_selcontrols_text_white: string;
+        ui_cpnt_selcontrols_icon_grey_01: string;
+        ui_cpnt_selcontrols_text_grey_01: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -308,7 +308,7 @@ export interface UITheme {
     ui_cpnt_card_icon_background_03: string;
     ui_cpnt_bannerslide_gradient_1: string;
     ui_cpnt_bannerslide_gradient_2: string;
-    ui_cpnt_videoplayer_gradient_1: string;
+    ui_cpnt_modal_gradient_1: string;
     ui_cpnt_modal_gradient_2: string;
     ui_cpnt_list_icon_04: string;
     ui_cpnt_list_thumbnail_border: string;
@@ -316,6 +316,7 @@ export interface UITheme {
     ui_cpnt_list_thumbnail_gradient_2: string;
     ui_cpnt_list_base_area_active: string;
     ui_cpnt_contextmenu_base: string;
+    ui_cpnt_videoplayer_gradient_1: string;
     ui_cpnt_videoplayer_gradient_2: string;
     ui_cpnt_videoplayer_overlay: string;
     ui_globalmenucontainer_background: string;
@@ -888,10 +889,13 @@ export interface UITheme {
     ui_135: string;
     ui_136: string;
     ui_137: string;
-    ui_cpnt_modal_gradient_1: string;
     ui_138: string;
     ui_139: string;
     ui_cpnt_sheet_base_29: string;
     ui_cpnt_sheet_base_30: string;
     ui_cpnt_sheet_base_31: string;
+    ui_cpnt_selcontrols_icon_white: string;
+    ui_cpnt_selcontrols_text_white: string;
+    ui_cpnt_selcontrols_icon_grey_01: string;
+    ui_cpnt_selcontrols_text_grey_01: string;
 }

package/dist/src/desktop/components/Checkbox/Checkbox.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
 import type { IFormValues, PDSTextType } from '../../../common';
+type ColorTheme = 'none' | 'white' | 'grey1';
 type CheckboxProps = {
     text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
     name: Path<IFormValues>;
+    colorTheme?: ColorTheme;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ text, fontWeight, state, name, onChange }: CheckboxProps): JSX.Element;
+declare function Checkbox({ text, fontWeight, state, name, colorTheme, onChange }: CheckboxProps): JSX.Element;
 export default Checkbox;

package/dist/src/desktop/components/Checkbox/Checkbox.js

@@ -24,7 +24,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Checkbox(_a) {
-    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onChange = _a.onChange;
+    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onChange = _a.onChange;
     var register = (0, react_hook_form_1.useFormContext)().register;
     var checkboxFormRegister = register(name);
     var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
@@ -34,10 +34,24 @@ function Checkbox(_a) {
             onChange(e);
         }
     };
+    var colorThemeSet = {
+        none: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_default',
+            textColorKey: 'ui_cpnt_selcontrols_text_default'
+        },
+        white: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_white',
+            textColorKey: 'ui_cpnt_selcontrols_text_white'
+        },
+        grey1: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_grey_01',
+            textColorKey: 'ui_cpnt_selcontrols_text_grey_01'
+        }
+    };
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: colorThemeSet[colorTheme].iconColorkey }));
             }
             case 'disabled': {
                 return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }) }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
@@ -45,7 +59,7 @@ function Checkbox(_a) {
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name, isDisabled: state === 'disabled' }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
-                            ? 'ui_cpnt_selcontrols_text_default'
+                            ? colorThemeSet[colorTheme].textColorKey
                             : 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }))] })) })));
 }
 var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));

package/dist/src/mobile/components/Checkbox/Checkbox.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
 import type { IFormValues, PDSTextType } from '../../../common';
+type ColorTheme = 'none' | 'white' | 'grey1';
 type CheckboxProps = {
     text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
     name: Path<IFormValues>;
+    colorTheme?: ColorTheme;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ text, fontWeight, state, name, onChange }: CheckboxProps): JSX.Element;
+declare function Checkbox({ text, fontWeight, state, name, colorTheme, onChange }: CheckboxProps): JSX.Element;
 export default Checkbox;

package/dist/src/mobile/components/Checkbox/Checkbox.js

@@ -24,7 +24,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Checkbox(_a) {
-    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onChange = _a.onChange;
+    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onChange = _a.onChange;
     var register = (0, react_hook_form_1.useFormContext)().register;
     var checkboxFormRegister = register(name);
     var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
@@ -34,10 +34,24 @@ function Checkbox(_a) {
             onChange(e);
         }
     };
+    var colorThemeSet = {
+        none: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_default',
+            textColorKey: 'ui_cpnt_selcontrols_text_default'
+        },
+        white: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_white',
+            textColorKey: 'ui_cpnt_selcontrols_text_white'
+        },
+        grey1: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_grey_01',
+            textColorKey: 'ui_cpnt_selcontrols_text_grey_01'
+        }
+    };
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: colorThemeSet[colorTheme].iconColorkey }));
             }
             case 'disabled': {
                 return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
@@ -45,7 +59,7 @@ function Checkbox(_a) {
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
-                            ? 'ui_cpnt_selcontrols_text_default'
+                            ? colorThemeSet[colorTheme].textColorKey
                             : 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }))] })) })));
 }
 var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.161",
+  "version": "2.2.162",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.161]
+## [v2.2.162]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1297] 모바일 DatePicker 버튼 비활성화 조건 추가
+* [PDS-1296]Checkbox 컴포넌트에 colorTheme prop 추가 건