pds-dev-kit-web 2.2.84 → 2.2.85

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 (6) hide show
  1. package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.d.ts +1 -5
  2. package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.js +2 -7
  3. package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.d.ts +2 -1
  4. package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.js +8 -4
  5. package/package.json +1 -1
  6. package/release-note.md +2 -3
package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.d.ts CHANGED
@@ -1,16 +1,12 @@
1
1
  /// <reference types="react" />
2
2
  import type { PDSTextType } from '../../../common';
3
- declare enum TITLE_REQUIREMENT_MODE {
4
- USE = "use",
5
- NONE = "none"
6
- }
7
3
  type BasicFormGroupProps = {
8
4
  titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
9
5
  titleText?: PDSTextType;
10
6
  descText?: PDSTextType;
11
7
  captionText?: PDSTextType;
12
8
  inputForm?: JSX.Element;
13
- titleRequirementMode?: TITLE_REQUIREMENT_MODE;
9
+ titleRequirementMode?: 'use' | 'none';
14
10
  };
15
11
  declare function BasicFormGroup({ titleStyleTheme, titleText, descText, captionText, inputForm, titleRequirementMode }: BasicFormGroupProps): JSX.Element;
16
12
  export default BasicFormGroup;
package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.js CHANGED
@@ -22,14 +22,9 @@ var jsx_runtime_1 = require("react/jsx-runtime");
22
22
  var styled_components_1 = __importDefault(require("styled-components"));
23
23
  var hybrid_1 = require("../../../hybrid");
24
24
  var TextLabel_1 = require("../TextLabel");
25
- var TITLE_REQUIREMENT_MODE;
26
- (function (TITLE_REQUIREMENT_MODE) {
27
- TITLE_REQUIREMENT_MODE["USE"] = "use";
28
- TITLE_REQUIREMENT_MODE["NONE"] = "none";
29
- })(TITLE_REQUIREMENT_MODE || (TITLE_REQUIREMENT_MODE = {}));
30
25
  function BasicFormGroup(_a) {
31
- var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _c = _a.titleRequirementMode, titleRequirementMode = _c === void 0 ? TITLE_REQUIREMENT_MODE.NONE : _c;
32
- return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === TITLE_REQUIREMENT_MODE.USE && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
26
+ var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _c = _a.titleRequirementMode, titleRequirementMode = _c === void 0 ? 'none' : _c;
27
+ return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
33
28
  }
34
29
  var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
35
30
  var S_IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n height: 16px;\n justify-content: center;\n padding: 0 ", ";\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n height: 16px;\n justify-content: center;\n padding: 0 ", ";\n width: 16px;\n"])), function (_a) {
package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.d.ts CHANGED
@@ -6,6 +6,7 @@ type HorizontalFormGroupProps = {
6
6
  inputForm: JSX.Element;
7
7
  labelAlignType?: 'top' | 'center';
8
8
  labelTopSpacing?: 'small' | 'medium' | 'large';
9
+ labelRequirementMode?: 'use' | 'none';
9
10
  };
10
- declare function HorizontalFormGroup({ labelText, captionText, inputForm, labelAlignType, labelTopSpacing }: HorizontalFormGroupProps): JSX.Element;
11
+ declare function HorizontalFormGroup({ labelText, captionText, inputForm, labelAlignType, labelTopSpacing, labelRequirementMode }: HorizontalFormGroupProps): JSX.Element;
11
12
  export default HorizontalFormGroup;
package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.js CHANGED
@@ -43,8 +43,8 @@ var styled_components_1 = __importStar(require("styled-components"));
43
43
  var hybrid_1 = require("../../../hybrid");
44
44
  var TextLabel_1 = require("../TextLabel");
45
45
  function HorizontalFormGroup(_a) {
46
- var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
47
- return ((0, jsx_runtime_1.jsxs)(S_HorizontalFormGroupBox, __assign({ "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", labelAlignType: labelAlignType }, { children: [(0, jsx_runtime_1.jsx)(S_LabelWrapper, __assign({ labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, { children: labelAlignType === 'center' ? ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" })) })), (0, jsx_runtime_1.jsx)(S_InputFormWrapper, { children: inputForm }), captionText && ((0, jsx_runtime_1.jsxs)(S_CaptionWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })] }))] })));
46
+ var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing, _c = _a.labelRequirementMode, labelRequirementMode = _c === void 0 ? 'none' : _c;
47
+ return ((0, jsx_runtime_1.jsxs)(S_HorizontalFormGroupBox, __assign({ "x-pds-name": "HorizontalFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", labelAlignType: labelAlignType }, { children: [(0, jsx_runtime_1.jsx)(S_LabelWrapper, __assign({ labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, { children: labelAlignType === 'center' ? ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [labelText, labelRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" })) })), (0, jsx_runtime_1.jsx)(S_InputFormWrapper, { children: inputForm }), captionText && ((0, jsx_runtime_1.jsxs)(S_CaptionWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })] }))] })));
48
48
  }
49
49
  var centerArea = "\n'label inputForm'\n'. caption'";
50
50
  var topArea = "\n'label inputForm'\n'label caption'";
@@ -58,7 +58,7 @@ var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4
58
58
  var labelAlignType = _a.labelAlignType;
59
59
  return labelAlignType === 'center' ? centerArea : topArea;
60
60
  });
61
- var S_LabelWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-self: ", ";\n grid-area: label;\n overflow: hidden;\n\n ", ";\n"], ["\n align-self: ", ";\n grid-area: label;\n overflow: hidden;\n\n ", ";\n"])), function (_a) {
61
+ var S_LabelWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n align-self: ", ";\n display: flex;\n grid-area: label;\n overflow: hidden;\n\n ", ";\n"], ["\n align-items: center;\n align-self: ", ";\n display: flex;\n grid-area: label;\n overflow: hidden;\n\n ", ";\n"])), function (_a) {
62
62
  var labelAlignType = _a.labelAlignType;
63
63
  return labelAlignType === 'center' && labelAlignType;
64
64
  }, function (_a) {
@@ -67,5 +67,9 @@ var S_LabelWrapper = styled_components_1.default.div(templateObject_5 || (templa
67
67
  });
68
68
  var S_InputFormWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n grid-area: inputForm;\n"], ["\n grid-area: inputForm;\n"])));
69
69
  var S_CaptionWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n grid-area: caption;\n"], ["\n grid-area: caption;\n"])));
70
+ var S_IconWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n display: inline-flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n padding: 0 ", ";\n width: 16px;\n"], ["\n align-items: center;\n display: inline-flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n padding: 0 ", ";\n width: 16px;\n"])), function (_a) {
71
+ var theme = _a.theme;
72
+ return theme.spacing.spacingA;
73
+ });
70
74
  exports.default = HorizontalFormGroup;
71
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
75
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.84",
3
+ "version": "2.2.85",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.84]
2
+ ## [v2.2.85]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [PDS-1237] 타임라인 외관에 필요한 Icon 추가 작업 건
7
- * [PDS-1238] BasicFormGroup에 titleRequirementMode prop 추가 건
6
+ * [PDS-1239] HorizontalFormGroup에 labelRequirementMode prop 추가 건