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

package/dist/src/desktop/components/IconButton/IconButton.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,11 +33,8 @@ 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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -65,8 +73,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return (react_1.default.createElement(S_IconButton, { "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown },
-        react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
+    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0) }), void 0));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;

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

@@ -0,0 +1,5 @@
+import IconButton from './IconButton';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof IconButton>;
+export default _default;
+export declare const Default: ComponentStory<typeof IconButton>;

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

@@ -0,0 +1,109 @@
+"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.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var IconButton_1 = __importDefault(require("./IconButton"));
+exports.default = {
+    title: 'desktop/components/IconButton',
+    component: IconButton_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 IconButton 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        fillType: {
+            description: '디자인 표현이 선형인지, 면인지를 의미합니다.',
+            control: { type: 'inline-radio' }
+        },
+        shapeType: {
+            description: '버튼의 외관 형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        baseSize: {
+            description: '버튼의 크기를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        baseColorKey: {
+            description: '배경 컬러입니다. (fillType이 fill일때만 적용됩니다.)(ui_cpnt_button_fill_base_transparent값이 들어올 경우, hover와 active관련 색상 변경이 무시됩니다.)',
+            control: { type: 'text' }
+        },
+        borderColorKey: {
+            description: '라인의 컬러입니다. (지금 사용하지 않습니다.)(fillType이 line일때만 적용됩니다.)',
+            control: { type: 'text' }
+        },
+        iconSize: {
+            description: '아이콘의 크기를 결정합니다.',
+            control: { type: 'inline-radio' },
+            options: [16, 24, 48, 12, 20, 72]
+        },
+        iconFillType: {
+            description: '아이콘의 형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        iconName: {
+            description: '아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.',
+            control: { type: 'select' }
+        },
+        iconColorKey: {
+            description: '아이콘 컬러를 설정합니다.',
+            control: { type: 'text' }
+        },
+        shadow: {
+            description: '그림자 유무를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다. fillType을 고려하여 만들어졌지만, 코드에서 예외처리를 하지 않습니다. 예를 들어, Line fillType에 최적화된 컬러테마를 Fill fillType에 적용한 것은 그냥 사람이 잘못한 것입니다.',
+            control: { type: 'inline-radio' }
+        },
+        type: {
+            description: '버튼 태그 자체의 type을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        state: {
+            description: '상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        tabIndex: {
+            description: '포커스 순서를 지정해줄 수 있습니다.',
+            control: { type: 'number' }
+        },
+        onClick: {
+            action: 'onClick'
+        },
+        onMouseDown: {
+            action: 'onMouseDown'
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(IconButton_1.default, __assign({}, args), void 0); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    fillType: 'fill',
+    shapeType: 'rectangle',
+    baseSize: 'small',
+    iconSize: 24,
+    iconFillType: 'line',
+    iconName: 'ic_arrow_down',
+    shadow: 'hidden',
+    colorTheme: 'none',
+    type: 'button',
+    state: 'normal'
+};

package/dist/src/desktop/components/ImageSlide/ImageSlide.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]; } });
@@ -35,8 +46,9 @@ 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");
 var nuka_carousel_1 = __importDefault(require("nuka-carousel"));
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var ImageSlide = function (_a) {
@@ -44,15 +56,11 @@ var ImageSlide = function (_a) {
     var renderDotControls = function (_a) {
         var currentSlide = _a.currentSlide, slideCount = _a.slideCount;
         var dotList = __spreadArray([], Array(slideCount), true).map(function (x, i) { return ({ id: i }); });
-        return (react_1.default.createElement(react_1.default.Fragment, null, dotList.map(function (item, i) { return (react_1.default.createElement(S_Dot, { key: item.id, currentSlide: currentSlide, i: i })); })));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: dotList.map(function (item, i) { return ((0, jsx_runtime_1.jsx)(S_Dot, { currentSlide: currentSlide, i: i }, item.id)); }) }, void 0));
     };
-    return (react_1.default.createElement(S_ImageSlideWrapper, { "x-pds-name": "ImageSlide", "x-pds-element-type": "component", "x-pds-device-type": "desktop", imageWidth: imageWidth },
-        react_1.default.createElement(nuka_carousel_1.default, { cellSpacing: 24, cellAlign: "center", slideWidth: imageWidth === 'responsive' ? 1 : imageWidth + "px", renderCenterLeftControls: null, renderCenterRightControls: null, renderBottomCenterControls: function (props) { return renderDotControls(props); }, slidesToShow: 1, wrapAround: true }, src &&
-            src.length > 0 &&
-            src.map(function (imageSrc, i) { return (react_1.default.createElement(react_1.Fragment, { key: i.toString() },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement(S_BottomGradient, { imageShapeType: imageShapeType, imageWidth: imageWidth, radius: radius }),
-                    react_1.default.createElement(hybrid_1.ImageView, { src: status === 'active' ? imageSrc : '', shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: "cover", radius: radius, borderMode: borderMode })))); }))));
+    return ((0, jsx_runtime_1.jsx)(S_ImageSlideWrapper, __assign({ "x-pds-name": "ImageSlide", "x-pds-element-type": "component", "x-pds-device-type": "desktop", imageWidth: imageWidth }, { children: (0, jsx_runtime_1.jsx)(nuka_carousel_1.default, __assign({ cellSpacing: 24, cellAlign: "center", slideWidth: imageWidth === 'responsive' ? 1 : imageWidth + "px", renderCenterLeftControls: null, renderCenterRightControls: null, renderBottomCenterControls: function (props) { return renderDotControls(props); }, slidesToShow: 1, wrapAround: true }, { children: src &&
+                src.length > 0 &&
+                src.map(function (imageSrc, i) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(S_BottomGradient, { imageShapeType: imageShapeType, imageWidth: imageWidth, radius: radius }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: status === 'active' ? imageSrc : '', shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: "cover", radius: radius, borderMode: borderMode }, void 0)] }, void 0) }, i.toString())); }) }), void 0) }), void 0));
 };
 var S_Dot = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 8px;\n  display: inline-block;\n  height: 8px;\n  margin: ", ";\n  width: 8px;\n\n  ", "\n"], ["\n  border-radius: 8px;\n  display: inline-block;\n  height: 8px;\n  margin: ", ";\n  width: 8px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ status, src, imageShapeType, imageWidth, imageRatio, radius, borderMode }: import("./ImageSlide").ImageSlideProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<({ status, src, imageShapeType, imageWidth, imageRatio, radius, borderMode }: import("./ImageSlide").ImageSlideProps) => JSX.Element>;

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

@@ -0,0 +1,73 @@
+"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.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ImageSlide_1 = __importDefault(require("./ImageSlide"));
+exports.default = {
+    title: 'desktop/components/ImageSlide',
+    component: ImageSlide_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: '여러 장의 이미지를 업로드 했을 시, 사용자가 쉽게 여러 장의 이미지가 있다는 것을 인지시키기 위해 표시하는 것을 말합니다.'
+            }
+        }
+    },
+    argTypes: {
+        status: {
+            description: '슬라이더의 표시 상태를 의미합니다.',
+            control: { type: 'inline-radio' }
+        },
+        src: {
+            description: '표시할 이미지의 주소 값입니다.',
+            control: { type: 'object' }
+        },
+        imageShapeType: {
+            description: '이미지의 외관 형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        imageWidth: {
+            description: '이미지의 너비 결정'
+        },
+        imageRatio: {
+            description: 'width에 의한 height 값을 구하기 위한 비율입니다.',
+            control: { type: 'inline-radio' }
+        },
+        radius: {
+            description: '모서리 값을 결정합니다. (shapeType=round일 때만 적용됩니다.)',
+            control: { type: 'inline-radio' },
+            options: [8, 16, 24]
+        },
+        borderMode: {
+            description: '이미지에 1px의 border 사용을 결정합니다.',
+            control: { type: 'inline-radio' }
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(ImageSlide_1.default, __assign({}, args), void 0); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    src: [
+        'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
+        'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80'
+    ],
+    imageShapeType: 'round',
+    imageWidth: 'responsive',
+    imageRatio: '1_1',
+    radius: 24,
+    borderMode: 'none'
+};

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

@@ -1,6 +1,6 @@
-import React, { AnimationEventHandler } from 'react';
-import { PDSTextType, UiColors } from '../../../common';
-import { LottieIconNameKeys } from '../../../common/assets/lotties';
+import { AnimationEventHandler } from 'react';
+import type { PDSTextType, UiColors } from '../../../common';
+import type { LottieIconNameKeys } from '../../../common/assets/lotties';
 export declare type LottieReactionButtonProps = {
     text?: PDSTextType;
     actionText?: PDSTextType;

package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.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]; } });
@@ -23,7 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var numberHelper_1 = require("../../../common/utils/numberHelper");
@@ -68,17 +80,13 @@ function LottieReactionButton(_a) {
             onComplete(e);
         }
     };
-    return (react_1.default.createElement(S_Button, { "x-pds-name": "LottieReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor },
-        react_1.default.createElement(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }),
-        displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: isActionText && actionText ? actionText : convertFormatText, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })))));
+    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "LottieReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation, isDefaultBackgroundColor: state === 'view_only' || isBackgroundColor }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }, void 0), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: isActionText && actionText ? actionText : convertFormatText, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }, void 0))] }), void 0));
 }
 var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: default;\n"], ["\n  background-color: ", ";\n  cursor: default;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  border: none;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"], ["\n  cursor: pointer;\n  border: none;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
+var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none;\n  cursor: pointer;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"], ["\n  border: none;\n  cursor: pointer;\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"])), transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_on_base_hover;
 }, function (_a) {
@@ -87,8 +95,8 @@ var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2
 });
 var view_only = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 var buttonAnimation = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"], ["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"])));
-var icon_only = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  width: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
-var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  border-radius: 16px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  border-radius: 16px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var icon_only = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 16px;\n  height: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  width: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 16px;\n  height: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  width: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
+var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 16px;\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 16px;\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });

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

@@ -0,0 +1,6 @@
+import LottieReactionButton from './LottieReactionButton';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof LottieReactionButton>;
+export default _default;
+export declare const Default: ComponentStory<typeof LottieReactionButton>;
+export declare const TextStringType: ComponentStory<typeof LottieReactionButton>;

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

@@ -0,0 +1,99 @@
+"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.TextStringType = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var LottieReactionButton_1 = __importDefault(require("./LottieReactionButton"));
+exports.default = {
+    title: 'desktop/components/LottieReactionButton',
+    component: LottieReactionButton_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 LottieReactionButton 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        text: {
+            description: '표시할 텍스트 값입니다. 해당 prop에 string을 부여하면 해당 텍스트가 그대로 표시됩니다. 해당 prop에 number를 부여 한다면 숫자의 크기에 따라 포맷이 다르게 표시됩니다. Format (1,000개 이상) : 심볼 표시(K, M, B, T)',
+            control: { type: 'number' }
+        },
+        actionText: {
+            description: 'action이 있을때만 표시되는 텍스트 값입니다. (state가 no_animation일때는 표시되지 않습니다.)',
+            control: { type: 'text' }
+        },
+        iconName: {
+            description: '아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다. (LottieIcon만 사용 가능합니다.)',
+            control: { type: 'select' }
+        },
+        displayType: {
+            description: '표시 레이아웃 방식을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        backgroundColorTheme: {
+            description: '미리 부여되어 있는 색상으로 배경 컬러를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        overrideBackgroundColorKey: {
+            description: '미리 부여되어 있는 색상 외의 색상으로 배경 컬러를 결정합니다. (ui_로 정의된 컬러값)',
+            control: { type: 'select' }
+        },
+        state: {
+            description: '상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        type: {
+            description: '버튼 태그 자체의 type을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        onMouseDown: {
+            description: '클릭이 된 시점에 이벤트를 부여합니다. (onClick보다 빠른 시점에 발현됩니다.)',
+            action: 'onMouseDown'
+        },
+        onClick: {
+            description: '클릭이 된 시점에 이벤트를 부여합니다.',
+            action: 'onClick'
+        },
+        onComplete: {
+            description: 'LottieIcon의 loop가 끝난 시점에 이벤트를 부여합니다. (state가 no_animation일때는 LottieIcon의 loop가 작동하지 않으므로 사용할 수 없습니다.)',
+            action: 'onComplete'
+        }
+    }
+};
+var Template = function (args) {
+    var _a = (0, react_1.useState)(0), text = _a[0], setText = _a[1];
+    var handleButtonClick = function () {
+        if (typeof text !== 'number')
+            return text;
+        setText(text + 1);
+    };
+    return ((0, jsx_runtime_1.jsx)(LottieReactionButton_1.default, __assign({ text: text }, args, { onMouseDown: undefined, onClick: handleButtonClick }), void 0));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    actionText: 'LOVE!',
+    iconName: 'ic_lottie_heart',
+    backgroundColorTheme: 'base1'
+};
+exports.TextStringType = Template.bind({});
+exports.TextStringType.args = {
+    text: 'CLICK ME!',
+    actionText: 'LOVE!',
+    iconName: 'ic_lottie_heart',
+    backgroundColorTheme: 'base1'
+};

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type MainButtonProps = {
     text?: PDSTextType;
     shapeType?: 'round' | 'rectangle';

package/dist/src/desktop/components/MainButton/MainButton.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,11 +33,8 @@ 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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../common/components");
 var styles_1 = require("../../../common/styles");
@@ -185,20 +193,12 @@ function MainButton(_a) {
     };
     var MainButtonVariation = function () {
         if (isLoading) {
-            return (react_1.default.createElement(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }, void 0));
         }
         if (isSubmitting) {
-            return (react_1.default.createElement(S_SubmittingMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true },
-                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+            return ((0, jsx_runtime_1.jsx)(S_SubmittingMainButton, __assign({ shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true }, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size }, void 0) }), void 0));
         }
-        return (react_1.default.createElement(S_MainButton, { "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-            size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
-                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
-            size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
-                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+        return ((0, jsx_runtime_1.jsxs)(S_MainButton, __assign({ "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0)] }, void 0))] }), void 0));
     };
     return MainButtonVariation();
 }

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

@@ -0,0 +1,5 @@
+import MainButton from './MainButton';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof MainButton>;
+export default _default;
+export declare const Default: ComponentStory<typeof MainButton>;