@pingux/astro 2.122.1-alpha.0 → 2.123.0-alpha.0

package/lib/cjs/components/NavBar/NavBar.styles.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _colors = require("../../styles/colors");
 var _AccordionGrid = _interopRequireDefault(require("../AccordionGridGroup/AccordionGrid.styles"));
 var _Buttons = require("../Button/Buttons.styles");
 var _Text = require("../Text/Text.styles");
@@ -126,7 +127,14 @@ var popUpSectionContainer = {
 var sectionBody = _objectSpread(_objectSpread({}, _AccordionGrid["default"].body), {}, {
   pl: '0'
 });
-var itemButton = {
+var truncateText = {
+  whiteSpace: 'normal',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box',
+  WebkitLineClamp: '3',
+  overflow: 'hidden'
+};
+var itemButton = _objectSpread(_objectSpread({
   marginY: '2px',
   textDecoration: 'none',
   outline: 'none',
@@ -135,20 +143,19 @@ var itemButton = {
   backgroundColor: 'transparent',
   paddingTop: 'sm',
   paddingBottom: 'sm',
-  display: 'block',
   color: 'neutral.90',
   fontSize: 'md',
   fontWeight: 0,
   flexGrow: '1',
   width: '100%',
   textAlign: 'left',
-  whiteSpace: 'break-spaces',
   overflowWrap: 'break-word',
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
   paddingLeft: '45px',
-  paddingRight: 'md',
+  paddingRight: 'md'
+}, truncateText), {}, {
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'
@@ -163,7 +170,7 @@ var itemButton = {
   '&.is-pressed': {
     bg: 'accent.5'
   }
-};
+});
 var popUpItemButton = _objectSpread(_objectSpread({}, itemButton), {}, {
   fontSize: 'sm',
   px: 'sm',
@@ -196,7 +203,7 @@ var subtitle = {
 };
 var headerText = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
   whiteSpace: 'break-spaces',
-  lineHeight: 1,
+  lineHeight: 1.15,
   fontSize: 'md',
   fontWeight: 1,
   maxWidth: '150px',
@@ -231,9 +238,9 @@ var headerNav = {
   fontSize: '16px',
   '&.is-focused': {
     outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus'
+    boxShadow: "0 0 0 1px ".concat(_colors.focus),
+    WebkitBoxShadow: "0 0 0 1px ".concat(_colors.focus),
+    MozBoxShadow: "0 0 0 1px ".concat(_colors.focus)
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -18,7 +18,7 @@ var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["icon", "text", "className", "id", "onPress"];
+var _excluded = ["icon", "text", "className", "id", "onPress", "iconProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -27,6 +27,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className = props.className,
     key = props.id,
     onPressCallback = props.onPress,
+    iconProps = props.iconProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var navItemRef = (0, _hooks.useLocalOrForwardRef)(null);
 
@@ -84,7 +85,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx: {
       alignItems: 'center'
     }
-  }, icon && (0, _react2.jsx)(_index.Icon, {
+  }, icon && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: icon,
     title: {
       name: text
@@ -95,7 +96,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       color: color,
       fill: color
     }
-  }), (0, _react2.jsx)(_index.Text, {
+  }, iconProps)), (0, _react2.jsx)(_index.Text, {
     variant: state.navStyles.navBarItemText
   }, text)));
 });

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -63,7 +63,12 @@ var NavBarItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var shouldShowTransition = isExpanded && isTransitioning;
   var getEstimatedHeight = function getEstimatedHeight() {
     if (item !== null && item !== void 0 && item.children && typeof (item === null || item === void 0 ? void 0 : item.children.length) === 'number') {
-      return (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
+      var height = (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
+      /*
+        returning Double the max height to address
+        UIP-7608: Ensures the last NavBar item is visible when system scrollbars are always shown
+      */
+      return height * 2;
     }
     return null;
   };

package/lib/cjs/components/NavBarSection/NavBarItemButton.js

@@ -13,12 +13,11 @@ var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "id", "onPress", "sx"];
+var _excluded = ["className", "id", "onPress"];
 var NavBarItemButton = function NavBarItemButton(props) {
   var className = props.className,
     key = props.id,
     onPressCallback = props.onPress,
-    sx = props.sx,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _NavBarContext.useNavBarContext)();
   var isSelected = state.selectedKey === key;

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -75,7 +75,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     "data-testid": heading
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
-    size: isOnyx ? 'icon-200' : 'sm',
+    size: isOnyx ? 'icon-200' : 18,
     sx: {
       mr: 'sm',
       color: getIconColor(),
@@ -119,7 +119,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     "data-testid": heading
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
-    size: isOnyx ? 'icon-200' : 'sm',
+    size: isOnyx ? 'icon-200' : 18,
     sx: {
       mr: 'sm',
       color: 'neutral.95',
@@ -139,7 +139,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     }
   }, customIcon && (0, _react2.jsx)(_index.Icon, {
     icon: customIcon,
-    size: isOnyx ? 'icon-200' : 'sm',
+    size: isOnyx ? 'icon-200' : 'xs',
     sx: {
       color: 'neutral.95',
       fill: 'neutral.95'

package/lib/cjs/components/NavBarSection/NavBarItemHeader.test.js

@@ -65,7 +65,7 @@ describe('NavItemHeader', function () {
     getComponent();
     var icon = _testWrapper.screen.getByTestId('Dashboard').querySelector('svg');
     expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute('width', '20px');
+    expect(icon).toHaveAttribute('width', '18');
   });
 });
 describe('NavItemHeader', function () {

package/lib/cjs/components/NavBarSection/NavBarItemLink.js

@@ -47,7 +47,10 @@ var NavBarItemLink = function NavBarItemLink(props) {
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined
   }, others, {
-    sx: _objectSpread({}, props.sx)
+    sx: _objectSpread(_objectSpread({}, props.sx), {}, {
+      // eslint-disable-line react/prop-types
+      fontWeight: 1
+    })
   }));
 };
 var _default = NavBarItemLink;

package/lib/cjs/styles/themes/astro/customProperties/styles.js

@@ -6,6 +6,6 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _default = {
-  navButtonEstHeight: 40
+  navButtonEstHeight: 41
 };
 exports["default"] = _default;

package/lib/cjs/types/navBar.d.ts

@@ -1,6 +1,6 @@
 import React, { Key } from 'react';
 import { ThemeUICSSObject } from 'theme-ui';
-import { IconTypeExtended } from './icon';
+import { IconProps, IconTypeExtended } from './icon';
 import { DOMAttributes, StyleProps } from './shared';
 export interface NavBarProps extends StyleProps, DOMAttributes {
     /** Allows only one item to be expanded. */
@@ -33,6 +33,7 @@ export interface NavBarItemProps extends StyleProps, DOMAttributes {
     /** Text that will render within the component */
     text?: string;
     className?: string;
+    iconProps?: IconProps;
 }
 export interface NavBarItemBodyProps {
     item?: {

package/lib/cjs/utils/devUtils/constants/logos.js

@@ -46,8 +46,8 @@ var pingLogoHorizontalSmall = (0, _react2.jsx)("svg", {
 }))));
 exports.pingLogoHorizontalSmall = pingLogoHorizontalSmall;
 var pingLogoHorizontalSmallWhite = (0, _react2.jsx)("svg", {
-  width: "161",
-  height: "28",
+  width: "129",
+  height: "23",
   viewBox: "0 0 2385 415",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"