components: Remove @emotion/css from Spacer

packages/components/src/spacer/component.ts → packages/components/src/spacer/component.tsx

@@ -1,8 +1,38 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
-import { useSpacer } from './hook';
+import {
+	useContextSystem,
+	contextConnect,
+	PolymorphicComponentProps,
+} from '../ui/context';
+import type { Props } from './types';
+import { SpacerView } from './styles';
+
+const DEFAULT_PROPS = {
+	marginBottom: 2,
+};
+
+function Spacer(
+	props: PolymorphicComponentProps< Props, 'div' >,
+	forwardedRef: Ref< any >
+) {
+	const contextProps = useContextSystem( props, 'Spacer' );
+
+	return (
+		<SpacerView
+			ref={ forwardedRef }
+			{ ...DEFAULT_PROPS }
+			{ ...contextProps }
+		/>
+	);
+}
 
 /**
  * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.
@@ -27,10 +57,6 @@ import { useSpacer } from './hook';
  * }
  * ```
  */
-const Spacer = createComponent( {
-	as: 'div',
-	useHook: useSpacer,
-	name: 'Spacer',
-} );
+const ConnectedSpacer = contextConnect( Spacer, 'Spacer' );
 
-export default Spacer;
+export default ConnectedSpacer;

packages/components/src/spacer/index.ts

@@ -1,3 +1,2 @@
 export { default as Spacer } from './component';
-export { useSpacer } from './hook';
-export type { SpacerProps } from './hook';
+export type { Props as SpacerProps } from './types';

packages/components/src/spacer/stories/index.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { number } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '..';
+
+export default {
+	component: Spacer,
+	title: 'Components (Experimental)/Spacer',
+};
+
+const PROPS = [
+	'marginTop',
+	'marginBottom',
+	'marginLeft',
+	'marginRight',
+	'marginX',
+	'marginY',
+	'margin',
+
+	'paddingTop',
+	'paddingBottom',
+	'paddingLeft',
+	'paddingRight',
+	'paddingX',
+	'paddingY',
+	'padding',
+];
+
+const BlackBox = () => (
+	<div
+		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
+	/>
+);
+
+export const _default = () => {
+	const props = PROPS.reduce(
+		( acc, prop ) => ( { ...acc, [ prop ]: number( prop, undefined ) } ),
+		{}
+	);
+
+	return (
+		<>
+			<BlackBox />
+			<Spacer { ...props }>This is the spacer</Spacer>
+			<BlackBox />
+		</>
+	);
+};

packages/components/src/spacer/styles.ts

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { InnerProps } from './types';
+import { space } from '../ui/utils/space';
+
+const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
+	typeof o !== 'undefined' && o !== null;
+
+const renderProperty = (
+	name: keyof InnerProps,
+	cssKeys: ( keyof CSSProperties )[] = [ name as keyof CSSProperties ]
+) => ( props: InnerProps ) => {
+	const value = props[ name ];
+
+	if ( ! isDefined( value ) ) {
+		return undefined;
+	}
+
+	const resolvedValue = space( value );
+	return css(
+		cssKeys.reduce(
+			( acc, key ) => ( { ...acc, [ key ]: resolvedValue } ),
+			{}
+		)
+	);
+};
+
+export const SpacerView = styled.div< InnerProps >`
+	${ renderProperty( 'margin' ) }
+	${ renderProperty( 'marginY', [ 'marginTop', 'marginBottom' ] ) }
+	${ renderProperty( 'marginX', [ 'marginLeft', 'marginRight' ] ) }
+	${ renderProperty( 'marginTop' ) }
+	${ renderProperty( 'marginBottom' ) }
+	${ renderProperty( 'marginLeft' ) }
+	${ renderProperty( 'marginRight' ) }
+
+	${ renderProperty( 'padding' ) }
+	${ renderProperty( 'paddingY', [ 'paddingTop', 'paddingBottom' ] ) }
+	${ renderProperty( 'paddingX', [ 'paddingLeft', 'paddingRight' ] ) }
+	${ renderProperty( 'paddingTop' ) }
+	${ renderProperty( 'paddingBottom' ) }
+	${ renderProperty( 'paddingLeft' ) }
+	${ renderProperty( 'paddingRight' ) }
+`;