components: Promote Elevation

docs/manifest.json

@@ -809,6 +809,12 @@
 		"markdown_source": "../packages/components/src/duotone-picker/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Elevation",
+		"slug": "elevation",
+		"markdown_source": "../packages/components/src/elevation/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ExternalLink",
 		"slug": "external-link",

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

@@ -7,7 +7,7 @@
 The shadow effect is generated using the `value` prop.
 
 ```jsx
-import { Elevation, Surface, Text, View } from '@wordpress/components/ui';
+import { Elevation, Surface, Text, View } from '@wordpress/components';
 
 function Example() {
 	return (

packages/components/src/ui/elevation/component.js → packages/components/src/elevation/component.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { useElevation } from './hook';
-import { createComponent } from '../utils';
+import { createComponent } from '../ui/utils';
 
 /**
  * `Elevation` is a core component that renders shadow, using the library's shadow system.
@@ -11,7 +11,7 @@ import { createComponent } from '../utils';
  *
  * @example
  * ```jsx
- * import { Elevation, Surface, Text, View } from `@wordpress/components/ui`;
+ * import { Elevation, Surface, Text, View } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (

packages/components/src/ui/elevation/hook.js → packages/components/src/elevation/hook.js

@@ -12,9 +12,9 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../context';
+import { useContextSystem } from '../ui/context';
 import * as styles from './styles';
-import CONFIG from '../../utils/config-values';
+import CONFIG from '../utils/config-values';
 
 /**
  * @param {number} value
@@ -29,7 +29,7 @@ export function getBoxShadow( value ) {
 }
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../ui/context').ViewOwnProps<import('./types').Props, 'div'>} props
  */
 export function useElevation( props ) {
 	const {

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

@@ -7,15 +7,15 @@ import { number } from '@storybook/addon-knobs';
  * Internal dependencies
  */
 import { Elevation } from '../index';
-import { Grid } from '../../../grid';
-import { View } from '../../../view';
-import { HStack } from '../../../h-stack';
-import { Divider } from '../../../divider';
+import { Grid } from '../../grid';
+import { View } from '../../view';
+import { HStack } from '../../h-stack';
+import { Divider } from '../../divider';
 import {
 	ExampleGrid,
 	ExampleGridItem,
 	ExampleMetaContent,
-} from '../../__storybook-utils';
+} from '../../ui/__storybook-utils';
 
 /**
  * WordPress dependencies
@@ -24,7 +24,7 @@ import { useCallback } from '@wordpress/element';
 
 export default {
 	component: Elevation,
-	title: 'G2 Components (Experimental)/Elevation',
+	title: 'Components (Experimental)/Elevation',
 };
 
 const ElevationWrapper = ( { children } ) => (

packages/components/src/index.js

@@ -57,6 +57,7 @@ export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
+export { Elevation as __experimentalElevation } from './elevation';
 export { default as ExternalLink } from './external-link';
 export { Flex, FlexBlock, FlexItem } from './flex';
 export { default as FocalPointPicker } from './focal-point-picker';

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

@@ -12,7 +12,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { contextConnect } from '../context';
-import { Elevation } from '../elevation';
+import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import * as styles from './styles';
 import { useCard } from './hook';

packages/components/src/ui/index.js

@@ -1,7 +1,6 @@
 export * from './card';
 export * from './control-group';
 export * from './control-label';
-export * from './elevation';
 export * from './form-group';
 export * from './shortcut';
 export * from './spinner';

packages/components/tsconfig.json

@@ -20,6 +20,7 @@
 		"src/base-control/**/*",
 		"src/dashicon/**/*",
 		"src/draggable/**/*",
+		"src/elevation/**/*",
 		"src/flex/**/*",
 		"src/form-group/**/*",
 		"src/scroll-lock/**/*",