@comicrelief/component-library 8.25.8 → 8.27.0

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

@@ -13,5 +13,194 @@ it('renders correctly', () => {
     },
     value: ""
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c4 {\n      width: 100%;\n      position: relative;\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      color: #5C5C5E;\n    }\n\n    .c7 {\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    }\n\n    .c8 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c9 {\n      position: relative;\n      width: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: end;\n      -webkit-justify-content: flex-end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c10 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10:focus {\n      border: 1px solid #666;\n    }\n\n    .c0 {\n      width: 100%;\n      max-width: 1440px;\n      margin: auto;\n    }\n\n    .c1 {\n      margin: 1rem auto;\n      padding: 0 calc((4 * 0.25rem));\n    }\n\n    .c2 {\n      margin: 4rem auto;\n      width: 100%;\n      border-bottom: 4px solid #E52630;\n      overflow: hidden;\n    }\n\n    .c3 {\n      width: 100%;\n      padding: 0 0.5rem;\n    }\n\n    .c5 input {\n      padding: 13px 0;\n      margin: 0;\n      max-width: 100%;\n      border: 0;\n      outline: #E52630;\n      background: none;\n    }\n\n    .c5 input:focus {\n      border: 0;\n    }\n\n    @media (min-width:740px) {\n\n    }\n\n    @media (min-width:1024px) {\n\n    }\n\n    @media (min-width:740px) {\n      .c5 input {\n        height: 100px;\n        font-size: 3rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <div\n        className=\"c1\"\n      >\n        <div\n          className=\"c2\"\n          role=\"search\"\n        >\n          <div\n            className=\"c3\"\n          >\n            <label\n              className=\"c4 c5\"\n              htmlFor=\"search\"\n            >\n              <span\n                className=\"c6 c7\"\n                color=\"inherit\"\n                dangerouslySetInnerHTML={\n                  Object {\n                    \"__html\": \"Search\",\n                  }\n                }\n                size=\"s\"\n              />\n              <div\n                className=\"c8\"\n              >\n                \n                <div\n                  className=\"c9\"\n                >\n                  <input\n                    aria-describedby=\"search\"\n                    className=\"c10\"\n                    id=\"search\"\n                    name=\"search\"\n                    onChange={[Function]}\n                    placeholder=\"\"\n                    required={false}\n                    role=\"searchbox\"\n                    type=\"text\"\n                    value=\"\"\n                  />\n                  \n                </div>\n              </div>\n              \n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c6 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c4 {
+      width: 100%;
+      position: relative;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      color: #5C5C5E;
+    }
+
+    .c7 {
+      border: 0;
+      -webkit-clip: rect(0 0 0 0);
+      clip: rect(0 0 0 0);
+      -webkit-clip-path: inset(50%);
+      clip-path: inset(50%);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+
+    .c8 {
+      position: relative;
+      font-size: 1.25rem;
+    }
+
+    .c9 {
+      position: relative;
+      width: 100%;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: end;
+      -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+      justify-content: flex-end;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+    }
+
+    .c10 {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      height: 48px;
+      padding: 1rem 2.4rem 1rem 1.5rem;
+      background-color: #F4F3F5;
+      border: 1px solid;
+      border-color: #E1E2E3;
+      box-shadow: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      color: #000000;
+      border-radius: 0.5rem;
+      font-size: inherit;
+      z-index: 2;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c10:focus {
+      border: 1px solid #666;
+    }
+
+    .c0 {
+      width: 100%;
+      max-width: 1440px;
+      margin: auto;
+    }
+
+    .c1 {
+      margin: 1rem auto;
+      padding: 0 calc((4 * 0.25rem));
+    }
+
+    .c2 {
+      margin: 4rem auto;
+      width: 100%;
+      border-bottom: 4px solid #E52630;
+      overflow: hidden;
+    }
+
+    .c3 {
+      width: 100%;
+      padding: 0 0.5rem;
+    }
+
+    .c5 input {
+      padding: 13px 0;
+      margin: 0;
+      max-width: 100%;
+      border: 0;
+      outline: #E52630;
+      background: none;
+    }
+
+    .c5 input:focus {
+      border: 0;
+    }
+
+    @media (min-width:740px) {
+
+    }
+
+    @media (min-width:1024px) {
+
+    }
+
+    @media (min-width:740px) {
+      .c5 input {
+        height: 100px;
+        font-size: 3rem;
+      }
+    }
+
+    <div
+      className="c0"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+          role="search"
+        >
+          <div
+            className="c3"
+          >
+            <label
+              className="c4 c5"
+              htmlFor="search"
+            >
+              <span
+                className="c6 c7"
+                color="inherit"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Search",
+                  }
+                }
+                size="s"
+              />
+              <div
+                className="c8"
+              >
+                
+                <div
+                  className="c9"
+                >
+                  <input
+                    aria-describedby="search"
+                    className="c10"
+                    id="search"
+                    name="search"
+                    onChange={[Function]}
+                    placeholder=""
+                    required={false}
+                    role="searchbox"
+                    type="text"
+                    value=""
+                  />
+                  
+                </div>
+              </div>
+              
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
 });

package/dist/components/Molecules/SearchResult/SearchResult.js

@@ -95,7 +95,7 @@ const SearchResult = _ref7 => {
   })), /*#__PURE__*/_react.default.createElement(CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     size: "xs",
     uppercase: true
-  }, "".concat(type ? " ".concat(type, " |") : '', " ").concat(date)), /*#__PURE__*/_react.default.createElement(Title, {
+  }, `${type ? ` ${type} |` : ''} ${date}`), /*#__PURE__*/_react.default.createElement(Title, {
     size: "xl",
     tag: "h3",
     uppercase: true

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/ShareButton/ShareButton.js

@@ -42,16 +42,16 @@ const ShareButton = _ref => {
     checkedUrl = urlToShare !== null ? urlToShare : window.location.href;
   }
   return /*#__PURE__*/_react.default.createElement(_ShareButton.Wrapper, null, /*#__PURE__*/_react.default.createElement(_ShareButton.Copy, null, copy), /*#__PURE__*/_react.default.createElement(_ShareButton.ShareButtonList, null, Object.keys(_ShareIcons.default).map(shareType => /*#__PURE__*/_react.default.createElement(_ShareButton.ShareButtonItem, {
-    key: "share-button--".concat(shareType)
+    key: `share-button--${shareType}`
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, Object.assign({
     onClick: e => handleShare(e, shareType, checkedUrl),
     icon: _ShareIcons.default[shareType],
-    title: "Share on ".concat(shareType),
+    title: `Share on ${shareType}`,
     brand: campaign,
     target: "_blank",
     role: "button",
     href: "#",
-    id: "share-button--".concat(shareType)
+    id: `share-button--${shareType}`
   }, restProps))))));
 };
 var _default = exports.default = ShareButton;

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

@@ -7,5 +7,116 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/sh
 var _ShareButton = _interopRequireDefault(require("./ShareButton"));
 it('renders correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ShareButton.default, null)).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      cursor: pointer;\n      display: block;\n      position: relative;\n      -webkit-transition: opacity 0.2s;\n      transition: opacity 0.2s;\n    }\n\n    .c4:hover,\n    .c4:focus {\n      opacity: 0.6;\n    }\n\n    .c5 {\n      width: 100%;\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      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n    }\n\n    .c1 {\n      width: auto;\n      margin: 0 1rem 0 0;\n    }\n\n    .c1:first-child {\n      margin-bottom: 0;\n    }\n\n    .c2 {\n      width: auto;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .c3 {\n      width: 40px;\n      height: 40px;\n      display: inline-block;\n      margin: 0.5rem;\n    }\n\n    <div\n      className=\"c0\"\n    >\n      <p\n        className=\"c1\"\n      >\n        Share with:\n      </p>\n      <ul\n        className=\"c2\"\n      >\n        <li\n          className=\"c3\"\n        >\n          <a\n            className=\"c4\"\n            data-test=\"icon-share-button-facebook\"\n            href=\"#\"\n            onClick={[Function]}\n            rel=\"noopener noreferrer\"\n            role=\"button\"\n            target=\"__blank\"\n            title=\"Share on Facebook\"\n          >\n            <img\n              alt=\"comicrelief\"\n              className=\"c5\"\n              src=\"mock.asset\"\n            />\n          </a>\n        </li>\n        <li\n          className=\"c3\"\n        >\n          <a\n            className=\"c4\"\n            data-test=\"icon-share-button-twitter\"\n            href=\"#\"\n            onClick={[Function]}\n            rel=\"noopener noreferrer\"\n            role=\"button\"\n            target=\"__blank\"\n            title=\"Share on Twitter\"\n          >\n            <img\n              alt=\"comicrelief\"\n              className=\"c5\"\n              src=\"mock.asset\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c4 {
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      cursor: pointer;
+      display: block;
+      position: relative;
+      -webkit-transition: opacity 0.2s;
+      transition: opacity 0.2s;
+    }
+
+    .c4:hover,
+    .c4:focus {
+      opacity: 0.6;
+    }
+
+    .c5 {
+      width: 100%;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+    }
+
+    .c1 {
+      width: auto;
+      margin: 0 1rem 0 0;
+    }
+
+    .c1:first-child {
+      margin-bottom: 0;
+    }
+
+    .c2 {
+      width: auto;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .c3 {
+      width: 40px;
+      height: 40px;
+      display: inline-block;
+      margin: 0.5rem;
+    }
+
+    <div
+      className="c0"
+    >
+      <p
+        className="c1"
+      >
+        Share with:
+      </p>
+      <ul
+        className="c2"
+      >
+        <li
+          className="c3"
+        >
+          <a
+            className="c4"
+            data-test="icon-share-button-facebook"
+            href="#"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            role="button"
+            target="__blank"
+            title="Share on Facebook"
+          >
+            <img
+              alt="comicrelief"
+              className="c5"
+              src="mock.asset"
+            />
+          </a>
+        </li>
+        <li
+          className="c3"
+        >
+          <a
+            className="c4"
+            data-test="icon-share-button-twitter"
+            href="#"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            role="button"
+            target="__blank"
+            title="Share on Twitter"
+          >
+            <img
+              alt="comicrelief"
+              className="c5"
+              src="mock.asset"
+            />
+          </a>
+        </li>
+      </ul>
+    </div>
+  `);
 });

package/dist/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.js

@@ -30,7 +30,7 @@ const schoolFetcher = async query => {
     throw new Error('Sorry, something unexpected went wrong. Please try again or enter your school manually');
   }
 };
-const schoolToString = school => "".concat(school.name, ", ").concat(school.post_code);
+const schoolToString = school => `${school.name}, ${school.post_code}`;
 
 /**
  * The component library's school lookup component uses a typeahead/search-as-you-type approach.

package/dist/components/Molecules/SingleMessage/SingleMessage.js

@@ -58,7 +58,7 @@ const SingleMessage = _ref => {
     if (thisRef.current) {
       const thisID = getID(thisRef.current);
       if (thisID) {
-        setUniqueID("".concat(thisID, "__video"));
+        setUniqueID(`${thisID}__video`);
       }
     }
   }, [thisRef]);
@@ -98,7 +98,7 @@ const SingleMessage = _ref => {
   const handlePlay = thisUniqueID => {
     setOnPlay(true);
     // Trigger play and update video state
-    const thisVideoID = "".concat(thisUniqueID, "__video");
+    const thisVideoID = `${thisUniqueID}__video`;
     setTimeout(() => {
       allPlayers[thisVideoID].playVideo();
       // Once video is playing, switch state to allow CSS to show/hide relevant layers
@@ -115,12 +115,12 @@ const SingleMessage = _ref => {
     /*#__PURE__*/
     // Creates namespaced UUIDs for each row
     _react.default.createElement(_reactUid.UID, {
-      name: id => "single-msg__".concat(id)
+      name: id => `single-msg__${id}`
     }, id => /*#__PURE__*/_react.default.createElement(_SingleMessage.Container, {
       backgroundColor: backgroundColor,
       copyFirst: copyFirst,
       vhFull: vhFull,
-      id: "".concat(id),
+      id: `${id}`,
       isPlaying: isPlaying,
       hasVideo: hasVideo,
       landscapeVideo: landscapeVideo,

package/dist/components/Molecules/SingleMessage/SingleMessage.style.js

@@ -161,7 +161,7 @@ const PlayButton = exports.PlayButton = _styledComponents.default.button.withCon
   let {
     isBuffering
   } = _ref25;
-  return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon.default, ")");
+  return isBuffering === true ? `url(${_loader.default})` : `url(${_videoPlayIcon.default})`;
 }, _ref26 => {
   let {
     copyFirst
@@ -176,7 +176,7 @@ const PlayButton = exports.PlayButton = _styledComponents.default.button.withCon
   let {
     isBuffering
   } = _ref28;
-  return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon__hover.default, ")");
+  return isBuffering === true ? `url(${_loader.default})` : `url(${_videoPlayIcon__hover.default})`;
 }, _ref29 => {
   let {
     theme

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/SingleMessageDs.js

@@ -145,7 +145,7 @@ const SingleMessageDs = _ref => {
   }), /*#__PURE__*/_react.default.createElement("iframe", {
     width: "100%",
     height: "100%",
-    src: "https://www.youtube.com/embed/".concat(youTubeId, "?&autoplay=1&enablejsapi=1"),
+    src: `https://www.youtube.com/embed/${youTubeId}?&autoplay=1&enablejsapi=1`,
     frameBorder: "0",
     allow: "accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture",
     allowFullScreen: true,

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -50,7 +50,7 @@ const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
   let {
     imageLeft
   } = _ref5;
-  return imageLeft ? "margin-right: ".concat((0, _spacing.default)('m')) : "margin-left: ".concat((0, _spacing.default)('m'));
+  return imageLeft ? `margin-right: ${(0, _spacing.default)('m')}` : `margin-left: ${(0, _spacing.default)('m')}`;
 }, _ref6 => {
   let {
     theme
@@ -86,7 +86,7 @@ const CTA = exports.CTA = _styledComponents.default.div.withConfig({
   let {
     hasImage
   } = _ref9;
-  return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
+  return !hasImage && `bottom: -${(0, _spacing.default)('m')};`;
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__Copy",
@@ -101,12 +101,12 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     hasLink
   } = _ref11;
-  return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('l'), " + ").concat((0, _spacing.default)('m'), ")");
+  return hasLink && `padding-bottom: calc(${(0, _spacing.default)('l')} + ${(0, _spacing.default)('m')})`;
 }, _ref12 => {
   let {
     imageLeft
   } = _ref12;
-  return imageLeft ? "margin: -".concat((0, _spacing.default)('m'), " 0 ").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), "; ").concat(CTA, " { right: ").concat((0, _spacing.default)('m'), ";}") : "margin: -".concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " 0; ").concat(CTA, " { left: ").concat((0, _spacing.default)('m'), ";}");
+  return imageLeft ? `margin: -${(0, _spacing.default)('m')} 0 ${(0, _spacing.default)('m')} ${(0, _spacing.default)('m')}; ${CTA} { right: ${(0, _spacing.default)('m')};}` : `margin: -${(0, _spacing.default)('m')} ${(0, _spacing.default)('m')} ${(0, _spacing.default)('m')} 0; ${CTA} { left: ${(0, _spacing.default)('m')};}`;
 }, _ref13 => {
   let {
     theme
@@ -116,12 +116,12 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     hasLink
   } = _ref14;
-  return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('l'), " + ").concat((0, _spacing.default)('m'), ")");
+  return hasLink && `padding-bottom: calc(${(0, _spacing.default)('l')} + ${(0, _spacing.default)('m')})`;
 }, _ref15 => {
   let {
     imageLeft
   } = _ref15;
-  return imageLeft ? "margin: ".concat((0, _spacing.default)('l'), " 0 ").concat((0, _spacing.default)('m'), " -").concat((0, _spacing.default)('m')) : "margin: ".concat((0, _spacing.default)('l'), " -").concat((0, _spacing.default)('m'), " ").concat((0, _spacing.default)('m'), " 0");
+  return imageLeft ? `margin: ${(0, _spacing.default)('l')} 0 ${(0, _spacing.default)('m')} -${(0, _spacing.default)('m')}` : `margin: ${(0, _spacing.default)('l')} -${(0, _spacing.default)('m')} ${(0, _spacing.default)('m')} 0`;
 }, _ref16 => {
   let {
     theme
@@ -131,10 +131,10 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     hasLink
   } = _ref17;
-  return hasLink && "padding-bottom: calc(".concat((0, _spacing.default)('m'), " * 3)");
+  return hasLink && `padding-bottom: calc(${(0, _spacing.default)('m')} * 3)`;
 }, _ref18 => {
   let {
     imageLeft
   } = _ref18;
-  return imageLeft ? "".concat((0, _spacing.default)('l'), " 0 ").concat((0, _spacing.default)('m'), " -").concat((0, _spacing.default)('l')) : "".concat((0, _spacing.default)('l'), " -").concat((0, _spacing.default)('l'), " ").concat((0, _spacing.default)('m'), " 0");
+  return imageLeft ? `${(0, _spacing.default)('l')} 0 ${(0, _spacing.default)('m')} -${(0, _spacing.default)('l')}` : `${(0, _spacing.default)('l')} -${(0, _spacing.default)('l')} ${(0, _spacing.default)('m')} 0`;
 });

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;