pds-dev-kit-web 1.5.0 → 1.5.2

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.
Files changed (7) hide show
  1. package/dist/src/common/assets/icons/line/BellNotification.js +2 -2
  2. package/dist/src/desktop/components/Chip/Chip.d.ts +5 -3
  3. package/dist/src/desktop/components/Chip/Chip.js +7 -5
  4. package/dist/src/mobile/components/Chip/Chip.d.ts +5 -3
  5. package/dist/src/mobile/components/Chip/Chip.js +7 -5
  6. package/package.json +1 -1
  7. package/release-note.md +3 -8
package/dist/src/common/assets/icons/line/BellNotification.js CHANGED
@@ -30,7 +30,7 @@ var BellNotification = function (_a) {
30
30
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
31
  return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
32
  react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
33
- react_1.default.createElement("path", { fill: color, d: "M12.0003,2.02995 C13.0953,2.02995 13.9833,2.88195 14.0598,3.95745 C14.2923,4.02645 14.5038,4.12845 14.7228,4.21995 C14.4138,4.61295 14.1843,5.06445 14.0508,5.56095 L14.0508,5.56095 L13.7740222,5.44461667 L13.7740222,5.44461667 L13.6308,5.39445 L12.6378,5.09745 L12.5628,4.06395 C12.5418,3.76395 12.2943,3.52995 12.0003,3.52995 C11.7048,3.52995 11.4633,3.75645 11.4378,4.05645 L11.4378,4.05645 L11.3508,5.10045 L10.3413,5.37945 C7.5228,6.15645 6.5223,8.76645 6.5223,10.76595 L6.5223,10.76595 L6.5223,16.43295 L6.0603,16.91895 L5.1573,17.81445 L18.8313,17.80395 L17.9418,16.92195 L17.4978,16.48245 L17.4768,15.80895 L17.4768,10.76595 C17.4768,10.59195 17.4528,10.42545 17.4378,10.25595 C17.5128,10.26045 17.5848,10.27845 17.6613,10.27845 C18.1053,10.27845 18.5268,10.18695 18.9228,10.04445 C18.9468,10.28445 18.9768,10.52445 18.9768,10.76595 L18.9768,10.76595 L18.9768,15.80895 C18.9768,15.82695 18.9843,15.84345 18.9978,15.85695 L18.9978,15.85695 L19.9833,16.83495 C20.9163,17.76045 20.2308,19.30395 18.8868,19.30395 L18.8868,19.30395 L15.4172999,19.3043575 C15.4167535,21.1878965 13.8839642,22.72035 12.0003,22.72035 C10.1163,22.72035 8.5833,21.18735 8.5833,19.30335 L8.58285416,19.30395 L5.1123,19.30395 C3.81464483,19.30395 3.13085886,17.865063 3.92501688,16.9328073 L4.0158,16.83495 L5.0028,15.85695 C5.0148,15.84345 5.0223,15.82695 5.0223,15.80895 L5.0223,15.80895 L5.0223,10.76595 C5.0223,7.79295 6.7098,4.82445 9.9423,3.93195 C10.0308,2.86845 10.9128,2.02995 12.0003,2.02995 Z M13.9168542,19.30395 L10.0833003,19.3043571 C10.0838457,20.3613956 10.9431357,21.22035 12.0003,21.22035 C13.0578,21.22035 13.9173,20.36085 13.9173,19.30335 L13.9168542,19.30395 Z" }),
34
- react_1.default.createElement("path", { fill: "#FF463A", d: "M20.41515,6.52515 C20.41515,5.00565 19.1833143,3.77415 17.6634002,3.77415 C16.1419857,3.77415 14.91015,5.00565 14.91015,6.52515 C14.91015,8.04615 16.1419857,9.27765 17.6634002,9.27765 C19.1833143,9.27765 20.41515,8.04615 20.41515,6.52515" }))));
33
+ react_1.default.createElement("path", { fill: "#FF463A", d: "M21.1617,6.5255 C21.1617,4.5925 19.5947,3.0255 17.6617,3.0255 C15.7287,3.0255 14.1617,4.5925 14.1617,6.5255 C14.1617,8.4585 15.7287,10.0255 17.6617,10.0255 C19.5947,10.0255 21.1617,8.4585 21.1617,6.5255" }),
34
+ react_1.default.createElement("path", { fill: color, d: "M12.0001,21.2205 C10.9431,21.2205 10.0831,20.3605 10.0831,19.3035 L13.9171,19.3035 C13.9171,20.3605 13.0571,21.2205 12.0001,21.2205 M17.6621,11.7255 C17.5991,11.7255 17.5401,11.7095 17.4781,11.7065 L17.4781,15.8095 C17.4781,16.2255 17.6481,16.6325 17.9421,16.9215 L18.8311,17.8035 L5.1581,17.8145 L6.0661,16.9145 C6.3601,16.6185 6.5221,16.2255 6.5221,15.8095 L6.5221,10.7655 C6.5221,8.7665 7.5221,6.1555 10.3411,5.3785 L11.3501,5.1005 L11.4371,4.0575 C11.4621,3.7565 11.7041,3.5295 12.0001,3.5295 C12.2951,3.5295 12.5421,3.7645 12.5641,4.0635 L12.6371,5.0975 L12.6821,5.1115 C12.8991,4.3505 13.2791,3.6635 13.7911,3.0875 C13.4371,2.4585 12.7731,2.0295 12.0001,2.0295 C10.9131,2.0295 10.0311,2.8685 9.9421,3.9325 C6.7091,4.8235 5.0221,7.7915 5.0221,10.7655 L5.0221,15.8095 C5.0221,15.8275 5.0151,15.8435 5.0021,15.8565 L4.0161,16.8345 C3.0831,17.7595 3.7681,19.3035 5.1131,19.3035 L8.5831,19.3035 C8.5831,21.1875 10.1161,22.7205 12.0001,22.7205 C13.8841,22.7205 15.4171,21.1875 15.4171,19.3035 L18.8871,19.3035 C20.2311,19.3035 20.9171,17.7595 19.9841,16.8345 L18.9981,15.8565 C18.9851,15.8435 18.9781,15.8275 18.9781,15.8095 L18.9781,11.5355 C18.5551,11.6475 18.1191,11.7255 17.6621,11.7255" }))));
35
35
  };
36
36
  exports.default = BellNotification;
package/dist/src/desktop/components/Chip/Chip.d.ts CHANGED
@@ -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 {};
package/dist/src/desktop/components/Chip/Chip.js CHANGED
@@ -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;
package/dist/src/mobile/components/Chip/Chip.d.ts CHANGED
@@ -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 {};
package/dist/src/mobile/components/Chip/Chip.js CHANGED
@@ -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.2",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,11 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.5.0]
2
+ ## [v1.5.2]
3
3
 
4
4
  ### Component
5
- * FloatingActionButton
6
- * 모바일 최적화 컴포넌트 생성 (M_FloatingActionButton)
7
-
8
- ### Panel
9
- * ContentSheet 신규 출시
10
- * AnnotationSheet 신규 출시
11
- * SectionSheet 신규 출시
5
+ * Icon
6
+ * ic_bell_notification line asset의 모양 변경