@pingux/astro 2.0.0-alpha.5 → 2.0.0-alpha.7

package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js

@@ -14,12 +14,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.IconSlotsInChip = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = void 0;
+exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.IconSlotsInBadge = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _ = require("../..");
+var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
@@ -30,7 +30,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _default = {
   title: 'Form/MultivaluesField',
-  component: _.MultivaluesField,
+  component: _index.MultivaluesField,
   argTypes: _objectSpread(_objectSpread({
     direction: {
       defaultValue: 'bottom'
@@ -220,15 +220,15 @@ var itemsWithSlots = [{
   id: 1,
   name: 'Aardvark',
   key: 'Aardvark',
-  chipProps: {
+  badgeProps: {
     variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'badgeDeleteButton'
   },
   slots: {
-    leftIcon: (0, _react2.jsx)(_.Icon, {
+    leftIcon: (0, _react2.jsx)(_index.Icon, {
       icon: VariableIcon,
       size: 16
     })
@@ -237,15 +237,15 @@ var itemsWithSlots = [{
   id: 2,
   name: 'Kangaroo',
   key: 'Kangaroo',
-  chipProps: {
+  badgeProps: {
     variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'badgeDeleteButton'
   },
   slots: {
-    leftIcon: (0, _react2.jsx)(_.Icon, {
+    leftIcon: (0, _react2.jsx)(_index.Icon, {
       icon: HTMLIcon,
       size: 16
     })
@@ -254,15 +254,15 @@ var itemsWithSlots = [{
   id: 3,
   name: 'Snake',
   key: 'Snake',
-  chipProps: {
+  badgeProps: {
     variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'badgeDeleteButton'
   },
   slots: {
-    leftIcon: (0, _react2.jsx)(_.Icon, {
+    leftIcon: (0, _react2.jsx)(_index.Icon, {
       icon: HTMLIcon,
       size: 16
     })
@@ -284,16 +284,16 @@ var Default = function Default(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     items: items
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
@@ -309,17 +309,17 @@ var Uncontrolled = function Uncontrolled(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     defaultSelectedKeys: ['Aardvark', 'Snake'],
     items: items
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
@@ -339,11 +339,11 @@ var Controlled = function Controlled(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     label: "Field Label"
   }, args, {
     items: items,
@@ -351,7 +351,7 @@ var Controlled = function Controlled(args) {
     selectedKeys: selectedKeys,
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
@@ -367,17 +367,17 @@ var Error = function Error(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({}, args, {
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({}, args, {
     items: items,
     helperText: "Here is some helpful text...",
     status: "error",
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
@@ -393,17 +393,17 @@ var ReadOnlyField = function ReadOnlyField(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     items: items
   }, args, {
     isReadOnly: true,
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
@@ -419,17 +419,17 @@ var ReadOnlyValues = function ReadOnlyValues(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     readOnlyKeys: ['Aardvark', 'Snake'],
     items: items
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
@@ -445,17 +445,17 @@ var DisabledKeys = function DisabledKeys(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     disabledKeys: ['Aardvark'],
     items: items
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
@@ -471,17 +471,17 @@ var CustomValues = function CustomValues(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     items: items,
     mode: "non-restrictive"
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
@@ -493,7 +493,7 @@ CustomValues.argTypes = {
     defaultValue: 'non-restrictive'
   }
 };
-var IconSlotsInChip = function IconSlotsInChip(args) {
+var IconSlotsInBadge = function IconSlotsInBadge(args) {
   var _useState19 = (0, _react.useState)(false),
     _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
     isOpen = _useState20[0],
@@ -502,22 +502,22 @@ var IconSlotsInChip = function IconSlotsInChip(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.OverlayProvider
+  return (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     items: itemsWithSlots
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);
   }));
 };
-exports.IconSlotsInChip = IconSlotsInChip;
+exports.IconSlotsInBadge = IconSlotsInBadge;
 var CustomSize = function CustomSize(args) {
   var _useState21 = (0, _react.useState)(false),
     _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
@@ -527,24 +527,24 @@ var CustomSize = function CustomSize(args) {
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-  return (0, _react2.jsx)(_.Box, {
+  return (0, _react2.jsx)(_index.Box, {
     sx: {
       width: '100%',
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     width: 300
-  }, (0, _react2.jsx)(_.OverlayProvider
+  }, (0, _react2.jsx)(_index.OverlayProvider
   // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
     items: items
   }, args, {
     onOpenChange: onOpenChange
   }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       "data-id": item.name
     }, item.name);

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -149,7 +149,7 @@ test('multiple selection is enabled, option disappears after selection', functio
   secondOption.click();
   expect(secondOption).not.toBeInTheDocument();
 });
-test('clicking an option renders chip with option name', function () {
+test('clicking an option renders badge with option name', function () {
   getComponent();
   var input = _testWrapper.screen.getByRole('combobox');
   _userEvent["default"].tab();
@@ -158,10 +158,10 @@ test('clicking an option renders chip with option name', function () {
   var firstOption = options[0];
   firstOption.click();
   expect(firstOption).not.toBeInTheDocument();
-  var chip = _testWrapper.screen.getByText(items[0].name);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = _testWrapper.screen.getByText(items[0].name);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
 });
 test('after clicking an option, and then clicking the text input, the listbox remains open', function () {
   getComponent();
@@ -176,7 +176,7 @@ test('after clicking an option, and then clicking the text input, the listbox re
   _userEvent["default"].click(input);
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
 });
-test('no chips are rendered, if nothing is selected', function () {
+test('no badges are rendered, if nothing is selected', function () {
   getComponent({
     isReadOnly: false
   });
@@ -225,11 +225,11 @@ test('clicking on delete button deletes selection, and re-adds option to list',
   var firstOption = options[0];
   firstOption.click();
   expect(firstOption).not.toBeInTheDocument();
-  var chip = _testWrapper.screen.getByText(items[0].name);
-  expect(chip).toBeInTheDocument();
-  var deleteButton = chip.nextSibling;
+  var badge = _testWrapper.screen.getByText(items[0].name);
+  expect(badge).toBeInTheDocument();
+  var deleteButton = badge.nextSibling;
   deleteButton.click();
-  expect(chip).not.toBeInTheDocument();
+  expect(badge).not.toBeInTheDocument();
   input.blur();
   input.focus();
   var updatedOptions = _testWrapper.screen.getAllByRole('option');
@@ -272,7 +272,7 @@ test('changing the input value opens listbox, filters options, and fires "onInpu
   expect(onInputChange).toBeCalledTimes(value.length);
   expect(onInputChange).toHaveBeenCalledWith(value);
 });
-test('in non-restrictive mode, a chip gets added if there is input, onBlur', function () {
+test('in non-restrictive mode, a badge gets added if there is input, onBlur', function () {
   getComponent({
     mode: 'non-restrictive'
   });
@@ -280,13 +280,13 @@ test('in non-restrictive mode, a chip gets added if there is input, onBlur', fun
   var value = 'custom';
   _userEvent["default"].type(input, value);
   _userEvent["default"].tab();
-  var chip = _testWrapper.screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = _testWrapper.screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
   expect(input.value).toBe('');
 });
-test('in non-restrictive mode, a chip gets added if there is only one matching filtered option, onBlur', function () {
+test('in non-restrictive mode, a badge gets added if there is only one matching filtered option, onBlur', function () {
   getComponent({
     mode: 'non-restrictive'
   });
@@ -298,10 +298,10 @@ test('in non-restrictive mode, a chip gets added if there is only one matching f
   var value = 'Aardvark';
   _userEvent["default"].type(input, value);
   _userEvent["default"].tab();
-  var chip = _testWrapper.screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = _testWrapper.screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
   expect(firstOption).not.toBeInTheDocument();
 });
 test('dropdown with options reappears after entering a custom input', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
@@ -354,10 +354,10 @@ test('changing the input value and hitting enter creates new value in non-restri
   expect(input).toHaveValue(value);
   _userEvent["default"].type(input, '{enter}');
   expect(input).toHaveValue('');
-  var chip = _testWrapper.screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = _testWrapper.screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
 });
 test('pressing enter, when the input values is an empty string does not add an option, in non-restrictive mode', function () {
   var onSelectionChange = jest.fn();
@@ -381,8 +381,8 @@ test('in non-restrictive mode "onSelectionChange" returns entered keys', functio
   var value = 'custom';
   _userEvent["default"].type(input, value);
   _userEvent["default"].type(input, '{enter}');
-  var chip = _testWrapper.screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
+  var badge = _testWrapper.screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
   expect(onSelectionChange).toBeCalledTimes(1);
   expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
 });
@@ -396,8 +396,8 @@ test('in non-restrictive mode the same value cannot be applied twice', function
   var value = 'custom';
   _userEvent["default"].type(input, value);
   _userEvent["default"].type(input, '{enter}');
-  var chip = _testWrapper.screen.queryByText(value);
-  expect(chip).toBeInTheDocument();
+  var badge = _testWrapper.screen.queryByText(value);
+  expect(badge).toBeInTheDocument();
   expect(input).toHaveValue('');
   _userEvent["default"].type(input, value);
   _userEvent["default"].type(input, '{enter}');
@@ -455,10 +455,10 @@ test('options can be selected via keyboard', function () {
   expect(options[0]).toHaveClass('is-focused');
   _userEvent["default"].type(options[0], '{enter}');
   expect(options[0]).not.toBeInTheDocument();
-  var chip = _testWrapper.screen.getByText(items[0].name);
-  expect(chip).toBeInTheDocument();
-  var chipContainer = chip.parentElement;
-  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  var badge = _testWrapper.screen.getByText(items[0].name);
+  expect(badge).toBeInTheDocument();
+  var badgeContainer = badge.parentElement;
+  expect(badgeContainer).toHaveAttribute('role', 'presentation');
 });
 test('default selected keys', function () {
   getComponent({
@@ -536,10 +536,10 @@ test('read only field', function () {
   getComponent({
     isReadOnly: isReadOnly
   });
-  var chip = _testWrapper.screen.queryAllByRole('presentation');
-  expect(chip[0]).toHaveAttribute('label', items[0].name);
-  expect(chip[1]).toHaveAttribute('label', items[1].name);
-  expect(chip[2]).toHaveAttribute('label', items[2].name);
+  var badge = _testWrapper.screen.queryAllByRole('presentation');
+  expect(badge[0]).toHaveAttribute('label', items[0].name);
+  expect(badge[1]).toHaveAttribute('label', items[1].name);
+  expect(badge[2]).toHaveAttribute('label', items[2].name);
   var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
   expect(textArea).toHaveClass('is-read-only');
   expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
@@ -550,9 +550,9 @@ test('read only keys with read only field', function () {
     isReadOnly: isReadOnly,
     readOnlyKeys: [items[1].key, items[2].key]
   });
-  var chip = _testWrapper.screen.queryAllByRole('presentation');
-  expect(chip[0]).toHaveAttribute('label', items[1].name);
-  expect(chip[1]).toHaveAttribute('label', items[2].name);
+  var badge = _testWrapper.screen.queryAllByRole('presentation');
+  expect(badge[0]).toHaveAttribute('label', items[1].name);
+  expect(badge[1]).toHaveAttribute('label', items[2].name);
   var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
   expect(textArea).toHaveClass('is-read-only');
   expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();

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

@@ -17,9 +17,11 @@ var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("mdi-react/EmoticonHappyOutlineIcon"));
 var _FingerprintIcon = _interopRequireDefault(require("mdi-react/FingerprintIcon"));
 var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
+var _OpenInNewIcon = _interopRequireDefault(require("mdi-react/OpenInNewIcon"));
 var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIcon"));
 var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
 var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
+var _ViewGridPlusOutlineIcon = _interopRequireDefault(require("mdi-react/ViewGridPlusOutlineIcon"));
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 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); }
@@ -273,6 +275,13 @@ var data = [{
   }, "Sender")]
 }];
 var secondData = [{
+  'data-id': 'da-vinci-data-id',
+  icon: _ViewGridPlusOutlineIcon["default"],
+  key: 'DaVinci',
+  heading: 'DaVinci',
+  customIcon: _OpenInNewIcon["default"],
+  href: 'https://pingidentity.com/'
+}, {
   'data-id': 'mfa-data-id',
   icon: _FingerprintIcon["default"],
   key: 'MFA',
@@ -347,7 +356,8 @@ var thirdData = [{
 }];
 var Default = function Default() {
   return (0, _react2.jsx)(_index.NavBar, null, (0, _react2.jsx)(_index.Box, {
-    padding: "md"
+    padding: "md",
+    key: "top-logo-parent"
   }, (0, _react2.jsx)(_index.Link, {
     "aria-label": "home link",
     href: "https://pingidentity.com",
@@ -357,7 +367,8 @@ var Default = function Default() {
     backgroundColor: "neutral.60"
   }), (0, _react2.jsx)(_index.Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
+    paddingBottom: "xl",
+    key: "first-section-container"
   }, (0, _react2.jsx)(_index.NavBarItem, {
     "data-id": "nav-bar-item",
     icon: _GlobeIcon["default"],

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

@@ -14,10 +14,12 @@ var _AccountMultipleIcon = _interopRequireDefault(require("mdi-react/AccountMult
 var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("mdi-react/EmoticonHappyOutlineIcon"));
 var _FingerprintIcon = _interopRequireDefault(require("mdi-react/FingerprintIcon"));
 var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
+var _OpenInNewIcon = _interopRequireDefault(require("mdi-react/OpenInNewIcon"));
 var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIcon"));
 var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
 var _VerifiedIcon = _interopRequireDefault(require("mdi-react/VerifiedIcon"));
 var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
+var _ViewGridPlusOutlineIcon = _interopRequireDefault(require("mdi-react/ViewGridPlusOutlineIcon"));
 var _index = require("../../index");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
@@ -65,6 +67,13 @@ var data = [{
   children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
 }];
 var secondData = [{
+  'data-id': 'da-vinci-data-id',
+  icon: _ViewGridPlusOutlineIcon["default"],
+  key: 'DaVinci',
+  heading: 'DaVinci',
+  customIcon: _OpenInNewIcon["default"],
+  href: 'https://pingidentity.com/'
+}, {
   icon: _FingerprintIcon["default"],
   key: 'MFA',
   heading: 'MFA',

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

@@ -23,6 +23,16 @@ var _react2 = require("@emotion/react");
 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 NavBarItemHeader = function NavBarItemHeader(props) {
+  var item = props.item;
+  var children = item.children,
+    href = item.href;
+  return !children && href ? (0, _react2.jsx)(NavBarPrimaryItemHeader, {
+    item: item
+  }) : (0, _react2.jsx)(NavBarSectionItemHeader, {
+    item: item
+  });
+};
+var NavBarSectionItemHeader = function NavBarSectionItemHeader(props) {
   var _context;
   var item = props.item;
   var icon = item.icon,
@@ -58,7 +68,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     icon: icon,
     size: "sm",
     sx: {
-      mr: '10px',
+      mr: 'sm',
       color: color,
       fill: color
     },
@@ -81,13 +91,65 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));
 };
+var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref) {
+  var item = _ref.item;
+  var icon = item.icon,
+    className = item.className,
+    heading = item.heading,
+    customIcon = item.customIcon;
+  return (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.itemHeaderContainer",
+    className: className,
+    isRow: true,
+    "data-testid": heading
+  }, icon && (0, _react2.jsx)(_index.Icon, {
+    icon: icon,
+    size: "sm",
+    sx: {
+      mr: 'sm',
+      color: 'neutral.95',
+      fill: 'neutral.95'
+    },
+    "aria-hidden": "true"
+  }), (0, _react2.jsx)(_index.Text, {
+    variant: "navBarHeaderText"
+  }, heading), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, customIcon && (0, _react2.jsx)(_index.Icon, {
+    icon: customIcon,
+    size: "sm",
+    sx: {
+      color: 'neutral.95',
+      fill: 'neutral.95'
+    }
+  })));
+};
 NavBarItemHeader.propTypes = {
+  item: _propTypes["default"].shape({
+    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
+    href: _propTypes["default"].string
+  })
+};
+NavBarSectionItemHeader.propTypes = {
   item: _propTypes["default"].shape({
     heading: _propTypes["default"].string,
     icon: _propTypes["default"].elementType,
     className: _propTypes["default"].string,
     children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
-    key: _propTypes["default"].string
+    key: _propTypes["default"].string,
+    href: _propTypes["default"].string
+  })
+};
+NavBarPrimaryItemHeader.propTypes = {
+  item: _propTypes["default"].shape({
+    heading: _propTypes["default"].string,
+    icon: _propTypes["default"].elementType,
+    className: _propTypes["default"].string,
+    customIcon: _propTypes["default"].elementType
   })
 };
 var _default = NavBarItemHeader;