pds-dev-kit-web-test 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +9 -5
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +9 -5
  3. package/dist/src/common/styles/colorSet/SemanticColor.json +7 -1
  4. package/dist/src/common/styles/colorSet/UIColor.json +6 -2
  5. package/dist/src/common/styles/colorSet/index.d.ts +255 -237
  6. package/dist/src/common/styles/colorSet/index.js +3 -3
  7. package/dist/src/common/styles/colorSet/ui-type.d.ts +4 -0
  8. package/dist/src/common/styles/movement/animationStyle.d.ts +0 -3
  9. package/dist/src/common/styles/movement/animationStyle.js +6 -15
  10. package/dist/src/common/styles/movement/keyframes.js +14 -14
  11. package/dist/src/common/styles/movement/transitionStyle.d.ts +1 -1
  12. package/dist/src/common/styles/movement/transitionStyle.js +3 -3
  13. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +2 -2
  14. package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js +1 -1
  15. package/dist/src/desktop/components/Dropdown/Dropdown.js +14 -3
  16. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +14 -4
  17. package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js +7 -4
  18. package/dist/src/desktop/components/IconButton/IconButton.js +7 -6
  19. package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.js +4 -3
  20. package/dist/src/desktop/components/MainButton/MainButton.js +17 -14
  21. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +2 -1
  22. package/dist/src/desktop/components/Select/Select.js +13 -2
  23. package/dist/src/desktop/components/TextButton/TextButton.js +3 -2
  24. package/dist/src/desktop/components/TextField/TextField.js +14 -4
  25. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +7 -6
  26. package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js +16 -21
  27. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +3 -2
  28. package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js +4 -6
  29. package/dist/src/desktop/layout/LayoutWF/Containers/PageMenuContainer/variation/PageMenu.js +2 -5
  30. package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js +2 -2
  31. package/dist/src/desktop/layout/LayoutWF/LayoutWF.js +1 -1
  32. package/dist/src/desktop/panels/ContentSheet/ContentSheet.js +2 -3
  33. package/dist/src/mobile/components/Dropdown/Dropdown.js +11 -3
  34. package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.js +4 -3
  35. package/dist/src/mobile/components/IconButton/IconButton.js +6 -5
  36. package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.js +3 -2
  37. package/dist/src/mobile/components/MainButton/MainButton.js +12 -11
  38. package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js +3 -2
  39. package/dist/src/mobile/components/Select/Select.js +10 -2
  40. package/dist/src/mobile/components/TextButton/TextButton.js +2 -1
  41. package/dist/src/mobile/components/TextField/TextField.js +12 -4
  42. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +6 -5
  43. package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +12 -14
  44. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +3 -2
  45. package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js +3 -2
  46. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js +7 -5
  47. package/package.json +1 -1
  48. package/release-note.md +3 -6
package/dist/src/mobile/components/Select/Select.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
31
32
  var hybrid_1 = require("../../../hybrid");
32
33
  var HINT = 'HINT_VALUE';
33
34
  function Select(_a) {
@@ -108,7 +109,11 @@ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templa
108
109
  var theme = _a.theme;
109
110
  return theme.spacing.spacingD;
110
111
  });
111
- var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n padding-right: ", ";\n width: 100%;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n padding-right: ", ";\n width: 100%;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n"])), function (_a) {
112
+ var normal_transition = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n &:active {\n background-color: ", ";\n }\n"], ["\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
113
+ var theme = _a.theme;
114
+ return theme.ui_transition_test_text_field_active;
115
+ });
116
+ var S_Select = styled_components_1.default.select(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n padding-right: ", ";\n width: 100%;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n padding-left: ", ";\n padding-right: ", ";\n width: 100%;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
112
117
  var theme = _a.theme;
113
118
  return theme.ui_cpnt_select_base_normal;
114
119
  }, function (_a) {
@@ -149,6 +154,9 @@ var S_Select = styled_components_1.default.select(templateObject_8 || (templateO
149
154
  }, function (_a) {
150
155
  var colorTheme = _a.colorTheme;
151
156
  return colorTheme === 'dark' && dark;
157
+ }, transitionStyle_1.TextFieldTransition, function (_a) {
158
+ var state = _a.state;
159
+ return state === 'normal' && normal_transition;
152
160
  });
153
161
  exports.default = Select;
154
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
162
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
50
50
  Object.defineProperty(exports, "__esModule", { value: true });
51
51
  var react_1 = __importDefault(require("react"));
52
52
  var styled_components_1 = __importStar(require("styled-components"));
53
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
53
54
  var TextLabel_1 = require("../TextLabel");
54
55
  var textStyle = {
55
56
  rlarge: 'body1Bold',
@@ -81,7 +82,7 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
81
82
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
82
83
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
83
84
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
84
- var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
85
+ var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), transitionStyle_1.ButtonTransition, function (_a) {
85
86
  var theme = _a.theme, colorTheme = _a.colorTheme;
86
87
  return colorTheme === 'white'
87
88
  ? theme.ui_cpnt_button_white_base_pressed
package/dist/src/mobile/components/TextField/TextField.js CHANGED
@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
27
27
  var react_1 = __importStar(require("react"));
28
28
  var react_hook_form_1 = require("react-hook-form");
29
29
  var styled_components_1 = __importStar(require("styled-components"));
30
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
30
31
  var components_1 = require("../../common/components");
31
32
  var IconButton_1 = require("../IconButton");
32
33
  function TextField(_a) {
@@ -270,7 +271,11 @@ var transparent_disabled = (0, styled_components_1.css)(templateObject_15 || (te
270
271
  var theme = _a.theme;
271
272
  return theme.ui_cpnt_textfield_border_colortheme_transparent_disabled;
272
273
  });
273
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", "\n"])), function (_a) {
274
+ var normal_transition = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n &:active {\n background-color: ", ";\n }\n"], ["\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
275
+ var theme = _a.theme;
276
+ return theme.ui_transition_test_text_field_active;
277
+ });
278
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
274
279
  var size = _a.size;
275
280
  return size &&
276
281
  {
@@ -298,6 +303,9 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_16 || (t
298
303
  }
299
304
  }
300
305
  }
306
+ }, transitionStyle_1.TextFieldTransition, function (_a) {
307
+ var state = _a.state;
308
+ return state === 'normal' && normal_transition;
301
309
  }, function (_a) {
302
310
  var responsiveMode = _a.responsiveMode;
303
311
  return responsiveMode === 'use' && 'width: 100%';
@@ -305,8 +313,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_16 || (t
305
313
  var customWidth = _a.customWidth;
306
314
  return customWidth && "width: " + customWidth + ";";
307
315
  });
308
- var S_IconBox = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
309
- var S_Error = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
316
+ var S_IconBox = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
317
+ var S_Error = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
310
318
  var theme = _a.theme, colorTheme = _a.colorTheme;
311
319
  switch (colorTheme) {
312
320
  case 'none': {
@@ -331,4 +339,4 @@ var S_Error = styled_components_1.default.div(templateObject_18 || (templateObje
331
339
  return theme.spacing.spacingA;
332
340
  });
333
341
  exports.default = TextField;
334
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
342
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
31
32
  var hybrid_1 = require("../../../hybrid");
32
33
  var types_1 = require("./types");
33
34
  function UploadIconButton(_a) {
@@ -60,14 +61,14 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
60
61
  ? ''
61
62
  : theme.ui_cpnt_button_fill_base_disabled;
62
63
  });
63
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"])), function (_a) {
64
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
64
65
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
65
66
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
66
- }, function (_a) {
67
+ }, transitionStyle_1.ButtonTransition, function (_a) {
67
68
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
68
69
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
69
70
  ? ''
70
- : "linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n " + theme.ui_cpnt_button_fill_on_base_pressed + "\n )";
71
+ : theme.ui_cpnt_button_fill_on_base_pressed;
71
72
  }, function (_a) {
72
73
  var isDisabled = _a.isDisabled;
73
74
  return isDisabled && fillDisabled;
@@ -87,7 +88,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
87
88
  var theme = _a.theme;
88
89
  return theme.ui_cpnt_button_line_base_default;
89
90
  });
90
- var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
91
+ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", "\n\n ", ";\n"], ["\n background-color: ", ";\n border-color: ", ";\n\n ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", "\n\n ", ";\n"])), function (_a) {
91
92
  var theme = _a.theme;
92
93
  return theme.ui_cpnt_button_line_base_default;
93
94
  }, function (_a) {
@@ -106,7 +107,7 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
106
107
  }, function (_a) {
107
108
  var theme = _a.theme;
108
109
  return theme.ui_cpnt_button_line_base_pressed;
109
- }, function (_a) {
110
+ }, transitionStyle_1.ButtonTransition, function (_a) {
110
111
  var isDisabled = _a.isDisabled;
111
112
  return isDisabled && lineDisabled;
112
113
  });
package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js CHANGED
@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var components_1 = require("../../../common/components");
32
32
  var styles_1 = require("../../../common/styles");
33
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
33
34
  var hybrid_1 = require("../../../hybrid");
34
35
  var TextLabel_1 = require("../TextLabel");
35
36
  var types_1 = require("./types");
@@ -157,13 +158,12 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
157
158
  var theme = _a.theme;
158
159
  return theme.ui_cpnt_button_fill_base_disabled;
159
160
  });
160
- var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", "\n"])), function (_a) {
161
+ var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\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 &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\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 &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
161
162
  var theme = _a.theme;
162
163
  return theme.ui_cpnt_button_fill_base_primary;
163
- }, function (_a) {
164
+ }, transitionStyle_1.ButtonTransition, function (_a) {
164
165
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
165
- return !isSubmitting &&
166
- "linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n " + theme.ui_cpnt_button_fill_on_base_pressed + "\n )";
166
+ return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
167
167
  }, function (_a) {
168
168
  var disabled = _a.disabled;
169
169
  return disabled && fillDisabled;
@@ -201,13 +201,13 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
201
201
  ? theme.ui_cpnt_button_line_border_darktheme_disabled
202
202
  : theme.ui_cpnt_button_line_border_disabled;
203
203
  });
204
- var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", ";\n ", "\n"], ["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n ", ";\n ", "\n"])), function (_a) {
204
+ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n ", "\n\n ", ";\n ", "\n"], ["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
205
205
  var theme = _a.theme;
206
206
  return theme.ui_cpnt_button_line_base_default;
207
207
  }, function (_a) {
208
208
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
209
209
  return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
210
- }, function (_a) {
210
+ }, transitionStyle_1.ButtonTransition, function (_a) {
211
211
  var colorTheme = _a.colorTheme;
212
212
  return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
213
213
  }, function (_a) {
@@ -218,13 +218,12 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
218
218
  var theme = _a.theme;
219
219
  return theme.ui_cpnt_button_fill_base_disabled;
220
220
  });
221
- var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"])), function (_a) {
221
+ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\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 &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\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 &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
222
222
  var theme = _a.theme;
223
223
  return theme.ui_cpnt_button_fill_base_primary;
224
- }, function (_a) {
224
+ }, transitionStyle_1.ButtonTransition, function (_a) {
225
225
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
226
- return !isSubmitting &&
227
- "background-image: linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n " + theme.ui_cpnt_button_fill_on_base_pressed + "\n );";
226
+ return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
228
227
  }, function (_a) {
229
228
  var disabled = _a.disabled;
230
229
  return disabled && primaryDisabled;
@@ -233,13 +232,12 @@ var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templ
233
232
  var theme = _a.theme;
234
233
  return theme.ui_cpnt_button_line_base_hover;
235
234
  });
236
- var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n\n &:active:not([disabled]) {\n ", "\n }\n\n ", "\n"])), function (_a) {
235
+ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\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 &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\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 &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
237
236
  var theme = _a.theme;
238
237
  return theme.ui_cpnt_button_line_base_hover;
239
- }, function (_a) {
238
+ }, transitionStyle_1.ButtonTransition, function (_a) {
240
239
  var theme = _a.theme, isSubmitting = _a.isSubmitting;
241
- return !isSubmitting &&
242
- "background-image: linear-gradient(\n to top,\n " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n " + theme.ui_cpnt_button_fill_on_base_pressed + "\n );";
240
+ return !isSubmitting && theme.ui_transition_test_main_button_secondary_active;
243
241
  }, function (_a) {
244
242
  var disabled = _a.disabled;
245
243
  return disabled && secondaryDisabled;
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
+ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
31
32
  var TextLabel_1 = require("../TextLabel");
32
33
  var textStyle = {
33
34
  rlarge: 'body1Bold',
@@ -61,10 +62,10 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
61
62
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
62
63
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
63
64
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
64
- var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
65
+ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
65
66
  var theme = _a.theme;
66
67
  return theme.spacing.spacingB;
67
- }, function (_a) {
68
+ }, transitionStyle_1.ButtonTransition, function (_a) {
68
69
  var theme = _a.theme;
69
70
  return theme.ui_cpnt_button_line_base_pressed;
70
71
  }, function (_a) {
package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js CHANGED
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var react_dom_1 = __importDefault(require("react-dom"));
31
31
  var styled_components_1 = __importStar(require("styled-components"));
32
+ var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
32
33
  var hybrid_1 = require("../../../hybrid");
33
34
  var components_1 = require("../../components");
34
35
  function MobileBasicModal(_a) {
@@ -69,7 +70,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
69
70
  var theme = _a.theme;
70
71
  return theme.ui_cpnt_modal_dimmed;
71
72
  });
72
- var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n left: 50%;\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: 24px;\n box-shadow: ", ";\n left: 50%;\n max-width: 560px;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: calc(100% - 48px);\n"])), function (_a) {
73
+ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n left: 50%;\n max-width: 560px;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: calc(100% - 48px);\n\n ", "\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n left: 50%;\n max-width: 560px;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: calc(100% - 48px);\n\n ", "\n"])), function (_a) {
73
74
  var theme = _a.theme;
74
75
  return theme.ui_cpnt_modal_base;
75
76
  }, function (_a) {
@@ -78,7 +79,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
78
79
  }, function (_a) {
79
80
  var theme = _a.theme;
80
81
  return theme.boxShadow.elevation4;
81
- });
82
+ }, animationStyle_1.modalOnAni);
82
83
  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) {
83
84
  var theme = _a.theme;
84
85
  return theme.spacing.spacingC;
package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js CHANGED
@@ -61,6 +61,7 @@ function YouTubeIframe(_a) {
61
61
  event.target.playVideo();
62
62
  break;
63
63
  case PLAYING:
64
+ setError(null);
64
65
  setTimeout(function () {
65
66
  setIsYoutubeLoading(false);
66
67
  }, 100);
@@ -75,7 +76,9 @@ function YouTubeIframe(_a) {
75
76
  var _a;
76
77
  // eslint-disable-next-line no-console
77
78
  console.log('error >> ', event);
78
- setError({});
79
+ setError(function (prev) {
80
+ return prev ? { try: prev.try + 1 } : { try: 1 };
81
+ });
79
82
  (_a = event.target) === null || _a === void 0 ? void 0 : _a.destroy();
80
83
  }, []);
81
84
  var onYouTubeIframeAPIReady = (0, react_1.useCallback)(function () {
@@ -129,16 +132,15 @@ function YouTubeIframe(_a) {
129
132
  }, [loadYouTubeIFrameApi]);
130
133
  /**
131
134
  @when : error객체가 발행될 때,
132
- @expected : player를 다시 생성하고, error를 초기화합니다.
135
+ @expected : player를 다시 생성합니다. (추가 시도 최대 5회)
133
136
  @clear : -
134
137
  */
135
138
  (0, react_1.useEffect)(function () {
136
139
  if (error) {
137
- // eslint-disable-next-line no-console
138
- console.log('recreatePlayer');
140
+ if (error.try > 5)
141
+ return;
139
142
  onYouTubeIframeAPIReady();
140
143
  }
141
- setError(null);
142
144
  }, [error, onYouTubeIframeAPIReady]);
143
145
  /**
144
146
  @when : YouTubeIframe이 언마운트될 때,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.0.24",
3
+ "version": "0.0.26",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,5 @@
1
1
  # PDS-DEV-KIT-WEB-TEST Release Notes
2
- ## [v0.0.24]
2
+ ## [v0.0.26]
3
3
 
4
- ### sub
5
- * DynamicLayout 수정
6
- * DynamicLayout에 'EDIT' 모드 추가
7
- * 특정 section으로 스크롤하기 기능 추가
8
- * vw를 사용하는 section들 %로 변경
4
+ ### Layout
5
+ * WFA 형태 변경