@comicrelief/component-library 6.8.0 → 6.9.0

package/dist/components/Molecules/Box/Box.js

@@ -17,7 +17,7 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 
-var _excluded = ["imageLow", "images", "image", "imageAltText", "height", "width", "children"];
+var _excluded = ["imageLow", "images", "image", "imageAltText", "height", "width", "children", "squareCorners"];
 
 var Container = _styledComponents.default.div.withConfig({
   displayName: "Box__Container",
@@ -33,7 +33,9 @@ var Container = _styledComponents.default.div.withConfig({
 var Image = _styledComponents.default.div.withConfig({
   displayName: "Box__Image",
   componentId: "sc-1oa7u3c-1"
-})(["height:auto;flex-basis:calc(100% / 3);"]);
+})(["height:auto;flex-basis:calc(100% / 3);img{border-radius:", ";overflow:hidden;}"], function (props) {
+  return props.squareCorners ? '0' : '1rem';
+});
 
 var Copy = _styledComponents.default.div.withConfig({
   displayName: "Box__Copy",
@@ -54,6 +56,7 @@ var Box = function Box(_ref5) {
       height = _ref5.height,
       width = _ref5.width,
       children = _ref5.children,
+      squareCorners = _ref5.squareCorners,
       rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
   return /*#__PURE__*/_react.default.createElement(Container, rest, imageLow ? /*#__PURE__*/_react.default.createElement(Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
@@ -61,7 +64,8 @@ var Box = function Box(_ref5) {
     images: images,
     image: image,
     width: width,
-    height: "auto"
+    height: "auto",
+    squareCorners: squareCorners
   })) : null, children ? /*#__PURE__*/_react.default.createElement(Copy, null, children) : null);
 };
 
@@ -72,7 +76,8 @@ Box.defaultProps = {
   image: null,
   imageAltText: '',
   width: '100%',
-  height: '100%'
+  height: '100%',
+  squareCorners: false
 };
 var _default = Box;
 exports.default = _default;

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

@@ -34,6 +34,11 @@ exports[`renders correctly 1`] = `
   flex-basis: calc(100% / 3);
 }
 
+.c1 img {
+  border-radius: 1rem;
+  overflow: hidden;
+}
+
 .c4 {
   padding: 2rem;
   display: -webkit-box;

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

@@ -17,12 +17,14 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 
-var _excluded = ["backgroundColor", "imageLow", "images", "image", "imageAltText", "height", "width", "children"];
+var _excluded = ["backgroundColor", "imageLow", "images", "image", "imageAltText", "height", "width", "children", "squareCorners"];
 
 var Container = _styledComponents.default.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-15nltsw-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;background:", ";"], function (_ref) {
+})(["display:flex;position:relative;flex-direction:column;height:100%;border-radius:", ";overflow:hidden;background:", ";"], function (props) {
+  return props.squareCorners ? '0' : '1rem';
+}, function (_ref) {
   var theme = _ref.theme,
       backgroundColor = _ref.backgroundColor;
   return theme.color(backgroundColor);
@@ -47,9 +49,11 @@ var Card = function Card(_ref2) {
       height = _ref2.height,
       width = _ref2.width,
       children = _ref2.children,
+      squareCorners = _ref2.squareCorners,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
-    backgroundColor: backgroundColor
+    backgroundColor: backgroundColor,
+    squareCorners: squareCorners
   }, rest), imageLow ? /*#__PURE__*/_react.default.createElement(Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
     imageLow: imageLow,
@@ -69,7 +73,8 @@ Card.defaultProps = {
   image: null,
   imageAltText: '',
   width: '100%',
-  height: '100%'
+  height: '100%',
+  squareCorners: false
 };
 var _default = Card;
 exports.default = _default;

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

@@ -11,6 +11,8 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
   background: #FFE400;
 }
 
@@ -66,6 +68,8 @@ exports[`renders correctly with no body 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
   background: #FFE400;
 }
 

package/package.json

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

package/src/components/Molecules/Box/Box.js

@@ -21,6 +21,10 @@ const Container = styled.div`
 const Image = styled.div`
   height: auto;
   flex-basis: calc(100% / 3);
+  img {
+    border-radius: ${props => (props.squareCorners ? '0' : '1rem')};
+    overflow: hidden;
+  }
 `;
 
 const Copy = styled.div`
@@ -47,6 +51,7 @@ const Box = ({
   height,
   width,
   children,
+  squareCorners,
   ...rest
 }) => (
   <Container {...rest}>
@@ -59,6 +64,7 @@ const Box = ({
           image={image}
           width={width}
           height="auto"
+          squareCorners={squareCorners}
         />
       </Image>
     ) : null}
@@ -73,7 +79,8 @@ Box.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
   imageAltText: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  squareCorners: PropTypes.bool
 };
 
 Box.defaultProps = {
@@ -83,7 +90,8 @@ Box.defaultProps = {
   image: null,
   imageAltText: '',
   width: '100%',
-  height: '100%'
+  height: '100%',
+  squareCorners: false
 };
 
 export default Box;

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

@@ -34,6 +34,11 @@ exports[`renders correctly 1`] = `
   flex-basis: calc(100% / 3);
 }
 
+.c1 img {
+  border-radius: 1rem;
+  overflow: hidden;
+}
+
 .c4 {
   padding: 2rem;
   display: -webkit-box;

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

@@ -9,6 +9,8 @@ const Container = styled.div`
   position: relative;
   flex-direction: column;
   height: 100%;
+  border-radius: ${props => (props.squareCorners ? '0' : '1rem')};
+  overflow: hidden;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
 `;
 
@@ -31,9 +33,10 @@ const Card = ({
   height,
   width,
   children,
+  squareCorners,
   ...rest
 }) => (
-  <Container backgroundColor={backgroundColor} {...rest}>
+  <Container backgroundColor={backgroundColor} squareCorners={squareCorners} {...rest}>
     {imageLow ? (
       <Image>
         <Picture
@@ -59,7 +62,8 @@ Card.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
   imageAltText: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  squareCorners: PropTypes.bool
 };
 
 Card.defaultProps = {
@@ -70,7 +74,8 @@ Card.defaultProps = {
   image: null,
   imageAltText: '',
   width: '100%',
-  height: '100%'
+  height: '100%',
+  squareCorners: false
 };
 
 export default Card;

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

@@ -11,6 +11,8 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
   background: #FFE400;
 }
 
@@ -66,6 +68,8 @@ exports[`renders correctly with no body 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
   background: #FFE400;
 }