@comicrelief/component-library 8.1.2 → 8.2.1
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 +1 -0
- package/dist/components/Atoms/Button/Button.js +3 -7
- package/dist/components/Atoms/ButtonWithStates/ButtonWithStates.js +3 -8
- package/dist/components/Atoms/Checkbox/Checkbox.js +2 -6
- package/dist/components/Atoms/Confetti/Confetti.js +2 -5
- package/dist/components/Atoms/Icons/Arrow.js +4 -10
- package/dist/components/Atoms/Icons/AtSign.js +3 -8
- package/dist/components/Atoms/Icons/Chevron.js +4 -10
- package/dist/components/Atoms/Icons/Download.js +3 -8
- package/dist/components/Atoms/Icons/External.js +3 -8
- package/dist/components/Atoms/Icons/Favourite.js +3 -8
- package/dist/components/Atoms/Icons/Internal.js +3 -8
- package/dist/components/Atoms/Input/Input.js +9 -17
- package/dist/components/Atoms/Label/Label.js +3 -12
- package/dist/components/Atoms/Link/Link.js +9 -18
- package/dist/components/Atoms/Logo/Logo.js +4 -11
- package/dist/components/Atoms/Pagination/Pagination.js +39 -52
- package/dist/components/Atoms/Picture/Picture.js +10 -22
- package/dist/components/Atoms/RichText/RichText.js +2 -6
- package/dist/components/Atoms/Select/Select.js +6 -16
- package/dist/components/Atoms/SocialIcons/SocialIcons.js +2 -3
- package/dist/components/Atoms/Text/Text.js +12 -17
- package/dist/components/Atoms/TextArea/TextArea.js +6 -11
- package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js +2 -9
- package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.js +8 -18
- package/dist/components/Molecules/Banner/Banner.js +1 -4
- package/dist/components/Molecules/Box/Box.js +6 -17
- package/dist/components/Molecules/Card/Card.js +11 -24
- package/dist/components/Molecules/CardDs/CardDs.js +11 -24
- package/dist/components/Molecules/Chip/Chip.js +2 -6
- package/dist/components/Molecules/Countdown/Countdown.js +3 -8
- package/dist/components/Molecules/Logos/Logos.js +1 -4
- package/dist/components/Molecules/Lookup/Lookup.js +2 -6
- package/dist/components/Molecules/Promo/Promo.js +17 -36
- package/dist/components/Molecules/SchoolLookup/SchoolLookup.js +4 -10
- package/dist/components/Molecules/SearchInput/SearchInput.js +1 -4
- package/dist/components/Molecules/SearchResult/SearchResult.js +8 -17
- package/dist/components/Molecules/ShareButton/ShareButton.js +3 -8
- package/dist/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.js +1 -4
- package/dist/components/Molecules/SingleMessage/SingleMessage.js +15 -32
- package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.js +13 -28
- package/dist/components/Molecules/Typeahead/Typeahead.js +3 -8
- package/dist/components/Molecules/VideoBanner/VideoBanner.js +5 -12
- package/dist/components/Organisms/Donate/Donate.js +31 -65
- package/dist/components/Organisms/Donate/Form/Form.js +6 -19
- package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.js +1 -4
- package/dist/components/Organisms/Donate/MoneyBuy/MoneyBuy.js +3 -8
- package/dist/components/Organisms/EmailSignUp/_EmailSignUp.js +4 -9
- package/dist/components/Organisms/EmailSignUp/_TextInput.js +3 -8
- package/dist/components/Organisms/Footer/Footer.js +6 -11
- package/dist/components/Organisms/Footer/Nav/Nav.js +1 -4
- package/dist/components/Organisms/Header/Header.js +2 -6
- package/dist/components/Organisms/Header/Nav/Nav.js +1 -4
- package/dist/components/Organisms/ImpactSlider/ImpactSlider.js +3 -8
- package/dist/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js +2 -6
- package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js +6 -16
- package/dist/components/Organisms/MarketingPreferencesDS/_TextInput.js +3 -8
- package/dist/components/Organisms/Membership/Form/Form.js +1 -5
- package/dist/components/Organisms/Membership/Membership.js +9 -19
- package/dist/components/Organisms/Membership/MoneyBox/MoneyBox.js +3 -8
- package/docs/utils.md +11 -16
- package/package.json +1 -1
- package/src/components/Atoms/Button/Button.js +3 -8
- package/src/components/Atoms/ButtonWithStates/ButtonWithStates.js +1 -7
- package/src/components/Atoms/Checkbox/Checkbox.js +1 -6
- package/src/components/Atoms/Confetti/Confetti.js +1 -5
- package/src/components/Atoms/Icons/Arrow.js +1 -8
- package/src/components/Atoms/Icons/AtSign.js +1 -7
- package/src/components/Atoms/Icons/Chevron.js +1 -8
- package/src/components/Atoms/Icons/Download.js +1 -7
- package/src/components/Atoms/Icons/External.js +1 -7
- package/src/components/Atoms/Icons/Favourite.js +1 -7
- package/src/components/Atoms/Icons/Internal.js +1 -7
- package/src/components/Atoms/Input/Input.js +9 -18
- package/src/components/Atoms/Label/Label.js +3 -13
- package/src/components/Atoms/Link/Link.js +9 -19
- package/src/components/Atoms/Logo/Logo.js +1 -8
- package/src/components/Atoms/Pagination/Pagination.js +38 -51
- package/src/components/Atoms/Picture/Picture.js +10 -23
- package/src/components/Atoms/RichText/RichText.js +1 -6
- package/src/components/Atoms/Select/Select.js +6 -17
- package/src/components/Atoms/SocialIcons/SocialIcons.js +2 -5
- package/src/components/Atoms/Text/Text.js +4 -13
- package/src/components/Atoms/TextArea/TextArea.js +2 -9
- package/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js +2 -11
- package/src/components/Molecules/ArticleTeaser/ArticleTeaser.js +8 -19
- package/src/components/Molecules/Banner/Banner.js +1 -5
- package/src/components/Molecules/Box/Box.js +6 -18
- package/src/components/Molecules/Card/Card.js +11 -25
- package/src/components/Molecules/CardDs/CardDs.js +11 -25
- package/src/components/Molecules/Chip/Chip.js +1 -6
- package/src/components/Molecules/Countdown/Countdown.js +1 -7
- package/src/components/Molecules/Logos/Logos.js +1 -5
- package/src/components/Molecules/Lookup/Lookup.js +2 -7
- package/src/components/Molecules/Promo/Promo.js +17 -37
- package/src/components/Molecules/SchoolLookup/SchoolLookup.js +4 -11
- package/src/components/Molecules/SearchInput/SearchInput.js +1 -5
- package/src/components/Molecules/SearchResult/SearchResult.js +8 -18
- package/src/components/Molecules/ShareButton/ShareButton.js +1 -7
- package/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.js +4 -5
- package/src/components/Molecules/SingleMessage/SingleMessage.js +15 -33
- package/src/components/Molecules/SingleMessageDS/SingleMessageDs.js +13 -29
- package/src/components/Molecules/Typeahead/Typeahead.js +3 -9
- package/src/components/Molecules/VideoBanner/VideoBanner.js +7 -9
- package/src/components/Organisms/Donate/Donate.js +32 -67
- package/src/components/Organisms/Donate/Form/Form.js +6 -22
- package/src/components/Organisms/Donate/GivingSelector/GivingSelector.js +1 -5
- package/src/components/Organisms/Donate/MoneyBuy/MoneyBuy.js +3 -9
- package/src/components/Organisms/EmailSignUp/_EmailSignUp.js +3 -9
- package/src/components/Organisms/EmailSignUp/_TextInput.js +3 -9
- package/src/components/Organisms/Footer/Footer.js +2 -10
- package/src/components/Organisms/Footer/Nav/Nav.js +1 -5
- package/src/components/Organisms/Header/Header.js +1 -6
- package/src/components/Organisms/Header/Nav/Nav.js +1 -5
- package/src/components/Organisms/ImpactSlider/ImpactSlider.js +1 -7
- package/src/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js +1 -6
- package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js +5 -17
- package/src/components/Organisms/MarketingPreferencesDS/_TextInput.js +1 -7
- package/src/components/Organisms/Membership/Form/Form.js +1 -5
- package/src/components/Organisms/Membership/Membership.js +9 -19
- package/src/components/Organisms/Membership/MoneyBox/MoneyBox.js +3 -9
package/.eslintrc
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"exceptions": [""]
|
|
16
16
|
}],
|
|
17
17
|
"arrow-parens": [2, "as-needed", { "requireForBlockBody": false }],
|
|
18
|
+
"react/require-default-props": "off",
|
|
18
19
|
"react-hooks/rules-of-hooks": "error",
|
|
19
20
|
"react-hooks/exhaustive-deps": "warn",
|
|
20
21
|
"react/jsx-filename-extension": "off",
|
|
@@ -37,7 +37,7 @@ const StyledButton = _styledComponents.default.button.withConfig({
|
|
|
37
37
|
const Button = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
|
|
38
38
|
let {
|
|
39
39
|
children,
|
|
40
|
-
wrapper,
|
|
40
|
+
wrapper = false,
|
|
41
41
|
...rest
|
|
42
42
|
} = _ref5;
|
|
43
43
|
return /*#__PURE__*/_react.default.createElement(StyledButton, Object.assign({}, rest, {
|
|
@@ -46,11 +46,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
|
|
|
46
46
|
}), children);
|
|
47
47
|
});
|
|
48
48
|
Button.propTypes = {
|
|
49
|
-
|
|
50
|
-
wrapper: _propTypes.default.bool
|
|
51
|
-
children: _propTypes.default.node.isRequired
|
|
52
|
-
};
|
|
53
|
-
Button.defaultProps = {
|
|
54
|
-
wrapper: false
|
|
49
|
+
children: _propTypes.default.node.isRequired,
|
|
50
|
+
wrapper: _propTypes.default.bool // Buttons as span
|
|
55
51
|
};
|
|
56
52
|
var _default = exports.default = Button;
|
|
@@ -29,9 +29,9 @@ const LoaderContainer = _styledComponents.default.div.withConfig({
|
|
|
29
29
|
const ButtonWithStates = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
|
|
30
30
|
let {
|
|
31
31
|
children,
|
|
32
|
-
loadingText,
|
|
33
|
-
loading,
|
|
34
|
-
disabled,
|
|
32
|
+
loadingText = 'Loading',
|
|
33
|
+
loading = false,
|
|
34
|
+
disabled = false,
|
|
35
35
|
...rest
|
|
36
36
|
} = _ref2;
|
|
37
37
|
const [loaderColour, setLoaderColour] = (0, _react.useState)(null);
|
|
@@ -63,9 +63,4 @@ const ButtonWithStates = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
|
|
|
63
63
|
color: loaderColour
|
|
64
64
|
})));
|
|
65
65
|
});
|
|
66
|
-
ButtonWithStates.defaultProps = {
|
|
67
|
-
loading: false,
|
|
68
|
-
disabled: false,
|
|
69
|
-
loadingText: 'Loading'
|
|
70
|
-
};
|
|
71
66
|
var _default = exports.default = ButtonWithStates;
|
|
@@ -62,9 +62,9 @@ const Label = _styledComponents.default.label.withConfig({
|
|
|
62
62
|
});
|
|
63
63
|
const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
|
|
64
64
|
let {
|
|
65
|
-
label,
|
|
65
|
+
label = undefined,
|
|
66
66
|
value,
|
|
67
|
-
children,
|
|
67
|
+
children = undefined,
|
|
68
68
|
...rest
|
|
69
69
|
} = _ref9;
|
|
70
70
|
return /*#__PURE__*/_react.default.createElement(Label, {
|
|
@@ -82,8 +82,4 @@ Checkbox.propTypes = {
|
|
|
82
82
|
label: _propTypes.default.string,
|
|
83
83
|
children: _propTypes.default.node
|
|
84
84
|
};
|
|
85
|
-
Checkbox.defaultProps = {
|
|
86
|
-
label: undefined,
|
|
87
|
-
children: undefined
|
|
88
|
-
};
|
|
89
85
|
var _default = exports.default = Checkbox;
|
|
@@ -35,7 +35,7 @@ function getAnimationSettings(originXA, originXB) {
|
|
|
35
35
|
function Confetti(_ref) {
|
|
36
36
|
let {
|
|
37
37
|
trigger,
|
|
38
|
-
duration
|
|
38
|
+
duration = 3000
|
|
39
39
|
} = _ref;
|
|
40
40
|
const refAnimationInstance = (0, _react.useRef)(null);
|
|
41
41
|
const [intervalId, setIntervalId] = (0, _react.useState)();
|
|
@@ -91,7 +91,4 @@ function Confetti(_ref) {
|
|
|
91
91
|
refConfetti: getInstance,
|
|
92
92
|
style: canvasStyles
|
|
93
93
|
}));
|
|
94
|
-
}
|
|
95
|
-
Confetti.defaultProps = {
|
|
96
|
-
duration: 3000
|
|
97
|
-
};
|
|
94
|
+
}
|
|
@@ -43,11 +43,11 @@ const Icon = _styledComponents.default.svg.withConfig({
|
|
|
43
43
|
});
|
|
44
44
|
const Arrow = _ref5 => {
|
|
45
45
|
let {
|
|
46
|
-
colour,
|
|
47
|
-
mobileColour,
|
|
46
|
+
colour = 'white',
|
|
47
|
+
mobileColour = null,
|
|
48
48
|
theme,
|
|
49
|
-
size,
|
|
50
|
-
direction,
|
|
49
|
+
size = 24,
|
|
50
|
+
direction = 'up',
|
|
51
51
|
...rest
|
|
52
52
|
} = _ref5;
|
|
53
53
|
return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
|
|
@@ -64,10 +64,4 @@ const Arrow = _ref5 => {
|
|
|
64
64
|
d: "m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
|
|
65
65
|
}));
|
|
66
66
|
};
|
|
67
|
-
Arrow.defaultProps = {
|
|
68
|
-
colour: 'white',
|
|
69
|
-
mobileColour: null,
|
|
70
|
-
size: 24,
|
|
71
|
-
direction: 'up'
|
|
72
|
-
};
|
|
73
67
|
var _default = exports.default = (0, _styledComponents.withTheme)(Arrow);
|
|
@@ -34,9 +34,9 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
|
|
|
34
34
|
const AtSign = _ref4 => {
|
|
35
35
|
let {
|
|
36
36
|
theme,
|
|
37
|
-
size,
|
|
38
|
-
colour,
|
|
39
|
-
mobileColour,
|
|
37
|
+
size = 24,
|
|
38
|
+
colour = 'white',
|
|
39
|
+
mobileColour = null,
|
|
40
40
|
...rest
|
|
41
41
|
} = _ref4;
|
|
42
42
|
return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({
|
|
@@ -49,9 +49,4 @@ const AtSign = _ref4 => {
|
|
|
49
49
|
d: PATH_DATA
|
|
50
50
|
}));
|
|
51
51
|
};
|
|
52
|
-
AtSign.defaultProps = {
|
|
53
|
-
size: 24,
|
|
54
|
-
colour: 'white',
|
|
55
|
-
mobileColour: null
|
|
56
|
-
};
|
|
57
52
|
var _default = exports.default = (0, _styledComponents.withTheme)(AtSign);
|
|
@@ -43,11 +43,11 @@ const Icon = _styledComponents.default.svg.withConfig({
|
|
|
43
43
|
});
|
|
44
44
|
const Chevron = _ref5 => {
|
|
45
45
|
let {
|
|
46
|
-
colour,
|
|
47
|
-
mobileColour,
|
|
46
|
+
colour = 'white',
|
|
47
|
+
mobileColour = null,
|
|
48
48
|
theme,
|
|
49
|
-
size,
|
|
50
|
-
direction,
|
|
49
|
+
size = 24,
|
|
50
|
+
direction = 'up',
|
|
51
51
|
...rest
|
|
52
52
|
} = _ref5;
|
|
53
53
|
return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
|
|
@@ -63,10 +63,4 @@ const Chevron = _ref5 => {
|
|
|
63
63
|
d: "M40 33a1.992 1.992 0 01-1.414-.586L24 17.829 9.414 32.414a2 2 0 11-2.828-2.828l16-16a2 2 0 012.828 0l16 16A2 2 0 0140 33z"
|
|
64
64
|
}));
|
|
65
65
|
};
|
|
66
|
-
Chevron.defaultProps = {
|
|
67
|
-
colour: 'white',
|
|
68
|
-
mobileColour: null,
|
|
69
|
-
size: 24,
|
|
70
|
-
direction: 'up'
|
|
71
|
-
};
|
|
72
66
|
var _default = exports.default = (0, _styledComponents.withTheme)(Chevron);
|
|
@@ -32,10 +32,10 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
|
|
|
32
32
|
});
|
|
33
33
|
const Download = _ref4 => {
|
|
34
34
|
let {
|
|
35
|
-
colour,
|
|
36
|
-
mobileColour,
|
|
35
|
+
colour = 'white',
|
|
36
|
+
mobileColour = null,
|
|
37
37
|
theme,
|
|
38
|
-
size,
|
|
38
|
+
size = 24,
|
|
39
39
|
...rest
|
|
40
40
|
} = _ref4;
|
|
41
41
|
return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
|
|
@@ -50,9 +50,4 @@ const Download = _ref4 => {
|
|
|
50
50
|
d: "M17.171 38.829a4 4 0 015.657-5.657L44 54.343V8a4 4 0 018 0v46.343l21.172-21.172a4 4 0 115.656 5.657l-28 28-.005.004a3.976 3.976 0 01-.604.493c-.101.068-.211.115-.317.172-.123.067-.241.141-.372.195-.133.055-.273.087-.41.127-.113.033-.22.077-.337.1a3.89 3.89 0 01-1.566.002c-.116-.023-.224-.067-.336-.1-.138-.04-.277-.072-.411-.128-.13-.054-.248-.128-.37-.195-.106-.058-.216-.105-.318-.173a4.037 4.037 0 01-.604-.493l-.005-.004-28.002-27.999zM84 68a4 4 0 00-4 4v12H16V72a4 4 0 00-8 0v16a4 4 0 004 4h72a4 4 0 004-4V72a4 4 0 00-4-4z"
|
|
51
51
|
}));
|
|
52
52
|
};
|
|
53
|
-
Download.defaultProps = {
|
|
54
|
-
colour: 'white',
|
|
55
|
-
mobileColour: null,
|
|
56
|
-
size: 24
|
|
57
|
-
};
|
|
58
53
|
var _default = exports.default = (0, _styledComponents.withTheme)(Download);
|
|
@@ -32,10 +32,10 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
|
|
|
32
32
|
});
|
|
33
33
|
const External = _ref4 => {
|
|
34
34
|
let {
|
|
35
|
-
colour,
|
|
36
|
-
mobileColour,
|
|
35
|
+
colour = 'white',
|
|
36
|
+
mobileColour = null,
|
|
37
37
|
theme,
|
|
38
|
-
size,
|
|
38
|
+
size = 24,
|
|
39
39
|
...rest
|
|
40
40
|
} = _ref4;
|
|
41
41
|
return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
|
|
@@ -50,9 +50,4 @@ const External = _ref4 => {
|
|
|
50
50
|
d: "M92 8.001V48a4 4 0 01-8 0V17.657L50.899 50.758c-.781.781-1.805 1.171-2.829 1.171s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 12H48a4 4 0 010-8h40c.016 0 .032.005.048.005.246.003.492.026.734.074.121.024.233.069.35.104.133.039.268.07.397.123.132.055.253.13.377.198.104.057.212.103.312.169.201.134.386.289.559.456.016.016.035.026.051.042.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327.052.259.08.522.08.785zM72 68a4 4 0 00-4 4v12H12V28h12a4 4 0 000-8H8a4 4 0 00-4 4v64a4 4 0 004 4h64a4 4 0 004-4V72a4 4 0 00-4-4z"
|
|
51
51
|
}));
|
|
52
52
|
};
|
|
53
|
-
External.defaultProps = {
|
|
54
|
-
colour: 'white',
|
|
55
|
-
mobileColour: null,
|
|
56
|
-
size: 24
|
|
57
|
-
};
|
|
58
53
|
var _default = exports.default = (0, _styledComponents.withTheme)(External);
|
|
@@ -32,10 +32,10 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
|
|
|
32
32
|
});
|
|
33
33
|
const Favourite = _ref4 => {
|
|
34
34
|
let {
|
|
35
|
-
colour,
|
|
36
|
-
mobileColour,
|
|
35
|
+
colour = 'white',
|
|
36
|
+
mobileColour = null,
|
|
37
37
|
theme,
|
|
38
|
-
size,
|
|
38
|
+
size = 24,
|
|
39
39
|
...rest
|
|
40
40
|
} = _ref4;
|
|
41
41
|
return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
|
|
@@ -50,9 +50,4 @@ const Favourite = _ref4 => {
|
|
|
50
50
|
d: "M74.295 8.47C64.301 6.55 54.06 10.592 48 18.198 41.94 10.592 31.698 6.55 21.705 8.47 12.179 10.304 2 18.229 2 34.973 2 52.345 19.988 67.357 34.442 79.42c4.113 3.432 7.997 6.674 10.729 9.407l.001.001.001.001c.091.091.196.159.294.24.111.092.216.195.333.272.095.063.199.103.298.157.132.072.26.153.397.209.142.058.291.089.438.13.102.028.2.07.303.09a4.003 4.003 0 001.528 0l.012-.003c.5-.098.985-.292 1.426-.583l.021-.017c.213-.143.417-.306.605-.494l.001-.001.001-.001c2.732-2.733 6.616-5.975 10.729-9.407C76.012 67.357 94 52.345 94 34.973 94 18.229 83.821 10.304 74.295 8.47zM56.432 73.278c-3.029 2.528-5.93 4.952-8.432 7.219-2.502-2.267-5.403-4.692-8.432-7.219C27.09 62.864 10 48.602 10 34.973c0-14.534 9.243-17.882 13.216-18.647 7.468-1.438 17.384 1.981 21.047 11.146a3.987 3.987 0 003.017 2.443c.065.012.129.014.193.023.175.023.35.043.528.042.17.001.336-.019.502-.04.073-.01.146-.012.219-.026a3.99 3.99 0 003.014-2.442c3.663-9.165 13.578-12.584 21.047-11.146C76.757 17.091 86 20.439 86 34.973c0 13.629-17.09 27.891-29.568 38.305z"
|
|
51
51
|
}));
|
|
52
52
|
};
|
|
53
|
-
Favourite.defaultProps = {
|
|
54
|
-
colour: 'white',
|
|
55
|
-
mobileColour: null,
|
|
56
|
-
size: 24
|
|
57
|
-
};
|
|
58
53
|
var _default = exports.default = (0, _styledComponents.withTheme)(Favourite);
|
|
@@ -32,10 +32,10 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
|
|
|
32
32
|
});
|
|
33
33
|
const Internal = _ref4 => {
|
|
34
34
|
let {
|
|
35
|
-
colour,
|
|
36
|
-
mobileColour,
|
|
35
|
+
colour = 'white',
|
|
36
|
+
mobileColour = null,
|
|
37
37
|
theme,
|
|
38
|
-
size,
|
|
38
|
+
size = 24,
|
|
39
39
|
...rest
|
|
40
40
|
} = _ref4;
|
|
41
41
|
return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
|
|
@@ -50,9 +50,4 @@ const Internal = _ref4 => {
|
|
|
50
50
|
d: "M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z"
|
|
51
51
|
}));
|
|
52
52
|
};
|
|
53
|
-
Internal.defaultProps = {
|
|
54
|
-
colour: 'white',
|
|
55
|
-
mobileColour: null,
|
|
56
|
-
size: 24
|
|
57
|
-
};
|
|
58
53
|
var _default = exports.default = (0, _styledComponents.withTheme)(Internal);
|
|
@@ -52,16 +52,17 @@ const Prefix = _styledComponents.default.div.withConfig({
|
|
|
52
52
|
});
|
|
53
53
|
const Input = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
|
|
54
54
|
let {
|
|
55
|
-
errorMsg,
|
|
55
|
+
errorMsg = '',
|
|
56
56
|
id,
|
|
57
57
|
label,
|
|
58
|
-
showLabel,
|
|
58
|
+
showLabel = true,
|
|
59
59
|
type,
|
|
60
|
-
hasAria,
|
|
61
|
-
className,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
hasAria = true,
|
|
61
|
+
className = '',
|
|
62
|
+
placeholder = '',
|
|
63
|
+
labelProps = {},
|
|
64
|
+
prefix = '',
|
|
65
|
+
optional = null,
|
|
65
66
|
...rest
|
|
66
67
|
} = _ref5;
|
|
67
68
|
return /*#__PURE__*/_react.default.createElement(_Label.default, Object.assign({
|
|
@@ -76,6 +77,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
|
|
|
76
77
|
}, prefix), /*#__PURE__*/_react.default.createElement(InputField, Object.assign({
|
|
77
78
|
id: id,
|
|
78
79
|
type: type,
|
|
80
|
+
placeholder: placeholder,
|
|
79
81
|
error: !!errorMsg,
|
|
80
82
|
"aria-describedby": hasAria ? id : undefined,
|
|
81
83
|
ref: ref,
|
|
@@ -107,14 +109,4 @@ Input.propTypes = {
|
|
|
107
109
|
prefix: _propTypes.default.string,
|
|
108
110
|
optional: _propTypes.default.bool
|
|
109
111
|
};
|
|
110
|
-
Input.defaultProps = {
|
|
111
|
-
showLabel: true,
|
|
112
|
-
hasAria: true,
|
|
113
|
-
placeholder: '',
|
|
114
|
-
errorMsg: '',
|
|
115
|
-
labelProps: {},
|
|
116
|
-
className: '',
|
|
117
|
-
prefix: '',
|
|
118
|
-
optional: null
|
|
119
|
-
};
|
|
120
112
|
var _default = exports.default = Input;
|
|
@@ -61,10 +61,10 @@ const LabelText = _ref3 => {
|
|
|
61
61
|
*/
|
|
62
62
|
const Label = _ref4 => {
|
|
63
63
|
let {
|
|
64
|
-
children,
|
|
64
|
+
children = null,
|
|
65
65
|
label,
|
|
66
|
-
hideLabel,
|
|
67
|
-
optional,
|
|
66
|
+
hideLabel = false,
|
|
67
|
+
optional = null,
|
|
68
68
|
...rest
|
|
69
69
|
} = _ref4;
|
|
70
70
|
return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({}, rest, {
|
|
@@ -74,13 +74,4 @@ const Label = _ref4 => {
|
|
|
74
74
|
hideLabel: hideLabel
|
|
75
75
|
}), children);
|
|
76
76
|
};
|
|
77
|
-
Label.defaultProps = {
|
|
78
|
-
hideLabel: false,
|
|
79
|
-
children: null,
|
|
80
|
-
optional: null
|
|
81
|
-
};
|
|
82
|
-
LabelText.defaultProps = {
|
|
83
|
-
hideLabel: false,
|
|
84
|
-
children: null
|
|
85
|
-
};
|
|
86
77
|
var _default = exports.default = Label;
|
|
@@ -14,15 +14,15 @@ let window = '';
|
|
|
14
14
|
const Link = _ref => {
|
|
15
15
|
let {
|
|
16
16
|
children,
|
|
17
|
-
color,
|
|
18
|
-
mobileColour,
|
|
17
|
+
color = 'red',
|
|
18
|
+
mobileColour = null,
|
|
19
19
|
href,
|
|
20
|
-
target,
|
|
21
|
-
type,
|
|
22
|
-
home,
|
|
23
|
-
underline,
|
|
24
|
-
icon,
|
|
25
|
-
iconFirst,
|
|
20
|
+
target = null,
|
|
21
|
+
type = 'standard',
|
|
22
|
+
home = false,
|
|
23
|
+
underline = true,
|
|
24
|
+
icon = null,
|
|
25
|
+
iconFirst = false,
|
|
26
26
|
...rest
|
|
27
27
|
} = _ref;
|
|
28
28
|
const [documentHost, setDocumentHost] = (0, _react.useState)('');
|
|
@@ -59,20 +59,11 @@ const Link = _ref => {
|
|
|
59
59
|
href: href,
|
|
60
60
|
target: window,
|
|
61
61
|
type: type,
|
|
62
|
+
home: home,
|
|
62
63
|
iconFirst: iconFirst,
|
|
63
64
|
underline: underline
|
|
64
65
|
}), children, window === '_blank' && /*#__PURE__*/_react.default.createElement(_Link.HelperText, null, "(opens in new window)"), hasIcon && /*#__PURE__*/_react.default.createElement(_Link.IconWrapper, {
|
|
65
66
|
type: type
|
|
66
67
|
}, icon));
|
|
67
68
|
};
|
|
68
|
-
Link.defaultProps = {
|
|
69
|
-
type: 'standard',
|
|
70
|
-
color: 'red',
|
|
71
|
-
mobileColour: null,
|
|
72
|
-
target: null,
|
|
73
|
-
home: false,
|
|
74
|
-
underline: true,
|
|
75
|
-
iconFirst: false,
|
|
76
|
-
icon: null
|
|
77
|
-
};
|
|
78
69
|
var _default = exports.default = Link;
|
|
@@ -45,10 +45,10 @@ const themeSwitcher = theme => {
|
|
|
45
45
|
};
|
|
46
46
|
const Logo = _ref2 => {
|
|
47
47
|
let {
|
|
48
|
-
rotate,
|
|
49
|
-
sizeSm,
|
|
50
|
-
sizeMd,
|
|
51
|
-
campaign
|
|
48
|
+
rotate = false,
|
|
49
|
+
sizeSm = '51px',
|
|
50
|
+
sizeMd = '70px',
|
|
51
|
+
campaign = 'Comic Relief'
|
|
52
52
|
} = _ref2;
|
|
53
53
|
return /*#__PURE__*/_react.default.createElement(LogoWrapper, {
|
|
54
54
|
rotate: rotate ? 1 : 0,
|
|
@@ -59,11 +59,4 @@ const Logo = _ref2 => {
|
|
|
59
59
|
alt: campaign === 'Comic Relief' || campaign === 'Pride' ? 'Comic Relief logo' : 'Sport Relief logo'
|
|
60
60
|
}));
|
|
61
61
|
};
|
|
62
|
-
Logo.defaultProps = {
|
|
63
|
-
rotate: false,
|
|
64
|
-
sizeSm: '51px',
|
|
65
|
-
// - to work with the header 75px height and 12px padding
|
|
66
|
-
sizeMd: '70px',
|
|
67
|
-
campaign: 'Comic Relief'
|
|
68
|
-
};
|
|
69
62
|
var _default = exports.default = Logo;
|
|
@@ -12,30 +12,39 @@ var _PaginationCalculator = require("./Utils/PaginationCalculator");
|
|
|
12
12
|
/** Customizable Pagination component */
|
|
13
13
|
const Pagination = _ref => {
|
|
14
14
|
let {
|
|
15
|
-
PageComponent,
|
|
15
|
+
PageComponent = _Item.default,
|
|
16
|
+
pageComponentProps = {},
|
|
17
|
+
showFirst = true,
|
|
18
|
+
showPrevious = true,
|
|
19
|
+
showNext = true,
|
|
20
|
+
showLast = true,
|
|
21
|
+
showMore = true,
|
|
22
|
+
maxPages = 5,
|
|
23
|
+
previousLabel = '‹',
|
|
24
|
+
nextLabel = '›',
|
|
25
|
+
firstLabel = '«',
|
|
26
|
+
lastLabel = '»',
|
|
27
|
+
moreLabel = '...',
|
|
28
|
+
getPageLabel = currentPage => currentPage.toString(),
|
|
29
|
+
previousAriaLabel = 'Previous page',
|
|
30
|
+
nextAriaLabel = 'Next page',
|
|
31
|
+
firstAriaLabel = 'First page',
|
|
32
|
+
lastAriaLabel = 'Last page',
|
|
33
|
+
moreAriaLabel = 'More pages',
|
|
34
|
+
getPageAriaLabel = currentPage => "Page ".concat(currentPage),
|
|
35
|
+
target = 'self',
|
|
36
|
+
color = 'black',
|
|
37
|
+
backgroundColor = 'white',
|
|
38
|
+
selectedColor = 'white',
|
|
39
|
+
selectedBackgroundColor = 'red',
|
|
40
|
+
disabledColor = 'grey_medium',
|
|
41
|
+
disabledBackgroundColor = 'white',
|
|
42
|
+
colorOnHover = 'white',
|
|
43
|
+
backgroundColorOnHover = 'teal',
|
|
16
44
|
totalPages,
|
|
17
|
-
maxPages,
|
|
18
45
|
currentPage,
|
|
19
|
-
showFirst,
|
|
20
|
-
firstLabel,
|
|
21
|
-
firstAriaLabel,
|
|
22
|
-
showPrevious,
|
|
23
|
-
previousLabel,
|
|
24
|
-
previousAriaLabel,
|
|
25
|
-
showMore,
|
|
26
|
-
moreLabel,
|
|
27
|
-
moreAriaLabel,
|
|
28
|
-
showNext,
|
|
29
|
-
nextLabel,
|
|
30
|
-
nextAriaLabel,
|
|
31
|
-
showLast,
|
|
32
|
-
lastLabel,
|
|
33
|
-
lastAriaLabel,
|
|
34
|
-
getPageLabel,
|
|
35
|
-
getPageAriaLabel,
|
|
36
46
|
onSelect,
|
|
37
47
|
createURL,
|
|
38
|
-
pageComponentProps,
|
|
39
48
|
...restProps
|
|
40
49
|
} = _ref;
|
|
41
50
|
if (!totalPages) {
|
|
@@ -74,38 +83,16 @@ const Pagination = _ref => {
|
|
|
74
83
|
PageComponent: PageComponent,
|
|
75
84
|
pageComponentProps: pageComponentProps,
|
|
76
85
|
createURL: createURL,
|
|
77
|
-
onSelect: onSelect
|
|
86
|
+
onSelect: onSelect,
|
|
87
|
+
target: target,
|
|
88
|
+
color: color,
|
|
89
|
+
backgroundColor: backgroundColor,
|
|
90
|
+
selectedColor: selectedColor,
|
|
91
|
+
selectedBackgroundColor: selectedBackgroundColor,
|
|
92
|
+
disabledColor: disabledColor,
|
|
93
|
+
disabledBackgroundColor: disabledBackgroundColor,
|
|
94
|
+
colorOnHover: colorOnHover,
|
|
95
|
+
backgroundColorOnHover: backgroundColorOnHover
|
|
78
96
|
}, restProps));
|
|
79
97
|
};
|
|
80
|
-
Pagination.defaultProps = {
|
|
81
|
-
PageComponent: _Item.default,
|
|
82
|
-
pageComponentProps: {},
|
|
83
|
-
showFirst: true,
|
|
84
|
-
showPrevious: true,
|
|
85
|
-
showNext: true,
|
|
86
|
-
showLast: true,
|
|
87
|
-
showMore: true,
|
|
88
|
-
maxPages: 5,
|
|
89
|
-
previousLabel: '‹',
|
|
90
|
-
nextLabel: '›',
|
|
91
|
-
firstLabel: '«',
|
|
92
|
-
lastLabel: '»',
|
|
93
|
-
moreLabel: '...',
|
|
94
|
-
getPageLabel: currentPage => currentPage.toString(),
|
|
95
|
-
previousAriaLabel: 'Previous page',
|
|
96
|
-
nextAriaLabel: 'Next page',
|
|
97
|
-
firstAriaLabel: 'First page',
|
|
98
|
-
lastAriaLabel: 'Last page',
|
|
99
|
-
moreAriaLabel: 'More pages',
|
|
100
|
-
getPageAriaLabel: currentPage => "Page ".concat(currentPage),
|
|
101
|
-
target: 'self',
|
|
102
|
-
color: 'black',
|
|
103
|
-
backgroundColor: 'white',
|
|
104
|
-
selectedColor: 'white',
|
|
105
|
-
selectedBackgroundColor: 'red',
|
|
106
|
-
disabledColor: 'grey_medium',
|
|
107
|
-
disabledBackgroundColor: 'white',
|
|
108
|
-
colorOnHover: 'white',
|
|
109
|
-
backgroundColorOnHover: 'teal'
|
|
110
|
-
};
|
|
111
98
|
var _default = exports.default = Pagination;
|
|
@@ -78,16 +78,16 @@ const Image = _styledComponents.default.img.withConfig({
|
|
|
78
78
|
/** Responsive Picture */
|
|
79
79
|
const Picture = _ref11 => {
|
|
80
80
|
let {
|
|
81
|
-
images,
|
|
82
|
-
image,
|
|
83
|
-
alt,
|
|
84
|
-
width,
|
|
85
|
-
height,
|
|
86
|
-
objectFit,
|
|
87
|
-
imageLow,
|
|
88
|
-
isBackgroundImage,
|
|
89
|
-
smallBreakpointRowLayout,
|
|
90
|
-
mediumBreakpointRowLayout,
|
|
81
|
+
images = null,
|
|
82
|
+
image = null,
|
|
83
|
+
alt = '',
|
|
84
|
+
width = '100%',
|
|
85
|
+
height = 'auto',
|
|
86
|
+
objectFit = 'none',
|
|
87
|
+
imageLow = null,
|
|
88
|
+
isBackgroundImage = false,
|
|
89
|
+
smallBreakpointRowLayout = null,
|
|
90
|
+
mediumBreakpointRowLayout = null,
|
|
91
91
|
...rest
|
|
92
92
|
} = _ref11;
|
|
93
93
|
const document = typeof window !== 'undefined' ? window.document : null;
|
|
@@ -152,16 +152,4 @@ const Picture = _ref11 => {
|
|
|
152
152
|
mediumBreakpointRowLayout: mediumBreakpointRowLayout
|
|
153
153
|
}));
|
|
154
154
|
};
|
|
155
|
-
Picture.defaultProps = {
|
|
156
|
-
imageLow: null,
|
|
157
|
-
image: null,
|
|
158
|
-
images: null,
|
|
159
|
-
objectFit: 'none',
|
|
160
|
-
width: '100%',
|
|
161
|
-
height: 'auto',
|
|
162
|
-
alt: '',
|
|
163
|
-
isBackgroundImage: false,
|
|
164
|
-
smallBreakpointRowLayout: null,
|
|
165
|
-
mediumBreakpointRowLayout: null
|
|
166
|
-
};
|
|
167
155
|
var _default = exports.default = (0, _styledComponents.withTheme)(Picture);
|
|
@@ -13,8 +13,8 @@ const Inner = exports.Inner = _styledComponents.default.div.withConfig({
|
|
|
13
13
|
})(["text-align:", ";"], props => props.align);
|
|
14
14
|
const RichText = _ref => {
|
|
15
15
|
let {
|
|
16
|
-
align,
|
|
17
|
-
markup,
|
|
16
|
+
align = 'left',
|
|
17
|
+
markup = '',
|
|
18
18
|
...rest
|
|
19
19
|
} = _ref;
|
|
20
20
|
return /*#__PURE__*/_react.default.createElement(Inner, Object.assign({
|
|
@@ -24,8 +24,4 @@ const RichText = _ref => {
|
|
|
24
24
|
}
|
|
25
25
|
}, rest));
|
|
26
26
|
};
|
|
27
|
-
RichText.defaultProps = {
|
|
28
|
-
align: 'left',
|
|
29
|
-
markup: ''
|
|
30
|
-
};
|
|
31
27
|
var _default = exports.default = RichText;
|
|
@@ -60,12 +60,12 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
|
|
|
60
60
|
description,
|
|
61
61
|
label,
|
|
62
62
|
options,
|
|
63
|
-
hideLabel,
|
|
64
|
-
defaultValue,
|
|
65
|
-
onChange,
|
|
66
|
-
greyDescription,
|
|
67
|
-
className,
|
|
68
|
-
optional,
|
|
63
|
+
hideLabel = false,
|
|
64
|
+
defaultValue = '',
|
|
65
|
+
onChange = null,
|
|
66
|
+
greyDescription = false,
|
|
67
|
+
className = '',
|
|
68
|
+
optional = false,
|
|
69
69
|
...rest
|
|
70
70
|
} = _ref8;
|
|
71
71
|
const [value, setValue] = (0, _react.useState)('');
|
|
@@ -101,14 +101,4 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
|
|
|
101
101
|
"data-test": "error-message"
|
|
102
102
|
}, errorMsg));
|
|
103
103
|
});
|
|
104
|
-
Select.defaultProps = {
|
|
105
|
-
hideLabel: false,
|
|
106
|
-
defaultValue: '',
|
|
107
|
-
onChange: null,
|
|
108
|
-
/** If true, the 'description' option, which is initially selected but disabled, will be grey
|
|
109
|
-
* - like a text input's placeholder */
|
|
110
|
-
greyDescription: false,
|
|
111
|
-
className: '',
|
|
112
|
-
optional: false
|
|
113
|
-
};
|
|
114
104
|
var _default = exports.default = Select;
|
|
@@ -33,6 +33,7 @@ const StyledItem = _styledComponents.default.li.withConfig({
|
|
|
33
33
|
/** Social media icons with customizable style linked to campaign social media accounts */
|
|
34
34
|
const SocialIcons = _ref3 => {
|
|
35
35
|
let {
|
|
36
|
+
target = 'blank',
|
|
36
37
|
campaign,
|
|
37
38
|
...restProps
|
|
38
39
|
} = _ref3;
|
|
@@ -40,13 +41,11 @@ const SocialIcons = _ref3 => {
|
|
|
40
41
|
return /*#__PURE__*/_react.default.createElement(StyledList, null, Object.keys(_Icons.default).map(brand => /*#__PURE__*/_react.default.createElement(StyledItem, {
|
|
41
42
|
key: brand
|
|
42
43
|
}, /*#__PURE__*/_react.default.createElement(_Icon.default, Object.assign({
|
|
44
|
+
target: target,
|
|
43
45
|
icon: _Icons.default[brand],
|
|
44
46
|
href: links[brand].url,
|
|
45
47
|
title: links[brand].title,
|
|
46
48
|
brand: brand
|
|
47
49
|
}, restProps)))));
|
|
48
50
|
};
|
|
49
|
-
SocialIcons.defaultProps = {
|
|
50
|
-
target: 'blank'
|
|
51
|
-
};
|
|
52
51
|
var _default = exports.default = SocialIcons;
|