@atlaskit/heading 0.1.11 → 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 (11) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +1 -0
  3. package/dist/cjs/heading.js +25 -20
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/heading.js +25 -21
  6. package/dist/es2019/version.json +1 -1
  7. package/dist/esm/heading.js +26 -21
  8. package/dist/esm/version.json +1 -1
  9. package/dist/types/types.d.ts +4 -0
  10. package/package.json +7 -4
  11. package/report.api.md +65 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
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
+
9
+ ## 0.1.13
10
+
11
+ ### Patch Changes
12
+
13
+ - [`354050b68da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/354050b68da) - Revert font size calculations to raw pixels.
14
+
15
+ ## 0.1.12
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 0.1.11
4
22
 
5
23
  ### Patch Changes
package/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # Heading
2
2
 
3
3
  A heading is a typography component used to display text in different sizes and formats.
4
+
4
5
  ## Usage
5
6
 
6
7
  `import Heading from '@atlaskit/heading';`
package/dist/cjs/heading.js CHANGED
@@ -29,65 +29,56 @@ 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
- fontSize: "".concat(35 / 14, "rem"),
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
- fontSize: "".concat(29 / 14, "rem"),
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
- fontSize: "".concat(24 / 14, "rem"),
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
- fontSize: "".concat(20 / 14, "rem"),
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
- fontSize: "".concat(16 / 14, "rem"),
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
- fontSize: '1rem',
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
- fontSize: "".concat(12 / 14, "rem"),
68
+ fontSize: 12,
76
69
  fontWeight: 600,
77
70
  letterSpacing: 0,
78
71
  lineHeight: (0, _utils.lh)(12, 16),
79
72
  textTransform: 'uppercase'
80
73
  });
81
74
  var h200Styles = (0, _core.css)({
82
- color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
83
- fontSize: "".concat(12 / 14, "rem"),
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
- fontSize: "".concat(11 / 14, "rem"),
81
+ fontSize: 11,
91
82
  fontWeight: 700,
92
83
  letterSpacing: 0,
93
84
  lineHeight: (0, _utils.lh)(11, 16)
@@ -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.11",
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,65 +19,56 @@ const headingResetStyles = css({
19
19
  margin: 0
20
20
  });
21
21
  const h900Styles = css({
22
- color: `var(--ds-text, ${N800})`,
23
- fontSize: `${35 / 14}rem`,
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
- fontSize: `${29 / 14}rem`,
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
- fontSize: `${24 / 14}rem`,
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
- fontSize: `${20 / 14}rem`,
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
- fontSize: `${16 / 14}rem`,
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
- fontSize: '1rem',
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
- fontSize: `${12 / 14}rem`,
58
+ fontSize: 12,
66
59
  fontWeight: 600,
67
60
  letterSpacing: 0,
68
61
  lineHeight: lh(12, 16),
69
62
  textTransform: 'uppercase'
70
63
  });
71
64
  const h200Styles = css({
72
- color: `var(--ds-text-subtlest, ${N200})`,
73
- fontSize: `${12 / 14}rem`,
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
- fontSize: `${11 / 14}rem`,
71
+ fontSize: 11,
81
72
  fontWeight: 700,
82
73
  letterSpacing: 0,
83
74
  lineHeight: lh(11, 16)
@@ -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.11",
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,65 +19,56 @@ var headingResetStyles = css({
19
19
  margin: 0
20
20
  });
21
21
  var h900Styles = css({
22
- color: "var(--ds-text, ".concat(N800, ")"),
23
- fontSize: "".concat(35 / 14, "rem"),
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
- fontSize: "".concat(29 / 14, "rem"),
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
- fontSize: "".concat(24 / 14, "rem"),
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
- fontSize: "".concat(20 / 14, "rem"),
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
- fontSize: "".concat(16 / 14, "rem"),
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
- fontSize: '1rem',
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
- fontSize: "".concat(12 / 14, "rem"),
58
+ fontSize: 12,
66
59
  fontWeight: 600,
67
60
  letterSpacing: 0,
68
61
  lineHeight: lh(12, 16),
69
62
  textTransform: 'uppercase'
70
63
  });
71
64
  var h200Styles = css({
72
- color: "var(--ds-text-subtlest, ".concat(N200, ")"),
73
- fontSize: "".concat(12 / 14, "rem"),
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
- fontSize: "".concat(11 / 14, "rem"),
71
+ fontSize: 11,
81
72
  fontWeight: 700,
82
73
  letterSpacing: 0,
83
74
  lineHeight: lh(11, 16)
@@ -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.11",
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.11",
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",
@@ -11,10 +11,11 @@
11
11
  "team": "Design System Team",
12
12
  "releaseModel": "continuous",
13
13
  "website": {
14
- "name": "Heading"
14
+ "name": "Heading",
15
+ "category": "Components"
15
16
  }
16
17
  },
17
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
18
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
18
19
  "main": "dist/cjs/index.js",
19
20
  "module": "dist/esm/index.js",
20
21
  "module:es2019": "dist/es2019/index.js",
@@ -26,7 +27,7 @@
26
27
  },
27
28
  "dependencies": {
28
29
  "@atlaskit/theme": "^12.1.0",
29
- "@atlaskit/tokens": "^0.9.0",
30
+ "@atlaskit/tokens": "^0.10.0",
30
31
  "@babel/runtime": "^7.0.0",
31
32
  "@emotion/core": "^10.0.9"
32
33
  },
@@ -51,6 +52,7 @@
51
52
  "circular-dependencies": "file-and-folder-level"
52
53
  },
53
54
  "@repo/internal": {
55
+ "dom-events": "use-bind-event-listener",
54
56
  "design-system": "v1",
55
57
  "styling": [
56
58
  "static",
@@ -62,5 +64,6 @@
62
64
  "deprecation": "no-deprecated-imports"
63
65
  }
64
66
  },
67
+ "homepage": "https://atlaskit.atlassian.com/packages/design-system/heading",
65
68
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
66
69
  }
package/report.api.md ADDED
@@ -0,0 +1,65 @@
1
+ ## API Report File for "@atlaskit/heading".
2
+
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)
6
+
7
+ ````ts
8
+ import { FC } from 'react';
9
+ import { ReactNode } from 'react';
10
+
11
+ /**
12
+ * __Heading__
13
+ *
14
+ * A heading is a typography component used to display text in different sizes and formats.
15
+ *
16
+ * @example
17
+ *
18
+ * ```jsx
19
+ * import Heading from '@atlaskit/heading';
20
+ *
21
+ * const H100 = () => (
22
+ * <Heading level="h100">h100</Heading>
23
+ * );
24
+ * ```
25
+ */
26
+ declare const Heading: FC<HeadingProps>;
27
+ export default Heading;
28
+
29
+ export declare type HeadingProps = {
30
+ /**
31
+ * A `testId` prop is provided for specified elements, which is a unique
32
+ * string that appears as a data attribute `data-testid` in the rendered code,
33
+ * serving as a hook for automated tests
34
+ */
35
+ testId?: string;
36
+ /**
37
+ * The text of the heading
38
+ */
39
+ children: ReactNode;
40
+ /**
41
+ * The headling level as defined by by the ADG
42
+ */
43
+ level:
44
+ | 'h900'
45
+ | 'h800'
46
+ | 'h700'
47
+ | 'h600'
48
+ | 'h500'
49
+ | 'h400'
50
+ | 'h300'
51
+ | 'h200'
52
+ | 'h100';
53
+ id?: string;
54
+ /**
55
+ * Allows the component to be rendered as the specified DOM Element
56
+ */
57
+ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
58
+ /**
59
+ * Text color of the heading.
60
+ */
61
+ color?: 'inverse' | 'default';
62
+ };
63
+
64
+ export {};
65
+ ````