@nulogy/components 8.6.0 → 8.7.0

package/dist/main.js

@@ -20324,7 +20324,9 @@
     return {
       color: theme.colors[color],
       fontWeight: theme.fontWeights.medium,
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: theme.space.half,
       textDecoration: "none",
       borderColor: "transparent",
       backgroundColor: "transparent",
@@ -21065,7 +21067,9 @@
 
   var getSharedStyles$4 = function getSharedStyles() {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: Theme.space.half,
       whiteSpace: "nowrap",
       textDecoration: "none",
       borderColor: "transparent",
@@ -21439,7 +21443,9 @@
 
   var getSharedStyles$3 = function getSharedStyles(color) {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: Theme.space.half,
       color: themeGet("colors." + color, color)(color),
       textDecoration: "none",
       border: "none",
@@ -21650,7 +21656,9 @@
     var color = _ref.color,
         layer = _ref.layer;
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: Theme.space.half,
       color: themeGet("colors." + color, color)(color),
       textDecoration: "none",
       border: "none",
@@ -42978,14 +42986,19 @@
   var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
-      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(DropdownLink, {
+    var linkProps = {
       onClick: onItemClick,
       href: subMenuItem.href,
       to: subMenuItem.to,
-      as: subMenuItem.as
-    }, subMenuItem.name));
+      as: subMenuItem.as,
+      target: subMenuItem.openInNew ? "_blank" : undefined
+    };
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(DropdownLink, Object.assign({}, linkProps), subMenuItem.name, subMenuItem.openInNew && /*#__PURE__*/React__default['default'].createElement(Icon, {
+      size: "x2",
+      icon: "openInNew"
+    })));
   };
 
   var renderCustom$2 = function renderCustom(subMenuItem, onItemClick, _SubMenuTrigger, layer) {
@@ -43290,7 +43303,9 @@
 
   var getSharedStyles$1 = function getSharedStyles(color, theme) {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: theme.space.half,
       color: theme.colors[color] || color,
       textDecoration: "none",
       border: "none",
@@ -43364,13 +43379,18 @@
   var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement("div", {
-      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({
+    var linkProps = {
       href: menuItem.href,
       to: menuItem.to,
-      as: menuItem.as
-    }, themeColorObject), menuItem.name));
+      as: menuItem.as,
+      target: menuItem.openInNew ? "_blank" : undefined
+    };
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({}, linkProps, themeColorObject), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default['default'].createElement(Icon, {
+      size: "x2",
+      icon: "openInNew"
+    })));
   };
 
   var renderCustom$1 = function renderCustom(menuItem, _themeColorObject, layer) {
@@ -43395,13 +43415,17 @@
   var getRenderFunction$1 = function getRenderFunction(menuItem) {
     if (menuItem.items) {
       return renderMenuTrigger;
-    } else if (menuItem.href || menuItem.to) {
+    }
+
+    if (menuItem.href || menuItem.to) {
       return renderMenuLink$1;
-    } else if (menuItem.render) {
+    }
+
+    if (menuItem.render) {
       return renderCustom$1;
-    } else {
-      return renderText$1;
     }
+
+    return renderText$1;
   };
 
   var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer, menuType) {
@@ -43580,7 +43604,9 @@
 
   var getSharedStyles = function getSharedStyles(theme) {
     return {
-      display: "block",
+      display: "flex",
+      alignItems: "center",
+      gap: theme.space.half,
       textDecoration: "none",
       border: "none",
       backgroundColor: "transparent",
@@ -43646,12 +43672,17 @@
       to: menuItem.to,
       // eslint-disable-next-line no-mixed-operators
       pl: layer === 0 ? getPaddingLeft(layer) : 24 * layer + 20 + "px",
-      mb: "x1"
+      mb: "x1",
+      target: menuItem.openInNew ? "_blank" : undefined
     };
-    var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+    var topLevel = layer === 0;
+    var MenuLink = topLevel ? TopLevelLink : DropdownLink;
     return /*#__PURE__*/React__default['default'].createElement("li", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name));
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default['default'].createElement(Icon, {
+      size: topLevel ? "x3" : "x2",
+      icon: "openInNew"
+    })));
   };
 
   var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {

package/dist/main.module.js

@@ -20298,7 +20298,9 @@ var DropdownLink = styled.a.withConfig({
   return {
     color: theme.colors[color],
     fontWeight: theme.fontWeights.medium,
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.half,
     textDecoration: "none",
     borderColor: "transparent",
     backgroundColor: "transparent",
@@ -21039,7 +21041,9 @@ var SubMenuLink = styled(DropdownLink).withConfig({
 
 var getSharedStyles$4 = function getSharedStyles() {
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: Theme.space.half,
     whiteSpace: "nowrap",
     textDecoration: "none",
     borderColor: "transparent",
@@ -21413,7 +21417,9 @@ MenuTrigger$1.defaultProps = {
 
 var getSharedStyles$3 = function getSharedStyles(color) {
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: Theme.space.half,
     color: themeGet("colors." + color, color)(color),
     textDecoration: "none",
     border: "none",
@@ -21624,7 +21630,9 @@ var getSharedStyles$2 = function getSharedStyles(_ref) {
   var color = _ref.color,
       layer = _ref.layer;
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: Theme.space.half,
     color: themeGet("colors." + color, color)(color),
     textDecoration: "none",
     border: "none",
@@ -42952,14 +42960,19 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
 var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
-    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-  }, /*#__PURE__*/React__default.createElement(DropdownLink, {
+  var linkProps = {
     onClick: onItemClick,
     href: subMenuItem.href,
     to: subMenuItem.to,
-    as: subMenuItem.as
-  }, subMenuItem.name));
+    as: subMenuItem.as,
+    target: subMenuItem.openInNew ? "_blank" : undefined
+  };
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+  }, /*#__PURE__*/React__default.createElement(DropdownLink, Object.assign({}, linkProps), subMenuItem.name, subMenuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
+    size: "x2",
+    icon: "openInNew"
+  })));
 };
 
 var renderCustom$2 = function renderCustom(subMenuItem, onItemClick, _SubMenuTrigger, layer) {
@@ -43264,7 +43277,9 @@ var MenuTrigger = function MenuTrigger(_a) {
 
 var getSharedStyles$1 = function getSharedStyles(color, theme) {
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.half,
     color: theme.colors[color] || color,
     textDecoration: "none",
     border: "none",
@@ -43338,13 +43353,18 @@ var renderMenuTrigger = function renderMenuTrigger(menuItem, themeColorObject, l
 var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement("div", {
-    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
+  var linkProps = {
     href: menuItem.href,
     to: menuItem.to,
-    as: menuItem.as
-  }, themeColorObject), menuItem.name));
+    as: menuItem.as,
+    target: menuItem.openInNew ? "_blank" : undefined
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, linkProps, themeColorObject), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
+    size: "x2",
+    icon: "openInNew"
+  })));
 };
 
 var renderCustom$1 = function renderCustom(menuItem, _themeColorObject, layer) {
@@ -43369,13 +43389,17 @@ var renderText$1 = function renderText(menuItem, themeColorObject) {
 var getRenderFunction$1 = function getRenderFunction(menuItem) {
   if (menuItem.items) {
     return renderMenuTrigger;
-  } else if (menuItem.href || menuItem.to) {
+  }
+
+  if (menuItem.href || menuItem.to) {
     return renderMenuLink$1;
-  } else if (menuItem.render) {
+  }
+
+  if (menuItem.render) {
     return renderCustom$1;
-  } else {
-    return renderText$1;
   }
+
+  return renderText$1;
 };
 
 var renderMenuItem = function renderMenuItem(menuItem, themeColorObject, layer, menuType) {
@@ -43554,7 +43578,9 @@ var getPaddingLeft = function getPaddingLeft(layer) {
 
 var getSharedStyles = function getSharedStyles(theme) {
   return {
-    display: "block",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.half,
     textDecoration: "none",
     border: "none",
     backgroundColor: "transparent",
@@ -43620,12 +43646,17 @@ var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorOb
     to: menuItem.to,
     // eslint-disable-next-line no-mixed-operators
     pl: layer === 0 ? getPaddingLeft(layer) : 24 * layer + 20 + "px",
-    mb: "x1"
+    mb: "x1",
+    target: menuItem.openInNew ? "_blank" : undefined
   };
-  var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+  var topLevel = layer === 0;
+  var MenuLink = topLevel ? TopLevelLink : DropdownLink;
   return /*#__PURE__*/React__default.createElement("li", {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name));
+  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, sharedLinkProps), menuItem.name, menuItem.openInNew && /*#__PURE__*/React__default.createElement(Icon, {
+    size: topLevel ? "x3" : "x2",
+    icon: "openInNew"
+  })));
 };
 
 var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {

package/dist/src/BrandedNavBar/NavBar.story.d.ts

@@ -40,6 +40,7 @@ export declare const WithIcon: {
     };
 };
 export declare const WithPrimaryAndSecondarySubMenus: () => JSX.Element;
+export declare const WithExternalLinks: () => JSX.Element;
 export declare const WithReactRouter: {
     (): JSX.Element;
     story: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.6.0",
+  "version": "8.7.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {