@comicrelief/component-library 8.24.2 → 8.25.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 (9) hide show
  1. package/dist/components/Organisms/EmailSignUp/EmailSignUp.md +3 -3
  2. package/dist/components/Organisms/EmailSignUp/EmailSignUp.style.js +34 -26
  3. package/dist/components/Organisms/EmailSignUp/EmailSignUpForm.js +3 -0
  4. package/dist/components/Organisms/EmailSignUp/_EmailSignUp.js +13 -3
  5. package/package.json +1 -1
  6. package/src/components/Organisms/EmailSignUp/EmailSignUp.md +3 -3
  7. package/src/components/Organisms/EmailSignUp/EmailSignUp.style.js +4 -4
  8. package/src/components/Organisms/EmailSignUp/EmailSignUpForm.js +2 -0
  9. package/src/components/Organisms/EmailSignUp/_EmailSignUp.js +20 -4
package/dist/components/Organisms/EmailSignUp/EmailSignUp.md CHANGED
@@ -1,5 +1,6 @@
1
1
  # Email SignUp Form
2
-
2
+ ### EmailSignUpForm.js is just a wrapper for viewing in the CL
3
+ ### The email sign up component that is used/exported is _EmailSignUp.js
3
4
 
4
5
  ```js
5
6
  import EmailSignUpForm from './EmailSignUpForm';
@@ -7,8 +8,7 @@ import Text from '../../Atoms/Text/Text';
7
8
 
8
9
  <>
9
10
  <Text tag="p">This EmailSignUpForm component exists purely to show the EmailSignUp component functioning within the Component Library; applications are to provide their own react-hook-form form and validation, based on these.</Text>
10
-
11
+
11
12
  <EmailSignUpForm />
12
13
  </>
13
-
14
14
  ```
package/dist/components/Organisms/EmailSignUp/EmailSignUp.style.js CHANGED
@@ -19,16 +19,22 @@ const ESUWrapper = exports.ESUWrapper = _styledComponents.default.div.withConfig
19
19
  return theme.fontSize('s');
20
20
  }, _ref2 => {
21
21
  let {
22
- theme
22
+ theme,
23
+ textColour
23
24
  } = _ref2;
24
- return theme.color('white');
25
+ return theme.color(textColour);
25
26
  }, _ref3 => {
26
27
  let {
27
28
  theme,
28
29
  backgroundColour
29
30
  } = _ref3;
30
31
  return theme.color(backgroundColour);
31
- }, (0, _spacing.default)('m'));
32
+ }, _ref4 => {
33
+ let {
34
+ containerPadding
35
+ } = _ref4;
36
+ return containerPadding ? (0, _spacing.default)('m') : 0;
37
+ });
32
38
  const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
33
39
  displayName: "EmailSignUpstyle__TopCopyWrapper",
34
40
  componentId: "sc-w2b8yk-1"
@@ -36,36 +42,37 @@ const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.wi
36
42
  const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.withConfig({
37
43
  displayName: "EmailSignUpstyle__ButtonWrapper",
38
44
  componentId: "sc-w2b8yk-2"
39
- })(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), _ref4 => {
45
+ })(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), _ref5 => {
40
46
  let {
41
47
  theme,
42
48
  buttonColour
43
- } = _ref4;
49
+ } = _ref5;
44
50
  return theme.color(buttonColour);
45
51
  });
46
52
  const PrivacyCopyWrapper = exports.PrivacyCopyWrapper = _styledComponents.default.div.withConfig({
47
53
  displayName: "EmailSignUpstyle__PrivacyCopyWrapper",
48
54
  componentId: "sc-w2b8yk-3"
49
- })(["display:flex;flex-direction:column;margin-top:", ";p{font-size:", ";line-height:", ";a{font-size:", ";color:", ";}}"], (0, _spacing.default)('md'), _ref5 => {
50
- let {
51
- theme
52
- } = _ref5;
53
- return theme.fontSize('s');
54
- }, _ref6 => {
55
+ })(["display:flex;flex-direction:column;margin-top:", ";p{font-size:", ";line-height:", ";a{font-size:", ";color:", ";}}"], (0, _spacing.default)('md'), _ref6 => {
55
56
  let {
56
57
  theme
57
58
  } = _ref6;
58
- return theme.fontSize('xl');
59
+ return theme.fontSize('s');
59
60
  }, _ref7 => {
60
61
  let {
61
62
  theme
62
63
  } = _ref7;
63
- return theme.fontSize('s');
64
+ return theme.fontSize('xl');
64
65
  }, _ref8 => {
65
66
  let {
66
67
  theme
67
68
  } = _ref8;
68
- return theme.color('white');
69
+ return theme.fontSize('s');
70
+ }, _ref9 => {
71
+ let {
72
+ theme,
73
+ textColour
74
+ } = _ref9;
75
+ return theme.color(textColour);
69
76
  });
70
77
  const FormInner = exports.FormInner = _styledComponents.default.div.withConfig({
71
78
  displayName: "EmailSignUpstyle__FormInner",
@@ -74,34 +81,35 @@ const FormInner = exports.FormInner = _styledComponents.default.div.withConfig({
74
81
  const NameWrapper = exports.NameWrapper = _styledComponents.default.div.withConfig({
75
82
  displayName: "EmailSignUpstyle__NameWrapper",
76
83
  componentId: "sc-w2b8yk-5"
77
- })(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], _ref9 => {
84
+ })(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], _ref10 => {
78
85
  let {
79
86
  theme
80
- } = _ref9;
87
+ } = _ref10;
81
88
  return theme.allBreakpoints('L');
82
- }, _ref10 => {
89
+ }, _ref11 => {
83
90
  let {
84
91
  columnLayout
85
- } = _ref10;
92
+ } = _ref11;
86
93
  return columnLayout ? 'column' : 'row';
87
- }, _ref11 => {
94
+ }, _ref12 => {
88
95
  let {
89
96
  columnLayout
90
- } = _ref11;
97
+ } = _ref12;
91
98
  return columnLayout ? 0 : (0, _spacing.default)('md');
92
99
  });
93
100
  const InputField = exports.InputField = (0, _styledComponents.default)(_TextInput.default).withConfig({
94
101
  displayName: "EmailSignUpstyle__InputField",
95
102
  componentId: "sc-w2b8yk-6"
96
- })(["width:100%;margin-bottom:", ";& > span:first-child{color:", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), _ref12 => {
103
+ })(["width:100%;margin-bottom:", ";& > span:first-child{color:", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), _ref13 => {
97
104
  let {
98
- theme
99
- } = _ref12;
100
- return theme.color('white');
101
- }, _ref13 => {
105
+ theme,
106
+ textColour
107
+ } = _ref13;
108
+ return theme.color(textColour);
109
+ }, _ref14 => {
102
110
  let {
103
111
  theme
104
- } = _ref13;
112
+ } = _ref14;
105
113
  return theme.allBreakpoints('L');
106
114
  });
107
115
  const Title = exports.Title = (0, _styledComponents.default)(_Text.default).withConfig({
package/dist/components/Organisms/EmailSignUp/EmailSignUpForm.js CHANGED
@@ -10,6 +10,9 @@ var _reactHookForm = require("react-hook-form");
10
10
  var _yup = require("@hookform/resolvers/yup");
11
11
  var _RichText = _interopRequireDefault(require("../../Atoms/RichText/RichText"));
12
12
  var _EmailSignUp = require("./_EmailSignUp");
13
+ // EmailSignUpForm.js is just a wrapper for viewing in the CL
14
+ // The email sign up component that is used/exported is _EmailSignUp.js
15
+
13
16
  const EmailSignUpForm = () => {
14
17
  const validationSchema = (0, _EmailSignUp.buildEsuValidationSchema)({});
15
18
  const formMethods = (0, _reactHookForm.useForm)({
package/dist/components/Organisms/EmailSignUp/_EmailSignUp.js CHANGED
@@ -32,9 +32,11 @@ const EmailSignUp = _ref => {
32
32
  privacyCopy,
33
33
  backgroundColour = 'deep_violet_dark',
34
34
  buttonColour = 'red',
35
- buttonText = 'Subscribe',
35
+ buttonText,
36
+ containerPadding = true,
36
37
  formContext,
37
38
  columnLayout = false,
39
+ textColour = 'white',
38
40
  ...rest
39
41
  } = _ref;
40
42
  const {
@@ -46,8 +48,11 @@ const EmailSignUp = _ref => {
46
48
  errors
47
49
  }
48
50
  } = formContext;
51
+ const normalisedButtonText = buttonText || 'Subscribe';
49
52
  return /*#__PURE__*/_react.default.createElement(_EmailSignUp.ESUWrapper, Object.assign({
50
- backgroundColour: backgroundColour
53
+ backgroundColour: backgroundColour,
54
+ textColour: textColour,
55
+ containerPadding: containerPadding
51
56
  }, rest), /*#__PURE__*/_react.default.createElement(_EmailSignUp.Title, {
52
57
  tag: "h2",
53
58
  size: "xxl",
@@ -59,6 +64,7 @@ const EmailSignUp = _ref => {
59
64
  }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.TopCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, successCopy))), !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_EmailSignUp.FormInner, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.NameWrapper, {
60
65
  columnLayout: columnLayout
61
66
  }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
67
+ textColour: textColour,
62
68
  fieldName: _EmailSignUpConfig.ESU_FIELDS.FIRST_NAME,
63
69
  id: "first-name",
64
70
  type: "text",
@@ -66,6 +72,7 @@ const EmailSignUp = _ref => {
66
72
  placeholder: "Enter your first name",
67
73
  formContext: formContext
68
74
  }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
75
+ textColour: textColour,
69
76
  fieldName: _EmailSignUpConfig.ESU_FIELDS.LAST_NAME,
70
77
  id: "last-name",
71
78
  type: "text",
@@ -73,6 +80,7 @@ const EmailSignUp = _ref => {
73
80
  placeholder: "Enter your last name",
74
81
  formContext: formContext
75
82
  })), /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
83
+ textColour: textColour,
76
84
  fieldName: _EmailSignUpConfig.ESU_FIELDS.EMAIL,
77
85
  id: "email",
78
86
  type: "email",
@@ -87,6 +95,8 @@ const EmailSignUp = _ref => {
87
95
  loading: isSubmitting,
88
96
  loadingText: "Submitting...",
89
97
  "data-test": "subscribe-button"
90
- }, /*#__PURE__*/_react.default.createElement(_Text.default, null, buttonText)))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
98
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, null, normalisedButtonText)))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, {
99
+ textColour: textColour
100
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
91
101
  };
92
102
  exports.EmailSignUp = EmailSignUp;
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.24.2",
4
+ "version": "8.25.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Organisms/EmailSignUp/EmailSignUp.md CHANGED
@@ -1,5 +1,6 @@
1
1
  # Email SignUp Form
2
-
2
+ ### EmailSignUpForm.js is just a wrapper for viewing in the CL
3
+ ### The email sign up component that is used/exported is _EmailSignUp.js
3
4
 
4
5
  ```js
5
6
  import EmailSignUpForm from './EmailSignUpForm';
@@ -7,8 +8,7 @@ import Text from '../../Atoms/Text/Text';
7
8
 
8
9
  <>
9
10
  <Text tag="p">This EmailSignUpForm component exists purely to show the EmailSignUp component functioning within the Component Library; applications are to provide their own react-hook-form form and validation, based on these.</Text>
10
-
11
+
11
12
  <EmailSignUpForm />
12
13
  </>
13
-
14
14
  ```
package/src/components/Organisms/EmailSignUp/EmailSignUp.style.js CHANGED
@@ -8,9 +8,9 @@ const ESUWrapper = styled.div`
8
8
  display: flex;
9
9
  flex-direction: column;
10
10
  font-size: ${({ theme }) => theme.fontSize('s')};
11
- color: ${({ theme }) => theme.color('white')};
11
+ color: ${({ theme, textColour }) => theme.color(textColour)};
12
12
  background-color: ${({ theme, backgroundColour }) => theme.color(backgroundColour)};
13
- padding: ${spacing('m')};
13
+ padding: ${({ containerPadding }) => (containerPadding ? spacing('m') : 0)};
14
14
  `;
15
15
 
16
16
  const TopCopyWrapper = styled.div`
@@ -35,7 +35,7 @@ const PrivacyCopyWrapper = styled.div`
35
35
  line-height: ${({ theme }) => theme.fontSize('xl')};
36
36
  a {
37
37
  font-size: ${({ theme }) => theme.fontSize('s')};
38
- color: ${({ theme }) => theme.color('white')};
38
+ color: ${({ theme, textColour }) => theme.color(textColour)};
39
39
  }
40
40
  }
41
41
  `;
@@ -65,7 +65,7 @@ const InputField = styled(TextInput)`
65
65
  margin-bottom: ${spacing('md')};
66
66
 
67
67
  & > span:first-child {
68
- color: ${({ theme }) => theme.color('white')};
68
+ color: ${({ theme, textColour }) => theme.color(textColour)};
69
69
  }
70
70
 
71
71
  @media ${({ theme }) => theme.allBreakpoints('L')} {
package/src/components/Organisms/EmailSignUp/EmailSignUpForm.js CHANGED
@@ -1,3 +1,5 @@
1
+ // EmailSignUpForm.js is just a wrapper for viewing in the CL
2
+ // The email sign up component that is used/exported is _EmailSignUp.js
1
3
  import React from 'react';
2
4
  import { useForm, FormProvider } from 'react-hook-form';
3
5
  import { yupResolver } from '@hookform/resolvers/yup';
package/src/components/Organisms/EmailSignUp/_EmailSignUp.js CHANGED
@@ -24,9 +24,11 @@ const EmailSignUp = ({
24
24
  privacyCopy,
25
25
  backgroundColour = 'deep_violet_dark',
26
26
  buttonColour = 'red',
27
- buttonText = 'Subscribe',
27
+ buttonText,
28
+ containerPadding = true,
28
29
  formContext,
29
30
  columnLayout = false,
31
+ textColour = 'white',
30
32
  ...rest
31
33
  }) => {
32
34
  const {
@@ -39,8 +41,15 @@ const EmailSignUp = ({
39
41
  }
40
42
  } = formContext;
41
43
 
44
+ const normalisedButtonText = buttonText || 'Subscribe';
45
+
42
46
  return (
43
- <ESUWrapper backgroundColour={backgroundColour} {...rest}>
47
+ <ESUWrapper
48
+ backgroundColour={backgroundColour}
49
+ textColour={textColour}
50
+ containerPadding={containerPadding}
51
+ {...rest}
52
+ >
44
53
  <Title tag="h2" size="xxl" weight="400" family="Anton" uppercase>
45
54
  {title}
46
55
  </Title>
@@ -62,6 +71,7 @@ const EmailSignUp = ({
62
71
  <FormInner>
63
72
  <NameWrapper columnLayout={columnLayout}>
64
73
  <InputField
74
+ textColour={textColour}
65
75
  fieldName={ESU_FIELDS.FIRST_NAME}
66
76
  id="first-name"
67
77
  type="text"
@@ -70,6 +80,7 @@ const EmailSignUp = ({
70
80
  formContext={formContext}
71
81
  />
72
82
  <InputField
83
+ textColour={textColour}
73
84
  fieldName={ESU_FIELDS.LAST_NAME}
74
85
  id="last-name"
75
86
  type="text"
@@ -79,6 +90,7 @@ const EmailSignUp = ({
79
90
  />
80
91
  </NameWrapper>
81
92
  <InputField
93
+ textColour={textColour}
82
94
  fieldName={ESU_FIELDS.EMAIL}
83
95
  id="email"
84
96
  type="email"
@@ -94,7 +106,7 @@ const EmailSignUp = ({
94
106
  loadingText="Submitting..."
95
107
  data-test="subscribe-button"
96
108
  >
97
- <Text>{buttonText}</Text>
109
+ <Text>{normalisedButtonText}</Text>
98
110
  </ButtonWithStates>
99
111
  </ButtonWrapper>
100
112
  </FormInner>
@@ -109,7 +121,9 @@ const EmailSignUp = ({
109
121
  </>
110
122
  )}
111
123
 
112
- <PrivacyCopyWrapper>
124
+ <PrivacyCopyWrapper
125
+ textColour={textColour}
126
+ >
113
127
  <Text>{privacyCopy}</Text>
114
128
  </PrivacyCopyWrapper>
115
129
  </ESUWrapper>
@@ -124,6 +138,8 @@ EmailSignUp.propTypes = {
124
138
  backgroundColour: PropTypes.string,
125
139
  buttonColour: PropTypes.string,
126
140
  buttonText: PropTypes.string,
141
+ textColour: PropTypes.string,
142
+ containerPadding: PropTypes.bool,
127
143
  formContext: PropTypes.shape().isRequired,
128
144
  columnLayout: PropTypes.bool
129
145
  };