@comicrelief/component-library 7.43.0 → 7.44.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 (7) hide show
  1. package/dist/components/Atoms/Picture/Picture.js +4 -4
  2. package/dist/components/Molecules/Card/Card.style.js +8 -14
  3. package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap +20 -0
  4. package/package.json +1 -1
  5. package/src/components/Atoms/Picture/Picture.js +4 -6
  6. package/src/components/Molecules/Card/Card.style.js +15 -21
  7. package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +20 -0
package/dist/components/Atoms/Picture/Picture.js CHANGED
@@ -41,12 +41,12 @@ const Image = _styledComponents.default.img.withConfig({
41
41
  let {
42
42
  smallBreakpointRowLayout
43
43
  } = _ref4;
44
- return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";border-radius:", ";width:110px;height:110px;}@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref5 => {
44
+ return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{border-radius:", ";width:80px;height:80px;}@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref5 => {
45
45
  let {
46
46
  theme
47
47
  } = _ref5;
48
48
  return theme.allBreakpoints('S');
49
- }, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), _ref6 => {
49
+ }, (0, _spacing.default)('md'), _ref6 => {
50
50
  let {
51
51
  theme
52
52
  } = _ref6;
@@ -56,12 +56,12 @@ const Image = _styledComponents.default.img.withConfig({
56
56
  let {
57
57
  mediumBreakpointRowLayout
58
58
  } = _ref7;
59
- return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";border-radius:", ";width:120px;height:120px;}"], _ref8 => {
59
+ return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{border-radius:", ";width:96px;height:96px;}"], _ref8 => {
60
60
  let {
61
61
  theme
62
62
  } = _ref8;
63
63
  return theme.allBreakpoints('M');
64
- }, (0, _spacing.default)('sm'), (0, _spacing.default)('md'));
64
+ }, (0, _spacing.default)('md'));
65
65
  }, _ref9 => {
66
66
  let {
67
67
  smallBreakpointRowLayout,
package/dist/components/Molecules/Card/Card.style.js CHANGED
@@ -40,35 +40,29 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
40
40
  const Copy = exports.Copy = _styledComponents.default.div.withConfig({
41
41
  displayName: "Cardstyle__Copy",
42
42
  componentId: "sc-cxn4co-2"
43
- })(["display:flex;flex-direction:column;padding:", ";", " ", " ", ""], (0, _spacing.default)('l'), _ref5 => {
43
+ })(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}"], (0, _spacing.default)('l'), _ref5 => {
44
44
  let {
45
45
  smallBreakpointRowLayout
46
46
  } = _ref5;
47
- return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1,h2,h3,h4,h5{margin:", ";}}"], _ref6 => {
47
+ return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref6 => {
48
48
  let {
49
49
  theme
50
50
  } = _ref6;
51
51
  return theme.allBreakpoints('S');
52
- }, props => props.smallBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm')), props => props.smallBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm'), " 0 ").concat((0, _spacing.default)('sm')));
52
+ }, 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');
53
53
  }, _ref7 => {
54
54
  let {
55
55
  mediumBreakpointRowLayout
56
56
  } = _ref7;
57
- return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1,h2,h3,h4,h5{margin:", ";}}"], _ref8 => {
57
+ return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref8 => {
58
58
  let {
59
59
  theme
60
60
  } = _ref8;
61
61
  return theme.allBreakpoints('M');
62
- }, props => props.mediumBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm')), props => props.mediumBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm'), " 0 ").concat((0, _spacing.default)('sm')));
62
+ }, 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');
63
63
  }, _ref9 => {
64
64
  let {
65
- smallBreakpointRowLayout,
66
- mediumBreakpointRowLayout
65
+ theme
67
66
  } = _ref9;
68
- return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:0 0 1rem 0;}h2{margin-bottom:2rem;}h3,h4,h5{margin-bottom:1rem;}}"], _ref10 => {
69
- let {
70
- theme
71
- } = _ref10;
72
- return theme.allBreakpoints('L');
73
- }, (0, _spacing.default)('l'));
74
- });
67
+ return theme.allBreakpoints('L');
68
+ }, (0, _spacing.default)('l'));
package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap CHANGED
@@ -48,6 +48,16 @@ exports[`renders correctly 1`] = `
48
48
  }
49
49
  }
50
50
 
51
+ @media (min-width:1024px) {
52
+ .c1 {
53
+ padding: 2rem;
54
+ }
55
+
56
+ .c1 h1 {
57
+ font-size: 2rem;
58
+ }
59
+ }
60
+
51
61
  <div
52
62
  className="c0"
53
63
  >
@@ -112,6 +122,16 @@ exports[`renders correctly 2`] = `
112
122
  }
113
123
  }
114
124
 
125
+ @media (min-width:1024px) {
126
+ .c1 {
127
+ padding: 2rem;
128
+ }
129
+
130
+ .c1 h1 {
131
+ font-size: 2rem;
132
+ }
133
+ }
134
+
115
135
  <div
116
136
  className="c0"
117
137
  >
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": "7.43.0",
4
+ "version": "7.44.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Picture/Picture.js CHANGED
@@ -30,10 +30,9 @@ const Image = styled.img`
30
30
  /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
31
31
  ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
32
32
  @media ${({ theme }) => theme.allBreakpoints('S')} {
33
- padding: ${spacing('sm')};
34
33
  border-radius: ${spacing('md')};
35
- width: 110px;
36
- height: 110px;
34
+ width: 80px;
35
+ height: 80px;
37
36
  }
38
37
  @media ${({ theme }) => theme.allBreakpoints('M')} {
39
38
  padding: none;
@@ -46,10 +45,9 @@ const Image = styled.img`
46
45
  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
47
46
  ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout === true) && css`
48
47
  @media ${({ theme }) => theme.allBreakpoints('M')} {
49
- padding: ${spacing('sm')};
50
48
  border-radius: ${spacing('md')};
51
- width: 120px;
52
- height: 120px;
49
+ width: 96px;
50
+ height: 96px;
53
51
  }
54
52
  `}
55
53
 
package/src/components/Molecules/Card/Card.style.js CHANGED
@@ -39,9 +39,10 @@ const Copy = styled.div`
39
39
  ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout
40
40
  === true) && css`
41
41
  @media ${({ theme }) => theme.allBreakpoints('S')} {
42
- padding: ${props => ((props.smallBreakpointRowLayout === true) && `${spacing('sm')}`)};
43
- h1, h2, h3, h4, h5 {
44
- margin: ${props => ((props.smallBreakpointRowLayout === true) && `${spacing('sm')} 0 ${spacing('sm')}`)};
42
+ padding: ${props => ((props.smallBreakpointRowLayout === true) ? `${spacing('sm')}` : `${spacing('l')}`)};
43
+ h1 {
44
+ margin: ${props => ((props.smallBreakpointRowLayout === true) && `0 0 ${spacing('sm')}`)};
45
+ font-size: ${props => ((props.smallBreakpointRowLayout === true) ? '1.5rem' : '2rem')};
45
46
  }
46
47
  }
47
48
  `}
@@ -50,28 +51,21 @@ const Copy = styled.div`
50
51
  ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout
51
52
  === true) && css`
52
53
  @media ${({ theme }) => theme.allBreakpoints('M')} {
53
- padding: ${props => ((props.mediumBreakpointRowLayout === true) && `${spacing('sm')}`)};
54
- h1, h2, h3, h4, h5 {
55
- margin: ${props => ((props.mediumBreakpointRowLayout === true) && `${spacing('sm')} 0 ${spacing('sm')}`)};
54
+ padding: ${props => ((props.mediumBreakpointRowLayout === true) ? `${spacing('sm')}` : `${spacing('l')}`)};
55
+ h1 {
56
+ margin: ${props => ((props.mediumBreakpointRowLayout === true) && `0 0 ${spacing('sm')}`)};
57
+ font-size: ${props => ((props.mediumBreakpointRowLayout === true) ? '1.5rem' : '2rem')};
56
58
  }
57
59
  }
58
60
  `}
59
61
 
60
- /* Check for Cards/smallBreakpointRowLayout or mediumBreakpointRowLayout prop coming from the CMS and adjust styling back to normal */
61
- ${({ smallBreakpointRowLayout, mediumBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) || (mediumBreakpointRowLayout === true)) && css`
62
- @media ${({ theme }) => theme.allBreakpoints('L')} {
63
- padding: ${spacing('l')};
64
- h1 {
65
- margin: 0 0 1rem 0;
66
- }
67
- h2 {
68
- margin-bottom: 2rem;
69
- }
70
- h3, h4, h5 {
71
- margin-bottom: 1rem;
72
- }
73
- }
74
- `}
62
+ /* Reset styles at large breakpoint */
63
+ @media ${({ theme }) => theme.allBreakpoints('L')} {
64
+ padding: ${spacing('l')};
65
+ h1 {
66
+ font-size: 2rem;
67
+ }
68
+ }
75
69
  `;
76
70
 
77
71
  export { Container, Wrapper, Copy };
package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap CHANGED
@@ -48,6 +48,16 @@ exports[`renders correctly 1`] = `
48
48
  }
49
49
  }
50
50
 
51
+ @media (min-width:1024px) {
52
+ .c1 {
53
+ padding: 2rem;
54
+ }
55
+
56
+ .c1 h1 {
57
+ font-size: 2rem;
58
+ }
59
+ }
60
+
51
61
  <div
52
62
  className="c0"
53
63
  >
@@ -112,6 +122,16 @@ exports[`renders correctly 2`] = `
112
122
  }
113
123
  }
114
124
 
125
+ @media (min-width:1024px) {
126
+ .c1 {
127
+ padding: 2rem;
128
+ }
129
+
130
+ .c1 h1 {
131
+ font-size: 2rem;
132
+ }
133
+ }
134
+
115
135
  <div
116
136
  className="c0"
117
137
  >