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

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();
-  });
 });

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

@@ -2,32 +2,4 @@
 
 exports[`Banner matches the snapshot 1`] = `ShallowWrapper {}`;
 
-exports[`Banner styles matches the snapshot 1`] = `
-Object {
-  "container": Object {
-    "backgroundColor": "#222222",
-    "padding": 16,
-  },
-  "icon": Object {
-    "cursor": "pointer",
-  },
-  "iconFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "padding": 0,
-    },
-    "paddingLeft": 16,
-    "paddingTop": 16,
-  },
-  "textBanner": Object {
-    "display": "inline-block",
-  },
-  "textFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "textAlign": "center",
-    },
-    "textAlign": "start",
-  },
-}
-`;
-
 exports[`BannerJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Banner/index.js

@@ -5,14 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss["default"])(_styles["default"])(_Banner["default"]);
-
+var _default = _Banner["default"];
 exports["default"] = _default;

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

@@ -64,12 +64,12 @@ Object {
     "&:active": Object {
       "background": "hsl(234 75.4% 12.7% / 0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    },
     "&:hover": Object {
       "background": "hsl(234 75.4% 12.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
-    },
     "background": "transparent",
     "color": "#5A5D7B",
   },
@@ -120,12 +120,12 @@ Object {
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
   },
@@ -145,10 +145,8 @@ Object {
   },
   "iconRight": Object {
     "display": "inline-block",
-    "height": 16,
     "marginLeft": "8px",
     "transition": "0.3s all",
-    "width": 16,
   },
   "lg": Object {
     "&$iconOnly": Object {
@@ -216,12 +214,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid rgba(255,255,255,0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
+    },
     "&:hover": Object {
       "background": "#A32444",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
-    },
     "background": "#D32E58",
     "color": "#fff",
     "outline": "2px solid rgba(255,255,255,0.2)",
@@ -247,12 +245,12 @@ Object {
     "&:active": Object {
       "background": "hsl(221 91.2% 35.7% / 0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "hsl(221 91.2% 35.7% / 0.05)",
     "color": "#083CAE",
   },
@@ -277,12 +275,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #083CAE",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "transparent",
     "color": "#083CAE",
     "outline": "2px solid #083CAE",
@@ -305,12 +303,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #fff",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
     "outline": "2px solid #fff",