pds-dev-kit-web-test 0.1.4 → 0.1.5

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

@@ -3,11 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
@@ -114,46 +125,9 @@ function BasicListItem(_a) {
         }
         return true;
     };
-    return (react_1.default.createElement(S_BasicListItem, { "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode },
-        react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
-            react_1.default.createElement(S_LeftBox, { onlyLeftArea: onlyLeftArea },
-                selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
-                    selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
-                    selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
-                badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    isBadgeLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
-                    react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
-                imageIconMode === 'image' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
-                    react_1.default.createElement(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }))),
-                imageIconMode === 'icon' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
-                    react_1.default.createElement(S_IconWrapper, null,
-                        react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" })))),
-                isTextLabelLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
-                react_1.default.createElement(S_TextBox, null,
-                    react_1.default.createElement(S_TextWrapper, null,
-                        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
-                    captionText && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
-                        react_1.default.createElement(S_TextWrapper, null,
-                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
-            react_1.default.createElement(S_RightBox, { displayType: displayType },
-                (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
-                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
-                (displayType === 'ibtn_amount1' ||
-                    displayType === 'ibtn_amount2' ||
-                    displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click, iconColorKey: "ui_cpnt_button_icon_default" })))),
-                    react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
-                displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
-                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
-                displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
-                    react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
-                    isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
-        react_1.default.createElement(S_DividerWrapper, { spacingMode: spacingMode }, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
+    return ((0, jsx_runtime_1.jsxs)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftBox, __assign({ onlyLeftArea: onlyLeftArea }, { children: [selectionMode !== 'none' && ((0, jsx_runtime_1.jsxs)(S_SelectionBoxWrapper, __assign({ selectionMode: selectionMode }, { children: [selectionMode === 'check' && checkboxId && ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick }, void 0)), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue }, void 0))] }), void 0)), badgeMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isBadgeLeftSpacingChecker('none') && ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)), (0, jsx_runtime_1.jsx)(S_Badge, { badgeStatus: badgeStatus }, void 0)] }, void 0)), imageIconMode === 'image' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isImageIconLeftSpacingChecker('none') && ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }, void 0)] }, void 0)), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isImageIconLeftSpacingChecker('none') && ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)), (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" }, void 0) }, void 0)] }, void 0)), isTextLabelLeftSpacingChecker('none') && ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [(0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }, void 0) }, void 0), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }, void 0) }, void 0)] }, void 0))] }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ displayType: displayType }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }, void 0), isRightSpacingChecker('none') && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)] }, void 0)), (displayType === 'ibtn_amount1' ||
+                                displayType === 'ibtn_amount2' ||
+                                displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click, iconColorKey: "ui_cpnt_button_icon_default" }, void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }, void 0)) }, void 0)] }, void 0)), displayType === 'mbtn' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }, void 0), isRightSpacingChecker('none') && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)] }, void 0)), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsxs)(S_SwitchWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }, void 0), isRightSpacingChecker('none') && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)] }, void 0))] }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(S_DividerWrapper, __assign({ spacingMode: spacingMode }, { children: dividerType === 'solid' && (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }, void 0) }), void 0)] }), void 0));
 }
 var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: ", ";\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
@@ -197,11 +171,11 @@ var S_Badge = styled_components_1.default.div(templateObject_8 || (templateObjec
             inactive: "" + theme.ui_cpnt_list_badge_disabled
         }[badgeStatus];
 });
-var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  flex: 3;\n  height: ", ";\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  align-items: center;\n  flex: 3;\n  height: ", ";\n  display: flex;\n  justify-content: flex-end;\n"])), function (_a) {
+var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 3;\n  height: ", ";\n  justify-content: flex-end;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 3;\n  height: ", ";\n  justify-content: flex-end;\n"])), function (_a) {
     var displayType = _a.displayType;
     return (displayType === 'text' ? '40px' : 'auto');
 });
-var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"])));
+var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"])));
 var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
     var spacingMode = _a.spacingMode;
     return (spacingMode !== 'none' ? 'calc(100% - 24px)' : '100%');

package/dist/src/desktop/components/BasicListItem/BasicListItem.stories.d.ts

@@ -0,0 +1,10 @@
+import BasicListItem from './BasicListItem';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof BasicListItem>;
+export default _default;
+export declare const Default: ComponentStory<typeof BasicListItem>;
+export declare const Image: ComponentStory<typeof BasicListItem>;
+export declare const Icon: ComponentStory<typeof BasicListItem>;
+export declare const Badge: ComponentStory<typeof BasicListItem>;
+export declare const Checkbox: ComponentStory<typeof BasicListItem>;
+export declare const Radio: ComponentStory<typeof BasicListItem>;

package/dist/src/desktop/components/BasicListItem/BasicListItem.stories.js

@@ -0,0 +1,188 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = exports.Checkbox = exports.Badge = exports.Icon = exports.Image = exports.Default = void 0;
+var react_1 = require("react");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_2 = require("react");
+var react_hook_form_1 = require("react-hook-form");
+var BasicListItem_1 = __importDefault(require("./BasicListItem"));
+exports.default = {
+    title: 'desktop/components/BasicListItem',
+    component: BasicListItem_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 BasicListItem 컴포넌트'
+            },
+            source: { type: 'code' }
+        }
+    },
+    argTypes: {
+        selectionMode: {
+            description: "\uC88C\uCE21\uC758 \uC120\uD0DD \uC601\uC5ED\uC744 \uACB0\uC815\uD569\uB2C8\uB2E4.\n      *List \uC0C1\uC5D0\uC11C \uC124\uC815\uC744 \uD558\uC9C0 \uC54A\uC558\uB2E4\uBA74 \uAE30\uD68D\uCE21, \uAC1C\uBC1C\uCE21\uC5D0\uC11C \uC9C0\uC815\uD574\uB3C4 \uC81C\uB300\uB85C \uD45C\uD604\uB418\uC9C0 \uC54A\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4."
+        },
+        titleText: {
+            description: '주요 텍스트입니다.',
+            control: { type: 'text' }
+        },
+        titleTextColorTheme: {
+            description: '주요 텍스트의 컬러 테마를 결정합니다.'
+        },
+        descText: {
+            description: '상세 설명 텍스트입니다.',
+            control: { type: 'text' }
+        },
+        badgeMode: {
+            description: '뱃지의 사용 여부입니다.'
+        },
+        badgeStatus: {
+            description: '뱃지 활성화 상태입니다.'
+        },
+        imageIconMode: {
+            description: '좌측의 이미지 또는 아이콘 사용 여부를 결정합니다.'
+        },
+        imageShapeType: {
+            description: '이미지의 shapeType을 결정합니다.'
+        },
+        imageSrc: {
+            description: '이미지 사용 시 주소 값입니다.',
+            control: { type: 'text' }
+        },
+        iconName: {
+            description: '아이콘 사용 시 이름입니다.',
+            control: { type: 'text' }
+        },
+        iconFillType: {
+            description: '아이콘의 형태를 결정합니다.'
+        },
+        displayType: {
+            description: '우측 영역의 표시 방법을 결정합니다.'
+        },
+        captionText: {
+            description: '우측 상단의 작은 글씨 값을 입력합니다. *문장 보다는 간단한 상태값을 표시하는 정도로 사용할 것을 권장합니다.',
+            control: { type: 'text' }
+        },
+        iBtn1IconName: {
+            description: 'btn1(가장 우측)영역의 아이콘 이름을 결정합니다',
+            control: { type: 'text' }
+        },
+        iBtn1IconFillType: {
+            description: 'btn1(가장 우측)영역의 아이콘 유형을 결정합니다.'
+        },
+        iBtn2IconName: {
+            description: 'btn2(우측에서 2번)영역의 아이콘 이름을 결정합니다.',
+            control: { type: 'text' }
+        },
+        iBtn2IconFillType: {
+            description: 'btn2(우측에서 2번)영역의 아이콘 유형을 결정합니다.'
+        },
+        mBtnFillType: {
+            description: '메인 버튼의 fillType를 결정합니다.'
+        },
+        mBtnText: {
+            description: '메인 버튼의 텍스트를 입력합니다.',
+            control: { type: 'text' }
+        },
+        dividerType: {
+            description: '아이템 하단의 divider 표시 유형을 결정합니다.'
+        },
+        titleFontWeight: {
+            description: '타이틀의 폰트 굵기를 결정합니다.'
+        },
+        checkboxId: {
+            description: '체크박스에 사용되는 id입니다.',
+            control: { type: 'none' }
+        },
+        radioId: {
+            description: '라디오버튼의 고유한 이름입니다.',
+            control: { type: 'none' }
+        },
+        radioValue: {
+            description: '라디오버튼에 사용되는 value입니다.',
+            control: { type: 'none' }
+        },
+        switchName: {
+            description: 'displayType이 switch일때 사용되는 고유한 이름입니다. displayType이 switch일때는 필수로 부여해줍니다.',
+            control: { type: 'none' }
+        },
+        switchState: {
+            description: 'displayType이 switch일때 비활성화 상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        switchStatus: {
+            description: 'displayType이 switch일때 on / off 상태를 나타냅니다.',
+            control: { type: 'inline-radio' }
+        },
+        spacingMode: {
+            description: '좌우 여백의 사용 여부를 결정합니다.'
+        },
+        onClick: { action: 'onClick' },
+        onClickIBtn1: { action: 'onClickIBtn1' },
+        onClickIBtn2: { action: 'onClickIBtn2' },
+        onClickMBtn: { action: 'onClickMBtn' },
+        onClickRadio: { action: 'onClickRadio' },
+        onClickSwitch: { action: 'onClickSwitch' }
+    }
+};
+var Template = function (args) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "none", onClick: undefined, captionText: "captionText captionText captionText captionText captionText captionText captionText captionText captionText captionText captionText captionText captionText captionText" }), void 0), (0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "text" }), void 0), (0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "ibtn_text", onClick: undefined }), void 0), (0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "ibtn_amount1", onClick: undefined }), void 0), (0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "ibtn_amount2" }), void 0), (0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "switch" }), void 0), (0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "mbtn" }), void 0)] }, void 0));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    selectionMode: 'none',
+    imageIconMode: 'none',
+    titleTextColorTheme: 'none',
+    badgeMode: 'none',
+    imageShapeType: 'round',
+    imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
+    titleText: 'titleText',
+    descText: 'descText',
+    iconName: 'ic_booking',
+    iconFillType: 'line',
+    displayType: 'none',
+    captionText: 'captionText',
+    iBtn1IconName: 'ic_arrow_right',
+    iBtn1IconFillType: 'line',
+    iBtn2IconName: 'ic_bell',
+    iBtn2IconFillType: 'line',
+    mBtnFillType: 'fill',
+    dividerType: 'solid',
+    titleFontWeight: 'regular',
+    mBtnText: 'mBtnText',
+    radioValue: 'radio'
+};
+exports.Image = Template.bind({});
+exports.Image.args = __assign(__assign({}, exports.Default.args), { imageIconMode: 'image' });
+exports.Icon = Template.bind({});
+exports.Icon.args = __assign(__assign({}, exports.Default.args), { imageIconMode: 'icon' });
+exports.Badge = Template.bind({});
+exports.Badge.args = __assign(__assign({}, exports.Default.args), { badgeMode: 'left', badgeStatus: 'active' });
+var CheckboxTemplate = function (args) {
+    var methods = (0, react_hook_form_1.useForm)();
+    return ((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, methods, { children: [(0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "none", checkboxId: "1" }), void 0), (0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "none", checkboxId: "2" }), void 0), (0, jsx_runtime_1.jsx)(BasicListItem_1.default, __assign({}, args, { displayType: "text", checkboxId: "3" }), void 0)] }), void 0));
+};
+exports.Checkbox = CheckboxTemplate.bind({});
+exports.Checkbox.args = __assign(__assign({}, exports.Default.args), { selectionMode: 'check' });
+var RadioTempate = function (args) {
+    var _a = (0, react_2.useState)('1'), value = _a[0], setValue = _a[1];
+    var handleRadioClick = function (value) {
+        setValue(value);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ['1', '2', '3'].map(function (el) { return ((0, react_1.createElement)(BasicListItem_1.default, __assign({}, args, { key: el, displayType: "none", radioId: el, radioValue: value, onClickRadio: handleRadioClick }))); }) }, void 0));
+};
+exports.Radio = RadioTempate.bind({});
+exports.Radio.args = __assign(__assign({}, exports.Default.args), { selectionMode: 'radio' });

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

@@ -1,6 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import { Path } from 'react-hook-form';
-import { IFormValues, PDSTextType } from '../../../common';
+import type { IFormValues, PDSTextType } from '../../../common';
 export declare type BlogTextFieldProps = {
     hintText?: PDSTextType;
     defaultText?: PDSTextType;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,12 +33,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
-var react_1 = __importDefault(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
@@ -58,14 +66,13 @@ function BlogTextField(_a) {
     }
     var S_BlogTextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
+            return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }, void 0));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
+            return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }, void 0));
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BlogTextFieldWrapper, { "x-pds-name": "BlogTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, textLineType: textLineType, state: state, spacingMode: spacingMode }, S_BlogTextField())));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_BlogTextFieldWrapper, __assign({ "x-pds-name": "BlogTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, textLineType: textLineType, state: state, spacingMode: spacingMode }, { children: S_BlogTextField() }), void 0) }, void 0));
 }
 var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n"], ["\n  height: auto;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n"], ["\n  height: auto;\n"])));
@@ -91,7 +98,7 @@ var disabled = (0, styled_components_1.css)(templateObject_6 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_blogtextfield_base_01;
 });
-var S_BlogTextFieldWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_BlogTextFieldWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {

package/dist/src/desktop/components/BlogTextField/BlogTextField.stories.d.ts

@@ -0,0 +1,10 @@
+import BlogTextField from './BlogTextField';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof BlogTextField>;
+export default _default;
+export declare const Default: ComponentStory<typeof BlogTextField>;
+export declare const Validate: ComponentStory<typeof BlogTextField>;
+export declare const MultiState: ComponentStory<typeof BlogTextField>;
+export declare const MultiRows: ComponentStory<typeof BlogTextField>;
+export declare const AutoState: ComponentStory<typeof BlogTextField>;
+export declare const AutoRows: ComponentStory<typeof BlogTextField>;

package/dist/src/desktop/components/BlogTextField/BlogTextField.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoRows = exports.AutoState = exports.MultiRows = exports.MultiState = exports.Validate = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_hook_form_1 = require("react-hook-form");
+var withFormProvider_1 = require("../../../common/decorators/withFormProvider");
+var components_1 = require("../../../hybrid/components");
+var MainButton_1 = __importDefault(require("../MainButton/MainButton"));
+var TextLabel_1 = __importDefault(require("../TextLabel/TextLabel"));
+var BlogTextField_1 = __importDefault(require("./BlogTextField"));
+exports.default = {
+    title: 'desktop/components/BlogTextField',
+    component: BlogTextField_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 BlogTextField 컴포넌트. react-hook-form의 FormProvider와 pds-dev-kit의 Form 컴포넌트로 감싸서 사용해야 작동합니다. (form계열 컴포넌트의 경우 control을 사용하여 테스트 할 수 없습니다.)'
+            },
+            source: { type: 'code' }
+        },
+        controls: { hideNoControlsWarning: true }
+    },
+    argTypes: {
+        name: {
+            description: 'form의 name을 지정해줍니다.'
+        },
+        hintText: {
+            description: 'placeholder에 표시할 텍스트 값입니다.'
+        },
+        defaultText: {
+            description: '지정된 기본 값을 보여줘야 할 때 사용합니다.'
+        },
+        validation: {
+            description: 'validation 조건을 부여할 수 있습니다.'
+        },
+        size: {
+            description: '크기를 결정합니다.'
+        },
+        textLineType: {
+            description: '텍스트의 개행 방법을 결정합니다. (multi(multiline) : 정해진 높이값을 가지고 있는 textarea, auto(multiline auto size) : 글자 수에 따라 함께 늘어나는 형태'
+        },
+        multiRows: {
+            description: 'textLineType : multi일 때, 지정할 문장의 열 수를 결정합니다. (높이값 결정)'
+        },
+        autoMinRows: {
+            description: 'textLineType : auto일 때, 보여줄 문장의 최소 열 수를 결정합니다.'
+        },
+        autoMaxRows: {
+            description: 'textLineType : auto일 때, 보여줄 문장의 최대 열 수를 결정합니다.'
+        },
+        state: {
+            description: 'textfield의 상태를 결정합니다.'
+        },
+        maxLength: {
+            description: '입력할 수 잇는 최대 문자수를 부여합니다.'
+        },
+        spacingMode: {
+            description: '문자가 타이핑 되는 영역 바깥 영역의 간격을 결정합니다.'
+        }
+    },
+    decorators: [function (story) { return (0, withFormProvider_1.withFormProvider)(story); }]
+};
+var Template = function (args) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BlogTextField_1.default, __assign({}, args), void 0) }, void 0));
+};
+exports.Default = Template.bind({});
+exports.Default.args = { name: 'BlogTextField', hintText: 'BlogTextField' };
+var ValidateTemplate = function () {
+    var methods = (0, react_hook_form_1.useForm)({ mode: 'onChange' });
+    return ((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, methods, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Required", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "validate", hintText: "required", state: "normal", validation: { required: true } }, void 0), (0, jsx_runtime_1.jsx)(MainButton_1.default, { type: "submit", text: "submit", state: methods.formState.isValid ? 'normal' : 'disabled' }, void 0)] }), void 0));
+};
+exports.Validate = ValidateTemplate.bind({});
+var MultiStateTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Multi normal", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "normal", hintText: "normal", state: "normal", textLineType: "multi" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Multi read only", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "readOnly", hintText: "read only", defaultText: "read only", state: "read_only", textLineType: "multi" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Multi disabled", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "disabled", hintText: "disabled", defaultText: "disabled", state: "disabled", textLineType: "multi" }, void 0)] }, void 0));
+};
+exports.MultiState = MultiStateTemplate.bind({});
+var MultiRowsTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "multiRows: 1", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "multiRows1", hintText: "multiRows1", state: "normal", textLineType: "multi", multiRows: 1 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "multiRows: 2", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "multiRows2", hintText: "multiRows2", state: "normal", textLineType: "multi", multiRows: 2 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "multiRows: 5", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "multiRow5", hintText: "multiRow5", state: "normal", textLineType: "multi", multiRows: 5 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "multiRows: 8 (default)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "multiRows8", hintText: "multiRows8", state: "normal", textLineType: "multi", multiRows: 8 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0)] }, void 0));
+};
+exports.MultiRows = MultiRowsTemplate.bind({});
+var AutoStateTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Auto normal", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "normal", hintText: "normal", state: "normal", textLineType: "auto" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Auto read only", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "readOnly", hintText: "read only", defaultText: "read only", state: "read_only", textLineType: "auto" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Auto disabled", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "disabled", hintText: "disabled", defaultText: "disabled", state: "disabled", textLineType: "auto" }, void 0)] }, void 0));
+};
+exports.AutoState = AutoStateTemplate.bind({});
+var AutoRowsTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "autoRows: 1 to 3", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "autoRows1to3", hintText: "autoRows1to3", state: "normal", textLineType: "auto", autoMinRows: 1, autoMaxRows: 3 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "autoRows: 2 to 5", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "autoRows2to5", hintText: "autoRows2to5", state: "normal", textLineType: "auto", autoMinRows: 2, autoMaxRows: 5 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "autoRows: 5 to 8", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "autoRow5to8", hintText: "autoRow5to8", state: "normal", textLineType: "auto", autoMinRows: 5, autoMaxRows: 8 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "autoRows: 8 to infinity (default)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(BlogTextField_1.default, { name: "autoRows8toInfinity", hintText: "autoRows8toInfinity", state: "normal", textLineType: "auto", autoMinRows: 8 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0)] }, void 0));
+};
+exports.AutoRows = AutoRowsTemplate.bind({});

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
 declare type BodyTextGroupProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
     titleText: PDSTextType;

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

@@ -1,20 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BodyTextGroup(_a) {
     var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _c = _a.titleTextWordBreak, titleTextWordBreak = _c === void 0 ? 'keep_all' : _c, _d = _a.descTextWordBreak, descTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.contentTextWordBreak, contentTextWordBreak = _e === void 0 ? 'keep_all' : _e, _f = _a.contentFontWeight, contentFontWeight = _f === void 0 ? 'regular' : _f;
-    return (react_1.default.createElement("div", { "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }),
-        descText && (react_1.default.createElement("div", null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }))),
-        contentText && (react_1.default.createElement("div", null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })))));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }, void 0), descText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0)] }, void 0)), contentText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" }, void 0)] }, void 0))] }), void 0));
 }
 exports.default = BodyTextGroup;

package/dist/src/desktop/components/BodyTextGroup/BodyTextGroup.stories.d.ts

@@ -0,0 +1,8 @@
+import BodyTextGroup from './BodyTextGroup';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof BodyTextGroup>;
+export default _default;
+export declare const TitleOnly: ComponentStory<typeof BodyTextGroup>;
+export declare const WithDescription: ComponentStory<typeof BodyTextGroup>;
+export declare const WithContent: ComponentStory<typeof BodyTextGroup>;
+export declare const Both: ComponentStory<typeof BodyTextGroup>;