Consolidate all the animations across onboarding into the Animate component

src/OnboardingSPA/components/Animate/index.js

@@ -1,11 +1,20 @@
+import classNames from 'classnames';
+
 /**
  * A Animator to show animation
  *
  * @param {string}             type  The name of Animation to be shown.
  * @param { object | boolean } after The variable to look after for before showing the animation, by default true to show the children right away.
  *
  */
-const Animate = ( { type, after = true, children } ) => {
+const Animate = ( {
+	type,
+	after = true,
+	children,
+	className = '',
+	duration = false,
+	timingFunction = false,
+} ) => {
 	const prefix = 'animate';
 
 	/**
@@ -16,12 +25,35 @@ const Animate = ( { type, after = true, children } ) => {
 	function getAnimateClassName() {
 		if ( type ) {
 			let classname = '';
-
 			switch ( type ) {
 				// Add animation types and appropriate CSS
 				case 'fade-in':
 					classname = prefix.concat( '__fade-in' );
 					break;
+				case 'fade-in-disabled':
+					classname = prefix.concat( '__fade-in--disabled' );
+					break;
+				case 'fade-in-right':
+					classname = prefix.concat( '__fade-in--right' );
+					break;
+				case 'fade-in-left':
+					classname = prefix.concat( '__fade-in--left' );
+					break;
+				case 'fade-in-up':
+					classname = prefix.concat( '__fade-in--up' );
+					break;
+				case 'shine':
+					classname = prefix.concat( '__shine' );
+					break;
+				case 'shine-placeholder':
+					classname = prefix.concat( '__shine--placeholder' );
+					break;
+				case 'dropdown':
+					classname = prefix.concat( '__dropdown' );
+					break;
+				case 'load':
+					classname = prefix.concat( '__load' );
+					break;
 			}
 			return classname;
 		}
@@ -30,7 +62,15 @@ const Animate = ( { type, after = true, children } ) => {
 	return ! after ? (
 		<div className={ `${ prefix }__blank` }>{ children }</div>
 	) : (
-		<div className={ getAnimateClassName() }>{ children }</div>
+		<div
+			className={ classNames( getAnimateClassName(), className ) }
+			style={ {
+				animationDuration: duration,
+				animationTimingFunction: timingFunction,
+			} }
+		>
+			{ children }
+		</div>
 	);
 };
 

src/OnboardingSPA/components/Animate/stylesheet.scss

@@ -1,11 +1,170 @@
+@keyframes fadeIn {
+
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+
+@keyframes fadeInRight {
+
+	from {
+		opacity: 0;
+		transform: translate3d(33%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInLeft {
+
+	from {
+		opacity: 0;
+		transform: translate3d(-33%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInUp {
+
+	from {
+		opacity: 0;
+		transform: translate3d(0, 33%, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInWithDisabledClicks {
+
+	from {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes shine {
+
+	0% {
+		transform: translateX(-100%);
+	}
+
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes shine-placeholder {
+
+	0% {
+		background-position: -468px 0;
+	}
+
+	100% {
+		background-position: 468px 0;
+	}
+}
+
+@keyframes dropdown {
+
+	0% {
+		transform: rotateX(-90deg);
+	}
+
+	70% {
+		transform: rotateX(20deg);
+	}
+
+	100% {
+		transform: rotateX(0deg);
+	}
+}
+
+@keyframes load {
+
+	0% {
+		left: -100%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
 .animate {
-
-    &__blank {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    &__fade-in {
-        animation: fadeInWithDisabledClicks 500ms ease-in;
-    }
+
+	&__blank {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	&__shine {
+		animation: shine 1.5s linear infinite;
+
+		&--placeholder {
+			animation: shine-placeholder 1.5s linear infinite;
+		}
+	}
+
+	&__dropdown {
+		animation: dropdown 400ms ease-in-out forwards;
+	}
+
+	&__fade-in {
+
+		animation: fadeIn 100ms ease-in-out;
+
+		&--disabled {
+			animation: fadeInWithDisabledClicks 500ms ease-in;
+		}
+
+		&--right {
+			animation: fadeInRight 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translation: none !important;
+			}
+		}
+
+		&--left {
+			animation: fadeInLeft 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translation: none !important;
+			}
+		}
+
+		&--up {
+			animation: fadeInUp 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translation: none !important;
+			}
+		}
+	}
+
+	&__load {
+		animation: load 3s linear infinite;
+	}
 }

src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js

@@ -1,7 +1,8 @@
 import { useState } from '@wordpress/element';
-import { Icon, help, box } from '@wordpress/icons';
+import { Icon, help } from '@wordpress/icons';
 
 import { CheckboxControl } from '@wordpress/components';
+import Animate from '../../Animate';
 
 /**
  * Checkbox Item Component
@@ -40,70 +41,78 @@ const CheckboxItem = ( {
 	return (
 		<div>
 			<div
-				className={`${ className } ${isSelected && `${ className }--selected`
-					} ${showDescription && `${ className }--shown`}`}
+				className={ `${ className } ${
+					isSelected && `${ className }--selected`
+				} ${ showDescription && `${ className }--shown` }` }
 			>
-				<div className={`${ className }-container`}>
+				<div className={ `${ className }-container` }>
 					<CheckboxControl
-						checked={isSelected}
-						onChange={handleCheck}
-						className={`${ className }-checkbox`}
+						checked={ isSelected }
+						onChange={ handleCheck }
+						className={ `${ className }-checkbox` }
 					/>
-					<div className={`${ className }__contents`}>
+					<div className={ `${ className }__contents` }>
 						<div
-							className={`${ className }__contents-icon
-                                     ${isSelected &&
-								`${ className }__contents-icon--selected`
-								}
-                                     ${showDescription &&
-								`${ className }__contents-icon--shown`
-								}`}
+							className={ `${ className }__contents-icon
+                                     ${
+											isSelected &&
+											`${ className }__contents-icon--selected`
+										}
+                                     ${
+											showDescription &&
+											`${ className }__contents-icon--shown`
+										}` }
 						>
 							<div
-								style={{
+								style={ {
 									width: '35px',
 									height: '35px',
 									backgroundPosition: 'center',
 									backgroundRepeat: 'no-repeat',
-									backgroundImage: `var(${icon}${isSelected ? '--light' : ''
-										})`,
-								}}
+									backgroundImage: `var(${ icon }${
+										isSelected ? '--light' : ''
+									})`,
+								} }
 							/>
 						</div>
-						<div className={`${className }__contents-text`}>
+						<div className={ `${ className }__contents-text` }>
 							<div
-								className={`${ className }__contents-text-title ${isSelected &&
+								className={ `${ className }__contents-text-title ${
+									isSelected &&
 									`${ className }__contents-text-title--selected`
-									}`}
+								}` }
 							>
-								{title}
+								{ title }
 							</div>
-							<div className={`${ className }__contents-text-subtitle`}>
-								{subtitle}
+							<div
+								className={ `${ className }__contents-text-subtitle` }
+							>
+								{ subtitle }
 							</div>
 						</div>
 						<div
-							className={`${ className }__contents-help`}
-							onClick={handleShowDesc}
+							className={ `${ className }__contents-help` }
+							onClick={ handleShowDesc }
 						>
 							<Icon
-								icon={help}
-								style={{
+								icon={ help }
+								style={ {
 									width: '30px',
 									height: '30px',
-									fill: `${showDescription ? '#1C5CBA' : '#666666'
-										}`,
-								}}
+									fill: `${
+										showDescription ? '#1C5CBA' : '#666666'
+									}`,
+								} }
 							/>
 						</div>
 					</div>
 				</div>
 			</div>
-			{
-				showDescription && (
-					<div className={`${ className }__desc`}>{desc}</div>
-				)
-			}
+			{ showDescription && (
+				<Animate type={ 'dropdown' }>
+					<div className={ `${ className }__desc` }>{ desc }</div>
+				</Animate>
+			) }
 		</div>
 	);
 };

src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss

@@ -116,7 +116,6 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
         border-left: 1px solid rgba($main-color, 0.1);
         border-right: 1px solid rgba($main-color, 0.1);
         border-bottom: 1px solid rgba($main-color, 0.1);
-        animation: dropdown 400ms ease-in-out forwards;
         box-shadow: 0px 11px 8px -3px rgba($main-color, 0.20);
     }
 }