@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.60

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("span", {
+    className: "".concat(classes.initials, " ").concat(disabled ? classes.disabledInitials : ''),
     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(_Icon["default"], {
+    iconName: "person",
+    className: classes.person,
+    colors: [disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon.brand["default"]],
+    size: 24,
+    style: size ? {
+      transform: "scale(".concat(size / 40, ")")
+    } : {}
+  }) : null, /*#__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 () {

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

@@ -4,31 +4,91 @@ exports[`AvatarContent matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`AvatarContent styles matches the snapshot 1`] = `
 Object {
-  "capital": Object {
-    "background": "#f5f5f5",
-    "color": "#dddddd",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": "57px",
-    "fontStyle": "normal",
-    "fontWeight": "400",
-    "letterSpacing": -2,
-    "lineHeight": "72px",
-    "textAlign": "center",
+  "camera": Object {
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "opacity": 0,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+  },
+  "clickable": Object {
+    "&:active": Object {
+      "background": "#ABBDE4",
+    },
+    "&:hover": Object {
+      "background": "#CAD5EE",
+    },
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
   "cont": Object {
-    "borderRadius": "50%",
+    "alignItems": "center",
+    "background": "#E9EEF8",
+    "borderRadius": "9999px",
+    "display": "grid",
     "height": "100%",
+    "justifyContent": "center",
     "left": "0",
     "overflow": "hidden",
     "position": "absolute",
     "top": "0",
     "width": "100%",
   },
-  "f": Object {
-    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxyZWN0IHk9IjAiIGZpbGw9IiNFOEVFRjgiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIvPgoJCTxwYXRoIGZpbGw9IiNEMEQ5RUQiIGQ9Ik00OS42LDI4LjRjLTAuOCwxLTIuNywxLjktNiwzLjJjLTQuOCwyLTkuNiwwLjYtMTEuOCwwYy03LjYtMS45LTExLDQuOC04LjQsMTEuM2MwLjQsMS4xLDAuOSwyLjUsMS40LDMuOQoJCQljLTAuOC01LjgtMC41LTE0LjUsNS41LTEzLjFjMi40LDAuNiw3LjgsMi4yLDEzLDBjMi45LTEuMiw1LjItMi43LDYuNS00YzAsMCwwLDAsMCwwYzAuMS0wLjUsMC4yLTAuOSwwLjMtMS40CgkJCUM0OS44LDI4LjUsNDkuNywyOC40LDQ5LjYsMjguNHoiLz4KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMzLjMxMzUiIHkxPSI1Ny42MTI4IiB4Mj0iMzUuODEzNSIgeTI9IjY2LjM2MjgiPgoJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQzJDREUyIi8+CgkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNEOUUxRUYiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNNDMuNSw1NS43QzQzLjUsNTUuNyw0My41LDU1LjYsNDMuNSw1NS43YzAsMC0wLjEsMC0wLjIsMC4xYy0wLjgsMC43LTEuNiwxLjQtMi41LDIuMQoJCQljLTMuMSwyLjQtNy4yLDIuNy0xMC41LDAuOWMtMC41LTAuMy0wLjktMC41LTEuMy0wLjljLTAuOC0wLjYtMS41LTEuMi0yLjEtMS43YzAuNSwzLjcsMC41LDcuMy0wLjQsMTAuMmMtMC4xLDAuNC0wLjMsMC44LTAuNSwxLjIKCQkJYzAsMC40LTAuMSwwLjgtMC4xLDEuMmMwLjIsMCwwLjMsMC4xLDAuNSwwLjFDMjksNjkuNiwzMiw3MCwzNSw3MGMzLDAsNS44LTAuNCw4LjYtMS4xYzAuMSwwLDAuMy0wLjEsMC40LTAuMQoJCQlDNDMuNCw2NC41LDQzLjIsNTguNiw0My41LDU1Ljd6Ii8+CgkJPHBhdGggZmlsbD0iI0JEQzhERiIgZD0iTTU1LjIsNDcuNWMxLjItNC4yLDEuOC05LjQsMS43LTEzLjZjMC0xNi4zLTExLjItMjUuNC0yMS41LTI1LjRDMTkuNiw4LjQsMTIuNiwyNS42LDEyLjUsMzkKCQkJYy0xLjEsOC45LTEuMywxOC41LDAuMSwyMi44YzAsMCwwLDAuMSwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMGMzLjcsMyw4LDUuMywxMi43LDYuN2MwLjEsMCwwLjMsMC4xLDAuNCwwLjEKCQkJYzAuMiwwLDAuMywwLjEsMC41LDAuMWMwLjEtMC44LDAuMS0xLjYsMC4yLTIuNWMxLTIuOSwxLTYuNiwwLjQtMTAuMmMwLTAuMy0wLjEtMC43LTAuMi0xYy0wLjEtMC40LTAuMS0wLjgtMC4yLTEuMgoJCQljLTAuNS0yLjUtMS4xLTQuOS0xLjgtNy4xYy0wLjUtMS41LTAuOS0yLjgtMS40LTMuOWMtMi41LTYuNSwwLjktMTMuMyw4LjQtMTEuM2MyLjIsMC42LDcsMiwxMS44LDBjMy4zLTEuNCw1LjItMi4yLDYtMy4yCgkJCWMwLjEsMCwwLjIsMC4xLDAuMywwLjFjLTAuMSwwLjQtMC4yLDAuOS0wLjMsMS40Yy0wLjMsMi0wLjYsNC40LTAuOCw2LjhjMS41LTEuNSwyLjQtMS42LDIuOS0wLjhjMC43LDEsMC4zLDIuMywwLDQuMwoJCQljLTAuMSwwLjgtMC40LDMtMC40LDMuNWMwLDEuMi0xLjIsMi4yLTIuNiwxLjhjMCwwLjMsMCwwLjYsMCwxYy0wLjMsMi40LTEuMyw0LjYtMi44LDYuM2MtMC44LDEtMS42LDItMi40LDIuOQoJCQljLTAuMSwwLjEtMC4xLDAuMS0wLjIsMC4yYy0wLjIsMy42LTAuMSw5LjMsMC4yLDEzLjFjMC4xLDAsMC4zLTAuMSwwLjQtMC4xYzYuMi0xLjYsMTEuNy00LjksMTYtOS4zQzU2LjIsNTYuMiw1My45LDUyLjEsNTUuMiw0Ny41CgkJCXoiLz4KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzJfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjkzLjQ2OTUiIHkxPSIxNzYuODA2MiIgeDI9IjM3LjIxOTUiIHkyPSI0MC41NTYyIj4KCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0M3RDJFNyIvPgoJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTBFN0YyIi8+CgkJPC9saW5lYXJHcmFkaWVudD4KCQk8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzJfKSIgZD0iTTUxLjcsMzUuOWMtMC41LTAuOC0xLjQtMC44LTIuOSwwLjhjMC4yLTIuNCwwLjUtNC45LDAuOC02LjhjMCwwLDAsMCwwLDBjLTEuMywxLjMtMy42LDIuNy02LjUsNAoJCQljLTUuMSwyLjItMTAuNiwwLjYtMTMsMGMtNi4xLTEuNC02LjMsNy4yLTUuNSwxMy4xYzAuNywyLjEsMS4zLDQuNiwxLjgsNy4xYzAuMSwwLjQsMC4xLDAuOCwwLjIsMS4yYzAuMSwwLjMsMC4xLDAuNywwLjIsMQoJCQljMC43LDAuNiwxLjQsMS4xLDIuMSwxLjdjMC40LDAuMywwLjksMC42LDEuMywwLjljMy4zLDEuOCw3LjUsMS41LDEwLjUtMC45YzAuOS0wLjcsMS43LTEuNCwyLjUtMi4xYzAsMCwwLDAuMSwwLDAuMQoJCQljMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjJjMC45LTAuOSwxLjctMS45LDIuNC0yLjljMS41LTEuNywyLjUtMy45LDIuOC02LjNjMC0wLjMsMC0wLjcsMC0xYzEuNSwwLjQsMi42LTAuNiwyLjYtMS44CgkJCWMwLTAuNSwwLjMtMi43LDAuNC0zLjVDNTIsMzguMiw1Mi4zLDM2LjksNTEuNywzNS45eiIvPgoJCTwvc3ZnPg==)",
+  "disabled": Object {
+    "& $camera": Object {
+      "opacity": 1,
+    },
+    "background": "#EDEDF1",
+    "pointerEvents": "none",
+  },
+  "disabledInitials": Object {
+    "color": "#878A9F",
+  },
+  "editable": Object {
+    "&:active $overlay": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.4)",
+    },
+    "&:hover $camera": Object {
+      "opacity": 1,
+    },
+    "&:hover $overlay": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.3)",
+    },
+  },
+  "hoverPhoto": Object {
+    "&:active $overlay": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.4)",
+    },
+    "&:hover $overlay": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.3)",
+    },
+  },
+  "initials": Object {
+    "color": "#083CAE",
+    "display": "inline-block",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+    "gridColumnStart": "1",
+    "gridRowStart": "1",
+    "textAlign": "center",
+  },
+  "overlay": Object {
+    "alignItems": "center",
+    "border": "1px solid transparent",
+    "borderRadius": "50%",
+    "display": "grid",
+    "height": "100%",
+    "justifyContent": "center",
+    "left": "0",
+    "position": "absolute",
+    "top": "0",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": "100%",
+  },
+  "person": Object {
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
-  "m": Object {
-    "background": "url(data:image/svg+xml;base64,CgkJPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxyZWN0IHk9IjAiIGZpbGw9IiNFOEVFRjgiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIvPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTM2OS43ODE5IiB5MT0iMzMzLjIwODgiIHgyPSItMzY5LjMxMjIiIHkyPSIzMzIuMjQ1MSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMzMuMDAyNCAzLjQ2ODcgLTMuNTUwNiAtMzMuNzgxNSAtMTA5NzYuNDAwNCAxMjU3Ny45Mzg1KSI+CgkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNDMkNERTIiLz4KCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0Q5RTFFRiIvPgoJCTwvbGluZWFyR3JhZGllbnQ+CgkJPHBhdGggZmlsbD0idXJsKCNTVkdJRF8xXykiIGQ9Ik00Mi4yLDYxLjFjLTMsMi42LTcuNCwyLjYtMTAuNCwwYy00LjQtMy43LTcuNC02LTkuNC04LjJjMC4xLDMuMi0wLjMsOS40LTIuNCwxMy43QzI0LjYsNjguOCwyOS43LDcwLDM1LDcwCgkJCWM2LDAsMTEuNi0xLjUsMTYuNS00LjJjLTEtMi42LTEuNC03LjctMS41LTExLjhDNDguMyw1Niw0NS43LDU4LjEsNDIuMiw2MS4xeiIvPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNzkuMzcwNSIgeTE9IjE4NC44MTkyIiB4Mj0iMzYuOTAyOSIgeTI9IjQzLjM0NjUiPgoJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQzdEMkU3Ii8+CgkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMEU3RjIiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwYXRoIGZpbGw9InVybCgjU1ZHSURfMl8pIiBkPSJNNTIuNSw0NC4yYy0xLjUtMC4yLTEuNC0yLjEtMS4yLTQuNmMwLjEtMS44LDAtMywwLjMtNGMwLDAtMC4xLDAtMC4xLDAuMWMtMi4zLDEuNC0xLjUtNC44LTItOS40CgkJCWMtMC4xLTEuMS0wLjItMy4xLTAuOC01LjNjMC0wLjEtMC4xLTAuMi0wLjEtMC4zYy0wLjMtMS0wLjYtMi0xLTIuOWMwLDAuNS0wLjIsMC42LTAuMi0wLjJjMC0wLjktMi4zLDEzLjMtMTguOCwxMy4zCgkJCWMtMS45LDAtMy45LTAuMi01LjgtMC41YzAuMSw0LjYsMCwxMC4xLTEuNyw2LjhjLTAuMy0wLjYtMC41LTEtMC43LTEuMmMwLjMsMSwwLjIsMi4xLDAuMywzLjhjMC4xLDIuNCwwLjIsNC4zLTEuMiw0LjYKCQkJYy0wLjEsMC0wLjEsMC0wLjIsMGMwLjEsMi43LDAuNCw0LjgsMC45LDUuOGMwLjUsMSwxLjIsMS45LDIuMSwyLjljMiwyLjEsNSw0LjUsOS40LDguMmMzLDIuNiw3LjQsMi42LDEwLjQsMAoJCQljMy41LTIuOSw2LjEtNS4xLDcuOC03YzEuNC0xLjYsMi4xLTMsMi4xLTQuNWMwLTAuMiwwLjQtMy4xLDAuNy01LjRDNTIuNyw0NC4yLDUyLjYsNDQuMiw1Mi41LDQ0LjJ6Ii8+CgkJPHBhdGggZmlsbD0iI0QwRDlFRCIgZD0iTTI2LjcsMjguOWMtMS4zLDAtMi41LTAuMS0zLjgtMC4yYzAsMC41LDAsMSwwLDEuNWMxLjksMC4zLDMuOCwwLjUsNS44LDAuNWMxNi41LDAsMTguOC0xNC4yLDE4LjgtMTMuMwoJCQljMCwwLjgsMC4yLDAuNywwLjIsMC4yYy0wLjEtMC4zLTAuMy0wLjUtMC40LTAuOEM0Ni43LDE2LDQ0LjYsMjguOSwyNi43LDI4Ljl6Ii8+CgkJPHBhdGggZmlsbD0iI0Q5RTFFRiIgZD0iTTU1LjUsMzNjLTAuMS0wLjMtMC4zLTAuNS0wLjUtMC42Yy0wLjUtMC4zLTEuMiwwLjMtMS44LDFjLTAuNCwwLjQtMC43LDAuOS0xLDEuMmMtMC4zLDAuMy0wLjQsMC42LTAuNiwxCgkJCWMtMC40LDEtMC4yLDIuMi0wLjMsNGMtMC4xLDIuNC0wLjIsNC4zLDEuMiw0LjZjMC4xLDAsMC4yLDAsMC4zLDBjMS4zLDAsMi4yLTEuMiwyLjItM0M1NS4xLDM5LjMsNTYuMywzNC43LDU1LjUsMzN6Ii8+CgkJPHBhdGggZmlsbD0iI0JEQzhERiIgZD0iTTU1LjEsMjEuMmMtMC4zLTIuNC0xLjUtNC44LTMuNi02LjhjLTAuMS0wLjEtMS45LTAuNS0yLjQtMC40Yy0wLjEtMC41LTAuNy0xLjktMS4xLTIuMQoJCQljLTIuNC0xLjMtNS41LTIuMi05LjItMi42QzM3LjMsOSwzNS43LDguOSwzNCw5LjJjLTUuNywxLTksOC4zLTEzLjcsOS45Yy00LjcsMS42LTQuMywxLjItNC4zLDUuNWMwLDEuMywwLjcsMi4yLDEuOCwyLjcKCQkJYzAsMS40LDAuMSwzLDAuMiw0LjRjMCwwLjIsMC4xLDAuNSwwLjEsMC44YzAuNCwwLjMsMC44LDAuNywxLjIsMS4yYzAuMiwwLjMsMC40LDAuNiwwLjYsMC44YzAuMywwLjQsMC41LDAuOCwwLjYsMS4yCgkJCWMwLjIsMC4yLDAuNCwwLjYsMC43LDEuMmMxLjYsMy4yLDEuNy0yLjMsMS43LTYuOGMwLTAuNSwwLTEsMC0xLjVjMS4zLDAuMSwyLjUsMC4yLDMuOCwwLjJjMTcuOSwwLDIwLTEyLjksMjAuNS0xMi4xCgkJCWMwLjEsMC4zLDAuMywwLjUsMC40LDAuOGMwLjQsMC45LDAuOCwxLjksMSwyLjljMCwwLjEsMC4xLDAuMiwwLjEsMC4zYzAuNSwyLjIsMC43LDQuMiwwLjgsNS4zYzAuNCw0LjctMC4zLDEwLjgsMiw5LjQKCQkJYzAsMCwwLjEsMCwwLjEtMC4xYzAuMS0wLjMsMC4zLTAuNywwLjYtMWMwLjMtMC40LDAuNy0wLjgsMS0xLjJjMC42LTAuNywxLjMtMS4zLDEuOC0xQzU1LjMsMjksNTUuNSwyNC40LDU1LjEsMjEuMnoiLz4KCQk8cGF0aCBmaWxsPSIjREVFNUYxIiBkPSJNMjAuOCwzOS42Yy0wLjEtMS43LDAtMi44LTAuMy0zLjhjLTAuMS0wLjQtMC4zLTAuOC0wLjYtMS4yYy0wLjItMC4yLTAuNC0wLjUtMC42LTAuOAoJCQljLTAuNC0wLjUtMC44LTAuOS0xLjItMS4yYy0wLjYtMC40LTEuMS0wLjUtMS41LDAuNGMtMC44LDEuNywwLjQsNi4zLDAuNCw4LjNjMC4xLDEuOCwxLDMuMSwyLjQsM2MwLjEsMCwwLjEsMCwwLjIsMAoJCQlDMjEuMSw0My45LDIwLjksNDIsMjAuOCwzOS42eiIvPgoJCTwvc3ZnPg==)",
+  "photo": Object {
+    "border": "1px solid #EDEDF1",
   },
   "wrap": Object {
     "height": "100%",

package/build/Avatar/AvatarContent/styles.js

@@ -5,14 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _fonts = _interopRequireDefault(require("../../subatomic/fonts"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
 
-var _icons = _interopRequireDefault(require("../../subatomic/icons"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _fonts2 = _interopRequireDefault(require("../../subatomic/fonts"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var avatar = _colors["default"].avatar,
+    text = _colors["default"].text,
+    border = _colors["default"].border;
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var font = _fonts["default"]['body-regular-strong'];
 var _default = {
   wrap: {
     position: 'relative',
@@ -25,25 +32,85 @@ var _default = {
     left: '0',
     width: '100%',
     height: '100%',
+    borderRadius: _borderRadius["default"]['br-full'],
+    overflow: 'hidden',
+    background: avatar.bg["default"],
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  initials: {
+    display: 'inline-block',
+    font: "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts2["default"].body),
+    color: text.indigo.primary,
+    gridRowStart: '1',
+    gridColumnStart: '1',
+    textAlign: 'center'
+  },
+  disabled: {
+    pointerEvents: 'none',
+    background: avatar.bg.disabled,
+    '& $camera': {
+      opacity: 1
+    }
+  },
+  disabledInitials: {
+    color: text.corp.disabled
+  },
+  clickable: {
+    transition: transition,
+    '&:hover': {
+      background: avatar.bg.hover
+    },
+    '&:active': {
+      background: avatar.bg.active
+    }
+  },
+  editable: {
+    '&:hover $camera': {
+      opacity: 1
+    },
+    '&:hover $overlay': {
+      background: avatar.bg.overlay.hover
+    },
+    '&:active $overlay': {
+      background: avatar.bg.overlay.active
+    }
+  },
+  person: {
+    gridRowStart: 1,
+    gridColumnStart: 1,
+    transition: transition
+  },
+  photo: {
+    border: "1px solid ".concat(border["default"].subtle)
+  },
+  hoverPhoto: {
+    '&:hover $overlay': {
+      background: avatar.bg.overlay.hover
+    },
+    '&:active $overlay': {
+      background: avatar.bg.overlay.active
+    }
+  },
+  camera: {
+    gridRowStart: 1,
+    gridColumnStart: 1,
+    opacity: 0,
+    transition: transition
+  },
+  overlay: {
     borderRadius: '50%',
-    overflow: 'hidden'
-  },
-  m: {
-    background: _icons["default"].base(_icons["default"].male.icon())
-  },
-  f: {
-    background: _icons["default"].base(_icons["default"].female.icon())
-  },
-  capital: {
-    fontFamily: _fonts["default"].body,
-    fontSize: '57px',
-    lineHeight: '72px',
-    fontWeight: '400',
-    background: _colors["default"].grey100,
-    color: _colors["default"].grey200,
-    textAlign: 'center',
-    letterSpacing: -2,
-    fontStyle: 'normal'
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: transition,
+    border: "1px solid transparent"
   }
 };
 exports["default"] = _default;

package/build/Avatar/__snapshots__/Avatar.test.js.snap

@@ -6,10 +6,19 @@ exports[`Avatar styles matches the snapshot 1`] = `
 Object {
   "circle": Object {
     "borderRadius": "50%",
-    "height": [Function],
+    "outline": "none",
     "overflow": "hidden",
     "position": "relative",
-    "width": [Function],
+  },
+  "disabled": Object {
+    "pointerEvents": "none",
+  },
+  "editable": Object {
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "cursor": "pointer",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
 }
 `;

package/build/Avatar/styles.js

@@ -4,17 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
 var _default = {
   circle: {
     position: 'relative',
-    width: function width(props) {
-      return props.size ? props.size : 70;
-    },
-    height: function height(props) {
-      return props.size ? props.size : 70;
-    },
     borderRadius: '50%',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    outline: 'none'
+  },
+  editable: {
+    cursor: 'pointer',
+    transition: transition,
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
+    }
+  },
+  disabled: {
+    pointerEvents: 'none'
   }
 };
 exports["default"] = _default;

package/build/Banner/Banner.js

@@ -9,17 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _Tip = _interopRequireDefault(require("../Tip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,38 +17,29 @@ var Banner = function Banner(_ref) {
   var id = _ref.id,
       style = _ref.style,
       className = _ref.className,
-      classes = _ref.classes,
       children = _ref.children,
       onClose = _ref.onClose,
-      winWidth = _ref.winWidth;
-  var isMobile = winWidth < _grid["default"].xs;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      cta = _ref.cta,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'promote' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size,
+      testId = _ref.testId;
+  return /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
     id: id,
+    style: style,
     className: className,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    className: classes.container
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1",
-    className: classes.textFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    white: true,
-    small: isMobile,
-    tag: "div",
-    className: classes.textBanner
-  }, children)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    className: classes.iconFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: "close",
-    colors: [_colors["default"].bgWhite],
-    onClick: onClose,
-    className: classes.icon
-  }))));
+    onClose: onClose,
+    banner: true,
+    cta: cta,
+    theme: theme,
+    icon: true,
+    size: size,
+    testId: testId
+  }, children);
 };
 
 Banner.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
   winWidth: _propTypes["default"].number,
 
   /** Text of the tip. If you put text between two * characters that text will be displayed as bold. */
@@ -68,9 +49,18 @@ Banner.propTypes = {
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  cta: _propTypes["default"].shape({
+    text: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote']),
+  size: _propTypes["default"].oneOf(['large', 'small']),
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
-
-var _default = (0, _WindowSize["default"])(Banner);
-
+var _default = Banner;
 exports["default"] = _default;

package/build/Banner/Banner.test.js

@@ -6,35 +6,82 @@ var _enzyme = require("enzyme");
 
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 var _index = _interopRequireDefault(require("./index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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; }
-
-var reduceClasses = function reduceClasses(prev, curr) {
-  return Object.assign({}, prev, _defineProperty({}, curr, curr));
-};
-
-var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Banner", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
-      classes: classes
-    }));
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
     expect(wrapper).toMatchSnapshot();
   });
+  it('Has content centered', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.prop('banner')).toEqual(true);
+  });
+  it('has a close icon button', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info",
+      testId: "banner-test"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.find({
+      "data-testid": 'banner-test__close-icon'
+    }).length).toBe(1);
+  });
+  it('has a link', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info",
+      testId: "banner-test"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.find({
+      "data-testid": 'banner-test__link'
+    }).length).toBe(1);
+  });
 });
 describe("BannerJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
     expect(wrapper).toMatchSnapshot();
   });
-});
-describe("Banner styles", function () {
-  it('matches the snapshot', function () {
-    expect(_styles["default"]).toMatchSnapshot();
-  });
 });