@atlaskit/heading 1.4.0 → 1.4.1

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 (13) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/heading-context.js +2 -4
  3. package/dist/cjs/heading.js +4 -4
  4. package/dist/cjs/{heading.temp.js → heading.partial.js} +11 -10
  5. package/dist/es2019/heading.js +2 -1
  6. package/dist/es2019/{heading.temp.js → heading.partial.js} +10 -8
  7. package/dist/esm/heading.js +2 -1
  8. package/dist/esm/{heading.temp.js → heading.partial.js} +10 -8
  9. package/dist/{types-ts4.5/heading.temp.d.ts → types/heading.partial.d.ts} +2 -1
  10. package/dist/types/types.d.ts +1 -1
  11. package/dist/{types/heading.temp.d.ts → types-ts4.5/heading.partial.d.ts} +2 -1
  12. package/dist/types-ts4.5/types.d.ts +1 -1
  13. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 1.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#41032](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41032) [`8d9dad6b977`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d9dad6b977) - Heading will apply an aria level if rendered as a div. This is an accessibility fix for an incomplete feature shipped in the previous minor version.
8
+ - [#40299](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40299) [`b1882fdd842`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1882fdd842) - Change typography token naming to be more verbose.
9
+
3
10
  ## 1.4.0
4
11
 
5
12
  ### Minor Changes
package/dist/cjs/heading-context.js CHANGED
@@ -16,10 +16,9 @@ var HeadingLevelContext = /*#__PURE__*/(0, _react.createContext)(0);
16
16
  * @internal
17
17
  * @returns The current heading level context.
18
18
  */
19
- var useHeadingElement = function useHeadingElement() {
19
+ var useHeadingElement = exports.useHeadingElement = function useHeadingElement() {
20
20
  return (0, _react.useContext)(HeadingLevelContext);
21
21
  };
22
- exports.useHeadingElement = useHeadingElement;
23
22
  /**
24
23
  * __Heading level provider__
25
24
  *
@@ -45,5 +44,4 @@ var HeadingLevelContextProvider = function HeadingLevelContextProvider(_ref) {
45
44
  value: value || headingLevel
46
45
  }, children);
47
46
  };
48
- var _default = HeadingLevelContextProvider;
49
- exports.default = _default;
47
+ var _default = exports.default = HeadingLevelContextProvider;
package/dist/cjs/heading.js CHANGED
@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _react = require("@emotion/react");
11
11
  var _headingContext = require("./heading-context");
12
- var _heading = _interopRequireDefault(require("./heading.temp"));
12
+ var _heading = _interopRequireDefault(require("./heading.partial"));
13
13
  var _excluded = ["level", "variant"];
14
14
  /** @jsx jsx */
15
15
  // https://atlassian.design/foundations/typography
@@ -130,10 +130,11 @@ var Heading = function Heading(_ref) {
130
130
  id: id,
131
131
  "data-testid": testId,
132
132
  role: Markup === 'div' ? 'heading' : undefined,
133
+ "aria-level": Markup === 'div' ? hLevel : undefined,
133
134
  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]
134
135
  }, children);
135
136
  };
136
- var _default = function _default(_ref2) {
137
+ var _default = exports.default = function _default(_ref2) {
137
138
  var level = _ref2.level,
138
139
  variant = _ref2.variant,
139
140
  props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
@@ -146,5 +147,4 @@ var _default = function _default(_ref2) {
146
147
  (0, _react.jsx)(_heading.default, (0, _extends2.default)({
147
148
  variant: variant
148
149
  }, props));
149
- };
150
- exports.default = _default;
150
+ };
package/dist/cjs/{heading.temp.js → heading.partial.js} RENAMED
@@ -66,40 +66,41 @@ var Heading = function Heading(_ref) {
66
66
  id: id,
67
67
  "data-testid": testId,
68
68
  role: Markup === 'div' ? 'heading' : undefined,
69
+ "aria-level": Markup === 'div' ? hLevel : undefined,
69
70
  css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
70
71
  }, children);
71
72
  };
72
73
 
73
74
  /**
74
- * @codegenStart
75
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
76
+ * @codegen <<SignedSource::cabcd4e0313e10dd81733a6ffcdbc90f>>
75
77
  * @codegenId typography
76
78
  * @codegenCommand yarn workspace @atlaskit/heading codegen
77
79
  */
78
80
  var headingVariantStylesMap = {
79
81
  large: (0, _react.css)({
80
- font: "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))"
82
+ font: "var(--ds-font-heading-large, normal 500 24px/28px var(--ds-font-family-heading))"
81
83
  }),
82
84
  medium: (0, _react.css)({
83
- font: "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))"
85
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px var(--ds-font-family-heading))"
84
86
  }),
85
87
  small: (0, _react.css)({
86
- font: "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))"
88
+ font: "var(--ds-font-heading-small, normal 600 16px/20px var(--ds-font-family-heading))"
87
89
  }),
88
90
  xlarge: (0, _react.css)({
89
- font: "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))"
91
+ font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
90
92
  }),
91
93
  xsmall: (0, _react.css)({
92
- font: "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))"
94
+ font: "var(--ds-font-heading-xsmall, normal 600 14px/16px var(--ds-font-family-heading))"
93
95
  }),
94
96
  xxlarge: (0, _react.css)({
95
- font: "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))"
97
+ font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
96
98
  }),
97
99
  xxsmall: (0, _react.css)({
98
- font: "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
100
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px var(--ds-font-family-heading))"
99
101
  })
100
102
  };
101
103
  /**
102
104
  * @codegenEnd
103
105
  */
104
- var _default = Heading;
105
- exports.default = _default;
106
+ var _default = exports.default = Heading;
package/dist/es2019/heading.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { useHeadingElement } from './heading-context';
5
- import NewHeading from './heading.temp';
5
+ import NewHeading from './heading.partial';
6
6
  // https://atlassian.design/foundations/typography
7
7
  const levelMap = {
8
8
  h900: 'h1',
@@ -121,6 +121,7 @@ const Heading = ({
121
121
  id: id,
122
122
  "data-testid": testId,
123
123
  role: Markup === 'div' ? 'heading' : undefined,
124
+ "aria-level": Markup === 'div' ? hLevel : undefined,
124
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]
125
126
  }, children);
126
127
  };
package/dist/es2019/{heading.temp.js → heading.partial.js} RENAMED
@@ -59,36 +59,38 @@ const Heading = ({
59
59
  id: id,
60
60
  "data-testid": testId,
61
61
  role: Markup === 'div' ? 'heading' : undefined,
62
+ "aria-level": Markup === 'div' ? hLevel : undefined,
62
63
  css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
63
64
  }, children);
64
65
  };
65
66
 
66
67
  /**
67
- * @codegenStart
68
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
69
+ * @codegen <<SignedSource::cabcd4e0313e10dd81733a6ffcdbc90f>>
68
70
  * @codegenId typography
69
71
  * @codegenCommand yarn workspace @atlaskit/heading codegen
70
72
  */
71
73
  const headingVariantStylesMap = {
72
74
  large: css({
73
- font: "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))"
75
+ font: "var(--ds-font-heading-large, normal 500 24px/28px var(--ds-font-family-heading))"
74
76
  }),
75
77
  medium: css({
76
- font: "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))"
78
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px var(--ds-font-family-heading))"
77
79
  }),
78
80
  small: css({
79
- font: "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))"
81
+ font: "var(--ds-font-heading-small, normal 600 16px/20px var(--ds-font-family-heading))"
80
82
  }),
81
83
  xlarge: css({
82
- font: "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))"
84
+ font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
83
85
  }),
84
86
  xsmall: css({
85
- font: "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))"
87
+ font: "var(--ds-font-heading-xsmall, normal 600 14px/16px var(--ds-font-family-heading))"
86
88
  }),
87
89
  xxlarge: css({
88
- font: "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))"
90
+ font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
89
91
  }),
90
92
  xxsmall: css({
91
- font: "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
93
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px var(--ds-font-family-heading))"
92
94
  })
93
95
  };
94
96
  /**
package/dist/esm/heading.js CHANGED
@@ -4,7 +4,7 @@ var _excluded = ["level", "variant"];
4
4
  /** @jsx jsx */
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import { useHeadingElement } from './heading-context';
7
- import NewHeading from './heading.temp';
7
+ import NewHeading from './heading.partial';
8
8
  // https://atlassian.design/foundations/typography
9
9
  var levelMap = {
10
10
  h900: 'h1',
@@ -123,6 +123,7 @@ var Heading = function Heading(_ref) {
123
123
  id: id,
124
124
  "data-testid": testId,
125
125
  role: Markup === 'div' ? 'heading' : undefined,
126
+ "aria-level": Markup === 'div' ? hLevel : undefined,
126
127
  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]
127
128
  }, children);
128
129
  };
package/dist/esm/{heading.temp.js → heading.partial.js} RENAMED
@@ -59,36 +59,38 @@ var Heading = function Heading(_ref) {
59
59
  id: id,
60
60
  "data-testid": testId,
61
61
  role: Markup === 'div' ? 'heading' : undefined,
62
+ "aria-level": Markup === 'div' ? hLevel : undefined,
62
63
  css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
63
64
  }, children);
64
65
  };
65
66
 
66
67
  /**
67
- * @codegenStart
68
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
69
+ * @codegen <<SignedSource::cabcd4e0313e10dd81733a6ffcdbc90f>>
68
70
  * @codegenId typography
69
71
  * @codegenCommand yarn workspace @atlaskit/heading codegen
70
72
  */
71
73
  var headingVariantStylesMap = {
72
74
  large: css({
73
- font: "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))"
75
+ font: "var(--ds-font-heading-large, normal 500 24px/28px var(--ds-font-family-heading))"
74
76
  }),
75
77
  medium: css({
76
- font: "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))"
78
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px var(--ds-font-family-heading))"
77
79
  }),
78
80
  small: css({
79
- font: "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))"
81
+ font: "var(--ds-font-heading-small, normal 600 16px/20px var(--ds-font-family-heading))"
80
82
  }),
81
83
  xlarge: css({
82
- font: "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))"
84
+ font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
83
85
  }),
84
86
  xsmall: css({
85
- font: "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))"
87
+ font: "var(--ds-font-heading-xsmall, normal 600 14px/16px var(--ds-font-family-heading))"
86
88
  }),
87
89
  xxlarge: css({
88
- font: "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))"
90
+ font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
89
91
  }),
90
92
  xxsmall: css({
91
- font: "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
93
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px var(--ds-font-family-heading))"
92
94
  })
93
95
  };
94
96
  /**
package/dist/{types-ts4.5/heading.temp.d.ts → types/heading.partial.d.ts} RENAMED
@@ -18,7 +18,8 @@ import type { HeadingProps } from './types';
18
18
  */
19
19
  declare const Heading: ({ children, variant, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
20
20
  /**
21
- * @codegenStart
21
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
22
+ * @codegen <<SignedSource::cabcd4e0313e10dd81733a6ffcdbc90f>>
22
23
  * @codegenId typography
23
24
  * @codegenCommand yarn workspace @atlaskit/heading codegen
24
25
  */
package/dist/types/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
- import { HeadingVariant } from './heading.temp';
2
+ import { HeadingVariant } from './heading.partial';
3
3
  export type HeadingProps = {
4
4
  /**
5
5
  * A `testId` prop is provided for specified elements, which is a unique
package/dist/{types/heading.temp.d.ts → types-ts4.5/heading.partial.d.ts} RENAMED
@@ -18,7 +18,8 @@ import type { HeadingProps } from './types';
18
18
  */
19
19
  declare const Heading: ({ children, variant, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
20
20
  /**
21
- * @codegenStart
21
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
22
+ * @codegen <<SignedSource::cabcd4e0313e10dd81733a6ffcdbc90f>>
22
23
  * @codegenId typography
23
24
  * @codegenCommand yarn workspace @atlaskit/heading codegen
24
25
  */
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
- import { HeadingVariant } from './heading.temp';
2
+ import { HeadingVariant } from './heading.partial';
3
3
  export type HeadingProps = {
4
4
  /**
5
5
  * A `testId` prop is provided for specified elements, which is a unique
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.4.0",
3
+ "version": "1.4.1",
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/"