@atlaskit/heading 1.0.3 → 1.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 (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/constellation/index/examples.mdx +13 -0
  3. package/dist/cjs/heading.js +27 -27
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/heading.js +27 -27
  6. package/dist/es2019/version.json +1 -1
  7. package/dist/esm/heading.js +27 -27
  8. package/dist/esm/version.json +1 -1
  9. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 1.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`fce52a022f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fce52a022f5) - Adds typography tokens to @atlaskit/heading.
8
+
9
+ ## 1.0.4
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 1.0.3
4
16
 
5
17
  ### Patch Changes
package/constellation/index/examples.mdx ADDED
@@ -0,0 +1,13 @@
1
+ ---
2
+ order: 0
3
+ ---
4
+
5
+ import HeadingDefault from '../../examples/constellation/heading-default';
6
+
7
+ ## Basic
8
+
9
+ Implements the Atlassian typography set as a component. The typography `level` can be configured to be one of the below types.
10
+
11
+ <Example Component={HeadingDefault} packageName="@atlaskit/heading" />
12
+
13
+
package/dist/cjs/heading.js CHANGED
@@ -29,59 +29,59 @@ var headingResetStyles = (0, _react.css)({
29
29
  color: "var(--ds-text, #172B4D)"
30
30
  });
31
31
  var h900Styles = (0, _react.css)({
32
- fontSize: '35px',
33
- fontWeight: 500,
32
+ fontSize: "var(--ds-font-size-600, 35px)",
33
+ fontWeight: "var(--ds-font-weight-medium, 500)",
34
34
  letterSpacing: '-0.01em',
35
- lineHeight: '40px'
35
+ lineHeight: "var(--ds-font-lineHeight-600, 40px)"
36
36
  });
37
37
  var h800Styles = (0, _react.css)({
38
- fontSize: '29px',
39
- fontWeight: 600,
38
+ fontSize: "var(--ds-font-size-500, 29px)",
39
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
40
40
  letterSpacing: '-0.01em',
41
- lineHeight: '32px'
41
+ lineHeight: "var(--ds-font-lineHeight-500, 32px)"
42
42
  });
43
43
  var h700Styles = (0, _react.css)({
44
- fontSize: 24,
45
- fontWeight: 500,
44
+ fontSize: "var(--ds-font-size-400, 24px)",
45
+ fontWeight: "var(--ds-font-weight-medium, 500)",
46
46
  letterSpacing: '-0.01em',
47
- lineHeight: '28px'
47
+ lineHeight: "var(--ds-font-lineHeight-400, 28px)"
48
48
  });
49
49
  var h600Styles = (0, _react.css)({
50
- fontSize: 20,
51
- fontWeight: 500,
50
+ fontSize: "var(--ds-font-size-300, 20px)",
51
+ fontWeight: "var(--ds-font-weight-medium, 500)",
52
52
  letterSpacing: '-0.008em',
53
- lineHeight: '24px'
53
+ lineHeight: "var(--ds-font-lineHeight-300, 24px)"
54
54
  });
55
55
  var h500Styles = (0, _react.css)({
56
- fontSize: 16,
57
- fontWeight: 600,
56
+ fontSize: "var(--ds-font-size-200, 16px)",
57
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
58
58
  letterSpacing: '-0.006em',
59
- lineHeight: '20px'
59
+ lineHeight: "var(--ds-font-lineHeight-200, 20px)"
60
60
  });
61
61
  var h400Styles = (0, _react.css)({
62
- fontSize: 14,
63
- fontWeight: 600,
62
+ fontSize: "var(--ds-font-size-100, 14px)",
63
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
64
64
  letterSpacing: '-0.003em',
65
- lineHeight: '16px'
65
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
66
66
  });
67
67
  var h300Styles = (0, _react.css)({
68
- fontSize: 12,
69
- fontWeight: 600,
68
+ fontSize: "var(--ds-font-size-075, 12px)",
69
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
70
70
  letterSpacing: 0,
71
- lineHeight: '16px',
71
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)",
72
72
  textTransform: 'uppercase'
73
73
  });
74
74
  var h200Styles = (0, _react.css)({
75
- fontSize: 12,
76
- fontWeight: 600,
75
+ fontSize: "var(--ds-font-size-075, 12px)",
76
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
77
77
  letterSpacing: 0,
78
- lineHeight: '16px'
78
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
79
79
  });
80
80
  var h100Styles = (0, _react.css)({
81
- fontSize: 11,
82
- fontWeight: 700,
81
+ fontSize: "var(--ds-font-size-050, 11px)",
82
+ fontWeight: "var(--ds-font-weight-bold, 700)",
83
83
  letterSpacing: 0,
84
- lineHeight: '16px'
84
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
85
85
  });
86
86
  var inverseStyles = (0, _react.css)({
87
87
  color: "var(--ds-text-inverse, #FFF)"
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/heading.js CHANGED
@@ -20,59 +20,59 @@ const headingResetStyles = css({
20
20
  color: "var(--ds-text, #172B4D)"
21
21
  });
22
22
  const h900Styles = css({
23
- fontSize: '35px',
24
- fontWeight: 500,
23
+ fontSize: "var(--ds-font-size-600, 35px)",
24
+ fontWeight: "var(--ds-font-weight-medium, 500)",
25
25
  letterSpacing: '-0.01em',
26
- lineHeight: '40px'
26
+ lineHeight: "var(--ds-font-lineHeight-600, 40px)"
27
27
  });
28
28
  const h800Styles = css({
29
- fontSize: '29px',
30
- fontWeight: 600,
29
+ fontSize: "var(--ds-font-size-500, 29px)",
30
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
31
31
  letterSpacing: '-0.01em',
32
- lineHeight: '32px'
32
+ lineHeight: "var(--ds-font-lineHeight-500, 32px)"
33
33
  });
34
34
  const h700Styles = css({
35
- fontSize: 24,
36
- fontWeight: 500,
35
+ fontSize: "var(--ds-font-size-400, 24px)",
36
+ fontWeight: "var(--ds-font-weight-medium, 500)",
37
37
  letterSpacing: '-0.01em',
38
- lineHeight: '28px'
38
+ lineHeight: "var(--ds-font-lineHeight-400, 28px)"
39
39
  });
40
40
  const h600Styles = css({
41
- fontSize: 20,
42
- fontWeight: 500,
41
+ fontSize: "var(--ds-font-size-300, 20px)",
42
+ fontWeight: "var(--ds-font-weight-medium, 500)",
43
43
  letterSpacing: '-0.008em',
44
- lineHeight: '24px'
44
+ lineHeight: "var(--ds-font-lineHeight-300, 24px)"
45
45
  });
46
46
  const h500Styles = css({
47
- fontSize: 16,
48
- fontWeight: 600,
47
+ fontSize: "var(--ds-font-size-200, 16px)",
48
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
49
49
  letterSpacing: '-0.006em',
50
- lineHeight: '20px'
50
+ lineHeight: "var(--ds-font-lineHeight-200, 20px)"
51
51
  });
52
52
  const h400Styles = css({
53
- fontSize: 14,
54
- fontWeight: 600,
53
+ fontSize: "var(--ds-font-size-100, 14px)",
54
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
55
55
  letterSpacing: '-0.003em',
56
- lineHeight: '16px'
56
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
57
57
  });
58
58
  const h300Styles = css({
59
- fontSize: 12,
60
- fontWeight: 600,
59
+ fontSize: "var(--ds-font-size-075, 12px)",
60
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
61
61
  letterSpacing: 0,
62
- lineHeight: '16px',
62
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)",
63
63
  textTransform: 'uppercase'
64
64
  });
65
65
  const h200Styles = css({
66
- fontSize: 12,
67
- fontWeight: 600,
66
+ fontSize: "var(--ds-font-size-075, 12px)",
67
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
68
68
  letterSpacing: 0,
69
- lineHeight: '16px'
69
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
70
70
  });
71
71
  const h100Styles = css({
72
- fontSize: 11,
73
- fontWeight: 700,
72
+ fontSize: "var(--ds-font-size-050, 11px)",
73
+ fontWeight: "var(--ds-font-weight-bold, 700)",
74
74
  letterSpacing: 0,
75
- lineHeight: '16px'
75
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
76
76
  });
77
77
  const inverseStyles = css({
78
78
  color: "var(--ds-text-inverse, #FFF)"
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/heading.js CHANGED
@@ -20,59 +20,59 @@ var headingResetStyles = css({
20
20
  color: "var(--ds-text, #172B4D)"
21
21
  });
22
22
  var h900Styles = css({
23
- fontSize: '35px',
24
- fontWeight: 500,
23
+ fontSize: "var(--ds-font-size-600, 35px)",
24
+ fontWeight: "var(--ds-font-weight-medium, 500)",
25
25
  letterSpacing: '-0.01em',
26
- lineHeight: '40px'
26
+ lineHeight: "var(--ds-font-lineHeight-600, 40px)"
27
27
  });
28
28
  var h800Styles = css({
29
- fontSize: '29px',
30
- fontWeight: 600,
29
+ fontSize: "var(--ds-font-size-500, 29px)",
30
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
31
31
  letterSpacing: '-0.01em',
32
- lineHeight: '32px'
32
+ lineHeight: "var(--ds-font-lineHeight-500, 32px)"
33
33
  });
34
34
  var h700Styles = css({
35
- fontSize: 24,
36
- fontWeight: 500,
35
+ fontSize: "var(--ds-font-size-400, 24px)",
36
+ fontWeight: "var(--ds-font-weight-medium, 500)",
37
37
  letterSpacing: '-0.01em',
38
- lineHeight: '28px'
38
+ lineHeight: "var(--ds-font-lineHeight-400, 28px)"
39
39
  });
40
40
  var h600Styles = css({
41
- fontSize: 20,
42
- fontWeight: 500,
41
+ fontSize: "var(--ds-font-size-300, 20px)",
42
+ fontWeight: "var(--ds-font-weight-medium, 500)",
43
43
  letterSpacing: '-0.008em',
44
- lineHeight: '24px'
44
+ lineHeight: "var(--ds-font-lineHeight-300, 24px)"
45
45
  });
46
46
  var h500Styles = css({
47
- fontSize: 16,
48
- fontWeight: 600,
47
+ fontSize: "var(--ds-font-size-200, 16px)",
48
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
49
49
  letterSpacing: '-0.006em',
50
- lineHeight: '20px'
50
+ lineHeight: "var(--ds-font-lineHeight-200, 20px)"
51
51
  });
52
52
  var h400Styles = css({
53
- fontSize: 14,
54
- fontWeight: 600,
53
+ fontSize: "var(--ds-font-size-100, 14px)",
54
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
55
55
  letterSpacing: '-0.003em',
56
- lineHeight: '16px'
56
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
57
57
  });
58
58
  var h300Styles = css({
59
- fontSize: 12,
60
- fontWeight: 600,
59
+ fontSize: "var(--ds-font-size-075, 12px)",
60
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
61
61
  letterSpacing: 0,
62
- lineHeight: '16px',
62
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)",
63
63
  textTransform: 'uppercase'
64
64
  });
65
65
  var h200Styles = css({
66
- fontSize: 12,
67
- fontWeight: 600,
66
+ fontSize: "var(--ds-font-size-075, 12px)",
67
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
68
68
  letterSpacing: 0,
69
- lineHeight: '16px'
69
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
70
70
  });
71
71
  var h100Styles = css({
72
- fontSize: 11,
73
- fontWeight: 700,
72
+ fontSize: "var(--ds-font-size-050, 11px)",
73
+ fontWeight: "var(--ds-font-weight-bold, 700)",
74
74
  letterSpacing: 0,
75
- lineHeight: '16px'
75
+ lineHeight: "var(--ds-font-lineHeight-100, 16px)"
76
76
  });
77
77
  var inverseStyles = css({
78
78
  color: "var(--ds-text-inverse, #FFF)"
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "description": "A heading is a typography component used to display text in different sizes and formats.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -13,7 +13,10 @@
13
13
  "releaseModel": "continuous",
14
14
  "website": {
15
15
  "name": "Heading",
16
- "category": "Components"
16
+ "category": "Components",
17
+ "status": {
18
+ "type": "alpha"
19
+ }
17
20
  }
18
21
  },
19
22
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -27,7 +30,7 @@
27
30
  ".": "./src/index.tsx"
28
31
  },
29
32
  "dependencies": {
30
- "@atlaskit/tokens": "^0.12.0",
33
+ "@atlaskit/tokens": "^0.13.0",
31
34
  "@babel/runtime": "^7.0.0",
32
35
  "@emotion/react": "^11.7.1"
33
36
  },
@@ -66,6 +69,6 @@
66
69
  "deprecation": "no-deprecated-imports"
67
70
  }
68
71
  },
69
- "homepage": "https://atlaskit.atlassian.com/packages/design-system/heading",
72
+ "homepage": "https://atlassian.design/components/heading/",
70
73
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
71
74
  }