@comicrelief/component-library 7.35.8 → 7.35.9

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 (5) hide show
  1. package/dist/components/Atoms/Text/Text.js +16 -6
  2. package/dist/components/Atoms/Text/Text.md +55 -14
  3. package/package.json +1 -1
  4. package/src/components/Atoms/Text/Text.js +12 -3
  5. package/src/components/Atoms/Text/Text.md +55 -14
package/dist/components/Atoms/Text/Text.js CHANGED
@@ -8,11 +8,12 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.BaseText = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
+ var _breakpoint = require("../../../theme/shared/breakpoint");
11
12
  /** Text component */
12
13
  const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
13
14
  displayName: "Text__BaseText",
14
15
  componentId: "sc-1snl0ya-0"
15
- })(["color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";"], _ref => {
16
+ })(["color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";", ";"], _ref => {
16
17
  let {
17
18
  color,
18
19
  theme
@@ -69,29 +70,37 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
69
70
  return size === 'super' ? (0, _styledComponents.css)(["font-size:", ";line-height:3rem;@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}"], theme.fontSize('xxl'), theme.breakpoint('small'), theme.fontSize('big'), theme.fontSize('big'), theme.breakpoint('medium'), theme.fontSize('super'), theme.fontSize('super')) : null;
70
71
  }, _ref11 => {
71
72
  let {
72
- size,
73
+ mobileColor,
73
74
  theme
74
75
  } = _ref11;
76
+ return mobileColor && (0, _styledComponents.css)(["@media (max-width:", "px){color:", ";}"], _breakpoint.sizes.medium - 1, theme.color(mobileColor));
77
+ }, _ref12 => {
78
+ let {
79
+ size,
80
+ theme
81
+ } = _ref12;
75
82
  return size === 'm' ? (0, _styledComponents.css)(["font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('s'), theme.breakpoint('small'), theme.fontSize('m')) : null;
76
83
  });
77
84
 
78
85
  /** Text renders different elements based on the `tag` prop
79
86
  * Weight is checked for existence to prevent overriding the tag's css
80
87
  */
81
- const Text = _ref12 => {
88
+ const Text = _ref13 => {
82
89
  let {
83
90
  tag,
84
91
  children,
85
92
  height,
86
93
  weight,
87
94
  family,
95
+ mobileColor,
88
96
  ...rest
89
- } = _ref12;
97
+ } = _ref13;
90
98
  return /*#__PURE__*/_react.default.createElement(BaseText, Object.assign({}, rest, {
91
99
  as: tag,
92
100
  height: height,
93
101
  weight: weight,
94
- family: family
102
+ family: family,
103
+ mobileColor: mobileColor
95
104
  }), children);
96
105
  };
97
106
  Text.defaultProps = {
@@ -102,6 +111,7 @@ Text.defaultProps = {
102
111
  uppercase: false,
103
112
  size: 's',
104
113
  color: 'inherit',
105
- children: undefined
114
+ children: undefined,
115
+ mobileColor: null
106
116
  };
107
117
  var _default = exports.default = Text;
package/dist/components/Atoms/Text/Text.md CHANGED
@@ -1,46 +1,87 @@
1
1
  ```js
2
2
  <div>
3
+ <Text
4
+ tag="h1"
5
+ family="Anton"
6
+ uppercase
7
+ weight="normal"
8
+ size="super"
9
+ mobileColor="blue"
10
+ >
11
+ <b style={{ width: "100px", display: "inline-block" }}>H1 </b>
12
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
13
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 80px / 5rem / super <b>mobileColor:</b> blue
14
+ </Text>
15
+ </Text>
16
+ <Text
17
+ tag="h2"
18
+ family="Anton"
19
+ uppercase
20
+ weight="normal"
21
+ size="big"
22
+ mobileColor="green"
23
+ >
24
+ <b style={{ width: "100px", display: "inline-block" }}>H2 </b>
25
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
26
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 64px / 4rem / big
27
+ <b>mobileColor:</b> green
28
+ </Text>
29
+ </Text>
30
+ <Text
31
+ tag="h3"
32
+ family="Anton"
33
+ uppercase
34
+ weight="normal"
35
+ size="xxl"
36
+ mobileColor="red"
37
+ >
38
+ <b style={{ width: "100px", display: "inline-block" }}>H3 </b>
39
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
40
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 48px / 3rem / xxl
41
+ <b>mobileColor:</b> red
42
+ </Text>
43
+ </Text>
3
44
  <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
4
- <b style={{ width: '100px', display: 'inline-block' }}>H1 </b>
5
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
45
+ <b style={{ width: "100px", display: "inline-block" }}>H1 </b>
46
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
6
47
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 80px / 5rem /
7
48
  super
8
49
  </Text>
9
50
  </Text>
10
51
  <Text tag="h2" family="Anton" uppercase weight="normal" size="big">
11
- <b style={{ width: '100px', display: 'inline-block' }}>H2 </b>
12
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
52
+ <b style={{ width: "100px", display: "inline-block" }}>H2 </b>
53
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
13
54
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 64px / 4rem / big
14
55
  </Text>
15
56
  </Text>
16
57
  <Text tag="h3" family="Anton" uppercase weight="normal" size="xxl">
17
- <b style={{ width: '100px', display: 'inline-block' }}>H3 </b>
18
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
58
+ <b style={{ width: "100px", display: "inline-block" }}>H3 </b>
59
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
19
60
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 48px / 3rem / xxl
20
61
  </Text>
21
62
  </Text>
22
63
  <Text tag="h4" family="Anton" uppercase weight="normal" size="xl">
23
- <b style={{ width: '100px', display: 'inline-block' }}>H4 </b>
24
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
64
+ <b style={{ width: "100px", display: "inline-block" }}>H4 </b>
65
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
25
66
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 32px / 2rem / xl
26
67
  </Text>
27
68
  </Text>
28
69
  <Text tag="h4" family="Anton" uppercase weight="normal" size="l">
29
- <b style={{ width: '100px', display: 'inline-block' }}>H5 </b>
30
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
70
+ <b style={{ width: "100px", display: "inline-block" }}>H5 </b>
71
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
31
72
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 24px / 1.5rem / l
32
73
  </Text>
33
74
  </Text>
34
75
  <Text tag="p" size="m">
35
- <span style={{ width: '100px', display: 'inline-block' }}>Body1</span>
36
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
76
+ <span style={{ width: "100px", display: "inline-block" }}>Body1</span>
77
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
37
78
  <b>family:</b> Montserrat <b>weight:</b> Regular <b>size:</b> 20px /
38
79
  1.25rem / m
39
80
  </Text>
40
81
  </Text>
41
82
  <Text tag="p" size="s">
42
- <span style={{ width: '100px', display: 'inline-block' }}>Body2</span>
43
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
83
+ <span style={{ width: "100px", display: "inline-block" }}>Body2</span>
84
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
44
85
  <b>family:</b> Montserrat <b>weight:</b> Regular <b>size:</b> 16px / 1rem
45
86
  / s
46
87
  </Text>
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": "7.35.8",
4
+ "version": "7.35.9",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Text/Text.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import styled, { css } from 'styled-components';
3
3
  import PropTypes from 'prop-types';
4
+ import { sizes } from '../../../theme/shared/breakpoint';
4
5
 
5
6
  /** Text component */
6
7
  export const BaseText = styled.span`
@@ -31,6 +32,11 @@ export const BaseText = styled.span`
31
32
  }
32
33
  `
33
34
  : null)};
35
+ ${({ mobileColor, theme }) => mobileColor && css`
36
+ @media (max-width: ${sizes.medium - 1}px) {
37
+ color: ${theme.color(mobileColor)};
38
+ }
39
+ `};
34
40
  ${({ size, theme }) => (size === 'm'
35
41
  ? css`
36
42
  font-size: ${theme.fontSize('s')};
@@ -45,7 +51,7 @@ export const BaseText = styled.span`
45
51
  * Weight is checked for existence to prevent overriding the tag's css
46
52
  */
47
53
  const Text = ({
48
- tag, children, height, weight, family, ...rest
54
+ tag, children, height, weight, family, mobileColor, ...rest
49
55
  }) => (
50
56
  <BaseText
51
57
  {...rest}
@@ -53,6 +59,7 @@ const Text = ({
53
59
  height={height}
54
60
  weight={weight}
55
61
  family={family}
62
+ mobileColor={mobileColor}
56
63
  >
57
64
  {children}
58
65
  </BaseText>
@@ -77,7 +84,8 @@ Text.propTypes = {
77
84
  PropTypes.arrayOf(PropTypes.node),
78
85
  PropTypes.node,
79
86
  PropTypes.string
80
- ])
87
+ ]),
88
+ mobileColor: PropTypes.string
81
89
  };
82
90
 
83
91
  Text.defaultProps = {
@@ -88,7 +96,8 @@ Text.defaultProps = {
88
96
  uppercase: false,
89
97
  size: 's',
90
98
  color: 'inherit',
91
- children: undefined
99
+ children: undefined,
100
+ mobileColor: null
92
101
  };
93
102
 
94
103
  export default Text;
package/src/components/Atoms/Text/Text.md CHANGED
@@ -1,46 +1,87 @@
1
1
  ```js
2
2
  <div>
3
+ <Text
4
+ tag="h1"
5
+ family="Anton"
6
+ uppercase
7
+ weight="normal"
8
+ size="super"
9
+ mobileColor="blue"
10
+ >
11
+ <b style={{ width: "100px", display: "inline-block" }}>H1 </b>
12
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
13
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 80px / 5rem / super <b>mobileColor:</b> blue
14
+ </Text>
15
+ </Text>
16
+ <Text
17
+ tag="h2"
18
+ family="Anton"
19
+ uppercase
20
+ weight="normal"
21
+ size="big"
22
+ mobileColor="green"
23
+ >
24
+ <b style={{ width: "100px", display: "inline-block" }}>H2 </b>
25
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
26
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 64px / 4rem / big
27
+ <b>mobileColor:</b> green
28
+ </Text>
29
+ </Text>
30
+ <Text
31
+ tag="h3"
32
+ family="Anton"
33
+ uppercase
34
+ weight="normal"
35
+ size="xxl"
36
+ mobileColor="red"
37
+ >
38
+ <b style={{ width: "100px", display: "inline-block" }}>H3 </b>
39
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
40
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 48px / 3rem / xxl
41
+ <b>mobileColor:</b> red
42
+ </Text>
43
+ </Text>
3
44
  <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
4
- <b style={{ width: '100px', display: 'inline-block' }}>H1 </b>
5
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
45
+ <b style={{ width: "100px", display: "inline-block" }}>H1 </b>
46
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
6
47
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 80px / 5rem /
7
48
  super
8
49
  </Text>
9
50
  </Text>
10
51
  <Text tag="h2" family="Anton" uppercase weight="normal" size="big">
11
- <b style={{ width: '100px', display: 'inline-block' }}>H2 </b>
12
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
52
+ <b style={{ width: "100px", display: "inline-block" }}>H2 </b>
53
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
13
54
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 64px / 4rem / big
14
55
  </Text>
15
56
  </Text>
16
57
  <Text tag="h3" family="Anton" uppercase weight="normal" size="xxl">
17
- <b style={{ width: '100px', display: 'inline-block' }}>H3 </b>
18
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
58
+ <b style={{ width: "100px", display: "inline-block" }}>H3 </b>
59
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
19
60
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 48px / 3rem / xxl
20
61
  </Text>
21
62
  </Text>
22
63
  <Text tag="h4" family="Anton" uppercase weight="normal" size="xl">
23
- <b style={{ width: '100px', display: 'inline-block' }}>H4 </b>
24
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
64
+ <b style={{ width: "100px", display: "inline-block" }}>H4 </b>
65
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
25
66
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 32px / 2rem / xl
26
67
  </Text>
27
68
  </Text>
28
69
  <Text tag="h4" family="Anton" uppercase weight="normal" size="l">
29
- <b style={{ width: '100px', display: 'inline-block' }}>H5 </b>
30
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
70
+ <b style={{ width: "100px", display: "inline-block" }}>H5 </b>
71
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
31
72
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 24px / 1.5rem / l
32
73
  </Text>
33
74
  </Text>
34
75
  <Text tag="p" size="m">
35
- <span style={{ width: '100px', display: 'inline-block' }}>Body1</span>
36
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
76
+ <span style={{ width: "100px", display: "inline-block" }}>Body1</span>
77
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
37
78
  <b>family:</b> Montserrat <b>weight:</b> Regular <b>size:</b> 20px /
38
79
  1.25rem / m
39
80
  </Text>
40
81
  </Text>
41
82
  <Text tag="p" size="s">
42
- <span style={{ width: '100px', display: 'inline-block' }}>Body2</span>
43
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
83
+ <span style={{ width: "100px", display: "inline-block" }}>Body2</span>
84
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
44
85
  <b>family:</b> Montserrat <b>weight:</b> Regular <b>size:</b> 16px / 1rem
45
86
  / s
46
87
  </Text>