components: Promote Heading

docs/manifest.json

@@ -839,6 +839,12 @@
 		"markdown_source": "../packages/components/src/guide/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Heading",
+		"slug": "heading",
+		"markdown_source": "../packages/components/src/heading/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "NavigateRegions",
 		"slug": "navigate-regions",

packages/components/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 -   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
 -   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   The experimental `Text` component has been completely re-written and enhanced with truncation support and separate variant, size, and weight props to allow for greater control. The previous `variant` prop has been completely removed.
 
 ### Deprecation
 

packages/components/src/ui/heading/README.md → packages/components/src/heading/README.md

@@ -1,11 +1,11 @@
-# Heading
+# Heading (Experimental)
 
 `Heading` renders headings and titles using the library's typography system.
 
 ## Usage
 
 ```jsx
-import { Heading } from '@wordpress/components/ui';
+import { __experimentalHeading as Heading } from '@wordpress/components';
 
 function Example() {
 	return <Heading>Code is Poetry</Heading>;
@@ -14,7 +14,7 @@ function Example() {
 
 ## Props
 
-`Heading` uses `Text` underneath, so we have access to all of `Text`'s props except for `size` which is replaced by `level`. For a complete list of those props, check out [`Text`](../text/#props).
+`Heading` uses `Text` underneath, so we have access to all of `Text`'s props except for `size` which is replaced by `level`. For a complete list of those props, check out [`Text`](/packages/components/src/text/README.md#props).
 
 ##### level
 

packages/components/src/ui/heading/component.ts → packages/components/src/heading/component.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../utils';
+import { createComponent } from '../ui/utils';
 import { useHeading } from './hook';
 
 /**

packages/components/src/ui/heading/hook.ts → packages/components/src/heading/hook.ts

@@ -1,13 +1,13 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../context';
+import { useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
-import type { ViewOwnProps } from '../context';
-import type { Props as TextProps } from '../../text/types';
-import { useText } from '../../text';
-import { getHeadingFontSize } from '../utils/font-size';
-import { CONFIG, COLORS } from '../../utils';
+import type { ViewOwnProps } from '../ui/context';
+import type { Props as TextProps } from '../text/types';
+import { useText } from '../text';
+import { getHeadingFontSize } from '../ui/utils/font-size';
+import { CONFIG, COLORS } from '../utils';
 
 export type HeadingSize =
 	| 1

packages/components/src/heading/index.ts

@@ -0,0 +1,2 @@
+export { default as Heading } from './component';
+export { useHeading } from './hook';

packages/components/src/ui/heading/stories/index.js → packages/components/src/heading/stories/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Heading } from '../index';
+import { Heading } from '../';
 
 export default {
 	component: Heading,

packages/components/src/ui/heading/test/index.js → packages/components/src/heading/test/index.js

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { Heading } from '../index';
+import { Heading } from '../';
 
 describe( 'props', () => {
 	let base;

packages/components/src/index.js

@@ -65,6 +65,7 @@ export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalCustomGradientPicker } from './custom-gradient-picker';
 export { default as Guide } from './guide';
 export { default as GuidePage } from './guide/page';
+export { Heading as __experimentalHeading } from './heading';
 export { default as Icon } from './icon';
 export { default as IconButton } from './button/deprecated';
 export { default as __experimentalInputControl } from './input-control';

packages/components/src/ui/__storybook-utils/page.js

@@ -3,7 +3,7 @@
  */
 import { VStack } from '../v-stack';
 import { View } from '../view';
-import { Heading } from '../heading';
+import { Heading } from '../../heading';
 import { Divider } from '../divider';
 
 function Page( { title = 'Component', children } ) {

packages/components/src/ui/card/README.md

@@ -13,7 +13,8 @@ import {
 	CardBody,
 	CardFooter,
 	Text,
-} from '@wordpress/components/ui';
+	Heading,
+} from '@wordpress/components';
 
 function Example() {
 	return (

packages/components/src/ui/card/component.js

@@ -63,7 +63,8 @@ function Card( props, forwardedRef ) {
  *   CardBody,
  *   CardFooter,
  *   Text,
- * } from `@wordpress/components/ui`;
+ *   Heading,
+ * } from `@wordpress/components`;
  *
  * function Example() {
  *   return (

packages/components/src/ui/card/stories/index.js

@@ -6,7 +6,7 @@ import { Text } from '../../../text';
 import { VStack } from '../../v-stack';
 import { Card, CardBody, CardFooter } from '../index';
 import { Divider } from '../../divider';
-import { Heading } from '../../heading';
+import { Heading } from '../../../heading';
 import Button from '../../../button';
 
 export default {

packages/components/src/ui/index.js

@@ -6,7 +6,6 @@ export * from './elevation';
 export * from './form-group';
 export * from './grid';
 export * from './h-stack';
-export * from './heading';
 export * from './shortcut';
 export * from './spinner';
 export * from './v-stack';