Animate: Use CSS-in-JS

packages/components/src/animate/index.js

@@ -1,39 +1,69 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import { isFunction } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import {
+	AppearingWrapper,
+	SlidingWrapper,
+	LoadingWrapper,
+} from './styles/animate-styles';
 
 function Animate( { type, options = {}, children } ) {
+	/**
+	 * For backwards compatability we need to handle when
+	 * children as a function is passed in. By passing an
+	 * empty string for className we should prevent any
+	 * conventional usage of this component from before the
+	 * change from breaking.
+	 */
+	const safeChildren = isFunction( children )
+		? () => children( { className: '' } )
+		: () => children;
+
 	if ( type === 'appear' ) {
 		const { origin = 'top' } = options;
 		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
 
-		return children( {
-			className: classnames( 'components-animate__appear', {
-				[ 'is-from-' + xAxis ]: xAxis !== 'center',
-				[ 'is-from-' + yAxis ]: yAxis !== 'middle',
-			} ),
-		} );
+		if ( yAxis === 'middle' ) {
+			deprecated( 'Using "middle" for the y-axis value of origin', {
+				alternative: 'center',
+			} );
+		}
+
+		return (
+			<AppearingWrapper
+				yAxis={ yAxis === 'middle' ? 'center' : yAxis }
+				xAxis={ xAxis }
+			>
+				{ safeChildren() }
+			</AppearingWrapper>
+		);
 	}
 
 	if ( type === 'slide-in' ) {
 		const { origin = 'left' } = options;
 
-		return children( {
-			className: classnames(
-				'components-animate__slide-in',
-				'is-from-' + origin
-			),
-		} );
+		return (
+			<SlidingWrapper origin={ origin }>
+				{ safeChildren() }
+			</SlidingWrapper>
+		);
 	}
 
 	if ( type === 'loading' ) {
-		return children( {
-			className: classnames( 'components-animate__loading' ),
-		} );
+		return <LoadingWrapper>{ safeChildren() }</LoadingWrapper>;
 	}
 
-	return children( {} );
+	return safeChildren( {} );
 }
 
 export default Animate;

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

@@ -19,18 +19,20 @@ export const _default = () => (
 // Unexported helper for different origins.
 const Appear = ( { origin } ) => (
 	<Animate type="appear" options={ { origin } }>
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Appear animation. Origin: { origin }.</p>
-			</Notice>
-		) }
+		<Notice status="success">
+			<p>Appear animation. Origin: { origin }.</p>
+		</Notice>
 	</Animate>
 );
 
 export const appearTopLeft = () => <Appear origin="top left" />;
 export const appearTopRight = () => <Appear origin="top right" />;
 export const appearBottomLeft = () => <Appear origin="bottom left" />;
 export const appearBottomRight = () => <Appear origin="bottom right" />;
+export const appearCenterCenter = () => <Appear origin="center center" />;
+export const deprecatedAppearMiddleCenter = () => (
+	<Appear origin="middle center" />
+);
 
 export const loading = () => (
 	<Animate type="loading">
@@ -42,7 +44,7 @@ export const loading = () => (
 	</Animate>
 );
 
-export const slideIn = () => (
+export const slideInLeft = () => (
 	<Animate type="slide-in">
 		{ ( { className } ) => (
 			<Notice className={ className } status="success">
@@ -51,3 +53,13 @@ export const slideIn = () => (
 		) }
 	</Animate>
 );
+
+export const slideInRight = () => (
+	<Animate type="slide-in" options={ { origin: 'right' } }>
+		{ ( { className } ) => (
+			<Notice className={ className } status="success">
+				<p>Slide-in animation.</p>
+			</Notice>
+		) }
+	</Animate>
+);

packages/components/src/animate/styles/animate-keyframe-styles.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { keyframes } from '@emotion/core';
+
+export const appear = keyframes`
+    from {
+        transform: translateY(-2em) scaleY(0) scaleX(0);
+    }
+    to {
+        transform: translateY(0%) scaleY(1) scaleX(1);
+    }
+`;
+
+export const slideIn = keyframes`
+    100% {
+        transform: translateX(0%);
+    }
+`;
+
+export const loading = keyframes`
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+`;

packages/components/src/animate/styles/animate-styles.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import * as animations from './animate-keyframe-styles';
+import { reduceMotion } from '../../utils';
+import { appearTransform, appearTransformOrigin } from './utils';
+
+export const AppearingWrapper = styled.div`
+	animation: ${ animations.appear } 0.1s cubic-bezier( 0, 0, 0.2, 1 ) 0s;
+	animation-fill-mode: forwards;
+
+	${ reduceMotion( 'animation' ) }
+
+	${ appearTransformOrigin }
+`;
+
+export const SlidingWrapper = styled.div`
+	animation: ${ animations.slideIn } 0.1s cubic-bezier( 0, 0, 0.2, 1 );
+	animation-fill-mode: forwards;
+
+	${ reduceMotion( 'animation' ) }
+
+	${ appearTransform }
+`;
+
+export const LoadingWrapper = styled.div`
+	animation: ${ animations.loading } 1.6s ease-in-out infinite;
+`;

packages/components/src/animate/styles/utils.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+
+/**
+ * Internal dependencies
+ */
+import { getRTL } from '../../utils';
+
+const RTL_TRANSLATE_X = {
+	'-100%': '+100%',
+	'+100%': '-100%',
+};
+
+export const appearTransform = ( { origin } ) => {
+	const isRTL = getRTL();
+
+	let translateX = origin === 'right' ? '+100%' : '-100%';
+	if ( isRTL ) {
+		translateX = RTL_TRANSLATE_X[ translateX ];
+	}
+
+	return css`
+		transform: translateX( ${ translateX } );
+	`;
+};
+
+const RTL_DIRECTION = {
+	left: 'right',
+	right: 'left',
+};
+
+export const appearTransformOrigin = ( { yAxis, xAxis } ) => {
+	const isRTL = getRTL();
+
+	if ( isRTL ) {
+		// Use opposite values when one exists, otherwise default to the value itself (as in the case of `center`).
+		xAxis = RTL_DIRECTION[ xAxis ] || xAxis;
+	}
+
+	return css`
+		transform-origin: ${ yAxis } ${ xAxis };
+	`;
+};