pds-dev-kit-web-test 0.0.27 → 0.0.28

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 (66) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -6
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -6
  3. package/dist/src/common/styles/colorSet/SemanticColor.json +0 -4
  4. package/dist/src/common/styles/colorSet/UIColor.json +0 -4
  5. package/dist/src/common/styles/colorSet/index.d.ts +0 -16
  6. package/dist/src/common/styles/colorSet/ui-type.d.ts +0 -4
  7. package/dist/src/common/styles/theme.js +13 -13
  8. package/dist/src/common/types/styled-components.d.ts +5 -5
  9. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +3 -4
  10. package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js +2 -3
  11. package/dist/src/desktop/components/Dropdown/Dropdown.js +3 -14
  12. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +6 -17
  13. package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js +4 -5
  14. package/dist/src/desktop/components/IconButton/IconButton.js +6 -7
  15. package/dist/src/desktop/components/LottieReactionButton/LottieReactionButton.js +3 -4
  16. package/dist/src/desktop/components/MainButton/MainButton.js +15 -16
  17. package/dist/src/desktop/components/ReactionButton/ReactionButton.js +1 -2
  18. package/dist/src/desktop/components/Select/Select.js +2 -13
  19. package/dist/src/desktop/components/TextButton/TextButton.js +2 -3
  20. package/dist/src/desktop/components/TextField/TextField.js +6 -17
  21. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +6 -7
  22. package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js +20 -15
  23. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +2 -3
  24. package/dist/src/desktop/components/UserDesktopSideTab/UserDesktopSideTab.js +1 -1
  25. package/dist/src/desktop/layout/LayoutWF/Containers/PageMenuContainer/variation/PageMenu.js +5 -2
  26. package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js +1 -1
  27. package/dist/src/desktop/layout/LayoutWF/LayoutWF.js +1 -1
  28. package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js +2 -3
  29. package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js +2 -3
  30. package/dist/src/mobile/components/Dropdown/Dropdown.js +3 -11
  31. package/dist/src/mobile/components/FloatingActionButton/FloatingActionButton.js +3 -4
  32. package/dist/src/mobile/components/IconButton/IconButton.js +5 -6
  33. package/dist/src/mobile/components/LottieReactionButton/LottieReactionButton.js +2 -3
  34. package/dist/src/mobile/components/MainButton/MainButton.js +11 -12
  35. package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.js +2 -3
  36. package/dist/src/mobile/components/Select/Select.js +2 -10
  37. package/dist/src/mobile/components/TextButton/TextButton.js +1 -2
  38. package/dist/src/mobile/components/TextField/TextField.js +4 -12
  39. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +5 -6
  40. package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +14 -12
  41. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +2 -3
  42. package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js +2 -3
  43. package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -1
  44. package/dist/src/sub/DynamicLayout/DynamicLayout.js +3 -66
  45. package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  46. package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  47. package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  48. package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  49. package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  50. package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  51. package/dist/src/sub/DynamicLayout/sections/InfoBoxSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  52. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  53. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  54. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateC/desktop/D_TemplateC.js +1 -1
  55. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateD/desktop/D_TemplateD.js +1 -1
  56. package/dist/src/sub/DynamicLayout/types.d.ts +1 -3
  57. package/package.json +1 -1
  58. package/release-note.md +1 -1
  59. package/dist/src/common/hooks/useAnimation.d.ts +0 -2
  60. package/dist/src/common/hooks/useAnimation.js +0 -19
  61. package/dist/src/common/styles/movement/animationStyle.d.ts +0 -4
  62. package/dist/src/common/styles/movement/animationStyle.js +0 -14
  63. package/dist/src/common/styles/movement/keyframes.d.ts +0 -14
  64. package/dist/src/common/styles/movement/keyframes.js +0 -23
  65. package/dist/src/common/styles/movement/transitionStyle.d.ts +0 -3
  66. package/dist/src/common/styles/movement/transitionStyle.js +0 -12
@@ -57,7 +57,7 @@ function TemplateA() {
57
57
  react_1.default.createElement(desktop_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(desktop_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
59
59
  }
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"])), function (_a) {
60
+ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"])), function (_a) {
61
61
  var theme = _a.theme;
62
62
  return theme.spacing.spacingH;
63
63
  }, function (_a) {
@@ -57,7 +57,7 @@ function TemplateB() {
57
57
  react_1.default.createElement(desktop_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(desktop_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
59
59
  }
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"])), function (_a) {
60
+ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"])), function (_a) {
61
61
  var theme = _a.theme;
62
62
  return theme.spacing.spacingH;
63
63
  }, function (_a) {
@@ -73,7 +73,7 @@ function TemplateA() {
73
73
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
74
74
  react_1.default.createElement(desktop_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
75
75
  }
76
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n margin: 160px auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n margin: 160px auto;\n ", "\n"])), function (_a) {
76
+ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n margin: 160px auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n\n margin: 160px auto;\n ", "\n"])), function (_a) {
77
77
  var hasNothing = _a.hasNothing;
78
78
  return hasNothing && "margin: 0";
79
79
  });
@@ -48,7 +48,7 @@ function TemplateA() {
48
48
  buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
49
49
  }
50
50
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
51
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"])));
51
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"])));
52
52
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
53
53
  var theme = _a.theme, hasTitle = _a.hasTitle;
54
54
  return hasTitle && theme.spacing.spacingF;
@@ -48,7 +48,7 @@ function TemplateB() {
48
48
  buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
49
49
  }
50
50
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n"], ["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n"])));
51
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px 0 13vh;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px 0 13vh;\n"])));
51
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px 0 13vh;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px 0 13vh;\n"])));
52
52
  var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: 800px;\n"], ["\n max-width: 800px;\n"])));
53
53
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
54
54
  var theme = _a.theme, hasTitle = _a.hasTitle;
@@ -48,7 +48,7 @@ function TemplateC() {
48
48
  buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
49
49
  }
50
50
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n"], ["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n"])));
51
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n margin: 160px 0;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n margin: 160px 0;\n"])));
51
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n margin: 160px 0;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n margin: 160px 0;\n"])));
52
52
  var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: 800px;\n"], ["\n max-width: 800px;\n"])));
53
53
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
54
54
  var theme = _a.theme, hasTitle = _a.hasTitle;
@@ -48,7 +48,7 @@ function TemplateD() {
48
48
  buttonCharlieLinkSrc && (react_1.default.createElement(desktop_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
49
49
  }
50
50
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
51
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100% - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"])));
51
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"])));
52
52
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
53
53
  var theme = _a.theme, hasTitle = _a.hasTitle;
54
54
  return hasTitle && theme.spacing.spacingF;
@@ -166,12 +166,10 @@ export interface IItemDescription extends IDescription {
166
166
  export declare type DynamicLayoutProps = {
167
167
  device: 'DESKTOP' | 'MOBILE';
168
168
  /** @default 'NORMAL */
169
- mode?: 'NORMAL' | 'PREVIEW' | 'EDIT';
169
+ mode?: 'NORMAL' | 'PREVIEW';
170
170
  /** @deprecated use 'mode' instead */
171
171
  isPreview?: boolean;
172
172
  sections: ISection[];
173
173
  navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
174
- scrollDownTargetSectionId?: number;
175
- onClickEditSection?: (section: ISection) => void;
176
174
  };
177
175
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.0.27",
3
+ "version": "0.0.28",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # PDS-DEV-KIT-WEB-TEST Release Notes
2
- ## [v0.0.27]
2
+ ## [v0.0.28]
3
3
 
4
4
  ### Layout
5
5
  * WFA_1 형태 변경
@@ -1,2 +0,0 @@
1
- declare function useAnimation(isRender: boolean): [boolean, () => void, boolean];
2
- export default useAnimation;
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var react_1 = require("react");
4
- function useAnimation(isRender) {
5
- var _a = (0, react_1.useState)(false), isComplete = _a[0], setIsComplete = _a[1];
6
- (0, react_1.useEffect)(function () {
7
- if (isRender) {
8
- setIsComplete(true);
9
- }
10
- }, [isRender]);
11
- var shouldRender = isRender || isComplete;
12
- var isAnimationStart = isRender && isComplete;
13
- var handleAnimationEnd = function () {
14
- if (!isRender)
15
- setIsComplete(false);
16
- };
17
- return [shouldRender, handleAnimationEnd, isAnimationStart];
18
- }
19
- exports.default = useAnimation;
@@ -1,4 +0,0 @@
1
- export declare const dialogOnAni: import("styled-components").FlattenSimpleInterpolation;
2
- export declare const dialogOffAni: import("styled-components").FlattenSimpleInterpolation;
3
- export declare const modalOnAni: import("styled-components").FlattenSimpleInterpolation;
4
- export declare const modalOffAni: import("styled-components").FlattenSimpleInterpolation;
@@ -1,14 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.modalOffAni = exports.modalOnAni = exports.dialogOffAni = exports.dialogOnAni = void 0;
8
- var styled_components_1 = require("styled-components");
9
- var keyframes_1 = require("./keyframes");
10
- exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
11
- exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
12
- exports.modalOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
13
- exports.modalOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"], ["\n transform-origin: 0 0;\n animation: ", " 0.2s ease-in-out both,\n ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
14
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -1,14 +0,0 @@
1
- export declare const fadeIn: import("styled-components").Keyframes;
2
- export declare const fadeOut: import("styled-components").Keyframes;
3
- export declare const glow: import("styled-components").Keyframes;
4
- export declare const scaleUp: import("styled-components").Keyframes;
5
- export declare const scaleDown: import("styled-components").Keyframes;
6
- export declare const scaleUpIncludeTranslate: import("styled-components").Keyframes;
7
- export declare const scaleDownIncludeTranslate: import("styled-components").Keyframes;
8
- export declare const gelatine: import("styled-components").Keyframes;
9
- export declare const scaleBounceIn: import("styled-components").Keyframes;
10
- export declare const scaleBounceIn02: import("styled-components").Keyframes;
11
- export declare const scaleBounceInIncludeTranslate: import("styled-components").Keyframes;
12
- export declare const scaleBounceInIncludeTranslate02: import("styled-components").Keyframes;
13
- export declare const scaleBounceOutIncludeTranslate: import("styled-components").Keyframes;
14
- export declare const scaleBounceOutIncludeTranslate02: import("styled-components").Keyframes;
@@ -1,23 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceInIncludeTranslate = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = void 0;
8
- var styled_components_1 = require("styled-components");
9
- exports.fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { opacity: 0.7; }\n to { opacity: 1; }\n"], ["\n from { opacity: 0.7; }\n to { opacity: 1; }\n"])));
10
- exports.fadeOut = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n from { opacity: 1; }\n to { opacity: 0.7; }\n"], ["\n from { opacity: 1; }\n to { opacity: 0.7; }\n"])));
11
- exports.glow = (0, styled_components_1.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n from { transform: scale(1); }\n to { transform: scale(1.03); }\n"], ["\n from { transform: scale(1); }\n to { transform: scale(1.03); }\n"])));
12
- exports.scaleUp = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n from { transform: scale(0.95); }\n to { transform: scale(1); }\n"], ["\n from { transform: scale(0.95); }\n to { transform: scale(1); }\n"])));
13
- exports.scaleDown = (0, styled_components_1.keyframes)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n from { transform: scale(1); }\n to { transform: scale(0.95); }\n"], ["\n from { transform: scale(1); }\n to { transform: scale(0.95); }\n"])));
14
- exports.scaleUpIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from { transform: scale(0.97) translate(-50%, -50%); }\n to { transform: scale(1) translate(-50%, -50%); }\n"], ["\n from { transform: scale(0.97) translate(-50%, -50%); }\n to { transform: scale(1) translate(-50%, -50%); }\n"])));
15
- exports.scaleDownIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n from { transform: scale(1) translate(-50%, -50%); }\n to { transform: scale(0.97) translate(-50%, -50%); }\n"], ["\n from { transform: scale(1) translate(-50%, -50%); }\n to { transform: scale(0.97) translate(-50%, -50%); }\n"])));
16
- exports.gelatine = (0, styled_components_1.keyframes)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n from, 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 from, 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"])));
17
- exports.scaleBounceIn = (0, styled_components_1.keyframes)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n from, to {\n transform: scale(1);\n }\n 23% {\n transform: scale(1.03);\n }\n 66% {\n transform: scale(0.99);\n }\n"], ["\n from, to {\n transform: scale(1);\n }\n 23% {\n transform: scale(1.03);\n }\n 66% {\n transform: scale(0.99);\n }\n"])));
18
- exports.scaleBounceIn02 = (0, styled_components_1.keyframes)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n from {\n transform: scale(0.9);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(1);\n }\n"], ["\n from {\n transform: scale(0.9);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(1);\n }\n"])));
19
- exports.scaleBounceInIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n 66% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n"], ["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n 66% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n"])));
20
- exports.scaleBounceInIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n from {\n transform: scale(0.9) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(1) translate(-50%, -50%);\n }\n"], ["\n from {\n transform: scale(0.9) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(1) translate(-50%, -50%);\n }\n"])));
21
- exports.scaleBounceOutIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n 66% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n"], ["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n 66% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n"])));
22
- exports.scaleBounceOutIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n from {\n transform: scale(1) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(0.9) translate(-50%, -50%);\n }\n"], ["\n from {\n transform: scale(1) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(0.9) translate(-50%, -50%);\n }\n"])));
23
- 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;
@@ -1,3 +0,0 @@
1
- export declare const AdminListItemTransition: import("styled-components").FlattenSimpleInterpolation;
2
- export declare const TextFieldTransition: import("styled-components").FlattenSimpleInterpolation;
3
- export declare const ButtonTransition: import("styled-components").FlattenSimpleInterpolation;
@@ -1,12 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.ButtonTransition = exports.TextFieldTransition = exports.AdminListItemTransition = void 0;
8
- var styled_components_1 = require("styled-components");
9
- exports.AdminListItemTransition = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transition: background-color 0.15s ease-out;\n"], ["\n transition: background-color 0.15s ease-out;\n"])));
10
- exports.TextFieldTransition = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transition: background-color 0.15s ease-out;\n"], ["\n transition: background-color 0.15s ease-out;\n"])));
11
- exports.ButtonTransition = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transition: background-color 0.1s ease-out;\n"], ["\n transition: background-color 0.1s ease-out;\n"])));
12
- var templateObject_1, templateObject_2, templateObject_3;