@comicrelief/component-library 8.28.0 → 8.29.0

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

@@ -23,6 +23,7 @@ const Link = _ref => {
     underline = true,
     icon = null,
     iconFirst = false,
+    fullWidth = false,
     ...rest
   } = _ref;
   const [documentHost, setDocumentHost] = (0, _react.useState)('');
@@ -61,7 +62,8 @@ const Link = _ref => {
     type: type,
     home: home,
     iconFirst: iconFirst,
-    underline: underline
+    underline: underline,
+    fullWidth: fullWidth
   }), children, window === '_blank' && /*#__PURE__*/_react.default.createElement(_Link.HelperText, null, "(opens in new window)"), hasIcon && /*#__PURE__*/_react.default.createElement(_Link.IconWrapper, {
     type: type
   }, icon));

package/dist/components/Atoms/Link/Link.md

@@ -210,6 +210,11 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
         White button
       </Link>
     </div>
+    <div style={{ display: 'block', marginTop: '10px' }}>
+      <Link color="red" href="/test" target="blank" type="button" fullWidth>
+        Full-width red button
+      </Link>
+    </div>
   </div>
 </div>
 ```

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

@@ -9,7 +9,7 @@ exports.default = exports.IconWrapper = exports.HelperText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
-const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", ";", ";@media ", "{width:auto;}@media ", "{", ";}"], _ref => {
+const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", ";", ";@media ", "{width:", ";}@media ", "{", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -33,55 +33,60 @@ const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;posit
   return theme.allBreakpoints('M');
 }, _ref5 => {
   let {
-    theme
+    fullWidth
   } = _ref5;
-  return theme.allBreakpoints('L');
+  return fullWidth ? '100%' : 'auto';
 }, _ref6 => {
   let {
-    color,
     theme
   } = _ref6;
+  return theme.allBreakpoints('L');
+}, _ref7 => {
+  let {
+    color,
+    theme
+  } = _ref7;
   return color ? theme.buttonColors(color) : theme.buttonColors('red');
 });
-const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref7 => {
+const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.fontSize('l');
-}, _ref8 => {
+}, _ref9 => {
   let {
     type,
     theme,
     underline
-  } = _ref8;
+  } = _ref9;
   return type ? theme.linkStyles(type, underline) : theme.linkStyles('standard', underline);
 });
 const IconWrapper = exports.IconWrapper = _styledComponents.default.span.withConfig({
   displayName: "Linkstyle__IconWrapper",
   componentId: "sc-t360tr-0"
-})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref9 => {
+})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref10 => {
   let {
     type
-  } = _ref9;
+  } = _ref10;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
-}, _ref10 => {
+}, _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.allBreakpoints('M');
-}, _ref11 => {
+}, _ref12 => {
   let {
     type
-  } = _ref11;
+  } = _ref12;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
 });
 const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Linkstyle__StyledLink",
   componentId: "sc-t360tr-1"
-})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref12 => {
+})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref13 => {
   let {
     iconFirst
-  } = _ref12;
+  } = _ref13;
   return iconFirst && (0, _styledComponents.css)(["flex-direction:row-reverse;span[type=\"button\"]{margin-left:0;margin-right:1rem;}"]);
 });
 const HelperText = exports.HelperText = _styledComponents.default.span.withConfig({

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

@@ -1,12 +1,12 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 require("lazysizes");
@@ -18,14 +18,10 @@ const Wrapper = _styledComponents.default.div.withConfig({
   componentId: "sc-1x3z81z-0"
 })(["", ";display:block;width:", ";height:", ";position:relative;", ";"], _ref => {
   let {
+    objFitState,
     nonObjFitImage
   } = _ref;
-  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;
-      }
-  `;
+  return !objFitState && nonObjFitImage && `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
@@ -35,13 +31,12 @@ 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
+    objectFit,
+    objFitState
   } = _ref3;
-  return objectFit !== 'none' && `@supports not ((object-fit: cover) or (object-fit: contain)) {
-      visibility: hidden;
-    `;
+  return objectFit !== 'none' && !objFitState && 'visibility: hidden;';
 }, _ref4 => {
   let {
     smallBreakpointRowLayout
@@ -95,7 +90,15 @@ 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) {
@@ -110,14 +113,16 @@ const Picture = _ref11 => {
       image: image,
       images: images,
       isBackgroundImage: isBackgroundImage,
-      nonObjFitImage: nonObjFitImage
+      nonObjFitImage: nonObjFitImage,
+      objFitState: objFitState
     }, rest), /*#__PURE__*/_react.default.createElement(Image, {
       alt: alt,
       height: height,
       width: width,
       objectFit: objectFit,
       "data-src": image,
-      className: "lazyload"
+      className: "lazyload",
+      objFitState: objFitState
     }));
   }
   return /*#__PURE__*/_react.default.createElement(Wrapper, Object.assign({
@@ -125,9 +130,11 @@ const Picture = _ref11 => {
     width: width,
     image: image,
     images: images,
+    setObjFitState: setObjFitState,
     className: "lazyload",
     isBackgroundImage: isBackgroundImage,
-    nonObjFitImage: nonObjFitImage
+    nonObjFitImage: nonObjFitImage,
+    objFitState: objFitState
   }, rest), /*#__PURE__*/_react.default.createElement(Image, {
     alt: alt,
     height: height,
@@ -140,6 +147,7 @@ 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,7 +6,7 @@ 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,
@@ -27,14 +27,6 @@ it('renders correctly', () => {
       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"
@@ -55,7 +47,7 @@ it('renders correctly', () => {
     </div>
   `);
 });
-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,
@@ -79,20 +71,6 @@ it('renders correctly with custom props', () => {
       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"

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

@@ -154,20 +154,6 @@ it('renders article teaser correctly', () => {
       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;
@@ -421,20 +407,6 @@ it('renders press realese correctly', () => {
       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;

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

@@ -189,12 +189,6 @@ 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,20 +119,6 @@ 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;
@@ -391,20 +377,6 @@ 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

@@ -115,14 +115,6 @@ it('renders correctly', () => {
       background-color: #E52630;
     }
 
-    @supports not ((object-fit:cover) or (object-fit:none) or (object-fit:contain)) {
-      .c2 {
-        background-image: url(//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg);
-        background-size: cover;
-        background-position: center;
-      }
-    }
-
     @media (min-width:740px) {
       .c6 {
         font-size: 1rem;

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

@@ -153,20 +153,6 @@ 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;
@@ -445,20 +431,6 @@ 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,12 +97,6 @@ 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;
@@ -285,12 +279,6 @@ 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;
@@ -464,12 +452,6 @@ 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;
@@ -637,12 +619,6 @@ 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,20 +65,6 @@ 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;
@@ -292,20 +278,6 @@ 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;
@@ -510,20 +482,6 @@ 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;
@@ -778,20 +736,6 @@ 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;
@@ -996,20 +940,6 @@ 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) {
 
 }
@@ -1136,14 +1066,6 @@ 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,20 +153,6 @@ 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/Membership/Membership.test.js

@@ -337,12 +337,6 @@ it('renders correctly', () => {
       background-color: #961D35;
     }
 
-    @supports not ((object-fit:cover) or (object-fit:contain)) {
-      .c3 {
-        visibility: hidden;
-      }
-    }
-
     @media (min-width:740px) {
 
     }