@comicrelief/component-library 6.1.1 → 6.1.2
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.
|
@@ -26,7 +26,7 @@ var StyledCheckboxInput = _styledComponents.default.input.attrs({
|
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "Checkbox__StyledCheckboxInput",
|
|
28
28
|
componentId: "sc-ngak0-0"
|
|
29
|
-
})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], function (_ref) {
|
|
29
|
+
})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;flex-shrink:0;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], function (_ref) {
|
|
30
30
|
var theme = _ref.theme;
|
|
31
31
|
return theme.fontSize('sm');
|
|
32
32
|
}, function (_ref2) {
|
|
@@ -20,5 +20,5 @@ it('renders correctly', function () {
|
|
|
20
20
|
value: "Handball",
|
|
21
21
|
label: "Handball"
|
|
22
22
|
}))).toJSON();
|
|
23
|
-
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 display: block;\n box-sizing: border-box;\n opacity: 0;\n position: absolute;\n left: 0px;\n width: 24px;\n height: 24px;\n margin: 0;\n border: 1px solid #969598;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-color: #E52630;\n border-color: #E52630;\n background-size: contain;\n }\n\n .c1:focus + span {\n border-color: #E52630;\n border-width: 1px;\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 margin-bottom: 8px;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Tenis\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Tenis\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 display: block;\n box-sizing: border-box;\n opacity: 0;\n position: absolute;\n left: 0px;\n width: 24px;\n height: 24px;\n margin: 0;\n border: 1px solid #969598;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-color: #E52630;\n border-color: #E52630;\n background-size: contain;\n }\n\n .c1:focus + span {\n border-color: #E52630;\n border-width: 1px;\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 margin-bottom: 8px;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Handball\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Handball\n </span>\n </label>,\n ]\n ");
|
|
23
|
+
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 display: block;\n box-sizing: border-box;\n opacity: 0;\n position: absolute;\n left: 0px;\n width: 24px;\n height: 24px;\n margin: 0;\n border: 1px solid #969598;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-color: #E52630;\n border-color: #E52630;\n background-size: contain;\n }\n\n .c1:focus + span {\n border-color: #E52630;\n border-width: 1px;\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 margin-bottom: 8px;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Tenis\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Tenis\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 display: block;\n box-sizing: border-box;\n opacity: 0;\n position: absolute;\n left: 0px;\n width: 24px;\n height: 24px;\n margin: 0;\n border: 1px solid #969598;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-color: #E52630;\n border-color: #E52630;\n background-size: contain;\n }\n\n .c1:focus + span {\n border-color: #E52630;\n border-width: 1px;\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 margin-bottom: 8px;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Handball\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Handball\n </span>\n </label>,\n ]\n ");
|
|
24
24
|
});
|
package/package.json
CHANGED
|
@@ -24,6 +24,7 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
|
|
|
24
24
|
background-color: ${({ theme }) => theme.color('white')};
|
|
25
25
|
border: 1px solid ${({ theme }) => theme.color('grey')};
|
|
26
26
|
float: left;
|
|
27
|
+
flex-shrink: 0;
|
|
27
28
|
}
|
|
28
29
|
:checked + span {
|
|
29
30
|
background: url(${checkBoxIcon}) no-repeat center;
|
|
@@ -42,6 +42,9 @@ it('renders correctly', () => {
|
|
|
42
42
|
background-color: #FFFFFF;
|
|
43
43
|
border: 1px solid #969598;
|
|
44
44
|
float: left;
|
|
45
|
+
-webkit-flex-shrink: 0;
|
|
46
|
+
-ms-flex-negative: 0;
|
|
47
|
+
flex-shrink: 0;
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
.c1:checked + span {
|
|
@@ -115,6 +118,9 @@ it('renders correctly', () => {
|
|
|
115
118
|
background-color: #FFFFFF;
|
|
116
119
|
border: 1px solid #969598;
|
|
117
120
|
float: left;
|
|
121
|
+
-webkit-flex-shrink: 0;
|
|
122
|
+
-ms-flex-negative: 0;
|
|
123
|
+
flex-shrink: 0;
|
|
118
124
|
}
|
|
119
125
|
|
|
120
126
|
.c1:checked + span {
|