@comicrelief/component-library 8.26.0 → 8.28.0

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

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

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

@@ -11,7 +11,7 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Cardstyle__Container",
   componentId: "sc-cxn4co-0"
-})(["position:relative;display:flex;height:100%;border-radius:", ";overflow:hidden;background:", ";@media ", "{flex-direction:", ";gap:", ";background:", ";}@media ", "{flex-direction:", ";gap:", ";background:", ";}@media ", "{flex-direction:column;background:", ";}"], props => props.squaredCorners ? '0' : "".concat((0, _spacing.default)('md')), _ref => {
+})(["position:relative;display:flex;height:100%;border-radius:", ";overflow:hidden;background:", ";@media ", "{flex-direction:", ";gap:", ";background:", ";}@media ", "{flex-direction:", ";gap:", ";background:", ";}@media ", "{flex-direction:column;background:", ";}"], props => props.squaredCorners ? '0' : `${(0, _spacing.default)('md')}`, _ref => {
   let {
     theme,
     backgroundColor

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

@@ -11,5 +11,108 @@ it("renders article teaser correctly", () => {
     category: "Gender Justice",
     handleToggle: handleToggle
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\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      width: auto;\n      height: 48px;\n      border-radius: 2rem;\n      background-color: #d5d5d5;\n      margin: 0.5rem 0.5rem 0 0;\n      padding: 4px;\n      padding-right: 1rem;\n      -webkit-flex: 0 0 auto;\n      -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n      position: relative;\n    }\n\n    .c2 {\n      display: block;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      opacity: 0.2;\n      border-radius: 2rem;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n\n    .c2:hover {\n      background: #E1E2E3;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 40px;\n      height: 40px;\n      margin: 0;\n      border: 1px solid #666;\n    }\n\n    .c1 + span {\n      background: url(mock.asset) no-repeat center;\n      background-size: 24px;\n      margin-right: 1rem;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background-color: #969598;\n      float: left;\n      z-index: 2;\n    }\n\n    .c1:checked ~ span {\n      background-size: 24px;\n      background-color: #6F3AAB;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        margin: 1rem 1rem 0 0;\n      }\n    }\n\n    <label\n      className=\"c0\"\n    >\n      <input\n        checked={false}\n        className=\"c1\"\n        color=\"purple\"\n        onChange={[Function]}\n        type=\"checkbox\"\n        value=\"Gender Justice\"\n      />\n      <span />\n      <span\n        className=\"c2\"\n      />\n      Gender Justice\n    </label>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .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;
+      width: auto;
+      height: 48px;
+      border-radius: 2rem;
+      background-color: #d5d5d5;
+      margin: 0.5rem 0.5rem 0 0;
+      padding: 4px;
+      padding-right: 1rem;
+      -webkit-flex: 0 0 auto;
+      -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+      position: relative;
+    }
+
+    .c2 {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0.2;
+      border-radius: 2rem;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+
+    .c2:hover {
+      background: #E1E2E3;
+    }
+
+    .c1 {
+      display: block;
+      box-sizing: border-box;
+      opacity: 0;
+      position: absolute;
+      left: 0px;
+      width: 40px;
+      height: 40px;
+      margin: 0;
+      border: 1px solid #666;
+    }
+
+    .c1 + span {
+      background: url(mock.asset) no-repeat center;
+      background-size: 24px;
+      margin-right: 1rem;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: #969598;
+      float: left;
+      z-index: 2;
+    }
+
+    .c1:checked ~ span {
+      background-size: 24px;
+      background-color: #6F3AAB;
+    }
+
+    .c1:focus + span {
+      border-color: #666;
+      border-width: 3px;
+    }
+
+    .c1:focus + span {
+      border-color: #666;
+      border-width: 3px;
+    }
+
+    @media (min-width:740px) {
+      .c0 {
+        margin: 1rem 1rem 0 0;
+      }
+    }
+
+    <label
+      className="c0"
+    >
+      <input
+        checked={false}
+        className="c1"
+        color="purple"
+        onChange={[Function]}
+        type="checkbox"
+        value="Gender Justice"
+      />
+      <span />
+      <span
+        className="c2"
+      />
+      Gender Justice
+    </label>
+  `);
 });

package/dist/components/Molecules/Descriptor/Descriptor.js

@@ -131,7 +131,7 @@ const Descriptor = _ref3 => {
     const key = theme + index;
     return /*#__PURE__*/_react.default.createElement(Image, {
       src: themeSwitcher(theme),
-      alt: "".concat(theme, " icon"),
+      alt: `${theme} icon`,
       key: key
     });
   });