pds-dev-kit-web 2.2.32 → 2.2.33

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 (8) hide show
  1. package/dist/src/desktop/components/DynamicDesktopNavBar/DynamicDesktopNavBar.js +25 -6
  2. package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/UserProfile.d.ts +2 -2
  3. package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/UserProfile.js +7 -5
  4. package/dist/src/desktop/components/DynamicDesktopNavBar/templates/DynamicDesktopNavBarTemplates.d.ts +136 -1
  5. package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.d.ts +141 -0
  6. package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.js +141 -0
  7. package/package.json +1 -1
  8. package/release-note.md +3 -6
package/dist/src/desktop/components/DynamicDesktopNavBar/DynamicDesktopNavBar.js CHANGED
@@ -59,12 +59,25 @@ exports.BasePathContext = (0, react_1.createContext)({
59
59
  }
60
60
  });
61
61
  function DynamicDesktopNavBar(_a) {
62
- var _b = _a.isPreview, isPreview = _b === void 0 ? false : _b, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'none' : _c;
63
- var _d = templates_1.DynamicDesktopNavBarTemplates.getTemplate(template), gridStyle = _d.gridStyle, gridTemplate = _d.gridTemplate, showSecondaryMenu = _d.showSecondaryMenu, primaryMenuOptions = _d.primaryMenuOptions, secondaryMenuOptions = _d.secondaryMenuOptions, userProfileOptions = _d.userProfileOptions;
64
- var _e = (0, react_1.useReducer)(reducer_1.default, reducer_1.defaultValue), state = _e[0], dispatch = _e[1];
62
+ var _b;
63
+ var _c = _a.isPreview, isPreview = _c === void 0 ? false : _c, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
64
+ var _e = templates_1.DynamicDesktopNavBarTemplates.getTemplate(template), gridStyle = _e.gridStyle, gridTemplate = _e.gridTemplate, showSecondaryMenu = _e.showSecondaryMenu, primaryMenuOptions = _e.primaryMenuOptions, secondaryMenuOptions = _e.secondaryMenuOptions, userProfileOptions = _e.userProfileOptions;
65
+ var _f = (0, react_1.useReducer)(reducer_1.default, reducer_1.defaultValue), state = _f[0], dispatch = _f[1];
65
66
  var location = (0, react_router_dom_1.useLocation)();
66
67
  var prevLocation = (0, hooks_1.usePrevious)(location.pathname + location.search);
67
68
  var theme = (0, styled_components_1.useTheme)();
69
+ var profileArea = (0, react_1.useRef)(null);
70
+ var userProfileAreaWidth = ((_b = profileArea === null || profileArea === void 0 ? void 0 : profileArea.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
71
+ var GRID_GAP = 24;
72
+ var gridStyleMarginLeft = "".concat(userProfileAreaWidth + GRID_GAP, "px");
73
+ var style = template === 'W1_0011' ? __assign(__assign({}, gridStyle), { marginLeft: gridStyleMarginLeft }) : gridStyle;
74
+ var isFixedWidth = template === 'W1_0006' ||
75
+ template === 'W1_0007' ||
76
+ template === 'W1_0008' ||
77
+ template === 'W1_0009' ||
78
+ template === 'W1_0010' ||
79
+ template === 'W1_0011';
80
+ var navBarHeight = '63px';
68
81
  (0, react_1.useEffect)(function () {
69
82
  var currentSearch = (0, utils_1.getSearchExceptGivenName)(location.search, 'from');
70
83
  var currentLocation = location.pathname + currentSearch;
@@ -80,18 +93,24 @@ function DynamicDesktopNavBar(_a) {
80
93
  function handleClickInternalMenuItemNav(url) {
81
94
  dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
82
95
  }
83
- return ((0, jsx_runtime_1.jsx)(exports.BasePathContext.Provider, __assign({ value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, { children: colorTheme === 'transparent' ? ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) }, { children: (0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) })) }))) : ((0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) }))) })));
96
+ return ((0, jsx_runtime_1.jsx)(exports.BasePathContext.Provider, __assign({ value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, { children: colorTheme === 'transparent' ? ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) }, { children: (0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isFixedWidth: isFixedWidth, isPreview: isPreview, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) })) }))) : ((0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview, isFixedWidth: isFixedWidth, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) }))) })));
84
97
  }
85
- var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n gap: 24px;\n justify-items: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n gap: 24px;\n justify-items: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
98
+ var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n grid-column-gap: 24px;\n justify-items: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n grid-column-gap: 24px;\n justify-items: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
86
99
  var theme = _a.theme;
87
100
  return theme.spacing.spacingE;
88
101
  }, function (_a) {
89
102
  var theme = _a.theme;
90
103
  return theme.spacing.spacingE;
91
104
  });
92
- var S_DynamicDesktopNavBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: 63px;\n min-width: ", ";\n\n * {\n box-sizing: border-box;\n }\n\n a:active {\n pointer-events: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n height: 63px;\n min-width: ", ";\n\n * {\n box-sizing: border-box;\n }\n\n a:active {\n pointer-events: ", ";\n }\n"])), function (_a) {
105
+ var S_DynamicDesktopNavBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: ", ";\n justify-content: ", ";\n min-width: ", ";\n\n * {\n box-sizing: border-box;\n }\n\n a:active {\n pointer-events: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n height: ", ";\n justify-content: ", ";\n min-width: ", ";\n\n * {\n box-sizing: border-box;\n }\n\n a:active {\n pointer-events: ", ";\n }\n"])), function (_a) {
93
106
  var theme = _a.theme;
94
107
  return theme.ui_menu_background;
108
+ }, function (_a) {
109
+ var navBarHeight = _a.navBarHeight;
110
+ return navBarHeight;
111
+ }, function (_a) {
112
+ var isFixedWidth = _a.isFixedWidth;
113
+ return isFixedWidth && 'center';
95
114
  }, function (_a) {
96
115
  var isPreview = _a.isPreview;
97
116
  return (isPreview ? '1100px' : '1200px');
package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/UserProfile.d.ts CHANGED
@@ -7,5 +7,5 @@ type Props = {
7
7
  overrideUserProfile?: React.ReactNode;
8
8
  style?: CSSProperties;
9
9
  };
10
- declare function UserProfile({ src, to, overrideUserProfile, leftIconButton, style }: Props): JSX.Element;
11
- export default UserProfile;
10
+ declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
11
+ export default _default;
package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/UserProfile.js CHANGED
@@ -19,14 +19,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var react_1 = require("react");
22
23
  var styled_components_1 = __importDefault(require("styled-components"));
23
24
  var Navigations_1 = require("../../../../common/components/Navigations");
24
25
  var hybrid_1 = require("../../../../hybrid");
25
- function UserProfile(_a) {
26
+ function UserProfile(_a, ref) {
26
27
  var src = _a.src, to = _a.to, overrideUserProfile = _a.overrideUserProfile, leftIconButton = _a.leftIconButton, style = _a.style;
27
- return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style }, { children: overrideUserProfile ? (overrideUserProfile) : ((0, jsx_runtime_1.jsxs)(S_ImageViewWrapper, { children: [leftIconButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }) }))] })) })));
28
+ return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style, ref: ref }, { children: overrideUserProfile ? ((0, jsx_runtime_1.jsx)(S_OverrideUserProfile, { children: overrideUserProfile })) : ((0, jsx_runtime_1.jsxs)(S_ImageViewWrapper, { children: [leftIconButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }) }))] })) })));
28
29
  }
29
30
  var S_UserProfile = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n grid-area: USER_PROFILE;\n justify-content: flex-end;\n"], ["\n display: flex;\n grid-area: USER_PROFILE;\n justify-content: flex-end;\n"])));
30
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
31
- exports.default = UserProfile;
32
- var templateObject_1, templateObject_2;
31
+ var S_OverrideUserProfile = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: max-content;\n"], ["\n width: max-content;\n"])));
32
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
33
+ exports.default = (0, react_1.forwardRef)(UserProfile);
34
+ var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/desktop/components/DynamicDesktopNavBar/templates/DynamicDesktopNavBarTemplates.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { TemplateNamesType } from './types';
2
2
  declare class DynamicDesktopNavBarTemplates {
3
3
  private static data;
4
4
  private static names;
5
- static getNames(): Record<"W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005", "W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005">;
5
+ static getNames(): Record<"W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005" | "W1_0006" | "W1_0007" | "W1_0008" | "W1_0009" | "W1_0010" | "W1_0011", "W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005" | "W1_0006" | "W1_0007" | "W1_0008" | "W1_0009" | "W1_0010" | "W1_0011">;
6
6
  static getTemplate(name: TemplateNamesType): {
7
7
  gridTemplate: string;
8
8
  gridStyle: {
@@ -108,6 +108,141 @@ declare class DynamicDesktopNavBarTemplates {
108
108
  userProfileOptions: {
109
109
  style: {};
110
110
  };
111
+ } | {
112
+ gridTemplate: string;
113
+ gridStyle: {
114
+ width: string;
115
+ gridTemplateColumns: string;
116
+ };
117
+ showSecondaryMenu: boolean;
118
+ userProfileOptions: {
119
+ style: {
120
+ width: string;
121
+ };
122
+ };
123
+ primaryMenuOptions: {
124
+ showMenuAsIcon: boolean;
125
+ maxLength: number;
126
+ style: {
127
+ justifyContent: string;
128
+ };
129
+ };
130
+ secondaryMenuOptions: {
131
+ showMenuAsIcon: boolean;
132
+ maxLength: number;
133
+ style: {};
134
+ };
135
+ } | {
136
+ gridTemplate: string;
137
+ gridStyle: {
138
+ width: string;
139
+ gridTemplateColumns: string;
140
+ };
141
+ showSecondaryMenu: boolean;
142
+ primaryMenuOptions: {
143
+ showMenuAsIcon: boolean;
144
+ maxLength: number;
145
+ style: {};
146
+ };
147
+ secondaryMenuOptions: {
148
+ showMenuAsIcon: boolean;
149
+ maxLength: number;
150
+ style: {};
151
+ };
152
+ userProfileOptions: {
153
+ style: {};
154
+ };
155
+ } | {
156
+ gridTemplate: string;
157
+ gridStyle: {
158
+ width: string;
159
+ gridTemplateColumns: string;
160
+ };
161
+ showSecondaryMenu: boolean;
162
+ primaryMenuOptions: {
163
+ showMenuAsIcon: boolean;
164
+ maxLength: number;
165
+ style: {};
166
+ };
167
+ secondaryMenuOptions: {
168
+ showMenuAsIcon: boolean;
169
+ maxLength: number;
170
+ style: {};
171
+ };
172
+ userProfileOptions: {
173
+ style: {};
174
+ };
175
+ } | {
176
+ gridTemplate: string;
177
+ gridStyle: {
178
+ width: string;
179
+ gridTemplateColumns: string;
180
+ };
181
+ showSecondaryMenu: boolean;
182
+ primaryMenuOptions: {
183
+ showMenuAsIcon: boolean;
184
+ maxLength: number;
185
+ style: {
186
+ justifyContent: string;
187
+ };
188
+ };
189
+ secondaryMenuOptions: {
190
+ showMenuAsIcon: boolean;
191
+ maxLength: number;
192
+ style: {};
193
+ };
194
+ userProfileOptions: {
195
+ style: {};
196
+ };
197
+ } | {
198
+ gridTemplate: string;
199
+ gridStyle: {
200
+ width: string;
201
+ gridTemplateColumns: string;
202
+ };
203
+ showSecondaryMenu: boolean;
204
+ primaryMenuOptions: {
205
+ showMenuAsIcon: boolean;
206
+ maxLength: number;
207
+ style: {
208
+ justifyContent: string;
209
+ };
210
+ };
211
+ secondaryMenuOptions: {
212
+ showMenuAsIcon: boolean;
213
+ maxLength: number;
214
+ style: {
215
+ justifyContent: string;
216
+ };
217
+ };
218
+ userProfileOptions: {
219
+ style: {};
220
+ };
221
+ } | {
222
+ gridTemplate: string;
223
+ gridStyle: {
224
+ gridTemplateColumns: string;
225
+ };
226
+ showSecondaryMenu: boolean;
227
+ primaryMenuOptions: {
228
+ showMenuAsIcon: boolean;
229
+ maxLength: number;
230
+ style: {
231
+ justifyContent: string;
232
+ };
233
+ };
234
+ secondaryMenuOptions: {
235
+ showMenuAsIcon: boolean;
236
+ maxLength: number;
237
+ style: {
238
+ width: string;
239
+ justifyContent: string;
240
+ paddingLeft: string;
241
+ };
242
+ };
243
+ userProfileOptions: {
244
+ style: {};
245
+ };
111
246
  };
112
247
  }
113
248
  export default DynamicDesktopNavBarTemplates;
package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.d.ts CHANGED
@@ -109,4 +109,145 @@ export declare const TEMPLATES_DATA: {
109
109
  style: {};
110
110
  };
111
111
  };
112
+ W1_0006: {
113
+ gridTemplate: string;
114
+ gridStyle: {
115
+ width: string;
116
+ gridTemplateColumns: string;
117
+ };
118
+ showSecondaryMenu: boolean;
119
+ userProfileOptions: {
120
+ style: {
121
+ width: string;
122
+ };
123
+ };
124
+ primaryMenuOptions: {
125
+ showMenuAsIcon: boolean;
126
+ maxLength: number;
127
+ style: {
128
+ justifyContent: string;
129
+ };
130
+ };
131
+ secondaryMenuOptions: {
132
+ showMenuAsIcon: boolean;
133
+ maxLength: number;
134
+ style: {};
135
+ };
136
+ };
137
+ W1_0007: {
138
+ gridTemplate: string;
139
+ gridStyle: {
140
+ width: string;
141
+ gridTemplateColumns: string;
142
+ };
143
+ showSecondaryMenu: boolean;
144
+ primaryMenuOptions: {
145
+ showMenuAsIcon: boolean;
146
+ maxLength: number;
147
+ style: {};
148
+ };
149
+ secondaryMenuOptions: {
150
+ showMenuAsIcon: boolean;
151
+ maxLength: number;
152
+ style: {};
153
+ };
154
+ userProfileOptions: {
155
+ style: {};
156
+ };
157
+ };
158
+ W1_0008: {
159
+ gridTemplate: string;
160
+ gridStyle: {
161
+ width: string;
162
+ gridTemplateColumns: string;
163
+ };
164
+ showSecondaryMenu: boolean;
165
+ primaryMenuOptions: {
166
+ showMenuAsIcon: boolean;
167
+ maxLength: number;
168
+ style: {};
169
+ };
170
+ secondaryMenuOptions: {
171
+ showMenuAsIcon: boolean;
172
+ maxLength: number;
173
+ style: {};
174
+ };
175
+ userProfileOptions: {
176
+ style: {};
177
+ };
178
+ };
179
+ W1_0009: {
180
+ gridTemplate: string;
181
+ gridStyle: {
182
+ width: string;
183
+ gridTemplateColumns: string;
184
+ };
185
+ showSecondaryMenu: boolean;
186
+ primaryMenuOptions: {
187
+ showMenuAsIcon: boolean;
188
+ maxLength: number;
189
+ style: {
190
+ justifyContent: string;
191
+ };
192
+ };
193
+ secondaryMenuOptions: {
194
+ showMenuAsIcon: boolean;
195
+ maxLength: number;
196
+ style: {};
197
+ };
198
+ userProfileOptions: {
199
+ style: {};
200
+ };
201
+ };
202
+ W1_0010: {
203
+ gridTemplate: string;
204
+ gridStyle: {
205
+ width: string;
206
+ gridTemplateColumns: string;
207
+ };
208
+ showSecondaryMenu: boolean;
209
+ primaryMenuOptions: {
210
+ showMenuAsIcon: boolean;
211
+ maxLength: number;
212
+ style: {
213
+ justifyContent: string;
214
+ };
215
+ };
216
+ secondaryMenuOptions: {
217
+ showMenuAsIcon: boolean;
218
+ maxLength: number;
219
+ style: {
220
+ justifyContent: string;
221
+ };
222
+ };
223
+ userProfileOptions: {
224
+ style: {};
225
+ };
226
+ };
227
+ W1_0011: {
228
+ gridTemplate: string;
229
+ gridStyle: {
230
+ gridTemplateColumns: string;
231
+ };
232
+ showSecondaryMenu: boolean;
233
+ primaryMenuOptions: {
234
+ showMenuAsIcon: boolean;
235
+ maxLength: number;
236
+ style: {
237
+ justifyContent: string;
238
+ };
239
+ };
240
+ secondaryMenuOptions: {
241
+ showMenuAsIcon: boolean;
242
+ maxLength: number;
243
+ style: {
244
+ width: string;
245
+ justifyContent: string;
246
+ paddingLeft: string;
247
+ };
248
+ };
249
+ userProfileOptions: {
250
+ style: {};
251
+ };
252
+ };
112
253
  };
package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.js CHANGED
@@ -111,5 +111,146 @@ exports.TEMPLATES_DATA = {
111
111
  userProfileOptions: {
112
112
  style: {}
113
113
  }
114
+ },
115
+ W1_0006: {
116
+ gridTemplate: 'BRAND_LOGO PRIMARY_MENU USER_PROFILE',
117
+ gridStyle: {
118
+ width: '1400px',
119
+ gridTemplateColumns: 'max-content auto max-content'
120
+ },
121
+ showSecondaryMenu: false,
122
+ userProfileOptions: {
123
+ style: {
124
+ width: '180px'
125
+ }
126
+ },
127
+ primaryMenuOptions: {
128
+ showMenuAsIcon: false,
129
+ maxLength: 99,
130
+ style: {
131
+ justifyContent: 'center'
132
+ }
133
+ },
134
+ secondaryMenuOptions: {
135
+ showMenuAsIcon: false,
136
+ maxLength: 0,
137
+ style: {}
138
+ }
139
+ },
140
+ W1_0007: {
141
+ gridTemplate: 'BRAND_LOGO PRIMARY_MENU USER_PROFILE',
142
+ gridStyle: {
143
+ width: '1400px',
144
+ gridTemplateColumns: 'max-content auto max-content'
145
+ },
146
+ showSecondaryMenu: false,
147
+ primaryMenuOptions: {
148
+ showMenuAsIcon: false,
149
+ maxLength: 99,
150
+ style: {}
151
+ },
152
+ secondaryMenuOptions: {
153
+ showMenuAsIcon: false,
154
+ maxLength: 0,
155
+ style: {}
156
+ },
157
+ userProfileOptions: {
158
+ style: {}
159
+ }
160
+ },
161
+ W1_0008: {
162
+ gridTemplate: 'BRAND_LOGO PRIMARY_MENU SECONDARY_MENU USER_PROFILE',
163
+ gridStyle: {
164
+ width: '1400px',
165
+ gridTemplateColumns: 'max-content auto max-content max-content'
166
+ },
167
+ showSecondaryMenu: true,
168
+ primaryMenuOptions: {
169
+ showMenuAsIcon: false,
170
+ maxLength: 99,
171
+ style: {}
172
+ },
173
+ secondaryMenuOptions: {
174
+ showMenuAsIcon: true,
175
+ maxLength: 3,
176
+ style: {}
177
+ },
178
+ userProfileOptions: {
179
+ style: {}
180
+ }
181
+ },
182
+ W1_0009: {
183
+ gridTemplate: 'BRAND_LOGO PRIMARY_MENU USER_PROFILE',
184
+ gridStyle: {
185
+ width: '1400px',
186
+ gridTemplateColumns: 'max-content auto max-content'
187
+ },
188
+ showSecondaryMenu: false,
189
+ primaryMenuOptions: {
190
+ showMenuAsIcon: false,
191
+ maxLength: 5,
192
+ style: {
193
+ justifyContent: 'flex-end'
194
+ }
195
+ },
196
+ secondaryMenuOptions: {
197
+ showMenuAsIcon: false,
198
+ maxLength: 0,
199
+ style: {}
200
+ },
201
+ userProfileOptions: {
202
+ style: {}
203
+ }
204
+ },
205
+ W1_0010: {
206
+ gridTemplate: 'BRAND_LOGO PRIMARY_MENU SECONDARY_MENU USER_PROFILE',
207
+ gridStyle: {
208
+ width: '1400px',
209
+ gridTemplateColumns: 'max-content auto max-content max-content'
210
+ },
211
+ showSecondaryMenu: true,
212
+ primaryMenuOptions: {
213
+ showMenuAsIcon: false,
214
+ maxLength: 99,
215
+ style: {
216
+ justifyContent: 'flex-end'
217
+ }
218
+ },
219
+ secondaryMenuOptions: {
220
+ showMenuAsIcon: true,
221
+ maxLength: 3,
222
+ style: {
223
+ justifyContent: 'flex-end'
224
+ }
225
+ },
226
+ userProfileOptions: {
227
+ style: {}
228
+ }
229
+ },
230
+ W1_0011: {
231
+ gridTemplate: 'PRIMARY_MENU BRAND_LOGO SECONDARY_MENU USER_PROFILE',
232
+ gridStyle: {
233
+ gridTemplateColumns: '1fr 180px 1fr min-content'
234
+ },
235
+ showSecondaryMenu: true,
236
+ primaryMenuOptions: {
237
+ showMenuAsIcon: false,
238
+ maxLength: 3,
239
+ style: {
240
+ justifyContent: 'right'
241
+ }
242
+ },
243
+ secondaryMenuOptions: {
244
+ showMenuAsIcon: false,
245
+ maxLength: 2,
246
+ style: {
247
+ width: '100%',
248
+ justifyContent: 'left',
249
+ paddingLeft: '32px'
250
+ }
251
+ },
252
+ userProfileOptions: {
253
+ style: {}
254
+ }
114
255
  }
115
256
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.32",
3
+ "version": "2.2.33",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,10 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.32]
2
+ ## [v2.2.33]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### Component
6
- * Icon
7
- * ic_mobile_notification line 추가
8
- * ic_mobile_notification fill 추가
9
- * Dropdown
10
- * groupInfoArray 추가
6
+ * DynamicDesktopNavBar
7
+ * 1단 템플릿 중앙 고정형 추가