pds-dev-kit-web 1.3.8 → 1.3.11

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

@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var IconButton_1 = require("../IconButton");
 var MainButton_1 = require("../MainButton");
 var TextLabel_1 = require("../TextLabel");
 function MobileBasicModal(_a) {
-    var titleText = _a.titleText, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
+    var titleText = _a.titleText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'MobileBasicModal');
@@ -56,7 +56,7 @@ function MobileBasicModal(_a) {
                 react_1.default.createElement(S_TitleWrapper, null,
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
                 react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconColorKey: "ui_cpnt_modal_header_icon_02", iconFillType: "line", onClick: onClickXMarkIcon })),
-            react_1.default.createElement(S_Body, null,
+            react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
                 contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
                 children && children),
             react_1.default.createElement(S_Footer, null, mBtnText && react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, size: "rlarge", onClick: onClickMBtn })))), container);
@@ -65,7 +65,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  max-height: 720px;\n  width: calc(100% - 48px);\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  max-height: 720px;\n  width: calc(100% - 48px);\n  max-width: 560px;\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  left: 50%;\n  max-height: 720px;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  left: 50%;\n  max-height: 720px;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -75,13 +75,13 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
     var theme = _a.theme;
     return theme.boxShadow.elevation4;
 });
-var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"], ["\n  padding-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_a) {
+var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  overflow-y: scroll;\n  max-height: 480px;\n"], ["\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  overflow-y: scroll;\n  max-height: 480px;\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 480px;\n  overflow-y: scroll;\n  padding-top: ", ";\n\n  ", "\n"], ["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 480px;\n  overflow-y: scroll;\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -90,11 +90,14 @@ var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var bodySpacingMode = _a.bodySpacingMode;
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "], ["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  padding-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -103,17 +106,17 @@ var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObje
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
-var S_TitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n"], ["\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n"])), function (_a) {
+var S_TitleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingB;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
 exports.default = MobileBasicModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/package.json

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

package/release-note.md

@@ -1,13 +1,8 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.3.8]
+## [v1.3.11]
 
 ### Component
-* Icon
-  * line 아이콘 추가 (ic_question)
-* D_TextLabel
-  * prop 추가
-    * tooltipText
-    * tooltipPosition
-
-### Color
-* 컬러 키 값 22.04.24 20시 21분 기준 싱크
+* DesktopBasicModal
+  * bodySpacingMode prop 추가
+* MobileBasicModal
+  * bodySpacingMode prop 추가