@comicrelief/component-library 6.1.2 → 6.1.4
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/.eslintrc +2 -1
- package/dist/components/Atoms/Logo/Logo.js +3 -3
- package/dist/components/Atoms/Logo/Logo.test.js +2 -2
- package/dist/components/Atoms/RadioButton/RadioButton.js +1 -1
- package/dist/components/Atoms/RadioButton/RadioButton.test.js +1 -1
- package/dist/components/Organisms/Footer/__snapshots__/Footer.test.js.snap +1 -0
- package/dist/components/Organisms/Header/Header.style.js +1 -1
- package/package.json +1 -1
- package/src/components/Atoms/Logo/Logo.js +3 -2
- package/src/components/Atoms/Logo/Logo.test.js +8 -7
- package/src/components/Atoms/RadioButton/RadioButton.js +1 -0
- package/src/components/Atoms/RadioButton/RadioButton.test.js +6 -0
- package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap +1 -0
- package/src/components/Organisms/Header/Header.style.js +1 -1
package/.eslintrc
CHANGED
|
@@ -33,7 +33,7 @@ var Image = _styledComponents.default.img.withConfig({
|
|
|
33
33
|
var LogoWrapper = _styledComponents.default.div.withConfig({
|
|
34
34
|
displayName: "Logo__LogoWrapper",
|
|
35
35
|
componentId: "sc-18yiye8-1"
|
|
36
|
-
})(["display:inline-block;", " width:", ";transform:", ";@media ", "{width:", ";}"], (0, _zIndex.default)('high'), function (props) {
|
|
36
|
+
})(["display:inline-block;", " width:", ";transform:", ";vertical-align:bottom;@media ", "{width:", ";}"], (0, _zIndex.default)('high'), function (props) {
|
|
37
37
|
return props.sizeSm;
|
|
38
38
|
}, function (props) {
|
|
39
39
|
return props.rotate ? 'rotate(-14deg)' : 'inherit';
|
|
@@ -74,8 +74,8 @@ var Logo = function Logo(_ref2) {
|
|
|
74
74
|
|
|
75
75
|
Logo.defaultProps = {
|
|
76
76
|
rotate: false,
|
|
77
|
-
sizeSm: '
|
|
78
|
-
sizeMd: '
|
|
77
|
+
sizeSm: '75px',
|
|
78
|
+
sizeMd: '75px',
|
|
79
79
|
campaign: 'Comic Relief'
|
|
80
80
|
};
|
|
81
81
|
var _default = Logo;
|
|
@@ -10,9 +10,9 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
|
|
|
10
10
|
|
|
11
11
|
var _Logo = _interopRequireDefault(require("./Logo"));
|
|
12
12
|
|
|
13
|
-
it(
|
|
13
|
+
it("renders correctly", function () {
|
|
14
14
|
var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Logo.default, {
|
|
15
15
|
rotate: true
|
|
16
16
|
})).toJSON();
|
|
17
|
-
expect(tree).toMatchInlineSnapshot("\n .c1 {\n object-fit: cover;\n width: 100%;\n display: block;\n height: auto;\n margin-right: 1rem;\n }\n\n .c0 {\n display: inline-block;\n z-index: 3;\n width:
|
|
17
|
+
expect(tree).toMatchInlineSnapshot("\n .c1 {\n object-fit: cover;\n width: 100%;\n display: block;\n height: auto;\n margin-right: 1rem;\n }\n\n .c0 {\n display: inline-block;\n z-index: 3;\n width: 75px;\n -webkit-transform: rotate(-14deg);\n -ms-transform: rotate(-14deg);\n transform: rotate(-14deg);\n vertical-align: bottom;\n }\n\n @media (min-width:1150px) {\n .c0 {\n width: 75px;\n }\n }\n\n <div\n className=\"c0\"\n rotate={1}\n >\n <img\n alt=\"Comic Relief logo\"\n className=\"c1\"\n src=\"mock.asset\"\n />\n </div>\n ");
|
|
18
18
|
});
|
|
@@ -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
|
});
|
|
@@ -35,7 +35,7 @@ exports.HeaderWrapper = HeaderWrapper;
|
|
|
35
35
|
var InnerWrapper = _styledComponents.default.div.withConfig({
|
|
36
36
|
displayName: "Headerstyle__InnerWrapper",
|
|
37
37
|
componentId: "sc-11ghppe-1"
|
|
38
|
-
})(["display:flex;align-items:center;height:100%;padding:0
|
|
38
|
+
})(["display:flex;align-items:center;height:100%;padding:0;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _size.container.large, function (_ref3) {
|
|
39
39
|
var theme = _ref3.theme;
|
|
40
40
|
return theme.breakpoint('nav');
|
|
41
41
|
});
|
package/package.json
CHANGED
|
@@ -25,6 +25,7 @@ const LogoWrapper = styled.div`
|
|
|
25
25
|
${zIndex('high')}
|
|
26
26
|
width: ${props => props.sizeSm};
|
|
27
27
|
transform: ${props => (props.rotate ? 'rotate(-14deg)' : 'inherit')};
|
|
28
|
+
vertical-align: bottom; // height fix
|
|
28
29
|
@media ${({ theme }) => theme.breakpoint('nav')} {
|
|
29
30
|
width: ${props => props.sizeMd};
|
|
30
31
|
}
|
|
@@ -66,8 +67,8 @@ Logo.propTypes = {
|
|
|
66
67
|
|
|
67
68
|
Logo.defaultProps = {
|
|
68
69
|
rotate: false,
|
|
69
|
-
sizeSm: '
|
|
70
|
-
sizeMd: '
|
|
70
|
+
sizeSm: '75px',
|
|
71
|
+
sizeMd: '75px',
|
|
71
72
|
campaign: 'Comic Relief'
|
|
72
73
|
};
|
|
73
74
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import
|
|
3
|
-
import renderWithTheme from
|
|
4
|
-
import Logo from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "jest-styled-components";
|
|
3
|
+
import renderWithTheme from "../../../hoc/shallowWithTheme";
|
|
4
|
+
import Logo from "./Logo";
|
|
5
5
|
|
|
6
|
-
it(
|
|
6
|
+
it("renders correctly", () => {
|
|
7
7
|
const tree = renderWithTheme(<Logo rotate />).toJSON();
|
|
8
8
|
|
|
9
9
|
expect(tree).toMatchInlineSnapshot(`
|
|
@@ -18,15 +18,16 @@ it('renders correctly', () => {
|
|
|
18
18
|
.c0 {
|
|
19
19
|
display: inline-block;
|
|
20
20
|
z-index: 3;
|
|
21
|
-
width:
|
|
21
|
+
width: 75px;
|
|
22
22
|
-webkit-transform: rotate(-14deg);
|
|
23
23
|
-ms-transform: rotate(-14deg);
|
|
24
24
|
transform: rotate(-14deg);
|
|
25
|
+
vertical-align: bottom;
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
@media (min-width:1150px) {
|
|
28
29
|
.c0 {
|
|
29
|
-
width:
|
|
30
|
+
width: 75px;
|
|
30
31
|
}
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -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 {
|