@comicrelief/component-library 8.16.1 → 8.18.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/Checkbox/Checkbox.test.js +1 -1
- package/dist/components/Atoms/SocialIcons/Icon/Icon.js +1 -1
- package/dist/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap +12 -12
- package/dist/components/Molecules/ShareButton/ShareButton.test.js +2 -2
- package/dist/components/Organisms/Footer/__snapshots__/Footer.test.js.snap +4 -4
- package/package.json +1 -1
- package/src/components/Atoms/Checkbox/Checkbox.js +11 -4
- package/src/components/Atoms/Checkbox/Checkbox.test.js +20 -6
- package/src/components/Atoms/SocialIcons/Icon/Icon.js +1 -1
- package/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap +12 -12
- package/src/components/Molecules/ShareButton/ShareButton.test.js +7 -7
- package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap +4 -4
|
@@ -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
|
});
|
|
@@ -76,7 +76,7 @@ const Icon = _ref7 => {
|
|
|
76
76
|
}, restProps, {
|
|
77
77
|
title: title,
|
|
78
78
|
rel: "noopener noreferrer",
|
|
79
|
-
"data-
|
|
79
|
+
"data-test": "".concat(isHeader ? 'header' : 'icon', "-").concat((0, _kebabCase2.default)(id)),
|
|
80
80
|
isHeader: isHeader
|
|
81
81
|
}), /*#__PURE__*/_react.default.createElement(StyledImage, {
|
|
82
82
|
src: icon,
|
|
@@ -66,7 +66,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
|
|
|
66
66
|
>
|
|
67
67
|
<a
|
|
68
68
|
className="c2"
|
|
69
|
-
data-
|
|
69
|
+
data-test="icon-facebook"
|
|
70
70
|
href="https://www.facebook.com/comicrelief"
|
|
71
71
|
rel="noopener noreferrer"
|
|
72
72
|
target="_blank"
|
|
@@ -84,7 +84,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
|
|
|
84
84
|
>
|
|
85
85
|
<a
|
|
86
86
|
className="c2"
|
|
87
|
-
data-
|
|
87
|
+
data-test="icon-instagram"
|
|
88
88
|
href="https://www.instagram.com/comicrelief"
|
|
89
89
|
rel="noopener noreferrer"
|
|
90
90
|
target="_blank"
|
|
@@ -102,7 +102,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
|
|
|
102
102
|
>
|
|
103
103
|
<a
|
|
104
104
|
className="c2"
|
|
105
|
-
data-
|
|
105
|
+
data-test="icon-twitter"
|
|
106
106
|
href="https://twitter.com/comicrelief"
|
|
107
107
|
rel="noopener noreferrer"
|
|
108
108
|
target="_blank"
|
|
@@ -120,7 +120,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
|
|
|
120
120
|
>
|
|
121
121
|
<a
|
|
122
122
|
className="c2"
|
|
123
|
-
data-
|
|
123
|
+
data-test="icon-youtube"
|
|
124
124
|
href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
|
|
125
125
|
rel="noopener noreferrer"
|
|
126
126
|
target="_blank"
|
|
@@ -202,7 +202,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
|
|
|
202
202
|
>
|
|
203
203
|
<a
|
|
204
204
|
className="c2"
|
|
205
|
-
data-
|
|
205
|
+
data-test="icon-facebook"
|
|
206
206
|
href="https://www.facebook.com/rednoseday"
|
|
207
207
|
rel="noopener noreferrer"
|
|
208
208
|
target="_self"
|
|
@@ -220,7 +220,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
|
|
|
220
220
|
>
|
|
221
221
|
<a
|
|
222
222
|
className="c2"
|
|
223
|
-
data-
|
|
223
|
+
data-test="icon-instagram"
|
|
224
224
|
href="https://www.instagram.com/rednoseday"
|
|
225
225
|
rel="noopener noreferrer"
|
|
226
226
|
target="_self"
|
|
@@ -238,7 +238,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
|
|
|
238
238
|
>
|
|
239
239
|
<a
|
|
240
240
|
className="c2"
|
|
241
|
-
data-
|
|
241
|
+
data-test="icon-twitter"
|
|
242
242
|
href="https://twitter.com/rednoseday"
|
|
243
243
|
rel="noopener noreferrer"
|
|
244
244
|
target="_self"
|
|
@@ -256,7 +256,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
|
|
|
256
256
|
>
|
|
257
257
|
<a
|
|
258
258
|
className="c2"
|
|
259
|
-
data-
|
|
259
|
+
data-test="icon-youtube"
|
|
260
260
|
href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
|
|
261
261
|
rel="noopener noreferrer"
|
|
262
262
|
target="_self"
|
|
@@ -338,7 +338,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
|
|
|
338
338
|
>
|
|
339
339
|
<a
|
|
340
340
|
className="c2"
|
|
341
|
-
data-
|
|
341
|
+
data-test="icon-facebook"
|
|
342
342
|
href="https://www.facebook.com/sportrelief"
|
|
343
343
|
rel="noopener noreferrer"
|
|
344
344
|
target="_blank"
|
|
@@ -356,7 +356,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
|
|
|
356
356
|
>
|
|
357
357
|
<a
|
|
358
358
|
className="c2"
|
|
359
|
-
data-
|
|
359
|
+
data-test="icon-instagram"
|
|
360
360
|
href="https://www.instagram.com/sportrelief"
|
|
361
361
|
rel="noopener noreferrer"
|
|
362
362
|
target="_blank"
|
|
@@ -374,7 +374,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
|
|
|
374
374
|
>
|
|
375
375
|
<a
|
|
376
376
|
className="c2"
|
|
377
|
-
data-
|
|
377
|
+
data-test="icon-twitter"
|
|
378
378
|
href="https://twitter.com/sportrelief"
|
|
379
379
|
rel="noopener noreferrer"
|
|
380
380
|
target="_blank"
|
|
@@ -392,7 +392,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
|
|
|
392
392
|
>
|
|
393
393
|
<a
|
|
394
394
|
className="c2"
|
|
395
|
-
data-
|
|
395
|
+
data-test="icon-youtube"
|
|
396
396
|
href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
|
|
397
397
|
rel="noopener noreferrer"
|
|
398
398
|
target="_blank"
|
|
@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
5
5
|
require("jest-styled-components");
|
|
6
6
|
var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
|
|
7
7
|
var _ShareButton = _interopRequireDefault(require("./ShareButton"));
|
|
8
|
-
it(
|
|
8
|
+
it('renders correctly', () => {
|
|
9
9
|
const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ShareButton.default, null)).toJSON();
|
|
10
|
-
expect(tree).toMatchInlineSnapshot("\n .c4 {\n -webkit-text-decoration: none;\n text-decoration: none;\n cursor: pointer;\n display: block;\n position: relative;\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n }\n\n .c4:hover,\n .c4:focus {\n opacity: 0.6;\n }\n\n .c5 {\n width: 100%;\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 -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n\n .c1 {\n width: auto;\n margin: 0 1rem 0 0;\n }\n\n .c1:first-child {\n margin-bottom: 0;\n }\n\n .c2 {\n width: auto;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .c3 {\n width: 40px;\n height: 40px;\n display: inline-block;\n margin: 0.5rem;\n }\n\n <div\n className=\"c0\"\n >\n <p\n className=\"c1\"\n >\n Share with:\n </p>\n <ul\n className=\"c2\"\n >\n <li\n className=\"c3\"\n >\n <a\n className=\"c4\"\n data-
|
|
10
|
+
expect(tree).toMatchInlineSnapshot("\n .c4 {\n -webkit-text-decoration: none;\n text-decoration: none;\n cursor: pointer;\n display: block;\n position: relative;\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n }\n\n .c4:hover,\n .c4:focus {\n opacity: 0.6;\n }\n\n .c5 {\n width: 100%;\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 -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n\n .c1 {\n width: auto;\n margin: 0 1rem 0 0;\n }\n\n .c1:first-child {\n margin-bottom: 0;\n }\n\n .c2 {\n width: auto;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .c3 {\n width: 40px;\n height: 40px;\n display: inline-block;\n margin: 0.5rem;\n }\n\n <div\n className=\"c0\"\n >\n <p\n className=\"c1\"\n >\n Share with:\n </p>\n <ul\n className=\"c2\"\n >\n <li\n className=\"c3\"\n >\n <a\n className=\"c4\"\n data-test=\"icon-share-button-facebook\"\n href=\"#\"\n onClick={[Function]}\n rel=\"noopener noreferrer\"\n role=\"button\"\n target=\"__blank\"\n title=\"Share on Facebook\"\n >\n <img\n alt=\"comicrelief\"\n className=\"c5\"\n src=\"mock.asset\"\n />\n </a>\n </li>\n <li\n className=\"c3\"\n >\n <a\n className=\"c4\"\n data-test=\"icon-share-button-twitter\"\n href=\"#\"\n onClick={[Function]}\n rel=\"noopener noreferrer\"\n role=\"button\"\n target=\"__blank\"\n title=\"Share on Twitter\"\n >\n <img\n alt=\"comicrelief\"\n className=\"c5\"\n src=\"mock.asset\"\n />\n </a>\n </li>\n </ul>\n </div>\n ");
|
|
11
11
|
});
|
|
@@ -559,7 +559,7 @@ exports[`renders correctly 1`] = `
|
|
|
559
559
|
>
|
|
560
560
|
<a
|
|
561
561
|
className="c5"
|
|
562
|
-
data-
|
|
562
|
+
data-test="icon-facebook"
|
|
563
563
|
href="https://www.facebook.com/comicrelief"
|
|
564
564
|
rel="noopener noreferrer"
|
|
565
565
|
target="_blank"
|
|
@@ -577,7 +577,7 @@ exports[`renders correctly 1`] = `
|
|
|
577
577
|
>
|
|
578
578
|
<a
|
|
579
579
|
className="c5"
|
|
580
|
-
data-
|
|
580
|
+
data-test="icon-instagram"
|
|
581
581
|
href="https://www.instagram.com/comicrelief"
|
|
582
582
|
rel="noopener noreferrer"
|
|
583
583
|
target="_blank"
|
|
@@ -595,7 +595,7 @@ exports[`renders correctly 1`] = `
|
|
|
595
595
|
>
|
|
596
596
|
<a
|
|
597
597
|
className="c5"
|
|
598
|
-
data-
|
|
598
|
+
data-test="icon-twitter"
|
|
599
599
|
href="https://twitter.com/comicrelief"
|
|
600
600
|
rel="noopener noreferrer"
|
|
601
601
|
target="_blank"
|
|
@@ -613,7 +613,7 @@ exports[`renders correctly 1`] = `
|
|
|
613
613
|
>
|
|
614
614
|
<a
|
|
615
615
|
className="c5"
|
|
616
|
-
data-
|
|
616
|
+
data-test="icon-youtube"
|
|
617
617
|
href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
|
|
618
618
|
rel="noopener noreferrer"
|
|
619
619
|
target="_blank"
|
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 {
|
|
@@ -103,7 +103,7 @@ const Icon = ({
|
|
|
103
103
|
{...restProps}
|
|
104
104
|
title={title}
|
|
105
105
|
rel="noopener noreferrer"
|
|
106
|
-
data-
|
|
106
|
+
data-test={`${isHeader ? 'header' : 'icon'}-${kebabCase(id)}`}
|
|
107
107
|
isHeader={isHeader}
|
|
108
108
|
>
|
|
109
109
|
<StyledImage src={icon} alt={brand} />
|
|
@@ -66,7 +66,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
|
|
|
66
66
|
>
|
|
67
67
|
<a
|
|
68
68
|
className="c2"
|
|
69
|
-
data-
|
|
69
|
+
data-test="icon-facebook"
|
|
70
70
|
href="https://www.facebook.com/comicrelief"
|
|
71
71
|
rel="noopener noreferrer"
|
|
72
72
|
target="_blank"
|
|
@@ -84,7 +84,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
|
|
|
84
84
|
>
|
|
85
85
|
<a
|
|
86
86
|
className="c2"
|
|
87
|
-
data-
|
|
87
|
+
data-test="icon-instagram"
|
|
88
88
|
href="https://www.instagram.com/comicrelief"
|
|
89
89
|
rel="noopener noreferrer"
|
|
90
90
|
target="_blank"
|
|
@@ -102,7 +102,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
|
|
|
102
102
|
>
|
|
103
103
|
<a
|
|
104
104
|
className="c2"
|
|
105
|
-
data-
|
|
105
|
+
data-test="icon-twitter"
|
|
106
106
|
href="https://twitter.com/comicrelief"
|
|
107
107
|
rel="noopener noreferrer"
|
|
108
108
|
target="_blank"
|
|
@@ -120,7 +120,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
|
|
|
120
120
|
>
|
|
121
121
|
<a
|
|
122
122
|
className="c2"
|
|
123
|
-
data-
|
|
123
|
+
data-test="icon-youtube"
|
|
124
124
|
href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
|
|
125
125
|
rel="noopener noreferrer"
|
|
126
126
|
target="_blank"
|
|
@@ -202,7 +202,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
|
|
|
202
202
|
>
|
|
203
203
|
<a
|
|
204
204
|
className="c2"
|
|
205
|
-
data-
|
|
205
|
+
data-test="icon-facebook"
|
|
206
206
|
href="https://www.facebook.com/rednoseday"
|
|
207
207
|
rel="noopener noreferrer"
|
|
208
208
|
target="_self"
|
|
@@ -220,7 +220,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
|
|
|
220
220
|
>
|
|
221
221
|
<a
|
|
222
222
|
className="c2"
|
|
223
|
-
data-
|
|
223
|
+
data-test="icon-instagram"
|
|
224
224
|
href="https://www.instagram.com/rednoseday"
|
|
225
225
|
rel="noopener noreferrer"
|
|
226
226
|
target="_self"
|
|
@@ -238,7 +238,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
|
|
|
238
238
|
>
|
|
239
239
|
<a
|
|
240
240
|
className="c2"
|
|
241
|
-
data-
|
|
241
|
+
data-test="icon-twitter"
|
|
242
242
|
href="https://twitter.com/rednoseday"
|
|
243
243
|
rel="noopener noreferrer"
|
|
244
244
|
target="_self"
|
|
@@ -256,7 +256,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
|
|
|
256
256
|
>
|
|
257
257
|
<a
|
|
258
258
|
className="c2"
|
|
259
|
-
data-
|
|
259
|
+
data-test="icon-youtube"
|
|
260
260
|
href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
|
|
261
261
|
rel="noopener noreferrer"
|
|
262
262
|
target="_self"
|
|
@@ -338,7 +338,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
|
|
|
338
338
|
>
|
|
339
339
|
<a
|
|
340
340
|
className="c2"
|
|
341
|
-
data-
|
|
341
|
+
data-test="icon-facebook"
|
|
342
342
|
href="https://www.facebook.com/sportrelief"
|
|
343
343
|
rel="noopener noreferrer"
|
|
344
344
|
target="_blank"
|
|
@@ -356,7 +356,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
|
|
|
356
356
|
>
|
|
357
357
|
<a
|
|
358
358
|
className="c2"
|
|
359
|
-
data-
|
|
359
|
+
data-test="icon-instagram"
|
|
360
360
|
href="https://www.instagram.com/sportrelief"
|
|
361
361
|
rel="noopener noreferrer"
|
|
362
362
|
target="_blank"
|
|
@@ -374,7 +374,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
|
|
|
374
374
|
>
|
|
375
375
|
<a
|
|
376
376
|
className="c2"
|
|
377
|
-
data-
|
|
377
|
+
data-test="icon-twitter"
|
|
378
378
|
href="https://twitter.com/sportrelief"
|
|
379
379
|
rel="noopener noreferrer"
|
|
380
380
|
target="_blank"
|
|
@@ -392,7 +392,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
|
|
|
392
392
|
>
|
|
393
393
|
<a
|
|
394
394
|
className="c2"
|
|
395
|
-
data-
|
|
395
|
+
data-test="icon-youtube"
|
|
396
396
|
href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
|
|
397
397
|
rel="noopener noreferrer"
|
|
398
398
|
target="_blank"
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import
|
|
3
|
-
import renderWithTheme from
|
|
4
|
-
import ShareButton from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import 'jest-styled-components';
|
|
3
|
+
import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
|
|
4
|
+
import ShareButton from './ShareButton';
|
|
5
5
|
|
|
6
|
-
it(
|
|
6
|
+
it('renders correctly', () => {
|
|
7
7
|
const tree = renderWithTheme(<ShareButton />).toJSON();
|
|
8
8
|
|
|
9
9
|
expect(tree).toMatchInlineSnapshot(`
|
|
@@ -80,7 +80,7 @@ it("renders correctly", () => {
|
|
|
80
80
|
>
|
|
81
81
|
<a
|
|
82
82
|
className="c4"
|
|
83
|
-
data-
|
|
83
|
+
data-test="icon-share-button-facebook"
|
|
84
84
|
href="#"
|
|
85
85
|
onClick={[Function]}
|
|
86
86
|
rel="noopener noreferrer"
|
|
@@ -100,7 +100,7 @@ it("renders correctly", () => {
|
|
|
100
100
|
>
|
|
101
101
|
<a
|
|
102
102
|
className="c4"
|
|
103
|
-
data-
|
|
103
|
+
data-test="icon-share-button-twitter"
|
|
104
104
|
href="#"
|
|
105
105
|
onClick={[Function]}
|
|
106
106
|
rel="noopener noreferrer"
|
|
@@ -559,7 +559,7 @@ exports[`renders correctly 1`] = `
|
|
|
559
559
|
>
|
|
560
560
|
<a
|
|
561
561
|
className="c5"
|
|
562
|
-
data-
|
|
562
|
+
data-test="icon-facebook"
|
|
563
563
|
href="https://www.facebook.com/comicrelief"
|
|
564
564
|
rel="noopener noreferrer"
|
|
565
565
|
target="_blank"
|
|
@@ -577,7 +577,7 @@ exports[`renders correctly 1`] = `
|
|
|
577
577
|
>
|
|
578
578
|
<a
|
|
579
579
|
className="c5"
|
|
580
|
-
data-
|
|
580
|
+
data-test="icon-instagram"
|
|
581
581
|
href="https://www.instagram.com/comicrelief"
|
|
582
582
|
rel="noopener noreferrer"
|
|
583
583
|
target="_blank"
|
|
@@ -595,7 +595,7 @@ exports[`renders correctly 1`] = `
|
|
|
595
595
|
>
|
|
596
596
|
<a
|
|
597
597
|
className="c5"
|
|
598
|
-
data-
|
|
598
|
+
data-test="icon-twitter"
|
|
599
599
|
href="https://twitter.com/comicrelief"
|
|
600
600
|
rel="noopener noreferrer"
|
|
601
601
|
target="_blank"
|
|
@@ -613,7 +613,7 @@ exports[`renders correctly 1`] = `
|
|
|
613
613
|
>
|
|
614
614
|
<a
|
|
615
615
|
className="c5"
|
|
616
|
-
data-
|
|
616
|
+
data-test="icon-youtube"
|
|
617
617
|
href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
|
|
618
618
|
rel="noopener noreferrer"
|
|
619
619
|
target="_blank"
|