@atlaskit/heading 0.1.13 → 0.1.14

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 (10) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/heading.js +16 -11
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/heading.js +16 -12
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/heading.js +17 -12
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/types.d.ts +4 -0
  9. package/package.json +1 -1
  10. package/report.api.md +8 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 0.1.14
4
+
5
+ ### Patch Changes
6
+
7
+ - [`47b01007f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47b01007f27) - Introduces color prop with values default and inverse.
8
+
3
9
  ## 0.1.13
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/heading.js CHANGED
@@ -29,49 +29,42 @@ var headingResetStyles = (0, _core.css)({
29
29
  margin: 0
30
30
  });
31
31
  var h900Styles = (0, _core.css)({
32
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
33
32
  fontSize: 35,
34
33
  fontWeight: 500,
35
34
  letterSpacing: '-0.01em',
36
35
  lineHeight: (0, _utils.lh)(35, 40)
37
36
  });
38
37
  var h800Styles = (0, _core.css)({
39
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
40
38
  fontSize: 29,
41
39
  fontWeight: 600,
42
40
  letterSpacing: '-0.01em',
43
41
  lineHeight: (0, _utils.lh)(29, 32)
44
42
  });
45
43
  var h700Styles = (0, _core.css)({
46
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
47
44
  fontSize: 24,
48
45
  fontWeight: 500,
49
46
  letterSpacing: '-0.01em',
50
47
  lineHeight: (0, _utils.lh)(24, 28)
51
48
  });
52
49
  var h600Styles = (0, _core.css)({
53
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
54
50
  fontSize: 20,
55
51
  fontWeight: 500,
56
52
  letterSpacing: '-0.008em',
57
53
  lineHeight: (0, _utils.lh)(20, 24)
58
54
  });
59
55
  var h500Styles = (0, _core.css)({
60
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
61
56
  fontSize: 16,
62
57
  fontWeight: 600,
63
58
  letterSpacing: '-0.006em',
64
59
  lineHeight: (0, _utils.lh)(16, 20)
65
60
  });
66
61
  var h400Styles = (0, _core.css)({
67
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
68
62
  fontSize: 14,
69
63
  fontWeight: 600,
70
64
  letterSpacing: '-0.003em',
71
65
  lineHeight: (0, _utils.lh)(14, 16)
72
66
  });
73
67
  var h300Styles = (0, _core.css)({
74
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
75
68
  fontSize: 12,
76
69
  fontWeight: 600,
77
70
  letterSpacing: 0,
@@ -79,14 +72,12 @@ var h300Styles = (0, _core.css)({
79
72
  textTransform: 'uppercase'
80
73
  });
81
74
  var h200Styles = (0, _core.css)({
82
- color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
83
75
  fontSize: 12,
84
76
  fontWeight: 600,
85
77
  letterSpacing: 0,
86
78
  lineHeight: (0, _utils.lh)(12, 16)
87
79
  });
88
80
  var h100Styles = (0, _core.css)({
89
- color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
90
81
  fontSize: 11,
91
82
  fontWeight: 700,
92
83
  letterSpacing: 0,
@@ -103,6 +94,17 @@ var styleMap = {
103
94
  h200: h200Styles,
104
95
  h100: h100Styles
105
96
  };
97
+ var colorStyleMap = {
98
+ default: (0, _core.css)({
99
+ color: "var(--ds-text, ".concat(_colors.N800, ")")
100
+ }),
101
+ inverse: (0, _core.css)({
102
+ color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
103
+ }),
104
+ subtlest: (0, _core.css)({
105
+ color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
106
+ })
107
+ };
106
108
  /**
107
109
  * __Heading__
108
110
  *
@@ -124,17 +126,20 @@ var Heading = function Heading(_ref) {
124
126
  level = _ref.level,
125
127
  id = _ref.id,
126
128
  testId = _ref.testId,
127
- as = _ref.as;
129
+ as = _ref.as,
130
+ _ref$color = _ref.color,
131
+ color = _ref$color === void 0 ? 'default' : _ref$color;
128
132
 
129
133
  if (process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
130
134
  throw new Error('`as` prop should be a string.');
131
135
  }
132
136
 
133
137
  var Markup = as || levelMap[level];
138
+ var isSubtleHeading = level === 'h200' || level === 'h100';
134
139
  return (0, _core.jsx)(Markup, {
135
140
  id: id,
136
141
  "data-testid": testId,
137
- css: [headingResetStyles, styleMap[level]]
142
+ css: [headingResetStyles, styleMap[level], color === 'inverse' && colorStyleMap.inverse, color === 'default' && isSubtleHeading && colorStyleMap.subtlest, color === 'default' && !isSubtleHeading && colorStyleMap.default]
138
143
  }, children);
139
144
  };
140
145
 
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/heading.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/core';
3
- import { N200, N800 } from '@atlaskit/theme/colors';
3
+ import { N0, N200, N800 } from '@atlaskit/theme/colors';
4
4
  import { lh } from './utils'; // https://atlassian.design/foundations/typography
5
5
 
6
6
  const levelMap = {
@@ -19,49 +19,42 @@ const headingResetStyles = css({
19
19
  margin: 0
20
20
  });
21
21
  const h900Styles = css({
22
- color: `var(--ds-text, ${N800})`,
23
22
  fontSize: 35,
24
23
  fontWeight: 500,
25
24
  letterSpacing: '-0.01em',
26
25
  lineHeight: lh(35, 40)
27
26
  });
28
27
  const h800Styles = css({
29
- color: `var(--ds-text, ${N800})`,
30
28
  fontSize: 29,
31
29
  fontWeight: 600,
32
30
  letterSpacing: '-0.01em',
33
31
  lineHeight: lh(29, 32)
34
32
  });
35
33
  const h700Styles = css({
36
- color: `var(--ds-text, ${N800})`,
37
34
  fontSize: 24,
38
35
  fontWeight: 500,
39
36
  letterSpacing: '-0.01em',
40
37
  lineHeight: lh(24, 28)
41
38
  });
42
39
  const h600Styles = css({
43
- color: `var(--ds-text, ${N800})`,
44
40
  fontSize: 20,
45
41
  fontWeight: 500,
46
42
  letterSpacing: '-0.008em',
47
43
  lineHeight: lh(20, 24)
48
44
  });
49
45
  const h500Styles = css({
50
- color: `var(--ds-text, ${N800})`,
51
46
  fontSize: 16,
52
47
  fontWeight: 600,
53
48
  letterSpacing: '-0.006em',
54
49
  lineHeight: lh(16, 20)
55
50
  });
56
51
  const h400Styles = css({
57
- color: `var(--ds-text, ${N800})`,
58
52
  fontSize: 14,
59
53
  fontWeight: 600,
60
54
  letterSpacing: '-0.003em',
61
55
  lineHeight: lh(14, 16)
62
56
  });
63
57
  const h300Styles = css({
64
- color: `var(--ds-text, ${N800})`,
65
58
  fontSize: 12,
66
59
  fontWeight: 600,
67
60
  letterSpacing: 0,
@@ -69,14 +62,12 @@ const h300Styles = css({
69
62
  textTransform: 'uppercase'
70
63
  });
71
64
  const h200Styles = css({
72
- color: `var(--ds-text-subtlest, ${N200})`,
73
65
  fontSize: 12,
74
66
  fontWeight: 600,
75
67
  letterSpacing: 0,
76
68
  lineHeight: lh(12, 16)
77
69
  });
78
70
  const h100Styles = css({
79
- color: `var(--ds-text-subtlest, ${N200})`,
80
71
  fontSize: 11,
81
72
  fontWeight: 700,
82
73
  letterSpacing: 0,
@@ -93,6 +84,17 @@ const styleMap = {
93
84
  h200: h200Styles,
94
85
  h100: h100Styles
95
86
  };
87
+ const colorStyleMap = {
88
+ default: css({
89
+ color: `var(--ds-text, ${N800})`
90
+ }),
91
+ inverse: css({
92
+ color: `var(--ds-text-inverse, ${N0})`
93
+ }),
94
+ subtlest: css({
95
+ color: `var(--ds-text-subtlest, ${N200})`
96
+ })
97
+ };
96
98
  /**
97
99
  * __Heading__
98
100
  *
@@ -114,17 +116,19 @@ const Heading = ({
114
116
  level,
115
117
  id,
116
118
  testId,
117
- as
119
+ as,
120
+ color = 'default'
118
121
  }) => {
119
122
  if (process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
120
123
  throw new Error('`as` prop should be a string.');
121
124
  }
122
125
 
123
126
  const Markup = as || levelMap[level];
127
+ const isSubtleHeading = level === 'h200' || level === 'h100';
124
128
  return jsx(Markup, {
125
129
  id: id,
126
130
  "data-testid": testId,
127
- css: [headingResetStyles, styleMap[level]]
131
+ css: [headingResetStyles, styleMap[level], color === 'inverse' && colorStyleMap.inverse, color === 'default' && isSubtleHeading && colorStyleMap.subtlest, color === 'default' && !isSubtleHeading && colorStyleMap.default]
128
132
  }, children);
129
133
  };
130
134
 
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/heading.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/core';
3
- import { N200, N800 } from '@atlaskit/theme/colors';
3
+ import { N0, N200, N800 } from '@atlaskit/theme/colors';
4
4
  import { lh } from './utils'; // https://atlassian.design/foundations/typography
5
5
 
6
6
  var levelMap = {
@@ -19,49 +19,42 @@ var headingResetStyles = css({
19
19
  margin: 0
20
20
  });
21
21
  var h900Styles = css({
22
- color: "var(--ds-text, ".concat(N800, ")"),
23
22
  fontSize: 35,
24
23
  fontWeight: 500,
25
24
  letterSpacing: '-0.01em',
26
25
  lineHeight: lh(35, 40)
27
26
  });
28
27
  var h800Styles = css({
29
- color: "var(--ds-text, ".concat(N800, ")"),
30
28
  fontSize: 29,
31
29
  fontWeight: 600,
32
30
  letterSpacing: '-0.01em',
33
31
  lineHeight: lh(29, 32)
34
32
  });
35
33
  var h700Styles = css({
36
- color: "var(--ds-text, ".concat(N800, ")"),
37
34
  fontSize: 24,
38
35
  fontWeight: 500,
39
36
  letterSpacing: '-0.01em',
40
37
  lineHeight: lh(24, 28)
41
38
  });
42
39
  var h600Styles = css({
43
- color: "var(--ds-text, ".concat(N800, ")"),
44
40
  fontSize: 20,
45
41
  fontWeight: 500,
46
42
  letterSpacing: '-0.008em',
47
43
  lineHeight: lh(20, 24)
48
44
  });
49
45
  var h500Styles = css({
50
- color: "var(--ds-text, ".concat(N800, ")"),
51
46
  fontSize: 16,
52
47
  fontWeight: 600,
53
48
  letterSpacing: '-0.006em',
54
49
  lineHeight: lh(16, 20)
55
50
  });
56
51
  var h400Styles = css({
57
- color: "var(--ds-text, ".concat(N800, ")"),
58
52
  fontSize: 14,
59
53
  fontWeight: 600,
60
54
  letterSpacing: '-0.003em',
61
55
  lineHeight: lh(14, 16)
62
56
  });
63
57
  var h300Styles = css({
64
- color: "var(--ds-text, ".concat(N800, ")"),
65
58
  fontSize: 12,
66
59
  fontWeight: 600,
67
60
  letterSpacing: 0,
@@ -69,14 +62,12 @@ var h300Styles = css({
69
62
  textTransform: 'uppercase'
70
63
  });
71
64
  var h200Styles = css({
72
- color: "var(--ds-text-subtlest, ".concat(N200, ")"),
73
65
  fontSize: 12,
74
66
  fontWeight: 600,
75
67
  letterSpacing: 0,
76
68
  lineHeight: lh(12, 16)
77
69
  });
78
70
  var h100Styles = css({
79
- color: "var(--ds-text-subtlest, ".concat(N200, ")"),
80
71
  fontSize: 11,
81
72
  fontWeight: 700,
82
73
  letterSpacing: 0,
@@ -93,6 +84,17 @@ var styleMap = {
93
84
  h200: h200Styles,
94
85
  h100: h100Styles
95
86
  };
87
+ var colorStyleMap = {
88
+ default: css({
89
+ color: "var(--ds-text, ".concat(N800, ")")
90
+ }),
91
+ inverse: css({
92
+ color: "var(--ds-text-inverse, ".concat(N0, ")")
93
+ }),
94
+ subtlest: css({
95
+ color: "var(--ds-text-subtlest, ".concat(N200, ")")
96
+ })
97
+ };
96
98
  /**
97
99
  * __Heading__
98
100
  *
@@ -114,17 +116,20 @@ var Heading = function Heading(_ref) {
114
116
  level = _ref.level,
115
117
  id = _ref.id,
116
118
  testId = _ref.testId,
117
- as = _ref.as;
119
+ as = _ref.as,
120
+ _ref$color = _ref.color,
121
+ color = _ref$color === void 0 ? 'default' : _ref$color;
118
122
 
119
123
  if (process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
120
124
  throw new Error('`as` prop should be a string.');
121
125
  }
122
126
 
123
127
  var Markup = as || levelMap[level];
128
+ var isSubtleHeading = level === 'h200' || level === 'h100';
124
129
  return jsx(Markup, {
125
130
  id: id,
126
131
  "data-testid": testId,
127
- css: [headingResetStyles, styleMap[level]]
132
+ css: [headingResetStyles, styleMap[level], color === 'inverse' && colorStyleMap.inverse, color === 'default' && isSubtleHeading && colorStyleMap.subtlest, color === 'default' && !isSubtleHeading && colorStyleMap.default]
128
133
  }, children);
129
134
  };
130
135
 
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/types.d.ts CHANGED
@@ -19,4 +19,8 @@ export declare type HeadingProps = {
19
19
  * Allows the component to be rendered as the specified DOM Element
20
20
  */
21
21
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
22
+ /**
23
+ * Text color of the heading.
24
+ */
25
+ color?: 'inverse' | 'default';
22
26
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "description": "A heading is a typography component used to display text in different sizes and formats.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
package/report.api.md CHANGED
@@ -1,6 +1,8 @@
1
- ## API Report File for "@atlaskit/heading"
1
+ ## API Report File for "@atlaskit/heading".
2
2
 
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
3
+ > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
4
+
5
+ [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
4
6
 
5
7
  ````ts
6
8
  import { FC } from 'react';
@@ -53,6 +55,10 @@ export declare type HeadingProps = {
53
55
  * Allows the component to be rendered as the specified DOM Element
54
56
  */
55
57
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
58
+ /**
59
+ * Text color of the heading.
60
+ */
61
+ color?: 'inverse' | 'default';
56
62
  };
57
63
 
58
64
  export {};