@comicrelief/component-library 8.25.7 → 8.26.0

package/dist/components/Atoms/Picture/Picture.js

@@ -1,12 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 require("lazysizes");
@@ -18,10 +18,9 @@ const Wrapper = _styledComponents.default.div.withConfig({
   componentId: "sc-1x3z81z-0"
 })(["", ";display:block;width:", ";height:", ";position:relative;", ";"], _ref => {
   let {
-    objFitState,
     nonObjFitImage
   } = _ref;
-  return !objFitState && nonObjFitImage && "background-image: url(".concat(nonObjFitImage, "); background-size: cover; background-position: center;");
+  return nonObjFitImage && "@supports not ((object-fit: cover) or (object-fit: none) or (object-fit: contain)) {\n        background-image: url(".concat(nonObjFitImage, ");\n        background-size: cover;\n        background-position: center;\n      }\n  ");
 }, props => props.width ? props.width : '100%', props => props.height ? props.height : '100%', _ref2 => {
   let {
     isBackgroundImage
@@ -31,12 +30,11 @@ const Wrapper = _styledComponents.default.div.withConfig({
 const Image = _styledComponents.default.img.withConfig({
   displayName: "Picture__Image",
   componentId: "sc-1x3z81z-1"
-})(["width:", ";height:", ";display:block;object-fit:", ";", ";", " ", " ", ""], props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto', props => props.objectFit === 'none' && 'none' || props.objectFit === 'cover' && 'cover' || props.objectFit === 'contain' && 'contain', _ref3 => {
+})(["width:", ";height:", ";display:block;object-fit:", ";", " ", " ", " ", ""], props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto', props => props.objectFit === 'none' && 'none' || props.objectFit === 'cover' && 'cover' || props.objectFit === 'contain' && 'contain', _ref3 => {
   let {
-    objectFit,
-    objFitState
+    objectFit
   } = _ref3;
-  return objectFit !== 'none' && !objFitState && 'visibility: hidden;';
+  return objectFit !== 'none' && "@supports not ((object-fit: cover) or (object-fit: contain)) {\n      visibility: hidden;\n    ";
 }, _ref4 => {
   let {
     smallBreakpointRowLayout
@@ -90,15 +88,7 @@ const Picture = _ref11 => {
     mediumBreakpointRowLayout = null,
     ...rest
   } = _ref11;
-  const document = typeof window !== 'undefined' ? window.document : null;
-  const [objFitState, setObjFitState] = (0, _react.useState)(true);
   let nonObjFitImage = null;
-  (0, _react.useEffect)(() => {
-    // Once document is available, determine if this browser supports object-fit
-    if ('objectFit' in document.documentElement.style === false) {
-      setObjFitState(false);
-    }
-  }, [document]);
 
   // Determine which image will be used for the nonObjectFit fallback
   if (image) {
@@ -113,16 +103,14 @@ const Picture = _ref11 => {
       image: image,
       images: images,
       isBackgroundImage: isBackgroundImage,
-      nonObjFitImage: nonObjFitImage,
-      objFitState: objFitState
+      nonObjFitImage: nonObjFitImage
     }, rest), /*#__PURE__*/_react.default.createElement(Image, {
       alt: alt,
       height: height,
       width: width,
       objectFit: objectFit,
       "data-src": image,
-      className: "lazyload",
-      objFitState: objFitState
+      className: "lazyload"
     }));
   }
   return /*#__PURE__*/_react.default.createElement(Wrapper, Object.assign({
@@ -130,11 +118,9 @@ const Picture = _ref11 => {
     width: width,
     image: image,
     images: images,
-    setObjFitState: setObjFitState,
     className: "lazyload",
     isBackgroundImage: isBackgroundImage,
-    nonObjFitImage: nonObjFitImage,
-    objFitState: objFitState
+    nonObjFitImage: nonObjFitImage
   }, rest), /*#__PURE__*/_react.default.createElement(Image, {
     alt: alt,
     height: height,
@@ -147,7 +133,6 @@ const Picture = _ref11 => {
     "data-sizes": "auto",
     "data-lowsrc": imageLow,
     className: "lazyload",
-    objFitState: objFitState,
     smallBreakpointRowLayout: smallBreakpointRowLayout,
     mediumBreakpointRowLayout: mediumBreakpointRowLayout
   }));

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

@@ -6,15 +6,15 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
 var _Picture = _interopRequireDefault(require("./Picture"));
 var _data = require("../../../styleguide/data/data");
-it("renders correctly", () => {
+it('renders correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
     images: _data.defaultData.images,
     image: _data.defaultData.image,
     alt: "Test images"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c1 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"auto\"\n      width=\"100%\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"auto\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"100%\"\n      />\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c1 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c0 {\n        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"auto\"\n      width=\"100%\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"auto\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"100%\"\n      />\n    </div>\n  ");
 });
-it("renders correctly with custom props", () => {
+it('renders correctly with custom props', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
     images: _data.defaultData.images,
     image: _data.defaultData.image,
@@ -23,5 +23,5 @@ it("renders correctly with custom props", () => {
     height: "100px",
     alt: "Test images"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 200px;\n      height: 100px;\n      position: relative;\n    }\n\n    .c1 {\n      width: 200px;\n      height: 100px;\n      display: block;\n      object-fit: cover;\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"100px\"\n      width=\"200px\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"100px\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"200px\"\n      />\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 200px;\n      height: 100px;\n      position: relative;\n    }\n\n    .c1 {\n      width: 200px;\n      height: 100px;\n      display: block;\n      object-fit: cover;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c0 {\n        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:contain)) {\n      .c1 {\n        visibility: hidden;\n      }\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"100px\"\n      width=\"200px\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"100px\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"200px\"\n      />\n    </div>\n  ");
 });

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -18,7 +18,7 @@ it('renders article teaser correctly', () => {
     smallImageWidth: "25%",
     largeImageWidth: "100%"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c6 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\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      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n    }\n\n    .c3 img {\n      border-radius: 1rem 1rem 0 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        -webkit-flex-direction: column;\n        -ms-flex-direction: column;\n        flex-direction: column;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c3 {\n        width: 45%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 0 0 1rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c3 {\n        width: 100%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 1rem 0 0;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c7 {\n        width: 55%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"100%\"\n            width=\"100%\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc={null}\n              data-sizes=\"auto\"\n              data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n              height=\"100%\"\n              src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"100%\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            News article\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c6 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\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      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n    }\n\n    .c3 img {\n      border-radius: 1rem 1rem 0 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c4 {\n        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:contain)) {\n      .c6 {\n        visibility: hidden;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        -webkit-flex-direction: column;\n        -ms-flex-direction: column;\n        flex-direction: column;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c3 {\n        width: 45%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 0 0 1rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c3 {\n        width: 100%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 1rem 0 0;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c7 {\n        width: 55%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"100%\"\n            width=\"100%\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc={null}\n              data-sizes=\"auto\"\n              data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n              height=\"100%\"\n              src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"100%\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            News article\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
 });
 it('renders press realese correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
@@ -29,5 +29,5 @@ it('renders press realese correctly', () => {
     alt: "Image's description",
     logoSize: "80px"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 80px;\n      height: 80px;\n      position: relative;\n    }\n\n    .c6 {\n      width: 80px;\n      height: 80px;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: row;\n      -ms-flex-direction: row;\n      flex-direction: row;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\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      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n      padding-left: 1rem;\n    }\n\n    .c3 img {\n      border-radius: 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"80px\"\n            width=\"80px\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc=\"mock.asset\"\n              data-sizes=\"auto\"\n              data-src=\"mock.asset\"\n              data-srcset=\"mock.asset\"\n              height=\"80px\"\n              src=\"mock.asset\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"80px\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            Press Release\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 80px;\n      height: 80px;\n      position: relative;\n    }\n\n    .c6 {\n      width: 80px;\n      height: 80px;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: row;\n      -ms-flex-direction: row;\n      flex-direction: row;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\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      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n      padding-left: 1rem;\n    }\n\n    .c3 img {\n      border-radius: 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c4 {\n        background-image: url(mock.asset);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:contain)) {\n      .c6 {\n        visibility: hidden;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"80px\"\n            width=\"80px\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc=\"mock.asset\"\n              data-sizes=\"auto\"\n              data-src=\"mock.asset\"\n              data-srcset=\"mock.asset\"\n              height=\"80px\"\n              src=\"mock.asset\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"80px\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            Press Release\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
 });

package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap

@@ -189,6 +189,12 @@ exports[`renders correctly with no body 1`] = `
   height: auto;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:0px) {
   .c0 {
     -webkit-flex-direction: column;

package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -119,6 +119,20 @@ exports[`renders Column view correctly 1`] = `
   z-index: 2;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -377,6 +391,20 @@ exports[`renders correctly 1`] = `
   z-index: 2;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;

package/dist/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -15,5 +15,5 @@ it('renders correctly', () => {
     imageLow: _data.defaultData.imageLow,
     images: _data.defaultData.images
   }))).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      color: #FFFFFF;\n      font-size: 0.6875rem;\n      line-height: 0.6875rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c6 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n      height: auto;\n    }\n\n    .c1 {\n      display: block;\n      position: relative;\n      padding: 0;\n      border: none;\n    }\n\n    .c1:hover,\n    .c1:focus {\n      border: none;\n    }\n\n    .c1:hover .c5,\n    .c1:focus .c5 {\n      overflow: inherit;\n      -webkit-clip-path: none;\n      clip-path: none;\n      margin: 0;\n      text-align: center;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      -webkit-clip: auto;\n      clip: auto;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      z-index: 2;\n    }\n\n    .c1:hover::after,\n    .c1:focus::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #E52630;\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 1rem;\n      }\n    }\n\n    <a\n      className=\"c0 c1\"\n      color=\"red\"\n      href=\"https://www.comicrelief.com\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      <div\n        className=\"c2 lazyload\"\n        height=\"auto\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"test Image\"\n          className=\"c3 lazyload\"\n          data-lowsrc=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100\"\n          data-sizes=\"auto\"\n          data-src={null}\n          data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n          height=\"auto\"\n          src={null}\n          srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          width=\"100%\"\n        />\n      </div>\n      <span\n        className=\"c4 c5 c6\"\n        color=\"white\"\n        size=\"xxs\"\n      >\n        Find out more\n      </span>\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      color: #FFFFFF;\n      font-size: 0.6875rem;\n      line-height: 0.6875rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c6 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n      height: auto;\n    }\n\n    .c1 {\n      display: block;\n      position: relative;\n      padding: 0;\n      border: none;\n    }\n\n    .c1:hover,\n    .c1:focus {\n      border: none;\n    }\n\n    .c1:hover .c5,\n    .c1:focus .c5 {\n      overflow: inherit;\n      -webkit-clip-path: none;\n      clip-path: none;\n      margin: 0;\n      text-align: center;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      -webkit-clip: auto;\n      clip: auto;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      z-index: 2;\n    }\n\n    .c1:hover::after,\n    .c1:focus::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #E52630;\n    }\n\n    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {\n      .c2 {\n        background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);\n        background-size: cover;\n        background-position: center;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 1rem;\n      }\n    }\n\n    <a\n      className=\"c0 c1\"\n      color=\"red\"\n      href=\"https://www.comicrelief.com\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      <div\n        className=\"c2 lazyload\"\n        height=\"auto\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"test Image\"\n          className=\"c3 lazyload\"\n          data-lowsrc=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100\"\n          data-sizes=\"auto\"\n          data-src={null}\n          data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n          height=\"auto\"\n          src={null}\n          srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          width=\"100%\"\n        />\n      </div>\n      <span\n        className=\"c4 c5 c6\"\n        color=\"white\"\n        size=\"xxs\"\n      >\n        Find out more\n      </span>\n    </a>\n  ");
 });

package/dist/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -153,6 +153,20 @@ exports[`renders Promo correctly 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c2 {
+    background-image: url(../promo.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;
@@ -431,6 +445,20 @@ exports[`renders Promo correctly end position 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c2 {
+    background-image: url(../promo.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c3 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c9 {
     width: auto;

package/dist/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap

@@ -97,6 +97,12 @@ exports[`renders correctly in minimalist form 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -279,6 +285,12 @@ exports[`renders correctly with copy 1`] = `
   }
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -452,6 +464,12 @@ exports[`renders correctly with date 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;
@@ -619,6 +637,12 @@ exports[`renders correctly with date and type 1`] = `
   margin: 0;
 }
 
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c5 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c2 {
     -webkit-flex-direction: row;

package/dist/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -65,6 +65,20 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -278,6 +292,20 @@ exports[`renders Single Message with Image correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -482,6 +510,20 @@ exports[`renders Single Message with double image correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -736,6 +778,20 @@ exports[`renders Single Message with full width correctly 1`] = `
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -940,6 +996,20 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   z-index: 1;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
 
 }
@@ -1066,6 +1136,14 @@ exports[`renders Single Message with no Image correctly 1`] = `
   padding: 1rem;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+
+}
+
 @media (min-width:740px) {
 
 }

package/dist/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -153,6 +153,20 @@ exports[`renders correctly 1`] = `
   right: 1.5rem;
 }
 
+@supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+  .c3 {
+    background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+@supports not ((object-fit:cover) or (object-fit:contain)) {
+  .c4 {
+    visibility: hidden;
+  }
+}
+
 @media (min-width:740px) {
   .c12 {
     width: auto;

package/dist/components/Organisms/Donate/Donate.js

@@ -108,8 +108,7 @@ const Donate = _ref => {
     noTitlesAtAll: noTitlesAtAll,
     paddingOption: paddingOption
   }, !noTitlesAtAll && /*#__PURE__*/_react.default.createElement(_Donate.TitleWrapperOuter, {
-    formAlignRight: formAlignRight,
-    "data-test": "this-one-here"
+    formAlignRight: formAlignRight
   }, /*#__PURE__*/_react.default.createElement(_Donate.TitleWrapperInner, null, showCopy && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h2",
     color: textColor,

package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.js

@@ -29,7 +29,7 @@ const GivingSelector = _ref => {
     type: "radio",
     label: "",
     checked: givingType === 'single',
-    onClick: () => handleGivingTypeChange('single', givingType)
+    onChange: () => handleGivingTypeChange('single', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'single',
     htmlFor: "give-once--".concat(mbshipID)
@@ -41,7 +41,7 @@ const GivingSelector = _ref => {
     type: "radio",
     label: "",
     checked: givingType === 'monthly',
-    onClick: () => handleGivingTypeChange('monthly', givingType)
+    onChange: () => handleGivingTypeChange('monthly', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'monthly',
     htmlFor: "give-monthly--".concat(mbshipID)

package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -538,7 +538,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   >
     <div
       className="c2"
-      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -574,7 +573,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             className="give-once"
             id="give-once--mship-4"
             label=""
-            onClick={[Function]}
+            onChange={[Function]}
             type="radio"
             value="Single"
           />
@@ -590,7 +589,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             className="give-monthly"
             id="give-monthly--mship-4"
             label=""
-            onClick={[Function]}
+            onChange={[Function]}
             type="radio"
             value="Monthly"
           />
@@ -1199,7 +1198,6 @@ exports[`Monthly donation renders correctly 1`] = `
   >
     <div
       className="c2"
-      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -1235,7 +1233,7 @@ exports[`Monthly donation renders correctly 1`] = `
             className="give-once"
             id="give-once--mship-1"
             label=""
-            onClick={[Function]}
+            onChange={[Function]}
             type="radio"
             value="Single"
           />
@@ -1251,7 +1249,7 @@ exports[`Monthly donation renders correctly 1`] = `
             className="give-monthly"
             id="give-monthly--mship-1"
             label=""
-            onClick={[Function]}
+            onChange={[Function]}
             type="radio"
             value="Monthly"
           />
@@ -1885,7 +1883,6 @@ exports[`Single donation renders correctly 1`] = `
   >
     <div
       className="c2"
-      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -2508,7 +2505,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   >
     <div
       className="c2"
-      data-test="this-one-here"
     >
       <div
         className="c3"