@comicrelief/component-library 6.1.0 → 6.1.3

package/dist/components/Atoms/Checkbox/Checkbox.js

@@ -26,7 +26,7 @@ var StyledCheckboxInput = _styledComponents.default.input.attrs({
 }).withConfig({
   displayName: "Checkbox__StyledCheckboxInput",
   componentId: "sc-ngak0-0"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], function (_ref) {
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;flex-shrink:0;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], function (_ref) {
   var theme = _ref.theme;
   return theme.fontSize('sm');
 }, function (_ref2) {

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

@@ -20,5 +20,5 @@ it('renders correctly', function () {
     value: "Handball",
     label: "Handball"
   }))).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    Array [\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 24px;\n      height: 24px;\n      margin: 0;\n      border: 1px solid #969598;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-color: #E52630;\n      border-color: #E52630;\n      background-size: contain;\n    }\n\n    .c1:focus + span {\n      border-color: #E52630;\n      border-width: 1px;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    <label\n        className=\"c0\"\n      >\n        <input\n          className=\"c1\"\n          name=\"sport\"\n          type=\"checkbox\"\n          value=\"Tenis\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Tenis\n        </span>\n      </label>,\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 24px;\n      height: 24px;\n      margin: 0;\n      border: 1px solid #969598;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-color: #E52630;\n      border-color: #E52630;\n      background-size: contain;\n    }\n\n    .c1:focus + span {\n      border-color: #E52630;\n      border-width: 1px;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    <label\n        className=\"c0\"\n      >\n        <input\n          className=\"c1\"\n          name=\"sport\"\n          type=\"checkbox\"\n          value=\"Handball\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Handball\n        </span>\n      </label>,\n    ]\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    Array [\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 24px;\n      height: 24px;\n      margin: 0;\n      border: 1px solid #969598;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-color: #E52630;\n      border-color: #E52630;\n      background-size: contain;\n    }\n\n    .c1:focus + span {\n      border-color: #E52630;\n      border-width: 1px;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    <label\n        className=\"c0\"\n      >\n        <input\n          className=\"c1\"\n          name=\"sport\"\n          type=\"checkbox\"\n          value=\"Tenis\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Tenis\n        </span>\n      </label>,\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 24px;\n      height: 24px;\n      margin: 0;\n      border: 1px solid #969598;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-color: #E52630;\n      border-color: #E52630;\n      background-size: contain;\n    }\n\n    .c1:focus + span {\n      border-color: #E52630;\n      border-width: 1px;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    <label\n        className=\"c0\"\n      >\n        <input\n          className=\"c1\"\n          name=\"sport\"\n          type=\"checkbox\"\n          value=\"Handball\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Handball\n        </span>\n      </label>,\n    ]\n  ");
 });

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

@@ -21,8 +21,6 @@ var _srLogo = _interopRequireDefault(require("./assets/sr-logo.svg"));
 
 var _srGameonLogo = _interopRequireDefault(require("./assets/sr-gameon-logo.svg"));
 
-var _bigNightLogo = _interopRequireDefault(require("./assets/big-night-logo.png"));
-
 var Image = _styledComponents.default.img.withConfig({
   displayName: "Logo__Image",
   componentId: "sc-18yiye8-0"
@@ -54,9 +52,6 @@ var themeSwitcher = function themeSwitcher(theme) {
     case 'Sport Relief Gameon':
       return _srGameonLogo.default;
 
-    case 'Big Night In':
-      return _bigNightLogo.default;
-
     default:
       return _crLogo.default;
   }

package/dist/components/Atoms/RadioButton/RadioButton.js

@@ -25,7 +25,7 @@ var _excluded = ["label", "name", "value"];
 var StyledRadioInput = _styledComponents.default.input.withConfig({
   displayName: "RadioButton__StyledRadioInput",
   componentId: "sc-2c24wq-0"
-})(["background-color:", ";font-size:", ";z-index:1;top:0;margin:5px 10px;width:30px;height:30px;opacity:0;left:0;right:0;+ span{left:2px;border-radius:30px;background-clip:padding-box;position:absolute;top:0px;width:30px;height:30px;border:1px solid ", ";}:checked + span{background-color:", ";border:1px solid ", ";:before{position:absolute;content:'';top:8px;left:0;right:0;background-color:", ";border-radius:30px;width:12px;height:12px;z-index:1;margin:0 auto;opacity:1;}}"], function (_ref) {
+})(["background-color:", ";font-size:", ";z-index:1;top:0;margin:5px 10px;width:30px;height:30px;opacity:0;left:0;right:0;flex-shrink:0;+ span{left:2px;border-radius:30px;background-clip:padding-box;position:absolute;top:0px;width:30px;height:30px;border:1px solid ", ";}:checked + span{background-color:", ";border:1px solid ", ";:before{position:absolute;content:'';top:8px;left:0;right:0;background-color:", ";border-radius:30px;width:12px;height:12px;z-index:1;margin:0 auto;opacity:1;}}"], function (_ref) {
   var color = _ref.color,
       theme = _ref.theme;
   return color ? theme.color(color) : theme.color('white');

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

@@ -22,5 +22,5 @@ it('renders correctly', function () {
     value: "female",
     label: "Female"
   }))).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    Array [\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      background-color: #FFFFFF;\n      z-index: 1;\n      top: 0;\n      margin: 5px 10px;\n      width: 30px;\n      height: 30px;\n      opacity: 0;\n      left: 0;\n      right: 0;\n    }\n\n    .c1 + span {\n      left: 2px;\n      border-radius: 30px;\n      background-clip: padding-box;\n      position: absolute;\n      top: 0px;\n      width: 30px;\n      height: 30px;\n      border: 1px solid #666;\n    }\n\n    .c1:checked + span {\n      background-color: #6F3AAB;\n      border: 1px solid #6F3AAB;\n    }\n\n    .c1:checked + span:before {\n      position: absolute;\n      content: '';\n      top: 8px;\n      left: 0;\n      right: 0;\n      background-color: #FFFFFF;\n      border-radius: 30px;\n      width: 12px;\n      height: 12px;\n      z-index: 1;\n      margin: 0 auto;\n      opacity: 1;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      position: relative;\n    }\n\n    <label\n        className=\"c0\"\n        htmlFor=\"male\"\n      >\n        <input\n          className=\"c1\"\n          id=\"male\"\n          name=\"gender\"\n          type=\"radio\"\n          value=\"male\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Male\n        </span>\n      </label>,\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      background-color: #FFFFFF;\n      z-index: 1;\n      top: 0;\n      margin: 5px 10px;\n      width: 30px;\n      height: 30px;\n      opacity: 0;\n      left: 0;\n      right: 0;\n    }\n\n    .c1 + span {\n      left: 2px;\n      border-radius: 30px;\n      background-clip: padding-box;\n      position: absolute;\n      top: 0px;\n      width: 30px;\n      height: 30px;\n      border: 1px solid #666;\n    }\n\n    .c1:checked + span {\n      background-color: #6F3AAB;\n      border: 1px solid #6F3AAB;\n    }\n\n    .c1:checked + span:before {\n      position: absolute;\n      content: '';\n      top: 8px;\n      left: 0;\n      right: 0;\n      background-color: #FFFFFF;\n      border-radius: 30px;\n      width: 12px;\n      height: 12px;\n      z-index: 1;\n      margin: 0 auto;\n      opacity: 1;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      position: relative;\n    }\n\n    <label\n        className=\"c0\"\n        htmlFor=\"female\"\n      >\n        <input\n          className=\"c1\"\n          id=\"female\"\n          name=\"gender\"\n          type=\"radio\"\n          value=\"female\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Female\n        </span>\n      </label>,\n    ]\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    Array [\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      background-color: #FFFFFF;\n      z-index: 1;\n      top: 0;\n      margin: 5px 10px;\n      width: 30px;\n      height: 30px;\n      opacity: 0;\n      left: 0;\n      right: 0;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1 + span {\n      left: 2px;\n      border-radius: 30px;\n      background-clip: padding-box;\n      position: absolute;\n      top: 0px;\n      width: 30px;\n      height: 30px;\n      border: 1px solid #666;\n    }\n\n    .c1:checked + span {\n      background-color: #6F3AAB;\n      border: 1px solid #6F3AAB;\n    }\n\n    .c1:checked + span:before {\n      position: absolute;\n      content: '';\n      top: 8px;\n      left: 0;\n      right: 0;\n      background-color: #FFFFFF;\n      border-radius: 30px;\n      width: 12px;\n      height: 12px;\n      z-index: 1;\n      margin: 0 auto;\n      opacity: 1;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      position: relative;\n    }\n\n    <label\n        className=\"c0\"\n        htmlFor=\"male\"\n      >\n        <input\n          className=\"c1\"\n          id=\"male\"\n          name=\"gender\"\n          type=\"radio\"\n          value=\"male\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Male\n        </span>\n      </label>,\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      background-color: #FFFFFF;\n      z-index: 1;\n      top: 0;\n      margin: 5px 10px;\n      width: 30px;\n      height: 30px;\n      opacity: 0;\n      left: 0;\n      right: 0;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1 + span {\n      left: 2px;\n      border-radius: 30px;\n      background-clip: padding-box;\n      position: absolute;\n      top: 0px;\n      width: 30px;\n      height: 30px;\n      border: 1px solid #666;\n    }\n\n    .c1:checked + span {\n      background-color: #6F3AAB;\n      border: 1px solid #6F3AAB;\n    }\n\n    .c1:checked + span:before {\n      position: absolute;\n      content: '';\n      top: 8px;\n      left: 0;\n      right: 0;\n      background-color: #FFFFFF;\n      border-radius: 30px;\n      width: 12px;\n      height: 12px;\n      z-index: 1;\n      margin: 0 auto;\n      opacity: 1;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      position: relative;\n    }\n\n    <label\n        className=\"c0\"\n        htmlFor=\"female\"\n      >\n        <input\n          className=\"c1\"\n          id=\"female\"\n          name=\"gender\"\n          type=\"radio\"\n          value=\"female\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Female\n        </span>\n      </label>,\n    ]\n  ");
 });

package/dist/components/Molecules/Logos/Logos.js

@@ -33,26 +33,6 @@ var Logos = function Logos(_ref) {
     })));
   }
 
-  if (campaign === 'Big Night In') {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
-      href: "/",
-      title: "Go to Comic Relief homepage"
-    }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
-      rotate: true,
-      sizeSm: "50px",
-      sizeMd: "60px",
-      campaign: "Comic Relief"
-    })), /*#__PURE__*/_react.default.createElement("a", {
-      href: "/big-night-in",
-      title: "Big night in homepage"
-    }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
-      rotate: false,
-      sizeSm: "100px",
-      sizeMd: "200px",
-      campaign: "Big Night In"
-    })));
-  }
-
   if (campaign === 'Sport Relief') {
     return /*#__PURE__*/_react.default.createElement("a", {
       href: "/sportrelief",
@@ -67,7 +47,7 @@ var Logos = function Logos(_ref) {
     href: "/",
     title: "Go to Comic Relief homepage"
   }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
-    rotate: true,
+    rotate: false,
     campaign: "Comic Relief"
   }));
 };

package/package.json

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

package/src/components/Atoms/Checkbox/Checkbox.js

@@ -24,6 +24,7 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
     background-color: ${({ theme }) => theme.color('white')};
     border: 1px solid ${({ theme }) => theme.color('grey')};
     float: left;
+    flex-shrink: 0;
   }
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;

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

@@ -42,6 +42,9 @@ it('renders correctly', () => {
       background-color: #FFFFFF;
       border: 1px solid #969598;
       float: left;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
     }
 
     .c1:checked + span {
@@ -115,6 +118,9 @@ it('renders correctly', () => {
       background-color: #FFFFFF;
       border: 1px solid #969598;
       float: left;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
     }
 
     .c1:checked + span {

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

@@ -7,7 +7,6 @@ import spacing from '../../../theme/shared/spacing';
 import crLogo from './assets/cr-logo.svg';
 import srLogo from './assets/sr-logo.svg';
 import srLogoGameOn from './assets/sr-gameon-logo.svg';
-import bigNiht from './assets/big-night-logo.png';
 
 const Image = styled.img`
   object-fit: cover;
@@ -37,8 +36,6 @@ const themeSwitcher = theme => {
       return srLogo;
     case 'Sport Relief Gameon':
       return srLogoGameOn;
-    case 'Big Night In':
-      return bigNiht;
     default:
       return crLogo;
   }

package/src/components/Atoms/RadioButton/RadioButton.js

@@ -18,6 +18,7 @@ const StyledRadioInput = styled.input`
   opacity: 0;
   left: 0;
   right: 0;
+  flex-shrink: 0;
   + span {
     left: 2px;
     border-radius: 30px;

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

@@ -32,6 +32,9 @@ it('renders correctly', () => {
       opacity: 0;
       left: 0;
       right: 0;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
     }
 
     .c1 + span {
@@ -116,6 +119,9 @@ it('renders correctly', () => {
       opacity: 0;
       left: 0;
       right: 0;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
     }
 
     .c1 + span {

package/src/components/Molecules/Logos/Logos.js

@@ -17,24 +17,6 @@ const Logos = ({ campaign }) => {
     );
   }
 
-  if (campaign === 'Big Night In') {
-    return (
-      <>
-        <a href="/" title="Go to Comic Relief homepage">
-          <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" />
-        </a>
-        <a href="/big-night-in" title="Big night in homepage">
-          <Logo
-            rotate={false}
-            sizeSm="100px"
-            sizeMd="200px"
-            campaign="Big Night In"
-          />
-        </a>
-      </>
-    );
-  }
-
   if (campaign === 'Sport Relief') {
     return (
       <a href="/sportrelief" title="Sport Relief in homepage">
@@ -45,7 +27,7 @@ const Logos = ({ campaign }) => {
 
   return (
     <a href="/" title="Go to Comic Relief homepage">
-      <Logo rotate campaign="Comic Relief" />
+      <Logo rotate={false} campaign="Comic Relief" />
     </a>
   );
 };