From 32a8cba4d464b6c3d7c8ec4941d4697cb55d1526 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 29 Jan 2021 10:00:06 -0500
Subject: [PATCH 1/8] Add Elevation component

---
 docs/manifest.json                            |   6 +
 packages/components/src/elevation/README.md   |  70 ++++
 .../src/elevation/elevation-styles.js         |  13 +
 .../components/src/elevation/elevation.js     |  47 +++
 packages/components/src/elevation/index.js    |   2 +
 .../components/src/elevation/stories/index.js |  31 ++
 .../test/__snapshots__/index.js.snap          | 359 ++++++++++++++++++
 .../components/src/elevation/test/index.js    |  51 +++
 packages/components/src/elevation/types.ts    |  48 +++
 .../components/src/elevation/use-elevation.js |  99 +++++
 packages/components/src/index.js              |   1 +
 11 files changed, 727 insertions(+)
 create mode 100644 packages/components/src/elevation/README.md
 create mode 100644 packages/components/src/elevation/elevation-styles.js
 create mode 100644 packages/components/src/elevation/elevation.js
 create mode 100644 packages/components/src/elevation/index.js
 create mode 100644 packages/components/src/elevation/stories/index.js
 create mode 100644 packages/components/src/elevation/test/__snapshots__/index.js.snap
 create mode 100644 packages/components/src/elevation/test/index.js
 create mode 100644 packages/components/src/elevation/types.ts
 create mode 100644 packages/components/src/elevation/use-elevation.js

diff --git a/docs/manifest.json b/docs/manifest.json
index e571ec2b03ea88..6cc3964517b5c5 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -917,6 +917,12 @@
 		"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",
diff --git a/packages/components/src/elevation/README.md b/packages/components/src/elevation/README.md
new file mode 100644
index 00000000000000..777cec0c654c9a
--- /dev/null
+++ b/packages/components/src/elevation/README.md
@@ -0,0 +1,70 @@
+# Elevation
+
+`Elevation` is a core component that renders shadow, using the component system's shadow system.
+
+## Usage
+
+The shadow effect is generated using the `value` prop.
+
+```jsx live
+import {
+	__experimentalElevation as Elevation,
+	__experimetnalSurface as Surface,
+	__experimetnalText as Text,
+	__experimetnalView as View,
+} from '@wp-g2/components';
+
+function Example() {
+	return (
+		<Surface>
+			<Text>Elevation</Text>
+			<Elevation value={ 5 } />
+		</Surface>
+	);
+}
+```
+
+## Props
+
+##### active
+
+**Type**: `boolean`
+
+Renders the active (interaction) shadow value.
+
+##### borderRadius
+
+**Type**: `string`,`number`
+
+Renders the border-radius of the shadow.
+
+##### focus
+
+**Type**: `boolean`
+
+Renders the focus (interaction) shadow value.
+
+##### hover
+
+**Type**: `boolean`
+
+Renders the hover (interaction) shadow value.
+
+##### isInteractive
+
+**Type**: `boolean`
+
+Determines if hover, active, and focus shadow values should be automatically calculated and rendered.
+
+##### offset
+
+**Type**: `number`
+
+Dimensional offsets (margin) for the shadow.
+
+##### value
+
+**Type**: `number`
+
+Size of the shadow, based on the Style system's elevation system. The `value` determines the strength of the shadow, which sense of depth.
+In the example below, `isInteractive` is activated to give a better sense of depth.
diff --git a/packages/components/src/elevation/elevation-styles.js b/packages/components/src/elevation/elevation-styles.js
new file mode 100644
index 00000000000000..398a015cc30901
--- /dev/null
+++ b/packages/components/src/elevation/elevation-styles.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { css } from '@wp-g2/styles';
+
+export const Elevation = css`
+	background: transparent;
+	display: block;
+	margin: 0 !important;
+	pointer-events: none;
+	position: absolute;
+	will-change: box-shadow;
+`;
diff --git a/packages/components/src/elevation/elevation.js b/packages/components/src/elevation/elevation.js
new file mode 100644
index 00000000000000..607dcc2e66a7a4
--- /dev/null
+++ b/packages/components/src/elevation/elevation.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { contextConnect } from '@wp-g2/context';
+
+/**
+ * Internal dependencies
+ */
+import View from '../view';
+import { useElevation } from './use-elevation';
+
+/**
+ *
+ * @param {import('@wp-g2/create-styles').ViewOwnProps<'div', import('./types').Props>} props
+ * @param {import('react').Ref<any>} forwardedRef
+ */
+function Elevation( props, forwardedRef ) {
+	const otherProps = useElevation( props );
+
+	return <View { ...otherProps } ref={ forwardedRef } />;
+}
+
+/**
+ * `Elevation` is a core component that renders shadow, using the library's shadow system.
+ *
+ * The shadow effect is generated using the `value` prop.
+ *
+ * @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)]}>
+ *         <Text>Into The Unknown</Text>
+ *         <Elevation value={5} />
+ *       </Surface>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+const ConnectedElevation = contextConnect( Elevation, 'Elevation' );
+
+export default ConnectedElevation;
diff --git a/packages/components/src/elevation/index.js b/packages/components/src/elevation/index.js
new file mode 100644
index 00000000000000..0c1b665437e65c
--- /dev/null
+++ b/packages/components/src/elevation/index.js
@@ -0,0 +1,2 @@
+export { default } from './elevation';
+export * from './use-elevation';
diff --git a/packages/components/src/elevation/stories/index.js b/packages/components/src/elevation/stories/index.js
new file mode 100644
index 00000000000000..09cfd7e55c4006
--- /dev/null
+++ b/packages/components/src/elevation/stories/index.js
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { number } from '@storybook/addon-knobs';
+/**
+ * Internal dependencies
+ */
+import Elevation from '../index';
+import View from '../../view';
+
+export default {
+	component: Elevation,
+	title: 'Components/Elevation',
+};
+
+export const _default = () => {
+	const value = number( 'value', 5 );
+
+	return (
+		<View
+			css={ {
+				padding: '20vh',
+				position: 'relative',
+				margin: '20vh auto 10vw',
+				maxWidth: 400,
+			} }
+		>
+			<Elevation isInteractive value={ value } />
+		</View>
+	);
+};
diff --git a/packages/components/src/elevation/test/__snapshots__/index.js.snap b/packages/components/src/elevation/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000000..a04ca4976d3cda
--- /dev/null
+++ b/packages/components/src/elevation/test/__snapshots__/index.js.snap
@@ -0,0 +1,359 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`props should render active 1`] = `
+.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: transparent;
+  display: block;
+  margin: 0 !important;
+  pointer-events: none;
+  position: absolute;
+  will-change: box-shadow;
+  border-radius: inherit;
+  bottom: 0;
+  box-shadow: 0 7px 14px 0 rgba(0 ,0,0,0.35);
+  opacity: 1;
+  opacity: var(--wp-g2-elevation-intensity);
+  left: 0;
+  right: 0;
+  top: 0;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  -webkit-transition: none !important;
+  transition: none !important;
+}
+
+*:hover > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 14px 28px 0 rgba(0 ,0,0,0.7);
+}
+
+*:active > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 5px 10px 0 rgba(0 ,0,0,0.25);
+}
+
+*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
+}
+
+<div
+  class="components-elevation wp-components-elevation emotion-0"
+  data-g2-c16t="true"
+  data-g2-component="Elevation"
+/>
+`;
+
+exports[`props should render correctly 1`] = `
+.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: transparent;
+  display: block;
+  margin: 0 !important;
+  pointer-events: none;
+  position: absolute;
+  will-change: box-shadow;
+  border-radius: inherit;
+  bottom: 0;
+  box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0);
+  opacity: 1;
+  opacity: var(--wp-g2-elevation-intensity);
+  left: 0;
+  right: 0;
+  top: 0;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  -webkit-transition: none !important;
+  transition: none !important;
+}
+
+*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
+}
+
+<div
+  class="components-elevation wp-components-elevation emotion-0"
+  data-g2-c16t="true"
+  data-g2-component="Elevation"
+/>
+`;
+
+exports[`props should render hover 1`] = `
+.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: transparent;
+  display: block;
+  margin: 0 !important;
+  pointer-events: none;
+  position: absolute;
+  will-change: box-shadow;
+  border-radius: inherit;
+  bottom: 0;
+  box-shadow: 0 7px 14px 0 rgba(0 ,0,0,0.35);
+  opacity: 1;
+  opacity: var(--wp-g2-elevation-intensity);
+  left: 0;
+  right: 0;
+  top: 0;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  -webkit-transition: none !important;
+  transition: none !important;
+}
+
+*:hover > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 14px 28px 0 rgba(0 ,0,0,0.7);
+}
+
+*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
+}
+
+<div
+  class="components-elevation wp-components-elevation emotion-0"
+  data-g2-c16t="true"
+  data-g2-component="Elevation"
+/>
+`;
+
+exports[`props should render isInteractive 1`] = `
+.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: transparent;
+  display: block;
+  margin: 0 !important;
+  pointer-events: none;
+  position: absolute;
+  will-change: box-shadow;
+  border-radius: inherit;
+  bottom: 0;
+  box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0);
+  opacity: 1;
+  opacity: var(--wp-g2-elevation-intensity);
+  left: 0;
+  right: 0;
+  top: 0;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  -webkit-transition: none !important;
+  transition: none !important;
+}
+
+*:hover > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0);
+}
+
+*:active > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0);
+}
+
+*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
+}
+
+<div
+  class="components-elevation wp-components-elevation emotion-0"
+  data-g2-c16t="true"
+  data-g2-component="Elevation"
+/>
+`;
+
+exports[`props should render offset 1`] = `
+.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: transparent;
+  display: block;
+  margin: 0 !important;
+  pointer-events: none;
+  position: absolute;
+  will-change: box-shadow;
+  border-radius: inherit;
+  bottom: -2px;
+  box-shadow: 0 7px 14px 0 rgba(0 ,0,0,0.35);
+  opacity: 1;
+  opacity: var(--wp-g2-elevation-intensity);
+  left: -2px;
+  right: -2px;
+  top: -2px;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  -webkit-transition: none !important;
+  transition: none !important;
+}
+
+*:hover > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 14px 28px 0 rgba(0 ,0,0,0.7);
+}
+
+*:active > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 5px 10px 0 rgba(0 ,0,0,0.25);
+}
+
+*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
+}
+
+<div
+  class="components-elevation wp-components-elevation emotion-0"
+  data-g2-c16t="true"
+  data-g2-component="Elevation"
+/>
+`;
+
+exports[`props should render value 1`] = `
+.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: transparent;
+  display: block;
+  margin: 0 !important;
+  pointer-events: none;
+  position: absolute;
+  will-change: box-shadow;
+  border-radius: inherit;
+  bottom: 0;
+  box-shadow: 0 7px 14px 0 rgba(0 ,0,0,0.35);
+  opacity: 1;
+  opacity: var(--wp-g2-elevation-intensity);
+  left: 0;
+  right: 0;
+  top: 0;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  -webkit-transition: none !important;
+  transition: none !important;
+}
+
+*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
+  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
+}
+
+<div
+  class="components-elevation wp-components-elevation emotion-0"
+  data-g2-c16t="true"
+  data-g2-component="Elevation"
+/>
+`;
diff --git a/packages/components/src/elevation/test/index.js b/packages/components/src/elevation/test/index.js
new file mode 100644
index 00000000000000..1e739022a7c396
--- /dev/null
+++ b/packages/components/src/elevation/test/index.js
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Elevation from '../index';
+
+describe( 'props', () => {
+	test( 'should render correctly', () => {
+		const { container } = render( <Elevation /> );
+
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
+
+	test( 'should render isInteractive', () => {
+		const { container } = render( <Elevation isInteractive /> );
+
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
+
+	test( 'should render value', () => {
+		const { container } = render( <Elevation value={ 7 } /> );
+
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
+
+	test( 'should render hover', () => {
+		const { container } = render( <Elevation hover={ 14 } value={ 7 } /> );
+
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
+
+	test( 'should render active', () => {
+		const { container } = render(
+			<Elevation active={ 5 } hover={ 14 } value={ 7 } />
+		);
+
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
+
+	test( 'should render offset', () => {
+		const { container } = render(
+			<Elevation active={ 5 } hover={ 14 } offset={ -2 } value={ 7 } />
+		);
+
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/components/src/elevation/types.ts b/packages/components/src/elevation/types.ts
new file mode 100644
index 00000000000000..cdbabfaf1e6fda
--- /dev/null
+++ b/packages/components/src/elevation/types.ts
@@ -0,0 +1,48 @@
+export type Props = {
+	/**
+	 * Renders the active (interaction) shadow value.
+	 */
+	active?: boolean;
+	/**
+	 * Renders the border-radius of the shadow.
+	 */
+	borderRadius?: number | string;
+	/**
+	 * Renders the focus (interaction) shadow value.
+	 */
+	focus?: boolean;
+	/**
+	 * Renders the hover (interaction) shadow value.
+	 */
+	hover?: boolean;
+	/**
+	 * Determines if hover, active, and focus shadow values should be automatically calculated and rendered.
+	 */
+	isInteractive?: boolean;
+	/**
+	 * Dimensional offsets (margin) for the shadow.
+	 */
+	offset?: number;
+	/**
+	 * Size of the shadow, based on the Style system's elevation system. The `value` determines the strength of the shadow, which sense of depth.
+	 * In the example below, `isInteractive` is activated to give a better sense of depth.
+	 *
+	 * @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)]}>
+	 *         <Text>Into The Unknown</Text>
+	 *         <Elevation value={8} isInteractive />
+	 *       </Surface>
+	 *     </View>
+	 *   )
+	 * }
+	 * ```
+	 */
+	value?: number;
+};
diff --git a/packages/components/src/elevation/use-elevation.js b/packages/components/src/elevation/use-elevation.js
new file mode 100644
index 00000000000000..a90834a0f85e71
--- /dev/null
+++ b/packages/components/src/elevation/use-elevation.js
@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import { useContextSystem } from '@wp-g2/context';
+import { css, cx, getBoxShadow, ui } from '@wp-g2/styles';
+import { is } from '@wp-g2/utils';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from './elevation-styles';
+
+/**
+ * @param {import('@wp-g2/create-styles').ViewOwnProps<import('./types').Props, 'div'>} props
+ */
+export function useElevation( props ) {
+	const {
+		active,
+		borderRadius = 'inherit',
+		className,
+		focus = false,
+		hover = false,
+		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;
+
+		if ( ! isInteractive ) {
+			hoverValue = !! hover ? hover : undefined;
+			activeValue = !! active ? active : undefined;
+		}
+
+		const transition = `box-shadow ${ ui.get(
+			'transitionDuration'
+		) } ${ ui.get( 'transitionTimingFunction' ) }`;
+
+		const sx = {};
+
+		sx.Base = css( {
+			borderRadius,
+			bottom: offset,
+			boxShadow: getBoxShadow( value ),
+			opacity: ui.get( 'elevationIntensity' ),
+			left: offset,
+			right: offset,
+			top: offset,
+			transition,
+		} );
+
+		sx.hover = css`
+			*:hover > & {
+				box-shadow: ${ getBoxShadow( hoverValue ) };
+			}
+		`;
+
+		sx.active = css`
+			*:active > & {
+				box-shadow: ${ getBoxShadow( activeValue ) };
+			}
+		`;
+
+		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,
+			className
+		);
+	}, [
+		active,
+		borderRadius,
+		className,
+		focus,
+		hover,
+		isInteractive,
+		offset,
+		value,
+	] );
+
+	return { ...otherProps, className: classes };
+}
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 0c67e9330f035e..c1dcac041f2ce1 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -59,6 +59,7 @@ 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';

From c1a48469be424c16b4067461e68048b5d2c8944a Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 29 Jan 2021 10:08:14 -0500
Subject: [PATCH 2/8] Add aria-hidden to the Elevation element

---
 packages/components/src/elevation/elevation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/elevation/elevation.js b/packages/components/src/elevation/elevation.js
index 607dcc2e66a7a4..862b2d21577e68 100644
--- a/packages/components/src/elevation/elevation.js
+++ b/packages/components/src/elevation/elevation.js
@@ -17,7 +17,7 @@ import { useElevation } from './use-elevation';
 function Elevation( props, forwardedRef ) {
 	const otherProps = useElevation( props );
 
-	return <View { ...otherProps } ref={ forwardedRef } />;
+	return <View aria-hidden { ...otherProps } ref={ forwardedRef } />;
 }
 
 /**

From b31f9e9b4ea230a57c64ce14bca129b7b4780b9d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 29 Jan 2021 10:09:46 -0500
Subject: [PATCH 3/8] Update type for borderRadius

---
 packages/components/src/elevation/types.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/elevation/types.ts b/packages/components/src/elevation/types.ts
index cdbabfaf1e6fda..351f36da906d3a 100644
--- a/packages/components/src/elevation/types.ts
+++ b/packages/components/src/elevation/types.ts
@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 export type Props = {
 	/**
 	 * Renders the active (interaction) shadow value.
@@ -6,7 +8,7 @@ export type Props = {
 	/**
 	 * Renders the border-radius of the shadow.
 	 */
-	borderRadius?: number | string;
+	borderRadius?: CSSProperties[ 'borderRadius' ];
 	/**
 	 * Renders the focus (interaction) shadow value.
 	 */

From d9408225d0afd1df8d129ea53f8c2a3808e38d0b Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 29 Jan 2021 10:47:08 -0500
Subject: [PATCH 4/8] Update snapshot tests

---
 .../src/elevation/test/__snapshots__/index.js.snap          | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/src/elevation/test/__snapshots__/index.js.snap b/packages/components/src/elevation/test/__snapshots__/index.js.snap
index a04ca4976d3cda..c7741b6e5472a3 100644
--- a/packages/components/src/elevation/test/__snapshots__/index.js.snap
+++ b/packages/components/src/elevation/test/__snapshots__/index.js.snap
@@ -57,6 +57,7 @@ exports[`props should render active 1`] = `
 }
 
 <div
+  aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
   data-g2-c16t="true"
   data-g2-component="Elevation"
@@ -112,6 +113,7 @@ exports[`props should render correctly 1`] = `
 }
 
 <div
+  aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
   data-g2-c16t="true"
   data-g2-component="Elevation"
@@ -171,6 +173,7 @@ exports[`props should render hover 1`] = `
 }
 
 <div
+  aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
   data-g2-c16t="true"
   data-g2-component="Elevation"
@@ -234,6 +237,7 @@ exports[`props should render isInteractive 1`] = `
 }
 
 <div
+  aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
   data-g2-c16t="true"
   data-g2-component="Elevation"
@@ -297,6 +301,7 @@ exports[`props should render offset 1`] = `
 }
 
 <div
+  aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
   data-g2-c16t="true"
   data-g2-component="Elevation"
@@ -352,6 +357,7 @@ exports[`props should render value 1`] = `
 }
 
 <div
+  aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
   data-g2-c16t="true"
   data-g2-component="Elevation"

From 8bbda0cf4489b6c542eff20745a8c74ec60c2462 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Tue, 9 Feb 2021 13:34:43 -0800
Subject: [PATCH 5/8] Move elevation into ui

---
 docs/manifest.json                            |  6 --
 packages/components/src/elevation/index.js    |  2 -
 packages/components/src/index.js              |  1 -
 .../src/{ => ui}/elevation/README.md          |  0
 .../{ => ui}/elevation/elevation-styles.js    |  0
 .../src/{ => ui}/elevation/elevation.js       | 13 ++--
 packages/components/src/ui/elevation/index.js |  2 +
 .../src/{ => ui}/elevation/stories/index.js   | 17 ++++--
 .../test/__snapshots__/index.js.snap          |  0
 .../src/{ => ui}/elevation/test/index.js      |  2 +-
 .../src/{ => ui}/elevation/types.ts           |  6 +-
 .../src/{ => ui}/elevation/use-elevation.js   | 59 +++++++++++--------
 packages/components/src/ui/index.js           |  1 +
 13 files changed, 58 insertions(+), 51 deletions(-)
 delete mode 100644 packages/components/src/elevation/index.js
 rename packages/components/src/{ => ui}/elevation/README.md (100%)
 rename packages/components/src/{ => ui}/elevation/elevation-styles.js (100%)
 rename packages/components/src/{ => ui}/elevation/elevation.js (70%)
 create mode 100644 packages/components/src/ui/elevation/index.js
 rename packages/components/src/{ => ui}/elevation/stories/index.js (50%)
 rename packages/components/src/{ => ui}/elevation/test/__snapshots__/index.js.snap (100%)
 rename packages/components/src/{ => ui}/elevation/test/index.js (96%)
 rename packages/components/src/{ => ui}/elevation/types.ts (95%)
 rename packages/components/src/{ => ui}/elevation/use-elevation.js (60%)

diff --git a/docs/manifest.json b/docs/manifest.json
index 6cc3964517b5c5..e571ec2b03ea88 100644
--- a/docs/manifest.json
+++ b/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",
diff --git a/packages/components/src/elevation/index.js b/packages/components/src/elevation/index.js
deleted file mode 100644
index 0c1b665437e65c..00000000000000
--- a/packages/components/src/elevation/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './elevation';
-export * from './use-elevation';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index c1dcac041f2ce1..0c67e9330f035e 100644
--- a/packages/components/src/index.js
+++ b/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';
diff --git a/packages/components/src/elevation/README.md b/packages/components/src/ui/elevation/README.md
similarity index 100%
rename from packages/components/src/elevation/README.md
rename to packages/components/src/ui/elevation/README.md
diff --git a/packages/components/src/elevation/elevation-styles.js b/packages/components/src/ui/elevation/elevation-styles.js
similarity index 100%
rename from packages/components/src/elevation/elevation-styles.js
rename to packages/components/src/ui/elevation/elevation-styles.js
diff --git a/packages/components/src/elevation/elevation.js b/packages/components/src/ui/elevation/elevation.js
similarity index 70%
rename from packages/components/src/elevation/elevation.js
rename to packages/components/src/ui/elevation/elevation.js
index 862b2d21577e68..78bf6735af5a62 100644
--- a/packages/components/src/elevation/elevation.js
+++ b/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>
  *   );
diff --git a/packages/components/src/ui/elevation/index.js b/packages/components/src/ui/elevation/index.js
new file mode 100644
index 00000000000000..bb457293a6fdee
--- /dev/null
+++ b/packages/components/src/ui/elevation/index.js
@@ -0,0 +1,2 @@
+export { default as Elevation } from './elevation';
+export * from './use-elevation';
diff --git a/packages/components/src/elevation/stories/index.js b/packages/components/src/ui/elevation/stories/index.js
similarity index 50%
rename from packages/components/src/elevation/stories/index.js
rename to packages/components/src/ui/elevation/stories/index.js
index 09cfd7e55c4006..f7963dc61aeb27 100644
--- a/packages/components/src/elevation/stories/index.js
+++ b/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>
 	);
 };
diff --git a/packages/components/src/elevation/test/__snapshots__/index.js.snap b/packages/components/src/ui/elevation/test/__snapshots__/index.js.snap
similarity index 100%
rename from packages/components/src/elevation/test/__snapshots__/index.js.snap
rename to packages/components/src/ui/elevation/test/__snapshots__/index.js.snap
diff --git a/packages/components/src/elevation/test/index.js b/packages/components/src/ui/elevation/test/index.js
similarity index 96%
rename from packages/components/src/elevation/test/index.js
rename to packages/components/src/ui/elevation/test/index.js
index 1e739022a7c396..48d5fe6f6151ad 100644
--- a/packages/components/src/elevation/test/index.js
+++ b/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', () => {
diff --git a/packages/components/src/elevation/types.ts b/packages/components/src/ui/elevation/types.ts
similarity index 95%
rename from packages/components/src/elevation/types.ts
rename to packages/components/src/ui/elevation/types.ts
index 351f36da906d3a..c589ab26b0c3ac 100644
--- a/packages/components/src/elevation/types.ts
+++ b/packages/components/src/ui/elevation/types.ts
@@ -4,7 +4,7 @@ export type Props = {
 	/**
 	 * Renders the active (interaction) shadow value.
 	 */
-	active?: boolean;
+	active?: number;
 	/**
 	 * Renders the border-radius of the shadow.
 	 */
@@ -12,11 +12,11 @@ export type Props = {
 	/**
 	 * 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.
 	 */
diff --git a/packages/components/src/elevation/use-elevation.js b/packages/components/src/ui/elevation/use-elevation.js
similarity index 60%
rename from packages/components/src/elevation/use-elevation.js
rename to packages/components/src/ui/elevation/use-elevation.js
index a90834a0f85e71..1487e2839b05c4 100644
--- a/packages/components/src/elevation/use-elevation.js
+++ b/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,8 +23,8 @@ export function useElevation( props ) {
 		active,
 		borderRadius = 'inherit',
 		className,
-		focus = false,
-		hover = false,
+		focus,
+		hover,
 		isInteractive = false,
 		offset = 0,
 		value = 0,
@@ -32,12 +32,14 @@ export function useElevation( props ) {
 	} = 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
 		);
 	}, [
diff --git a/packages/components/src/ui/index.js b/packages/components/src/ui/index.js
index ba099d22a5dfa5..da9767cf37496b 100644
--- a/packages/components/src/ui/index.js
+++ b/packages/components/src/ui/index.js
@@ -1,3 +1,4 @@
+export * from './elevation';
 export * from './flex';
 export * from './grid';
 export * from './h-stack';

From be4256be0ef666bf7d57d2ce215365c420081772 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 9 Feb 2021 17:56:44 -0500
Subject: [PATCH 6/8] Update snapshot

---
 .../test/__snapshots__/index.js.snap          | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/packages/components/src/ui/elevation/test/__snapshots__/index.js.snap b/packages/components/src/ui/elevation/test/__snapshots__/index.js.snap
index c7741b6e5472a3..09f50122f9bcca 100644
--- a/packages/components/src/ui/elevation/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/elevation/test/__snapshots__/index.js.snap
@@ -52,10 +52,6 @@ exports[`props should render active 1`] = `
   box-shadow: 0 5px 10px 0 rgba(0 ,0,0,0.25);
 }
 
-*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
-  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
-}
-
 <div
   aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
@@ -108,10 +104,6 @@ exports[`props should render correctly 1`] = `
   transition: none !important;
 }
 
-*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
-  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
-}
-
 <div
   aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
@@ -168,10 +160,6 @@ exports[`props should render hover 1`] = `
   box-shadow: 0 14px 28px 0 rgba(0 ,0,0,0.7);
 }
 
-*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
-  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
-}
-
 <div
   aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
@@ -232,10 +220,6 @@ exports[`props should render isInteractive 1`] = `
   box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0);
 }
 
-*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
-  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
-}
-
 <div
   aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
@@ -296,10 +280,6 @@ exports[`props should render offset 1`] = `
   box-shadow: 0 5px 10px 0 rgba(0 ,0,0,0.25);
 }
 
-*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
-  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
-}
-
 <div
   aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"
@@ -352,10 +332,6 @@ exports[`props should render value 1`] = `
   transition: none !important;
 }
 
-*:focus > .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 {
-  box-shadow: 0 false 0px 0 rgba(0 ,0,0,0);
-}
-
 <div
   aria-hidden="true"
   class="components-elevation wp-components-elevation emotion-0"

From 2787ac82fafc553469a1073dee87b8030f08e652 Mon Sep 17 00:00:00 2001
From: Sara Marcondes <saram@fastmail.com>
Date: Thu, 11 Feb 2021 07:24:41 -0800
Subject: [PATCH 7/8] Fix types

---
 .../components/src/ui/elevation/elevation.js  | 26 +++++--------------
 packages/components/src/ui/elevation/types.ts |  1 +
 .../src/ui/elevation/use-elevation.js         |  2 +-
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/ui/elevation/elevation.js b/packages/components/src/ui/elevation/elevation.js
index 78bf6735af5a62..f09ce51d92689a 100644
--- a/packages/components/src/ui/elevation/elevation.js
+++ b/packages/components/src/ui/elevation/elevation.js
@@ -1,24 +1,8 @@
-/**
- * External dependencies
- */
-import { contextConnect } from '@wp-g2/context';
-
 /**
  * Internal dependencies
  */
-import { View } from '../view';
 import { useElevation } from './use-elevation';
-
-/**
- *
- * @param {import('@wp-g2/create-styles').ViewOwnProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>} forwardedRef
- */
-function Elevation( props, forwardedRef ) {
-	const otherProps = useElevation( props );
-
-	return <View aria-hidden { ...otherProps } ref={ forwardedRef } />;
-}
+import { createComponent } from '../utils';
 
 /**
  * `Elevation` is a core component that renders shadow, using the library's shadow system.
@@ -39,6 +23,10 @@ function Elevation( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedElevation = contextConnect( Elevation, 'Elevation' );
+const Elevation = createComponent( {
+	as: 'div',
+	useHook: useElevation,
+	name: 'Elevation',
+} );
 
-export default ConnectedElevation;
+export default Elevation;
diff --git a/packages/components/src/ui/elevation/types.ts b/packages/components/src/ui/elevation/types.ts
index c589ab26b0c3ac..fd9cb7ad91139d 100644
--- a/packages/components/src/ui/elevation/types.ts
+++ b/packages/components/src/ui/elevation/types.ts
@@ -47,4 +47,5 @@ export type Props = {
 	 * ```
 	 */
 	value?: number;
+	children?: never;
 };
diff --git a/packages/components/src/ui/elevation/use-elevation.js b/packages/components/src/ui/elevation/use-elevation.js
index 1487e2839b05c4..afc5967117af25 100644
--- a/packages/components/src/ui/elevation/use-elevation.js
+++ b/packages/components/src/ui/elevation/use-elevation.js
@@ -102,5 +102,5 @@ export function useElevation( props ) {
 		value,
 	] );
 
-	return { ...otherProps, className: classes };
+	return { ...otherProps, className: classes, 'aria-hidden': true };
 }

From e1eb92e11ca9d235975d06c8b1fa556ffbf21552 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 11 Feb 2021 10:53:57 -0500
Subject: [PATCH 8/8] Update elevation stories + active vs. focus style
 rendering order

---
 .../src/ui/elevation/stories/index.js         | 86 +++++++++++++++++--
 .../src/ui/elevation/use-elevation.js         |  2 +-
 2 files changed, 81 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/ui/elevation/stories/index.js b/packages/components/src/ui/elevation/stories/index.js
index f7963dc61aeb27..45bca3ba26bceb 100644
--- a/packages/components/src/ui/elevation/stories/index.js
+++ b/packages/components/src/ui/elevation/stories/index.js
@@ -1,13 +1,20 @@
 /**
  * External dependencies
  */
-import { number } from '@storybook/addon-knobs';
+import { boolean, number } from '@storybook/addon-knobs';
+
 /**
  * Internal dependencies
  */
 import { Elevation } from '../index';
+import { Grid } from '../../grid';
 import { View } from '../../view';
 
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
 export default {
 	component: Elevation,
 	title: 'G2 Components (Experimental)/Elevation',
@@ -15,26 +22,93 @@ export default {
 
 export const _default = () => {
 	const value = number( 'value', 5 );
+	const borderRadius = number( 'borderRadius', 0 );
 	const hover = number( 'hover', undefined );
-	const focus = number( 'focus', undefined );
 	const active = number( 'active', undefined );
+	const isInteractive = boolean( 'isInteractive', true );
 
 	return (
 		<View
 			css={ {
-				padding: '20vh',
+				padding: '10vh',
 				position: 'relative',
 				margin: '20vh auto 10vw',
-				maxWidth: 400,
+				maxWidth: 200,
 			} }
 		>
 			<Elevation
-				isInteractive
+				isInteractive={ isInteractive }
 				value={ value }
+				borderRadius={ borderRadius }
 				hover={ hover }
-				focus={ focus }
 				active={ active }
 			/>
 		</View>
 	);
 };
+
+export const Focus = () => {
+	const borderRadius = number( 'borderRadius', 0 );
+	const value = number( 'value', 5 );
+	const hover = number( 'hover', 5 );
+	const active = number( 'active', 1 );
+	const focus = number( 'focus', 10 );
+
+	const Card = useCallback(
+		( props ) => (
+			<View
+				{ ...props }
+				as="a"
+				href="#"
+				onClick={ ( e ) => e.preventDefault() }
+				css={ {
+					display: 'block',
+					width: 100,
+					height: 100,
+					borderRadius,
+					position: 'relative',
+					margin: '20vh auto 10vw',
+				} }
+			/>
+		),
+		[]
+	);
+
+	return (
+		<View
+			css={ {
+				padding: '10vh',
+			} }
+		>
+			<Grid columns={ 3 }>
+				<Card>
+					<Elevation
+						borderRadius={ borderRadius }
+						value={ value }
+						focus={ focus }
+						active={ active }
+						hover={ hover }
+					/>
+				</Card>
+				<Card>
+					<Elevation
+						borderRadius={ borderRadius }
+						value={ value }
+						focus={ focus }
+						active={ active }
+						hover={ hover }
+					/>
+				</Card>
+				<Card>
+					<Elevation
+						borderRadius={ borderRadius }
+						value={ value }
+						focus={ focus }
+						active={ active }
+						hover={ hover }
+					/>
+				</Card>
+			</Grid>
+		</View>
+	);
+};
diff --git a/packages/components/src/ui/elevation/use-elevation.js b/packages/components/src/ui/elevation/use-elevation.js
index afc5967117af25..b26b6259461506 100644
--- a/packages/components/src/ui/elevation/use-elevation.js
+++ b/packages/components/src/ui/elevation/use-elevation.js
@@ -87,8 +87,8 @@ export function useElevation( props ) {
 			styles.Elevation,
 			sx.Base,
 			sx.hover && sx.hover,
-			sx.active && sx.active,
 			sx.focus && sx.focus,
+			sx.active && sx.active,
 			className
 		);
 	}, [