@comicrelief/component-library 6.7.0 → 6.9.0

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 (11) hide show
  1. package/dist/components/Molecules/Box/Box.js +9 -4
  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/dist/components/Organisms/Header/Nav/Nav.js +4 -1
  6. package/package.json +1 -1
  7. package/src/components/Molecules/Box/Box.js +10 -2
  8. package/src/components/Molecules/Box/__snapshots__/Box.test.js.snap +5 -0
  9. package/src/components/Molecules/Card/Card.js +8 -3
  10. package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +4 -0
  11. package/src/components/Organisms/Header/Nav/Nav.js +9 -2
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,6 +56,7 @@ 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
61
  return /*#__PURE__*/_react.default.createElement(Container, rest, imageLow ? /*#__PURE__*/_react.default.createElement(Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
59
62
  alt: imageAltText,
@@ -61,7 +64,8 @@ var Box = function Box(_ref5) {
61
64
  images: images,
62
65
  image: image,
63
66
  width: width,
64
- height: "auto"
67
+ height: "auto",
68
+ squareCorners: squareCorners
65
69
  })) : null, children ? /*#__PURE__*/_react.default.createElement(Copy, null, children) : null);
66
70
  };
67
71
 
@@ -72,7 +76,8 @@ Box.defaultProps = {
72
76
  image: null,
73
77
  imageAltText: '',
74
78
  width: '100%',
75
- height: '100%'
79
+ height: '100%',
80
+ squareCorners: false
76
81
  };
77
82
  var _default = Box;
78
83
  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/dist/components/Organisms/Header/Nav/Nav.js CHANGED
@@ -123,7 +123,10 @@ var MainNav = function MainNav(_ref) {
123
123
  } : null,
124
124
  onKeyUp: keyPressed(group.title),
125
125
  role: "button"
126
- }, thisFirstChild.title) : /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement(_Nav.NavLink, {
126
+ }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_Nav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
127
+ src: _chevronDown.default,
128
+ alt: "chevron down icon"
129
+ }))) : /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement(_Nav.NavLink, {
127
130
  href: thisUrl,
128
131
  inline: true,
129
132
  rel: relNoopener,
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.7.0",
4
+ "version": "6.9.0",
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,6 +51,7 @@ const Box = ({
47
51
  height,
48
52
  width,
49
53
  children,
54
+ squareCorners,
50
55
  ...rest
51
56
  }) => (
52
57
  <Container {...rest}>
@@ -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
 
package/src/components/Organisms/Header/Nav/Nav.js CHANGED
@@ -7,7 +7,7 @@ import { sizes } from '../../../../theme/shared/breakpoint';
7
7
  import NavHelper from '../../../../utils/navHelper';
8
8
  import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
9
9
  import whiteListed from '../../../../utils/whiteListed';
10
- import ChevronDown from './chevron-down.svg';
10
+ import chevronDown from './chevron-down.svg';
11
11
 
12
12
  import {
13
13
  Nav,
@@ -100,6 +100,13 @@ const MainNav = ({ navItems }) => {
100
100
  role="button"
101
101
  >
102
102
  {thisFirstChild.title}
103
+ {hasSubMenu
104
+ && (
105
+ <ChevronWrapper>
106
+ <img src={chevronDown} alt="chevron down icon" />
107
+ </ChevronWrapper>
108
+ )
109
+ }
103
110
  </NavLink>
104
111
  ) : (
105
112
  <Text>
@@ -114,7 +121,7 @@ const MainNav = ({ navItems }) => {
114
121
  {hasSubMenu
115
122
  && (
116
123
  <ChevronWrapper>
117
- <img src={ChevronDown} alt="chevron down icon" />
124
+ <img src={chevronDown} alt="chevron down icon" />
118
125
  </ChevronWrapper>
119
126
  )
120
127
  }