@comicrelief/component-library 6.1.2 → 6.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -25,7 +25,7 @@ var _excluded = ["label", "name", "value"];
|
|
|
25
25
|
var StyledRadioInput = _styledComponents.default.input.withConfig({
|
|
26
26
|
displayName: "RadioButton__StyledRadioInput",
|
|
27
27
|
componentId: "sc-2c24wq-0"
|
|
28
|
-
})(["background-color:", ";font-size:", ";z-index:1;top:0;margin:5px 10px;width:30px;height:30px;opacity:0;left:0;right:0;+ span{left:2px;border-radius:30px;background-clip:padding-box;position:absolute;top:0px;width:30px;height:30px;border:1px solid ", ";}:checked + span{background-color:", ";border:1px solid ", ";:before{position:absolute;content:'';top:8px;left:0;right:0;background-color:", ";border-radius:30px;width:12px;height:12px;z-index:1;margin:0 auto;opacity:1;}}"], function (_ref) {
|
|
28
|
+
})(["background-color:", ";font-size:", ";z-index:1;top:0;margin:5px 10px;width:30px;height:30px;opacity:0;left:0;right:0;flex-shrink:0;+ span{left:2px;border-radius:30px;background-clip:padding-box;position:absolute;top:0px;width:30px;height:30px;border:1px solid ", ";}:checked + span{background-color:", ";border:1px solid ", ";:before{position:absolute;content:'';top:8px;left:0;right:0;background-color:", ";border-radius:30px;width:12px;height:12px;z-index:1;margin:0 auto;opacity:1;}}"], function (_ref) {
|
|
29
29
|
var color = _ref.color,
|
|
30
30
|
theme = _ref.theme;
|
|
31
31
|
return color ? theme.color(color) : theme.color('white');
|
|
@@ -22,5 +22,5 @@ it('renders correctly', function () {
|
|
|
22
22
|
value: "female",
|
|
23
23
|
label: "Female"
|
|
24
24
|
}))).toJSON();
|
|
25
|
-
expect(tree).toMatchInlineSnapshot("\n Array [\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c1 {\n background-color: #FFFFFF;\n z-index: 1;\n top: 0;\n margin: 5px 10px;\n width: 30px;\n height: 30px;\n opacity: 0;\n left: 0;\n right: 0;\n }\n\n .c1 + span {\n left: 2px;\n border-radius: 30px;\n background-clip: padding-box;\n position: absolute;\n top: 0px;\n width: 30px;\n height: 30px;\n border: 1px solid #666;\n }\n\n .c1:checked + span {\n background-color: #6F3AAB;\n border: 1px solid #6F3AAB;\n }\n\n .c1:checked + span:before {\n position: absolute;\n content: '';\n top: 8px;\n left: 0;\n right: 0;\n background-color: #FFFFFF;\n border-radius: 30px;\n width: 12px;\n height: 12px;\n z-index: 1;\n margin: 0 auto;\n opacity: 1;\n }\n\n .c0 {\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 position: relative;\n }\n\n <label\n className=\"c0\"\n htmlFor=\"male\"\n >\n <input\n className=\"c1\"\n id=\"male\"\n name=\"gender\"\n type=\"radio\"\n value=\"male\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Male\n </span>\n </label>,\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c1 {\n background-color: #FFFFFF;\n z-index: 1;\n top: 0;\n margin: 5px 10px;\n width: 30px;\n height: 30px;\n opacity: 0;\n left: 0;\n right: 0;\n }\n\n .c1 + span {\n left: 2px;\n border-radius: 30px;\n background-clip: padding-box;\n position: absolute;\n top: 0px;\n width: 30px;\n height: 30px;\n border: 1px solid #666;\n }\n\n .c1:checked + span {\n background-color: #6F3AAB;\n border: 1px solid #6F3AAB;\n }\n\n .c1:checked + span:before {\n position: absolute;\n content: '';\n top: 8px;\n left: 0;\n right: 0;\n background-color: #FFFFFF;\n border-radius: 30px;\n width: 12px;\n height: 12px;\n z-index: 1;\n margin: 0 auto;\n opacity: 1;\n }\n\n .c0 {\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 position: relative;\n }\n\n <label\n className=\"c0\"\n htmlFor=\"female\"\n >\n <input\n className=\"c1\"\n id=\"female\"\n name=\"gender\"\n type=\"radio\"\n value=\"female\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Female\n </span>\n </label>,\n ]\n ");
|
|
25
|
+
expect(tree).toMatchInlineSnapshot("\n Array [\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c1 {\n background-color: #FFFFFF;\n z-index: 1;\n top: 0;\n margin: 5px 10px;\n width: 30px;\n height: 30px;\n opacity: 0;\n left: 0;\n right: 0;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1 + span {\n left: 2px;\n border-radius: 30px;\n background-clip: padding-box;\n position: absolute;\n top: 0px;\n width: 30px;\n height: 30px;\n border: 1px solid #666;\n }\n\n .c1:checked + span {\n background-color: #6F3AAB;\n border: 1px solid #6F3AAB;\n }\n\n .c1:checked + span:before {\n position: absolute;\n content: '';\n top: 8px;\n left: 0;\n right: 0;\n background-color: #FFFFFF;\n border-radius: 30px;\n width: 12px;\n height: 12px;\n z-index: 1;\n margin: 0 auto;\n opacity: 1;\n }\n\n .c0 {\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 position: relative;\n }\n\n <label\n className=\"c0\"\n htmlFor=\"male\"\n >\n <input\n className=\"c1\"\n id=\"male\"\n name=\"gender\"\n type=\"radio\"\n value=\"male\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Male\n </span>\n </label>,\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c1 {\n background-color: #FFFFFF;\n z-index: 1;\n top: 0;\n margin: 5px 10px;\n width: 30px;\n height: 30px;\n opacity: 0;\n left: 0;\n right: 0;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1 + span {\n left: 2px;\n border-radius: 30px;\n background-clip: padding-box;\n position: absolute;\n top: 0px;\n width: 30px;\n height: 30px;\n border: 1px solid #666;\n }\n\n .c1:checked + span {\n background-color: #6F3AAB;\n border: 1px solid #6F3AAB;\n }\n\n .c1:checked + span:before {\n position: absolute;\n content: '';\n top: 8px;\n left: 0;\n right: 0;\n background-color: #FFFFFF;\n border-radius: 30px;\n width: 12px;\n height: 12px;\n z-index: 1;\n margin: 0 auto;\n opacity: 1;\n }\n\n .c0 {\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 position: relative;\n }\n\n <label\n className=\"c0\"\n htmlFor=\"female\"\n >\n <input\n className=\"c1\"\n id=\"female\"\n name=\"gender\"\n type=\"radio\"\n value=\"female\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Female\n </span>\n </label>,\n ]\n ");
|
|
26
26
|
});
|
package/package.json
CHANGED
|
@@ -32,6 +32,9 @@ it('renders correctly', () => {
|
|
|
32
32
|
opacity: 0;
|
|
33
33
|
left: 0;
|
|
34
34
|
right: 0;
|
|
35
|
+
-webkit-flex-shrink: 0;
|
|
36
|
+
-ms-flex-negative: 0;
|
|
37
|
+
flex-shrink: 0;
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
.c1 + span {
|
|
@@ -116,6 +119,9 @@ it('renders correctly', () => {
|
|
|
116
119
|
opacity: 0;
|
|
117
120
|
left: 0;
|
|
118
121
|
right: 0;
|
|
122
|
+
-webkit-flex-shrink: 0;
|
|
123
|
+
-ms-flex-negative: 0;
|
|
124
|
+
flex-shrink: 0;
|
|
119
125
|
}
|
|
120
126
|
|
|
121
127
|
.c1 + span {
|