pds-dev-kit-web 2.2.33 → 2.2.35

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-import type { PDSTabItemOption, PDSTextType } from '../../../common/types';
+import type { FillIconNameKeys, LineIconNameKeys, PDSTabItemOption, PDSTextType } from '../../../common/types';
 type ItemArray = PDSTabItemOption & {
     subArray?: PDSTabItemOption[];
+    iconMode?: 'none' | 'use';
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'line' | 'fill';
 };
 type TextObj = {
     title: PDSTextType;

package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js

@@ -37,9 +37,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_router_dom_1 = require("react-router-dom");
+var Icon_1 = __importDefault(require("../../../hybrid/components/Icon/Icon"));
+var Spacing_1 = __importDefault(require("../../../hybrid/components/Spacing/Spacing"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function DesktopTabBar(_a) {
@@ -67,7 +72,11 @@ function DesktopTabBar(_a) {
                 return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }));
             }
         };
-        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: textLabel_1(item, false) })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
+        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
+                                                    ? styleTheme === 'content'
+                                                        ? 'ui_cpnt_textlabel_usr_brandprimary'
+                                                        : 'ui_cpnt_textlabel_sys_primary'
+                                                    : 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
     }
     if (textArray) {
         var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -149,13 +158,16 @@ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (temp
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
 });
-var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  ", "\n  ", "\n"])), function (_a) {
+var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
-}, function (_a) {
+}, tabIndicator, textOffset, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? theme.spacing.spacingA : theme.spacing.spacingB;
-}, tabIndicator, textOffset);
+}, function (_a) {
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' ? theme.spacing.spacingA : '7px';
+});
 var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"], ["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"])));
 var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  height: ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  height: ", ";\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;

package/dist/src/desktop/components/DynamicDesktopNavBar/DynamicDesktopNavBar.js

@@ -75,8 +75,8 @@ function DynamicDesktopNavBar(_a) {
         template === 'W1_0007' ||
         template === 'W1_0008' ||
         template === 'W1_0009' ||
-        template === 'W1_0010' ||
-        template === 'W1_0011';
+        template === 'W1_0010';
+    var isCenteredLogo = template === 'W1_0011';
     var navBarHeight = '63px';
     (0, react_1.useEffect)(function () {
         var currentSearch = (0, utils_1.getSearchExceptGivenName)(location.search, 'from');
@@ -93,7 +93,7 @@ function DynamicDesktopNavBar(_a) {
     function handleClickInternalMenuItemNav(url) {
         dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
     }
-    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 })] })) }))) })));
+    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, isCenteredLogo: isCenteredLogo }), (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, isCenteredLogo: isCenteredLogo }), (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 })] })) }))) })));
 }
 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) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/BrandLogo.d.ts

@@ -4,7 +4,8 @@ type Props = {
     to: string;
     logoSrc: string;
     fallbackText: string;
+    isCenteredLogo: boolean;
     style?: CSSProperties;
 };
-declare function BrandLogo({ to, logoSrc, fallbackText, style }: Props): JSX.Element;
+declare function BrandLogo({ to, logoSrc, fallbackText, isCenteredLogo, style }: Props): JSX.Element;
 export default BrandLogo;

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/BrandLogo.js

@@ -22,8 +22,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var LogoNav_1 = __importDefault(require("../components/LogoNav"));
 function BrandLogo(_a) {
-    var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, style = _a.style;
-    return ((0, jsx_runtime_1.jsx)(S_BrandLogo, __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(LogoNav_1.default, { to: to, logoSrc: logoSrc, fallbackText: fallbackText }) })));
+    var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, isCenteredLogo = _a.isCenteredLogo, style = _a.style;
+    return ((0, jsx_runtime_1.jsx)(S_BrandLogo, __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(LogoNav_1.default, { to: to, logoSrc: logoSrc, fallbackText: fallbackText, isCenteredLogo: isCenteredLogo }) })));
 }
 var S_BrandLogo = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: BRAND_LOGO;\n"], ["\n  display: flex;\n  grid-area: BRAND_LOGO;\n"])));
 exports.default = BrandLogo;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/LogoNav.d.ts

@@ -3,6 +3,7 @@ type Props = {
     to: string;
     logoSrc: string;
     fallbackText: string;
+    isCenteredLogo: boolean;
 };
-declare function LogoNav({ to, logoSrc, fallbackText }: Props): JSX.Element;
+declare function LogoNav({ to, logoSrc, fallbackText, isCenteredLogo }: Props): JSX.Element;
 export default LogoNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/LogoNav.js

@@ -23,10 +23,19 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var __1 = require("../../..");
 var NavLink_1 = __importDefault(require("../../../../common/components/Navigations/NavLink"));
 function LogoNav(_a) {
-    var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText;
-    return ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(S_Box, { children: logoSrc ? ((0, jsx_runtime_1.jsx)(S_Logo, { src: logoSrc })) : ((0, jsx_runtime_1.jsx)(__1.D_TextLabel, { text: fallbackText, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 1 })) }) })));
+    var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, isCenteredLogo = _a.isCenteredLogo;
+    return ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(S_Box, __assign({ isCenteredLogo: isCenteredLogo }, { children: logoSrc ? ((0, jsx_runtime_1.jsx)(S_Logo, { src: logoSrc })) : ((0, jsx_runtime_1.jsx)(__1.D_TextLabel, { text: fallbackText, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 1 })) })) })));
 }
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  width: 180px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  width: 180px;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  justify-content: ", ";\n  max-width: ", ";\n  width: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  justify-content: ", ";\n  max-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var isCenteredLogo = _a.isCenteredLogo;
+    return isCenteredLogo && 'center';
+}, function (_a) {
+    var isCenteredLogo = _a.isCenteredLogo;
+    return isCenteredLogo && '180px';
+}, function (_a) {
+    var isCenteredLogo = _a.isCenteredLogo;
+    return (isCenteredLogo ? 'max-content' : '180px');
+});
 var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
 exports.default = LogoNav;
 var templateObject_1, templateObject_2;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.js

@@ -230,7 +230,7 @@ exports.TEMPLATES_DATA = {
     W1_0011: {
         gridTemplate: 'PRIMARY_MENU BRAND_LOGO SECONDARY_MENU USER_PROFILE',
         gridStyle: {
-            gridTemplateColumns: '1fr 180px 1fr min-content'
+            gridTemplateColumns: '1fr min-content 1fr min-content'
         },
         showSecondaryMenu: true,
         primaryMenuOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.33",
+  "version": "2.2.35",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,10 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.33]
+## [v2.2.35]
 ## daily|https://design.storybook.publ.biz/
 
 ### Component
-    * DynamicDesktopNavBar
-        * 1단 템플릿 중앙 고정형 추가
+    * DesktopTabBar
+        * itemArray 내부에 icon관련 prop 추가
+            * iconMode
+            * iconName
+            * iconFillType