@comicrelief/component-library 6.1.4 → 6.1.5

package/dist/components/Atoms/Logo/Logo.js

@@ -74,8 +74,9 @@ var Logo = function Logo(_ref2) {
 
 Logo.defaultProps = {
   rotate: false,
-  sizeSm: '75px',
-  sizeMd: '75px',
+  sizeSm: '51px',
+  // - to work with the header 75px height and 12px padding
+  sizeMd: '70px',
   campaign: 'Comic Relief'
 };
 var _default = Logo;

package/dist/components/Atoms/Logo/Logo.test.js

@@ -14,5 +14,5 @@ it("renders correctly", function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Logo.default, {
     rotate: true
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      object-fit: cover;\n      width: 100%;\n      display: block;\n      height: auto;\n      margin-right: 1rem;\n    }\n\n    .c0 {\n      display: inline-block;\n      z-index: 3;\n      width: 75px;\n      -webkit-transform: rotate(-14deg);\n      -ms-transform: rotate(-14deg);\n      transform: rotate(-14deg);\n      vertical-align: bottom;\n    }\n\n    @media (min-width:1150px) {\n      .c0 {\n        width: 75px;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      rotate={1}\n    >\n      <img\n        alt=\"Comic Relief logo\"\n        className=\"c1\"\n        src=\"mock.asset\"\n      />\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      object-fit: cover;\n      width: 100%;\n      display: block;\n      height: auto;\n      margin-right: 1rem;\n    }\n\n    .c0 {\n      display: inline-block;\n      z-index: 3;\n      width: 51px;\n      -webkit-transform: rotate(-14deg);\n      -ms-transform: rotate(-14deg);\n      transform: rotate(-14deg);\n      vertical-align: bottom;\n    }\n\n    @media (min-width:1150px) {\n      .c0 {\n        width: 70px;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      rotate={1}\n    >\n      <img\n        alt=\"Comic Relief logo\"\n        className=\"c1\"\n        src=\"mock.asset\"\n      />\n    </div>\n  ");
 });

package/dist/components/Organisms/Header/Header.style.js

@@ -35,7 +35,7 @@ exports.HeaderWrapper = HeaderWrapper;
 var InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__InnerWrapper",
   componentId: "sc-11ghppe-1"
-})(["display:flex;align-items:center;height:100%;padding:0;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _size.container.large, function (_ref3) {
+})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _size.container.large, function (_ref3) {
   var theme = _ref3.theme;
   return theme.breakpoint('nav');
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "6.1.4",
+  "version": "6.1.5",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Logo/Logo.js

@@ -67,8 +67,8 @@ Logo.propTypes = {
 
 Logo.defaultProps = {
   rotate: false,
-  sizeSm: '75px',
-  sizeMd: '75px',
+  sizeSm: '51px', // - to work with the header 75px height and 12px padding
+  sizeMd: '70px',
   campaign: 'Comic Relief'
 };
 

package/src/components/Atoms/Logo/Logo.test.js

@@ -18,7 +18,7 @@ it("renders correctly", () => {
     .c0 {
       display: inline-block;
       z-index: 3;
-      width: 75px;
+      width: 51px;
       -webkit-transform: rotate(-14deg);
       -ms-transform: rotate(-14deg);
       transform: rotate(-14deg);
@@ -27,7 +27,7 @@ it("renders correctly", () => {
 
     @media (min-width:1150px) {
       .c0 {
-        width: 75px;
+        width: 70px;
       }
     }
 

package/src/components/Organisms/Header/Header.style.js

@@ -21,7 +21,7 @@ const InnerWrapper = styled.div`
   display: flex;
   align-items: center;
   height: 100%;
-  padding: 0;
+  padding: 0 12px;
   cursor: pointer;
   max-width: ${container.large};