npm - @comicrelief/component-library - Versions diffs - 8.27.0 → 8.28.1 - Mend

@comicrelief/component-library 8.27.0 → 8.28.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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) {
     }

package/dist/theme/crTheme/colors.js CHANGED Viewed

@@ -4,24 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/**
+ * Adding Colours / Nomenclature
+  - campaign colours at the top, followed by greyscale, then general colours
+  - campaign colours get overwritten each year.
+  - i.e. new rnd26 colours replace last year's old rnd25 colours.
+  - general naming convention => "hue_variation"
+  - there is a need to filter the "creativity" of funky colours coming from agencies,
+    to make them long term usable...
+ */
 const colors = {
+  /* CAMPAIGN COLOURS */
+  rnd_25_ruby_red: '#AE001B',
+  rnd_25_glitzy_grape: '#A20C51',
+  rnd_25_glitzy_blue: '#0F1953',
+  rnd_25_glitzy_purple: '#3A1F62',
+  rnd_25_glitzy_black: '#2B3737',
+  rnd_25_party_pink: '#FF9DEC',
+  rnd_25_party_blue: '#004EFF',
+  rnd_25_party_lilac: '#B07FEA',
+  /* GREYSCALE COLOURS */
   black: '#000000',
-  blue: '#0565D1',
-  blue_dark: '#274084',
-  blue_donate: '#2042AD',
-  blue_donate_interact: '#001A85',
-  blue_light: '#BECCF9',
-  blue_royal: '#6489FC',
-  coral: '#F9686D',
-  coral_dark: '#961D35',
-  coral_light: '#FFCECE',
-  deep_violet_dark: '#2C0230',
-  deep_violet: '#2C0230' /** Will be removed  */,
-  deep_violet_light: '#3e1c43',
-  error_pink: '#FAE1E2',
-  green: '#49D267',
-  green_dark: '#1B651D',
-  green_light: '#F4F2F4',
+  white: '#FFFFFF',
+  transparent: 'transparent',
+  // grey chaos needs sorting...
   grey_stone: '#CEDCDA',
   grey_extra_light: '#f0f0f0',
   grey_for_forms: '#666',
@@ -37,6 +44,23 @@ const colors = {
   grey_4: '#6E6E6E',
   // grey_5
   grey_dark: '#222222',
+  /* GENERAL COLOURS */
+  blue: '#0565D1',
+  blue_dark: '#274084',
+  // blue_donate is a bad naming?
+  blue_donate: '#2042AD',
+  blue_donate_interact: '#001A85',
+  blue_light: '#BECCF9',
+  blue_royal: '#6489FC',
+  coral: '#F9686D',
+  coral_dark: '#961D35',
+  coral_light: '#FFCECE',
+  deep_violet: '#2C0230' /** Will be removed  */,
+  deep_violet_dark: '#2C0230',
+  deep_violet_light: '#3e1c43',
+  green: '#49D267',
+  green_dark: '#1B651D',
+  green_light: '#F4F2F4',
   magenta: '#FC59CE',
   magenta_dark: '#821C5D',
   magenta_light: '#FEB4DC',
@@ -44,36 +68,21 @@ const colors = {
   orange_dark: '#984316',
   orange_light: '#FEE3CC',
   purple: '#6F3AAB',
-  lavender: '#C180F9',
   purple_dark: '#48276E',
   purple_light: '#DFC6F6',
+  lavender: '#C180F9',
+  // change naming
+  error_pink: '#FAE1E2',
   red: '#E52630',
-  red_secondary: '#F9723A',
   red_dark: '#890B11',
-  rnd_23_teal: '#3EB1AA',
-  rnd_23_yellow: '#FFE300',
-  rnd_23_pink: '#EDB4D3',
-  rnd_23_black: '#2B3737',
-  rnd_24_red_dark: '#A11B22',
-  rnd_24_teal_dark: '#2B7C77',
-  rnd_24_pink_dark: '#A67E94',
-  rnd_24_blue: '#3367AF',
-  rnd_25_ruby_red: '#AE001B',
-  rnd_25_glitzy_grape: '#A20C51',
-  rnd_25_glitzy_blue: '#0F1953',
-  rnd_25_glitzy_purple: '#3A1F62',
-  rnd_25_glitzy_black: '#2B3737',
-  rnd_25_party_pink: '#FF9DEC',
-  rnd_25_party_blue: '#004EFF',
-  rnd_25_party_lilac: '#B07FEA',
+  // change naming
+  red_secondary: '#F9723A',
   teal: '#4ECDBE',
   teal_dark: '#13767C',
   teal_light: '#86E4E9',
-  white: '#FFFFFF',
   yellow: '#FFE400',
   yellow_dark: '#665700',
-  yellow_light: '#FEFD5A',
-  transparent: 'transparent'
+  yellow_light: '#FEFD5A'
 };
 var _default = colorName => {
   if (colorName) {

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.27.0",
+  "version": "8.28.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Picture/Picture.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled, { css, withTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import spacing from '../../../theme/shared/spacing';
@@ -10,39 +10,22 @@ import 'lazysizes/plugins/blur-up/ls.blur-up';
 const IMAGE_FALLBACK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 const Wrapper = styled.div`
-  // If this browser doesn't support objectFit:
-  ${({ nonObjFitImage }) => (nonObjFitImage)
-  && `@supports not ((object-fit: cover) or (object-fit: none) or (object-fit: contain)) {
-        background-image: url(${nonObjFitImage});
-        background-size: cover;
-        background-position: center;
-      }
-  `};
+  ${({ objFitState, nonObjFitImage }) => (!objFitState && nonObjFitImage) && `background-image: url(${nonObjFitImage}); background-size: cover; background-position: center;`};
   display: block;
   width: ${props => (props.width ? props.width : '100%')};
   height: ${props => (props.height ? props.height : '100%')};
   position: relative;
-  ${({ isBackgroundImage }) => isBackgroundImage
-    && 'position: absolute; bottom: 0px; left: 0px; right: 0px; height: 100%;'};
+  ${({ isBackgroundImage }) => isBackgroundImage && 'position: absolute; bottom: 0px; left: 0px; right: 0px; height: 100%;'};
   `;
 const Image = styled.img`
   width: ${props => (props.width ? props.width : '100%')};
   height: ${props => (props.height ? props.height : 'auto')};
   display: block;
   object-fit: ${props => (props.objectFit === 'none' && 'none')
     || (props.objectFit === 'cover' && 'cover')
     || (props.objectFit === 'contain' && 'contain')};
-  // If this browser doesn't support objectFit:
-  ${({ objectFit }) => (objectFit !== 'none')
-    && `@supports not ((object-fit: cover) or (object-fit: contain)) {
-      visibility: hidden;
-    `}
-    // Allows image to provide the container height, but make it invisible
+  ${({ objectFit, objFitState }) => (objectFit !== 'none' && !objFitState) && 'visibility: hidden;'}; // Allows image to provide the container height, but make it invisible
   /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
   ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
@@ -77,6 +60,7 @@ const Image = styled.img`
         height: ${props => (props.height ? props.height : 'auto')};
       }
   `}
 `;
 /** Responsive Picture */
@@ -93,8 +77,17 @@ const Picture = ({
   mediumBreakpointRowLayout = null,
   ...rest
 }) => {
+  const document = typeof window !== 'undefined' ? window.document : null;
+  const [objFitState, setObjFitState] = useState(true);
   let nonObjFitImage = null;
+  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) {
     nonObjFitImage = image;
@@ -111,6 +104,7 @@ const Picture = ({
         images={images}
         isBackgroundImage={isBackgroundImage}
         nonObjFitImage={nonObjFitImage}
+        objFitState={objFitState}
         {...rest}
       >
         <Image
@@ -120,6 +114,7 @@ const Picture = ({
           objectFit={objectFit}
           data-src={image}
           className="lazyload"
+          objFitState={objFitState}
         />
       </Wrapper>
     );
@@ -131,9 +126,11 @@ const Picture = ({
       width={width}
       image={image}
       images={images}
+      setObjFitState={setObjFitState}
       className="lazyload"
       isBackgroundImage={isBackgroundImage}
       nonObjFitImage={nonObjFitImage}
+      objFitState={objFitState}
       {...rest}
     >
       <Image
@@ -148,6 +145,7 @@ const Picture = ({
         data-sizes="auto"
         data-lowsrc={imageLow}
         className="lazyload"
+        objFitState={objFitState}
         smallBreakpointRowLayout={smallBreakpointRowLayout}
         mediumBreakpointRowLayout={mediumBreakpointRowLayout}
       />

package/src/components/Atoms/Picture/Picture.test.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
-import Picture from './Picture';
-import { defaultData } from '../../../styleguide/data/data';
-it('renders correctly', () => {
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
+import Picture from "./Picture";
+import { defaultData } from "../../../styleguide/data/data";
+it("renders correctly", () => {
   const tree = renderWithTheme(
     <Picture
       images={defaultData.images}
@@ -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"
@@ -56,7 +48,7 @@ it('renders correctly', () => {
   `);
 });
-it('renders correctly with custom props', () => {
+it("renders correctly with custom props", () => {
   const tree = renderWithTheme(
     <Picture
       images={defaultData.images}
@@ -83,20 +75,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/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js CHANGED Viewed

@@ -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;
@@ -425,20 +411,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/src/components/Molecules/Card/__snapshots__/Card.test.js.snap CHANGED Viewed

@@ -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/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED Viewed

@@ -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/src/components/Molecules/PartnerLink/PartnerLink.test.js CHANGED Viewed

@@ -116,14 +116,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/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap CHANGED Viewed

@@ -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/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap CHANGED Viewed

@@ -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/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap CHANGED Viewed

@@ -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/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap CHANGED Viewed

@@ -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/src/components/Organisms/Membership/Membership.test.js CHANGED Viewed

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

package/src/theme/crTheme/colors.js CHANGED Viewed

@@ -1,21 +1,31 @@
+/**
+ * Adding Colours / Nomenclature
+  - campaign colours at the top, followed by greyscale, then general colours
+  - campaign colours get overwritten each year.
+  - i.e. new rnd26 colours replace last year's old rnd25 colours.
+  - general naming convention => "hue_variation"
+  - there is a need to filter the "creativity" of funky colours coming from agencies,
+    to make them long term usable...
+ */
 const colors = {
+  /* CAMPAIGN COLOURS */
+  rnd_25_ruby_red: '#AE001B',
+  rnd_25_glitzy_grape: '#A20C51',
+  rnd_25_glitzy_blue: '#0F1953',
+  rnd_25_glitzy_purple: '#3A1F62',
+  rnd_25_glitzy_black: '#2B3737',
+  rnd_25_party_pink: '#FF9DEC',
+  rnd_25_party_blue: '#004EFF',
+  rnd_25_party_lilac: '#B07FEA',
+  /* GREYSCALE COLOURS */
   black: '#000000',
-  blue: '#0565D1',
-  blue_dark: '#274084',
-  blue_donate: '#2042AD',
-  blue_donate_interact: '#001A85',
-  blue_light: '#BECCF9',
-  blue_royal: '#6489FC',
-  coral: '#F9686D',
-  coral_dark: '#961D35',
-  coral_light: '#FFCECE',
-  deep_violet_dark: '#2C0230',
-  deep_violet: '#2C0230' /** Will be removed  */,
-  deep_violet_light: '#3e1c43',
-  error_pink: '#FAE1E2',
-  green: '#49D267',
-  green_dark: '#1B651D',
-  green_light: '#F4F2F4',
+  white: '#FFFFFF',
+  transparent: 'transparent',
+  // grey chaos needs sorting...
   grey_stone: '#CEDCDA',
   grey_extra_light: '#f0f0f0',
   grey_for_forms: '#666',
@@ -31,43 +41,57 @@ const colors = {
   grey_4: '#6E6E6E',
   // grey_5
   grey_dark: '#222222',
+  /* GENERAL COLOURS */
+  blue: '#0565D1',
+  blue_dark: '#274084',
+  // blue_donate is a bad naming?
+  blue_donate: '#2042AD',
+  blue_donate_interact: '#001A85',
+  blue_light: '#BECCF9',
+  blue_royal: '#6489FC',
+  coral: '#F9686D',
+  coral_dark: '#961D35',
+  coral_light: '#FFCECE',
+  deep_violet: '#2C0230' /** Will be removed  */,
+  deep_violet_dark: '#2C0230',
+  deep_violet_light: '#3e1c43',
+  green: '#49D267',
+  green_dark: '#1B651D',
+  green_light: '#F4F2F4',
   magenta: '#FC59CE',
   magenta_dark: '#821C5D',
   magenta_light: '#FEB4DC',
   orange: '#FF9635',
   orange_dark: '#984316',
   orange_light: '#FEE3CC',
   purple: '#6F3AAB',
-  lavender: '#C180F9',
   purple_dark: '#48276E',
   purple_light: '#DFC6F6',
+  lavender: '#C180F9',
+  // change naming
+  error_pink: '#FAE1E2',
   red: '#E52630',
-  red_secondary: '#F9723A',
   red_dark: '#890B11',
-  rnd_23_teal: '#3EB1AA',
-  rnd_23_yellow: '#FFE300',
-  rnd_23_pink: '#EDB4D3',
-  rnd_23_black: '#2B3737',
-  rnd_24_red_dark: '#A11B22',
-  rnd_24_teal_dark: '#2B7C77',
-  rnd_24_pink_dark: '#A67E94',
-  rnd_24_blue: '#3367AF',
-  rnd_25_ruby_red: '#AE001B',
-  rnd_25_glitzy_grape: '#A20C51',
-  rnd_25_glitzy_blue: '#0F1953',
-  rnd_25_glitzy_purple: '#3A1F62',
-  rnd_25_glitzy_black: '#2B3737',
-  rnd_25_party_pink: '#FF9DEC',
-  rnd_25_party_blue: '#004EFF',
-  rnd_25_party_lilac: '#B07FEA',
+  // change naming
+  red_secondary: '#F9723A',
   teal: '#4ECDBE',
   teal_dark: '#13767C',
   teal_light: '#86E4E9',
-  white: '#FFFFFF',
   yellow: '#FFE400',
   yellow_dark: '#665700',
-  yellow_light: '#FEFD5A',
-  transparent: 'transparent'
+  yellow_light: '#FEFD5A'
 };
 export default colorName => {