@atlaskit/heading 3.0.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.
- package/CHANGELOG.md +24 -0
- package/dist/cjs/heading.partial.compiled.css +13 -0
- package/dist/cjs/heading.partial.js +38 -58
- package/dist/es2019/heading.partial.compiled.css +13 -0
- package/dist/es2019/heading.partial.js +35 -58
- package/dist/esm/heading.partial.compiled.css +13 -0
- package/dist/esm/heading.partial.js +36 -58
- package/dist/types/heading.partial.d.ts +65 -22
- package/dist/types/index.d.ts +1 -2
- package/dist/types-ts4.5/heading.partial.d.ts +65 -22
- package/dist/types-ts4.5/index.d.ts +1 -2
- package/package.json +7 -7
- package/scripts/codegen.tsx +4 -6
- package/dist/cjs/types.js +0 -5
- package/dist/es2019/types.js +0 -1
- package/dist/esm/types.js +0 -1
- package/dist/types/types.d.ts +0 -74
- package/dist/types-ts4.5/types.d.ts +0 -74
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
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
|
+
|
|
18
|
+
## 3.1.0
|
|
19
|
+
|
|
20
|
+
### Minor Changes
|
|
21
|
+
|
|
22
|
+
- [#166220](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166220)
|
|
23
|
+
[`c02bd4e1ce076`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c02bd4e1ce076) -
|
|
24
|
+
Removed unused types related to the old Heading API. Exported types for the Heading component are
|
|
25
|
+
now `HeadingProps` and `HeadingColor`. Removed circular type references.
|
|
26
|
+
|
|
3
27
|
## 3.0.0
|
|
4
28
|
|
|
5
29
|
### Major Changes
|
|
@@ -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)}
|
|
@@ -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
|
-
|
|
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
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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;
|
|
@@ -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)}
|
|
@@ -1,9 +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
|
-
import
|
|
3
|
+
import "./heading.partial.compiled.css";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
7
6
|
import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
|
|
8
7
|
import { useHeading } from './heading-context';
|
|
9
8
|
const sizeTagMap = {
|
|
@@ -15,11 +14,34 @@ const sizeTagMap = {
|
|
|
15
14
|
xsmall: 'h5',
|
|
16
15
|
xxsmall: 'h6'
|
|
17
16
|
};
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
+
|
|
23
45
|
const useColor = colorProp => {
|
|
24
46
|
const surface = UNSAFE_useSurface();
|
|
25
47
|
|
|
@@ -57,62 +79,17 @@ const Heading = ({
|
|
|
57
79
|
}
|
|
58
80
|
|
|
59
81
|
// Technically size can be undefined here due to how the types work.
|
|
60
|
-
// Once removing the level prop this assertion can be removed since size
|
|
82
|
+
// Once removing the level prop this assertion can be removed since size ws ill be a required prop.
|
|
61
83
|
const [hLevel, inferredElement] = useHeading(sizeTagMap[size]);
|
|
62
84
|
const Component = as || inferredElement;
|
|
63
85
|
const needsAriaRole = Component === 'div' && hLevel;
|
|
64
86
|
const color = useColor(colorProp);
|
|
65
|
-
return
|
|
87
|
+
return /*#__PURE__*/React.createElement(Component, {
|
|
66
88
|
id: id,
|
|
67
89
|
"data-testid": testId,
|
|
68
90
|
role: needsAriaRole ? 'heading' : undefined,
|
|
69
91
|
"aria-level": needsAriaRole ? hLevel : undefined,
|
|
70
|
-
|
|
92
|
+
className: ax([styles.root, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
|
|
71
93
|
}, children);
|
|
72
94
|
};
|
|
73
|
-
const headingColorStylesMap = {
|
|
74
|
-
'color.text': css({
|
|
75
|
-
color: "var(--ds-text, #172B4D)"
|
|
76
|
-
}),
|
|
77
|
-
'color.text.inverse': css({
|
|
78
|
-
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
79
|
-
}),
|
|
80
|
-
'color.text.warning.inverse': css({
|
|
81
|
-
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
82
|
-
})
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
87
|
-
* @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
|
|
88
|
-
* @codegenId typography
|
|
89
|
-
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
90
|
-
*/
|
|
91
|
-
const headingSizeStylesMap = {
|
|
92
|
-
xxlarge: css({
|
|
93
|
-
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)"
|
|
94
|
-
}),
|
|
95
|
-
xlarge: css({
|
|
96
|
-
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)"
|
|
97
|
-
}),
|
|
98
|
-
large: css({
|
|
99
|
-
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)"
|
|
100
|
-
}),
|
|
101
|
-
medium: css({
|
|
102
|
-
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)"
|
|
103
|
-
}),
|
|
104
|
-
small: css({
|
|
105
|
-
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)"
|
|
106
|
-
}),
|
|
107
|
-
xsmall: css({
|
|
108
|
-
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)"
|
|
109
|
-
}),
|
|
110
|
-
xxsmall: css({
|
|
111
|
-
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)"
|
|
112
|
-
})
|
|
113
|
-
};
|
|
114
|
-
/**
|
|
115
|
-
* @codegenEnd
|
|
116
|
-
*/
|
|
117
|
-
|
|
118
95
|
export default Heading;
|
|
@@ -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)}
|
|
@@ -1,10 +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
|
-
*
|
|
4
|
-
|
|
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
8
|
import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
|
|
9
9
|
import { useHeading } from './heading-context';
|
|
10
10
|
var sizeTagMap = {
|
|
@@ -16,11 +16,34 @@ var sizeTagMap = {
|
|
|
16
16
|
xsmall: 'h5',
|
|
17
17
|
xxsmall: 'h6'
|
|
18
18
|
};
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
+
|
|
24
47
|
var useColor = function useColor(colorProp) {
|
|
25
48
|
var surface = UNSAFE_useSurface();
|
|
26
49
|
|
|
@@ -57,7 +80,7 @@ var Heading = function Heading(_ref) {
|
|
|
57
80
|
}
|
|
58
81
|
|
|
59
82
|
// Technically size can be undefined here due to how the types work.
|
|
60
|
-
// Once removing the level prop this assertion can be removed since size
|
|
83
|
+
// Once removing the level prop this assertion can be removed since size ws ill be a required prop.
|
|
61
84
|
var _useHeading = useHeading(sizeTagMap[size]),
|
|
62
85
|
_useHeading2 = _slicedToArray(_useHeading, 2),
|
|
63
86
|
hLevel = _useHeading2[0],
|
|
@@ -65,57 +88,12 @@ var Heading = function Heading(_ref) {
|
|
|
65
88
|
var Component = as || inferredElement;
|
|
66
89
|
var needsAriaRole = Component === 'div' && hLevel;
|
|
67
90
|
var color = useColor(colorProp);
|
|
68
|
-
return
|
|
91
|
+
return /*#__PURE__*/React.createElement(Component, {
|
|
69
92
|
id: id,
|
|
70
93
|
"data-testid": testId,
|
|
71
94
|
role: needsAriaRole ? 'heading' : undefined,
|
|
72
95
|
"aria-level": needsAriaRole ? hLevel : undefined,
|
|
73
|
-
|
|
96
|
+
className: ax([styles.root, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
|
|
74
97
|
}, children);
|
|
75
98
|
};
|
|
76
|
-
var headingColorStylesMap = {
|
|
77
|
-
'color.text': css({
|
|
78
|
-
color: "var(--ds-text, #172B4D)"
|
|
79
|
-
}),
|
|
80
|
-
'color.text.inverse': css({
|
|
81
|
-
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
82
|
-
}),
|
|
83
|
-
'color.text.warning.inverse': css({
|
|
84
|
-
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
85
|
-
})
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
90
|
-
* @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
|
|
91
|
-
* @codegenId typography
|
|
92
|
-
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
93
|
-
*/
|
|
94
|
-
var headingSizeStylesMap = {
|
|
95
|
-
xxlarge: css({
|
|
96
|
-
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)"
|
|
97
|
-
}),
|
|
98
|
-
xlarge: css({
|
|
99
|
-
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)"
|
|
100
|
-
}),
|
|
101
|
-
large: css({
|
|
102
|
-
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)"
|
|
103
|
-
}),
|
|
104
|
-
medium: css({
|
|
105
|
-
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)"
|
|
106
|
-
}),
|
|
107
|
-
small: css({
|
|
108
|
-
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)"
|
|
109
|
-
}),
|
|
110
|
-
xsmall: css({
|
|
111
|
-
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)"
|
|
112
|
-
}),
|
|
113
|
-
xxsmall: css({
|
|
114
|
-
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)"
|
|
115
|
-
})
|
|
116
|
-
};
|
|
117
|
-
/**
|
|
118
|
-
* @codegenEnd
|
|
119
|
-
*/
|
|
120
|
-
|
|
121
99
|
export default Heading;
|
|
@@ -2,8 +2,70 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import {
|
|
6
|
-
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
|
|
7
|
+
export type HeadingProps = {
|
|
8
|
+
/**
|
|
9
|
+
* Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
|
|
10
|
+
* Use instead of the deprecated `level` prop.
|
|
11
|
+
*
|
|
12
|
+
*/
|
|
13
|
+
size: HeadingSize;
|
|
14
|
+
/**
|
|
15
|
+
* Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
|
|
16
|
+
*/
|
|
17
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
|
|
18
|
+
/**
|
|
19
|
+
* Token representing text color with a built-in fallback value.
|
|
20
|
+
* Will apply inverse text color automatically if placed within a Box with bold background color.
|
|
21
|
+
* Defaults to `color.text`.
|
|
22
|
+
*/
|
|
23
|
+
color?: HeadingColor;
|
|
24
|
+
/**
|
|
25
|
+
* The text of the heading.
|
|
26
|
+
*/
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
/**
|
|
29
|
+
* Unique identifier for the heading DOM element.
|
|
30
|
+
*/
|
|
31
|
+
id?: string;
|
|
32
|
+
/**
|
|
33
|
+
* A `testId` prop is provided for specified elements, which is a unique
|
|
34
|
+
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
35
|
+
* serving as a hook for automated tests.
|
|
36
|
+
*/
|
|
37
|
+
testId?: string;
|
|
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;
|
|
7
69
|
/**
|
|
8
70
|
* __Heading__
|
|
9
71
|
*
|
|
@@ -15,24 +77,5 @@ import type { NewHeadingProps } from './types';
|
|
|
15
77
|
* <Heading size="xxlarge">Page title</Heading>
|
|
16
78
|
* ```
|
|
17
79
|
*/
|
|
18
|
-
declare const Heading: ({ children, size, id, testId, as, color: colorProp }:
|
|
19
|
-
/**
|
|
20
|
-
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
21
|
-
* @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
|
|
22
|
-
* @codegenId typography
|
|
23
|
-
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
24
|
-
*/
|
|
25
|
-
declare const headingSizeStylesMap: {
|
|
26
|
-
xxlarge: SerializedStyles;
|
|
27
|
-
xlarge: SerializedStyles;
|
|
28
|
-
large: SerializedStyles;
|
|
29
|
-
medium: SerializedStyles;
|
|
30
|
-
small: SerializedStyles;
|
|
31
|
-
xsmall: SerializedStyles;
|
|
32
|
-
xxsmall: SerializedStyles;
|
|
33
|
-
};
|
|
34
|
-
export type HeadingSize = keyof typeof headingSizeStylesMap;
|
|
35
|
-
/**
|
|
36
|
-
* @codegenEnd
|
|
37
|
-
*/
|
|
80
|
+
declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => JSX.Element;
|
|
38
81
|
export default Heading;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -2,8 +2,70 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import {
|
|
6
|
-
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
|
|
7
|
+
export type HeadingProps = {
|
|
8
|
+
/**
|
|
9
|
+
* Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
|
|
10
|
+
* Use instead of the deprecated `level` prop.
|
|
11
|
+
*
|
|
12
|
+
*/
|
|
13
|
+
size: HeadingSize;
|
|
14
|
+
/**
|
|
15
|
+
* Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
|
|
16
|
+
*/
|
|
17
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
|
|
18
|
+
/**
|
|
19
|
+
* Token representing text color with a built-in fallback value.
|
|
20
|
+
* Will apply inverse text color automatically if placed within a Box with bold background color.
|
|
21
|
+
* Defaults to `color.text`.
|
|
22
|
+
*/
|
|
23
|
+
color?: HeadingColor;
|
|
24
|
+
/**
|
|
25
|
+
* The text of the heading.
|
|
26
|
+
*/
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
/**
|
|
29
|
+
* Unique identifier for the heading DOM element.
|
|
30
|
+
*/
|
|
31
|
+
id?: string;
|
|
32
|
+
/**
|
|
33
|
+
* A `testId` prop is provided for specified elements, which is a unique
|
|
34
|
+
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
35
|
+
* serving as a hook for automated tests.
|
|
36
|
+
*/
|
|
37
|
+
testId?: string;
|
|
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;
|
|
7
69
|
/**
|
|
8
70
|
* __Heading__
|
|
9
71
|
*
|
|
@@ -15,24 +77,5 @@ import type { NewHeadingProps } from './types';
|
|
|
15
77
|
* <Heading size="xxlarge">Page title</Heading>
|
|
16
78
|
* ```
|
|
17
79
|
*/
|
|
18
|
-
declare const Heading: ({ children, size, id, testId, as, color: colorProp }:
|
|
19
|
-
/**
|
|
20
|
-
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
21
|
-
* @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
|
|
22
|
-
* @codegenId typography
|
|
23
|
-
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
24
|
-
*/
|
|
25
|
-
declare const headingSizeStylesMap: {
|
|
26
|
-
xxlarge: SerializedStyles;
|
|
27
|
-
xlarge: SerializedStyles;
|
|
28
|
-
large: SerializedStyles;
|
|
29
|
-
medium: SerializedStyles;
|
|
30
|
-
small: SerializedStyles;
|
|
31
|
-
xsmall: SerializedStyles;
|
|
32
|
-
xxsmall: SerializedStyles;
|
|
33
|
-
};
|
|
34
|
-
export type HeadingSize = keyof typeof headingSizeStylesMap;
|
|
35
|
-
/**
|
|
36
|
-
* @codegenEnd
|
|
37
|
-
*/
|
|
80
|
+
declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => JSX.Element;
|
|
38
81
|
export default Heading;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/heading",
|
|
3
|
-
"version": "
|
|
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": "
|
|
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.
|
|
35
|
-
"@atlaskit/tokens": "^2.
|
|
34
|
+
"@atlaskit/primitives": "^13.3.0",
|
|
35
|
+
"@atlaskit/tokens": "^2.4.0",
|
|
36
36
|
"@babel/runtime": "^7.0.0",
|
|
37
|
-
"@
|
|
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.
|
|
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
|
-
"
|
|
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
|
-
) + `\
|
|
37
|
+
) + `\ntype HeadingSize = keyof typeof headingSizeStylesMap;\n`
|
|
40
38
|
);
|
|
41
39
|
};
|
|
42
40
|
|
package/dist/cjs/types.js
DELETED
package/dist/es2019/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/esm/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/types/types.d.ts
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import { type HeadingSize } from './heading.partial';
|
|
3
|
-
type HeadingPropsBase = {
|
|
4
|
-
/**
|
|
5
|
-
* A `testId` prop is provided for specified elements, which is a unique
|
|
6
|
-
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
7
|
-
* serving as a hook for automated tests.
|
|
8
|
-
*/
|
|
9
|
-
testId?: string;
|
|
10
|
-
/**
|
|
11
|
-
* The text of the heading.
|
|
12
|
-
*/
|
|
13
|
-
children: ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Unique identifier for the heading DOM element.
|
|
16
|
-
*/
|
|
17
|
-
id?: string;
|
|
18
|
-
/**
|
|
19
|
-
* Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
|
|
20
|
-
*/
|
|
21
|
-
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
|
|
22
|
-
};
|
|
23
|
-
export type OldHeadingProps = HeadingPropsBase & {
|
|
24
|
-
/**
|
|
25
|
-
* Text color of the heading. Use `"inverse"` option for a light text color over a dark background.
|
|
26
|
-
* Defaults to `"default"`.
|
|
27
|
-
*/
|
|
28
|
-
color?: 'inverse' | 'default';
|
|
29
|
-
/**
|
|
30
|
-
* @private
|
|
31
|
-
* @deprecated Use `size` prop instead.
|
|
32
|
-
* The heading level as defined by the Atlassian Design [typography foundations](/foundations/typography/). The `level` prop affects the actual HTML element rendered in the DOM:
|
|
33
|
-
* @example
|
|
34
|
-
* ```js
|
|
35
|
-
* const levelMap = {
|
|
36
|
-
* h900: 'h1',
|
|
37
|
-
* h800: 'h1',
|
|
38
|
-
* h700: 'h2',
|
|
39
|
-
* h600: 'h3',
|
|
40
|
-
* h500: 'h4',
|
|
41
|
-
* h400: 'h5',
|
|
42
|
-
* h300: 'h6',
|
|
43
|
-
* h200: 'div',
|
|
44
|
-
* h100: 'div',
|
|
45
|
-
* };
|
|
46
|
-
* ```
|
|
47
|
-
*
|
|
48
|
-
* It's important to note that the final DOM may be impacted by the parent heading level context because of inferred accessibility level correction.
|
|
49
|
-
* Therefore, it is recommended to check the final DOM to confirm the actual rendered HTML element.
|
|
50
|
-
*/
|
|
51
|
-
level: 'h900' | 'h800' | 'h700' | 'h600' | 'h500' | 'h400' | 'h300' | 'h200' | 'h100';
|
|
52
|
-
/**
|
|
53
|
-
* Heading size. Use instead of the deprecated `level` prop.
|
|
54
|
-
*/
|
|
55
|
-
size?: never;
|
|
56
|
-
};
|
|
57
|
-
export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
|
|
58
|
-
export type NewHeadingProps = HeadingPropsBase & {
|
|
59
|
-
/**
|
|
60
|
-
* Token representing text color with a built-in fallback value.
|
|
61
|
-
* Will apply inverse text color automatically if placed within a Box with bold background color.
|
|
62
|
-
* Defaults to `color.text`.
|
|
63
|
-
*/
|
|
64
|
-
color?: HeadingColor;
|
|
65
|
-
/**
|
|
66
|
-
* Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
|
|
67
|
-
* Use instead of the deprecated `level` prop.
|
|
68
|
-
*
|
|
69
|
-
*/
|
|
70
|
-
size: HeadingSize;
|
|
71
|
-
level?: never;
|
|
72
|
-
};
|
|
73
|
-
export type HeadingProps = OldHeadingProps | NewHeadingProps;
|
|
74
|
-
export {};
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import { type HeadingSize } from './heading.partial';
|
|
3
|
-
type HeadingPropsBase = {
|
|
4
|
-
/**
|
|
5
|
-
* A `testId` prop is provided for specified elements, which is a unique
|
|
6
|
-
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
7
|
-
* serving as a hook for automated tests.
|
|
8
|
-
*/
|
|
9
|
-
testId?: string;
|
|
10
|
-
/**
|
|
11
|
-
* The text of the heading.
|
|
12
|
-
*/
|
|
13
|
-
children: ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Unique identifier for the heading DOM element.
|
|
16
|
-
*/
|
|
17
|
-
id?: string;
|
|
18
|
-
/**
|
|
19
|
-
* Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
|
|
20
|
-
*/
|
|
21
|
-
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
|
|
22
|
-
};
|
|
23
|
-
export type OldHeadingProps = HeadingPropsBase & {
|
|
24
|
-
/**
|
|
25
|
-
* Text color of the heading. Use `"inverse"` option for a light text color over a dark background.
|
|
26
|
-
* Defaults to `"default"`.
|
|
27
|
-
*/
|
|
28
|
-
color?: 'inverse' | 'default';
|
|
29
|
-
/**
|
|
30
|
-
* @private
|
|
31
|
-
* @deprecated Use `size` prop instead.
|
|
32
|
-
* The heading level as defined by the Atlassian Design [typography foundations](/foundations/typography/). The `level` prop affects the actual HTML element rendered in the DOM:
|
|
33
|
-
* @example
|
|
34
|
-
* ```js
|
|
35
|
-
* const levelMap = {
|
|
36
|
-
* h900: 'h1',
|
|
37
|
-
* h800: 'h1',
|
|
38
|
-
* h700: 'h2',
|
|
39
|
-
* h600: 'h3',
|
|
40
|
-
* h500: 'h4',
|
|
41
|
-
* h400: 'h5',
|
|
42
|
-
* h300: 'h6',
|
|
43
|
-
* h200: 'div',
|
|
44
|
-
* h100: 'div',
|
|
45
|
-
* };
|
|
46
|
-
* ```
|
|
47
|
-
*
|
|
48
|
-
* It's important to note that the final DOM may be impacted by the parent heading level context because of inferred accessibility level correction.
|
|
49
|
-
* Therefore, it is recommended to check the final DOM to confirm the actual rendered HTML element.
|
|
50
|
-
*/
|
|
51
|
-
level: 'h900' | 'h800' | 'h700' | 'h600' | 'h500' | 'h400' | 'h300' | 'h200' | 'h100';
|
|
52
|
-
/**
|
|
53
|
-
* Heading size. Use instead of the deprecated `level` prop.
|
|
54
|
-
*/
|
|
55
|
-
size?: never;
|
|
56
|
-
};
|
|
57
|
-
export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
|
|
58
|
-
export type NewHeadingProps = HeadingPropsBase & {
|
|
59
|
-
/**
|
|
60
|
-
* Token representing text color with a built-in fallback value.
|
|
61
|
-
* Will apply inverse text color automatically if placed within a Box with bold background color.
|
|
62
|
-
* Defaults to `color.text`.
|
|
63
|
-
*/
|
|
64
|
-
color?: HeadingColor;
|
|
65
|
-
/**
|
|
66
|
-
* Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
|
|
67
|
-
* Use instead of the deprecated `level` prop.
|
|
68
|
-
*
|
|
69
|
-
*/
|
|
70
|
-
size: HeadingSize;
|
|
71
|
-
level?: never;
|
|
72
|
-
};
|
|
73
|
-
export type HeadingProps = OldHeadingProps | NewHeadingProps;
|
|
74
|
-
export {};
|