@occmundial/occ-atomic 3.0.0-beta.3 → 3.0.0-beta.31

package/CHANGELOG.md

@@ -1,3 +1,264 @@
+# [3.0.0-beta.31](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.30...v3.0.0-beta.31) (2024-07-16)
+
+
+### Bug Fixes
+
+* Change styles and behavior of the Pager component ([5e65e50](https://github.com/occmundial/occ-atomic/commit/5e65e505f31f77425d5de127ae4c83b007a88d5a))
+* Fix styles of button with only an icon on the right ([f77f44e](https://github.com/occmundial/occ-atomic/commit/f77f44e7d0b7c40ec0bd388712acfdcde1a45489))
+
+
+### BREAKING CHANGES
+
+* Rename Pager's prop names.
+The logic and behavior of the Pager has changed too, now is the parent component the responsible for handling the page number, the Pager is only a modifier and no longer has an internal state and management of the current page.
+
+# [3.0.0-beta.30](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.29...v3.0.0-beta.30) (2024-07-16)
+
+
+### Bug Fixes
+
+* Remove unnecesary bp props in grid col ([97e839a](https://github.com/occmundial/occ-atomic/commit/97e839aa4621fcbb964615167165132628b646c3))
+* Remove unnecesary margins and set auto ([96d016a](https://github.com/occmundial/occ-atomic/commit/96d016a6f3f461f5b44cbd299d8c135dc846561c))
+
+
+### Features
+
+* Update grid with new design tokens ([0fd904d](https://github.com/occmundial/occ-atomic/commit/0fd904d044323108a1e573a93e7e1a6dea99d0ef))
+
+# [3.0.0-beta.29](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.28...v3.0.0-beta.29) (2024-07-09)
+
+
+### Bug Fixes
+
+* Remove extra padding in label ([efda99e](https://github.com/occmundial/occ-atomic/commit/efda99e0fca815e6f60c7277da52b41dfcd21e72))
+
+# [3.0.0-beta.28](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.27...v3.0.0-beta.28) (2024-07-08)
+
+
+### Bug Fixes
+
+* Add hover transition styles to link toaster ([dcb67ab](https://github.com/occmundial/occ-atomic/commit/dcb67aba17e6f669d5554f397c516aca687ebc53))
+* Move css to flexbox props ([cedb764](https://github.com/occmundial/occ-atomic/commit/cedb7644bdc88a19ca385e4a0d8902f19900eaf0))
+
+# [3.0.0-beta.27](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.26...v3.0.0-beta.27) (2024-07-08)
+
+
+### Bug Fixes
+
+* CHanged outlines with shadows ([bba0c01](https://github.com/occmundial/occ-atomic/commit/bba0c01a54a13b1b405c2405eb1ab764cc1ab367))
+
+
+### Features
+
+*  Changed tag border to outline ([89ccbaf](https://github.com/occmundial/occ-atomic/commit/89ccbaf7f1d0c183940cfb3ef2fb8f270928aedf))
+
+# [3.0.0-beta.26](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.25...v3.0.0-beta.26) (2024-07-05)
+
+
+### Bug Fixes
+
+* Align title if not description ([ef6a12a](https://github.com/occmundial/occ-atomic/commit/ef6a12a1dba3d5440220cfe2798801d7d08c441c))
+
+# [3.0.0-beta.25](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.24...v3.0.0-beta.25) (2024-07-03)
+
+
+### Bug Fixes
+
+* Add hover styles to alert link action ([1e7efde](https://github.com/occmundial/occ-atomic/commit/1e7efde311085677f43c5057769d406c88d13c33))
+* Move hover styles to cta classname ([b457e9b](https://github.com/occmundial/occ-atomic/commit/b457e9b639627361ee4b272dc64663457d67a60f))
+
+# [3.0.0-beta.24](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.23...v3.0.0-beta.24) (2024-06-28)
+
+
+### Bug Fixes
+
+* Handle key press on Avatar ([5821f9a](https://github.com/occmundial/occ-atomic/commit/5821f9ab94ee67af5a6ceebfe587dfa23656a9be))
+* Update structure and styles of Avatar ([ed5ad44](https://github.com/occmundial/occ-atomic/commit/ed5ad44f42e8e2665f6b1e59db149fc27b8842f4))
+
+# [3.0.0-beta.23](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.22...v3.0.0-beta.23) (2024-06-27)
+
+
+### Bug Fixes
+
+* Align vertical centered tip and banner text ([032a704](https://github.com/occmundial/occ-atomic/commit/032a704707562dab93707a3c31aa1b26dc6be0dd))
+
+# [3.0.0-beta.22](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.21...v3.0.0-beta.22) (2024-06-26)
+
+
+### Features
+
+* Tag compnent and documentation updated ([718378f](https://github.com/occmundial/occ-atomic/commit/718378ffd916c98673a3b10f7b9ba827d806aa1c))
+
+# [3.0.0-beta.21](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.20...v3.0.0-beta.21) (2024-06-25)
+
+
+### Bug Fixes
+
+* Add outline border and merge with beta ([a212aa3](https://github.com/occmundial/occ-atomic/commit/a212aa3f87471092a246925e79a9d787535b13ba))
+* Resolve conflicts ([99b08cb](https://github.com/occmundial/occ-atomic/commit/99b08cb290979fa7f1aad3dd2c04f65b1b494559))
+* Resolve conflicts ([81776b7](https://github.com/occmundial/occ-atomic/commit/81776b701b168e66a1f1dfa7b785227b40a76dc9))
+* Set md size for tip close icon ([759e6d1](https://github.com/occmundial/occ-atomic/commit/759e6d10842e2c55cf81d2aff57f60479e3a3395))
+* Set min width for desktop and conditionated on mouse events ([98857fd](https://github.com/occmundial/occ-atomic/commit/98857fd313d247e618c64dbbaacea93c6ab084ae))
+
+
+### Features
+
+* Add close icon prop and conditionated onclose func ([e456d38](https://github.com/occmundial/occ-atomic/commit/e456d384a82d4b6105e27bb36d693b43d5608c1c))
+* Update toaster with new design tokens ([88edaa8](https://github.com/occmundial/occ-atomic/commit/88edaa8fe5c3c04bc9f634f6a287c1614c893d15))
+
+# [3.0.0-beta.20](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.19...v3.0.0-beta.20) (2024-06-25)
+
+
+### Bug Fixes
+
+* Add condition to set test id prop ([4e90cea](https://github.com/occmundial/occ-atomic/commit/4e90cea0a6f5c627c8b2a398a9aef449fa3e1b7c))
+* Adjust tip styles and add banner prop ([04d17ff](https://github.com/occmundial/occ-atomic/commit/04d17ff0fe74186da32d15f91001406344867bb4))
+* Merge beta changes ([218b68a](https://github.com/occmundial/occ-atomic/commit/218b68a7347b025dc2cdd8171f7d4c22bbd383f1))
+* Resolve component data conflicts ([c390f1f](https://github.com/occmundial/occ-atomic/commit/c390f1f485415dc15251386527c0caaa70e9814f))
+
+
+### Features
+
+* Add test id prop and add new tests ([aba7d32](https://github.com/occmundial/occ-atomic/commit/aba7d3215e0b19e635b53546f66accd327ebed42))
+
+# [3.0.0-beta.19](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2024-06-21)
+
+
+### Bug Fixes
+
+* Prevent default to avoid scroll on key down ([9ee17d2](https://github.com/occmundial/occ-atomic/commit/9ee17d2a247a02a7be7e1c743669c8833d3f5748))
+
+# [3.0.0-beta.18](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2024-06-21)
+
+
+### Bug Fixes
+
+* Replace onKeyDown for onKeyUp ([e574e9c](https://github.com/occmundial/occ-atomic/commit/e574e9c42f7a55723794269ede7a4f58dd899e58))
+
+# [3.0.0-beta.17](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2024-06-19)
+
+
+### Bug Fixes
+
+* Change icon size and adjust margin ([0411455](https://github.com/occmundial/occ-atomic/commit/041145590cd765e5b81937f07ef676d2fc5e8826))
+* Remove selector not active for focus visible ([dbec333](https://github.com/occmundial/occ-atomic/commit/dbec33316a94826d2007a044b634f944ffe01715))
+
+# [3.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.15...v3.0.0-beta.16) (2024-06-19)
+
+
+### Bug Fixes
+
+* Change focus behavior in form components ([a3b6c9b](https://github.com/occmundial/occ-atomic/commit/a3b6c9b5194b1d8302a6f73bb5522df9e6a756fc))
+* Changes to structure and styles of Checkbox ([6ed54c0](https://github.com/occmundial/occ-atomic/commit/6ed54c0a5ebae0542431b8305d0da8a052c2d3fb))
+* Changes to structure and styles of Radio ([694c995](https://github.com/occmundial/occ-atomic/commit/694c9950a4c6c43a5bd7987536a293835860421e))
+* Changes to structure and styles of SlideToggle ([5ec340f](https://github.com/occmundial/occ-atomic/commit/5ec340f0cc09b04d032ebb888034a92cf71f2f8a))
+* Fix focus styles in form components ([e69d45b](https://github.com/occmundial/occ-atomic/commit/e69d45b84c3e35a433f37feb7c9b0012137bc2bb))
+* Fix spacing and sizing of radio, checkbox and toggle ([b3a71c2](https://github.com/occmundial/occ-atomic/commit/b3a71c2e30e2b810036104a4ee57b6b805d2780c))
+* Fix styles and icon color on Checkbox ([1c4e360](https://github.com/occmundial/occ-atomic/commit/1c4e360ec0d3291048d14f4ccd3859d0bdbc2817))
+* Fix transition value in SlideToggle ([8423fc6](https://github.com/occmundial/occ-atomic/commit/8423fc6b9eea3219ed052add95f27ef4d181f5b5))
+* Update componentData ([ff7c0bd](https://github.com/occmundial/occ-atomic/commit/ff7c0bd47ed55d652b01ace7526867d751a6e1c7))
+
+# [3.0.0-beta.15](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2024-06-18)
+
+
+### Bug Fixes
+
+* Centered select icon and set cursor pointer for select box ([05fa3f1](https://github.com/occmundial/occ-atomic/commit/05fa3f1ca0efdf7e2b75c468eb23279aafbc58ce))
+* Remove class condition ([59ef135](https://github.com/occmundial/occ-atomic/commit/59ef1353213a9df3737d59c13385254767c41372))
+
+# [3.0.0-beta.14](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2024-06-13)
+
+
+### Bug Fixes
+
+* Fix toggle background on focus when hovered ([8c35f96](https://github.com/occmundial/occ-atomic/commit/8c35f96b77fdb3d1692d864159561842a3213bba))
+
+# [3.0.0-beta.13](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2024-06-13)
+
+
+### Bug Fixes
+
+* Add form nav behavior to SwitchToggle ([e1e74ed](https://github.com/occmundial/occ-atomic/commit/e1e74edf8306250d0ae7a723b758c9426593c295))
+
+# [3.0.0-beta.12](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.11...v3.0.0-beta.12) (2024-06-07)
+
+
+### Bug Fixes
+
+* Add form nav behavior to checkbox ([6b2c664](https://github.com/occmundial/occ-atomic/commit/6b2c664e165bb4617dc53874be69bb9d8c8e6bc3))
+
+# [3.0.0-beta.11](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2024-06-07)
+
+
+### Bug Fixes
+
+* Call hoc window size and improve tip text use memo ([840e108](https://github.com/occmundial/occ-atomic/commit/840e1089cb3e80c6b2d2686c56b577166f6bc66f))
+* Resolve conflicts ([23e9ba8](https://github.com/occmundial/occ-atomic/commit/23e9ba8008ffe55e8af6910394580123032aee0e))
+
+# [3.0.0-beta.10](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.9...v3.0.0-beta.10) (2024-06-06)
+
+
+### Features
+
+* Checkbox redesigned and documentation created ([48fbc8d](https://github.com/occmundial/occ-atomic/commit/48fbc8d0a912c300324fe244e9692a49f3a152b5))
+* Remove updates to component ([ab71716](https://github.com/occmundial/occ-atomic/commit/ab71716991a7700134dbafe0d8eda63e18ff8eab))
+
+# [3.0.0-beta.9](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.8...v3.0.0-beta.9) (2024-06-06)
+
+
+### Bug Fixes
+
+* Move use memo before early return ([3d290c9](https://github.com/occmundial/occ-atomic/commit/3d290c9675fb24e20d131fdbaeef023920f3e439))
+
+# [3.0.0-beta.8](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2024-06-06)
+
+
+### Bug Fixes
+
+* Add border for promote alert ([5050f18](https://github.com/occmundial/occ-atomic/commit/5050f187b60f98118654ecbbe3e2cba7b29790ab))
+* Add min height to tip container ([579d263](https://github.com/occmundial/occ-atomic/commit/579d26306d59ce73b5084f9cd632dd12ed162fc5))
+* Resolve conflicts ([0a15dfa](https://github.com/occmundial/occ-atomic/commit/0a15dfa8d8da38a724d71622809f0e02c5bed0e9))
+
+
+### Features
+
+* Render tip in banner component ([239e2c8](https://github.com/occmundial/occ-atomic/commit/239e2c82c23d79698bd912931b314ceddf252fb4))
+* Update tip component with new design tokens ([b2367fc](https://github.com/occmundial/occ-atomic/commit/b2367fcaade288609df4c841c91fb308841ae4b0))
+
+
+### Performance Improvements
+
+* Memoize text replace in tip text component ([69180ce](https://github.com/occmundial/occ-atomic/commit/69180ce9cb1e812769e31a837257d8c8e6f24199))
+
+# [3.0.0-beta.7](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2024-06-06)
+
+
+### Bug Fixes
+
+* Fix radio styles and add a form nav behavior ([59f0320](https://github.com/occmundial/occ-atomic/commit/59f03207a45b1ec27e02970668cffe2cfd5931a9))
+* Ignore tab index if radio element is disabled ([e479098](https://github.com/occmundial/occ-atomic/commit/e4790982a127408a474f688a4647612ef8fbb446))
+
+# [3.0.0-beta.6](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2024-06-05)
+
+
+### Bug Fixes
+
+* Text new emphasis props ([bc3e934](https://github.com/occmundial/occ-atomic/commit/bc3e934299230cb0b3a0fddeb4c8fcd2b72a052f))
+
+# [3.0.0-beta.5](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2024-06-04)
+
+
+### Bug Fixes
+
+* Remove fixed size for right-side icon in button ([1228467](https://github.com/occmundial/occ-atomic/commit/1228467ba0d107bba0e70603c28a3ccffaec306b))
+
+# [3.0.0-beta.4](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2024-06-04)
+
+
+### Bug Fixes
+
+* Make toggle unshrinkable inside a flex box ([6067fba](https://github.com/occmundial/occ-atomic/commit/6067fbad2276824bcec0c35748beea0006b73300))
+
 # [3.0.0-beta.3](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2024-05-30)
 
 

package/build/Avatar/Avatar.js

@@ -15,6 +15,12 @@ var _AvatarContent = _interopRequireDefault(require("./AvatarContent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -44,33 +50,72 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Avatar);
 
-  function Avatar() {
+  function Avatar(props) {
+    var _this;
+
     _classCallCheck(this, Avatar);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
+    return _this;
   }
 
   _createClass(Avatar, [{
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        var _this$props = this.props,
+            onEdit = _this$props.onEdit,
+            onClick = _this$props.onClick;
+        var isEditable = onEdit || onClick;
+        var handleClick = isEditable ? onClick || onEdit : undefined;
+        if (handleClick) handleClick();
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          photo = _this$props.photo,
-          gender = _this$props.gender,
-          name = _this$props.name,
-          size = _this$props.size,
-          id = _this$props.id,
-          className = _this$props.className,
-          style = _this$props.style;
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          photo = _this$props2.photo,
+          name = _this$props2.name,
+          _this$props2$size = _this$props2.size,
+          size = _this$props2$size === void 0 ? 40 : _this$props2$size,
+          id = _this$props2.id,
+          className = _this$props2.className,
+          style = _this$props2.style,
+          onEdit = _this$props2.onEdit,
+          onClick = _this$props2.onClick,
+          disabled = _this$props2.disabled;
+      var isEditable = onEdit || onClick;
+      var handleClick = isEditable ? onClick || onEdit : undefined;
+      var tabIndexValue = isEditable && !disabled ? 0 : undefined;
+      var combinedClasses = "".concat(classes.circle).concat(isEditable ? " ".concat(classes.editable) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : '');
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id,
-        className: "".concat(classes.circle).concat(className ? " ".concat(className) : ''),
-        style: style
+        className: combinedClasses,
+        onClick: handleClick,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
+        tabIndex: tabIndexValue,
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          width: size,
+          height: size
+        })
       }, /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
         photo: photo,
-        gender: gender,
         name: name,
-        size: size
+        size: size,
+        onEdit: onEdit,
+        onClick: onClick,
+        disabled: disabled
       }));
     }
   }]);
@@ -78,23 +123,26 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
   return Avatar;
 }(_react["default"].Component);
 
-Avatar.defaultProps = {
-  size: 70
-};
 Avatar.propTypes = {
   classes: _propTypes["default"].object.isRequired,
 
   /** A url to show a photo as the avatar. */
   photo: _propTypes["default"].string,
 
-  /** Use the values 'm' or 'f' to show a default avatar with an icon representing the gender. */
-  gender: _propTypes["default"].oneOf(['f', 'm']),
-
   /** Pass a name to show two initials. */
   name: _propTypes["default"].string,
 
   /** The size of the avatar. */
   size: _propTypes["default"].number,
+
+  /** A function to handle the click action for editing. */
+  onEdit: _propTypes["default"].func,
+
+  /** A function to handle the click. */
+  onClick: _propTypes["default"].func,
+
+  /** Determines if the avatar is disabled. */
+  disabled: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object

package/build/Avatar/Avatar.test.js

@@ -35,17 +35,24 @@ describe("AvatarJSS", function () {
     }));
     expect(wrapper).toMatchSnapshot();
   });
+  it('returns the right width and height', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      name: "John Doe",
+      size: 50
+    }));
+    var styles = wrapper.dive().props().style;
+    expect(styles.width).toBe(50);
+    expect(styles.height).toBe(50);
+    wrapper.setProps({
+      size: 70
+    });
+    var styles2 = wrapper.dive().props().style;
+    expect(styles2.width).toBe(70);
+    expect(styles2.height).toBe(70);
+  });
 });
 describe("Avatar styles", function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });
-  it('returns the right width and height', function () {
-    var props = {};
-    expect(_styles["default"].circle.width(props)).toBe(70);
-    expect(_styles["default"].circle.height(props)).toBe(70);
-    props.size = 50;
-    expect(_styles["default"].circle.width(props)).toBe(50);
-    expect(_styles["default"].circle.height(props)).toBe(50);
-  });
 });

package/build/Avatar/AvatarContent/AvatarContent.js

@@ -9,40 +9,77 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var capitalLetter = function capitalLetter(name) {
-  if (name) {
-    var capitals = name.toUpperCase().split(" ");
-    capitals = capitals.filter(Boolean);
-    return /*#__PURE__*/_react["default"].createElement("span", null, capitals[0] ? capitals[0].charAt(0) : 'N', capitals[1] ? capitals[1].charAt(0) : 'O');
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var getInitials = function getInitials(name) {
+  if (name && name.trim()) {
+    var _name$trim$replace$to = name.trim().replace(/\s+/g, ' ').toUpperCase().split(' '),
+        _name$trim$replace$to2 = _slicedToArray(_name$trim$replace$to, 2),
+        firstName = _name$trim$replace$to2[0],
+        lastName = _name$trim$replace$to2[1];
+
+    return "".concat(firstName === null || firstName === void 0 ? void 0 : firstName.charAt(0)).concat(lastName === null || lastName === void 0 ? void 0 : lastName.charAt(0));
   }
 
-  return "";
+  return null;
 };
 
 var AvatarContent = function AvatarContent(_ref) {
   var classes = _ref.classes,
       photo = _ref.photo,
-      gender = _ref.gender,
       name = _ref.name,
-      size = _ref.size;
+      size = _ref.size,
+      onEdit = _ref.onEdit,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled;
+  var initials = getInitials(name);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.wrap
-  }, gender && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.cont, " ").concat(classes[gender])
-  }), !gender && name && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.cont, " ").concat(classes.capital),
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.cont).concat(onClick ? " ".concat(classes.clickable) : '').concat(onEdit ? " ".concat(classes.editable) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(photo ? " ".concat(classes.photo) : '').concat(photo && (onClick || onEdit) ? " ".concat(classes.hoverPhoto) : ''),
+    style: photo ? {
+      background: "url('".concat(photo, "') no-repeat center center / cover")
+    } : null
+  }, !photo && !initials && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: "person",
+    className: classes.person,
+    colors: [disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon.brand["default"]],
+    size: 24,
     style: size ? {
-      fontSize: "".concat(size * 0.4, "px"),
-      lineHeight: "".concat(size, "px")
+      transform: "scale(".concat(size / 40, ")")
     } : {}
-  }, capitalLetter(name)), photo && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.cont,
-    style: {
-      background: "url('".concat(photo, "') no-repeat center center / cover")
-    }
-  }));
+  }), initials && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(classes.initials, " ").concat(disabled ? classes.disabledInitials : ''),
+    style: size ? {
+      transform: "scale(".concat(size / 40, ")")
+    } : {}
+  }, initials), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.overlay
+  }, onEdit && !disabled && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: "camera",
+    className: classes.camera,
+    colors: [disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon.inverse["default"]],
+    size: 24,
+    style: size ? {
+      transform: "scale(".concat(size / 40, ")")
+    } : {}
+  }))));
 };
 
 AvatarContent.propTypes = {
@@ -50,7 +87,10 @@ AvatarContent.propTypes = {
   photo: _propTypes["default"].string,
   gender: _propTypes["default"].string,
   name: _propTypes["default"].string,
-  size: _propTypes["default"].number
+  size: _propTypes["default"].number,
+  onEdit: _propTypes["default"].func,
+  onClick: _propTypes["default"].func,
+  disabled: _propTypes["default"].bool
 };
 var _default = AvatarContent;
 exports["default"] = _default;

package/build/Avatar/AvatarContent/AvatarContent.test.js

@@ -27,25 +27,12 @@ describe("AvatarContent", function () {
     }));
     expect(wrapper).toMatchSnapshot();
   });
-  it('returns the first two capital letters of the name', function () {
+  it('returns the first two initial letters of the name', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
       name: "John Doe",
       classes: classes
     }));
-    expect(wrapper.find('.capital span').text()).toEqual('JD');
-  });
-  it('shows the right gender icon', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
-      gender: "m",
-      classes: classes
-    }));
-    expect(wrapper.find('.m').length).toBe(1);
-    expect(wrapper.find('.f').length).toBe(0);
-    wrapper.setProps({
-      gender: 'f'
-    });
-    expect(wrapper.find('.m').length).toBe(0);
-    expect(wrapper.find('.f').length).toBe(1);
+    expect(wrapper.find('.initials').text()).toEqual('JD');
   });
   it('renders the photo as a background', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
@@ -60,9 +47,8 @@ describe("AvatarContent", function () {
       size: 50,
       classes: classes
     }));
-    var styles = wrapper.find('.capital').prop('style');
-    expect(styles).toHaveProperty('fontSize', '20px');
-    expect(styles).toHaveProperty('lineHeight', '50px');
+    var styles = wrapper.find('.initials').prop('style');
+    expect(styles).toHaveProperty('transform', 'scale(1.25)');
   });
 });
 describe("AvatarContentJSS", function () {