@atlaskit/heading 2.4.7 → 3.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 (22) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/heading.partial.js +2 -4
  3. package/dist/cjs/index.js +1 -1
  4. package/dist/es2019/heading.partial.js +2 -3
  5. package/dist/es2019/index.js +1 -1
  6. package/dist/esm/heading.partial.js +2 -3
  7. package/dist/esm/index.js +1 -1
  8. package/dist/types/heading.partial.d.ts +35 -3
  9. package/dist/types/index.d.ts +1 -2
  10. package/dist/types-ts4.5/heading.partial.d.ts +35 -3
  11. package/dist/types-ts4.5/index.d.ts +1 -2
  12. package/package.json +8 -5
  13. package/dist/cjs/heading.js +0 -172
  14. package/dist/cjs/types.js +0 -5
  15. package/dist/es2019/heading.js +0 -160
  16. package/dist/es2019/types.js +0 -1
  17. package/dist/esm/heading.js +0 -165
  18. package/dist/esm/types.js +0 -1
  19. package/dist/types/heading.d.ts +0 -27
  20. package/dist/types/types.d.ts +0 -74
  21. package/dist/types-ts4.5/heading.d.ts +0 -27
  22. 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
+ ## 3.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#166220](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166220)
8
+ [`c02bd4e1ce076`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c02bd4e1ce076) -
9
+ Removed unused types related to the old Heading API. Exported types for the Heading component are
10
+ now `HeadingProps` and `HeadingColor`. Removed circular type references.
11
+
12
+ ## 3.0.0
13
+
14
+ ### Major Changes
15
+
16
+ - [#165728](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165728)
17
+ [`061d0c77948b7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/061d0c77948b7) -
18
+ **Breaking change:** The deprecated `level` prop has been removed. Use the `size` prop instead.
19
+ See https://atlassian.design/components/heading/migration-to-size-prop for migration details.
20
+
21
+ ### Patch Changes
22
+
23
+ - [#166026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166026)
24
+ [`962b5e77810fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/962b5e77810fb) -
25
+ Adds side-effect config to support Compiled css extraction in third-party apps
26
+
3
27
  ## 2.4.7
4
28
 
5
29
  ### Patch Changes
package/dist/cjs/heading.partial.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.headingColorStylesMap = exports.default = void 0;
7
+ exports.default = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
9
  var _react = require("@emotion/react");
10
10
  var _primitives = require("@atlaskit/primitives");
@@ -81,9 +81,7 @@ var Heading = function Heading(_ref) {
81
81
  css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
82
82
  }, children);
83
83
  };
84
-
85
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
86
- var headingColorStylesMap = exports.headingColorStylesMap = {
84
+ var headingColorStylesMap = {
87
85
  'color.text': (0, _react.css)({
88
86
  color: "var(--ds-text, #172B4D)"
89
87
  }),
package/dist/cjs/index.js CHANGED
@@ -16,5 +16,5 @@ Object.defineProperty(exports, "default", {
16
16
  return _heading.default;
17
17
  }
18
18
  });
19
- var _heading = _interopRequireDefault(require("./heading"));
19
+ var _heading = _interopRequireDefault(require("./heading.partial"));
20
20
  var _headingContext = _interopRequireDefault(require("./heading-context"));
package/dist/es2019/heading.partial.js CHANGED
@@ -3,6 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
+
6
7
  import { css, jsx } from '@emotion/react';
7
8
  import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
8
9
  import { useHeading } from './heading-context';
@@ -70,9 +71,7 @@ const Heading = ({
70
71
  css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
71
72
  }, children);
72
73
  };
73
-
74
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
75
- export const headingColorStylesMap = {
74
+ const headingColorStylesMap = {
76
75
  'color.text': css({
77
76
  color: "var(--ds-text, #172B4D)"
78
77
  }),
package/dist/es2019/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { default } from './heading';
1
+ export { default } from './heading.partial';
2
2
  export { default as HeadingContextProvider } from './heading-context';
package/dist/esm/heading.partial.js CHANGED
@@ -4,6 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  * @jsx jsx
5
5
  */
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';
8
9
  import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
9
10
  import { useHeading } from './heading-context';
@@ -73,9 +74,7 @@ var Heading = function Heading(_ref) {
73
74
  css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
74
75
  }, children);
75
76
  };
76
-
77
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
78
- export var headingColorStylesMap = {
77
+ var headingColorStylesMap = {
79
78
  'color.text': css({
80
79
  color: "var(--ds-text, #172B4D)"
81
80
  }),
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { default } from './heading';
1
+ export { default } from './heading.partial';
2
2
  export { default as HeadingContextProvider } from './heading-context';
package/dist/types/heading.partial.d.ts CHANGED
@@ -2,8 +2,41 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
+ import { type ReactNode } from 'react';
5
6
  import { jsx, type SerializedStyles } from '@emotion/react';
6
- import type { HeadingColor, NewHeadingProps } from './types';
7
+ export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
8
+ export type HeadingProps = {
9
+ /**
10
+ * Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
11
+ * Use instead of the deprecated `level` prop.
12
+ *
13
+ */
14
+ size: HeadingSize;
15
+ /**
16
+ * Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
17
+ */
18
+ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
19
+ /**
20
+ * Token representing text color with a built-in fallback value.
21
+ * Will apply inverse text color automatically if placed within a Box with bold background color.
22
+ * Defaults to `color.text`.
23
+ */
24
+ color?: HeadingColor;
25
+ /**
26
+ * The text of the heading.
27
+ */
28
+ children: ReactNode;
29
+ /**
30
+ * Unique identifier for the heading DOM element.
31
+ */
32
+ id?: string;
33
+ /**
34
+ * A `testId` prop is provided for specified elements, which is a unique
35
+ * string that appears as a data attribute `data-testid` in the rendered code,
36
+ * serving as a hook for automated tests.
37
+ */
38
+ testId?: string;
39
+ };
7
40
  /**
8
41
  * __Heading__
9
42
  *
@@ -15,8 +48,7 @@ import type { HeadingColor, NewHeadingProps } from './types';
15
48
  * <Heading size="xxlarge">Page title</Heading>
16
49
  * ```
17
50
  */
18
- declare const Heading: ({ children, size, id, testId, as, color: colorProp }: NewHeadingProps) => jsx.JSX.Element;
19
- export declare const headingColorStylesMap: Record<HeadingColor, SerializedStyles>;
51
+ declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => jsx.JSX.Element;
20
52
  /**
21
53
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
22
54
  * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
package/dist/types/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- export { default } from './heading';
1
+ export { default, type HeadingProps } from './heading.partial';
2
2
  export { default as HeadingContextProvider } from './heading-context';
3
- export type { HeadingProps } from './types';
package/dist/types-ts4.5/heading.partial.d.ts CHANGED
@@ -2,8 +2,41 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
+ import { type ReactNode } from 'react';
5
6
  import { jsx, type SerializedStyles } from '@emotion/react';
6
- import type { HeadingColor, NewHeadingProps } from './types';
7
+ export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
8
+ export type HeadingProps = {
9
+ /**
10
+ * Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
11
+ * Use instead of the deprecated `level` prop.
12
+ *
13
+ */
14
+ size: HeadingSize;
15
+ /**
16
+ * Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
17
+ */
18
+ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
19
+ /**
20
+ * Token representing text color with a built-in fallback value.
21
+ * Will apply inverse text color automatically if placed within a Box with bold background color.
22
+ * Defaults to `color.text`.
23
+ */
24
+ color?: HeadingColor;
25
+ /**
26
+ * The text of the heading.
27
+ */
28
+ children: ReactNode;
29
+ /**
30
+ * Unique identifier for the heading DOM element.
31
+ */
32
+ id?: string;
33
+ /**
34
+ * A `testId` prop is provided for specified elements, which is a unique
35
+ * string that appears as a data attribute `data-testid` in the rendered code,
36
+ * serving as a hook for automated tests.
37
+ */
38
+ testId?: string;
39
+ };
7
40
  /**
8
41
  * __Heading__
9
42
  *
@@ -15,8 +48,7 @@ import type { HeadingColor, NewHeadingProps } from './types';
15
48
  * <Heading size="xxlarge">Page title</Heading>
16
49
  * ```
17
50
  */
18
- declare const Heading: ({ children, size, id, testId, as, color: colorProp }: NewHeadingProps) => jsx.JSX.Element;
19
- export declare const headingColorStylesMap: Record<HeadingColor, SerializedStyles>;
51
+ declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => jsx.JSX.Element;
20
52
  /**
21
53
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
22
54
  * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- export { default } from './heading';
1
+ export { default, type HeadingProps } from './heading.partial';
2
2
  export { default as HeadingContextProvider } from './heading-context';
3
- export type { HeadingProps } from './types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "2.4.7",
3
+ "version": "3.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/"
@@ -12,7 +12,9 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "sideEffects": false,
15
+ "sideEffects": [
16
+ "**/*.compiled.css"
17
+ ],
16
18
  "atlaskit:src": "src/index.tsx",
17
19
  "atlassian": {
18
20
  "team": "Design System Team",
@@ -29,8 +31,8 @@
29
31
  "codegen": "ts-node ./scripts/codegen.tsx"
30
32
  },
31
33
  "dependencies": {
32
- "@atlaskit/primitives": "^13.0.0",
33
- "@atlaskit/tokens": "^2.0.0",
34
+ "@atlaskit/primitives": "^13.2.0",
35
+ "@atlaskit/tokens": "^2.2.0",
34
36
  "@babel/runtime": "^7.0.0",
35
37
  "@emotion/react": "^11.7.1"
36
38
  },
@@ -40,7 +42,8 @@
40
42
  "devDependencies": {
41
43
  "@af/accessibility-testing": "*",
42
44
  "@af/formatting": "*",
43
- "@atlaskit/ds-lib": "^3.1.0",
45
+ "@af/integration-testing": "*",
46
+ "@atlaskit/ds-lib": "^3.2.0",
44
47
  "@atlaskit/ssr": "*",
45
48
  "@atlaskit/toggle": "^13.4.0",
46
49
  "@atlaskit/visual-regression": "*",
package/dist/cjs/heading.js DELETED
@@ -1,172 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _react = require("@emotion/react");
12
- var _headingContext = require("./heading-context");
13
- var _heading = _interopRequireDefault(require("./heading.partial"));
14
- var _excluded = ["level"];
15
- /* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
16
- /**
17
- * @jsxRuntime classic
18
- * @jsx jsx
19
- */
20
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
21
- // https://atlassian.design/foundations/typography
22
- var levelMap = {
23
- h900: 'h1',
24
- h800: 'h1',
25
- h700: 'h2',
26
- h600: 'h3',
27
- h500: 'h4',
28
- h400: 'h5',
29
- h300: 'h6',
30
- // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
31
- h200: 'div',
32
- h100: 'div'
33
- };
34
- var headingResetStyles = (0, _react.css)({
35
- color: "var(--ds-text, #172B4D)",
36
- marginBlock: "var(--ds-space-0, 0px)"
37
- });
38
- var h900Styles = (0, _react.css)({
39
- fontSize: "var(--ds-font-size-600, 35px)",
40
- fontWeight: "var(--ds-font-weight-medium, 500)",
41
- letterSpacing: '-0.01em',
42
- lineHeight: "var(--ds-font-lineHeight-600, 40px)"
43
- });
44
- var h800Styles = (0, _react.css)({
45
- fontSize: "var(--ds-font-size-500, 29px)",
46
- fontWeight: "var(--ds-font-weight-semibold, 600)",
47
- letterSpacing: '-0.01em',
48
- lineHeight: "var(--ds-font-lineHeight-500, 32px)"
49
- });
50
- var h700Styles = (0, _react.css)({
51
- fontSize: "var(--ds-font-size-400, 24px)",
52
- fontWeight: "var(--ds-font-weight-medium, 500)",
53
- letterSpacing: '-0.01em',
54
- lineHeight: "var(--ds-font-lineHeight-400, 28px)"
55
- });
56
- var h600Styles = (0, _react.css)({
57
- fontSize: "var(--ds-font-size-300, 20px)",
58
- fontWeight: "var(--ds-font-weight-medium, 500)",
59
- letterSpacing: '-0.008em',
60
- lineHeight: "var(--ds-font-lineHeight-300, 24px)"
61
- });
62
- var h500Styles = (0, _react.css)({
63
- fontSize: "var(--ds-font-size-200, 16px)",
64
- fontWeight: "var(--ds-font-weight-semibold, 600)",
65
- letterSpacing: '-0.006em',
66
- lineHeight: "var(--ds-font-lineHeight-200, 20px)"
67
- });
68
- var h400Styles = (0, _react.css)({
69
- fontSize: "var(--ds-font-size-100, 14px)",
70
- fontWeight: "var(--ds-font-weight-semibold, 600)",
71
- letterSpacing: '-0.003em',
72
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
73
- });
74
- var h300Styles = (0, _react.css)({
75
- fontSize: "var(--ds-font-size-075, 12px)",
76
- fontWeight: "var(--ds-font-weight-semibold, 600)",
77
- letterSpacing: 0,
78
- lineHeight: "var(--ds-font-lineHeight-100, 16px)",
79
- textTransform: 'uppercase'
80
- });
81
- var h200Styles = (0, _react.css)({
82
- fontSize: "var(--ds-font-size-075, 12px)",
83
- fontWeight: "var(--ds-font-weight-semibold, 600)",
84
- letterSpacing: 0,
85
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
86
- });
87
- var h100Styles = (0, _react.css)({
88
- fontSize: "var(--ds-font-size-050, 11px)",
89
- fontWeight: "var(--ds-font-weight-bold, 700)",
90
- letterSpacing: 0,
91
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
92
- });
93
- var inverseStyles = (0, _react.css)({
94
- color: "var(--ds-text-inverse, #FFF)"
95
- });
96
- var subtlestStyles = (0, _react.css)({
97
- color: "var(--ds-text-subtlest, #6B778C)"
98
- });
99
-
100
- /**
101
- * __Heading__
102
- *
103
- * A heading is a typography component used to display text in different sizes and formats.
104
- *
105
- * @example
106
- *
107
- * ```jsx
108
- * import Heading from '@atlaskit/heading';
109
- *
110
- * const H100 = () => (
111
- * <Heading level="h100">h100</Heading>
112
- * );
113
- * ```
114
- */
115
- var OldHeading = function OldHeading(_ref) {
116
- var children = _ref.children,
117
- level = _ref.level,
118
- id = _ref.id,
119
- testId = _ref.testId,
120
- as = _ref.as,
121
- _ref$color = _ref.color,
122
- color = _ref$color === void 0 ? 'default' : _ref$color;
123
- if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
124
- throw new Error('`as` prop should be a string.');
125
- }
126
- var _useHeading = (0, _headingContext.useHeading)(levelMap[level]),
127
- _useHeading2 = (0, _slicedToArray2.default)(_useHeading, 2),
128
- hLevel = _useHeading2[0],
129
- inferredElement = _useHeading2[1];
130
- var Markup = as || inferredElement;
131
- var isSubtleHeading = level === 'h200' || level === 'h100';
132
- var needsAriaRole = Markup === 'div' && hLevel;
133
- return (0, _react.jsx)(Markup, {
134
- id: id,
135
- "data-testid": testId,
136
- role: needsAriaRole ? 'heading' : undefined,
137
- "aria-level": needsAriaRole ? hLevel : undefined,
138
- css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
139
- }, children);
140
- };
141
-
142
- /**
143
- * __Heading__
144
- *
145
- * A heading is a typography component used to display text in different sizes and formats.
146
- *
147
- * @example
148
- *
149
- * ```jsx
150
- * import Heading from '@atlaskit/heading';
151
- *
152
- * // New component
153
- * <Heading size="xxlarge">Page title</Heading>
154
- *
155
- * // Old component
156
- * const H100 = () => (
157
- * <Heading level="h100">h100</Heading>
158
- * );
159
- * ```
160
- */
161
- var Heading = function Heading(_ref2) {
162
- var level = _ref2.level,
163
- props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
164
- return level ?
165
- // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
166
- (0, _react.jsx)(OldHeading, (0, _extends2.default)({
167
- level: level
168
- }, props)) :
169
- // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
170
- (0, _react.jsx)(_heading.default, props);
171
- };
172
- var _default = exports.default = Heading;
package/dist/cjs/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/dist/es2019/heading.js DELETED
@@ -1,160 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- /* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
3
- /**
4
- * @jsxRuntime classic
5
- * @jsx jsx
6
- */
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { css, jsx } from '@emotion/react';
9
- import { useHeading } from './heading-context';
10
- import NewHeading from './heading.partial';
11
- // https://atlassian.design/foundations/typography
12
- const levelMap = {
13
- h900: 'h1',
14
- h800: 'h1',
15
- h700: 'h2',
16
- h600: 'h3',
17
- h500: 'h4',
18
- h400: 'h5',
19
- h300: 'h6',
20
- // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
21
- h200: 'div',
22
- h100: 'div'
23
- };
24
- const headingResetStyles = css({
25
- color: "var(--ds-text, #172B4D)",
26
- marginBlock: "var(--ds-space-0, 0px)"
27
- });
28
- const h900Styles = css({
29
- fontSize: "var(--ds-font-size-600, 35px)",
30
- fontWeight: "var(--ds-font-weight-medium, 500)",
31
- letterSpacing: '-0.01em',
32
- lineHeight: "var(--ds-font-lineHeight-600, 40px)"
33
- });
34
- const h800Styles = css({
35
- fontSize: "var(--ds-font-size-500, 29px)",
36
- fontWeight: "var(--ds-font-weight-semibold, 600)",
37
- letterSpacing: '-0.01em',
38
- lineHeight: "var(--ds-font-lineHeight-500, 32px)"
39
- });
40
- const h700Styles = css({
41
- fontSize: "var(--ds-font-size-400, 24px)",
42
- fontWeight: "var(--ds-font-weight-medium, 500)",
43
- letterSpacing: '-0.01em',
44
- lineHeight: "var(--ds-font-lineHeight-400, 28px)"
45
- });
46
- const h600Styles = css({
47
- fontSize: "var(--ds-font-size-300, 20px)",
48
- fontWeight: "var(--ds-font-weight-medium, 500)",
49
- letterSpacing: '-0.008em',
50
- lineHeight: "var(--ds-font-lineHeight-300, 24px)"
51
- });
52
- const h500Styles = css({
53
- fontSize: "var(--ds-font-size-200, 16px)",
54
- fontWeight: "var(--ds-font-weight-semibold, 600)",
55
- letterSpacing: '-0.006em',
56
- lineHeight: "var(--ds-font-lineHeight-200, 20px)"
57
- });
58
- const h400Styles = css({
59
- fontSize: "var(--ds-font-size-100, 14px)",
60
- fontWeight: "var(--ds-font-weight-semibold, 600)",
61
- letterSpacing: '-0.003em',
62
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
63
- });
64
- const h300Styles = css({
65
- fontSize: "var(--ds-font-size-075, 12px)",
66
- fontWeight: "var(--ds-font-weight-semibold, 600)",
67
- letterSpacing: 0,
68
- lineHeight: "var(--ds-font-lineHeight-100, 16px)",
69
- textTransform: 'uppercase'
70
- });
71
- const h200Styles = css({
72
- fontSize: "var(--ds-font-size-075, 12px)",
73
- fontWeight: "var(--ds-font-weight-semibold, 600)",
74
- letterSpacing: 0,
75
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
76
- });
77
- const h100Styles = css({
78
- fontSize: "var(--ds-font-size-050, 11px)",
79
- fontWeight: "var(--ds-font-weight-bold, 700)",
80
- letterSpacing: 0,
81
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
82
- });
83
- const inverseStyles = css({
84
- color: "var(--ds-text-inverse, #FFF)"
85
- });
86
- const subtlestStyles = css({
87
- color: "var(--ds-text-subtlest, #6B778C)"
88
- });
89
-
90
- /**
91
- * __Heading__
92
- *
93
- * A heading is a typography component used to display text in different sizes and formats.
94
- *
95
- * @example
96
- *
97
- * ```jsx
98
- * import Heading from '@atlaskit/heading';
99
- *
100
- * const H100 = () => (
101
- * <Heading level="h100">h100</Heading>
102
- * );
103
- * ```
104
- */
105
- const OldHeading = ({
106
- children,
107
- level,
108
- id,
109
- testId,
110
- as,
111
- color = 'default'
112
- }) => {
113
- if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
114
- throw new Error('`as` prop should be a string.');
115
- }
116
- const [hLevel, inferredElement] = useHeading(levelMap[level]);
117
- const Markup = as || inferredElement;
118
- const isSubtleHeading = level === 'h200' || level === 'h100';
119
- const needsAriaRole = Markup === 'div' && hLevel;
120
- return jsx(Markup, {
121
- id: id,
122
- "data-testid": testId,
123
- role: needsAriaRole ? 'heading' : undefined,
124
- "aria-level": needsAriaRole ? hLevel : undefined,
125
- css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
126
- }, children);
127
- };
128
-
129
- /**
130
- * __Heading__
131
- *
132
- * A heading is a typography component used to display text in different sizes and formats.
133
- *
134
- * @example
135
- *
136
- * ```jsx
137
- * import Heading from '@atlaskit/heading';
138
- *
139
- * // New component
140
- * <Heading size="xxlarge">Page title</Heading>
141
- *
142
- * // Old component
143
- * const H100 = () => (
144
- * <Heading level="h100">h100</Heading>
145
- * );
146
- * ```
147
- */
148
- const Heading = ({
149
- level,
150
- ...props
151
- }) => {
152
- return level ?
153
- // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
154
- jsx(OldHeading, _extends({
155
- level: level
156
- }, props)) :
157
- // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
158
- jsx(NewHeading, props);
159
- };
160
- export default Heading;
package/dist/es2019/types.js DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/esm/heading.js DELETED
@@ -1,165 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
- var _excluded = ["level"];
5
- /* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
6
- /**
7
- * @jsxRuntime classic
8
- * @jsx jsx
9
- */
10
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
- import { css, jsx } from '@emotion/react';
12
- import { useHeading } from './heading-context';
13
- import NewHeading from './heading.partial';
14
- // https://atlassian.design/foundations/typography
15
- var levelMap = {
16
- h900: 'h1',
17
- h800: 'h1',
18
- h700: 'h2',
19
- h600: 'h3',
20
- h500: 'h4',
21
- h400: 'h5',
22
- h300: 'h6',
23
- // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
24
- h200: 'div',
25
- h100: 'div'
26
- };
27
- var headingResetStyles = css({
28
- color: "var(--ds-text, #172B4D)",
29
- marginBlock: "var(--ds-space-0, 0px)"
30
- });
31
- var h900Styles = css({
32
- fontSize: "var(--ds-font-size-600, 35px)",
33
- fontWeight: "var(--ds-font-weight-medium, 500)",
34
- letterSpacing: '-0.01em',
35
- lineHeight: "var(--ds-font-lineHeight-600, 40px)"
36
- });
37
- var h800Styles = css({
38
- fontSize: "var(--ds-font-size-500, 29px)",
39
- fontWeight: "var(--ds-font-weight-semibold, 600)",
40
- letterSpacing: '-0.01em',
41
- lineHeight: "var(--ds-font-lineHeight-500, 32px)"
42
- });
43
- var h700Styles = css({
44
- fontSize: "var(--ds-font-size-400, 24px)",
45
- fontWeight: "var(--ds-font-weight-medium, 500)",
46
- letterSpacing: '-0.01em',
47
- lineHeight: "var(--ds-font-lineHeight-400, 28px)"
48
- });
49
- var h600Styles = css({
50
- fontSize: "var(--ds-font-size-300, 20px)",
51
- fontWeight: "var(--ds-font-weight-medium, 500)",
52
- letterSpacing: '-0.008em',
53
- lineHeight: "var(--ds-font-lineHeight-300, 24px)"
54
- });
55
- var h500Styles = css({
56
- fontSize: "var(--ds-font-size-200, 16px)",
57
- fontWeight: "var(--ds-font-weight-semibold, 600)",
58
- letterSpacing: '-0.006em',
59
- lineHeight: "var(--ds-font-lineHeight-200, 20px)"
60
- });
61
- var h400Styles = css({
62
- fontSize: "var(--ds-font-size-100, 14px)",
63
- fontWeight: "var(--ds-font-weight-semibold, 600)",
64
- letterSpacing: '-0.003em',
65
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
66
- });
67
- var h300Styles = css({
68
- fontSize: "var(--ds-font-size-075, 12px)",
69
- fontWeight: "var(--ds-font-weight-semibold, 600)",
70
- letterSpacing: 0,
71
- lineHeight: "var(--ds-font-lineHeight-100, 16px)",
72
- textTransform: 'uppercase'
73
- });
74
- var h200Styles = css({
75
- fontSize: "var(--ds-font-size-075, 12px)",
76
- fontWeight: "var(--ds-font-weight-semibold, 600)",
77
- letterSpacing: 0,
78
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
79
- });
80
- var h100Styles = css({
81
- fontSize: "var(--ds-font-size-050, 11px)",
82
- fontWeight: "var(--ds-font-weight-bold, 700)",
83
- letterSpacing: 0,
84
- lineHeight: "var(--ds-font-lineHeight-100, 16px)"
85
- });
86
- var inverseStyles = css({
87
- color: "var(--ds-text-inverse, #FFF)"
88
- });
89
- var subtlestStyles = css({
90
- color: "var(--ds-text-subtlest, #6B778C)"
91
- });
92
-
93
- /**
94
- * __Heading__
95
- *
96
- * A heading is a typography component used to display text in different sizes and formats.
97
- *
98
- * @example
99
- *
100
- * ```jsx
101
- * import Heading from '@atlaskit/heading';
102
- *
103
- * const H100 = () => (
104
- * <Heading level="h100">h100</Heading>
105
- * );
106
- * ```
107
- */
108
- var OldHeading = function OldHeading(_ref) {
109
- var children = _ref.children,
110
- level = _ref.level,
111
- id = _ref.id,
112
- testId = _ref.testId,
113
- as = _ref.as,
114
- _ref$color = _ref.color,
115
- color = _ref$color === void 0 ? 'default' : _ref$color;
116
- if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
117
- throw new Error('`as` prop should be a string.');
118
- }
119
- var _useHeading = useHeading(levelMap[level]),
120
- _useHeading2 = _slicedToArray(_useHeading, 2),
121
- hLevel = _useHeading2[0],
122
- inferredElement = _useHeading2[1];
123
- var Markup = as || inferredElement;
124
- var isSubtleHeading = level === 'h200' || level === 'h100';
125
- var needsAriaRole = Markup === 'div' && hLevel;
126
- return jsx(Markup, {
127
- id: id,
128
- "data-testid": testId,
129
- role: needsAriaRole ? 'heading' : undefined,
130
- "aria-level": needsAriaRole ? hLevel : undefined,
131
- css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
132
- }, children);
133
- };
134
-
135
- /**
136
- * __Heading__
137
- *
138
- * A heading is a typography component used to display text in different sizes and formats.
139
- *
140
- * @example
141
- *
142
- * ```jsx
143
- * import Heading from '@atlaskit/heading';
144
- *
145
- * // New component
146
- * <Heading size="xxlarge">Page title</Heading>
147
- *
148
- * // Old component
149
- * const H100 = () => (
150
- * <Heading level="h100">h100</Heading>
151
- * );
152
- * ```
153
- */
154
- var Heading = function Heading(_ref2) {
155
- var level = _ref2.level,
156
- props = _objectWithoutProperties(_ref2, _excluded);
157
- return level ?
158
- // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
159
- jsx(OldHeading, _extends({
160
- level: level
161
- }, props)) :
162
- // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
163
- jsx(NewHeading, props);
164
- };
165
- export default Heading;
package/dist/esm/types.js DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/types/heading.d.ts DELETED
@@ -1,27 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { jsx } from '@emotion/react';
6
- import type { HeadingProps } from './types';
7
- /**
8
- * __Heading__
9
- *
10
- * A heading is a typography component used to display text in different sizes and formats.
11
- *
12
- * @example
13
- *
14
- * ```jsx
15
- * import Heading from '@atlaskit/heading';
16
- *
17
- * // New component
18
- * <Heading size="xxlarge">Page title</Heading>
19
- *
20
- * // Old component
21
- * const H100 = () => (
22
- * <Heading level="h100">h100</Heading>
23
- * );
24
- * ```
25
- */
26
- declare const Heading: ({ level, ...props }: HeadingProps) => jsx.JSX.Element;
27
- export default Heading;
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 {};
package/dist/types-ts4.5/heading.d.ts DELETED
@@ -1,27 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { jsx } from '@emotion/react';
6
- import type { HeadingProps } from './types';
7
- /**
8
- * __Heading__
9
- *
10
- * A heading is a typography component used to display text in different sizes and formats.
11
- *
12
- * @example
13
- *
14
- * ```jsx
15
- * import Heading from '@atlaskit/heading';
16
- *
17
- * // New component
18
- * <Heading size="xxlarge">Page title</Heading>
19
- *
20
- * // Old component
21
- * const H100 = () => (
22
- * <Heading level="h100">h100</Heading>
23
- * );
24
- * ```
25
- */
26
- declare const Heading: ({ level, ...props }: HeadingProps) => jsx.JSX.Element;
27
- export default Heading;
package/dist/types-ts4.5/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 {};