@pingux/astro 2.191.0-alpha.0 → 2.191.1-alpha.0

package/lib/cjs/components/IconWrapper/IconWrapper.js

@@ -20,6 +20,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _constants = require("../Avatar/constants");
+var _getColorFromUuid = _interopRequireDefault(require("../Avatar/getColorFromUuid"));
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -33,8 +35,19 @@ var IconWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title = props.title,
     className = props.className,
     isCircle = props.isCircle,
+    colorId = props.colorId,
     sx = props.sx;
   var theme = (0, _hooks.useGetTheme)();
+  var safeColorId = colorId || '_INTERNAL_DEFAULT_ID_';
+  if (process.env.NODE_ENV !== 'production') {
+    if (!color && !colorId) {
+      console.warn("[Astro] IconWrapper: No 'color' or 'colorId' provided. " + 'The component is falling back to a default generated color.');
+    }
+  }
+  var finalColor = (0, _react.useMemo)(function () {
+    if (color) return color;
+    return (0, _getColorFromUuid["default"])(safeColorId, _constants.avatarColors);
+  }, [color, safeColorId]);
   var _useTShirtSize = (0, _hooks.useTShirtSize)({
       size: size,
       sizes: theme.iconWrapperSizes
@@ -48,14 +61,14 @@ var IconWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     variant: "iconWrapper.".concat(size),
     sx: _objectSpread({
-      backgroundColor: "iconWrapper.wrapper.".concat(color)
+      backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
     className: classNames
   }, wrapperProps), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: icon,
     size: sizeProps.size,
     title: title,
-    color: "iconWrapper.icon.".concat(color)
+    color: "iconWrapper.icon.".concat(finalColor)
   }, iconProps)));
 });
 var _default = exports["default"] = IconWrapper;

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

@@ -17,7 +17,8 @@ var defaultProps = {
     name: 'earth icon'
   },
   icon: _EarthIcon["default"],
-  size: 'md'
+  size: 'md',
+  colorId: 'test-color-id'
 };
 var getComponent = function getComponent() {
   return (0, _react2.render)((0, _react3.jsx)(_IconWrapper["default"], (0, _extends2["default"])({}, defaultProps, {

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

@@ -385,15 +385,13 @@ var InfiniteLoadingList = exports.InfiniteLoadingList = function InfiniteLoading
     return (0, _react2.jsx)(_2.Item, {
       key: item.name
     }, (0, _react2.jsx)(_2.ListViewItem, {
+      id: item.name,
       data: {
         text: item.name,
         icon: _FormSelectIcon["default"]
       },
       iconProps: {
         color: 'text.secondary'
-      },
-      iconWrapperProps: {
-        color: 'cyan'
       }
     }, (0, _react2.jsx)(Controls, null)));
   }));

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -69,7 +69,7 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     },
     isCircle: true,
-    color: "white"
+    colorId: others.id
   }, iconWrapperProps)) : (0, _react2.jsx)(_.Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"

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

@@ -9,6 +9,7 @@ export interface IconWrapperProps extends StyleProps {
     size: string;
     className?: string;
     isCircle?: boolean;
+    colorId?: string | null;
     title?: {
         name: string;
         id?: string;

package/lib/components/IconWrapper/IconWrapper.js

@@ -10,9 +10,11 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { useGetTheme, useStatusClasses, useTShirtSize } from '../../hooks';
 import { Box, Icon } from '../../index';
+import { avatarColors } from '../Avatar/constants';
+import getColorFromUUID from '../Avatar/getColorFromUuid';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
@@ -23,8 +25,19 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     title = props.title,
     className = props.className,
     isCircle = props.isCircle,
+    colorId = props.colorId,
     sx = props.sx;
   var theme = useGetTheme();
+  var safeColorId = colorId || '_INTERNAL_DEFAULT_ID_';
+  if (process.env.NODE_ENV !== 'production') {
+    if (!color && !colorId) {
+      console.warn("[Astro] IconWrapper: No 'color' or 'colorId' provided. " + 'The component is falling back to a default generated color.');
+    }
+  }
+  var finalColor = useMemo(function () {
+    if (color) return color;
+    return getColorFromUUID(safeColorId, avatarColors);
+  }, [color, safeColorId]);
   var _useTShirtSize = useTShirtSize({
       size: size,
       sizes: theme.iconWrapperSizes
@@ -38,14 +51,14 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     variant: "iconWrapper.".concat(size),
     sx: _objectSpread({
-      backgroundColor: "iconWrapper.wrapper.".concat(color)
+      backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
     className: classNames
   }, wrapperProps), ___EmotionJSX(Icon, _extends({
     icon: icon,
     size: sizeProps.size,
     title: title,
-    color: "iconWrapper.icon.".concat(color)
+    color: "iconWrapper.icon.".concat(finalColor)
   }, iconProps)));
 });
 export default IconWrapper;

package/lib/components/IconWrapper/IconWrapper.test.js

@@ -14,7 +14,8 @@ var defaultProps = {
     name: 'earth icon'
   },
   icon: Earth,
-  size: 'md'
+  size: 'md',
+  colorId: 'test-color-id'
 };
 var getComponent = function getComponent() {
   return render(___EmotionJSX(IconWrapper, _extends({}, defaultProps, {

package/lib/components/ListView/ListView.stories.js

@@ -375,15 +375,13 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
     return ___EmotionJSX(Item, {
       key: item.name
     }, ___EmotionJSX(ListViewItem, {
+      id: item.name,
       data: {
         text: item.name,
         icon: FormSelectIcon
       },
       iconProps: {
         color: 'text.secondary'
-      },
-      iconWrapperProps: {
-        color: 'cyan'
       }
     }, ___EmotionJSX(Controls, null)));
   }));

package/lib/components/ListViewItem/ListViewItem.js

@@ -57,7 +57,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     },
     isCircle: true,
-    color: "white"
+    colorId: others.id
   }, iconWrapperProps)) : ___EmotionJSX(Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"

package/package.json

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