@comicrelief/component-library 8.23.0 → 8.24.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.
Files changed (11) hide show
  1. package/dist/components/Molecules/LogoLinked/LogoLinked.js +5 -4
  2. package/dist/components/Organisms/Header/Header.js +2 -0
  3. package/dist/components/Organisms/Header/Header.md +1 -0
  4. package/dist/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js +1 -1
  5. package/dist/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js +1 -0
  6. package/package.json +1 -1
  7. package/src/components/Molecules/LogoLinked/LogoLinked.js +6 -5
  8. package/src/components/Organisms/Header/Header.js +4 -3
  9. package/src/components/Organisms/Header/Header.md +1 -0
  10. package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js +2 -1
  11. package/src/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js +1 -1
package/dist/components/Molecules/LogoLinked/LogoLinked.js CHANGED
@@ -26,13 +26,14 @@ const LogoLinked = _ref2 => {
26
26
  let {
27
27
  campaign = 'Comic Relief',
28
28
  title = 'Go to Comic Relief homepage',
29
+ url = '/',
29
30
  animateRotate = false,
30
31
  sizeSm,
31
32
  sizeMd
32
33
  } = _ref2;
33
34
  if (campaign === 'Sport Relief Gameon') {
34
35
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LogoLink, {
35
- href: "/",
36
+ href: url,
36
37
  title: "Go to Comic Relief homepage",
37
38
  animateRotate: animateRotate
38
39
  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
@@ -54,7 +55,7 @@ const LogoLinked = _ref2 => {
54
55
  }
55
56
  if (campaign === 'Sport Relief') {
56
57
  return /*#__PURE__*/_react.default.createElement(LogoLink, {
57
- href: "/sportrelief",
58
+ href: url,
58
59
  title: "Go to Sport Relief homepage",
59
60
  animateRotate: animateRotate
60
61
  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
@@ -65,7 +66,7 @@ const LogoLinked = _ref2 => {
65
66
  }
66
67
  if (campaign === 'Pride') {
67
68
  return /*#__PURE__*/_react.default.createElement(LogoLink, {
68
- href: "/",
69
+ href: url,
69
70
  title: "Go to Comic Relief homepage",
70
71
  animateRotate: animateRotate
71
72
  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
@@ -77,7 +78,7 @@ const LogoLinked = _ref2 => {
77
78
  }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Comic Relief homepage"));
78
79
  }
79
80
  return /*#__PURE__*/_react.default.createElement(LogoLink, {
80
- href: "/",
81
+ href: url,
81
82
  title: title,
82
83
  animateRotate: animateRotate
83
84
  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
package/dist/components/Organisms/Header/Header.js CHANGED
@@ -14,11 +14,13 @@ const Header = _ref => {
14
14
  navItems = {},
15
15
  metaIcons,
16
16
  campaign = 'Comic Relief',
17
+ logoUrl = '/',
17
18
  ...rest
18
19
  } = _ref;
19
20
  return /*#__PURE__*/_react.default.createElement(_Header.HeaderWrapper, Object.assign({
20
21
  navItems: true
21
22
  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_LogoLinked.default, {
23
+ url: logoUrl,
22
24
  campaign: campaign
23
25
  })), /*#__PURE__*/_react.default.createElement(_Nav.default, {
24
26
  navItems: navItems
package/dist/components/Organisms/Header/Header.md CHANGED
@@ -26,6 +26,7 @@ import Link from '../../Atoms/Link/Link';
26
26
  <Header
27
27
  navItems={data}
28
28
  campaign="Sport Relief"
29
+ logoUrl="/sportrelief"
29
30
  metaIcons={
30
31
  <>
31
32
  <Link color="green" type="button" href="/donation">
package/dist/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js CHANGED
@@ -34,7 +34,7 @@ const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.wi
34
34
  const BottomCopyWrapper = exports.BottomCopyWrapper = _styledComponents.default.div.withConfig({
35
35
  displayName: "MarketingPreferencesDSstyle__BottomCopyWrapper",
36
36
  componentId: "sc-68n85q-2"
37
- })(["margin:", " 0;"], (0, _spacing.default)('md'));
37
+ })(["margin:", " 0;text-align:center;"], (0, _spacing.default)('md'));
38
38
  const CheckboxWrapper = exports.CheckboxWrapper = _styledComponents.default.div.withConfig({
39
39
  displayName: "MarketingPreferencesDSstyle__CheckboxWrapper",
40
40
  componentId: "sc-68n85q-3"
package/dist/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js CHANGED
@@ -26,6 +26,7 @@ const defaultCopyTop = exports.defaultCopyTop = /*#__PURE__*/_react.default.crea
26
26
  }, "Please tick the relevant boxes below if you would like to hear from us."));
27
27
  const defaultCopyBottom = exports.defaultCopyBottom = /*#__PURE__*/_react.default.createElement(_Text.default, {
28
28
  tag: "p",
29
+ size: "xs",
29
30
  color: "grey_dark"
30
31
  }, "Update your preferences at any time by visiting our", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
31
32
  type: "standard",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "8.23.0",
4
+ "version": "8.24.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Molecules/LogoLinked/LogoLinked.js CHANGED
@@ -26,12 +26,12 @@ const LogoLink = styled.a`
26
26
  `;
27
27
 
28
28
  const LogoLinked = ({
29
- campaign = 'Comic Relief', title = 'Go to Comic Relief homepage', animateRotate = false, sizeSm, sizeMd
29
+ campaign = 'Comic Relief', title = 'Go to Comic Relief homepage', url = '/', animateRotate = false, sizeSm, sizeMd
30
30
  }) => {
31
31
  if (campaign === 'Sport Relief Gameon') {
32
32
  return (
33
33
  <>
34
- <LogoLink href="/" title="Go to Comic Relief homepage" animateRotate={animateRotate}>
34
+ <LogoLink href={url} title="Go to Comic Relief homepage" animateRotate={animateRotate}>
35
35
  <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" title="Go to Comic Relief homepage" />
36
36
  <TitleLabel>Go to Comic Relief homepage</TitleLabel>
37
37
  </LogoLink>
@@ -45,7 +45,7 @@ const LogoLinked = ({
45
45
 
46
46
  if (campaign === 'Sport Relief') {
47
47
  return (
48
- <LogoLink href="/sportrelief" title="Go to Sport Relief homepage" animateRotate={animateRotate}>
48
+ <LogoLink href={url} title="Go to Sport Relief homepage" animateRotate={animateRotate}>
49
49
  <Logo rotate={false} campaign="Sport Relief" title="Sport Relief in homepage" />
50
50
  <TitleLabel>Go to Sport Relief homepage</TitleLabel>
51
51
  </LogoLink>
@@ -54,7 +54,7 @@ const LogoLinked = ({
54
54
 
55
55
  if (campaign === 'Pride') {
56
56
  return (
57
- <LogoLink href="/" title="Go to Comic Relief homepage" animateRotate={animateRotate}>
57
+ <LogoLink href={url} title="Go to Comic Relief homepage" animateRotate={animateRotate}>
58
58
  <Logo rotate={false} campaign="Pride" title="Go to Comic Relief homepage" sizeSm={sizeSm} sizeMd={sizeMd} />
59
59
  <TitleLabel>Go to Comic Relief homepage</TitleLabel>
60
60
  </LogoLink>
@@ -62,7 +62,7 @@ const LogoLinked = ({
62
62
  }
63
63
 
64
64
  return (
65
- <LogoLink href="/" title={title} animateRotate={animateRotate}>
65
+ <LogoLink href={url} title={title} animateRotate={animateRotate}>
66
66
  <Logo rotate={false} campaign="Comic Relief" title={title} sizeSm={sizeSm} sizeMd={sizeMd} />
67
67
  <TitleLabel>{title}</TitleLabel>
68
68
  </LogoLink>
@@ -73,6 +73,7 @@ LogoLinked.propTypes = {
73
73
  campaign: PropTypes.string,
74
74
  animateRotate: PropTypes.bool,
75
75
  title: PropTypes.string,
76
+ url: PropTypes.string,
76
77
  sizeSm: PropTypes.string,
77
78
  sizeMd: PropTypes.string
78
79
  };
package/src/components/Organisms/Header/Header.js CHANGED
@@ -8,12 +8,12 @@ import {
8
8
  } from './Header.style';
9
9
 
10
10
  const Header = ({
11
- navItems = {}, metaIcons, campaign = 'Comic Relief', ...rest
11
+ navItems = {}, metaIcons, campaign = 'Comic Relief', logoUrl = '/', ...rest
12
12
  }) => (
13
13
  <HeaderWrapper navItems {...rest}>
14
14
  <InnerWrapper>
15
15
  <Brand>
16
- <LogoLinked campaign={campaign} />
16
+ <LogoLinked url={logoUrl} campaign={campaign} />
17
17
  </Brand>
18
18
  <MainNav navItems={navItems} />
19
19
  <MetaIcons>{metaIcons}</MetaIcons>
@@ -26,7 +26,8 @@ Header.propTypes = {
26
26
  navItems: PropTypes.objectOf(PropTypes.shape),
27
27
  /** it can be icons, buttons */
28
28
  metaIcons: PropTypes.node.isRequired,
29
- campaign: PropTypes.string
29
+ campaign: PropTypes.string,
30
+ logoUrl: PropTypes.string
30
31
  };
31
32
 
32
33
  export default Header;
package/src/components/Organisms/Header/Header.md CHANGED
@@ -26,6 +26,7 @@ import Link from '../../Atoms/Link/Link';
26
26
  <Header
27
27
  navItems={data}
28
28
  campaign="Sport Relief"
29
+ logoUrl="/sportrelief"
29
30
  metaIcons={
30
31
  <>
31
32
  <Link color="green" type="button" href="/donation">
package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js CHANGED
@@ -23,7 +23,7 @@ const OuterWrapper = styled.div`
23
23
  height: 0;
24
24
  overflow: hidden;
25
25
  z-index: -1;
26
- content:
26
+ content:
27
27
  url(${EmailIconWhite})
28
28
  url(${PhoneIconWhite})
29
29
  url(${PostIconWhite})
@@ -43,6 +43,7 @@ const TopCopyWrapper = styled.div`
43
43
 
44
44
  const BottomCopyWrapper = styled.div`
45
45
  margin: ${spacing('md')} 0;
46
+ text-align: center;
46
47
  `;
47
48
 
48
49
  const CheckboxWrapper = styled.div`
package/src/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js CHANGED
@@ -18,7 +18,7 @@ const defaultCopyTop = (
18
18
  );
19
19
 
20
20
  const defaultCopyBottom = (
21
- <Text tag="p" color="grey_dark">
21
+ <Text tag="p" size="xs" color="grey_dark">
22
22
  Update your preferences at any time by visiting our
23
23
  {' '}
24
24
  <Link