@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.3

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

@@ -4,72 +4,77 @@ var _react = _interopRequireDefault(require("react"));
 
 var _enzyme = require("enzyme");
 
-var _reactJss = require("react-jss");
-
 var _AvatarContent = _interopRequireDefault(require("./AvatarContent"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var sheets;
-describe('AvatarContent', function () {
-  beforeEach(function () {
-    return sheets = new _reactJss.SheetsRegistry();
-  });
-  afterEach(function () {
-    return sheets = null;
-  });
+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("AvatarContent", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_AvatarContent["default"], {
-      name: "John Doe"
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
+      name: "John Doe",
+      classes: classes
     }));
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
   it('returns the first two capital letters of the name', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_AvatarContent["default"], {
-      name: "John Doe"
-    })));
-    var classes = sheets.registry[0].classes;
-    expect(wrapper.find(".".concat(classes.capital, " span")).text()).toEqual('JD');
+    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.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_AvatarContent["default"], {
-      gender: "m"
-    })));
-    var classes = sheets.registry[0].classes;
-    expect(wrapper.find(".".concat(classes.m)).length).toBe(1);
-    expect(wrapper.find(".".concat(classes.f)).length).toBe(0);
-    wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_AvatarContent["default"], {
-      gender: "f"
-    })));
-    classes = sheets.registry[0].classes;
-    expect(wrapper.find(".".concat(classes.m)).length).toBe(0);
-    expect(wrapper.find(".".concat(classes.f)).length).toBe(1);
+    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);
   });
   it('renders the photo as a background', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_AvatarContent["default"], {
-      photo: "http://placehold.it/70x70"
-    })));
-    var classes = sheets.registry[0].classes;
-    expect(wrapper.find(".".concat(classes.cont)).prop('style')).toHaveProperty('background', "url('http://placehold.it/70x70') no-repeat center center / cover");
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
+      photo: "http://placehold.it/70x70",
+      classes: classes
+    }));
+    expect(wrapper.find('.cont').prop('style')).toHaveProperty('background', "url('http://placehold.it/70x70') no-repeat center center / cover");
   });
   it('changes the font size', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_AvatarContent["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
       name: "John Doe",
-      size: 50
-    })));
-    var classes = sheets.registry[0].classes;
-    var styles = wrapper.find(".".concat(classes.capital)).prop('style');
+      size: 50,
+      classes: classes
+    }));
+    var styles = wrapper.find('.capital').prop('style');
     expect(styles).toHaveProperty('fontSize', '20px');
     expect(styles).toHaveProperty('lineHeight', '50px');
   });
+});
+describe("AvatarContentJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      name: "John Doe"
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("AvatarContent styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
 });

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

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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",
+  },
+  "cont": Object {
+    "borderRadius": "50%",
+    "height": "100%",
+    "left": "0",
+    "overflow": "hidden",
+    "position": "absolute",
+    "top": "0",
+    "width": "100%",
+  },
+  "f": Object {
+    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxyZWN0IHk9IjAiIGZpbGw9IiNFOEVFRjgiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIvPgoJCTxwYXRoIGZpbGw9IiNEMEQ5RUQiIGQ9Ik00OS42LDI4LjRjLTAuOCwxLTIuNywxLjktNiwzLjJjLTQuOCwyLTkuNiwwLjYtMTEuOCwwYy03LjYtMS45LTExLDQuOC04LjQsMTEuM2MwLjQsMS4xLDAuOSwyLjUsMS40LDMuOQoJCQljLTAuOC01LjgtMC41LTE0LjUsNS41LTEzLjFjMi40LDAuNiw3LjgsMi4yLDEzLDBjMi45LTEuMiw1LjItMi43LDYuNS00YzAsMCwwLDAsMCwwYzAuMS0wLjUsMC4yLTAuOSwwLjMtMS40CgkJCUM0OS44LDI4LjUsNDkuNywyOC40LDQ5LjYsMjguNHoiLz4KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMzLjMxMzUiIHkxPSI1Ny42MTI4IiB4Mj0iMzUuODEzNSIgeTI9IjY2LjM2MjgiPgoJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQzJDREUyIi8+CgkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNEOUUxRUYiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNNDMuNSw1NS43QzQzLjUsNTUuNyw0My41LDU1LjYsNDMuNSw1NS43YzAsMC0wLjEsMC0wLjIsMC4xYy0wLjgsMC43LTEuNiwxLjQtMi41LDIuMQoJCQljLTMuMSwyLjQtNy4yLDIuNy0xMC41LDAuOWMtMC41LTAuMy0wLjktMC41LTEuMy0wLjljLTAuOC0wLjYtMS41LTEuMi0yLjEtMS43YzAuNSwzLjcsMC41LDcuMy0wLjQsMTAuMmMtMC4xLDAuNC0wLjMsMC44LTAuNSwxLjIKCQkJYzAsMC40LTAuMSwwLjgtMC4xLDEuMmMwLjIsMCwwLjMsMC4xLDAuNSwwLjFDMjksNjkuNiwzMiw3MCwzNSw3MGMzLDAsNS44LTAuNCw4LjYtMS4xYzAuMSwwLDAuMy0wLjEsMC40LTAuMQoJCQlDNDMuNCw2NC41LDQzLjIsNTguNiw0My41LDU1Ljd6Ii8+CgkJPHBhdGggZmlsbD0iI0JEQzhERiIgZD0iTTU1LjIsNDcuNWMxLjItNC4yLDEuOC05LjQsMS43LTEzLjZjMC0xNi4zLTExLjItMjUuNC0yMS41LTI1LjRDMTkuNiw4LjQsMTIuNiwyNS42LDEyLjUsMzkKCQkJYy0xLjEsOC45LTEuMywxOC41LDAuMSwyMi44YzAsMCwwLDAuMSwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMGMzLjcsMyw4LDUuMywxMi43LDYuN2MwLjEsMCwwLjMsMC4xLDAuNCwwLjEKCQkJYzAuMiwwLDAuMywwLjEsMC41LDAuMWMwLjEtMC44LDAuMS0xLjYsMC4yLTIuNWMxLTIuOSwxLTYuNiwwLjQtMTAuMmMwLTAuMy0wLjEtMC43LTAuMi0xYy0wLjEtMC40LTAuMS0wLjgtMC4yLTEuMgoJCQljLTAuNS0yLjUtMS4xLTQuOS0xLjgtNy4xYy0wLjUtMS41LTAuOS0yLjgtMS40LTMuOWMtMi41LTYuNSwwLjktMTMuMyw4LjQtMTEuM2MyLjIsMC42LDcsMiwxMS44LDBjMy4zLTEuNCw1LjItMi4yLDYtMy4yCgkJCWMwLjEsMCwwLjIsMC4xLDAuMywwLjFjLTAuMSwwLjQtMC4yLDAuOS0wLjMsMS40Yy0wLjMsMi0wLjYsNC40LTAuOCw2LjhjMS41LTEuNSwyLjQtMS42LDIuOS0wLjhjMC43LDEsMC4zLDIuMywwLDQuMwoJCQljLTAuMSwwLjgtMC40LDMtMC40LDMuNWMwLDEuMi0xLjIsMi4yLTIuNiwxLjhjMCwwLjMsMCwwLjYsMCwxYy0wLjMsMi40LTEuMyw0LjYtMi44LDYuM2MtMC44LDEtMS42LDItMi40LDIuOQoJCQljLTAuMSwwLjEtMC4xLDAuMS0wLjIsMC4yYy0wLjIsMy42LTAuMSw5LjMsMC4yLDEzLjFjMC4xLDAsMC4zLTAuMSwwLjQtMC4xYzYuMi0xLjYsMTEuNy00LjksMTYtOS4zQzU2LjIsNTYuMiw1My45LDUyLjEsNTUuMiw0Ny41CgkJCXoiLz4KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzJfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjkzLjQ2OTUiIHkxPSIxNzYuODA2MiIgeDI9IjM3LjIxOTUiIHkyPSI0MC41NTYyIj4KCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0M3RDJFNyIvPgoJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTBFN0YyIi8+CgkJPC9saW5lYXJHcmFkaWVudD4KCQk8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzJfKSIgZD0iTTUxLjcsMzUuOWMtMC41LTAuOC0xLjQtMC44LTIuOSwwLjhjMC4yLTIuNCwwLjUtNC45LDAuOC02LjhjMCwwLDAsMCwwLDBjLTEuMywxLjMtMy42LDIuNy02LjUsNAoJCQljLTUuMSwyLjItMTAuNiwwLjYtMTMsMGMtNi4xLTEuNC02LjMsNy4yLTUuNSwxMy4xYzAuNywyLjEsMS4zLDQuNiwxLjgsNy4xYzAuMSwwLjQsMC4xLDAuOCwwLjIsMS4yYzAuMSwwLjMsMC4xLDAuNywwLjIsMQoJCQljMC43LDAuNiwxLjQsMS4xLDIuMSwxLjdjMC40LDAuMywwLjksMC42LDEuMywwLjljMy4zLDEuOCw3LjUsMS41LDEwLjUtMC45YzAuOS0wLjcsMS43LTEuNCwyLjUtMi4xYzAsMCwwLDAuMSwwLDAuMQoJCQljMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjJjMC45LTAuOSwxLjctMS45LDIuNC0yLjljMS41LTEuNywyLjUtMy45LDIuOC02LjNjMC0wLjMsMC0wLjcsMC0xYzEuNSwwLjQsMi42LTAuNiwyLjYtMS44CgkJCWMwLTAuNSwwLjMtMi43LDAuNC0zLjVDNTIsMzguMiw1Mi4zLDM2LjksNTEuNywzNS45eiIvPgoJCTwvc3ZnPg==)",
+  },
+  "m": Object {
+    "background": "url(data:image/svg+xml;base64,CgkJPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxyZWN0IHk9IjAiIGZpbGw9IiNFOEVFRjgiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIvPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTM2OS43ODE5IiB5MT0iMzMzLjIwODgiIHgyPSItMzY5LjMxMjIiIHkyPSIzMzIuMjQ1MSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMzMuMDAyNCAzLjQ2ODcgLTMuNTUwNiAtMzMuNzgxNSAtMTA5NzYuNDAwNCAxMjU3Ny45Mzg1KSI+CgkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNDMkNERTIiLz4KCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0Q5RTFFRiIvPgoJCTwvbGluZWFyR3JhZGllbnQ+CgkJPHBhdGggZmlsbD0idXJsKCNTVkdJRF8xXykiIGQ9Ik00Mi4yLDYxLjFjLTMsMi42LTcuNCwyLjYtMTAuNCwwYy00LjQtMy43LTcuNC02LTkuNC04LjJjMC4xLDMuMi0wLjMsOS40LTIuNCwxMy43QzI0LjYsNjguOCwyOS43LDcwLDM1LDcwCgkJCWM2LDAsMTEuNi0xLjUsMTYuNS00LjJjLTEtMi42LTEuNC03LjctMS41LTExLjhDNDguMyw1Niw0NS43LDU4LjEsNDIuMiw2MS4xeiIvPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNzkuMzcwNSIgeTE9IjE4NC44MTkyIiB4Mj0iMzYuOTAyOSIgeTI9IjQzLjM0NjUiPgoJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQzdEMkU3Ii8+CgkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMEU3RjIiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwYXRoIGZpbGw9InVybCgjU1ZHSURfMl8pIiBkPSJNNTIuNSw0NC4yYy0xLjUtMC4yLTEuNC0yLjEtMS4yLTQuNmMwLjEtMS44LDAtMywwLjMtNGMwLDAtMC4xLDAtMC4xLDAuMWMtMi4zLDEuNC0xLjUtNC44LTItOS40CgkJCWMtMC4xLTEuMS0wLjItMy4xLTAuOC01LjNjMC0wLjEtMC4xLTAuMi0wLjEtMC4zYy0wLjMtMS0wLjYtMi0xLTIuOWMwLDAuNS0wLjIsMC42LTAuMi0wLjJjMC0wLjktMi4zLDEzLjMtMTguOCwxMy4zCgkJCWMtMS45LDAtMy45LTAuMi01LjgtMC41YzAuMSw0LjYsMCwxMC4xLTEuNyw2LjhjLTAuMy0wLjYtMC41LTEtMC43LTEuMmMwLjMsMSwwLjIsMi4xLDAuMywzLjhjMC4xLDIuNCwwLjIsNC4zLTEuMiw0LjYKCQkJYy0wLjEsMC0wLjEsMC0wLjIsMGMwLjEsMi43LDAuNCw0LjgsMC45LDUuOGMwLjUsMSwxLjIsMS45LDIuMSwyLjljMiwyLjEsNSw0LjUsOS40LDguMmMzLDIuNiw3LjQsMi42LDEwLjQsMAoJCQljMy41LTIuOSw2LjEtNS4xLDcuOC03YzEuNC0xLjYsMi4xLTMsMi4xLTQuNWMwLTAuMiwwLjQtMy4xLDAuNy01LjRDNTIuNyw0NC4yLDUyLjYsNDQuMiw1Mi41LDQ0LjJ6Ii8+CgkJPHBhdGggZmlsbD0iI0QwRDlFRCIgZD0iTTI2LjcsMjguOWMtMS4zLDAtMi41LTAuMS0zLjgtMC4yYzAsMC41LDAsMSwwLDEuNWMxLjksMC4zLDMuOCwwLjUsNS44LDAuNWMxNi41LDAsMTguOC0xNC4yLDE4LjgtMTMuMwoJCQljMCwwLjgsMC4yLDAuNywwLjIsMC4yYy0wLjEtMC4zLTAuMy0wLjUtMC40LTAuOEM0Ni43LDE2LDQ0LjYsMjguOSwyNi43LDI4Ljl6Ii8+CgkJPHBhdGggZmlsbD0iI0Q5RTFFRiIgZD0iTTU1LjUsMzNjLTAuMS0wLjMtMC4zLTAuNS0wLjUtMC42Yy0wLjUtMC4zLTEuMiwwLjMtMS44LDFjLTAuNCwwLjQtMC43LDAuOS0xLDEuMmMtMC4zLDAuMy0wLjQsMC42LTAuNiwxCgkJCWMtMC40LDEtMC4yLDIuMi0wLjMsNGMtMC4xLDIuNC0wLjIsNC4zLDEuMiw0LjZjMC4xLDAsMC4yLDAsMC4zLDBjMS4zLDAsMi4yLTEuMiwyLjItM0M1NS4xLDM5LjMsNTYuMywzNC43LDU1LjUsMzN6Ii8+CgkJPHBhdGggZmlsbD0iI0JEQzhERiIgZD0iTTU1LjEsMjEuMmMtMC4zLTIuNC0xLjUtNC44LTMuNi02LjhjLTAuMS0wLjEtMS45LTAuNS0yLjQtMC40Yy0wLjEtMC41LTAuNy0xLjktMS4xLTIuMQoJCQljLTIuNC0xLjMtNS41LTIuMi05LjItMi42QzM3LjMsOSwzNS43LDguOSwzNCw5LjJjLTUuNywxLTksOC4zLTEzLjcsOS45Yy00LjcsMS42LTQuMywxLjItNC4zLDUuNWMwLDEuMywwLjcsMi4yLDEuOCwyLjcKCQkJYzAsMS40LDAuMSwzLDAuMiw0LjRjMCwwLjIsMC4xLDAuNSwwLjEsMC44YzAuNCwwLjMsMC44LDAuNywxLjIsMS4yYzAuMiwwLjMsMC40LDAuNiwwLjYsMC44YzAuMywwLjQsMC41LDAuOCwwLjYsMS4yCgkJCWMwLjIsMC4yLDAuNCwwLjYsMC43LDEuMmMxLjYsMy4yLDEuNy0yLjMsMS43LTYuOGMwLTAuNSwwLTEsMC0xLjVjMS4zLDAuMSwyLjUsMC4yLDMuOCwwLjJjMTcuOSwwLDIwLTEyLjksMjAuNS0xMi4xCgkJCWMwLjEsMC4zLDAuMywwLjUsMC40LDAuOGMwLjQsMC45LDAuOCwxLjksMSwyLjljMCwwLjEsMC4xLDAuMiwwLjEsMC4zYzAuNSwyLjIsMC43LDQuMiwwLjgsNS4zYzAuNCw0LjctMC4zLDEwLjgsMiw5LjQKCQkJYzAsMCwwLjEsMCwwLjEtMC4xYzAuMS0wLjMsMC4zLTAuNywwLjYtMWMwLjMtMC40LDAuNy0wLjgsMS0xLjJjMC42LTAuNywxLjMtMS4zLDEuOC0xQzU1LjMsMjksNTUuNSwyNC40LDU1LjEsMjEuMnoiLz4KCQk8cGF0aCBmaWxsPSIjREVFNUYxIiBkPSJNMjAuOCwzOS42Yy0wLjEtMS43LDAtMi44LTAuMy0zLjhjLTAuMS0wLjQtMC4zLTAuOC0wLjYtMS4yYy0wLjItMC4yLTAuNC0wLjUtMC42LTAuOAoJCQljLTAuNC0wLjUtMC44LTAuOS0xLjItMS4yYy0wLjYtMC40LTEuMS0wLjUtMS41LDAuNGMtMC44LDEuNywwLjQsNi4zLDAuNCw4LjNjMC4xLDEuOCwxLDMuMSwyLjQsM2MwLjEsMCwwLjEsMCwwLjIsMAoJCQlDMjEuMSw0My45LDIwLjksNDIsMjAuOCwzOS42eiIvPgoJCTwvc3ZnPg==)",
+  },
+  "wrap": Object {
+    "height": "100%",
+    "position": "relative",
+    "width": "100%",
+  },
+}
+`;
+
+exports[`AvatarContentJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Avatar/AvatarContent/index.js

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

package/build/Avatar/AvatarContent/styles.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = require("react-jss");
-
 var _fonts = _interopRequireDefault(require("../../subatomic/fonts"));
 
 var _icons = _interopRequireDefault(require("../../subatomic/icons"));
 
+var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss.createUseStyles)({
+var _default = {
   wrap: {
     position: 'relative',
     width: '100%',
@@ -36,13 +36,14 @@ var _default = (0, _reactJss.createUseStyles)({
   },
   capital: {
     fontFamily: _fonts["default"].body,
-    fontSize: 70 * 0.4,
-    lineHeight: '70px',
-    fontWeight: '600',
-    background: '#dae1e5',
-    color: '#afb8c0',
-    textAlign: 'center'
+    fontSize: '57px',
+    lineHeight: '72px',
+    fontWeight: '400',
+    background: _colors["default"].grey100,
+    color: _colors["default"].grey200,
+    textAlign: 'center',
+    letterSpacing: -2,
+    fontStyle: 'normal'
   }
-});
-
+};
 exports["default"] = _default;

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Avatar styles matches the snapshot 1`] = `
+Object {
+  "circle": Object {
+    "borderRadius": "50%",
+    "height": [Function],
+    "overflow": "hidden",
+    "position": "relative",
+    "width": [Function],
+  },
+}
+`;
+
+exports[`AvatarJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Avatar/index.js

@@ -5,9 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
 var _Avatar = _interopRequireDefault(require("./Avatar"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _Avatar["default"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var StyledAvatar = (0, _reactJss["default"])(_styles["default"])(_Avatar["default"]); // eslint-disable-next-line
+
+var _Avatar$propTypes = _Avatar["default"].propTypes,
+    classes = _Avatar$propTypes.classes,
+    propTypes = _objectWithoutProperties(_Avatar$propTypes, ["classes"]);
+
+StyledAvatar.propTypes = _objectSpread(_objectSpread({}, propTypes), StyledAvatar.propTypes);
+var _default = StyledAvatar;
 exports["default"] = _default;

package/build/Avatar/styles.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
-var _reactJss = require("react-jss");
-
-var _default = (0, _reactJss.createUseStyles)({
+var _default = {
   circle: {
     position: 'relative',
     width: function width(props) {
@@ -19,6 +16,5 @@ var _default = (0, _reactJss.createUseStyles)({
     borderRadius: '50%',
     overflow: 'hidden'
   }
-});
-
+};
 exports["default"] = _default;

package/build/Banner/Banner.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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", {
+    id: id,
+    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
+  }))));
+};
+
+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. */
+  children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
+
+  /** Icon name to show on the left. */
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  onClose: _propTypes["default"].func
+};
+
+var _default = (0, _WindowSize["default"])(Banner);
+
+exports["default"] = _default;

package/build/Banner/Banner.test.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+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
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("BannerJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Banner styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"]);
+
+exports["default"] = _default;

package/build/Banner/styles.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
+
+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 _default = {
+  container: {
+    padding: _spacing["default"].small,
+    backgroundColor: _colors["default"].ink
+  },
+  textBanner: {
+    display: 'inline-block'
+  },
+  textFlex: _defineProperty({
+    textAlign: 'start'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    textAlign: 'center'
+  }),
+  iconFlex: _defineProperty({
+    paddingLeft: _spacing["default"].small,
+    paddingTop: _spacing["default"].small
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: 0
+  }),
+  icon: {
+    cursor: 'pointer'
+  }
+};
+exports["default"] = _default;