@comicrelief/component-library 7.45.0 → 7.46.0

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

@@ -41,7 +41,7 @@ const Image = _styledComponents.default.img.withConfig({
   let {
     smallBreakpointRowLayout
   } = _ref4;
-  return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{border-radius:", ";width:80px;height:80px;}@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref5 => {
+  return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{border-radius:", ";width:80px;height:80px;}@media ", "{padding:none;border-radius:0;width:", ";height:", ";}"], _ref5 => {
     let {
       theme
     } = _ref5;
@@ -67,7 +67,7 @@ const Image = _styledComponents.default.img.withConfig({
     smallBreakpointRowLayout,
     mediumBreakpointRowLayout
   } = _ref9;
-  return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref10 => {
+  return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:none;border-radius:0;width:", ";height:", ";}"], _ref10 => {
     let {
       theme
     } = _ref10;

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

@@ -11,26 +11,46 @@ 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;@media ", "{flex-direction:", ";gap:", ";}@media ", "{flex-direction:", ";gap:", ";}@media ", "{flex-direction:column;}height:100%;border-radius:", ";overflow:hidden;background:", ";"], _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.8rem', _ref => {
   let {
-    theme
+    theme,
+    backgroundColor
   } = _ref;
-  return theme.allBreakpoints('S');
-}, props => props.smallBreakpointRowLayout === true ? 'row' : 'column', (0, _spacing.default)('md'), _ref2 => {
+  return theme.color(backgroundColor);
+}, _ref2 => {
   let {
     theme
   } = _ref2;
+  return theme.allBreakpoints('S');
+}, props => props.smallBreakpointRowLayout === true ? 'row' : 'column', (0, _spacing.default)('md'), _ref3 => {
+  let {
+    theme,
+    backgroundColor,
+    smallBreakpointRowLayout
+  } = _ref3;
+  return smallBreakpointRowLayout === true ? 'transparent' : theme.color(backgroundColor);
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.allBreakpoints('M');
-}, props => props.mediumBreakpointRowLayout === true ? 'row' : 'column', (0, _spacing.default)('md'), _ref3 => {
+}, props => props.mediumBreakpointRowLayout === true ? 'row' : 'column', (0, _spacing.default)('md'), _ref5 => {
+  let {
+    theme,
+    backgroundColor,
+    mediumBreakpointRowLayout
+  } = _ref5;
+  return mediumBreakpointRowLayout === true ? 'transparent' : theme.color(backgroundColor);
+}, _ref6 => {
   let {
     theme
-  } = _ref3;
+  } = _ref6;
   return theme.allBreakpoints('L');
-}, props => props.squaredCorners ? '0' : '0.8rem', _ref4 => {
+}, _ref7 => {
   let {
     theme,
     backgroundColor
-  } = _ref4;
+  } = _ref7;
   return theme.color(backgroundColor);
 });
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
@@ -40,29 +60,29 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "Cardstyle__Copy",
   componentId: "sc-cxn4co-2"
-})(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}"], (0, _spacing.default)('l'), _ref5 => {
+})(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}"], (0, _spacing.default)('l'), _ref8 => {
   let {
     smallBreakpointRowLayout
-  } = _ref5;
-  return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref6 => {
+  } = _ref8;
+  return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref9 => {
     let {
       theme
-    } = _ref6;
+    } = _ref9;
     return theme.allBreakpoints('S');
   }, props => props.smallBreakpointRowLayout === true ? "".concat((0, _spacing.default)('sm')) : "".concat((0, _spacing.default)('l')), props => props.smallBreakpointRowLayout === true && "0 0 ".concat((0, _spacing.default)('sm')), props => props.smallBreakpointRowLayout === true ? '1.5rem' : '2rem');
-}, _ref7 => {
+}, _ref10 => {
   let {
     mediumBreakpointRowLayout
-  } = _ref7;
-  return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref8 => {
+  } = _ref10;
+  return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref11 => {
     let {
       theme
-    } = _ref8;
+    } = _ref11;
     return theme.allBreakpoints('M');
   }, props => props.mediumBreakpointRowLayout === true ? "".concat((0, _spacing.default)('sm')) : "".concat((0, _spacing.default)('l')), props => props.mediumBreakpointRowLayout === true && "0 0 ".concat((0, _spacing.default)('sm')), props => props.mediumBreakpointRowLayout === true ? '1.5rem' : '2rem');
-}, _ref9 => {
+}, _ref12 => {
   let {
     theme
-  } = _ref9;
+  } = _ref12;
   return theme.allBreakpoints('L');
 }, (0, _spacing.default)('l'));

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

@@ -30,6 +30,7 @@ exports[`renders correctly 1`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -39,6 +40,7 @@ exports[`renders correctly 1`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -47,6 +49,7 @@ exports[`renders correctly 1`] = `
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+    background: #FFE400;
   }
 }
 
@@ -106,6 +109,7 @@ exports[`renders correctly 2`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -115,6 +119,7 @@ exports[`renders correctly 2`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -123,6 +128,7 @@ exports[`renders correctly 2`] = `
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+    background: #FFE400;
   }
 }
 
@@ -189,6 +195,7 @@ exports[`renders correctly with no body 1`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -198,6 +205,7 @@ exports[`renders correctly with no body 1`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -206,6 +214,7 @@ exports[`renders correctly with no body 1`] = `
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+    background: #FFE400;
   }
 }
 

package/package.json

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

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

@@ -36,7 +36,7 @@ const Image = styled.img`
     }
     @media ${({ theme }) => theme.allBreakpoints('M')} {
       padding: none;
-      border-radius: none;
+      border-radius: 0;
       width: ${props => (props.width ? props.width : '100%')};
       height: ${props => (props.height ? props.height : 'auto')};
     }
@@ -55,7 +55,7 @@ const Image = styled.img`
   ${({ smallBreakpointRowLayout, mediumBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) || (mediumBreakpointRowLayout === true)) && css`
       @media ${({ theme }) => theme.allBreakpoints('L')} {
         padding: none;
-        border-radius: none;
+        border-radius: 0;
         width: ${props => (props.width ? props.width : '100%')};
         height: ${props => (props.height ? props.height : 'auto')};
       }

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

@@ -4,28 +4,30 @@ import spacing from '../../../theme/shared/spacing';
 const Container = styled.div`
   position: relative;
   display: flex;
+  height: 100%;
+  border-radius: ${props => (props.squaredCorners ? '0' : '0.8rem')};
+  overflow: hidden;
+  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
 
   /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
   @media ${({ theme }) => theme.allBreakpoints('S')} {
     flex-direction: ${props => ((props.smallBreakpointRowLayout === true) ? 'row' : 'column')};
     gap: ${spacing('md')};
+    background: ${({ theme, backgroundColor, smallBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) ? 'transparent' : theme.color(backgroundColor))};
   }
 
   /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: ${props => ((props.mediumBreakpointRowLayout === true) ? 'row' : 'column')};
     gap: ${spacing('md')};
+    background: ${({ theme, backgroundColor, mediumBreakpointRowLayout }) => ((mediumBreakpointRowLayout === true) ? 'transparent' : theme.color(backgroundColor))};
   }
 
   /* Set desktop and upwards to normal vertical layout */
   @media ${({ theme }) => theme.allBreakpoints('L')} {
     flex-direction: column;
+    background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   }
-
-  height: 100%;
-  border-radius: ${props => (props.squaredCorners ? '0' : '0.8rem')};
-  overflow: hidden;
-  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
 `;
 
 const Wrapper = styled.div`

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

@@ -30,6 +30,7 @@ exports[`renders correctly 1`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -39,6 +40,7 @@ exports[`renders correctly 1`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -47,6 +49,7 @@ exports[`renders correctly 1`] = `
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+    background: #FFE400;
   }
 }
 
@@ -106,6 +109,7 @@ exports[`renders correctly 2`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -115,6 +119,7 @@ exports[`renders correctly 2`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -123,6 +128,7 @@ exports[`renders correctly 2`] = `
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+    background: #FFE400;
   }
 }
 
@@ -189,6 +195,7 @@ exports[`renders correctly with no body 1`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -198,6 +205,7 @@ exports[`renders correctly with no body 1`] = `
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 1rem;
+    background: #FFE400;
   }
 }
 
@@ -206,6 +214,7 @@ exports[`renders correctly with no body 1`] = `
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+    background: #FFE400;
   }
 }