@atlaskit/heading 2.1.1 → 2.2.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 (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/heading.js +27 -6
  3. package/dist/es2019/heading.js +27 -6
  4. package/dist/esm/heading.js +27 -6
  5. package/dist/types/heading.d.ts +21 -2
  6. package/dist/types-ts4.5/heading.d.ts +21 -2
  7. package/package.json +5 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 2.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#91625](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91625) [`d7770083ff25`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7770083ff25) - Add support for React 18.
8
+
9
+ ## 2.1.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [#83130](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83130) [`4efd62cdc533`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4efd62cdc533) - SHPLVIII-481: Assign name to default export components to fix quick-fix imports
14
+
3
15
  ## 2.1.1
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/heading.js CHANGED
@@ -107,7 +107,7 @@ var subtlestStyles = (0, _react.css)({
107
107
  * );
108
108
  * ```
109
109
  */
110
- var Heading = function Heading(_ref) {
110
+ var OldHeading = function OldHeading(_ref) {
111
111
  var children = _ref.children,
112
112
  level = _ref.level,
113
113
  id = _ref.id,
@@ -133,17 +133,38 @@ var Heading = function Heading(_ref) {
133
133
  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
134
  }, children);
135
135
  };
136
- var _default = exports.default = function _default(_ref2) {
136
+
137
+ /**
138
+ * __Heading__
139
+ *
140
+ * A heading is a typography component used to display text in different sizes and formats.
141
+ *
142
+ * @example
143
+ *
144
+ * ```jsx
145
+ * import Heading from '@atlaskit/heading';
146
+ *
147
+ * // New component
148
+ * <Heading size="xxlarge">Page title</Heading>
149
+ *
150
+ * // Old component
151
+ * const H100 = () => (
152
+ * <Heading level="h100">h100</Heading>
153
+ * );
154
+ * ```
155
+ */
156
+ var Heading = function Heading(_ref2) {
137
157
  var level = _ref2.level,
138
158
  size = _ref2.size,
139
159
  props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
140
160
  return level ?
141
- // eslint-disable-next-line jsx-a11y/heading-has-content
142
- (0, _react.jsx)(Heading, (0, _extends2.default)({
161
+ // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
162
+ (0, _react.jsx)(OldHeading, (0, _extends2.default)({
143
163
  level: level
144
164
  }, props)) :
145
- // eslint-disable-next-line jsx-a11y/heading-has-content
165
+ // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
146
166
  (0, _react.jsx)(_heading.default, (0, _extends2.default)({
147
167
  size: size
148
168
  }, props));
149
- };
169
+ };
170
+ var _default = exports.default = Heading;
package/dist/es2019/heading.js CHANGED
@@ -97,7 +97,7 @@ const subtlestStyles = css({
97
97
  * );
98
98
  * ```
99
99
  */
100
- const Heading = ({
100
+ const OldHeading = ({
101
101
  children,
102
102
  level,
103
103
  id,
@@ -120,18 +120,39 @@ const Heading = ({
120
120
  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]
121
121
  }, children);
122
122
  };
123
- export default (({
123
+
124
+ /**
125
+ * __Heading__
126
+ *
127
+ * A heading is a typography component used to display text in different sizes and formats.
128
+ *
129
+ * @example
130
+ *
131
+ * ```jsx
132
+ * import Heading from '@atlaskit/heading';
133
+ *
134
+ * // New component
135
+ * <Heading size="xxlarge">Page title</Heading>
136
+ *
137
+ * // Old component
138
+ * const H100 = () => (
139
+ * <Heading level="h100">h100</Heading>
140
+ * );
141
+ * ```
142
+ */
143
+ const Heading = ({
124
144
  level,
125
145
  size,
126
146
  ...props
127
147
  }) => {
128
148
  return level ?
129
- // eslint-disable-next-line jsx-a11y/heading-has-content
130
- jsx(Heading, _extends({
149
+ // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
150
+ jsx(OldHeading, _extends({
131
151
  level: level
132
152
  }, props)) :
133
- // eslint-disable-next-line jsx-a11y/heading-has-content
153
+ // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
134
154
  jsx(NewHeading, _extends({
135
155
  size: size
136
156
  }, props));
137
- });
157
+ };
158
+ export default Heading;
package/dist/esm/heading.js CHANGED
@@ -100,7 +100,7 @@ var subtlestStyles = css({
100
100
  * );
101
101
  * ```
102
102
  */
103
- var Heading = function Heading(_ref) {
103
+ var OldHeading = function OldHeading(_ref) {
104
104
  var children = _ref.children,
105
105
  level = _ref.level,
106
106
  id = _ref.id,
@@ -126,17 +126,38 @@ var Heading = function Heading(_ref) {
126
126
  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
127
  }, children);
128
128
  };
129
- export default (function (_ref2) {
129
+
130
+ /**
131
+ * __Heading__
132
+ *
133
+ * A heading is a typography component used to display text in different sizes and formats.
134
+ *
135
+ * @example
136
+ *
137
+ * ```jsx
138
+ * import Heading from '@atlaskit/heading';
139
+ *
140
+ * // New component
141
+ * <Heading size="xxlarge">Page title</Heading>
142
+ *
143
+ * // Old component
144
+ * const H100 = () => (
145
+ * <Heading level="h100">h100</Heading>
146
+ * );
147
+ * ```
148
+ */
149
+ var Heading = function Heading(_ref2) {
130
150
  var level = _ref2.level,
131
151
  size = _ref2.size,
132
152
  props = _objectWithoutProperties(_ref2, _excluded);
133
153
  return level ?
134
- // eslint-disable-next-line jsx-a11y/heading-has-content
135
- jsx(Heading, _extends({
154
+ // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
155
+ jsx(OldHeading, _extends({
136
156
  level: level
137
157
  }, props)) :
138
- // eslint-disable-next-line jsx-a11y/heading-has-content
158
+ // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
139
159
  jsx(NewHeading, _extends({
140
160
  size: size
141
161
  }, props));
142
- });
162
+ };
163
+ export default Heading;
package/dist/types/heading.d.ts CHANGED
@@ -1,5 +1,24 @@
1
1
  /** @jsx jsx */
2
2
  import { jsx } from '@emotion/react';
3
3
  import type { HeadingProps } from './types';
4
- declare const _default: ({ level, size, ...props }: HeadingProps) => jsx.JSX.Element;
5
- export default _default;
4
+ /**
5
+ * __Heading__
6
+ *
7
+ * A heading is a typography component used to display text in different sizes and formats.
8
+ *
9
+ * @example
10
+ *
11
+ * ```jsx
12
+ * import Heading from '@atlaskit/heading';
13
+ *
14
+ * // New component
15
+ * <Heading size="xxlarge">Page title</Heading>
16
+ *
17
+ * // Old component
18
+ * const H100 = () => (
19
+ * <Heading level="h100">h100</Heading>
20
+ * );
21
+ * ```
22
+ */
23
+ declare const Heading: ({ level, size, ...props }: HeadingProps) => jsx.JSX.Element;
24
+ export default Heading;
package/dist/types-ts4.5/heading.d.ts CHANGED
@@ -1,5 +1,24 @@
1
1
  /** @jsx jsx */
2
2
  import { jsx } from '@emotion/react';
3
3
  import type { HeadingProps } from './types';
4
- declare const _default: ({ level, size, ...props }: HeadingProps) => jsx.JSX.Element;
5
- export default _default;
4
+ /**
5
+ * __Heading__
6
+ *
7
+ * A heading is a typography component used to display text in different sizes and formats.
8
+ *
9
+ * @example
10
+ *
11
+ * ```jsx
12
+ * import Heading from '@atlaskit/heading';
13
+ *
14
+ * // New component
15
+ * <Heading size="xxlarge">Page title</Heading>
16
+ *
17
+ * // Old component
18
+ * const H100 = () => (
19
+ * <Heading level="h100">h100</Heading>
20
+ * );
21
+ * ```
22
+ */
23
+ declare const Heading: ({ level, size, ...props }: HeadingProps) => jsx.JSX.Element;
24
+ export default Heading;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "2.1.1",
3
+ "version": "2.2.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/"
@@ -26,13 +26,14 @@
26
26
  "status": {
27
27
  "type": "beta"
28
28
  }
29
- }
29
+ },
30
+ "runReact18": true
30
31
  },
31
32
  "scripts": {
32
33
  "codegen": "ts-node ./scripts/codegen.tsx"
33
34
  },
34
35
  "dependencies": {
35
- "@atlaskit/tokens": "^1.42.0",
36
+ "@atlaskit/tokens": "^1.43.0",
36
37
  "@babel/runtime": "^7.0.0",
37
38
  "@emotion/react": "^11.7.1"
38
39
  },
@@ -41,7 +42,7 @@
41
42
  },
42
43
  "devDependencies": {
43
44
  "@af/accessibility-testing": "*",
44
- "@atlaskit/ds-lib": "^2.2.0",
45
+ "@atlaskit/ds-lib": "^2.3.0",
45
46
  "@atlaskit/ssr": "*",
46
47
  "@atlaskit/visual-regression": "*",
47
48
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",