@atlaskit/heading 5.2.7 → 5.2.8
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 +8 -0
- package/dist/cjs/heading.partial.js +2 -2
- package/dist/es2019/heading.partial.js +2 -2
- package/dist/esm/heading.partial.js +2 -2
- package/dist/types/heading.partial.d.ts +17 -16
- package/dist/types-ts4.5/heading.partial.d.ts +17 -16
- package/offerings.json +61 -0
- package/package.json +5 -5
- package/scripts/codegen.tsx +13 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/heading
|
|
2
2
|
|
|
3
|
+
## 5.2.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`39e543109ec09`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/39e543109ec09) -
|
|
8
|
+
add type info to forwardRef components
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 5.2.7
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* heading.partial.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* heading.partial.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -37,7 +37,7 @@ var headingColorStylesMap = {
|
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
39
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
40
|
-
* @codegen <<SignedSource::
|
|
40
|
+
* @codegen <<SignedSource::406afb01e5634a0b459f50de660d8c2e>>
|
|
41
41
|
* @codegenId typography
|
|
42
42
|
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
43
43
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* heading.partial.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* heading.partial.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import "./heading.partial.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -27,7 +27,7 @@ const headingColorStylesMap = {
|
|
|
27
27
|
|
|
28
28
|
/**
|
|
29
29
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
30
|
-
* @codegen <<SignedSource::
|
|
30
|
+
* @codegen <<SignedSource::406afb01e5634a0b459f50de660d8c2e>>
|
|
31
31
|
* @codegenId typography
|
|
32
32
|
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
33
33
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* heading.partial.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* heading.partial.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import "./heading.partial.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -28,7 +28,7 @@ var headingColorStylesMap = {
|
|
|
28
28
|
|
|
29
29
|
/**
|
|
30
30
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
31
|
-
* @codegen <<SignedSource::
|
|
31
|
+
* @codegen <<SignedSource::406afb01e5634a0b459f50de660d8c2e>>
|
|
32
32
|
* @codegenId typography
|
|
33
33
|
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
34
34
|
*/
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import { type ReactNode } from 'react';
|
|
6
|
+
import { type CompiledStyles } from '@compiled/react';
|
|
6
7
|
type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
|
|
7
8
|
export type HeadingProps = {
|
|
8
9
|
/**
|
|
@@ -38,31 +39,31 @@ export type HeadingProps = {
|
|
|
38
39
|
};
|
|
39
40
|
/**
|
|
40
41
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
41
|
-
* @codegen <<SignedSource::
|
|
42
|
+
* @codegen <<SignedSource::406afb01e5634a0b459f50de660d8c2e>>
|
|
42
43
|
* @codegenId typography
|
|
43
44
|
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
44
45
|
*/
|
|
45
46
|
declare const headingSizeStylesMap: {
|
|
46
|
-
readonly xxlarge:
|
|
47
|
-
font:
|
|
47
|
+
readonly xxlarge: CompiledStyles<{
|
|
48
|
+
font: 'var(--ds-font-heading-xxlarge)';
|
|
48
49
|
}>;
|
|
49
|
-
readonly xlarge:
|
|
50
|
-
font:
|
|
50
|
+
readonly xlarge: CompiledStyles<{
|
|
51
|
+
font: 'var(--ds-font-heading-xlarge)';
|
|
51
52
|
}>;
|
|
52
|
-
readonly large:
|
|
53
|
-
font:
|
|
53
|
+
readonly large: CompiledStyles<{
|
|
54
|
+
font: 'var(--ds-font-heading-large)';
|
|
54
55
|
}>;
|
|
55
|
-
readonly medium:
|
|
56
|
-
font:
|
|
56
|
+
readonly medium: CompiledStyles<{
|
|
57
|
+
font: 'var(--ds-font-heading-medium)';
|
|
57
58
|
}>;
|
|
58
|
-
readonly small:
|
|
59
|
-
font:
|
|
59
|
+
readonly small: CompiledStyles<{
|
|
60
|
+
font: 'var(--ds-font-heading-small)';
|
|
60
61
|
}>;
|
|
61
|
-
readonly xsmall:
|
|
62
|
-
font:
|
|
62
|
+
readonly xsmall: CompiledStyles<{
|
|
63
|
+
font: 'var(--ds-font-heading-xsmall)';
|
|
63
64
|
}>;
|
|
64
|
-
readonly xxsmall:
|
|
65
|
-
font:
|
|
65
|
+
readonly xxsmall: CompiledStyles<{
|
|
66
|
+
font: 'var(--ds-font-heading-xxsmall)';
|
|
66
67
|
}>;
|
|
67
68
|
};
|
|
68
69
|
type HeadingSize = keyof typeof headingSizeStylesMap;
|
|
@@ -77,5 +78,5 @@ type HeadingSize = keyof typeof headingSizeStylesMap;
|
|
|
77
78
|
* <Heading size="xxlarge">Page title</Heading>
|
|
78
79
|
* ```
|
|
79
80
|
*/
|
|
80
|
-
declare const Heading:
|
|
81
|
+
declare const Heading: React.ForwardRefExoticComponent<React.PropsWithoutRef<HeadingProps> & React.RefAttributes<HTMLHeadingElement>>;
|
|
81
82
|
export default Heading;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import { type ReactNode } from 'react';
|
|
6
|
+
import { type CompiledStyles } from '@compiled/react';
|
|
6
7
|
type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
|
|
7
8
|
export type HeadingProps = {
|
|
8
9
|
/**
|
|
@@ -38,31 +39,31 @@ export type HeadingProps = {
|
|
|
38
39
|
};
|
|
39
40
|
/**
|
|
40
41
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
41
|
-
* @codegen <<SignedSource::
|
|
42
|
+
* @codegen <<SignedSource::406afb01e5634a0b459f50de660d8c2e>>
|
|
42
43
|
* @codegenId typography
|
|
43
44
|
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
44
45
|
*/
|
|
45
46
|
declare const headingSizeStylesMap: {
|
|
46
|
-
readonly xxlarge:
|
|
47
|
-
font:
|
|
47
|
+
readonly xxlarge: CompiledStyles<{
|
|
48
|
+
font: 'var(--ds-font-heading-xxlarge)';
|
|
48
49
|
}>;
|
|
49
|
-
readonly xlarge:
|
|
50
|
-
font:
|
|
50
|
+
readonly xlarge: CompiledStyles<{
|
|
51
|
+
font: 'var(--ds-font-heading-xlarge)';
|
|
51
52
|
}>;
|
|
52
|
-
readonly large:
|
|
53
|
-
font:
|
|
53
|
+
readonly large: CompiledStyles<{
|
|
54
|
+
font: 'var(--ds-font-heading-large)';
|
|
54
55
|
}>;
|
|
55
|
-
readonly medium:
|
|
56
|
-
font:
|
|
56
|
+
readonly medium: CompiledStyles<{
|
|
57
|
+
font: 'var(--ds-font-heading-medium)';
|
|
57
58
|
}>;
|
|
58
|
-
readonly small:
|
|
59
|
-
font:
|
|
59
|
+
readonly small: CompiledStyles<{
|
|
60
|
+
font: 'var(--ds-font-heading-small)';
|
|
60
61
|
}>;
|
|
61
|
-
readonly xsmall:
|
|
62
|
-
font:
|
|
62
|
+
readonly xsmall: CompiledStyles<{
|
|
63
|
+
font: 'var(--ds-font-heading-xsmall)';
|
|
63
64
|
}>;
|
|
64
|
-
readonly xxsmall:
|
|
65
|
-
font:
|
|
65
|
+
readonly xxsmall: CompiledStyles<{
|
|
66
|
+
font: 'var(--ds-font-heading-xxsmall)';
|
|
66
67
|
}>;
|
|
67
68
|
};
|
|
68
69
|
type HeadingSize = keyof typeof headingSizeStylesMap;
|
|
@@ -77,5 +78,5 @@ type HeadingSize = keyof typeof headingSizeStylesMap;
|
|
|
77
78
|
* <Heading size="xxlarge">Page title</Heading>
|
|
78
79
|
* ```
|
|
79
80
|
*/
|
|
80
|
-
declare const Heading:
|
|
81
|
+
declare const Heading: React.ForwardRefExoticComponent<React.PropsWithoutRef<HeadingProps> & React.RefAttributes<HTMLHeadingElement>>;
|
|
81
82
|
export default Heading;
|
package/offerings.json
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "Heading",
|
|
4
|
+
"package": "@atlaskit/heading",
|
|
5
|
+
"import": {
|
|
6
|
+
"name": "Heading",
|
|
7
|
+
"package": "@atlaskit/heading",
|
|
8
|
+
"type": "default"
|
|
9
|
+
},
|
|
10
|
+
"keywords": ["heading", "title", "header", "typography", "text", "h1", "h2", "h3", "h4", "h5", "h6"],
|
|
11
|
+
"categories": ["primitive", "data-display"],
|
|
12
|
+
"shortDescription": "A component for creating accessible, consistently styled headings with proper hierarchy. Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.",
|
|
13
|
+
"status": "general-availability",
|
|
14
|
+
"accessibilityGuidelines": [
|
|
15
|
+
"Maintain proper heading hierarchy (h1 to h6)",
|
|
16
|
+
"Use only one h1 per page for main page titles",
|
|
17
|
+
"Ensure minimum 4.5:1 color contrast for text readability",
|
|
18
|
+
"Use clear, descriptive heading text that describes the content below"
|
|
19
|
+
],
|
|
20
|
+
"usageGuidelines": [
|
|
21
|
+
"Use the `HeadingContextProvider` offering to maintain heading levels in complex layouts",
|
|
22
|
+
"Maintain proper heading hierarchy",
|
|
23
|
+
"Keep headings concise and meaningful",
|
|
24
|
+
"Use sentence case for most headings",
|
|
25
|
+
"Use the `color` prop for inverse text on dark backgrounds",
|
|
26
|
+
"Do NOT use any inline styles, you must use the `size` (required) and `color` (optional) props available"
|
|
27
|
+
],
|
|
28
|
+
"contentGuidelines": [
|
|
29
|
+
"Use clear, descriptive heading text",
|
|
30
|
+
"Maintain proper heading hierarchy",
|
|
31
|
+
"Keep headings concise and meaningful",
|
|
32
|
+
"Use sentence case for most headings",
|
|
33
|
+
"Make headings descriptive of the content that follows"
|
|
34
|
+
],
|
|
35
|
+
"generativeInstructions": "./docs/ai/heading-instructions.md",
|
|
36
|
+
"examples": ["./examples/ai/basic.tsx"]
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "HeadingContextProvider",
|
|
40
|
+
"package": "@atlaskit/heading",
|
|
41
|
+
"import": {
|
|
42
|
+
"name": "HeadingContextProvider",
|
|
43
|
+
"package": "@atlaskit/heading",
|
|
44
|
+
"type": "named"
|
|
45
|
+
},
|
|
46
|
+
"keywords": ["heading", "context", "provider", "hierarchy", "accessibility"],
|
|
47
|
+
"categories": ["primitive", "data-display"],
|
|
48
|
+
"shortDescription": "A context provider that allows you to configure the default HTML heading level for all headings within its subtree. Useful for maintaining proper heading hierarchy in complex layouts.",
|
|
49
|
+
"status": "general-availability",
|
|
50
|
+
"usageGuidelines": [
|
|
51
|
+
"Wrap sections that need different heading hierarchy",
|
|
52
|
+
"Use for complex layouts where heading levels need adjustment"
|
|
53
|
+
],
|
|
54
|
+
"contentGuidelines": [
|
|
55
|
+
"Ensure proper heading hierarchy is maintained",
|
|
56
|
+
"Use clear, descriptive heading text",
|
|
57
|
+
"Keep headings concise and meaningful"
|
|
58
|
+
],
|
|
59
|
+
"examples": ["./examples/ai/heading-context-provider.tsx"]
|
|
60
|
+
}
|
|
61
|
+
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/heading",
|
|
3
|
-
"version": "5.2.
|
|
3
|
+
"version": "5.2.8",
|
|
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/"
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@atlaskit/css": "^0.14.0",
|
|
31
|
-
"@atlaskit/primitives": "^14.
|
|
32
|
-
"@atlaskit/tokens": "^6.
|
|
31
|
+
"@atlaskit/primitives": "^14.15.0",
|
|
32
|
+
"@atlaskit/tokens": "^6.4.0",
|
|
33
33
|
"@babel/runtime": "^7.0.0",
|
|
34
34
|
"@compiled/react": "^0.18.3"
|
|
35
35
|
},
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"@af/integration-testing": "workspace:^",
|
|
43
43
|
"@af/visual-regression": "workspace:^",
|
|
44
44
|
"@atlaskit/button": "^23.4.0",
|
|
45
|
-
"@atlaskit/docs": "^11.
|
|
46
|
-
"@atlaskit/ds-lib": "^5.
|
|
45
|
+
"@atlaskit/docs": "^11.1.0",
|
|
46
|
+
"@atlaskit/ds-lib": "^5.1.0",
|
|
47
47
|
"@atlaskit/ssr": "workspace:^",
|
|
48
48
|
"@atlassian/codegen": "^0.1.0",
|
|
49
49
|
"@atlassian/ssr-tests": "^0.3.0",
|
package/scripts/codegen.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import { writeFileSync } from 'fs';
|
|
|
2
2
|
import { join } from 'path';
|
|
3
3
|
|
|
4
4
|
import format from '@af/formatting/sync';
|
|
5
|
+
import tokenNames from '@atlaskit/tokens/token-names';
|
|
5
6
|
// eslint-disable-next-line import/order
|
|
6
7
|
import { createPartialSignedArtifact } from '@atlassian/codegen';
|
|
7
8
|
|
|
@@ -21,10 +22,21 @@ const removeVerbosity = (name: string): string => {
|
|
|
21
22
|
};
|
|
22
23
|
|
|
23
24
|
export const createTypographyStylesFromTemplate = () => {
|
|
25
|
+
|
|
26
|
+
const tokenTypes = headingTokens
|
|
27
|
+
.map((token) => {
|
|
28
|
+
return `
|
|
29
|
+
readonly ${removeVerbosity(token.name)}: CompiledStyles<{
|
|
30
|
+
font: "var(${tokenNames[token.name as keyof typeof tokenNames]})";
|
|
31
|
+
}>;`.trim();
|
|
32
|
+
}).join('\n\t');
|
|
33
|
+
|
|
24
34
|
return (
|
|
25
35
|
format(
|
|
26
36
|
`
|
|
27
|
-
const headingSizeStylesMap
|
|
37
|
+
const headingSizeStylesMap: {
|
|
38
|
+
${tokenTypes}
|
|
39
|
+
} = cssMap({
|
|
28
40
|
${headingTokens
|
|
29
41
|
.map((token) => {
|
|
30
42
|
return `
|