@pingux/astro 2.127.0 → 2.128.0-alpha.1

package/lib/cjs/components/Callout/Callout.js

@@ -17,7 +17,7 @@ var _ = require("../..");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _NoticeIcon = require("../Icon/NoticeIcon");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "status"];
+var _excluded = ["children", "status", "icon"];
 var _calloutProps;
 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; }
@@ -52,6 +52,7 @@ var Callout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? _statuses["default"].DEFAULT : _ref$status,
+    icon = _ref.icon,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
@@ -59,7 +60,7 @@ var Callout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isRow: true,
     role: "note",
     variant: calloutProps[status].variant
-  }, others), (0, _react2.jsx)(_NoticeIcon.NoticeIcon, (0, _extends2["default"])({
+  }, others), icon || (0, _react2.jsx)(_NoticeIcon.NoticeIcon, (0, _extends2["default"])({
     color: calloutProps[status].color,
     status: status,
     "aria-label": "".concat(status, "-icon")

package/lib/cjs/components/Callout/Callout.stories.d.ts

@@ -16,3 +16,4 @@ export declare const WithLink: {
     };
 };
 export declare const Warning: StoryFn;
+export declare const WithCustomIcon: StoryFn;

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

@@ -12,9 +12,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLink = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
+exports["default"] = exports.WithLink = exports.WithCustomIcon = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _CheckBoldIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckBoldIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -105,4 +106,22 @@ Warning.parameters = {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.callout.warning
   }
-};
+};
+var WithCustomIcon = function WithCustomIcon() {
+  return (0, _react2.jsx)(_index.Callout, {
+    icon: (0, _react2.jsx)(_index.Box, {
+      variant: "stepper.step.completed",
+      mx: "md",
+      minHeight: 25,
+      minWidth: 25,
+      height: 25,
+      width: 25
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _CheckBoldIcon["default"],
+      title: {
+        name: 'Check Circle Outline Icon'
+      }
+    }))
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+};
+exports.WithCustomIcon = WithCustomIcon;

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

@@ -7,7 +7,9 @@ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-s
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _CheckBoldIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckBoldIcon"));
 var _react2 = require("@testing-library/react");
+var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
@@ -55,4 +57,15 @@ describe('Callout', function () {
     });
     _react2.screen.getByTestId(icon);
   });
+  test('renders custom icon', function () {
+    var customIcon = (0, _react3.jsx)(_index.Icon, {
+      icon: _CheckBoldIcon["default"],
+      size: 14,
+      "data-testid": "iconId"
+    });
+    getComponent({
+      icon: customIcon
+    });
+    expect(_react2.screen.getByTestId('iconId')).toBeInTheDocument();
+  });
 });

package/lib/cjs/components/Tab/Tab.js

@@ -71,8 +71,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), {
     ref: tabRef
   }, itemProps, {
-    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
-    "data-testid": "test-me"
+    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue
   }), (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     variant: "tabLabel"
   }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);

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

@@ -238,7 +238,8 @@ var CustomPanelProps = function CustomPanelProps() {
   }, function (item) {
     return (0, _react2.jsx)(_index.Tab, {
       key: item.name,
-      title: item.name
+      title: item.name,
+      "data-testid": "testing-".concat(item.name)
     }, item.children);
   });
 };

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

@@ -93,7 +93,9 @@ var getComponent = function getComponent() {
     return (0, _react2.jsx)(_Tab["default"], (0, _extends2["default"])({
       key: name,
       title: name
-    }, tabProps), children);
+    }, tabProps, {
+      "data-testid": "testing-".concat(name)
+    }), children);
   }))
   // </CacheProvider>
   );
@@ -523,7 +525,7 @@ test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/(0, _asyn
         // fireEvent.mouseMove(tab1);
         // fireEvent.mouseEnter(tab1);
         // await userEvent.hover(tab1);
-        test = _testWrapper.screen.getAllByTestId('test-me')[1];
+        test = _testWrapper.screen.getByTestId('testing-Tab 2');
         _testWrapper.fireEvent.mouseMove(test);
         _testWrapper.fireEvent.mouseEnter(test);
         _context9.next = 7;

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

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import { Status } from './item';
 import { DOMAttributes, StyleProps } from './shared';
 export interface CalloutProps extends StyleProps, DOMAttributes {
     status?: Status;
+    icon?: React.ReactNode;
 }

package/lib/components/Callout/Callout.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _excluded = ["children", "status"];
+var _excluded = ["children", "status", "icon"];
 var _calloutProps;
 import React, { forwardRef } from 'react';
 import { Box } from '../..';
@@ -38,6 +38,7 @@ var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? statuses.DEFAULT : _ref$status,
+    icon = _ref.icon,
     others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
@@ -45,7 +46,7 @@ var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isRow: true,
     role: "note",
     variant: calloutProps[status].variant
-  }, others), ___EmotionJSX(NoticeIcon, _extends({
+  }, others), icon || ___EmotionJSX(NoticeIcon, _extends({
     color: calloutProps[status].color,
     status: status,
     "aria-label": "".concat(status, "-icon")

package/lib/components/Callout/Callout.stories.js

@@ -10,9 +10,10 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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) { _defineProperty(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; }
 import React from 'react';
+import CheckBoldIcon from '@pingux/mdi-react/CheckBoldIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Callout, Link, Text } from '../../index';
+import { Box, Callout, Icon, Link, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { statusArgTypes } from '../../utils/docUtils/statusProp';
@@ -94,4 +95,21 @@ Warning.parameters = {
     type: 'figma',
     url: FIGMA_LINKS.callout.warning
   }
+};
+export var WithCustomIcon = function WithCustomIcon() {
+  return ___EmotionJSX(Callout, {
+    icon: ___EmotionJSX(Box, {
+      variant: "stepper.step.completed",
+      mx: "md",
+      minHeight: 25,
+      minWidth: 25,
+      height: 25,
+      width: 25
+    }, ___EmotionJSX(Icon, {
+      icon: CheckBoldIcon,
+      title: {
+        name: 'Check Circle Outline Icon'
+      }
+    }))
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
 };

package/lib/components/Callout/Callout.test.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _testColors;
 import React from 'react';
+import CheckBoldIcon from '@pingux/mdi-react/CheckBoldIcon';
 import { screen } from '@testing-library/react';
+import { Icon } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { render } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -46,4 +48,15 @@ describe('Callout', function () {
     });
     screen.getByTestId(icon);
   });
+  test('renders custom icon', function () {
+    var customIcon = ___EmotionJSX(Icon, {
+      icon: CheckBoldIcon,
+      size: 14,
+      "data-testid": "iconId"
+    });
+    getComponent({
+      icon: customIcon
+    });
+    expect(screen.getByTestId('iconId')).toBeInTheDocument();
+  });
 });

package/lib/components/Tab/Tab.js

@@ -58,8 +58,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), {
     ref: tabRef
   }, itemProps, {
-    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
-    "data-testid": "test-me"
+    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue
   }), ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, ___EmotionJSX(Text, _extends({
     variant: "tabLabel"
   }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered), isSelected && !isDisabled && ___EmotionJSX(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);

package/lib/components/Tabs/Tabs.stories.js

@@ -216,7 +216,8 @@ export var CustomPanelProps = function CustomPanelProps() {
   }, function (item) {
     return ___EmotionJSX(Tab, {
       key: item.name,
-      title: item.name
+      title: item.name,
+      "data-testid": "testing-".concat(item.name)
     }, item.children);
   });
 };

package/lib/components/Tabs/Tabs.test.js

@@ -92,7 +92,9 @@ var getComponent = function getComponent() {
     return ___EmotionJSX(Tab, _extends({
       key: name,
       title: name
-    }, tabProps), children);
+    }, tabProps, {
+      "data-testid": "testing-".concat(name)
+    }), children);
   }))
   // </CacheProvider>
   );
@@ -522,7 +524,7 @@ test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/_asyncToG
         // fireEvent.mouseMove(tab1);
         // fireEvent.mouseEnter(tab1);
         // await userEvent.hover(tab1);
-        test = screen.getAllByTestId('test-me')[1];
+        test = screen.getByTestId('testing-Tab 2');
         fireEvent.mouseMove(test);
         fireEvent.mouseEnter(test);
         _context9.next = 7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.127.0",
+  "version": "2.128.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",