@comicrelief/component-library 8.25.1 → 8.25.3

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/Input/Input.js +17 -11
  2. package/dist/components/Molecules/CardDs/CardDs.style.js +11 -12
  3. package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +9 -9
  4. package/package.json +1 -1
  5. package/src/components/Atoms/Input/Input.js +2 -0
  6. package/src/components/Molecules/CardDs/CardDs.style.js +17 -18
  7. package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +9 -9
package/dist/components/Atoms/Input/Input.js CHANGED
@@ -28,23 +28,28 @@ const InputWrapper = _styledComponents.default.div.withConfig({
28
28
  const InputFieldContainer = _styledComponents.default.div.withConfig({
29
29
  displayName: "Input__InputFieldContainer",
30
30
  componentId: "sc-bcqy1o-1"
31
- })(["position:relative;width:100%;display:flex;justify-content:flex-end;align-items:center;", ""], _ref2 => {
31
+ })(["position:relative;width:100%;display:flex;", ";justify-content:flex-end;align-items:center;", ""], _ref2 => {
32
+ let {
33
+ error
34
+ } = _ref2;
35
+ return error && 'flex-direction: row;';
36
+ }, _ref3 => {
32
37
  let {
33
38
  maxPxWidthMediumBreakpoint,
34
39
  maxPxWidthLargeBreakpoint,
35
40
  theme
36
- } = _ref2;
41
+ } = _ref3;
37
42
  return (0, _styledComponents.css)(["@media ", "{", "}@media ", "{", "}"], theme.allBreakpoints('M'), maxPxWidthMediumBreakpoint && "max-width: ".concat(maxPxWidthMediumBreakpoint, "px;"), theme.allBreakpoints('L'), maxPxWidthLargeBreakpoint && "max-width: ".concat(maxPxWidthLargeBreakpoint, "px;"));
38
43
  });
39
44
  const InputField = _styledComponents.default.input.withConfig({
40
45
  displayName: "Input__InputField",
41
46
  componentId: "sc-bcqy1o-2"
42
- })(["", ""], _ref3 => {
47
+ })(["", ""], _ref4 => {
43
48
  let {
44
49
  theme,
45
50
  error,
46
51
  prefixLength
47
- } = _ref3;
52
+ } = _ref4;
48
53
  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:1rem 2.4rem 1rem 1.5rem;", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}"], prefixLength > 0 ? "padding-left: ".concat(getPrefixWidth(prefixLength), ";") : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'));
49
54
  });
50
55
  const ErrorIconWrapper = _styledComponents.default.div.withConfig({
@@ -54,18 +59,18 @@ const ErrorIconWrapper = _styledComponents.default.div.withConfig({
54
59
  const Prefix = _styledComponents.default.div.withConfig({
55
60
  displayName: "Input__Prefix",
56
61
  componentId: "sc-bcqy1o-4"
57
- })(["position:absolute;left:0;top:0;", " display:flex;height:100%;width:", ";justify-content:center;align-items:center;color:", ";font-weight:700;font-size:inherit;margin-left:2px;"], (0, _zIndex.default)('high'), _ref4 => {
62
+ })(["position:absolute;left:0;top:0;", " display:flex;height:100%;width:", ";justify-content:center;align-items:center;color:", ";font-weight:700;font-size:inherit;margin-left:2px;"], (0, _zIndex.default)('high'), _ref5 => {
58
63
  let {
59
64
  length
60
- } = _ref4;
65
+ } = _ref5;
61
66
  return getPrefixWidth(length);
62
- }, _ref5 => {
67
+ }, _ref6 => {
63
68
  let {
64
69
  theme
65
- } = _ref5;
70
+ } = _ref6;
66
71
  return theme.color('grey_dark');
67
72
  });
68
- const Input = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
73
+ const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
69
74
  let {
70
75
  errorMsg = '',
71
76
  id,
@@ -81,7 +86,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
81
86
  maxPxWidthMediumBreakpoint,
82
87
  maxPxWidthLargeBreakpoint,
83
88
  ...rest
84
- } = _ref6;
89
+ } = _ref7;
85
90
  return /*#__PURE__*/_react.default.createElement(_Label.default, Object.assign({
86
91
  className: className,
87
92
  htmlFor: id,
@@ -95,7 +100,8 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
95
100
  length: prefix.length
96
101
  }, prefix), /*#__PURE__*/_react.default.createElement(InputFieldContainer, {
97
102
  maxPxWidthMediumBreakpoint: maxPxWidthMediumBreakpoint,
98
- maxPxWidthLargeBreakpoint: maxPxWidthLargeBreakpoint
103
+ maxPxWidthLargeBreakpoint: maxPxWidthLargeBreakpoint,
104
+ error: Boolean(errorMsg)
99
105
  }, /*#__PURE__*/_react.default.createElement(InputField, Object.assign({
100
106
  id: id,
101
107
  type: type,
package/dist/components/Molecules/CardDs/CardDs.style.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.MediaLink = exports.Image = exports.Copy = exports.Container = exports.CTA = void 0;
9
9
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
- var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
11
10
  var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
12
11
  const Container = exports.Container = _styledComponents.default.div.withConfig({
13
12
  displayName: "CardDsstyle__Container",
@@ -33,13 +32,13 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
33
32
  const Image = exports.Image = _styledComponents.default.div.withConfig({
34
33
  displayName: "CardDsstyle__Image",
35
34
  componentId: "sc-1m4yp5m-1"
36
- })(["height:auto;margin:0 0 0 ", ";", ";img{border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), _ref4 => {
35
+ })(["height:auto;margin:0 0 0 1.5rem;", ";img{border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);}"], _ref4 => {
37
36
  let {
38
37
  isCarousel,
39
38
  theme
40
39
  } = _ref4;
41
- return !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:0 -", " 0 ", ";}"], theme.allBreakpoints('M'), (0, _spacing.default)('m'), (0, _spacing.default)('m'));
42
- }, (0, _spacing.default)('md'), (0, _spacing.default)('md'));
40
+ return !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:0 -1.5rem 0 1.5rem;}"], theme.allBreakpoints('M'));
41
+ });
43
42
  const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
44
43
  displayName: "CardDsstyle__MediaLink",
45
44
  componentId: "sc-1m4yp5m-2"
@@ -58,18 +57,18 @@ const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
58
57
  const Copy = exports.Copy = _styledComponents.default.div.withConfig({
59
58
  displayName: "CardDsstyle__Copy",
60
59
  componentId: "sc-1m4yp5m-3"
61
- })(["padding:", ";", ";display:flex;flex-direction:column;border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);background:", ";margin:0 ", " 0 0;@media ", "{height:100%;}", ";", ";"], (0, _spacing.default)('l'), _ref7 => {
60
+ })(["padding:2rem;", ";display:flex;flex-direction:column;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);background:", ";margin:0 1.5rem 0 0;@media ", "{height:100%;}", ";", ";"], _ref7 => {
62
61
  let {
63
62
  hasLink
64
63
  } = _ref7;
65
- return hasLink && "padding-bottom: ".concat((0, _spacing.default)('xl'));
66
- }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref8 => {
64
+ return hasLink && 'padding-bottom: 4rem';
65
+ }, _ref8 => {
67
66
  let {
68
67
  theme,
69
68
  backgroundColor
70
69
  } = _ref8;
71
70
  return theme.color(backgroundColor);
72
- }, (0, _spacing.default)('m'), _ref9 => {
71
+ }, _ref9 => {
73
72
  let {
74
73
  theme
75
74
  } = _ref9;
@@ -80,20 +79,20 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
80
79
  isCarousel,
81
80
  theme
82
81
  } = _ref10;
83
- return hasImage && (0, _styledComponents.css)(["margin-top:calc(-2 * ", ");min-height:calc(5 * ", ");", ";@media ", "{margin:calc(-2 * ", ") 0 -", " 0;width:100%;}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:", " 0 -", " -", ";width:calc(50% + 6rem);}"], theme.allBreakpoints('M'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m')), theme.allBreakpoints('XL'), (0, _spacing.default)('m'), (0, _spacing.default)('m'));
82
+ return hasImage && (0, _styledComponents.css)(["margin-top:-3rem;min-height:10rem;", ";@media ", "{margin:-3rem 0 -1.5rem 0;width:100%;}"], !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:1.5rem 0 -1.5rem -1.5rem;width:calc(50% + 6rem);}"], theme.allBreakpoints('M')), theme.allBreakpoints('XL'));
84
83
  });
85
84
  const CTA = exports.CTA = _styledComponents.default.div.withConfig({
86
85
  displayName: "CardDsstyle__CTA",
87
86
  componentId: "sc-1m4yp5m-4"
88
- })(["position:absolute;right:", ";bottom:-", ";", ";", ";"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), _ref11 => {
87
+ })(["position:absolute;right:3rem;bottom:-1.5rem;", ";", ";"], (0, _zIndex.default)('medium'), _ref11 => {
89
88
  let {
90
89
  isCarousel,
91
90
  theme
92
91
  } = _ref11;
93
- return !isCarousel && (0, _styledComponents.css)(["@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], theme.allBreakpoints('M'), (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref12 => {
92
+ return !isCarousel && (0, _styledComponents.css)(["@media ", "{bottom:-3rem;", ";}"], theme.allBreakpoints('M'), _ref12 => {
94
93
  let {
95
94
  hasImage
96
95
  } = _ref12;
97
- return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
96
+ return !hasImage && 'bottom: -1.5rem;';
98
97
  });
99
98
  });
package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED
@@ -108,13 +108,13 @@ exports[`renders Column view correctly 1`] = `
108
108
  background: #FFFFFF;
109
109
  margin: 0 1.5rem 0 0;
110
110
  z-index: 1;
111
- margin-top: calc(-2 * 1.5rem);
112
- min-height: calc(5 * 2rem);
111
+ margin-top: -3rem;
112
+ min-height: 10rem;
113
113
  }
114
114
 
115
115
  .c6 {
116
116
  position: absolute;
117
- right: 1.5rem;
117
+ right: 3rem;
118
118
  bottom: -1.5rem;
119
119
  z-index: 2;
120
120
  }
@@ -173,7 +173,7 @@ exports[`renders Column view correctly 1`] = `
173
173
 
174
174
  @media (min-width:1440px) {
175
175
  .c5 {
176
- margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
176
+ margin: -3rem 0 -1.5rem 0;
177
177
  width: 100%;
178
178
  }
179
179
  }
@@ -360,13 +360,13 @@ exports[`renders correctly 1`] = `
360
360
  background: #FFFFFF;
361
361
  margin: 0 1.5rem 0 0;
362
362
  z-index: 1;
363
- margin-top: calc(-2 * 1.5rem);
364
- min-height: calc(5 * 2rem);
363
+ margin-top: -3rem;
364
+ min-height: 10rem;
365
365
  }
366
366
 
367
367
  .c6 {
368
368
  position: absolute;
369
- right: 1.5rem;
369
+ right: 3rem;
370
370
  bottom: -1.5rem;
371
371
  z-index: 2;
372
372
  }
@@ -452,14 +452,14 @@ exports[`renders correctly 1`] = `
452
452
 
453
453
  @media (min-width:1440px) {
454
454
  .c5 {
455
- margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
455
+ margin: -3rem 0 -1.5rem 0;
456
456
  width: 100%;
457
457
  }
458
458
  }
459
459
 
460
460
  @media (min-width:740px) {
461
461
  .c6 {
462
- bottom: calc(-1 * (2rem + 1rem));
462
+ bottom: -3rem;
463
463
  }
464
464
  }
465
465
 
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": "8.25.1",
4
+ "version": "8.25.3",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Input/Input.js CHANGED
@@ -20,6 +20,7 @@ const InputFieldContainer = styled.div`
20
20
  position: relative;
21
21
  width: 100%;
22
22
  display: flex;
23
+ ${({ error }) => error && 'flex-direction: row;'};
23
24
  justify-content: flex-end;
24
25
  align-items: center;
25
26
  ${({ maxPxWidthMediumBreakpoint, maxPxWidthLargeBreakpoint, theme }) => css`
@@ -115,6 +116,7 @@ const Input = React.forwardRef(
115
116
  <InputFieldContainer
116
117
  maxPxWidthMediumBreakpoint={maxPxWidthMediumBreakpoint}
117
118
  maxPxWidthLargeBreakpoint={maxPxWidthLargeBreakpoint}
119
+ error={Boolean(errorMsg)}
118
120
  >
119
121
  <InputField
120
122
  id={id}
package/src/components/Molecules/CardDs/CardDs.style.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import styled, { css } from 'styled-components';
2
- import spacing from '../../../theme/shared/spacing';
3
2
  import zIndex from '../../../theme/shared/zIndex';
4
3
 
5
4
  const Container = styled.div`
@@ -23,17 +22,17 @@ const Container = styled.div`
23
22
 
24
23
  const Image = styled.div`
25
24
  height: auto;
26
- margin: 0 0 0 ${spacing('m')};
25
+ margin: 0 0 0 1.5rem;
27
26
 
28
27
  ${({ isCarousel, theme }) => !isCarousel && css`
29
28
  @media ${theme.allBreakpoints('M')} {
30
- margin: 0 -${spacing('m')} 0 ${spacing('m')};
29
+ margin: 0 -1.5rem 0 1.5rem;
31
30
  }
32
31
  `};
33
32
 
34
33
  img {
35
- border-radius: ${spacing('md')};
36
- box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
34
+ border-radius: 1rem;
35
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
37
36
  }
38
37
  `;
39
38
 
@@ -52,14 +51,14 @@ const MediaLink = styled.a`
52
51
  `;
53
52
 
54
53
  const Copy = styled.div`
55
- padding: ${spacing('l')};
56
- ${({ hasLink }) => hasLink && `padding-bottom: ${spacing('xl')}`};
54
+ padding: 2rem;
55
+ ${({ hasLink }) => hasLink && 'padding-bottom: 4rem'};
57
56
  display: flex;
58
57
  flex-direction: column;
59
- border-radius: ${spacing('md')};
60
- box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
58
+ border-radius: 1rem;
59
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
61
60
  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
62
- margin: 0 ${spacing('m')} 0 0;
61
+ margin: 0 1.5rem 0 0;
63
62
 
64
63
  @media ${({ theme }) => theme.allBreakpoints('XL')} {
65
64
  height: 100%;
@@ -68,18 +67,18 @@ const Copy = styled.div`
68
67
  ${zIndex('low')};
69
68
 
70
69
  ${({ hasImage, isCarousel, theme }) => hasImage && css`
71
- margin-top: calc(-2 * ${spacing('m')});
72
- min-height: calc(5 * ${spacing('l')});
70
+ margin-top: -3rem;
71
+ min-height: 10rem;
73
72
 
74
73
  ${!isCarousel && css`
75
74
  @media ${theme.allBreakpoints('M')} {
76
- margin: ${spacing('m')} 0 -${spacing('m')} -${spacing('m')};
75
+ margin: 1.5rem 0 -1.5rem -1.5rem;
77
76
  width: calc(50% + 6rem);
78
77
  }
79
78
  `};
80
79
 
81
80
  @media ${theme.allBreakpoints('XL')} {
82
- margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
81
+ margin: -3rem 0 -1.5rem 0;
83
82
  width: 100%;
84
83
  }
85
84
  `};
@@ -87,15 +86,15 @@ const Copy = styled.div`
87
86
 
88
87
  const CTA = styled.div`
89
88
  position: absolute;
90
- right: ${spacing('m')};
91
- bottom: -${spacing('m')};
89
+ right: 3rem;
90
+ bottom: -1.5rem;
92
91
 
93
92
  ${zIndex('medium')};
94
93
 
95
94
  ${({ isCarousel, theme }) => !isCarousel && css`
96
95
  @media ${theme.allBreakpoints('M')} {
97
- bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
98
- ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
96
+ bottom: -3rem;
97
+ ${({ hasImage }) => !hasImage && 'bottom: -1.5rem;'};
99
98
  }
100
99
  `};
101
100
  `;
package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED
@@ -108,13 +108,13 @@ exports[`renders Column view correctly 1`] = `
108
108
  background: #FFFFFF;
109
109
  margin: 0 1.5rem 0 0;
110
110
  z-index: 1;
111
- margin-top: calc(-2 * 1.5rem);
112
- min-height: calc(5 * 2rem);
111
+ margin-top: -3rem;
112
+ min-height: 10rem;
113
113
  }
114
114
 
115
115
  .c6 {
116
116
  position: absolute;
117
- right: 1.5rem;
117
+ right: 3rem;
118
118
  bottom: -1.5rem;
119
119
  z-index: 2;
120
120
  }
@@ -173,7 +173,7 @@ exports[`renders Column view correctly 1`] = `
173
173
 
174
174
  @media (min-width:1440px) {
175
175
  .c5 {
176
- margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
176
+ margin: -3rem 0 -1.5rem 0;
177
177
  width: 100%;
178
178
  }
179
179
  }
@@ -360,13 +360,13 @@ exports[`renders correctly 1`] = `
360
360
  background: #FFFFFF;
361
361
  margin: 0 1.5rem 0 0;
362
362
  z-index: 1;
363
- margin-top: calc(-2 * 1.5rem);
364
- min-height: calc(5 * 2rem);
363
+ margin-top: -3rem;
364
+ min-height: 10rem;
365
365
  }
366
366
 
367
367
  .c6 {
368
368
  position: absolute;
369
- right: 1.5rem;
369
+ right: 3rem;
370
370
  bottom: -1.5rem;
371
371
  z-index: 2;
372
372
  }
@@ -452,14 +452,14 @@ exports[`renders correctly 1`] = `
452
452
 
453
453
  @media (min-width:1440px) {
454
454
  .c5 {
455
- margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
455
+ margin: -3rem 0 -1.5rem 0;
456
456
  width: 100%;
457
457
  }
458
458
  }
459
459
 
460
460
  @media (min-width:740px) {
461
461
  .c6 {
462
- bottom: calc(-1 * (2rem + 1rem));
462
+ bottom: -3rem;
463
463
  }
464
464
  }
465
465