@comicrelief/component-library 8.19.1 → 8.20.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.
- package/README.md +2 -2
- package/dist/components/Atoms/Input/Input.js +14 -5
- package/dist/components/Atoms/Input/Input.md +14 -0
- package/dist/components/Atoms/Input/input.test.js +13 -1
- package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +9 -21
- package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +3 -7
- package/dist/components/Molecules/SearchInput/SearchInput.test.js +1 -1
- package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +3 -7
- package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +12 -28
- package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +3 -7
- package/dist/components/Organisms/Footer/Footer.js +2 -2
- package/dist/components/Organisms/Membership/Membership.test.js +1 -1
- package/package.json +1 -1
- package/src/components/Atoms/Input/Input.js +17 -10
- package/src/components/Atoms/Input/Input.md +14 -0
- package/src/components/Atoms/Input/input.test.js +139 -7
- package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +9 -21
- package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +3 -7
- package/src/components/Molecules/SearchInput/SearchInput.test.js +3 -7
- package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +3 -7
- package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +12 -28
- package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +3 -7
- package/src/components/Organisms/Footer/Footer.js +2 -2
- package/src/components/Organisms/Membership/Membership.test.js +3 -7
package/README.md
CHANGED
|
@@ -46,7 +46,7 @@ _Test will run through all Jest tests and watch for any changes on snapshots._
|
|
|
46
46
|
|
|
47
47
|
To update snapshots with desired changes brought in through your work:
|
|
48
48
|
```
|
|
49
|
-
$ yarn test:unit
|
|
49
|
+
$ yarn test:unit:update
|
|
50
50
|
```
|
|
51
51
|
|
|
52
52
|
To publish
|
|
@@ -64,4 +64,4 @@ yarn playwright install
|
|
|
64
64
|
Run the tests:
|
|
65
65
|
```
|
|
66
66
|
yarn test:e2e:local
|
|
67
|
-
```
|
|
67
|
+
```
|
|
@@ -28,11 +28,13 @@ 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
|
|
31
|
+
})(["position:relative;width:100%;display:flex;justify-content:flex-end;align-items:center;", ""], _ref2 => {
|
|
32
32
|
let {
|
|
33
|
+
maxPxWidthMediumBreakpoint,
|
|
34
|
+
maxPxWidthLargeBreakpoint,
|
|
33
35
|
theme
|
|
34
36
|
} = _ref2;
|
|
35
|
-
return theme.allBreakpoints('M');
|
|
37
|
+
return (0, _styledComponents.css)(["@media ", "{", "}@media ", "{", "}"], theme.allBreakpoints('M'), maxPxWidthMediumBreakpoint && "max-width: ".concat(maxPxWidthMediumBreakpoint, "px;"), theme.allBreakpoints('L'), maxPxWidthLargeBreakpoint && "max-width: ".concat(maxPxWidthLargeBreakpoint, "px;"));
|
|
36
38
|
});
|
|
37
39
|
const InputField = _styledComponents.default.input.withConfig({
|
|
38
40
|
displayName: "Input__InputField",
|
|
@@ -43,7 +45,7 @@ const InputField = _styledComponents.default.input.withConfig({
|
|
|
43
45
|
error,
|
|
44
46
|
prefixLength
|
|
45
47
|
} = _ref3;
|
|
46
|
-
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 ", ";}
|
|
48
|
+
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'));
|
|
47
49
|
});
|
|
48
50
|
const ErrorIconWrapper = _styledComponents.default.div.withConfig({
|
|
49
51
|
displayName: "Input__ErrorIconWrapper",
|
|
@@ -76,6 +78,8 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
|
|
|
76
78
|
labelProps = {},
|
|
77
79
|
prefix = '',
|
|
78
80
|
optional = null,
|
|
81
|
+
maxPxWidthMediumBreakpoint,
|
|
82
|
+
maxPxWidthLargeBreakpoint,
|
|
79
83
|
...rest
|
|
80
84
|
} = _ref6;
|
|
81
85
|
return /*#__PURE__*/_react.default.createElement(_Label.default, Object.assign({
|
|
@@ -89,7 +93,10 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
|
|
|
89
93
|
error: Boolean(errorMsg)
|
|
90
94
|
}, prefix && /*#__PURE__*/_react.default.createElement(Prefix, {
|
|
91
95
|
length: prefix.length
|
|
92
|
-
}, prefix), /*#__PURE__*/_react.default.createElement(InputFieldContainer,
|
|
96
|
+
}, prefix), /*#__PURE__*/_react.default.createElement(InputFieldContainer, {
|
|
97
|
+
maxPxWidthMediumBreakpoint: maxPxWidthMediumBreakpoint,
|
|
98
|
+
maxPxWidthLargeBreakpoint: maxPxWidthLargeBreakpoint
|
|
99
|
+
}, /*#__PURE__*/_react.default.createElement(InputField, Object.assign({
|
|
93
100
|
id: id,
|
|
94
101
|
type: type,
|
|
95
102
|
placeholder: placeholder,
|
|
@@ -122,6 +129,8 @@ Input.propTypes = {
|
|
|
122
129
|
// (as `rest` is not spread on the outermost component)
|
|
123
130
|
className: _propTypes.default.string,
|
|
124
131
|
prefix: _propTypes.default.string,
|
|
125
|
-
optional: _propTypes.default.bool
|
|
132
|
+
optional: _propTypes.default.bool,
|
|
133
|
+
maxPxWidthMediumBreakpoint: _propTypes.default.number,
|
|
134
|
+
maxPxWidthLargeBreakpoint: _propTypes.default.number
|
|
126
135
|
};
|
|
127
136
|
var _default = exports.default = Input;
|
|
@@ -105,3 +105,17 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
|
|
|
105
105
|
}
|
|
106
106
|
}}
|
|
107
107
|
/>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
```js
|
|
111
|
+
<h4>Input with responsive max width</h4>
|
|
112
|
+
<Input
|
|
113
|
+
name="responsive-width"
|
|
114
|
+
placeholder="I'm responsive"
|
|
115
|
+
type="text"
|
|
116
|
+
label="Responsive Width Input at M and L breakpoints"
|
|
117
|
+
id="input-example-7"
|
|
118
|
+
maxPxWidthMediumBreakpoint={150}
|
|
119
|
+
maxPxWidthLargeBreakpoint={250}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
@@ -14,5 +14,17 @@ it('renders correctly', () => {
|
|
|
14
14
|
errorMsg: "",
|
|
15
15
|
id: "Accessibility info go here"
|
|
16
16
|
})).toJSON();
|
|
17
|
-
expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c2 {\n margin-bottom: 0.5rem;\n font-weight: normal;\n }\n\n .c3 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c4 {\n position: relative;\n width: 100%;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c5 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c5:focus {\n border: 1px solid #666;\n }\n\n @media (min-width:740px) {\n
|
|
17
|
+
expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c2 {\n margin-bottom: 0.5rem;\n font-weight: normal;\n }\n\n .c3 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c4 {\n position: relative;\n width: 100%;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c5 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c5:focus {\n border: 1px solid #666;\n }\n\n @media (min-width:740px) {\n\n }\n\n @media (min-width:1024px) {\n\n }\n\n <label\n className=\"c0\"\n htmlFor=\"Accessibility info go here\"\n >\n <span\n className=\"c1 c2\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"Label\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c3\"\n >\n \n <div\n className=\"c4\"\n >\n <input\n aria-describedby=\"Accessibility info go here\"\n className=\"c5\"\n id=\"Accessibility info go here\"\n name=\"fullname\"\n placeholder=\"This is the hint text\"\n required={false}\n type=\"text\"\n />\n \n </div>\n </div>\n \n </label>\n ");
|
|
18
|
+
});
|
|
19
|
+
it('renders with responsive max widths correctly', () => {
|
|
20
|
+
const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
21
|
+
name: "responsive-width",
|
|
22
|
+
placeholder: "This input has responsive max widths",
|
|
23
|
+
type: "text",
|
|
24
|
+
label: "Responsive Width Input",
|
|
25
|
+
id: "input-example-7",
|
|
26
|
+
maxPxWidthMediumBreakpoint: 150,
|
|
27
|
+
maxPxWidthLargeBreakpoint: 250
|
|
28
|
+
})).toJSON();
|
|
29
|
+
expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c2 {\n margin-bottom: 0.5rem;\n font-weight: normal;\n }\n\n .c3 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c4 {\n position: relative;\n width: 100%;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c5 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c5:focus {\n border: 1px solid #666;\n }\n\n @media (min-width:740px) {\n .c4 {\n max-width: 150px;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n max-width: 250px;\n }\n }\n\n <label\n className=\"c0\"\n htmlFor=\"input-example-7\"\n >\n <span\n className=\"c1 c2\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"Responsive Width Input\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c3\"\n >\n \n <div\n className=\"c4\"\n >\n <input\n aria-describedby=\"input-example-7\"\n className=\"c5\"\n id=\"input-example-7\"\n name=\"responsive-width\"\n placeholder=\"This input has responsive max widths\"\n required={false}\n type=\"text\"\n />\n \n </div>\n </div>\n \n </label>\n ");
|
|
18
30
|
});
|
package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
CHANGED
|
@@ -78,15 +78,11 @@ exports[`renders correctly with no value and no options 1`] = `
|
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
@media (min-width:740px) {
|
|
81
|
-
|
|
82
|
-
max-width: 290px;
|
|
83
|
-
}
|
|
81
|
+
|
|
84
82
|
}
|
|
85
83
|
|
|
86
|
-
@media (min-width:
|
|
87
|
-
|
|
88
|
-
max-width: 290px;
|
|
89
|
-
}
|
|
84
|
+
@media (min-width:1024px) {
|
|
85
|
+
|
|
90
86
|
}
|
|
91
87
|
|
|
92
88
|
<div
|
|
@@ -212,15 +208,11 @@ exports[`renders correctly with value and no options 1`] = `
|
|
|
212
208
|
}
|
|
213
209
|
|
|
214
210
|
@media (min-width:740px) {
|
|
215
|
-
|
|
216
|
-
max-width: 290px;
|
|
217
|
-
}
|
|
211
|
+
|
|
218
212
|
}
|
|
219
213
|
|
|
220
|
-
@media (min-width:
|
|
221
|
-
|
|
222
|
-
max-width: 290px;
|
|
223
|
-
}
|
|
214
|
+
@media (min-width:1024px) {
|
|
215
|
+
|
|
224
216
|
}
|
|
225
217
|
|
|
226
218
|
<div
|
|
@@ -379,15 +371,11 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
379
371
|
}
|
|
380
372
|
|
|
381
373
|
@media (min-width:740px) {
|
|
382
|
-
|
|
383
|
-
max-width: 290px;
|
|
384
|
-
}
|
|
374
|
+
|
|
385
375
|
}
|
|
386
376
|
|
|
387
|
-
@media (min-width:
|
|
388
|
-
|
|
389
|
-
max-width: 290px;
|
|
390
|
-
}
|
|
377
|
+
@media (min-width:1024px) {
|
|
378
|
+
|
|
391
379
|
}
|
|
392
380
|
|
|
393
381
|
@media (min-width:740px) {
|
|
@@ -13,5 +13,5 @@ it('renders correctly', () => {
|
|
|
13
13
|
},
|
|
14
14
|
value: ""
|
|
15
15
|
})).toJSON();
|
|
16
|
-
expect(tree).toMatchInlineSnapshot("\n .c6 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c4 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c7 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n .c8 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c9 {\n position: relative;\n width: 100%;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c10 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c10:focus {\n border: 1px solid #666;\n }\n\n .c0 {\n width: 100%;\n max-width: 1440px;\n margin: auto;\n }\n\n .c1 {\n margin: 1rem auto;\n padding: 0 calc((4 * 0.25rem));\n }\n\n .c2 {\n margin: 4rem auto;\n width: 100%;\n border-bottom: 4px solid #E52630;\n overflow: hidden;\n }\n\n .c3 {\n width: 100%;\n padding: 0 0.5rem;\n }\n\n .c5 input {\n padding: 13px 0;\n margin: 0;\n max-width: 100%;\n border: 0;\n outline: #E52630;\n background: none;\n }\n\n .c5 input:focus {\n border: 0;\n }\n\n @media (min-width:740px) {\n
|
|
16
|
+
expect(tree).toMatchInlineSnapshot("\n .c6 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c4 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c7 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n .c8 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c9 {\n position: relative;\n width: 100%;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c10 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c10:focus {\n border: 1px solid #666;\n }\n\n .c0 {\n width: 100%;\n max-width: 1440px;\n margin: auto;\n }\n\n .c1 {\n margin: 1rem auto;\n padding: 0 calc((4 * 0.25rem));\n }\n\n .c2 {\n margin: 4rem auto;\n width: 100%;\n border-bottom: 4px solid #E52630;\n overflow: hidden;\n }\n\n .c3 {\n width: 100%;\n padding: 0 0.5rem;\n }\n\n .c5 input {\n padding: 13px 0;\n margin: 0;\n max-width: 100%;\n border: 0;\n outline: #E52630;\n background: none;\n }\n\n .c5 input:focus {\n border: 0;\n }\n\n @media (min-width:740px) {\n\n }\n\n @media (min-width:1024px) {\n\n }\n\n @media (min-width:740px) {\n .c5 input {\n height: 100px;\n font-size: 3rem;\n }\n }\n\n <div\n className=\"c0\"\n >\n <div\n className=\"c1\"\n >\n <div\n className=\"c2\"\n role=\"search\"\n >\n <div\n className=\"c3\"\n >\n <label\n className=\"c4 c5\"\n htmlFor=\"search\"\n >\n <span\n className=\"c6 c7\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"Search\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c8\"\n >\n \n <div\n className=\"c9\"\n >\n <input\n aria-describedby=\"search\"\n className=\"c10\"\n id=\"search\"\n name=\"search\"\n onChange={[Function]}\n placeholder=\"\"\n required={false}\n role=\"searchbox\"\n type=\"text\"\n value=\"\"\n />\n \n </div>\n </div>\n \n </label>\n </div>\n </div>\n </div>\n </div>\n ");
|
|
17
17
|
});
|
|
@@ -432,15 +432,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
|
|
|
432
432
|
}
|
|
433
433
|
|
|
434
434
|
@media (min-width:740px) {
|
|
435
|
-
|
|
436
|
-
max-width: 290px;
|
|
437
|
-
}
|
|
435
|
+
|
|
438
436
|
}
|
|
439
437
|
|
|
440
|
-
@media (min-width:
|
|
441
|
-
|
|
442
|
-
max-width: 290px;
|
|
443
|
-
}
|
|
438
|
+
@media (min-width:1024px) {
|
|
439
|
+
|
|
444
440
|
}
|
|
445
441
|
|
|
446
442
|
@media (min-width:1024px) {
|
|
@@ -1101,15 +1097,11 @@ exports[`Monthly donation renders correctly 1`] = `
|
|
|
1101
1097
|
}
|
|
1102
1098
|
|
|
1103
1099
|
@media (min-width:740px) {
|
|
1104
|
-
|
|
1105
|
-
max-width: 290px;
|
|
1106
|
-
}
|
|
1100
|
+
|
|
1107
1101
|
}
|
|
1108
1102
|
|
|
1109
|
-
@media (min-width:
|
|
1110
|
-
|
|
1111
|
-
max-width: 290px;
|
|
1112
|
-
}
|
|
1103
|
+
@media (min-width:1024px) {
|
|
1104
|
+
|
|
1113
1105
|
}
|
|
1114
1106
|
|
|
1115
1107
|
@media (min-width:1024px) {
|
|
@@ -1758,15 +1750,11 @@ exports[`Single donation renders correctly 1`] = `
|
|
|
1758
1750
|
}
|
|
1759
1751
|
|
|
1760
1752
|
@media (min-width:740px) {
|
|
1761
|
-
|
|
1762
|
-
max-width: 290px;
|
|
1763
|
-
}
|
|
1753
|
+
|
|
1764
1754
|
}
|
|
1765
1755
|
|
|
1766
|
-
@media (min-width:
|
|
1767
|
-
|
|
1768
|
-
max-width: 290px;
|
|
1769
|
-
}
|
|
1756
|
+
@media (min-width:1024px) {
|
|
1757
|
+
|
|
1770
1758
|
}
|
|
1771
1759
|
|
|
1772
1760
|
@media (min-width:740px) {
|
|
@@ -2425,15 +2413,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
|
|
|
2425
2413
|
}
|
|
2426
2414
|
|
|
2427
2415
|
@media (min-width:740px) {
|
|
2428
|
-
|
|
2429
|
-
max-width: 290px;
|
|
2430
|
-
}
|
|
2416
|
+
|
|
2431
2417
|
}
|
|
2432
2418
|
|
|
2433
|
-
@media (min-width:
|
|
2434
|
-
|
|
2435
|
-
max-width: 290px;
|
|
2436
|
-
}
|
|
2419
|
+
@media (min-width:1024px) {
|
|
2420
|
+
|
|
2437
2421
|
}
|
|
2438
2422
|
|
|
2439
2423
|
@media (min-width:1024px) {
|
|
@@ -235,15 +235,11 @@ exports[`renders correctly 1`] = `
|
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
@media (min-width:740px) {
|
|
238
|
-
|
|
239
|
-
max-width: 290px;
|
|
240
|
-
}
|
|
238
|
+
|
|
241
239
|
}
|
|
242
240
|
|
|
243
|
-
@media (min-width:
|
|
244
|
-
|
|
245
|
-
max-width: 290px;
|
|
246
|
-
}
|
|
241
|
+
@media (min-width:1024px) {
|
|
242
|
+
|
|
247
243
|
}
|
|
248
244
|
|
|
249
245
|
@media (min-width:1024px) {
|
|
@@ -23,7 +23,6 @@ const Footer = _ref => {
|
|
|
23
23
|
// Remove white space between words
|
|
24
24
|
const campaignName = campaign.replace(/\s/g, '').toLowerCase();
|
|
25
25
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Footer.FooterWrapper, Object.assign({
|
|
26
|
-
overrideallowList: overrideallowList,
|
|
27
26
|
navItems: true
|
|
28
27
|
}, rest), /*#__PURE__*/_react.default.createElement(_Footer.InnerWrapper, null, additionalLegalLine && /*#__PURE__*/_react.default.createElement(_Footer.FooterLegalLine, {
|
|
29
28
|
tag: "p",
|
|
@@ -39,7 +38,8 @@ const Footer = _ref => {
|
|
|
39
38
|
rotate: false,
|
|
40
39
|
campaign: campaign
|
|
41
40
|
}))), /*#__PURE__*/_react.default.createElement(_Nav.default, Object.assign({
|
|
42
|
-
navItems: navItems
|
|
41
|
+
navItems: navItems,
|
|
42
|
+
overrideallowList: overrideallowList
|
|
43
43
|
}, rest)), /*#__PURE__*/_react.default.createElement(_Footer.FooterCopyright, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
44
44
|
tag: "p",
|
|
45
45
|
color: "grey"
|
|
@@ -22,5 +22,5 @@ it('renders correctly', () => {
|
|
|
22
22
|
subtitle: "Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.",
|
|
23
23
|
otherDescription: "Your donation will help us fund amazing projects in the UK and around the world."
|
|
24
24
|
})).toJSON();
|
|
25
|
-
expect(tree).toMatchInlineSnapshot("\n .c6 {\n font-size: 1.5rem;\n line-height: 1.5rem;\n text-transform: inherit;\n font-weight: 800;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c7 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c12 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c22 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: 500;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c1 {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n .c3 {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n }\n\n .c14 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c16 {\n margin-bottom: 0.5rem;\n font-weight: normal;\n }\n\n .c17 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c18 {\n position: relative;\n width: 100%;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c19 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c19:focus {\n border: 1px solid #666;\n }\n\n .c15 {\n display: block;\n }\n\n .c15 input {\n border: 2px solid #E1E2E3;\n font-size: 1.5rem;\n font-weight: 800;\n -webkit-letter-spacing: -2px;\n -moz-letter-spacing: -2px;\n -ms-letter-spacing: -2px;\n letter-spacing: -2px;\n height: auto;\n }\n\n .c20 {\n display: block;\n }\n\n .c20 input {\n border: 2px solid #E1E2E3;\n font-size: 1.5rem;\n font-weight: 800;\n -webkit-letter-spacing: -2px;\n -moz-letter-spacing: -2px;\n -ms-letter-spacing: -2px;\n letter-spacing: -2px;\n height: auto;\n border-color: #E52630;\n background-color: #E52630;\n color: #FFFFFF;\n }\n\n .c0 {\n background-color: #FEE3CC;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: 100vh;\n }\n\n .c2 {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: auto;\n }\n\n .c2:before {\n color: #FEE3CC;\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: inset 0px 4rem 2rem -2rem;\n }\n\n .c4 {\n position: relative;\n max-width: 320px;\n text-align: center;\n margin-bottom: 50%;\n }\n\n .c5 {\n padding: 2rem 1rem 0;\n margin-bottom: 2rem;\n }\n\n .c8 {\n background-color: #FFFFFF;\n box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n height: 450px;\n }\n\n .c9 {\n padding: 1rem;\n }\n\n .c9 h3 {\n margin-top: 1rem;\n }\n\n .c9 input {\n max-width: 100%;\n margin: 0;\n }\n\n .c10 {\n padding: 0;\n margin: 0;\n border: none;\n }\n\n .c10 > :not(:last-child):not(legend) {\n margin-bottom: 2rem;\n }\n\n .c11 {\n margin: 0;\n padding: 0;\n }\n\n .c13 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -webkit-justify-content: space-between;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n\n .c13 label {\n -webkit-flex: 0 0 30%;\n -ms-flex: 0 0 30%;\n flex: 0 0 30%;\n }\n\n .c13 label input {\n cursor: pointer;\n padding: 1rem;\n }\n\n .c13 label:hover input {\n border-color: #E52630;\n }\n\n .c21 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c23 {\n margin-right: auto;\n }\n\n .c24 {\n position: relative;\n -webkit-flex: 0 0 50%;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n font-weight: 400;\n display: block;\n }\n\n .c24 span {\n position: absolute;\n padding: 0px 15px;\n font-size: 20px;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n left: 0px;\n font-weight: 500;\n }\n\n .c24 input {\n border: 2px solid #E1E2E3;\n background: transparent;\n padding: 0.5rem 1rem 0.5rem 2rem;\n }\n\n .c24 input:focus {\n border: 2px solid #E52630;\n }\n\n .c26 {\n line-height: 1.5;\n }\n\n .c25 {\n width: 100%;\n color: #FFFFFF;\n font-size: 1rem;\n font-weight: bold;\n cursor: pointer;\n padding: 1rem 0.5rem;\n background: #E52630;\n border: none;\n border-radius: 100px;\n }\n\n .c25:active,\n .c25:focus,\n .c25:hover {\n background-color: #961D35;\n }\n\n @media (min-width:740px) {\n .c18 {\n max-width: 290px;\n }\n }\n\n @media (min-width:740px) {\n .c19 {\n max-width: 290px;\n }\n }\n\n @media (min-width:1024px) {\n .c0 {\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: inherit;\n -webkit-justify-content: inherit;\n -ms-flex-pack: inherit;\n justify-content: inherit;\n min-height: 750px;\n height: 100vh;\n max-height: 900px;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n }\n\n @media (min-width:1024px) {\n .c2 {\n height: 100%;\n }\n\n .c2:before {\n content: none;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n margin: 0 8rem;\n max-width: 420px;\n }\n }\n\n @media (min-width:1024px) {\n .c8 {\n height: 430px;\n }\n }\n\n @media (min-width:1024px) {\n .c24 {\n -webkit-flex: 0 0 60%;\n -ms-flex: 0 0 60%;\n flex: 0 0 60%;\n }\n }\n\n @media (min-width:1024px) {\n .c25 {\n width: auto;\n padding: 1rem 2rem;\n margin: 0 auto 2rem;\n }\n }\n\n <div\n className=\"c0\"\n id=\"mship-1\"\n >\n <div\n className=\"c1 c2\"\n height=\"100%\"\n width=\"100%\"\n >\n <img\n alt=\"Background image\"\n className=\"c3 lazyload\"\n data-src={null}\n height=\"100%\"\n width=\"100%\"\n />\n </div>\n <div\n className=\"c4\"\n >\n <div\n className=\"c5\"\n >\n <h2\n className=\"c6\"\n color=\"inherit\"\n size=\"l\"\n >\n Help someone like Jordan see a better tomorrow\n </h2>\n <p\n className=\"c7\"\n color=\"inherit\"\n size=\"s\"\n >\n Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n </p>\n </div>\n <div\n className=\"c8\"\n >\n <form\n className=\"c9\"\n onSubmit={[Function]}\n >\n <fieldset\n className=\"c10\"\n >\n <legend\n className=\"c11\"\n >\n <h3\n className=\"c12\"\n color=\"inherit\"\n size=\"s\"\n >\n Choose your monthly donation\n </h3>\n </legend>\n <div\n className=\"c13\"\n >\n <label\n className=\"c14 c15\"\n htmlFor=\"mship-1--moneyBuy-box1\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box1\"\n aria-label=\"\xA35\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box1\"\n name=\"mship-1--moneyBuy1\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 5\"\n />\n \n </div>\n </div>\n \n </label>\n <label\n className=\"c14 c20\"\n htmlFor=\"mship-1--moneyBuy-box2\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box2\"\n aria-label=\"\xA310\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box2\"\n name=\"mship-1--moneyBuy2\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 10\"\n />\n \n </div>\n </div>\n \n </label>\n <label\n className=\"c14 c15\"\n htmlFor=\"mship-1--moneyBuy-box3\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box3\"\n aria-label=\"\xA320\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box3\"\n name=\"mship-1--moneyBuy3\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 20\"\n />\n \n </div>\n </div>\n \n </label>\n </div>\n <div\n className=\"c21\"\n >\n <span\n className=\"c22 c23\"\n color=\"inherit\"\n size=\"s\"\n >\n Other amount\n </span>\n <label\n className=\"c14 c24\"\n htmlFor=\"mship-1--MoneyBuy-userInput\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\xA3\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--MoneyBuy-userInput\"\n aria-label=\"Input a different amount\"\n className=\"c19\"\n id=\"mship-1--MoneyBuy-userInput\"\n max=\"25000\"\n min=\"1\"\n name=\"membership_amount\"\n onChange={[Function]}\n onClick={[Function]}\n onKeyPress={[Function]}\n pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n placeholder=\"0.00\"\n required={false}\n step=\"0.01\"\n type=\"number\"\n value=\"\"\n />\n \n </div>\n </div>\n \n </label>\n </div>\n <input\n className=\"c25\"\n type=\"submit\"\n value=\"Donate\"\n />\n <p\n className=\"c26\"\n />\n </fieldset>\n </form>\n </div>\n </div>\n </div>\n ");
|
|
25
|
+
expect(tree).toMatchInlineSnapshot("\n .c6 {\n font-size: 1.5rem;\n line-height: 1.5rem;\n text-transform: inherit;\n font-weight: 800;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c7 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c12 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c22 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: 500;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c1 {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n .c3 {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n }\n\n .c14 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c16 {\n margin-bottom: 0.5rem;\n font-weight: normal;\n }\n\n .c17 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c18 {\n position: relative;\n width: 100%;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c19 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c19:focus {\n border: 1px solid #666;\n }\n\n .c15 {\n display: block;\n }\n\n .c15 input {\n border: 2px solid #E1E2E3;\n font-size: 1.5rem;\n font-weight: 800;\n -webkit-letter-spacing: -2px;\n -moz-letter-spacing: -2px;\n -ms-letter-spacing: -2px;\n letter-spacing: -2px;\n height: auto;\n }\n\n .c20 {\n display: block;\n }\n\n .c20 input {\n border: 2px solid #E1E2E3;\n font-size: 1.5rem;\n font-weight: 800;\n -webkit-letter-spacing: -2px;\n -moz-letter-spacing: -2px;\n -ms-letter-spacing: -2px;\n letter-spacing: -2px;\n height: auto;\n border-color: #E52630;\n background-color: #E52630;\n color: #FFFFFF;\n }\n\n .c0 {\n background-color: #FEE3CC;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: 100vh;\n }\n\n .c2 {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: auto;\n }\n\n .c2:before {\n color: #FEE3CC;\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: inset 0px 4rem 2rem -2rem;\n }\n\n .c4 {\n position: relative;\n max-width: 320px;\n text-align: center;\n margin-bottom: 50%;\n }\n\n .c5 {\n padding: 2rem 1rem 0;\n margin-bottom: 2rem;\n }\n\n .c8 {\n background-color: #FFFFFF;\n box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n height: 450px;\n }\n\n .c9 {\n padding: 1rem;\n }\n\n .c9 h3 {\n margin-top: 1rem;\n }\n\n .c9 input {\n max-width: 100%;\n margin: 0;\n }\n\n .c10 {\n padding: 0;\n margin: 0;\n border: none;\n }\n\n .c10 > :not(:last-child):not(legend) {\n margin-bottom: 2rem;\n }\n\n .c11 {\n margin: 0;\n padding: 0;\n }\n\n .c13 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -webkit-justify-content: space-between;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n\n .c13 label {\n -webkit-flex: 0 0 30%;\n -ms-flex: 0 0 30%;\n flex: 0 0 30%;\n }\n\n .c13 label input {\n cursor: pointer;\n padding: 1rem;\n }\n\n .c13 label:hover input {\n border-color: #E52630;\n }\n\n .c21 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c23 {\n margin-right: auto;\n }\n\n .c24 {\n position: relative;\n -webkit-flex: 0 0 50%;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n font-weight: 400;\n display: block;\n }\n\n .c24 span {\n position: absolute;\n padding: 0px 15px;\n font-size: 20px;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n left: 0px;\n font-weight: 500;\n }\n\n .c24 input {\n border: 2px solid #E1E2E3;\n background: transparent;\n padding: 0.5rem 1rem 0.5rem 2rem;\n }\n\n .c24 input:focus {\n border: 2px solid #E52630;\n }\n\n .c26 {\n line-height: 1.5;\n }\n\n .c25 {\n width: 100%;\n color: #FFFFFF;\n font-size: 1rem;\n font-weight: bold;\n cursor: pointer;\n padding: 1rem 0.5rem;\n background: #E52630;\n border: none;\n border-radius: 100px;\n }\n\n .c25:active,\n .c25:focus,\n .c25:hover {\n background-color: #961D35;\n }\n\n @media (min-width:740px) {\n\n }\n\n @media (min-width:1024px) {\n\n }\n\n @media (min-width:1024px) {\n .c0 {\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: inherit;\n -webkit-justify-content: inherit;\n -ms-flex-pack: inherit;\n justify-content: inherit;\n min-height: 750px;\n height: 100vh;\n max-height: 900px;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n }\n\n @media (min-width:1024px) {\n .c2 {\n height: 100%;\n }\n\n .c2:before {\n content: none;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n margin: 0 8rem;\n max-width: 420px;\n }\n }\n\n @media (min-width:1024px) {\n .c8 {\n height: 430px;\n }\n }\n\n @media (min-width:1024px) {\n .c24 {\n -webkit-flex: 0 0 60%;\n -ms-flex: 0 0 60%;\n flex: 0 0 60%;\n }\n }\n\n @media (min-width:1024px) {\n .c25 {\n width: auto;\n padding: 1rem 2rem;\n margin: 0 auto 2rem;\n }\n }\n\n <div\n className=\"c0\"\n id=\"mship-1\"\n >\n <div\n className=\"c1 c2\"\n height=\"100%\"\n width=\"100%\"\n >\n <img\n alt=\"Background image\"\n className=\"c3 lazyload\"\n data-src={null}\n height=\"100%\"\n width=\"100%\"\n />\n </div>\n <div\n className=\"c4\"\n >\n <div\n className=\"c5\"\n >\n <h2\n className=\"c6\"\n color=\"inherit\"\n size=\"l\"\n >\n Help someone like Jordan see a better tomorrow\n </h2>\n <p\n className=\"c7\"\n color=\"inherit\"\n size=\"s\"\n >\n Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n </p>\n </div>\n <div\n className=\"c8\"\n >\n <form\n className=\"c9\"\n onSubmit={[Function]}\n >\n <fieldset\n className=\"c10\"\n >\n <legend\n className=\"c11\"\n >\n <h3\n className=\"c12\"\n color=\"inherit\"\n size=\"s\"\n >\n Choose your monthly donation\n </h3>\n </legend>\n <div\n className=\"c13\"\n >\n <label\n className=\"c14 c15\"\n htmlFor=\"mship-1--moneyBuy-box1\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box1\"\n aria-label=\"\xA35\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box1\"\n name=\"mship-1--moneyBuy1\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 5\"\n />\n \n </div>\n </div>\n \n </label>\n <label\n className=\"c14 c20\"\n htmlFor=\"mship-1--moneyBuy-box2\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box2\"\n aria-label=\"\xA310\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box2\"\n name=\"mship-1--moneyBuy2\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 10\"\n />\n \n </div>\n </div>\n \n </label>\n <label\n className=\"c14 c15\"\n htmlFor=\"mship-1--moneyBuy-box3\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box3\"\n aria-label=\"\xA320\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box3\"\n name=\"mship-1--moneyBuy3\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 20\"\n />\n \n </div>\n </div>\n \n </label>\n </div>\n <div\n className=\"c21\"\n >\n <span\n className=\"c22 c23\"\n color=\"inherit\"\n size=\"s\"\n >\n Other amount\n </span>\n <label\n className=\"c14 c24\"\n htmlFor=\"mship-1--MoneyBuy-userInput\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\xA3\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--MoneyBuy-userInput\"\n aria-label=\"Input a different amount\"\n className=\"c19\"\n id=\"mship-1--MoneyBuy-userInput\"\n max=\"25000\"\n min=\"1\"\n name=\"membership_amount\"\n onChange={[Function]}\n onClick={[Function]}\n onKeyPress={[Function]}\n pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n placeholder=\"0.00\"\n required={false}\n step=\"0.01\"\n type=\"number\"\n value=\"\"\n />\n \n </div>\n </div>\n \n </label>\n </div>\n <input\n className=\"c25\"\n type=\"submit\"\n value=\"Donate\"\n />\n <p\n className=\"c26\"\n />\n </fieldset>\n </form>\n </div>\n </div>\n </div>\n ");
|
|
26
26
|
});
|
package/package.json
CHANGED
|
@@ -22,10 +22,14 @@ const InputFieldContainer = styled.div`
|
|
|
22
22
|
display: flex;
|
|
23
23
|
justify-content: flex-end;
|
|
24
24
|
align-items: center;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
${({ maxPxWidthMediumBreakpoint, maxPxWidthLargeBreakpoint, theme }) => css`
|
|
26
|
+
@media ${theme.allBreakpoints('M')} {
|
|
27
|
+
${maxPxWidthMediumBreakpoint && `max-width: ${maxPxWidthMediumBreakpoint}px;`}
|
|
28
|
+
}
|
|
29
|
+
@media ${theme.allBreakpoints('L')} {
|
|
30
|
+
${maxPxWidthLargeBreakpoint && `max-width: ${maxPxWidthLargeBreakpoint}px;`}
|
|
31
|
+
}
|
|
32
|
+
`}
|
|
29
33
|
`;
|
|
30
34
|
|
|
31
35
|
const InputField = styled.input`${({ theme, error, prefixLength }) => css`
|
|
@@ -49,10 +53,6 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
|
|
|
49
53
|
:focus {
|
|
50
54
|
border: 1px solid ${theme.color('grey_for_forms')};
|
|
51
55
|
}
|
|
52
|
-
|
|
53
|
-
@media ${theme.allBreakpoints('M')} {
|
|
54
|
-
max-width: 290px;
|
|
55
|
-
}
|
|
56
56
|
`}`;
|
|
57
57
|
|
|
58
58
|
const ErrorIconWrapper = styled.div`
|
|
@@ -95,6 +95,8 @@ const Input = React.forwardRef(
|
|
|
95
95
|
labelProps = {},
|
|
96
96
|
prefix = '',
|
|
97
97
|
optional = null,
|
|
98
|
+
maxPxWidthMediumBreakpoint,
|
|
99
|
+
maxPxWidthLargeBreakpoint,
|
|
98
100
|
...rest
|
|
99
101
|
},
|
|
100
102
|
ref
|
|
@@ -110,7 +112,10 @@ const Input = React.forwardRef(
|
|
|
110
112
|
>
|
|
111
113
|
<InputWrapper error={Boolean(errorMsg)}>
|
|
112
114
|
{prefix && <Prefix length={prefix.length}>{prefix}</Prefix>}
|
|
113
|
-
<InputFieldContainer
|
|
115
|
+
<InputFieldContainer
|
|
116
|
+
maxPxWidthMediumBreakpoint={maxPxWidthMediumBreakpoint}
|
|
117
|
+
maxPxWidthLargeBreakpoint={maxPxWidthLargeBreakpoint}
|
|
118
|
+
>
|
|
114
119
|
<InputField
|
|
115
120
|
id={id}
|
|
116
121
|
type={type}
|
|
@@ -160,7 +165,9 @@ Input.propTypes = {
|
|
|
160
165
|
// (as `rest` is not spread on the outermost component)
|
|
161
166
|
className: PropTypes.string,
|
|
162
167
|
prefix: PropTypes.string,
|
|
163
|
-
optional: PropTypes.bool
|
|
168
|
+
optional: PropTypes.bool,
|
|
169
|
+
maxPxWidthMediumBreakpoint: PropTypes.number,
|
|
170
|
+
maxPxWidthLargeBreakpoint: PropTypes.number
|
|
164
171
|
};
|
|
165
172
|
|
|
166
173
|
export default Input;
|
|
@@ -105,3 +105,17 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
|
|
|
105
105
|
}
|
|
106
106
|
}}
|
|
107
107
|
/>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
```js
|
|
111
|
+
<h4>Input with responsive max width</h4>
|
|
112
|
+
<Input
|
|
113
|
+
name="responsive-width"
|
|
114
|
+
placeholder="I'm responsive"
|
|
115
|
+
type="text"
|
|
116
|
+
label="Responsive Width Input at M and L breakpoints"
|
|
117
|
+
id="input-example-7"
|
|
118
|
+
maxPxWidthMediumBreakpoint={150}
|
|
119
|
+
maxPxWidthLargeBreakpoint={250}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
@@ -89,15 +89,11 @@ it('renders correctly', () => {
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
@media (min-width:740px) {
|
|
92
|
-
|
|
93
|
-
max-width: 290px;
|
|
94
|
-
}
|
|
92
|
+
|
|
95
93
|
}
|
|
96
94
|
|
|
97
|
-
@media (min-width:
|
|
98
|
-
|
|
99
|
-
max-width: 290px;
|
|
100
|
-
}
|
|
95
|
+
@media (min-width:1024px) {
|
|
96
|
+
|
|
101
97
|
}
|
|
102
98
|
|
|
103
99
|
<label
|
|
@@ -137,3 +133,139 @@ it('renders correctly', () => {
|
|
|
137
133
|
</label>
|
|
138
134
|
`);
|
|
139
135
|
});
|
|
136
|
+
|
|
137
|
+
it('renders with responsive max widths correctly', () => {
|
|
138
|
+
const tree = renderWithTheme(
|
|
139
|
+
<Input
|
|
140
|
+
name="responsive-width"
|
|
141
|
+
placeholder="This input has responsive max widths"
|
|
142
|
+
type="text"
|
|
143
|
+
label="Responsive Width Input"
|
|
144
|
+
id="input-example-7"
|
|
145
|
+
maxPxWidthMediumBreakpoint={150}
|
|
146
|
+
maxPxWidthLargeBreakpoint={250}
|
|
147
|
+
/>
|
|
148
|
+
).toJSON();
|
|
149
|
+
|
|
150
|
+
expect(tree).toMatchInlineSnapshot(`
|
|
151
|
+
.c1 {
|
|
152
|
+
font-size: 1rem;
|
|
153
|
+
line-height: 1rem;
|
|
154
|
+
text-transform: inherit;
|
|
155
|
+
line-height: normal;
|
|
156
|
+
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.c0 {
|
|
160
|
+
width: 100%;
|
|
161
|
+
position: relative;
|
|
162
|
+
display: -webkit-box;
|
|
163
|
+
display: -webkit-flex;
|
|
164
|
+
display: -ms-flexbox;
|
|
165
|
+
display: flex;
|
|
166
|
+
-webkit-flex-direction: column;
|
|
167
|
+
-ms-flex-direction: column;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
color: #5C5C5E;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.c2 {
|
|
173
|
+
margin-bottom: 0.5rem;
|
|
174
|
+
font-weight: normal;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.c3 {
|
|
178
|
+
position: relative;
|
|
179
|
+
font-size: 1.25rem;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.c4 {
|
|
183
|
+
position: relative;
|
|
184
|
+
width: 100%;
|
|
185
|
+
display: -webkit-box;
|
|
186
|
+
display: -webkit-flex;
|
|
187
|
+
display: -ms-flexbox;
|
|
188
|
+
display: flex;
|
|
189
|
+
-webkit-box-pack: end;
|
|
190
|
+
-webkit-justify-content: flex-end;
|
|
191
|
+
-ms-flex-pack: end;
|
|
192
|
+
justify-content: flex-end;
|
|
193
|
+
-webkit-align-items: center;
|
|
194
|
+
-webkit-box-align: center;
|
|
195
|
+
-ms-flex-align: center;
|
|
196
|
+
align-items: center;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.c5 {
|
|
200
|
+
position: relative;
|
|
201
|
+
box-sizing: border-box;
|
|
202
|
+
width: 100%;
|
|
203
|
+
height: 48px;
|
|
204
|
+
padding: 1rem 2.4rem 1rem 1.5rem;
|
|
205
|
+
background-color: #F4F3F5;
|
|
206
|
+
border: 1px solid;
|
|
207
|
+
border-color: #E1E2E3;
|
|
208
|
+
box-shadow: none;
|
|
209
|
+
-webkit-appearance: none;
|
|
210
|
+
-moz-appearance: none;
|
|
211
|
+
appearance: none;
|
|
212
|
+
color: #000000;
|
|
213
|
+
border-radius: 0.5rem;
|
|
214
|
+
font-size: inherit;
|
|
215
|
+
z-index: 2;
|
|
216
|
+
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.c5:focus {
|
|
220
|
+
border: 1px solid #666;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@media (min-width:740px) {
|
|
224
|
+
.c4 {
|
|
225
|
+
max-width: 150px;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@media (min-width:1024px) {
|
|
230
|
+
.c4 {
|
|
231
|
+
max-width: 250px;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
<label
|
|
236
|
+
className="c0"
|
|
237
|
+
htmlFor="input-example-7"
|
|
238
|
+
>
|
|
239
|
+
<span
|
|
240
|
+
className="c1 c2"
|
|
241
|
+
color="inherit"
|
|
242
|
+
dangerouslySetInnerHTML={
|
|
243
|
+
Object {
|
|
244
|
+
"__html": "Responsive Width Input",
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
size="s"
|
|
248
|
+
/>
|
|
249
|
+
<div
|
|
250
|
+
className="c3"
|
|
251
|
+
>
|
|
252
|
+
|
|
253
|
+
<div
|
|
254
|
+
className="c4"
|
|
255
|
+
>
|
|
256
|
+
<input
|
|
257
|
+
aria-describedby="input-example-7"
|
|
258
|
+
className="c5"
|
|
259
|
+
id="input-example-7"
|
|
260
|
+
name="responsive-width"
|
|
261
|
+
placeholder="This input has responsive max widths"
|
|
262
|
+
required={false}
|
|
263
|
+
type="text"
|
|
264
|
+
/>
|
|
265
|
+
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
</label>
|
|
270
|
+
`);
|
|
271
|
+
});
|
package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
CHANGED
|
@@ -78,15 +78,11 @@ exports[`renders correctly with no value and no options 1`] = `
|
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
@media (min-width:740px) {
|
|
81
|
-
|
|
82
|
-
max-width: 290px;
|
|
83
|
-
}
|
|
81
|
+
|
|
84
82
|
}
|
|
85
83
|
|
|
86
|
-
@media (min-width:
|
|
87
|
-
|
|
88
|
-
max-width: 290px;
|
|
89
|
-
}
|
|
84
|
+
@media (min-width:1024px) {
|
|
85
|
+
|
|
90
86
|
}
|
|
91
87
|
|
|
92
88
|
<div
|
|
@@ -212,15 +208,11 @@ exports[`renders correctly with value and no options 1`] = `
|
|
|
212
208
|
}
|
|
213
209
|
|
|
214
210
|
@media (min-width:740px) {
|
|
215
|
-
|
|
216
|
-
max-width: 290px;
|
|
217
|
-
}
|
|
211
|
+
|
|
218
212
|
}
|
|
219
213
|
|
|
220
|
-
@media (min-width:
|
|
221
|
-
|
|
222
|
-
max-width: 290px;
|
|
223
|
-
}
|
|
214
|
+
@media (min-width:1024px) {
|
|
215
|
+
|
|
224
216
|
}
|
|
225
217
|
|
|
226
218
|
<div
|
|
@@ -379,15 +371,11 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
379
371
|
}
|
|
380
372
|
|
|
381
373
|
@media (min-width:740px) {
|
|
382
|
-
|
|
383
|
-
max-width: 290px;
|
|
384
|
-
}
|
|
374
|
+
|
|
385
375
|
}
|
|
386
376
|
|
|
387
|
-
@media (min-width:
|
|
388
|
-
|
|
389
|
-
max-width: 290px;
|
|
390
|
-
}
|
|
377
|
+
@media (min-width:1024px) {
|
|
378
|
+
|
|
391
379
|
}
|
|
392
380
|
|
|
393
381
|
@media (min-width:740px) {
|
|
@@ -134,15 +134,11 @@ it('renders correctly', () => {
|
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
@media (min-width:740px) {
|
|
137
|
-
|
|
138
|
-
max-width: 290px;
|
|
139
|
-
}
|
|
137
|
+
|
|
140
138
|
}
|
|
141
139
|
|
|
142
|
-
@media (min-width:
|
|
143
|
-
|
|
144
|
-
max-width: 290px;
|
|
145
|
-
}
|
|
140
|
+
@media (min-width:1024px) {
|
|
141
|
+
|
|
146
142
|
}
|
|
147
143
|
|
|
148
144
|
@media (min-width:740px) {
|
|
@@ -432,15 +432,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
|
|
|
432
432
|
}
|
|
433
433
|
|
|
434
434
|
@media (min-width:740px) {
|
|
435
|
-
|
|
436
|
-
max-width: 290px;
|
|
437
|
-
}
|
|
435
|
+
|
|
438
436
|
}
|
|
439
437
|
|
|
440
|
-
@media (min-width:
|
|
441
|
-
|
|
442
|
-
max-width: 290px;
|
|
443
|
-
}
|
|
438
|
+
@media (min-width:1024px) {
|
|
439
|
+
|
|
444
440
|
}
|
|
445
441
|
|
|
446
442
|
@media (min-width:1024px) {
|
|
@@ -1101,15 +1097,11 @@ exports[`Monthly donation renders correctly 1`] = `
|
|
|
1101
1097
|
}
|
|
1102
1098
|
|
|
1103
1099
|
@media (min-width:740px) {
|
|
1104
|
-
|
|
1105
|
-
max-width: 290px;
|
|
1106
|
-
}
|
|
1100
|
+
|
|
1107
1101
|
}
|
|
1108
1102
|
|
|
1109
|
-
@media (min-width:
|
|
1110
|
-
|
|
1111
|
-
max-width: 290px;
|
|
1112
|
-
}
|
|
1103
|
+
@media (min-width:1024px) {
|
|
1104
|
+
|
|
1113
1105
|
}
|
|
1114
1106
|
|
|
1115
1107
|
@media (min-width:1024px) {
|
|
@@ -1758,15 +1750,11 @@ exports[`Single donation renders correctly 1`] = `
|
|
|
1758
1750
|
}
|
|
1759
1751
|
|
|
1760
1752
|
@media (min-width:740px) {
|
|
1761
|
-
|
|
1762
|
-
max-width: 290px;
|
|
1763
|
-
}
|
|
1753
|
+
|
|
1764
1754
|
}
|
|
1765
1755
|
|
|
1766
|
-
@media (min-width:
|
|
1767
|
-
|
|
1768
|
-
max-width: 290px;
|
|
1769
|
-
}
|
|
1756
|
+
@media (min-width:1024px) {
|
|
1757
|
+
|
|
1770
1758
|
}
|
|
1771
1759
|
|
|
1772
1760
|
@media (min-width:740px) {
|
|
@@ -2425,15 +2413,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
|
|
|
2425
2413
|
}
|
|
2426
2414
|
|
|
2427
2415
|
@media (min-width:740px) {
|
|
2428
|
-
|
|
2429
|
-
max-width: 290px;
|
|
2430
|
-
}
|
|
2416
|
+
|
|
2431
2417
|
}
|
|
2432
2418
|
|
|
2433
|
-
@media (min-width:
|
|
2434
|
-
|
|
2435
|
-
max-width: 290px;
|
|
2436
|
-
}
|
|
2419
|
+
@media (min-width:1024px) {
|
|
2420
|
+
|
|
2437
2421
|
}
|
|
2438
2422
|
|
|
2439
2423
|
@media (min-width:1024px) {
|
|
@@ -235,15 +235,11 @@ exports[`renders correctly 1`] = `
|
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
@media (min-width:740px) {
|
|
238
|
-
|
|
239
|
-
max-width: 290px;
|
|
240
|
-
}
|
|
238
|
+
|
|
241
239
|
}
|
|
242
240
|
|
|
243
|
-
@media (min-width:
|
|
244
|
-
|
|
245
|
-
max-width: 290px;
|
|
246
|
-
}
|
|
241
|
+
@media (min-width:1024px) {
|
|
242
|
+
|
|
247
243
|
}
|
|
248
244
|
|
|
249
245
|
@media (min-width:1024px) {
|
|
@@ -23,7 +23,7 @@ const Footer = ({
|
|
|
23
23
|
|
|
24
24
|
return (
|
|
25
25
|
<div>
|
|
26
|
-
<FooterWrapper
|
|
26
|
+
<FooterWrapper navItems {...rest}>
|
|
27
27
|
<InnerWrapper>
|
|
28
28
|
{additionalLegalLine
|
|
29
29
|
&& <FooterLegalLine tag="p" color="grey">{additionalLegalLine}</FooterLegalLine>
|
|
@@ -36,7 +36,7 @@ const Footer = ({
|
|
|
36
36
|
<Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
|
|
37
37
|
</Brand>
|
|
38
38
|
</FooterBranding>
|
|
39
|
-
<FooterNav navItems={navItems} {...rest} />
|
|
39
|
+
<FooterNav navItems={navItems} overrideallowList={overrideallowList} {...rest} />
|
|
40
40
|
<FooterCopyright>
|
|
41
41
|
<Text tag="p" color="grey">
|
|
42
42
|
{footerCopy}
|
|
@@ -340,15 +340,11 @@ it('renders correctly', () => {
|
|
|
340
340
|
}
|
|
341
341
|
|
|
342
342
|
@media (min-width:740px) {
|
|
343
|
-
|
|
344
|
-
max-width: 290px;
|
|
345
|
-
}
|
|
343
|
+
|
|
346
344
|
}
|
|
347
345
|
|
|
348
|
-
@media (min-width:
|
|
349
|
-
|
|
350
|
-
max-width: 290px;
|
|
351
|
-
}
|
|
346
|
+
@media (min-width:1024px) {
|
|
347
|
+
|
|
352
348
|
}
|
|
353
349
|
|
|
354
350
|
@media (min-width:1024px) {
|