@atlaskit/heading 4.0.1 → 4.1.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 (16) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/heading-context.js +2 -2
  3. package/dist/cjs/heading.partial.compiled.css +13 -0
  4. package/dist/cjs/heading.partial.js +39 -60
  5. package/dist/es2019/heading-context.js +1 -1
  6. package/dist/es2019/heading.partial.compiled.css +13 -0
  7. package/dist/es2019/heading.partial.js +36 -61
  8. package/dist/esm/heading-context.js +1 -1
  9. package/dist/esm/heading.partial.compiled.css +13 -0
  10. package/dist/esm/heading.partial.js +36 -61
  11. package/dist/types/heading-context.d.ts +1 -6
  12. package/dist/types/heading.partial.d.ts +32 -22
  13. package/dist/types-ts4.5/heading-context.d.ts +1 -6
  14. package/dist/types-ts4.5/heading.partial.d.ts +32 -22
  15. package/package.json +10 -8
  16. package/scripts/codegen.tsx +4 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 4.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
8
+ [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
9
+ Update `React` from v16 to v18
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 4.0.2
16
+
17
+ ### Patch Changes
18
+
19
+ - [#108122](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108122)
20
+ [`cbc1d5f5bf950`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cbc1d5f5bf950) -
21
+ Update dev depdencies and remove unused internal exports.
22
+
3
23
  ## 4.0.1
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/heading-context.js CHANGED
@@ -4,7 +4,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.useHeadingLevel = exports.useHeading = exports.default = void 0;
7
+ exports.useHeading = exports.default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  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); }
10
10
  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,7 +16,7 @@ var HeadingLevelContext = /*#__PURE__*/(0, _react.createContext)(0);
16
16
  * @internal
17
17
  * @returns The current heading level context.
18
18
  */
19
- var useHeadingLevel = exports.useHeadingLevel = function useHeadingLevel() {
19
+ var useHeadingLevel = function useHeadingLevel() {
20
20
  return (0, _react.useContext)(HeadingLevelContext);
21
21
  };
22
22
 
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.36.0 */
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");
15
+ var _compiled = require("@atlaskit/primitives/compiled");
11
16
  var _headingContext = require("./heading-context");
12
- /**
13
- * @jsxRuntime classic
14
- * @jsx jsx
15
- */
16
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
-
17
+ 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); }
18
+ 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; }
18
19
  var sizeTagMap = {
19
20
  xxlarge: 'h1',
20
21
  xlarge: 'h1',
@@ -24,14 +25,36 @@ var sizeTagMap = {
24
25
  xsmall: 'h5',
25
26
  xxsmall: 'h6'
26
27
  };
27
- var headingResetStyles = (0, _react.css)({
28
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
29
- letterSpacing: 'normal',
30
- marginBlock: 0,
31
- textTransform: 'none'
32
- });
28
+ var styles = {
29
+ reset: "_1mouidpf _1dyz4jg8 _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
+
33
56
  var useColor = function useColor(colorProp) {
34
- var surface = (0, _primitives.UNSAFE_useSurface)();
57
+ var surface = (0, _compiled.UNSAFE_useSurface)();
35
58
 
36
59
  /**
37
60
  * Where the color of the surface is inverted we always override the color
@@ -74,56 +97,12 @@ var Heading = function Heading(_ref) {
74
97
  var Component = as || inferredElement;
75
98
  var needsAriaRole = Component === 'div' && hLevel;
76
99
  var color = useColor(colorProp);
77
- return (0, _react.jsx)(Component, {
100
+ return /*#__PURE__*/React.createElement(Component, {
78
101
  id: id,
79
102
  "data-testid": testId,
80
103
  role: needsAriaRole ? 'heading' : undefined,
81
104
  "aria-level": needsAriaRole ? hLevel : undefined,
82
- css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
105
+ className: (0, _runtime.ax)([styles.reset, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
83
106
  }, children);
84
107
  };
85
- var headingColorStylesMap = {
86
- 'color.text': (0, _react.css)({
87
- color: "var(--ds-text, #172B4D)"
88
- }),
89
- 'color.text.inverse': (0, _react.css)({
90
- color: "var(--ds-text-inverse, #FFFFFF)"
91
- }),
92
- 'color.text.warning.inverse': (0, _react.css)({
93
- color: "var(--ds-text-warning-inverse, #172B4D)"
94
- })
95
- };
96
-
97
- /**
98
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
99
- * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
100
- * @codegenId typography
101
- * @codegenCommand yarn workspace @atlaskit/heading codegen
102
- */
103
- var headingSizeStylesMap = {
104
- xxlarge: (0, _react.css)({
105
- 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)"
106
- }),
107
- xlarge: (0, _react.css)({
108
- 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)"
109
- }),
110
- large: (0, _react.css)({
111
- 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)"
112
- }),
113
- medium: (0, _react.css)({
114
- 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)"
115
- }),
116
- small: (0, _react.css)({
117
- 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)"
118
- }),
119
- xsmall: (0, _react.css)({
120
- 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)"
121
- }),
122
- xxsmall: (0, _react.css)({
123
- 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)"
124
- })
125
- };
126
- /**
127
- * @codegenEnd
128
- */
129
108
  var _default = exports.default = Heading;
package/dist/es2019/heading-context.js CHANGED
@@ -8,7 +8,7 @@ const HeadingLevelContext = /*#__PURE__*/createContext(0);
8
8
  * @internal
9
9
  * @returns The current heading level context.
10
10
  */
11
- export const useHeadingLevel = () => {
11
+ const useHeadingLevel = () => {
12
12
  return useContext(HeadingLevelContext);
13
13
  };
14
14
 
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,11 +1,9 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
-
7
- import { css, jsx } from '@emotion/react';
8
- import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
1
+ /* heading.partial.tsx generated by @compiled/babel-plugin v0.36.0 */
2
+ import "./heading.partial.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
+ import { UNSAFE_inverseColorMap } from '@atlaskit/primitives';
6
+ import { UNSAFE_useSurface } from '@atlaskit/primitives/compiled';
9
7
  import { useHeading } from './heading-context';
10
8
  const sizeTagMap = {
11
9
  xxlarge: 'h1',
@@ -16,12 +14,34 @@ const sizeTagMap = {
16
14
  xsmall: 'h5',
17
15
  xxsmall: 'h6'
18
16
  };
19
- const headingResetStyles = css({
20
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
21
- letterSpacing: 'normal',
22
- marginBlock: 0,
23
- textTransform: 'none'
24
- });
17
+ const styles = {
18
+ reset: "_1mouidpf _1dyz4jg8 _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
+
25
45
  const useColor = colorProp => {
26
46
  const surface = UNSAFE_useSurface();
27
47
 
@@ -64,57 +84,12 @@ const Heading = ({
64
84
  const Component = as || inferredElement;
65
85
  const needsAriaRole = Component === 'div' && hLevel;
66
86
  const color = useColor(colorProp);
67
- return jsx(Component, {
87
+ return /*#__PURE__*/React.createElement(Component, {
68
88
  id: id,
69
89
  "data-testid": testId,
70
90
  role: needsAriaRole ? 'heading' : undefined,
71
91
  "aria-level": needsAriaRole ? hLevel : undefined,
72
- css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
92
+ className: ax([styles.reset, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
73
93
  }, children);
74
94
  };
75
- const headingColorStylesMap = {
76
- 'color.text': css({
77
- color: "var(--ds-text, #172B4D)"
78
- }),
79
- 'color.text.inverse': css({
80
- color: "var(--ds-text-inverse, #FFFFFF)"
81
- }),
82
- 'color.text.warning.inverse': css({
83
- color: "var(--ds-text-warning-inverse, #172B4D)"
84
- })
85
- };
86
-
87
- /**
88
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
89
- * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
90
- * @codegenId typography
91
- * @codegenCommand yarn workspace @atlaskit/heading codegen
92
- */
93
- const headingSizeStylesMap = {
94
- xxlarge: css({
95
- 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)"
96
- }),
97
- xlarge: css({
98
- 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)"
99
- }),
100
- large: css({
101
- 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)"
102
- }),
103
- medium: css({
104
- 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)"
105
- }),
106
- small: css({
107
- 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)"
108
- }),
109
- xsmall: css({
110
- 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)"
111
- }),
112
- xxsmall: css({
113
- 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)"
114
- })
115
- };
116
- /**
117
- * @codegenEnd
118
- */
119
-
120
95
  export default Heading;
package/dist/esm/heading-context.js CHANGED
@@ -8,7 +8,7 @@ var HeadingLevelContext = /*#__PURE__*/createContext(0);
8
8
  * @internal
9
9
  * @returns The current heading level context.
10
10
  */
11
- export var useHeadingLevel = function useHeadingLevel() {
11
+ var useHeadingLevel = function useHeadingLevel() {
12
12
  return useContext(HeadingLevelContext);
13
13
  };
14
14
 
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,12 +1,10 @@
1
+ /* heading.partial.tsx generated by @compiled/babel-plugin v0.36.0 */
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
-
8
- import { css, jsx } from '@emotion/react';
9
- import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
3
+ import "./heading.partial.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
6
+ import { UNSAFE_inverseColorMap } from '@atlaskit/primitives';
7
+ import { UNSAFE_useSurface } from '@atlaskit/primitives/compiled';
10
8
  import { useHeading } from './heading-context';
11
9
  var sizeTagMap = {
12
10
  xxlarge: 'h1',
@@ -17,12 +15,34 @@ var sizeTagMap = {
17
15
  xsmall: 'h5',
18
16
  xxsmall: 'h6'
19
17
  };
20
- var headingResetStyles = css({
21
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
22
- letterSpacing: 'normal',
23
- marginBlock: 0,
24
- textTransform: 'none'
25
- });
18
+ var styles = {
19
+ reset: "_1mouidpf _1dyz4jg8 _1p1dglyw"
20
+ };
21
+ var headingColorStylesMap = {
22
+ 'color.text': "_syaz1fxt",
23
+ 'color.text.inverse': "_syaz15cr",
24
+ 'color.text.warning.inverse': "_syazal3n"
25
+ };
26
+
27
+ /**
28
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
29
+ * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
30
+ * @codegenId typography
31
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
32
+ */
33
+ var headingSizeStylesMap = {
34
+ xxlarge: "_11c813hg",
35
+ xlarge: "_11c8iyik",
36
+ large: "_11c81p5s",
37
+ medium: "_11c8o0gd",
38
+ small: "_11c81bk4",
39
+ xsmall: "_11c81il0",
40
+ xxsmall: "_11c816g6"
41
+ };
42
+ /**
43
+ * @codegenEnd
44
+ */
45
+
26
46
  var useColor = function useColor(colorProp) {
27
47
  var surface = UNSAFE_useSurface();
28
48
 
@@ -67,57 +87,12 @@ var Heading = function Heading(_ref) {
67
87
  var Component = as || inferredElement;
68
88
  var needsAriaRole = Component === 'div' && hLevel;
69
89
  var color = useColor(colorProp);
70
- return jsx(Component, {
90
+ return /*#__PURE__*/React.createElement(Component, {
71
91
  id: id,
72
92
  "data-testid": testId,
73
93
  role: needsAriaRole ? 'heading' : undefined,
74
94
  "aria-level": needsAriaRole ? hLevel : undefined,
75
- css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
95
+ className: ax([styles.reset, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
76
96
  }, children);
77
97
  };
78
- var headingColorStylesMap = {
79
- 'color.text': css({
80
- color: "var(--ds-text, #172B4D)"
81
- }),
82
- 'color.text.inverse': css({
83
- color: "var(--ds-text-inverse, #FFFFFF)"
84
- }),
85
- 'color.text.warning.inverse': css({
86
- color: "var(--ds-text-warning-inverse, #172B4D)"
87
- })
88
- };
89
-
90
- /**
91
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
92
- * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
93
- * @codegenId typography
94
- * @codegenCommand yarn workspace @atlaskit/heading codegen
95
- */
96
- var headingSizeStylesMap = {
97
- xxlarge: css({
98
- 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)"
99
- }),
100
- xlarge: css({
101
- 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)"
102
- }),
103
- large: css({
104
- 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)"
105
- }),
106
- medium: css({
107
- 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)"
108
- }),
109
- small: css({
110
- 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)"
111
- }),
112
- xsmall: css({
113
- 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)"
114
- }),
115
- xxsmall: css({
116
- 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)"
117
- })
118
- };
119
- /**
120
- * @codegenEnd
121
- */
122
-
123
98
  export default Heading;
package/dist/types/heading-context.d.ts CHANGED
@@ -1,16 +1,11 @@
1
1
  import { type ReactNode } from 'react';
2
2
  type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
3
3
  type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
4
- /**
5
- * @internal
6
- * @returns The current heading level context.
7
- */
8
- export declare const useHeadingLevel: () => HeadingLevel;
9
4
  /**
10
5
  * Infers the correct heading markup based on the current heading level context.
11
6
  */
12
7
  export declare const useHeading: (fallback: HeadingElement) => readonly [HeadingLevel, HeadingElement];
13
- export interface HeadingLevelContextProps {
8
+ interface HeadingLevelContextProps {
14
9
  /**
15
10
  * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
16
11
  */
package/dist/types/heading.partial.d.ts CHANGED
@@ -3,8 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ReactNode } from 'react';
6
- import { jsx, type SerializedStyles } from '@emotion/react';
7
- export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
6
+ type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
8
7
  export type HeadingProps = {
9
8
  /**
10
9
  * Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
@@ -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-context.d.ts CHANGED
@@ -1,11 +1,6 @@
1
1
  import { type ReactNode } from 'react';
2
2
  type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
3
3
  type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
4
- /**
5
- * @internal
6
- * @returns The current heading level context.
7
- */
8
- export declare const useHeadingLevel: () => HeadingLevel;
9
4
  /**
10
5
  * Infers the correct heading markup based on the current heading level context.
11
6
  */
@@ -13,7 +8,7 @@ export declare const useHeading: (fallback: HeadingElement) => readonly [
13
8
  HeadingLevel,
14
9
  HeadingElement
15
10
  ];
16
- export interface HeadingLevelContextProps {
11
+ interface HeadingLevelContextProps {
17
12
  /**
18
13
  * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
19
14
  */
package/dist/types-ts4.5/heading.partial.d.ts CHANGED
@@ -3,8 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ReactNode } from 'react';
6
- import { jsx, type SerializedStyles } from '@emotion/react';
7
- export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
6
+ type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
8
7
  export type HeadingProps = {
9
8
  /**
10
9
  * Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
@@ -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": "4.0.1",
3
+ "version": "4.1.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/"
@@ -31,9 +31,11 @@
31
31
  "codegen": "ts-node ./scripts/codegen.tsx"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/primitives": "^13.3.0",
35
- "@atlaskit/tokens": "^3.0.0",
34
+ "@atlaskit/css": "^0.8.0",
35
+ "@atlaskit/primitives": "^13.4.0",
36
+ "@atlaskit/tokens": "^3.3.0",
36
37
  "@babel/runtime": "^7.0.0",
38
+ "@compiled/react": "^0.18.1",
37
39
  "@emotion/react": "^11.7.1"
38
40
  },
39
41
  "peerDependencies": {
@@ -43,14 +45,14 @@
43
45
  "@af/accessibility-testing": "*",
44
46
  "@af/formatting": "*",
45
47
  "@af/integration-testing": "*",
46
- "@atlaskit/ds-lib": "^3.3.0",
48
+ "@af/visual-regression": "*",
49
+ "@atlaskit/button": "^20.4.0",
50
+ "@atlaskit/ds-lib": "^3.5.0",
47
51
  "@atlaskit/ssr": "*",
48
- "@atlaskit/toggle": "^14.0.0",
49
- "@atlaskit/visual-regression": "*",
50
52
  "@atlassian/codegen": "^0.1.0",
51
- "@testing-library/react": "^12.1.5",
53
+ "@testing-library/react": "^13.4.0",
52
54
  "jscodeshift": "^0.13.0",
53
- "react-dom": "^16.8.0",
55
+ "react-dom": "^18.2.0",
54
56
  "ts-node": "^10.9.1",
55
57
  "typescript": "~5.4.2"
56
58
  },
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