pds-dev-kit-web 1.4.52 → 1.4.54

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 (19) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/index.js +7 -3
  3. package/dist/src/common/index.d.ts +2 -2
  4. package/dist/src/common/index.js +5 -1
  5. package/dist/src/common/styles/index.d.ts +48 -0
  6. package/dist/src/common/styles/index.js +6 -0
  7. package/dist/src/common/styles/theme.d.ts +24 -0
  8. package/dist/src/common/styles/theme.js +27 -3
  9. package/dist/src/common/types/styled-components.d.ts +24 -0
  10. package/dist/src/desktop/components/BasicList/BasicList.d.ts +2 -1
  11. package/dist/src/desktop/components/BasicList/BasicList.js +4 -4
  12. package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts +4 -1
  13. package/dist/src/desktop/components/BasicListItem/BasicListItem.js +50 -18
  14. package/dist/src/mobile/components/BasicList/BasicList.d.ts +2 -1
  15. package/dist/src/mobile/components/BasicList/BasicList.js +4 -4
  16. package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts +3 -1
  17. package/dist/src/mobile/components/BasicListItem/BasicListItem.js +50 -18
  18. package/package.json +1 -1
  19. package/release-note.md +7 -8
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType } from './src/common';
1
+ import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType } from './src/common';
2
2
  export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PDSIconType, ForwardedRefType };
3
- export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
3
+ export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme };
4
4
  export { theme };
5
5
  export { Form };
6
6
  import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
4
- exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = void 0;
5
- exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = void 0;
3
+ exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
4
+ exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = void 0;
5
+ exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = void 0;
6
6
  /* eslint-disable import/order */
7
7
  /* eslint-disable import/first */
8
8
  // common
@@ -10,8 +10,12 @@ var common_1 = require("./src/common");
10
10
  Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return common_1.fontWeight; } });
11
11
  Object.defineProperty(exports, "desktopFontSize", { enumerable: true, get: function () { return common_1.desktopFontSize; } });
12
12
  Object.defineProperty(exports, "desktopLineHeight", { enumerable: true, get: function () { return common_1.desktopLineHeight; } });
13
+ Object.defineProperty(exports, "desktopEditorFontSize", { enumerable: true, get: function () { return common_1.desktopEditorFontSize; } });
14
+ Object.defineProperty(exports, "desktopEditorLineHeight", { enumerable: true, get: function () { return common_1.desktopEditorLineHeight; } });
13
15
  Object.defineProperty(exports, "mobileFontSize", { enumerable: true, get: function () { return common_1.mobileFontSize; } });
14
16
  Object.defineProperty(exports, "mobileLineHeight", { enumerable: true, get: function () { return common_1.mobileLineHeight; } });
17
+ Object.defineProperty(exports, "mobileEditorFontSize", { enumerable: true, get: function () { return common_1.mobileEditorFontSize; } });
18
+ Object.defineProperty(exports, "mobileEditorLineHeight", { enumerable: true, get: function () { return common_1.mobileEditorLineHeight; } });
15
19
  Object.defineProperty(exports, "boxShadow", { enumerable: true, get: function () { return common_1.boxShadow; } });
16
20
  Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return common_1.spacing; } });
17
21
  Object.defineProperty(exports, "uiColors", { enumerable: true, get: function () { return common_1.uiColors; } });
package/dist/src/common/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { UITheme } from './styles/colorSet/ui-type';
2
2
  import { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, ForwardedRefType } from './types';
3
3
  export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, ForwardedRefType };
4
- import { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing } from './styles/theme';
4
+ import { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing } from './styles/theme';
5
5
  import { uiColors, customTheme } from './styles/ui-colors';
6
- export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
6
+ export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme };
7
7
  import { theme } from './styles';
8
8
  export { theme };
9
9
  import { Form } from './components';
package/dist/src/common/index.js CHANGED
@@ -2,14 +2,18 @@
2
2
  /* eslint-disable import/order */
3
3
  /* eslint-disable import/first */
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
5
- exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
5
+ exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
6
6
  // theme
7
7
  var theme_1 = require("./styles/theme");
8
8
  Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return theme_1.fontWeight; } });
9
9
  Object.defineProperty(exports, "desktopFontSize", { enumerable: true, get: function () { return theme_1.desktopFontSize; } });
10
10
  Object.defineProperty(exports, "desktopLineHeight", { enumerable: true, get: function () { return theme_1.desktopLineHeight; } });
11
+ Object.defineProperty(exports, "desktopEditorFontSize", { enumerable: true, get: function () { return theme_1.desktopEditorFontSize; } });
12
+ Object.defineProperty(exports, "desktopEditorLineHeight", { enumerable: true, get: function () { return theme_1.desktopEditorLineHeight; } });
11
13
  Object.defineProperty(exports, "mobileFontSize", { enumerable: true, get: function () { return theme_1.mobileFontSize; } });
12
14
  Object.defineProperty(exports, "mobileLineHeight", { enumerable: true, get: function () { return theme_1.mobileLineHeight; } });
15
+ Object.defineProperty(exports, "mobileEditorFontSize", { enumerable: true, get: function () { return theme_1.mobileEditorFontSize; } });
16
+ Object.defineProperty(exports, "mobileEditorLineHeight", { enumerable: true, get: function () { return theme_1.mobileEditorLineHeight; } });
13
17
  Object.defineProperty(exports, "boxShadow", { enumerable: true, get: function () { return theme_1.boxShadow; } });
14
18
  Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return theme_1.spacing; } });
15
19
  var ui_colors_1 = require("./styles/ui-colors");
package/dist/src/common/styles/index.d.ts CHANGED
@@ -30,6 +30,18 @@ export declare const theme: {
30
30
  blog1: string;
31
31
  singleLine: string;
32
32
  };
33
+ desktopEditorFontSize: {
34
+ h1: string;
35
+ h2: string;
36
+ h3: string;
37
+ p: string;
38
+ };
39
+ desktopEditorLineHeight: {
40
+ h1: string;
41
+ h2: string;
42
+ h3: string;
43
+ p: string;
44
+ };
33
45
  mobileFontSize: {
34
46
  displayHeading: string;
35
47
  heading: string;
@@ -57,5 +69,41 @@ export declare const theme: {
57
69
  blog1: string;
58
70
  singleLine: string;
59
71
  };
72
+ mobileEditorFontSize: {
73
+ h1: string;
74
+ h2: string;
75
+ h3: string;
76
+ p: string;
77
+ };
78
+ mobileEditorLineHeight: {
79
+ h1: string;
80
+ h2: string;
81
+ h3: string;
82
+ p: string;
83
+ };
84
+ boxShadow: {
85
+ elevation0: string;
86
+ elevation1: string;
87
+ elevation2: string;
88
+ elevation3: string;
89
+ elevation4: string;
90
+ elevation5: string;
91
+ };
92
+ spacing: {
93
+ spacingA: string;
94
+ spacingB: string;
95
+ spacingC: string;
96
+ spacingD: string;
97
+ spacingE: string;
98
+ spacingF: string;
99
+ spacingG: string;
100
+ spacingH: string;
101
+ spacingI: string;
102
+ spacingJ: string;
103
+ spacingK: string;
104
+ spacingL: string;
105
+ spacingM: string;
106
+ spacingN: string;
107
+ };
60
108
  uiColors: import("..").UITheme;
61
109
  };
package/dist/src/common/styles/index.js CHANGED
@@ -7,7 +7,13 @@ exports.theme = {
7
7
  fontWeight: theme_1.fontWeight,
8
8
  desktopFontSize: theme_1.desktopFontSize,
9
9
  desktopLineHeight: theme_1.desktopLineHeight,
10
+ desktopEditorFontSize: theme_1.desktopEditorFontSize,
11
+ desktopEditorLineHeight: theme_1.desktopEditorLineHeight,
10
12
  mobileFontSize: theme_1.mobileFontSize,
11
13
  mobileLineHeight: theme_1.mobileLineHeight,
14
+ mobileEditorFontSize: theme_1.mobileEditorFontSize,
15
+ mobileEditorLineHeight: theme_1.mobileEditorLineHeight,
16
+ boxShadow: theme_1.boxShadow,
17
+ spacing: theme_1.spacing,
12
18
  uiColors: ui_colors_1.uiColors
13
19
  };
package/dist/src/common/styles/theme.d.ts CHANGED
@@ -30,6 +30,18 @@ export declare const desktopLineHeight: {
30
30
  blog1: string;
31
31
  singleLine: string;
32
32
  };
33
+ export declare const desktopEditorFontSize: {
34
+ h1: string;
35
+ h2: string;
36
+ h3: string;
37
+ p: string;
38
+ };
39
+ export declare const desktopEditorLineHeight: {
40
+ h1: string;
41
+ h2: string;
42
+ h3: string;
43
+ p: string;
44
+ };
33
45
  export declare const mobileFontSize: {
34
46
  displayHeading: string;
35
47
  heading: string;
@@ -57,6 +69,18 @@ export declare const mobileLineHeight: {
57
69
  blog1: string;
58
70
  singleLine: string;
59
71
  };
72
+ export declare const mobileEditorFontSize: {
73
+ h1: string;
74
+ h2: string;
75
+ h3: string;
76
+ p: string;
77
+ };
78
+ export declare const mobileEditorLineHeight: {
79
+ h1: string;
80
+ h2: string;
81
+ h3: string;
82
+ p: string;
83
+ };
60
84
  export declare const boxShadow: {
61
85
  elevation0: string;
62
86
  elevation1: string;
package/dist/src/common/styles/theme.js CHANGED
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.themeByGivenTone = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
14
+ exports.themeByGivenTone = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
15
15
  var ui_colors_1 = require("./ui-colors");
16
16
  exports.fontWeight = {
17
17
  normal: '500',
@@ -44,6 +44,18 @@ exports.desktopLineHeight = {
44
44
  blog1: '1.6',
45
45
  singleLine: '1'
46
46
  };
47
+ exports.desktopEditorFontSize = {
48
+ h1: '38px',
49
+ h2: '30px',
50
+ h3: '24px',
51
+ p: '18px'
52
+ };
53
+ exports.desktopEditorLineHeight = {
54
+ h1: '1.5',
55
+ h2: '1.5',
56
+ h3: '1.5',
57
+ p: '1.8'
58
+ };
47
59
  exports.mobileFontSize = {
48
60
  displayHeading: '32px',
49
61
  heading: '24px',
@@ -71,6 +83,18 @@ exports.mobileLineHeight = {
71
83
  blog1: '1.6',
72
84
  singleLine: '1'
73
85
  };
86
+ exports.mobileEditorFontSize = {
87
+ h1: '38px',
88
+ h2: '30px',
89
+ h3: '24px',
90
+ p: '18px'
91
+ };
92
+ exports.mobileEditorLineHeight = {
93
+ h1: '1.5',
94
+ h2: '1.5',
95
+ h3: '1.5',
96
+ p: '1.8'
97
+ };
74
98
  exports.boxShadow = {
75
99
  elevation0: '0 0 0 0 #0003',
76
100
  elevation1: '0 2px 8px 0 #0003',
@@ -95,7 +119,7 @@ exports.spacing = {
95
119
  spacingM: '288px',
96
120
  spacingN: '320px'
97
121
  };
98
- var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
99
- var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
122
+ var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
123
+ var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
100
124
  exports.themeByGivenTone = themeByGivenTone;
101
125
  exports.default = theme;
package/dist/src/common/types/styled-components.d.ts CHANGED
@@ -31,6 +31,18 @@ export interface PdsDevKitTheme {
31
31
  blog1: '1.6';
32
32
  singleLine: '1';
33
33
  };
34
+ desktopEditorFontSize: {
35
+ h1: '38px';
36
+ h2: '30px';
37
+ h3: '24px';
38
+ p: '18px';
39
+ };
40
+ desktopEditorLineHeight: {
41
+ h1: '1.5';
42
+ h2: '1.5';
43
+ h3: '1.5';
44
+ p: '1.8';
45
+ };
34
46
  mobileFontSize: {
35
47
  displayHeading: '32px';
36
48
  heading: '24px';
@@ -58,6 +70,18 @@ export interface PdsDevKitTheme {
58
70
  blog1: '1.6';
59
71
  singleLine: '1';
60
72
  };
73
+ mobileEditorFontSize: {
74
+ h1: '38px';
75
+ h2: '30px';
76
+ h3: '24px';
77
+ p: '18px';
78
+ };
79
+ mobileEditorLineHeight: {
80
+ h1: '1.5';
81
+ h2: '1.5';
82
+ h3: '1.5';
83
+ p: '1.8';
84
+ };
61
85
  boxShadow: {
62
86
  elevation0: '0 0 0 0 #0003';
63
87
  elevation1: '0 2px 8px 0 #0003';
package/dist/src/desktop/components/BasicList/BasicList.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type BasicListProps = {
8
8
  columns?: 1 | 2 | 3 | 4 | 5 | 6;
9
9
  columnSpacing?: 0 | 16 | 24;
10
10
  rowSpacing?: 0 | 24 | 32 | 48 | 64;
11
+ spacingMode?: 'none' | 'use';
11
12
  };
12
- declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
13
+ declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing, spacingMode }: BasicListProps): JSX.Element;
13
14
  export default BasicList;
package/dist/src/desktop/components/BasicList/BasicList.js CHANGED
@@ -12,9 +12,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var hybrid_1 = require("../../../hybrid");
13
13
  var TextLabel_1 = require("../TextLabel");
14
14
  function BasicList(_a) {
15
- var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
15
+ var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
16
16
  return (react_1.default.createElement(react_1.default.Fragment, null,
17
- (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
17
+ (titleText || captionText) && (react_1.default.createElement(S_TitleBox, { spacingMode: spacingMode },
18
18
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
19
19
  titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
20
20
  captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
@@ -24,8 +24,8 @@ var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateOb
24
24
  var theme = _a.theme;
25
25
  return "" + theme.spacing.spacingD;
26
26
  }, function (_a) {
27
- var theme = _a.theme;
28
- return "0 " + theme.spacing.spacingE;
27
+ var spacingMode = _a.spacingMode, theme = _a.theme;
28
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingE;
29
29
  });
30
30
  var S_BasicListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n column-gap: ", ";\n display: grid;\n grid-template-columns: ", ";\n row-gap: ", ";\n"], ["\n column-gap: ", ";\n display: grid;\n grid-template-columns: ", ";\n row-gap: ", ";\n"])), function (_a) {
31
31
  var columnSpacing = _a.columnSpacing;
package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare type BasicListItemProps = {
28
28
  switchName?: string;
29
29
  switchState?: 'normal' | 'disabled';
30
30
  switchStatus?: 'off' | 'on';
31
+ spacingMode?: 'none' | 'use';
31
32
  onClick?: () => void;
32
33
  onClickIBtn1?: () => void;
33
34
  onClickIBtn2?: () => void;
@@ -42,6 +43,8 @@ export declare type StyleProps = {
42
43
  badgeStatus?: 'cancel' | 'active' | 'inactive';
43
44
  imageIconMode?: 'none' | 'image' | 'icon';
44
45
  displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
46
+ hasOnClick?: boolean;
47
+ spacingMode?: 'none' | 'use';
45
48
  };
46
- declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
49
+ declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
47
50
  export default BasicListItem;
package/dist/src/desktop/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
17
17
  var Radio_1 = require("../Radio");
18
18
  var TextLabel_1 = require("../TextLabel");
19
19
  function BasicListItem(_a) {
20
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
20
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, _s = _a.spacingMode, spacingMode = _s === void 0 ? 'use' : _s, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
21
21
  var methods = (0, react_hook_form_1.useFormContext)();
22
22
  var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
23
23
  var handleCheckBoxClick = function (e) {
@@ -84,23 +84,52 @@ function BasicListItem(_a) {
84
84
  }
85
85
  }
86
86
  };
87
- return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick },
88
- react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText },
87
+ var isBadgeLeftSpacingChecker = function (value) {
88
+ if (spacingMode !== value || selectionMode !== value) {
89
+ return true;
90
+ }
91
+ return false;
92
+ };
93
+ var isImageIconLeftSpacingChecker = function (value) {
94
+ if (selectionMode !== value ||
95
+ badgeMode !== value ||
96
+ (selectionMode === value && badgeMode === value && spacingMode !== value)) {
97
+ return true;
98
+ }
99
+ return false;
100
+ };
101
+ var isTextLabelLeftSpacingChecker = function (value) {
102
+ if (selectionMode !== value ||
103
+ badgeMode !== value ||
104
+ imageIconMode !== value ||
105
+ (selectionMode && badgeMode && imageIconMode && spacingMode) !== value) {
106
+ return true;
107
+ }
108
+ return false;
109
+ };
110
+ var isRightSpacingChecker = function (value) {
111
+ if (spacingMode === value) {
112
+ return false;
113
+ }
114
+ return true;
115
+ };
116
+ return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode },
117
+ react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
89
118
  react_1.default.createElement(S_LeftBox, null,
90
119
  selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
91
120
  selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
92
121
  selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
93
122
  badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
94
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
123
+ isBadgeLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
95
124
  react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
96
125
  imageIconMode === 'image' && (react_1.default.createElement(react_1.default.Fragment, null,
97
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
126
+ isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
98
127
  react_1.default.createElement(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }))),
99
128
  imageIconMode === 'icon' && (react_1.default.createElement(react_1.default.Fragment, null,
100
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
129
+ isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
101
130
  react_1.default.createElement(S_IconWrapper, null,
102
131
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" })))),
103
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
132
+ isTextLabelLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
104
133
  react_1.default.createElement(S_TextBox, null,
105
134
  react_1.default.createElement(S_TextWrapper, null,
106
135
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
@@ -111,7 +140,7 @@ function BasicListItem(_a) {
111
140
  react_1.default.createElement(S_RightBox, { displayType: displayType },
112
141
  (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
113
142
  react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
143
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
144
  (displayType === 'ibtn_amount1' ||
116
145
  displayType === 'ibtn_amount2' ||
117
146
  displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -119,19 +148,19 @@ function BasicListItem(_a) {
119
148
  react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
120
149
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
121
150
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
122
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
151
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
123
152
  displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
124
153
  react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
125
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
126
- react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
154
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
155
+ react_1.default.createElement(S_DividerWrapper, { spacingMode: spacingMode }, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
127
156
  }
128
157
  var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n cursor: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n cursor: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"])), function (_a) {
129
158
  var theme = _a.theme, isSelected = _a.isSelected;
130
159
  return isSelected ? theme.ui_cpnt_list_base_area_select : theme.ui_cpnt_list_base_area;
131
160
  }, function (_a) {
132
- var displayType = _a.displayType, selectionMode = _a.selectionMode, onClick = _a.onClick;
161
+ var displayType = _a.displayType, selectionMode = _a.selectionMode, hasOnClick = _a.hasOnClick;
133
162
  if (displayType === 'ibtn_amount1' || displayType === 'ibtn_text' || displayType === 'none') {
134
- if (onClick) {
163
+ if (hasOnClick) {
135
164
  return 'pointer';
136
165
  }
137
166
  }
@@ -140,15 +169,15 @@ var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templa
140
169
  }
141
170
  return 'default';
142
171
  }, function (_a) {
143
- var theme = _a.theme;
144
- return "0 " + theme.spacing.spacingC;
172
+ var spacingMode = _a.spacingMode, theme = _a.theme;
173
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
145
174
  });
146
175
  var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"])), function (_a) {
147
176
  var imageIconMode = _a.imageIconMode, captionText = _a.captionText;
148
177
  return imageIconMode === 'image' || captionText ? '80px' : '56px';
149
178
  }, function (_a) {
150
- var theme = _a.theme;
151
- return "0 " + theme.spacing.spacingC;
179
+ var spacingMode = _a.spacingMode, theme = _a.theme;
180
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
152
181
  });
153
182
  var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"])));
154
183
  var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
@@ -169,6 +198,9 @@ var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateOb
169
198
  return (displayType === 'text' ? '40px' : 'auto');
170
199
  });
171
200
  var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n min-width: 68px;\n min-height: 32px;\n position: relative;\n right: 0;\n"], ["\n display: flex;\n justify-content: flex-end;\n min-width: 68px;\n min-height: 32px;\n position: relative;\n right: 0;\n"])));
172
- var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: calc(100% - 24px);\n"], ["\n width: calc(100% - 24px);\n"])));
201
+ var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
202
+ var spacingMode = _a.spacingMode;
203
+ return (spacingMode !== 'none' ? 'calc(100% - 24px)' : '100%');
204
+ });
173
205
  exports.default = BasicListItem;
174
206
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/dist/src/mobile/components/BasicList/BasicList.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type BasicListProps = {
8
8
  columns?: 1 | 2 | 3 | 4 | 5 | 6;
9
9
  columnSpacing?: 0 | 16 | 24;
10
10
  rowSpacing?: 0 | 24 | 32 | 48 | 64;
11
+ spacingMode?: 'none' | 'use';
11
12
  };
12
- declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
13
+ declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing, spacingMode }: BasicListProps): JSX.Element;
13
14
  export default BasicList;
package/dist/src/mobile/components/BasicList/BasicList.js CHANGED
@@ -12,9 +12,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var hybrid_1 = require("../../../hybrid");
13
13
  var TextLabel_1 = require("../TextLabel");
14
14
  function BasicList(_a) {
15
- var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
15
+ var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e, _f = _a.spacingMode, spacingMode = _f === void 0 ? 'use' : _f;
16
16
  return (react_1.default.createElement(react_1.default.Fragment, null,
17
- (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
17
+ (titleText || captionText) && (react_1.default.createElement(S_TitleBox, { spacingMode: spacingMode },
18
18
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
19
19
  titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
20
20
  captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
@@ -24,8 +24,8 @@ var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateOb
24
24
  var theme = _a.theme;
25
25
  return "" + theme.spacing.spacingD;
26
26
  }, function (_a) {
27
- var theme = _a.theme;
28
- return "0 " + theme.spacing.spacingE;
27
+ var spacingMode = _a.spacingMode, theme = _a.theme;
28
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingE;
29
29
  });
30
30
  var S_BasicListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n column-gap: ", ";\n display: grid;\n grid-template-columns: ", ";\n row-gap: ", ";\n"], ["\n column-gap: ", ";\n display: grid;\n grid-template-columns: ", ";\n row-gap: ", ";\n"])), function (_a) {
31
31
  var columnSpacing = _a.columnSpacing;
package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare type BasicListItemProps = {
28
28
  switchName?: string;
29
29
  switchState?: 'normal' | 'disabled';
30
30
  switchStatus?: 'off' | 'on';
31
+ spacingMode?: 'none' | 'use';
31
32
  onClick?: () => void;
32
33
  onClickIBtn1?: () => void;
33
34
  onClickIBtn2?: () => void;
@@ -42,6 +43,7 @@ export declare type StyleProps = {
42
43
  badgeStatus?: 'cancel' | 'active' | 'inactive';
43
44
  imageIconMode?: 'none' | 'image' | 'icon';
44
45
  displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
46
+ spacingMode?: 'none' | 'use';
45
47
  };
46
- declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
48
+ declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
47
49
  export default BasicListItem;
package/dist/src/mobile/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
17
17
  var Radio_1 = require("../Radio");
18
18
  var TextLabel_1 = require("../TextLabel");
19
19
  function BasicListItem(_a) {
20
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
20
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, _s = _a.spacingMode, spacingMode = _s === void 0 ? 'use' : _s, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
21
21
  var methods = (0, react_hook_form_1.useFormContext)();
22
22
  var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
23
23
  var handleCheckBoxClick = function (e) {
@@ -84,23 +84,52 @@ function BasicListItem(_a) {
84
84
  }
85
85
  }
86
86
  };
87
- return (react_1.default.createElement(S_BasicListItem, { isSelected: isSelected, onClick: handleClick },
88
- react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText },
87
+ var isBadgeLeftSpacingChecker = function (value) {
88
+ if (spacingMode !== value || selectionMode !== value) {
89
+ return true;
90
+ }
91
+ return false;
92
+ };
93
+ var isImageIconLeftSpacingChecker = function (value) {
94
+ if (selectionMode !== value ||
95
+ badgeMode !== value ||
96
+ (selectionMode === value && badgeMode === value && spacingMode !== value)) {
97
+ return true;
98
+ }
99
+ return false;
100
+ };
101
+ var isTextLabelLeftSpacingChecker = function (value) {
102
+ if (selectionMode !== value ||
103
+ badgeMode !== value ||
104
+ imageIconMode !== value ||
105
+ (selectionMode && badgeMode && imageIconMode && spacingMode) !== value) {
106
+ return true;
107
+ }
108
+ return false;
109
+ };
110
+ var isRightSpacingChecker = function (value) {
111
+ if (spacingMode === value) {
112
+ return false;
113
+ }
114
+ return true;
115
+ };
116
+ return (react_1.default.createElement(S_BasicListItem, { isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode },
117
+ react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode },
89
118
  react_1.default.createElement(S_LeftBox, null,
90
- selectionMode !== 'none' && checkboxId && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
91
- selectionMode === 'check' && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
119
+ selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
120
+ selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
92
121
  selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
93
122
  badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
94
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
123
+ isBadgeLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
95
124
  react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
96
125
  imageIconMode === 'image' && (react_1.default.createElement(react_1.default.Fragment, null,
97
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
126
+ isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
98
127
  react_1.default.createElement(hybrid_1.ImageView, { width: 40, height: 40, src: imageSrc, scaleType: "cover", shapeType: imageShapeType }))),
99
128
  imageIconMode === 'icon' && (react_1.default.createElement(react_1.default.Fragment, null,
100
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
129
+ isImageIconLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
101
130
  react_1.default.createElement(S_IconWrapper, null,
102
131
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24, colorKey: "ui_cpnt_list_icon_02" })))),
103
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
132
+ isTextLabelLeftSpacingChecker('none') && (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })),
104
133
  react_1.default.createElement(S_TextBox, null,
105
134
  react_1.default.createElement(S_TextWrapper, null,
106
135
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
@@ -111,7 +140,7 @@ function BasicListItem(_a) {
111
140
  react_1.default.createElement(S_RightBox, { displayType: displayType },
112
141
  (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
113
142
  react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
143
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
144
  (displayType === 'ibtn_amount1' ||
116
145
  displayType === 'ibtn_amount2' ||
117
146
  displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -119,25 +148,25 @@ function BasicListItem(_a) {
119
148
  react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
120
149
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
121
150
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnClick }),
122
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
151
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
123
152
  displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
124
153
  react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
125
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
126
- react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
154
+ isRightSpacingChecker('none') && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
155
+ react_1.default.createElement(S_DividerWrapper, { spacingMode: spacingMode }, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
127
156
  }
128
157
  var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"])), function (_a) {
129
158
  var theme = _a.theme, isSelected = _a.isSelected;
130
159
  return isSelected ? theme.ui_cpnt_list_base_area_select : theme.ui_cpnt_list_base_area;
131
160
  }, function (_a) {
132
- var theme = _a.theme;
133
- return "0 " + theme.spacing.spacingC;
161
+ var spacingMode = _a.spacingMode, theme = _a.theme;
162
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
134
163
  });
135
164
  var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"])), function (_a) {
136
165
  var imageIconMode = _a.imageIconMode, captionText = _a.captionText;
137
166
  return imageIconMode === 'image' || captionText ? '80px' : '56px';
138
167
  }, function (_a) {
139
- var theme = _a.theme;
140
- return "0 " + theme.spacing.spacingC;
168
+ var spacingMode = _a.spacingMode, theme = _a.theme;
169
+ return spacingMode === 'use' && "0 " + theme.spacing.spacingC;
141
170
  });
142
171
  var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"])));
143
172
  var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
@@ -158,6 +187,9 @@ var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateOb
158
187
  return (displayType === 'text' ? '40px' : 'auto');
159
188
  });
160
189
  var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n min-width: 68px;\n min-height: 32px;\n position: relative;\n right: 0;\n"], ["\n display: flex;\n justify-content: flex-end;\n min-width: 68px;\n min-height: 32px;\n position: relative;\n right: 0;\n"])));
161
- var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: calc(100% - 24px);\n"], ["\n width: calc(100% - 24px);\n"])));
190
+ var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
191
+ var spacingMode = _a.spacingMode;
192
+ return (spacingMode !== 'none' ? 'calc(100% - 24px)' : '100%');
193
+ });
162
194
  exports.default = BasicListItem;
163
195
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.52",
3
+ "version": "1.4.54",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,11 +1,10 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.52]
2
+ ## [v1.4.54]
3
3
 
4
4
  ### Component
5
- * Icon
6
- * ic_photo_multiple line추가
7
- * ic_unlock line추가
8
-
9
- ### Layout
10
- * WF
11
- * right-box에 max-width: 100% 추가
5
+ * EditApplyTextField
6
+ * 스토리북 control 사용할 수 있게 수정
7
+ * Radio
8
+ * 스토리북 control 사용할 수 있게 수정
9
+ * TextField
10
+ * 스토리북 control 사용할 수 있게 수정