@comicrelief/component-library 8.18.3 → 8.19.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.
- package/dist/components/Atoms/Checkbox/Checkbox.js +1 -1
- package/dist/components/Atoms/ErrorText/ErrorText.js +3 -15
- package/dist/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap +1 -17
- package/dist/components/Atoms/Input/Input.js +23 -11
- package/dist/components/Atoms/Input/Input.md +1 -2
- package/dist/components/Atoms/Input/assets/error-alert-icon-red.svg +10 -0
- package/dist/components/Atoms/Input/input.test.js +1 -1
- package/dist/components/Atoms/Label/Label.js +16 -10
- package/dist/components/Atoms/Select/__snapshots__/Select.test.js.snap +2 -2
- package/dist/components/Atoms/TextArea/TextArea.test.js +1 -1
- package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +16 -24
- package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +4 -4
- package/dist/components/Molecules/SearchInput/SearchInput.test.js +1 -1
- package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +4 -4
- package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +16 -16
- package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +31 -39
- package/dist/components/Organisms/Membership/Membership.test.js +2 -2
- package/package.json +1 -1
- package/src/components/Atoms/Checkbox/Checkbox.js +1 -1
- package/src/components/Atoms/ErrorText/ErrorText.js +1 -19
- package/src/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap +1 -17
- package/src/components/Atoms/Input/Input.js +34 -10
- package/src/components/Atoms/Input/Input.md +1 -2
- package/src/components/Atoms/Input/assets/error-alert-icon-red.svg +10 -0
- package/src/components/Atoms/Input/input.test.js +4 -4
- package/src/components/Atoms/Label/Label.js +25 -9
- package/src/components/Atoms/Select/__snapshots__/Select.test.js.snap +2 -2
- package/src/components/Atoms/TextArea/TextArea.test.js +2 -2
- package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +16 -24
- package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +4 -4
- package/src/components/Molecules/SearchInput/SearchInput.test.js +3 -3
- package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +4 -4
- package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +16 -16
- package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +31 -39
- package/src/components/Organisms/Membership/Membership.test.js +49 -57
- package/dist/components/Atoms/Input/assets/CR_Error--red.svg +0 -1
- package/dist/components/Atoms/Input/assets/CR_Error.svg +0 -1
- package/dist/components/Atoms/Input/assets/error-alert-icon.png +0 -0
- package/src/components/Atoms/Input/assets/CR_Error--red.svg +0 -1
- package/src/components/Atoms/Input/assets/CR_Error.svg +0 -1
- package/src/components/Atoms/Input/assets/error-alert-icon.png +0 -0
|
@@ -79,7 +79,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
|
|
|
79
79
|
return /*#__PURE__*/_react.default.createElement(Label, {
|
|
80
80
|
hasLabelAsString: !!label,
|
|
81
81
|
labelColour: labelColour,
|
|
82
|
-
htmlFor: name
|
|
82
|
+
htmlFor: rest.id || name
|
|
83
83
|
}, /*#__PURE__*/_react.default.createElement(StyledCheckboxInput, Object.assign({}, rest, {
|
|
84
84
|
id: rest.id || name,
|
|
85
85
|
name: name,
|
|
@@ -8,27 +8,15 @@ exports.default = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _Text = _interopRequireDefault(require("../Text/Text"));
|
|
11
|
-
var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
|
|
12
|
-
var _CR_ErrorRed = _interopRequireDefault(require("../Input/assets/CR_Error--red.svg"));
|
|
13
11
|
const ErrorIcon = _styledComponents.default.span.withConfig({
|
|
14
12
|
displayName: "ErrorText__ErrorIcon",
|
|
15
13
|
componentId: "sc-19bj17r-0"
|
|
16
|
-
})(["display:inline-block;
|
|
17
|
-
|
|
18
|
-
theme
|
|
19
|
-
} = _ref;
|
|
20
|
-
return theme.color('error_pink');
|
|
21
|
-
}, (0, _spacing.default)('sm'), _CR_ErrorRed.default, _ref2 => {
|
|
22
|
-
let {
|
|
23
|
-
theme
|
|
24
|
-
} = _ref2;
|
|
25
|
-
return theme.color('red');
|
|
26
|
-
});
|
|
27
|
-
const ErrorText = _ref3 => {
|
|
14
|
+
})(["display:inline-block;width:100%;z-index:1;font-weight:bold;padding:0.6rem 0 1rem;"]);
|
|
15
|
+
const ErrorText = _ref => {
|
|
28
16
|
let {
|
|
29
17
|
children,
|
|
30
18
|
...rest
|
|
31
|
-
} =
|
|
19
|
+
} = _ref;
|
|
32
20
|
return /*#__PURE__*/_react.default.createElement(_Text.default, Object.assign({}, rest, {
|
|
33
21
|
color: "red"
|
|
34
22
|
}), /*#__PURE__*/_react.default.createElement(ErrorIcon, null, children));
|
|
@@ -10,26 +10,10 @@ exports[`renders correctly 1`] = `
|
|
|
10
10
|
|
|
11
11
|
.c1 {
|
|
12
12
|
display: inline-block;
|
|
13
|
-
padding: 1.5rem 1rem 1rem;
|
|
14
13
|
width: 100%;
|
|
15
14
|
z-index: 1;
|
|
16
|
-
margin-top: -10px;
|
|
17
|
-
background-color: #FAE1E2;
|
|
18
|
-
border-radius: 0.5rem;
|
|
19
15
|
font-weight: bold;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.c1:before {
|
|
23
|
-
position: relative;
|
|
24
|
-
content: '';
|
|
25
|
-
top: 1px;
|
|
26
|
-
margin-right: 3px;
|
|
27
|
-
background: url(mock.asset) left 0/100% no-repeat;
|
|
28
|
-
width: 18px;
|
|
29
|
-
height: 19px;
|
|
30
|
-
display: inline-block;
|
|
31
|
-
vertical-align: top;
|
|
32
|
-
color: #E52630;
|
|
16
|
+
padding: 0.6rem 0 1rem;
|
|
33
17
|
}
|
|
34
18
|
|
|
35
19
|
<span
|
|
@@ -9,13 +9,13 @@ exports.default = void 0;
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
12
|
+
var _errorAlertIconRed = _interopRequireDefault(require("./assets/error-alert-icon-red.svg"));
|
|
12
13
|
var _Label = _interopRequireDefault(require("../Label/Label"));
|
|
13
14
|
var _ErrorText = _interopRequireDefault(require("../ErrorText/ErrorText"));
|
|
14
|
-
var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
|
|
15
15
|
var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
|
|
16
16
|
// This seems to get a decent approximation of the necessary width (without resorting to measuring
|
|
17
17
|
// the element with JS)
|
|
18
|
-
const getPrefixWidth = prefixLength => "calc(
|
|
18
|
+
const getPrefixWidth = prefixLength => "calc(1.5rem + (".concat(prefixLength, " * 0.5rem))");
|
|
19
19
|
const InputField = _styledComponents.default.input.withConfig({
|
|
20
20
|
displayName: "Input__InputField",
|
|
21
21
|
componentId: "sc-bcqy1o-0"
|
|
@@ -25,32 +25,42 @@ const InputField = _styledComponents.default.input.withConfig({
|
|
|
25
25
|
error,
|
|
26
26
|
prefixLength
|
|
27
27
|
} = _ref;
|
|
28
|
-
return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:
|
|
28
|
+
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'));
|
|
29
29
|
});
|
|
30
30
|
const InputWrapper = _styledComponents.default.div.withConfig({
|
|
31
31
|
displayName: "Input__InputWrapper",
|
|
32
32
|
componentId: "sc-bcqy1o-1"
|
|
33
|
-
})(["position:relative;font-size:", ";"], _ref2 => {
|
|
33
|
+
})(["position:relative;font-size:", ";", " @media ", "{max-width:290px;}"], _ref2 => {
|
|
34
34
|
let {
|
|
35
35
|
theme
|
|
36
36
|
} = _ref2;
|
|
37
37
|
return theme.fontSize('m');
|
|
38
|
+
}, _ref3 => {
|
|
39
|
+
let {
|
|
40
|
+
error
|
|
41
|
+
} = _ref3;
|
|
42
|
+
return error && (0, _styledComponents.css)(["&::after{content:'';position:absolute;top:50%;right:0.5rem;transform:translateY(-50%);background:url(", ") center/contain no-repeat;--iconSize:19px;width:var(--iconSize);height:var(--iconSize);z-index:3;}"], _errorAlertIconRed.default);
|
|
43
|
+
}, _ref4 => {
|
|
44
|
+
let {
|
|
45
|
+
theme
|
|
46
|
+
} = _ref4;
|
|
47
|
+
return theme.allBreakpoints('M');
|
|
38
48
|
});
|
|
39
49
|
const Prefix = _styledComponents.default.div.withConfig({
|
|
40
50
|
displayName: "Input__Prefix",
|
|
41
51
|
componentId: "sc-bcqy1o-2"
|
|
42
|
-
})(["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'),
|
|
52
|
+
})(["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 => {
|
|
43
53
|
let {
|
|
44
54
|
length
|
|
45
|
-
} =
|
|
55
|
+
} = _ref5;
|
|
46
56
|
return getPrefixWidth(length);
|
|
47
|
-
},
|
|
57
|
+
}, _ref6 => {
|
|
48
58
|
let {
|
|
49
59
|
theme
|
|
50
|
-
} =
|
|
60
|
+
} = _ref6;
|
|
51
61
|
return theme.color('grey_dark');
|
|
52
62
|
});
|
|
53
|
-
const Input = /*#__PURE__*/_react.default.forwardRef((
|
|
63
|
+
const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
|
|
54
64
|
let {
|
|
55
65
|
errorMsg = '',
|
|
56
66
|
id,
|
|
@@ -64,7 +74,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
|
|
|
64
74
|
prefix = '',
|
|
65
75
|
optional = null,
|
|
66
76
|
...rest
|
|
67
|
-
} =
|
|
77
|
+
} = _ref7;
|
|
68
78
|
return /*#__PURE__*/_react.default.createElement(_Label.default, Object.assign({
|
|
69
79
|
className: className,
|
|
70
80
|
htmlFor: id,
|
|
@@ -72,7 +82,9 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
|
|
|
72
82
|
hideLabel: !showLabel,
|
|
73
83
|
errorMsg: errorMsg,
|
|
74
84
|
optional: optional
|
|
75
|
-
}, labelProps), /*#__PURE__*/_react.default.createElement(InputWrapper,
|
|
85
|
+
}, labelProps), /*#__PURE__*/_react.default.createElement(InputWrapper, {
|
|
86
|
+
error: Boolean(errorMsg)
|
|
87
|
+
}, prefix && /*#__PURE__*/_react.default.createElement(Prefix, {
|
|
76
88
|
length: prefix.length
|
|
77
89
|
}, prefix), /*#__PURE__*/_react.default.createElement(InputField, Object.assign({
|
|
78
90
|
id: id,
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
label="Label"
|
|
20
20
|
errorMsg="This is an error message"
|
|
21
21
|
id="input-example-2"
|
|
22
|
-
showLabel={false}
|
|
23
22
|
/>
|
|
24
23
|
```
|
|
25
24
|
|
|
@@ -103,6 +102,6 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
|
|
|
103
102
|
const price = event.target.value;
|
|
104
103
|
if (typeof Number(price) === 'number') {
|
|
105
104
|
event.target.value = Number(price).toFixed(2);
|
|
106
|
-
}
|
|
105
|
+
}
|
|
107
106
|
}}
|
|
108
107
|
/>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_2432_14605)">
|
|
3
|
+
<path d="M12 0.5C5.6585 0.5 0.5 5.659 0.5 12C0.5 18.341 5.6585 23.5 12 23.5C18.3415 23.5 23.5 18.341 23.5 12C23.5 5.659 18.3415 0.5 12 0.5ZM10.5 6C10.5 5.1715 11.1715 4.5 12 4.5C12.8285 4.5 13.5 5.1715 13.5 6V13C13.5 13.8285 12.8285 14.5 12 14.5C11.1715 14.5 10.5 13.8285 10.5 13V6ZM12 19.5C10.897 19.5 10 18.603 10 17.5C10 16.397 10.897 15.5 12 15.5C13.103 15.5 14 16.397 14 17.5C14 18.603 13.103 19.5 12 19.5Z" fill="#E52630"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<clipPath id="clip0_2432_14605">
|
|
7
|
+
<rect width="24" height="24" fill="white"/>
|
|
8
|
+
</clipPath>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -14,5 +14,5 @@ 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
|
|
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 .c4 {\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 .c4:focus {\n border: 1px solid #666;\n }\n\n .c3 {\n position: relative;\n font-size: 1.25rem;\n }\n\n @media (min-width:740px) {\n .c3 {\n max-width: 290px;\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 <input\n aria-describedby=\"Accessibility info go here\"\n className=\"c4\"\n id=\"Accessibility info go here\"\n name=\"fullname\"\n placeholder=\"This is the hint text\"\n required={false}\n type=\"text\"\n />\n </div>\n \n </label>\n ");
|
|
18
18
|
});
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
11
|
var _Text = _interopRequireDefault(require("../Text/Text"));
|
|
11
12
|
var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
|
|
@@ -13,11 +14,12 @@ var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVi
|
|
|
13
14
|
const LabelElement = _styledComponents.default.label.withConfig({
|
|
14
15
|
displayName: "Label__LabelElement",
|
|
15
16
|
componentId: "sc-2nrw50-0"
|
|
16
|
-
})(["position:relative;display:flex;flex-direction:column;color:", ";
|
|
17
|
+
})(["width:100%;position:relative;display:flex;flex-direction:column;color:", ";", ""], _ref => {
|
|
17
18
|
let {
|
|
18
|
-
theme
|
|
19
|
+
theme,
|
|
20
|
+
errorMsg
|
|
19
21
|
} = _ref;
|
|
20
|
-
return theme.color('grey_label');
|
|
22
|
+
return errorMsg ? theme.color('red') : theme.color('grey_label');
|
|
21
23
|
}, _ref2 => {
|
|
22
24
|
let {
|
|
23
25
|
optional,
|
|
@@ -25,12 +27,10 @@ const LabelElement = _styledComponents.default.label.withConfig({
|
|
|
25
27
|
} = _ref2;
|
|
26
28
|
return optional === true && "\n :after {\n position: absolute;\n top: 0;\n right: 0;\n content: 'Optional';\n font-family: ".concat(theme.fontFamilies(theme.font.regular), ";\n font-size: ").concat(theme.fontSize('s'), ";\n }");
|
|
27
29
|
});
|
|
28
|
-
const VisibleText = (0, _styledComponents.default)(_Text.default).
|
|
29
|
-
weight: 'bold'
|
|
30
|
-
}).withConfig({
|
|
30
|
+
const VisibleText = (0, _styledComponents.default)(_Text.default).withConfig({
|
|
31
31
|
displayName: "Label__VisibleText",
|
|
32
32
|
componentId: "sc-2nrw50-1"
|
|
33
|
-
})(["margin-bottom:", ";"], (0, _spacing.default)('sm'));
|
|
33
|
+
})(["margin-bottom:", ";font-weight:normal;"], (0, _spacing.default)('sm'));
|
|
34
34
|
const HiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
|
|
35
35
|
displayName: "Label__HiddenText",
|
|
36
36
|
componentId: "sc-2nrw50-2"
|
|
@@ -65,13 +65,19 @@ const Label = _ref4 => {
|
|
|
65
65
|
label,
|
|
66
66
|
hideLabel = false,
|
|
67
67
|
optional = null,
|
|
68
|
+
errorMsg = '',
|
|
68
69
|
...rest
|
|
69
70
|
} = _ref4;
|
|
70
|
-
return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({
|
|
71
|
-
optional: optional
|
|
72
|
-
|
|
71
|
+
return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({
|
|
72
|
+
optional: optional,
|
|
73
|
+
errorMsg: errorMsg
|
|
74
|
+
}, rest), /*#__PURE__*/_react.default.createElement(LabelText, {
|
|
73
75
|
label: label,
|
|
74
76
|
hideLabel: hideLabel
|
|
75
77
|
}), children);
|
|
76
78
|
};
|
|
79
|
+
LabelElement.propTypes = {
|
|
80
|
+
optional: _propTypes.default.bool,
|
|
81
|
+
errorMsg: _propTypes.default.string
|
|
82
|
+
};
|
|
77
83
|
var _default = exports.default = Label;
|
|
@@ -5,12 +5,12 @@ exports[`renders correctly 1`] = `
|
|
|
5
5
|
font-size: 1rem;
|
|
6
6
|
line-height: 1rem;
|
|
7
7
|
text-transform: inherit;
|
|
8
|
-
font-weight: bold;
|
|
9
8
|
line-height: normal;
|
|
10
9
|
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
.c0 {
|
|
13
|
+
width: 100%;
|
|
14
14
|
position: relative;
|
|
15
15
|
display: -webkit-box;
|
|
16
16
|
display: -webkit-flex;
|
|
@@ -20,11 +20,11 @@ exports[`renders correctly 1`] = `
|
|
|
20
20
|
-ms-flex-direction: column;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
color: #5C5C5E;
|
|
23
|
-
width: 100%;
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
.c2 {
|
|
27
26
|
margin-bottom: 0.5rem;
|
|
27
|
+
font-weight: normal;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.c3 {
|
|
@@ -14,5 +14,5 @@ it('renders correctly', () => {
|
|
|
14
14
|
errorMsg: "",
|
|
15
15
|
id: "Please leave your comment here"
|
|
16
16
|
})).toJSON();
|
|
17
|
-
expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\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 box-sizing: border-box;\n width: 100%;\n margin: 0;\n padding: 1rem 1.5rem;\n font-size: 1.25rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-radius: 0.5rem;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n resize: vertical;\n }\n\n .c3:focus {\n border: 1px solid #666;\n }\n\n .c3:focus::-webkit-input-placeholder {\n visibility: hidden;\n }\n\n .c3:focus::-moz-placeholder {\n visibility: hidden;\n }\n\n .c3:focus:-ms-input-placeholder {\n visibility: hidden;\n }\n\n .c3:focus::placeholder {\n visibility: hidden;\n }\n\n <label\n className=\"c0\"\n htmlFor=\"Please leave your comment 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 <textarea\n aria-describedby=\"Please leave your comment here\"\n className=\"c3\"\n name=\"description\"\n placeholder=\"This is text area\"\n rows={5}\n />\n \n </label>\n ");
|
|
18
18
|
});
|
package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap
CHANGED
|
@@ -5,12 +5,12 @@ exports[`renders correctly with no value and no options 1`] = `
|
|
|
5
5
|
font-size: 1rem;
|
|
6
6
|
line-height: 1rem;
|
|
7
7
|
text-transform: inherit;
|
|
8
|
-
font-weight: bold;
|
|
9
8
|
line-height: normal;
|
|
10
9
|
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
.c1 {
|
|
13
|
+
width: 100%;
|
|
14
14
|
position: relative;
|
|
15
15
|
display: -webkit-box;
|
|
16
16
|
display: -webkit-flex;
|
|
@@ -20,11 +20,11 @@ exports[`renders correctly with no value and no options 1`] = `
|
|
|
20
20
|
-ms-flex-direction: column;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
color: #5C5C5E;
|
|
23
|
-
width: 100%;
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
.c3 {
|
|
27
26
|
margin-bottom: 0.5rem;
|
|
27
|
+
font-weight: normal;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.c5 {
|
|
@@ -32,7 +32,7 @@ exports[`renders correctly with no value and no options 1`] = `
|
|
|
32
32
|
box-sizing: border-box;
|
|
33
33
|
width: 100%;
|
|
34
34
|
height: 48px;
|
|
35
|
-
padding: 1rem 1.5rem;
|
|
35
|
+
padding: 1rem 2.4rem 1rem 1.5rem;
|
|
36
36
|
background-color: #F4F3F5;
|
|
37
37
|
border: 1px solid;
|
|
38
38
|
border-color: #E1E2E3;
|
|
@@ -61,7 +61,7 @@ exports[`renders correctly with no value and no options 1`] = `
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
@media (min-width:740px) {
|
|
64
|
-
.
|
|
64
|
+
.c4 {
|
|
65
65
|
max-width: 290px;
|
|
66
66
|
}
|
|
67
67
|
}
|
|
@@ -111,12 +111,12 @@ exports[`renders correctly with value and no options 1`] = `
|
|
|
111
111
|
font-size: 1rem;
|
|
112
112
|
line-height: 1rem;
|
|
113
113
|
text-transform: inherit;
|
|
114
|
-
font-weight: bold;
|
|
115
114
|
line-height: normal;
|
|
116
115
|
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
|
|
117
116
|
}
|
|
118
117
|
|
|
119
118
|
.c1 {
|
|
119
|
+
width: 100%;
|
|
120
120
|
position: relative;
|
|
121
121
|
display: -webkit-box;
|
|
122
122
|
display: -webkit-flex;
|
|
@@ -126,11 +126,11 @@ exports[`renders correctly with value and no options 1`] = `
|
|
|
126
126
|
-ms-flex-direction: column;
|
|
127
127
|
flex-direction: column;
|
|
128
128
|
color: #5C5C5E;
|
|
129
|
-
width: 100%;
|
|
130
129
|
}
|
|
131
130
|
|
|
132
131
|
.c3 {
|
|
133
132
|
margin-bottom: 0.5rem;
|
|
133
|
+
font-weight: normal;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
.c5 {
|
|
@@ -138,7 +138,7 @@ exports[`renders correctly with value and no options 1`] = `
|
|
|
138
138
|
box-sizing: border-box;
|
|
139
139
|
width: 100%;
|
|
140
140
|
height: 48px;
|
|
141
|
-
padding: 1rem 1.5rem;
|
|
141
|
+
padding: 1rem 2.4rem 1rem 1.5rem;
|
|
142
142
|
background-color: #F4F3F5;
|
|
143
143
|
border: 1px solid;
|
|
144
144
|
border-color: #E1E2E3;
|
|
@@ -167,7 +167,7 @@ exports[`renders correctly with value and no options 1`] = `
|
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
@media (min-width:740px) {
|
|
170
|
-
.
|
|
170
|
+
.c4 {
|
|
171
171
|
max-width: 290px;
|
|
172
172
|
}
|
|
173
173
|
}
|
|
@@ -214,15 +214,6 @@ exports[`renders correctly with value and no options 1`] = `
|
|
|
214
214
|
|
|
215
215
|
exports[`renders correctly with value and options 1`] = `
|
|
216
216
|
.c2 {
|
|
217
|
-
font-size: 1rem;
|
|
218
|
-
line-height: 1rem;
|
|
219
|
-
text-transform: inherit;
|
|
220
|
-
font-weight: bold;
|
|
221
|
-
line-height: normal;
|
|
222
|
-
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.c10 {
|
|
226
217
|
font-size: 1rem;
|
|
227
218
|
line-height: 1rem;
|
|
228
219
|
text-transform: inherit;
|
|
@@ -231,6 +222,7 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
231
222
|
}
|
|
232
223
|
|
|
233
224
|
.c1 {
|
|
225
|
+
width: 100%;
|
|
234
226
|
position: relative;
|
|
235
227
|
display: -webkit-box;
|
|
236
228
|
display: -webkit-flex;
|
|
@@ -240,11 +232,11 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
240
232
|
-ms-flex-direction: column;
|
|
241
233
|
flex-direction: column;
|
|
242
234
|
color: #5C5C5E;
|
|
243
|
-
width: 100%;
|
|
244
235
|
}
|
|
245
236
|
|
|
246
237
|
.c3 {
|
|
247
238
|
margin-bottom: 0.5rem;
|
|
239
|
+
font-weight: normal;
|
|
248
240
|
}
|
|
249
241
|
|
|
250
242
|
.c5 {
|
|
@@ -252,7 +244,7 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
252
244
|
box-sizing: border-box;
|
|
253
245
|
width: 100%;
|
|
254
246
|
height: 48px;
|
|
255
|
-
padding: 1rem 1.5rem;
|
|
247
|
+
padding: 1rem 2.4rem 1rem 1.5rem;
|
|
256
248
|
background-color: #F4F3F5;
|
|
257
249
|
border: 1px solid;
|
|
258
250
|
border-color: #E1E2E3;
|
|
@@ -314,7 +306,7 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
314
306
|
}
|
|
315
307
|
|
|
316
308
|
@media (min-width:740px) {
|
|
317
|
-
.
|
|
309
|
+
.c4 {
|
|
318
310
|
max-width: 290px;
|
|
319
311
|
}
|
|
320
312
|
}
|
|
@@ -380,7 +372,7 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
380
372
|
tabIndex="-1"
|
|
381
373
|
>
|
|
382
374
|
<span
|
|
383
|
-
className="
|
|
375
|
+
className="c2"
|
|
384
376
|
color="inherit"
|
|
385
377
|
size="s"
|
|
386
378
|
>
|
|
@@ -397,7 +389,7 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
397
389
|
tabIndex="-1"
|
|
398
390
|
>
|
|
399
391
|
<span
|
|
400
|
-
className="
|
|
392
|
+
className="c2"
|
|
401
393
|
color="inherit"
|
|
402
394
|
size="s"
|
|
403
395
|
>
|
|
@@ -414,7 +406,7 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
414
406
|
tabIndex="-1"
|
|
415
407
|
>
|
|
416
408
|
<span
|
|
417
|
-
className="
|
|
409
|
+
className="c2"
|
|
418
410
|
color="inherit"
|
|
419
411
|
size="s"
|
|
420
412
|
>
|
|
@@ -431,7 +423,7 @@ exports[`renders correctly with value and options 1`] = `
|
|
|
431
423
|
tabIndex="-1"
|
|
432
424
|
>
|
|
433
425
|
<span
|
|
434
|
-
className="
|
|
426
|
+
className="c2"
|
|
435
427
|
color="inherit"
|
|
436
428
|
size="s"
|
|
437
429
|
>
|
|
@@ -5,12 +5,12 @@ exports[`renders correctly 1`] = `
|
|
|
5
5
|
font-size: 1rem;
|
|
6
6
|
line-height: 1rem;
|
|
7
7
|
text-transform: inherit;
|
|
8
|
-
font-weight: bold;
|
|
9
8
|
line-height: normal;
|
|
10
9
|
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
.c1 {
|
|
13
|
+
width: 100%;
|
|
14
14
|
position: relative;
|
|
15
15
|
display: -webkit-box;
|
|
16
16
|
display: -webkit-flex;
|
|
@@ -20,11 +20,11 @@ exports[`renders correctly 1`] = `
|
|
|
20
20
|
-ms-flex-direction: column;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
color: #5C5C5E;
|
|
23
|
-
width: 100%;
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
.c3 {
|
|
27
26
|
margin-bottom: 0.5rem;
|
|
27
|
+
font-weight: normal;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.c5 {
|
|
@@ -32,7 +32,7 @@ exports[`renders correctly 1`] = `
|
|
|
32
32
|
box-sizing: border-box;
|
|
33
33
|
width: 100%;
|
|
34
34
|
height: 48px;
|
|
35
|
-
padding: 1rem 1.5rem;
|
|
35
|
+
padding: 1rem 2.4rem 1rem 1.5rem;
|
|
36
36
|
background-color: #F4F3F5;
|
|
37
37
|
border: 1px solid;
|
|
38
38
|
border-color: #E1E2E3;
|
|
@@ -61,7 +61,7 @@ exports[`renders correctly 1`] = `
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
@media (min-width:740px) {
|
|
64
|
-
.
|
|
64
|
+
.c4 {
|
|
65
65
|
max-width: 290px;
|
|
66
66
|
}
|
|
67
67
|
}
|
|
@@ -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 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
|
|
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 .c9 {\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 .c9:focus {\n border: 1px solid #666;\n }\n\n .c8 {\n position: relative;\n font-size: 1.25rem;\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 .c8 {\n max-width: 290px;\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 <input\n aria-describedby=\"search\"\n className=\"c9\"\n id=\"search\"\n name=\"search\"\n onChange={[Function]}\n placeholder=\"\"\n required={false}\n role=\"searchbox\"\n type=\"text\"\n value=\"\"\n />\n </div>\n \n </label>\n </div>\n </div>\n </div>\n </div>\n ");
|
|
17
17
|
});
|
|
@@ -5,12 +5,12 @@ exports[`renders correctly 1`] = `
|
|
|
5
5
|
font-size: 1rem;
|
|
6
6
|
line-height: 1rem;
|
|
7
7
|
text-transform: inherit;
|
|
8
|
-
font-weight: bold;
|
|
9
8
|
line-height: normal;
|
|
10
9
|
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
.c1 {
|
|
13
|
+
width: 100%;
|
|
14
14
|
position: relative;
|
|
15
15
|
display: -webkit-box;
|
|
16
16
|
display: -webkit-flex;
|
|
@@ -20,11 +20,11 @@ exports[`renders correctly 1`] = `
|
|
|
20
20
|
-ms-flex-direction: column;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
color: #5C5C5E;
|
|
23
|
-
width: 100%;
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
.c3 {
|
|
27
26
|
margin-bottom: 0.5rem;
|
|
27
|
+
font-weight: normal;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.c5 {
|
|
@@ -32,7 +32,7 @@ exports[`renders correctly 1`] = `
|
|
|
32
32
|
box-sizing: border-box;
|
|
33
33
|
width: 100%;
|
|
34
34
|
height: 48px;
|
|
35
|
-
padding: 1rem 1.5rem;
|
|
35
|
+
padding: 1rem 2.4rem 1rem 1.5rem;
|
|
36
36
|
background-color: #F4F3F5;
|
|
37
37
|
border: 1px solid;
|
|
38
38
|
border-color: #E1E2E3;
|
|
@@ -61,7 +61,7 @@ exports[`renders correctly 1`] = `
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
@media (min-width:740px) {
|
|
64
|
-
.
|
|
64
|
+
.c4 {
|
|
65
65
|
max-width: 290px;
|
|
66
66
|
}
|
|
67
67
|
}
|