@atlaskit/heading 3.1.0 → 4.0.0

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 +15 -0
  2. package/dist/cjs/heading.partial.compiled.css +13 -0
  3. package/dist/cjs/heading.partial.js +38 -58
  4. package/dist/es2019/heading.partial.compiled.css +13 -0
  5. package/dist/es2019/heading.partial.js +35 -59
  6. package/dist/esm/heading.partial.compiled.css +13 -0
  7. package/dist/esm/heading.partial.js +35 -58
  8. package/dist/types/heading.partial.d.ts +31 -21
  9. package/dist/types-ts4.5/heading.partial.d.ts +31 -21
  10. package/package.json +7 -7
  11. package/scripts/codegen.tsx +4 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#171160](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171160)
8
+ [`0d474a7c26c0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d474a7c26c0d) -
9
+ Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
10
+ the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
11
+
12
+ Please note, in order to use this version of `@atlaskit/heading`, you will need to ensure that
13
+ your bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in
14
+ support for `.css` imports, so you may not need to do anything. If you are using a different
15
+ bundler, please refer to the documentation for that bundler to understand how to handle `.css`
16
+ imports.
17
+
3
18
  ## 3.1.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/heading.partial.compiled.css ADDED
@@ -0,0 +1,13 @@
1
+ ._11c813hg{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._11c816g6{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
+ ._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
5
+ ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
6
+ ._11c8iyik{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
7
+ ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
8
+ ._1mouidpf{margin-block:0}
9
+ ._1dyz4jg8{letter-spacing:normal}
10
+ ._1p1dglyw{text-transform:none}
11
+ ._syaz15cr{color:var(--ds-text-inverse,#fff)}
12
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
13
+ ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
package/dist/cjs/heading.partial.js CHANGED
@@ -1,20 +1,21 @@
1
+ /* heading.partial.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.default = void 0;
10
+ require("./heading.partial.compiled.css");
11
+ var React = _interopRequireWildcard(require("react"));
12
+ var _runtime = require("@compiled/react/runtime");
8
13
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _react = require("@emotion/react");
10
14
  var _primitives = require("@atlaskit/primitives");
11
15
  var _headingContext = require("./heading-context");
12
- /**
13
- * @jsxRuntime classic
14
- * @jsx jsx
15
- */
16
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
18
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
-
18
19
  var sizeTagMap = {
19
20
  xxlarge: 'h1',
20
21
  xlarge: 'h1',
@@ -24,11 +25,34 @@ var sizeTagMap = {
24
25
  xsmall: 'h5',
25
26
  xxsmall: 'h6'
26
27
  };
27
- var headingResetStyles = (0, _react.css)({
28
- letterSpacing: 'normal',
29
- marginBlock: 0,
30
- textTransform: 'none'
31
- });
28
+ var styles = {
29
+ root: "_1dyz4jg8 _1mouidpf _1p1dglyw"
30
+ };
31
+ var headingColorStylesMap = {
32
+ 'color.text': "_syaz1fxt",
33
+ 'color.text.inverse': "_syaz15cr",
34
+ 'color.text.warning.inverse': "_syazal3n"
35
+ };
36
+
37
+ /**
38
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
39
+ * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
40
+ * @codegenId typography
41
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
42
+ */
43
+ var headingSizeStylesMap = {
44
+ xxlarge: "_11c813hg",
45
+ xlarge: "_11c8iyik",
46
+ large: "_11c81p5s",
47
+ medium: "_11c8o0gd",
48
+ small: "_11c81bk4",
49
+ xsmall: "_11c81il0",
50
+ xxsmall: "_11c816g6"
51
+ };
52
+ /**
53
+ * @codegenEnd
54
+ */
55
+
32
56
  var useColor = function useColor(colorProp) {
33
57
  var surface = (0, _primitives.UNSAFE_useSurface)();
34
58
 
@@ -65,7 +89,7 @@ var Heading = function Heading(_ref) {
65
89
  }
66
90
 
67
91
  // Technically size can be undefined here due to how the types work.
68
- // Once removing the level prop this assertion can be removed since size will be a required prop.
92
+ // Once removing the level prop this assertion can be removed since size ws ill be a required prop.
69
93
  var _useHeading = (0, _headingContext.useHeading)(sizeTagMap[size]),
70
94
  _useHeading2 = (0, _slicedToArray2.default)(_useHeading, 2),
71
95
  hLevel = _useHeading2[0],
@@ -73,56 +97,12 @@ var Heading = function Heading(_ref) {
73
97
  var Component = as || inferredElement;
74
98
  var needsAriaRole = Component === 'div' && hLevel;
75
99
  var color = useColor(colorProp);
76
- return (0, _react.jsx)(Component, {
100
+ return /*#__PURE__*/React.createElement(Component, {
77
101
  id: id,
78
102
  "data-testid": testId,
79
103
  role: needsAriaRole ? 'heading' : undefined,
80
104
  "aria-level": needsAriaRole ? hLevel : undefined,
81
- css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
105
+ className: (0, _runtime.ax)([styles.root, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
82
106
  }, children);
83
107
  };
84
- var headingColorStylesMap = {
85
- 'color.text': (0, _react.css)({
86
- color: "var(--ds-text, #172B4D)"
87
- }),
88
- 'color.text.inverse': (0, _react.css)({
89
- color: "var(--ds-text-inverse, #FFFFFF)"
90
- }),
91
- 'color.text.warning.inverse': (0, _react.css)({
92
- color: "var(--ds-text-warning-inverse, #172B4D)"
93
- })
94
- };
95
-
96
- /**
97
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
98
- * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
99
- * @codegenId typography
100
- * @codegenCommand yarn workspace @atlaskit/heading codegen
101
- */
102
- var headingSizeStylesMap = {
103
- xxlarge: (0, _react.css)({
104
- font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
105
- }),
106
- xlarge: (0, _react.css)({
107
- font: "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
108
- }),
109
- large: (0, _react.css)({
110
- font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
111
- }),
112
- medium: (0, _react.css)({
113
- font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
114
- }),
115
- small: (0, _react.css)({
116
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
117
- }),
118
- xsmall: (0, _react.css)({
119
- font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
120
- }),
121
- xxsmall: (0, _react.css)({
122
- font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
123
- })
124
- };
125
- /**
126
- * @codegenEnd
127
- */
128
108
  var _default = exports.default = Heading;
package/dist/es2019/heading.partial.compiled.css ADDED
@@ -0,0 +1,13 @@
1
+ ._11c813hg{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._11c816g6{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
+ ._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
5
+ ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
6
+ ._11c8iyik{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
7
+ ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
8
+ ._1mouidpf{margin-block:0}
9
+ ._1dyz4jg8{letter-spacing:normal}
10
+ ._1p1dglyw{text-transform:none}
11
+ ._syaz15cr{color:var(--ds-text-inverse,#fff)}
12
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
13
+ ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
package/dist/es2019/heading.partial.js CHANGED
@@ -1,10 +1,8 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
1
+ /* heading.partial.tsx generated by @compiled/babel-plugin v0.32.2 */
5
2
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
-
7
- import { css, jsx } from '@emotion/react';
3
+ import "./heading.partial.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
8
6
  import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
9
7
  import { useHeading } from './heading-context';
10
8
  const sizeTagMap = {
@@ -16,11 +14,34 @@ const sizeTagMap = {
16
14
  xsmall: 'h5',
17
15
  xxsmall: 'h6'
18
16
  };
19
- const headingResetStyles = css({
20
- letterSpacing: 'normal',
21
- marginBlock: 0,
22
- textTransform: 'none'
23
- });
17
+ const styles = {
18
+ root: "_1dyz4jg8 _1mouidpf _1p1dglyw"
19
+ };
20
+ const headingColorStylesMap = {
21
+ 'color.text': "_syaz1fxt",
22
+ 'color.text.inverse': "_syaz15cr",
23
+ 'color.text.warning.inverse': "_syazal3n"
24
+ };
25
+
26
+ /**
27
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
28
+ * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
29
+ * @codegenId typography
30
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
31
+ */
32
+ const headingSizeStylesMap = {
33
+ xxlarge: "_11c813hg",
34
+ xlarge: "_11c8iyik",
35
+ large: "_11c81p5s",
36
+ medium: "_11c8o0gd",
37
+ small: "_11c81bk4",
38
+ xsmall: "_11c81il0",
39
+ xxsmall: "_11c816g6"
40
+ };
41
+ /**
42
+ * @codegenEnd
43
+ */
44
+
24
45
  const useColor = colorProp => {
25
46
  const surface = UNSAFE_useSurface();
26
47
 
@@ -58,62 +79,17 @@ const Heading = ({
58
79
  }
59
80
 
60
81
  // Technically size can be undefined here due to how the types work.
61
- // Once removing the level prop this assertion can be removed since size will be a required prop.
82
+ // Once removing the level prop this assertion can be removed since size ws ill be a required prop.
62
83
  const [hLevel, inferredElement] = useHeading(sizeTagMap[size]);
63
84
  const Component = as || inferredElement;
64
85
  const needsAriaRole = Component === 'div' && hLevel;
65
86
  const color = useColor(colorProp);
66
- return jsx(Component, {
87
+ return /*#__PURE__*/React.createElement(Component, {
67
88
  id: id,
68
89
  "data-testid": testId,
69
90
  role: needsAriaRole ? 'heading' : undefined,
70
91
  "aria-level": needsAriaRole ? hLevel : undefined,
71
- css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
92
+ className: ax([styles.root, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
72
93
  }, children);
73
94
  };
74
- const headingColorStylesMap = {
75
- 'color.text': css({
76
- color: "var(--ds-text, #172B4D)"
77
- }),
78
- 'color.text.inverse': css({
79
- color: "var(--ds-text-inverse, #FFFFFF)"
80
- }),
81
- 'color.text.warning.inverse': css({
82
- color: "var(--ds-text-warning-inverse, #172B4D)"
83
- })
84
- };
85
-
86
- /**
87
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
88
- * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
89
- * @codegenId typography
90
- * @codegenCommand yarn workspace @atlaskit/heading codegen
91
- */
92
- const headingSizeStylesMap = {
93
- xxlarge: css({
94
- font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
95
- }),
96
- xlarge: css({
97
- font: "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
98
- }),
99
- large: css({
100
- font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
101
- }),
102
- medium: css({
103
- font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
104
- }),
105
- small: css({
106
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
107
- }),
108
- xsmall: css({
109
- font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
110
- }),
111
- xxsmall: css({
112
- font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
113
- })
114
- };
115
- /**
116
- * @codegenEnd
117
- */
118
-
119
95
  export default Heading;
package/dist/esm/heading.partial.compiled.css ADDED
@@ -0,0 +1,13 @@
1
+ ._11c813hg{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._11c816g6{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
+ ._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
5
+ ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
6
+ ._11c8iyik{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
7
+ ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
8
+ ._1mouidpf{margin-block:0}
9
+ ._1dyz4jg8{letter-spacing:normal}
10
+ ._1p1dglyw{text-transform:none}
11
+ ._syaz15cr{color:var(--ds-text-inverse,#fff)}
12
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
13
+ ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
package/dist/esm/heading.partial.js CHANGED
@@ -1,11 +1,10 @@
1
+ /* heading.partial.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
3
+ import "./heading.partial.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
 
8
- import { css, jsx } from '@emotion/react';
9
8
  import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
10
9
  import { useHeading } from './heading-context';
11
10
  var sizeTagMap = {
@@ -17,11 +16,34 @@ var sizeTagMap = {
17
16
  xsmall: 'h5',
18
17
  xxsmall: 'h6'
19
18
  };
20
- var headingResetStyles = css({
21
- letterSpacing: 'normal',
22
- marginBlock: 0,
23
- textTransform: 'none'
24
- });
19
+ var styles = {
20
+ root: "_1dyz4jg8 _1mouidpf _1p1dglyw"
21
+ };
22
+ var headingColorStylesMap = {
23
+ 'color.text': "_syaz1fxt",
24
+ 'color.text.inverse': "_syaz15cr",
25
+ 'color.text.warning.inverse': "_syazal3n"
26
+ };
27
+
28
+ /**
29
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
30
+ * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
31
+ * @codegenId typography
32
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
33
+ */
34
+ var headingSizeStylesMap = {
35
+ xxlarge: "_11c813hg",
36
+ xlarge: "_11c8iyik",
37
+ large: "_11c81p5s",
38
+ medium: "_11c8o0gd",
39
+ small: "_11c81bk4",
40
+ xsmall: "_11c81il0",
41
+ xxsmall: "_11c816g6"
42
+ };
43
+ /**
44
+ * @codegenEnd
45
+ */
46
+
25
47
  var useColor = function useColor(colorProp) {
26
48
  var surface = UNSAFE_useSurface();
27
49
 
@@ -58,7 +80,7 @@ var Heading = function Heading(_ref) {
58
80
  }
59
81
 
60
82
  // Technically size can be undefined here due to how the types work.
61
- // Once removing the level prop this assertion can be removed since size will be a required prop.
83
+ // Once removing the level prop this assertion can be removed since size ws ill be a required prop.
62
84
  var _useHeading = useHeading(sizeTagMap[size]),
63
85
  _useHeading2 = _slicedToArray(_useHeading, 2),
64
86
  hLevel = _useHeading2[0],
@@ -66,57 +88,12 @@ var Heading = function Heading(_ref) {
66
88
  var Component = as || inferredElement;
67
89
  var needsAriaRole = Component === 'div' && hLevel;
68
90
  var color = useColor(colorProp);
69
- return jsx(Component, {
91
+ return /*#__PURE__*/React.createElement(Component, {
70
92
  id: id,
71
93
  "data-testid": testId,
72
94
  role: needsAriaRole ? 'heading' : undefined,
73
95
  "aria-level": needsAriaRole ? hLevel : undefined,
74
- css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
96
+ className: ax([styles.root, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
75
97
  }, children);
76
98
  };
77
- var headingColorStylesMap = {
78
- 'color.text': css({
79
- color: "var(--ds-text, #172B4D)"
80
- }),
81
- 'color.text.inverse': css({
82
- color: "var(--ds-text-inverse, #FFFFFF)"
83
- }),
84
- 'color.text.warning.inverse': css({
85
- color: "var(--ds-text-warning-inverse, #172B4D)"
86
- })
87
- };
88
-
89
- /**
90
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
91
- * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
92
- * @codegenId typography
93
- * @codegenCommand yarn workspace @atlaskit/heading codegen
94
- */
95
- var headingSizeStylesMap = {
96
- xxlarge: css({
97
- font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
98
- }),
99
- xlarge: css({
100
- font: "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
101
- }),
102
- large: css({
103
- font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
104
- }),
105
- medium: css({
106
- font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
107
- }),
108
- small: css({
109
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
110
- }),
111
- xsmall: css({
112
- font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
113
- }),
114
- xxsmall: css({
115
- font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
116
- })
117
- };
118
- /**
119
- * @codegenEnd
120
- */
121
-
122
99
  export default Heading;
package/dist/types/heading.partial.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ReactNode } from 'react';
6
- import { jsx, type SerializedStyles } from '@emotion/react';
7
6
  export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
8
7
  export type HeadingProps = {
9
8
  /**
@@ -37,6 +36,36 @@ export type HeadingProps = {
37
36
  */
38
37
  testId?: string;
39
38
  };
39
+ /**
40
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
41
+ * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
42
+ * @codegenId typography
43
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
44
+ */
45
+ declare const headingSizeStylesMap: {
46
+ readonly xxlarge: import("@compiled/react").CompiledStyles<{
47
+ font: "var(--ds-font-heading-xxlarge)";
48
+ }>;
49
+ readonly xlarge: import("@compiled/react").CompiledStyles<{
50
+ font: "var(--ds-font-heading-xlarge)";
51
+ }>;
52
+ readonly large: import("@compiled/react").CompiledStyles<{
53
+ font: "var(--ds-font-heading-large)";
54
+ }>;
55
+ readonly medium: import("@compiled/react").CompiledStyles<{
56
+ font: "var(--ds-font-heading-medium)";
57
+ }>;
58
+ readonly small: import("@compiled/react").CompiledStyles<{
59
+ font: "var(--ds-font-heading-small)";
60
+ }>;
61
+ readonly xsmall: import("@compiled/react").CompiledStyles<{
62
+ font: "var(--ds-font-heading-xsmall)";
63
+ }>;
64
+ readonly xxsmall: import("@compiled/react").CompiledStyles<{
65
+ font: "var(--ds-font-heading-xxsmall)";
66
+ }>;
67
+ };
68
+ type HeadingSize = keyof typeof headingSizeStylesMap;
40
69
  /**
41
70
  * __Heading__
42
71
  *
@@ -48,24 +77,5 @@ export type HeadingProps = {
48
77
  * <Heading size="xxlarge">Page title</Heading>
49
78
  * ```
50
79
  */
51
- declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => jsx.JSX.Element;
52
- /**
53
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
54
- * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
55
- * @codegenId typography
56
- * @codegenCommand yarn workspace @atlaskit/heading codegen
57
- */
58
- declare const headingSizeStylesMap: {
59
- xxlarge: SerializedStyles;
60
- xlarge: SerializedStyles;
61
- large: SerializedStyles;
62
- medium: SerializedStyles;
63
- small: SerializedStyles;
64
- xsmall: SerializedStyles;
65
- xxsmall: SerializedStyles;
66
- };
67
- export type HeadingSize = keyof typeof headingSizeStylesMap;
68
- /**
69
- * @codegenEnd
70
- */
80
+ declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => JSX.Element;
71
81
  export default Heading;
package/dist/types-ts4.5/heading.partial.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ReactNode } from 'react';
6
- import { jsx, type SerializedStyles } from '@emotion/react';
7
6
  export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
8
7
  export type HeadingProps = {
9
8
  /**
@@ -37,6 +36,36 @@ export type HeadingProps = {
37
36
  */
38
37
  testId?: string;
39
38
  };
39
+ /**
40
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
41
+ * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
42
+ * @codegenId typography
43
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
44
+ */
45
+ declare const headingSizeStylesMap: {
46
+ readonly xxlarge: import("@compiled/react").CompiledStyles<{
47
+ font: "var(--ds-font-heading-xxlarge)";
48
+ }>;
49
+ readonly xlarge: import("@compiled/react").CompiledStyles<{
50
+ font: "var(--ds-font-heading-xlarge)";
51
+ }>;
52
+ readonly large: import("@compiled/react").CompiledStyles<{
53
+ font: "var(--ds-font-heading-large)";
54
+ }>;
55
+ readonly medium: import("@compiled/react").CompiledStyles<{
56
+ font: "var(--ds-font-heading-medium)";
57
+ }>;
58
+ readonly small: import("@compiled/react").CompiledStyles<{
59
+ font: "var(--ds-font-heading-small)";
60
+ }>;
61
+ readonly xsmall: import("@compiled/react").CompiledStyles<{
62
+ font: "var(--ds-font-heading-xsmall)";
63
+ }>;
64
+ readonly xxsmall: import("@compiled/react").CompiledStyles<{
65
+ font: "var(--ds-font-heading-xxsmall)";
66
+ }>;
67
+ };
68
+ type HeadingSize = keyof typeof headingSizeStylesMap;
40
69
  /**
41
70
  * __Heading__
42
71
  *
@@ -48,24 +77,5 @@ export type HeadingProps = {
48
77
  * <Heading size="xxlarge">Page title</Heading>
49
78
  * ```
50
79
  */
51
- declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => jsx.JSX.Element;
52
- /**
53
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
54
- * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
55
- * @codegenId typography
56
- * @codegenCommand yarn workspace @atlaskit/heading codegen
57
- */
58
- declare const headingSizeStylesMap: {
59
- xxlarge: SerializedStyles;
60
- xlarge: SerializedStyles;
61
- large: SerializedStyles;
62
- medium: SerializedStyles;
63
- small: SerializedStyles;
64
- xsmall: SerializedStyles;
65
- xxsmall: SerializedStyles;
66
- };
67
- export type HeadingSize = keyof typeof headingSizeStylesMap;
68
- /**
69
- * @codegenEnd
70
- */
80
+ declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => JSX.Element;
71
81
  export default Heading;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "3.1.0",
3
+ "version": "4.0.0",
4
4
  "description": "A heading is a typography component used to display text in different sizes and formats.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,7 @@
20
20
  "team": "Design System Team",
21
21
  "website": {
22
22
  "name": "Heading",
23
- "category": "Components",
23
+ "category": "Text and data display",
24
24
  "status": {
25
25
  "type": "beta"
26
26
  }
@@ -31,10 +31,10 @@
31
31
  "codegen": "ts-node ./scripts/codegen.tsx"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/primitives": "^13.2.0",
35
- "@atlaskit/tokens": "^2.2.0",
34
+ "@atlaskit/primitives": "^13.3.0",
35
+ "@atlaskit/tokens": "^2.4.0",
36
36
  "@babel/runtime": "^7.0.0",
37
- "@emotion/react": "^11.7.1"
37
+ "@compiled/react": "^0.18.1"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -43,7 +43,7 @@
43
43
  "@af/accessibility-testing": "*",
44
44
  "@af/formatting": "*",
45
45
  "@af/integration-testing": "*",
46
- "@atlaskit/ds-lib": "^3.2.0",
46
+ "@atlaskit/ds-lib": "^3.3.0",
47
47
  "@atlaskit/ssr": "*",
48
48
  "@atlaskit/toggle": "^13.4.0",
49
49
  "@atlaskit/visual-regression": "*",
@@ -63,7 +63,7 @@
63
63
  "dom-events": "use-bind-event-listener",
64
64
  "design-system": "v1",
65
65
  "styling": [
66
- "emotion"
66
+ "compiled"
67
67
  ],
68
68
  "ui-components": "lite-mode",
69
69
  "analytics": "analytics-next",
package/scripts/codegen.tsx CHANGED
@@ -24,19 +24,17 @@ export const createTypographyStylesFromTemplate = () => {
24
24
  return (
25
25
  format(
26
26
  `
27
- const headingSizeStylesMap = {
27
+ const headingSizeStylesMap = cssMap({
28
28
  ${headingTokens
29
29
  .map((token) => {
30
30
  return `
31
- '${removeVerbosity(
32
- token.name,
33
- )}': css({ font: ${constructTokenFunctionCall(token.cleanName)} })
31
+ '${removeVerbosity(token.name)}': { font: ${constructTokenFunctionCall(token.cleanName)} }
34
32
  `.trim();
35
33
  })
36
34
  .join(',\n\t')}
37
- };`,
35
+ });`,
38
36
  'typescript',
39
- ) + `\nexport type HeadingSize = keyof typeof headingSizeStylesMap;\n`
37
+ ) + `\ntype HeadingSize = keyof typeof headingSizeStylesMap;\n`
40
38
  );
41
39
  };
42
40