pds-dev-kit-web 1.5.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,12 +1,14 @@
1
1
  /// <reference types="react" />
2
- import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common';
2
+ import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
3
3
  declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
4
4
  export declare type ChipProps = {
5
5
  displayType?: DisplayType;
6
+ text?: PDSTextType;
6
7
  filterIconMode?: 'none' | 'left';
7
8
  iconFillType?: 'line' | 'fill';
8
9
  iconName?: FillIconNameKeys | LineIconNameKeys;
9
- text?: PDSTextType;
10
+ overrideTextColorKey?: UiColors;
11
+ overrideBackgroundColorKey?: UiColors;
10
12
  value?: PDSValueOption['value'];
11
13
  id?: PDSValueOption['value'];
12
14
  onClickChip?: () => void;
@@ -16,5 +18,5 @@ export declare type ChipProps = {
16
18
  /** @deprecated id 필드를 대신 사용하세요. */
17
19
  chipId?: string | number;
18
20
  };
19
- export default function Chip({ displayType, filterIconMode, iconFillType, iconName, text, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
21
+ export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
20
22
  export {};
@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
32
32
  var Icon_1 = require("../../../hybrid/components/Icon");
33
33
  var TextLabel_1 = require("../TextLabel");
34
34
  function Chip(_a) {
35
- var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, text = _a.text, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
35
+ var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
36
36
  var isActive = (0, react_1.useMemo)(function () {
37
37
  if (activeChipId !== undefined && chipId !== undefined) {
38
38
  return activeChipId === chipId;
@@ -65,8 +65,8 @@ function Chip(_a) {
65
65
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
66
66
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
67
67
  case 'information':
68
- return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
69
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
68
+ return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey },
69
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
70
70
  case 'label':
71
71
  return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
72
72
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
@@ -105,8 +105,10 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
105
105
  return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
106
106
  });
107
107
  var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
108
- var theme = _a.theme;
109
- return theme.ui_cpnt_chip_fill_base_inactive;
108
+ var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
109
+ return overrideBackgroundColorKey
110
+ ? theme[overrideBackgroundColorKey]
111
+ : theme.ui_cpnt_chip_fill_base_inactive;
110
112
  }, function (_a) {
111
113
  var theme = _a.theme;
112
114
  return theme.spacing.spacingC;
@@ -1,12 +1,14 @@
1
1
  /// <reference types="react" />
2
- import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common';
2
+ import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
3
3
  declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
4
4
  export declare type ChipProps = {
5
5
  displayType?: DisplayType;
6
+ text?: PDSTextType;
6
7
  filterIconMode?: 'none' | 'left';
7
8
  iconFillType?: 'line' | 'fill';
8
9
  iconName?: FillIconNameKeys | LineIconNameKeys;
9
- text?: PDSTextType;
10
+ overrideTextColorKey?: UiColors;
11
+ overrideBackgroundColorKey?: UiColors;
10
12
  value?: PDSValueOption['value'];
11
13
  id?: PDSValueOption['value'];
12
14
  onClickChip?: () => void;
@@ -16,5 +18,5 @@ export declare type ChipProps = {
16
18
  /** @deprecated id 필드를 대신 사용하세요. */
17
19
  chipId?: string | number;
18
20
  };
19
- export default function Chip({ displayType, filterIconMode, iconFillType, iconName, text, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
21
+ export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
20
22
  export {};
@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
32
32
  var Icon_1 = require("../../../hybrid/components/Icon");
33
33
  var TextLabel_1 = require("../TextLabel");
34
34
  function Chip(_a) {
35
- var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, text = _a.text, value = _a.value, id = _a.id, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
35
+ var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
36
36
  var isActive = (0, react_1.useMemo)(function () {
37
37
  if (activeChipId !== undefined && chipId !== undefined) {
38
38
  return activeChipId === chipId;
@@ -65,8 +65,8 @@ function Chip(_a) {
65
65
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
66
66
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
67
67
  case 'information':
68
- return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
69
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
68
+ return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey },
69
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
70
70
  case 'label':
71
71
  return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
72
72
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
@@ -102,8 +102,10 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
102
102
  return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
103
103
  });
104
104
  var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])), function (_a) {
105
- var theme = _a.theme;
106
- return theme.ui_cpnt_chip_fill_base_inactive;
105
+ var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
106
+ return overrideBackgroundColorKey
107
+ ? theme[overrideBackgroundColorKey]
108
+ : theme.ui_cpnt_chip_fill_base_inactive;
107
109
  }, function (_a) {
108
110
  var theme = _a.theme;
109
111
  return theme.spacing.spacingC;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,11 +1,9 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.5.0]
2
+ ## [v1.5.1]
3
3
 
4
+ ### Package
5
+ * publ 도메인에서 asset 쓰는 부분 삭제
4
6
  ### Component
5
- * FloatingActionButton
6
- * 모바일 최적화 컴포넌트 생성 (M_FloatingActionButton)
7
-
8
- ### Panel
9
- * ContentSheet 신규 출시
10
- * AnnotationSheet 신규 출시
11
- * SectionSheet 신규 출시
7
+ * Chip
8
+ * overrideTextColorKey prop 추가
9
+ * overrideBackgroundColorKey prop 추가