@comicrelief/component-library 6.8.0 → 6.9.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 (9) hide show
  1. package/dist/components/Molecules/Box/Box.js +12 -5
  2. package/dist/components/Molecules/Box/__snapshots__/Box.test.js.snap +5 -0
  3. package/dist/components/Molecules/Card/Card.js +9 -4
  4. package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap +4 -0
  5. package/package.json +1 -1
  6. package/src/components/Molecules/Box/Box.js +11 -3
  7. package/src/components/Molecules/Box/__snapshots__/Box.test.js.snap +5 -0
  8. package/src/components/Molecules/Card/Card.js +8 -3
  9. package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +4 -0
package/dist/components/Molecules/Box/Box.js CHANGED
@@ -17,7 +17,7 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
17
17
 
18
18
  var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
19
19
 
20
- var _excluded = ["imageLow", "images", "image", "imageAltText", "height", "width", "children"];
20
+ var _excluded = ["imageLow", "images", "image", "imageAltText", "height", "width", "children", "squareCorners"];
21
21
 
22
22
  var Container = _styledComponents.default.div.withConfig({
23
23
  displayName: "Box__Container",
@@ -33,7 +33,9 @@ var Container = _styledComponents.default.div.withConfig({
33
33
  var Image = _styledComponents.default.div.withConfig({
34
34
  displayName: "Box__Image",
35
35
  componentId: "sc-1oa7u3c-1"
36
- })(["height:auto;flex-basis:calc(100% / 3);"]);
36
+ })(["height:auto;flex-basis:calc(100% / 3);img{border-radius:", ";overflow:hidden;}"], function (props) {
37
+ return props.squareCorners ? '0' : '1rem';
38
+ });
37
39
 
38
40
  var Copy = _styledComponents.default.div.withConfig({
39
41
  displayName: "Box__Copy",
@@ -54,14 +56,18 @@ var Box = function Box(_ref5) {
54
56
  height = _ref5.height,
55
57
  width = _ref5.width,
56
58
  children = _ref5.children,
59
+ squareCorners = _ref5.squareCorners,
57
60
  rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
58
- return /*#__PURE__*/_react.default.createElement(Container, rest, imageLow ? /*#__PURE__*/_react.default.createElement(Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
61
+ return /*#__PURE__*/_react.default.createElement(Container, rest, imageLow ? /*#__PURE__*/_react.default.createElement(Image, {
62
+ squareCorners: squareCorners
63
+ }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
59
64
  alt: imageAltText,
60
65
  imageLow: imageLow,
61
66
  images: images,
62
67
  image: image,
63
68
  width: width,
64
- height: "auto"
69
+ height: "auto",
70
+ squareCorners: squareCorners
65
71
  })) : null, children ? /*#__PURE__*/_react.default.createElement(Copy, null, children) : null);
66
72
  };
67
73
 
@@ -72,7 +78,8 @@ Box.defaultProps = {
72
78
  image: null,
73
79
  imageAltText: '',
74
80
  width: '100%',
75
- height: '100%'
81
+ height: '100%',
82
+ squareCorners: false
76
83
  };
77
84
  var _default = Box;
78
85
  exports.default = _default;
package/dist/components/Molecules/Box/__snapshots__/Box.test.js.snap CHANGED
@@ -34,6 +34,11 @@ exports[`renders correctly 1`] = `
34
34
  flex-basis: calc(100% / 3);
35
35
  }
36
36
 
37
+ .c1 img {
38
+ border-radius: 1rem;
39
+ overflow: hidden;
40
+ }
41
+
37
42
  .c4 {
38
43
  padding: 2rem;
39
44
  display: -webkit-box;
package/dist/components/Molecules/Card/Card.js CHANGED
@@ -17,12 +17,14 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
17
17
 
18
18
  var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
19
19
 
20
- var _excluded = ["backgroundColor", "imageLow", "images", "image", "imageAltText", "height", "width", "children"];
20
+ var _excluded = ["backgroundColor", "imageLow", "images", "image", "imageAltText", "height", "width", "children", "squareCorners"];
21
21
 
22
22
  var Container = _styledComponents.default.div.withConfig({
23
23
  displayName: "Card__Container",
24
24
  componentId: "sc-15nltsw-0"
25
- })(["display:flex;position:relative;flex-direction:column;height:100%;background:", ";"], function (_ref) {
25
+ })(["display:flex;position:relative;flex-direction:column;height:100%;border-radius:", ";overflow:hidden;background:", ";"], function (props) {
26
+ return props.squareCorners ? '0' : '1rem';
27
+ }, function (_ref) {
26
28
  var theme = _ref.theme,
27
29
  backgroundColor = _ref.backgroundColor;
28
30
  return theme.color(backgroundColor);
@@ -47,9 +49,11 @@ var Card = function Card(_ref2) {
47
49
  height = _ref2.height,
48
50
  width = _ref2.width,
49
51
  children = _ref2.children,
52
+ squareCorners = _ref2.squareCorners,
50
53
  rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
51
54
  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
52
- backgroundColor: backgroundColor
55
+ backgroundColor: backgroundColor,
56
+ squareCorners: squareCorners
53
57
  }, rest), imageLow ? /*#__PURE__*/_react.default.createElement(Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
54
58
  alt: imageAltText,
55
59
  imageLow: imageLow,
@@ -69,7 +73,8 @@ Card.defaultProps = {
69
73
  image: null,
70
74
  imageAltText: '',
71
75
  width: '100%',
72
- height: '100%'
76
+ height: '100%',
77
+ squareCorners: false
73
78
  };
74
79
  var _default = Card;
75
80
  exports.default = _default;
package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap CHANGED
@@ -11,6 +11,8 @@ exports[`renders correctly 1`] = `
11
11
  -ms-flex-direction: column;
12
12
  flex-direction: column;
13
13
  height: 100%;
14
+ border-radius: 1rem;
15
+ overflow: hidden;
14
16
  background: #FFE400;
15
17
  }
16
18
 
@@ -66,6 +68,8 @@ exports[`renders correctly with no body 1`] = `
66
68
  -ms-flex-direction: column;
67
69
  flex-direction: column;
68
70
  height: 100%;
71
+ border-radius: 1rem;
72
+ overflow: hidden;
69
73
  background: #FFE400;
70
74
  }
71
75
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "6.8.0",
4
+ "version": "6.9.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Molecules/Box/Box.js CHANGED
@@ -21,6 +21,10 @@ const Container = styled.div`
21
21
  const Image = styled.div`
22
22
  height: auto;
23
23
  flex-basis: calc(100% / 3);
24
+ img {
25
+ border-radius: ${props => (props.squareCorners ? '0' : '1rem')};
26
+ overflow: hidden;
27
+ }
24
28
  `;
25
29
 
26
30
  const Copy = styled.div`
@@ -47,11 +51,12 @@ const Box = ({
47
51
  height,
48
52
  width,
49
53
  children,
54
+ squareCorners,
50
55
  ...rest
51
56
  }) => (
52
57
  <Container {...rest}>
53
58
  {imageLow ? (
54
- <Image>
59
+ <Image squareCorners={squareCorners}>
55
60
  <Picture
56
61
  alt={imageAltText}
57
62
  imageLow={imageLow}
@@ -59,6 +64,7 @@ const Box = ({
59
64
  image={image}
60
65
  width={width}
61
66
  height="auto"
67
+ squareCorners={squareCorners}
62
68
  />
63
69
  </Image>
64
70
  ) : null}
@@ -73,7 +79,8 @@ Box.propTypes = {
73
79
  width: PropTypes.string,
74
80
  height: PropTypes.string,
75
81
  imageAltText: PropTypes.string,
76
- children: PropTypes.node
82
+ children: PropTypes.node,
83
+ squareCorners: PropTypes.bool
77
84
  };
78
85
 
79
86
  Box.defaultProps = {
@@ -83,7 +90,8 @@ Box.defaultProps = {
83
90
  image: null,
84
91
  imageAltText: '',
85
92
  width: '100%',
86
- height: '100%'
93
+ height: '100%',
94
+ squareCorners: false
87
95
  };
88
96
 
89
97
  export default Box;
package/src/components/Molecules/Box/__snapshots__/Box.test.js.snap CHANGED
@@ -34,6 +34,11 @@ exports[`renders correctly 1`] = `
34
34
  flex-basis: calc(100% / 3);
35
35
  }
36
36
 
37
+ .c1 img {
38
+ border-radius: 1rem;
39
+ overflow: hidden;
40
+ }
41
+
37
42
  .c4 {
38
43
  padding: 2rem;
39
44
  display: -webkit-box;
package/src/components/Molecules/Card/Card.js CHANGED
@@ -9,6 +9,8 @@ const Container = styled.div`
9
9
  position: relative;
10
10
  flex-direction: column;
11
11
  height: 100%;
12
+ border-radius: ${props => (props.squareCorners ? '0' : '1rem')};
13
+ overflow: hidden;
12
14
  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
13
15
  `;
14
16
 
@@ -31,9 +33,10 @@ const Card = ({
31
33
  height,
32
34
  width,
33
35
  children,
36
+ squareCorners,
34
37
  ...rest
35
38
  }) => (
36
- <Container backgroundColor={backgroundColor} {...rest}>
39
+ <Container backgroundColor={backgroundColor} squareCorners={squareCorners} {...rest}>
37
40
  {imageLow ? (
38
41
  <Image>
39
42
  <Picture
@@ -59,7 +62,8 @@ Card.propTypes = {
59
62
  width: PropTypes.string,
60
63
  height: PropTypes.string,
61
64
  imageAltText: PropTypes.string,
62
- children: PropTypes.node
65
+ children: PropTypes.node,
66
+ squareCorners: PropTypes.bool
63
67
  };
64
68
 
65
69
  Card.defaultProps = {
@@ -70,7 +74,8 @@ Card.defaultProps = {
70
74
  image: null,
71
75
  imageAltText: '',
72
76
  width: '100%',
73
- height: '100%'
77
+ height: '100%',
78
+ squareCorners: false
74
79
  };
75
80
 
76
81
  export default Card;
package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap CHANGED
@@ -11,6 +11,8 @@ exports[`renders correctly 1`] = `
11
11
  -ms-flex-direction: column;
12
12
  flex-direction: column;
13
13
  height: 100%;
14
+ border-radius: 1rem;
15
+ overflow: hidden;
14
16
  background: #FFE400;
15
17
  }
16
18
 
@@ -66,6 +68,8 @@ exports[`renders correctly with no body 1`] = `
66
68
  -ms-flex-direction: column;
67
69
  flex-direction: column;
68
70
  height: 100%;
71
+ border-radius: 1rem;
72
+ overflow: hidden;
69
73
  background: #FFE400;
70
74
  }
71
75