@comicrelief/component-library 8.26.0 → 8.28.0

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

@@ -11,7 +11,33 @@ it('renders a standard styled link correctly', () => {
     href: "/test",
     type: "standard"
   }, "A standard link")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\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    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      A standard link\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      position: relative;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      display: inline;
+      line-height: 1.5rem;
+      color: #000000;
+      border-bottom: 2px solid #000000;
+      font-weight: normal;
+    }
+
+    .c0:hover {
+      color: #000000;
+      border-bottom: 2px solid #000000;
+    }
+
+    <a
+      className="c0"
+      color="red"
+      href="/test"
+      target="_self"
+      type="standard"
+    >
+      A standard link
+    </a>
+  `);
 });
 it('renders a button with an icon', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
@@ -22,7 +48,88 @@ it('renders a button with an icon', () => {
       colour: "white"
     })
   }, "Internal link")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      margin-left: 1rem;\n      -webkit-align-self: center;\n      -ms-flex-item-align: center;\n      align-self: center;\n      right: 1.5rem;\n      position: absolute;\n      right: -2rem;\n      top: 0;\n      bottom: 0;\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    .c2 {\n      fill: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c1 {\n        width: auto;\n        right: auto;\n        position: relative;\n        position: absolute;\n        right: -2rem;\n        top: 0;\n        bottom: 0;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        fill: #FFFFFF;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      Internal link\n      <span\n        className=\"c1\"\n        type=\"standard\"\n      >\n        <svg\n          className=\"c2\"\n          fill=\"#FFFFFF\"\n          height={24}\n          viewBox=\"0 0 96 96\"\n          width={24}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z\"\n          />\n        </svg>\n      </span>\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      margin-left: 1rem;
+      -webkit-align-self: center;
+      -ms-flex-item-align: center;
+      align-self: center;
+      right: 1.5rem;
+      position: absolute;
+      right: -2rem;
+      top: 0;
+      bottom: 0;
+    }
+
+    .c0 {
+      position: relative;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      display: inline;
+      line-height: 1.5rem;
+      color: #000000;
+      border-bottom: 2px solid #000000;
+      font-weight: normal;
+    }
+
+    .c0:hover {
+      color: #000000;
+      border-bottom: 2px solid #000000;
+    }
+
+    .c2 {
+      fill: #FFFFFF;
+    }
+
+    @media (min-width:740px) {
+      .c1 {
+        width: auto;
+        right: auto;
+        position: relative;
+        position: absolute;
+        right: -2rem;
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c2 {
+        fill: #FFFFFF;
+      }
+    }
+
+    <a
+      className="c0"
+      color="red"
+      href="/test"
+      target="_self"
+      type="standard"
+    >
+      Internal link
+      <span
+        className="c1"
+        type="standard"
+      >
+        <svg
+          className="c2"
+          fill="#FFFFFF"
+          height={24}
+          viewBox="0 0 96 96"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z"
+          />
+        </svg>
+      </span>
+    </a>
+  `);
 });
 it('renders a standard styled link correctly with target blank and assistive text', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
@@ -30,7 +137,53 @@ it('renders a standard styled link correctly with target blank and assistive tex
     type: "standard",
     target: "blank"
   }, "A standard link")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\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    .c1 {\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    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_blank\"\n      type=\"standard\"\n    >\n      A standard link\n      <span\n        className=\"c1\"\n      >\n        (opens in new window)\n      </span>\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      position: relative;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      display: inline;
+      line-height: 1.5rem;
+      color: #000000;
+      border-bottom: 2px solid #000000;
+      font-weight: normal;
+    }
+
+    .c0:hover {
+      color: #000000;
+      border-bottom: 2px solid #000000;
+    }
+
+    .c1 {
+      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;
+    }
+
+    <a
+      className="c0"
+      color="red"
+      href="/test"
+      target="_blank"
+      type="standard"
+    >
+      A standard link
+      <span
+        className="c1"
+      >
+        (opens in new window)
+      </span>
+    </a>
+  `);
 });
 it('renders link styled as button correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
@@ -38,5 +191,67 @@ it('renders link styled as button correctly', () => {
     type: "button",
     color: "yellow"
   }, "A yellow button")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      cursor: pointer;\n      background-color: #FFE400;\n      color: #000000;\n    }\n\n    .c0:hover {\n      background-color: #FEFD5A;\n      color: #000000;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        background-color: #FFE400;\n        color: #000000;\n      }\n\n      .c0:hover {\n        background-color: #FEFD5A;\n        color: #000000;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"yellow\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"button\"\n    >\n      A yellow button\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      position: relative;
+      padding: 0.5rem 1.25rem;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      font-weight: 700;
+      font-size: 1rem;
+      border-radius: 2rem;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      height: 3.125rem;
+      width: 100%;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      cursor: pointer;
+      background-color: #FFE400;
+      color: #000000;
+    }
+
+    .c0:hover {
+      background-color: #FEFD5A;
+      color: #000000;
+    }
+
+    @media (min-width:740px) {
+      .c0 {
+        width: auto;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 {
+        background-color: #FFE400;
+        color: #000000;
+      }
+
+      .c0:hover {
+        background-color: #FEFD5A;
+        color: #000000;
+      }
+    }
+
+    <a
+      className="c0"
+      color="yellow"
+      href="/test"
+      target="_self"
+      type="button"
+    >
+      A yellow button
+    </a>
+  `);
 });

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

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

package/dist/components/Atoms/Pagination/Item/Item.js

@@ -14,7 +14,7 @@ const Item = _ref => {
     ...restProps
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Item.default, Object.assign({
-    target: "_".concat(target)
+    target: `_${target}`
   }, restProps), children);
 };
 var _default = exports.default = Item;

package/dist/components/Atoms/Pagination/List/List.js

@@ -33,7 +33,7 @@ const List = _ref => {
       value
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement(StyledItem, {
-      key: "".concat(ariaLabel, " ").concat(value)
+      key: `${ariaLabel} ${value}`
     }, /*#__PURE__*/_react.default.createElement(PageComponent, Object.assign({
       selected: selected,
       disabled: disabled,

package/dist/components/Atoms/Pagination/Pagination.js

@@ -31,7 +31,7 @@ const Pagination = _ref => {
     firstAriaLabel = 'First page',
     lastAriaLabel = 'Last page',
     moreAriaLabel = 'More pages',
-    getPageAriaLabel = currentPage => "Page ".concat(currentPage),
+    getPageAriaLabel = currentPage => `Page ${currentPage}`,
     target = 'self',
     color = 'black',
     backgroundColor = 'white',

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

@@ -10,7 +10,7 @@ it('renders correctly in minimalist form', () => {
     maxPages: 5,
     totalPages: 5,
     currentPage: 3,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: false,
     showPrevious: false,
@@ -25,7 +25,7 @@ it('renders correctly in minimalist form with non-default color', () => {
     maxPages: 5,
     totalPages: 5,
     currentPage: 3,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: false,
     showPrevious: false,
@@ -41,7 +41,7 @@ it('renders correctly in full size with max pages more than total pages', () =>
     maxPages: 10,
     totalPages: 6,
     currentPage: 4,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -56,7 +56,7 @@ it('renders correctly in full size with max pages less than total pages', () =>
     maxPages: 6,
     totalPages: 10,
     currentPage: 2,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -71,7 +71,7 @@ it('renders correctly in full size with max pages less than current page', () =>
     maxPages: 5,
     totalPages: 20,
     currentPage: 19,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -86,7 +86,7 @@ it('renders correctly in full size with first page selected', () => {
     maxPages: 5,
     totalPages: 5,
     currentPage: 1,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -101,7 +101,7 @@ it('renders correctly in full size with last page selected', () => {
     maxPages: 5,
     totalPages: 5,
     currentPage: 5,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -116,7 +116,7 @@ it('renders correctly in full size with more on left', () => {
     maxPages: 5,
     totalPages: 6,
     currentPage: 4,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -131,7 +131,7 @@ it('renders correctly in full size with more on right', () => {
     maxPages: 5,
     totalPages: 6,
     currentPage: 3,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -146,7 +146,7 @@ it('renders correctly in full size with more on both sides', () => {
     maxPages: 5,
     totalPages: 7,
     currentPage: 4,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -161,7 +161,7 @@ it('renders correctly with custom style', () => {
     maxPages: 5,
     totalPages: 10,
     currentPage: 5,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -184,7 +184,7 @@ it('renders correctly with custom labels', () => {
     maxPages: 5,
     totalPages: 5,
     currentPage: 3,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,
@@ -196,7 +196,7 @@ it('renders correctly with custom labels', () => {
     firstLabel: "First",
     lastLabel: "Last",
     moreLabel: "More",
-    getPageLabel: value => "Page ".concat(value)
+    getPageLabel: value => `Page ${value}`
   })).toJSON();
   expect(tree).toMatchSnapshot();
 });
@@ -205,7 +205,7 @@ it('renders nothing in case of no pages', () => {
     maxPages: 5,
     totalPages: 0,
     currentPage: 2,
-    createURL: value => "example.com/page/".concat(value),
+    createURL: value => `example.com/page/${value}`,
     onSelect: value => value,
     showFirst: true,
     showPrevious: true,

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

@@ -20,7 +20,12 @@ const Wrapper = _styledComponents.default.div.withConfig({
   let {
     nonObjFitImage
   } = _ref;
-  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  ");
+  return nonObjFitImage && `@supports not ((object-fit: cover) or (object-fit: none) or (object-fit: contain)) {
+        background-image: url(${nonObjFitImage});
+        background-size: cover;
+        background-position: center;
+      }
+  `;
 }, props => props.width ? props.width : '100%', props => props.height ? props.height : '100%', _ref2 => {
   let {
     isBackgroundImage
@@ -34,7 +39,9 @@ const Image = _styledComponents.default.img.withConfig({
   let {
     objectFit
   } = _ref3;
-  return objectFit !== 'none' && "@supports not ((object-fit: cover) or (object-fit: contain)) {\n      visibility: hidden;\n    ";
+  return objectFit !== 'none' && `@supports not ((object-fit: cover) or (object-fit: contain)) {
+      visibility: hidden;
+    `;
 }, _ref4 => {
   let {
     smallBreakpointRowLayout

package/dist/components/Atoms/Picture/Picture.md

@@ -10,7 +10,8 @@ const defaultData = require('../../../styleguide/data/data').defaultData;
 Custom Size.
 
 ```js
-const defaultData = require('../../../styleguide/data/data').defaultData;<Picture
+const defaultData = require('../../../styleguide/data/data').defaultData;
+<Picture
   alt="test Image"
   imageLow={defaultData.imageLow}
   images={defaultData.images}

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

@@ -12,7 +12,48 @@ it('renders correctly', () => {
     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    @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  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      display: block;
+      width: 100%;
+      height: auto;
+      position: relative;
+    }
+
+    .c1 {
+      width: 100%;
+      height: auto;
+      display: block;
+      object-fit: none;
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c0 {
+        background-image: url(http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    <div
+      className="c0 lazyload"
+      height="auto"
+      width="100%"
+    >
+      <img
+        alt="Test images"
+        className="c1 lazyload"
+        data-lowsrc={null}
+        data-sizes="auto"
+        data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
+        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"
+        height="auto"
+        src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
+        srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width="100%"
+      />
+    </div>
+  `);
 });
 it('renders correctly with custom props', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
@@ -23,5 +64,52 @@ 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    @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  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      display: block;
+      width: 200px;
+      height: 100px;
+      position: relative;
+    }
+
+    .c1 {
+      width: 200px;
+      height: 100px;
+      display: block;
+      object-fit: cover;
+    }
+
+    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
+      .c0 {
+        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)) {
+      .c1 {
+        visibility: hidden;
+      }
+    }
+
+    <div
+      className="c0 lazyload"
+      height="100px"
+      width="200px"
+    >
+      <img
+        alt="Test images"
+        className="c1 lazyload"
+        data-lowsrc={null}
+        data-sizes="auto"
+        data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
+        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"
+        height="100px"
+        src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
+        srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width="200px"
+      />
+    </div>
+  `);
 });