@comicrelief/component-library 8.16.1 → 8.17.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.
|
@@ -31,7 +31,7 @@ const StyledCheckboxInput = _styledComponents.default.input.attrs({
|
|
|
31
31
|
}).withConfig({
|
|
32
32
|
displayName: "Checkbox__StyledCheckboxInput",
|
|
33
33
|
componentId: "sc-ngak0-1"
|
|
34
|
-
})(["
|
|
34
|
+
})(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;+ 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-size:contain;background-color:", ";border:1px solid ", ";}:focus + span{border:1px solid ", ";}"], _ref3 => {
|
|
35
35
|
let {
|
|
36
36
|
theme,
|
|
37
37
|
checkboxBg
|
|
@@ -15,5 +15,5 @@ it('renders correctly', () => {
|
|
|
15
15
|
value: "Handball",
|
|
16
16
|
label: "Handball"
|
|
17
17
|
}))).toJSON();
|
|
18
|
-
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 .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 .c1 {\n
|
|
18
|
+
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 .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 .c1 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\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 .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-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\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 .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 .c1 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\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 .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-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\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 ");
|
|
19
19
|
});
|
package/package.json
CHANGED
|
@@ -14,10 +14,17 @@ const Label = styled.label`
|
|
|
14
14
|
`;
|
|
15
15
|
|
|
16
16
|
const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
|
|
17
|
-
/* This input is not visible */
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
/* This input is not visible but needs these long winded styles to remain accessible to screen readers */
|
|
18
|
+
border: 0;
|
|
19
|
+
clip: rect(0 0 0 0);
|
|
20
|
+
height: 1px;
|
|
21
|
+
margin: -1px;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
padding: 0;
|
|
24
|
+
position: absolute;
|
|
25
|
+
white-space: nowrap;
|
|
26
|
+
width: 1px;
|
|
27
|
+
|
|
21
28
|
/* This span is actually the visual square Checkbox you see */
|
|
22
29
|
+ span {
|
|
23
30
|
margin-right: 12px;
|
|
@@ -35,9 +35,16 @@ it('renders correctly', () => {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.c1 {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
border: 0;
|
|
39
|
+
-webkit-clip: rect(0 0 0 0);
|
|
40
|
+
clip: rect(0 0 0 0);
|
|
41
|
+
height: 1px;
|
|
42
|
+
margin: -1px;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
padding: 0;
|
|
45
|
+
position: absolute;
|
|
46
|
+
white-space: nowrap;
|
|
47
|
+
width: 1px;
|
|
41
48
|
}
|
|
42
49
|
|
|
43
50
|
.c1 + span {
|
|
@@ -104,9 +111,16 @@ it('renders correctly', () => {
|
|
|
104
111
|
}
|
|
105
112
|
|
|
106
113
|
.c1 {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
114
|
+
border: 0;
|
|
115
|
+
-webkit-clip: rect(0 0 0 0);
|
|
116
|
+
clip: rect(0 0 0 0);
|
|
117
|
+
height: 1px;
|
|
118
|
+
margin: -1px;
|
|
119
|
+
overflow: hidden;
|
|
120
|
+
padding: 0;
|
|
121
|
+
position: absolute;
|
|
122
|
+
white-space: nowrap;
|
|
123
|
+
width: 1px;
|
|
110
124
|
}
|
|
111
125
|
|
|
112
126
|
.c1 + span {
|