@pingux/astro 1.34.0-alpha.3 → 1.35.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.34.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.33.1...@pingux/astro@1.34.0) (2022-11-03)
+
+
+### Bug Fixes
+
+* [UIP-5830] Prevent form submitting when adding custom value to MultivalueField on enter press ([71dee3c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/71dee3cd85c3b49e9dd199f07fc55d0212bff50b))
+
+
+### Features
+
+* [UIP-5702] Icon & IconButton - Adding tshirt sizing, sizing story, and commonly used story ([51a3677](https://gitlab.corp.pingidentity.com/ux/pingux/commit/51a367710a739f0576e36179fbdea7ae736b2f32))
+
+
+
+
+
 ## [1.33.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.33.0...@pingux/astro@1.33.1) (2022-11-01)
 
 

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

@@ -257,9 +257,9 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Box, {
     padding: "md"
   }, (0, _react2.jsx)(_index.Link, {
+    "aria-label": "home link",
     href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "home link"
+    target: "_blank"
   }, logo)), (0, _react2.jsx)(_index.Separator, {
     marginTop: "lg",
     marginBottom: "0px",
@@ -268,19 +268,23 @@ var Default = function Default() {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl"
   }, (0, _react2.jsx)(_index.NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: _GlobeIcon["default"],
     id: "Overview",
     key: "Overview",
-    text: "Overview",
-    icon: _GlobeIcon["default"]
+    text: "Overview"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
-    hasSeparator: true
+    hasSeparator: true,
+    "data-id": "nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,
     hasSeparator: true,
-    title: "PingOne Services"
+    title: "PingOne Services",
+    "data-id": "second-nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
-    items: thirdData
+    items: thirdData,
+    "data-id": "third-nav-bar-section"
   })));
 };
 

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

@@ -34,6 +34,7 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
+var DATA_ID = 'data-id';
 var data = [{
   icon: _GlobeIcon["default"],
   key: 'Overview',
@@ -98,7 +99,9 @@ var getComponent = function getComponent() {
     }
   }, (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
-    hasSeparator: true
+    hasSeparator: true,
+    "data-testid": DATA_ID,
+    "data-id": DATA_ID
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,
     title: "test_title"
@@ -111,7 +114,7 @@ var getComponent = function getComponent() {
   }))));
 };
 
-var getComponentWithMultipleChildrens = function getComponentWithMultipleChildrens() {
+var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
     href: "https://pingidentity.com",
@@ -134,25 +137,16 @@ var clickHeaderButtons = function clickHeaderButtons() {
 (0, _testAxe["default"])(getComponent);
 test('should render basic nav with children', function () {
   getComponent();
-
-  var nav = _testWrapper.screen.queryByRole('navigation');
-
-  expect(nav).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('navigation')).toBeInTheDocument();
 });
 test('should render title for sections that have titles', function () {
   getComponent();
-
-  var title = _testWrapper.screen.getByText('test_title');
-
-  expect(title).toBeInTheDocument();
+  expect(_testWrapper.screen.getByText('test_title')).toBeInTheDocument();
 });
 test('should render title for itemBodies that have subTitles', function () {
   getComponent();
   clickHeaderButtons();
-
-  var subTitle = _testWrapper.screen.getByText('PingOne Services');
-
-  expect(subTitle).toBeInTheDocument();
+  expect(_testWrapper.screen.getByText('PingOne Services')).toBeInTheDocument();
 });
 test('should select NavItemLink', function () {
   getComponent();
@@ -307,15 +301,12 @@ test('should not change focus from NavItemBody to NavBarItemHeader on arrow key
 
   expect(_testWrapper.screen.getByTestId('navItemLink')).toHaveClass('is-focused');
 });
-test('should render nav with multiple childrens', function () {
-  getComponentWithMultipleChildrens();
-
-  var nav = _testWrapper.screen.queryByRole('navigation');
-
-  expect(nav).toBeInTheDocument();
+test('should render nav with multiple children', function () {
+  getComponentWithMultipleChildren();
+  expect(_testWrapper.screen.queryByRole('navigation')).toBeInTheDocument();
 });
-test('should change focus between nav childrens on arrow key press', function () {
-  getComponentWithMultipleChildrens();
+test('should change focus between nav children on arrow key press', function () {
+  getComponentWithMultipleChildren();
 
   var link = _testWrapper.screen.getByTestId('navLink');
 
@@ -366,4 +357,8 @@ test('should change focus between nav childrens on arrow key press', function ()
   });
 
   expect(link).toHaveClass('is-focused');
+});
+test('should render NavBarSection with data-id', function () {
+  getComponent();
+  expect(_testWrapper.screen.getByTestId(DATA_ID)).toHaveAttribute(DATA_ID);
 });

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

@@ -16,32 +16,36 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _focus = require("@react-aria/focus");
 
 var _interactions = require("@react-aria/interactions");
 
-var _index = require("../../index");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("../../");
+
+var _NavBarContext = require("../../context/NavBarContext");
 
 var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
 
 var _NavBarItemHeader = _interopRequireDefault(require("./NavBarItemHeader"));
 
-var _NavBarContext = require("../../context/NavBarContext");
-
 var _react2 = require("@emotion/react");
 
+var _excluded = ["hasSeparator", "title", "items"];
+
 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; }
@@ -51,31 +55,32 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * with title, and separator options.
  *
  */
-var NavBarSection = function NavBarSection(props) {
-  var hasSeparator = props.hasSeparator,
-      title = props.title,
-      items = props.items;
+var NavBarSection = function NavBarSection(_ref) {
+  var hasSeparator = _ref.hasSeparator,
+      title = _ref.title,
+      items = _ref.items,
+      others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var ref = (0, _react.useRef)();
   var childrenItems = (0, _filter["default"])(items).call(items, function (i) {
     return i.children;
   });
-  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_index.Text, {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_.Text, {
     variant: "text.navBarSubtitle"
-  }, title), (0, _react2.jsx)("ul", {
+  }, title), (0, _react2.jsx)("ul", (0, _extends2["default"])({
     ref: ref,
     style: {
       margin: 0,
       padding: 0,
       listStyle: 'none'
     }
-  }, (0, _map["default"])(childrenItems).call(childrenItems, function (item) {
+  }, others), (0, _map["default"])(childrenItems).call(childrenItems, function (item) {
     return (0, _react2.jsx)("li", {
       key: item.key
     }, (0, _react2.jsx)(SectionItem, {
       key: item.key,
       item: item
     }));
-  })), hasSeparator && (0, _react2.jsx)(_index.Box, {
+  })), hasSeparator && (0, _react2.jsx)(_.Box, {
     sx: {
       pl: '15px',
       pr: '15px',
@@ -83,13 +88,13 @@ var NavBarSection = function NavBarSection(props) {
       mt: '15px',
       mb: '15px'
     }
-  }, (0, _react2.jsx)(_index.Separator, {
+  }, (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSeparator"
   })));
 };
 
-var SectionItem = function SectionItem(_ref) {
-  var item = _ref.item;
+var SectionItem = function SectionItem(_ref2) {
+  var item = _ref2.item;
   var key = item.key,
       children = item.children;
   var headerButtonRef = (0, _react.useRef)();
@@ -160,7 +165,7 @@ var SectionItem = function SectionItem(_ref) {
   }),
       keyboardProps = _useKeyboard.keyboardProps;
 
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     ref: headerButtonRef,
     variant: "navBarSectionButton",
     onPress: function onPress() {

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

@@ -232,9 +232,9 @@ export var Default = function Default() {
   }, ___EmotionJSX(Box, {
     padding: "md"
   }, ___EmotionJSX(Link, {
+    "aria-label": "home link",
     href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "home link"
+    target: "_blank"
   }, logo)), ___EmotionJSX(Separator, {
     marginTop: "lg",
     marginBottom: "0px",
@@ -243,18 +243,22 @@ export var Default = function Default() {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl"
   }, ___EmotionJSX(NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: GlobeIcon,
     id: "Overview",
     key: "Overview",
-    text: "Overview",
-    icon: GlobeIcon
+    text: "Overview"
   }), ___EmotionJSX(NavBarSection, {
     items: data,
-    hasSeparator: true
+    hasSeparator: true,
+    "data-id": "nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
     hasSeparator: true,
-    title: "PingOne Services"
+    title: "PingOne Services",
+    "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
-    items: thirdData
+    items: thirdData,
+    "data-id": "third-nav-bar-section"
   })));
 };

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

@@ -14,6 +14,7 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
 import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var DATA_ID = 'data-id';
 var data = [{
   icon: GlobeIcon,
   key: 'Overview',
@@ -78,7 +79,9 @@ var getComponent = function getComponent() {
     }
   }, ___EmotionJSX(NavBarSection, {
     items: data,
-    hasSeparator: true
+    hasSeparator: true,
+    "data-testid": DATA_ID,
+    "data-id": DATA_ID
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
     title: "test_title"
@@ -91,7 +94,7 @@ var getComponent = function getComponent() {
   }))));
 };
 
-var getComponentWithMultipleChildrens = function getComponentWithMultipleChildrens() {
+var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
@@ -114,19 +117,16 @@ var clickHeaderButtons = function clickHeaderButtons() {
 axeTest(getComponent);
 test('should render basic nav with children', function () {
   getComponent();
-  var nav = screen.queryByRole('navigation');
-  expect(nav).toBeInTheDocument();
+  expect(screen.queryByRole('navigation')).toBeInTheDocument();
 });
 test('should render title for sections that have titles', function () {
   getComponent();
-  var title = screen.getByText('test_title');
-  expect(title).toBeInTheDocument();
+  expect(screen.getByText('test_title')).toBeInTheDocument();
 });
 test('should render title for itemBodies that have subTitles', function () {
   getComponent();
   clickHeaderButtons();
-  var subTitle = screen.getByText('PingOne Services');
-  expect(subTitle).toBeInTheDocument();
+  expect(screen.getByText('PingOne Services')).toBeInTheDocument();
 });
 test('should select NavItemLink', function () {
   getComponent();
@@ -243,13 +243,12 @@ test('should not change focus from NavItemBody to NavBarItemHeader on arrow key
   });
   expect(screen.getByTestId('navItemLink')).toHaveClass('is-focused');
 });
-test('should render nav with multiple childrens', function () {
-  getComponentWithMultipleChildrens();
-  var nav = screen.queryByRole('navigation');
-  expect(nav).toBeInTheDocument();
+test('should render nav with multiple children', function () {
+  getComponentWithMultipleChildren();
+  expect(screen.queryByRole('navigation')).toBeInTheDocument();
 });
-test('should change focus between nav childrens on arrow key press', function () {
-  getComponentWithMultipleChildrens();
+test('should change focus between nav children on arrow key press', function () {
+  getComponentWithMultipleChildren();
   var link = screen.getByTestId('navLink');
   var button = screen.getByTestId('navButton');
   expect(link).toBeInTheDocument();
@@ -285,4 +284,8 @@ test('should change focus between nav childrens on arrow key press', function ()
     keyCode: 32
   });
   expect(link).toHaveClass('is-focused');
+});
+test('should render NavBarSection with data-id', function () {
+  getComponent();
+  expect(screen.getByTestId(DATA_ID)).toHaveAttribute(DATA_ID);
 });

package/lib/components/NavBarSection/NavBarSection.js

@@ -1,15 +1,17 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["hasSeparator", "title", "items"];
 import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
 import { useFocusManager } from '@react-aria/focus';
 import { useKeyboard } from '@react-aria/interactions';
-import { Separator, Text, Box, Button } from '../../index';
+import PropTypes from 'prop-types';
+import { Box, Button, Separator, Text } from '../../';
+import { useNavBarContext } from '../../context/NavBarContext';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
-import { useNavBarContext } from '../../context/NavBarContext';
 /**
  * Composed component that creates a group
  * with title, and separator options.
@@ -18,10 +20,12 @@ import { useNavBarContext } from '../../context/NavBarContext';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var NavBarSection = function NavBarSection(props) {
-  var hasSeparator = props.hasSeparator,
-      title = props.title,
-      items = props.items;
+var NavBarSection = function NavBarSection(_ref) {
+  var hasSeparator = _ref.hasSeparator,
+      title = _ref.title,
+      items = _ref.items,
+      others = _objectWithoutProperties(_ref, _excluded);
+
   var ref = useRef();
 
   var childrenItems = _filterInstanceProperty(items).call(items, function (i) {
@@ -30,14 +34,14 @@ var NavBarSection = function NavBarSection(props) {
 
   return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {
     variant: "text.navBarSubtitle"
-  }, title), ___EmotionJSX("ul", {
+  }, title), ___EmotionJSX("ul", _extends({
     ref: ref,
     style: {
       margin: 0,
       padding: 0,
       listStyle: 'none'
     }
-  }, _mapInstanceProperty(childrenItems).call(childrenItems, function (item) {
+  }, others), _mapInstanceProperty(childrenItems).call(childrenItems, function (item) {
     return ___EmotionJSX("li", {
       key: item.key
     }, ___EmotionJSX(SectionItem, {
@@ -57,8 +61,8 @@ var NavBarSection = function NavBarSection(props) {
   })));
 };
 
-var SectionItem = function SectionItem(_ref) {
-  var item = _ref.item;
+var SectionItem = function SectionItem(_ref2) {
+  var item = _ref2.item;
   var key = item.key,
       children = item.children;
   var headerButtonRef = useRef();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.34.0-alpha.3",
+  "version": "1.35.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",