Move elevation into ui

docs/manifest.json

@@ -917,12 +917,6 @@
 		"markdown_source": "../packages/components/src/dropdown/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/index.js

@@ -59,7 +59,6 @@ export {
 } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
-export { default as __experimentalElevation } from './elevation';
 export { default as ExternalLink } from './external-link';
 export { default as Flex } from './flex';
 export { default as FlexBlock } from './flex/block';

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

@@ -6,12 +6,12 @@ import { contextConnect } from '@wp-g2/context';
 /**
  * Internal dependencies
  */
-import View from '../view';
+import { View } from '../view';
 import { useElevation } from './use-elevation';
 
 /**
  *
- * @param {import('@wp-g2/create-styles').ViewOwnProps<'div', import('./types').Props>} props
+ * @param {import('@wp-g2/create-styles').ViewOwnProps<import('./types').Props, 'div'>} props
  * @param {import('react').Ref<any>} forwardedRef
  */
 function Elevation( props, forwardedRef ) {
@@ -27,15 +27,12 @@ function Elevation( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import { Elevation, Surface, Text, View } from `@wp-g2/components`
- * import { ui } from `@wp-g2/styles`
- *
  * function Example() {
  *   return (
- *     <View css={[ui.padding(5)]}>
- *       <Surface css={[ui.padding(5)]}>
+ *     <View css={ [ ui.padding( 5 ) ] }>
+ *       <Surface css={ [ ui.padding( 5 ) ] }>
  *         <Text>Into The Unknown</Text>
- *         <Elevation value={5} />
+ *         <Elevation value={ 5 } />
  *       </Surface>
  *     </View>
  *   );

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

@@ -0,0 +1,2 @@
+export { default as Elevation } from './elevation';
+export * from './use-elevation';

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

@@ -5,16 +5,19 @@ import { number } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Elevation from '../index';
-import View from '../../view';
+import { Elevation } from '../index';
+import { View } from '../../view';
 
 export default {
 	component: Elevation,
-	title: 'Components/Elevation',
+	title: 'G2 Components (Experimental)/Elevation',
 };
 
 export const _default = () => {
 	const value = number( 'value', 5 );
+	const hover = number( 'hover', undefined );
+	const focus = number( 'focus', undefined );
+	const active = number( 'active', undefined );
 
 	return (
 		<View
@@ -25,7 +28,13 @@ export const _default = () => {
 				maxWidth: 400,
 			} }
 		>
-			<Elevation isInteractive value={ value } />
+			<Elevation
+				isInteractive
+				value={ value }
+				hover={ hover }
+				focus={ focus }
+				active={ active }
+			/>
 		</View>
 	);
 };

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

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

packages/components/src/elevation/types.ts → packages/components/src/ui/elevation/types.ts

@@ -4,19 +4,19 @@ export type Props = {
 	/**
 	 * Renders the active (interaction) shadow value.
 	 */
-	active?: boolean;
+	active?: number;
 	/**
 	 * Renders the border-radius of the shadow.
 	 */
 	borderRadius?: CSSProperties[ 'borderRadius' ];
 	/**
 	 * Renders the focus (interaction) shadow value.
 	 */
-	focus?: boolean;
+	focus?: number;
 	/**
 	 * Renders the hover (interaction) shadow value.
 	 */
-	hover?: boolean;
+	hover?: number;
 	/**
 	 * Determines if hover, active, and focus shadow values should be automatically calculated and rendered.
 	 */

packages/components/src/elevation/use-elevation.js → packages/components/src/ui/elevation/use-elevation.js

@@ -3,7 +3,7 @@
  */
 import { useContextSystem } from '@wp-g2/context';
 import { css, cx, getBoxShadow, ui } from '@wp-g2/styles';
-import { is } from '@wp-g2/utils';
+import { isNil } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,21 +23,23 @@ export function useElevation( props ) {
 		active,
 		borderRadius = 'inherit',
 		className,
-		focus = false,
-		hover = false,
+		focus,
+		hover,
 		isInteractive = false,
 		offset = 0,
 		value = 0,
 		...otherProps
 	} = useContextSystem( props, 'Elevation' );
 
 	const classes = useMemo( () => {
-		let hoverValue = !! hover ? hover : value * 2;
-		let activeValue = !! active ? hover : value / 2;
+		/** @type {number | undefined} */
+		let hoverValue = ! isNil( hover ) ? hover : value * 2;
+		/** @type {number | undefined} */
+		let activeValue = ! isNil( active ) ? active : value / 2;
 
 		if ( ! isInteractive ) {
-			hoverValue = !! hover ? hover : undefined;
-			activeValue = !! active ? active : undefined;
+			hoverValue = ! isNil( hover ) ? hover : undefined;
+			activeValue = ! isNil( active ) ? active : undefined;
 		}
 
 		const transition = `box-shadow ${ ui.get(
@@ -57,31 +59,36 @@ export function useElevation( props ) {
 			transition,
 		} );
 
-		sx.hover = css`
-			*:hover > & {
-				box-shadow: ${ getBoxShadow( hoverValue ) };
-			}
-		`;
+		if ( ! isNil( hoverValue ) ) {
+			sx.hover = css`
+				*:hover > & {
+					box-shadow: ${ getBoxShadow( hoverValue ) };
+				}
+			`;
+		}
 
-		sx.active = css`
-			*:active > & {
-				box-shadow: ${ getBoxShadow( activeValue ) };
-			}
-		`;
+		if ( ! isNil( activeValue ) ) {
+			sx.active = css`
+				*:active > & {
+					box-shadow: ${ getBoxShadow( activeValue ) };
+				}
+			`;
+		}
 
-		sx.focus = css`
-			*:focus > & {
-				box-shadow: ${ getBoxShadow( focus ) };
-			}
-		`;
+		if ( ! isNil( focus ) ) {
+			sx.focus = css`
+				*:focus > & {
+					box-shadow: ${ getBoxShadow( focus ) };
+				}
+			`;
+		}
 
 		return cx(
 			styles.Elevation,
-			sx.Elevation,
 			sx.Base,
-			is.defined( hoverValue ) && sx.hover,
-			is.defined( activeValue ) && sx.active,
-			is.defined( focus ) && sx.focus,
+			sx.hover && sx.hover,
+			sx.active && sx.active,
+			sx.focus && sx.focus,
 			className
 		);
 	}, [

packages/components/src/ui/index.js

@@ -1,3 +1,4 @@
+export * from './elevation';
 export * from './flex';
 export * from './grid';
 export * from './h-stack';