Components: Add spinner (#29146)

* Components: Add spinner

* Fix tests

* Add README + JSDoc example for Spinner

Co-authored-by: Jon Q <[email protected]>

packages/components/src/ui/index.js

@@ -5,6 +5,7 @@ export * from './flex';
 export * from './form-group';
 export * from './grid';
 export * from './h-stack';
+export * from './spinner';
 export * from './text';
 export * from './truncate';
 export * from './v-stack';

packages/components/src/ui/spinner/README.md

@@ -0,0 +1,27 @@
+# Spinner
+
+`Spinner` is a component that notify users that their action is being processed.
+
+## Usage
+
+```jsx
+import { Spinner } from '@wp-g2/components/ui';
+
+function Example() {
+	return <Spinner />;
+}
+```
+
+## Props
+
+##### color
+
+**Type**: `CSSProperties['color']`
+
+The color of the `Spinner`.
+
+##### size
+
+**Type**: `number`
+
+The size of the `Spinner`.

packages/components/src/ui/spinner/component.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { contextConnect, useContextSystem } from '@wp-g2/context';
+import { get } from '@wp-g2/styles';
+
+/**
+ * Internal dependencies
+ */
+import { BarsView, BarsWrapperView, ContainerView } from './styles';
+import { BASE_SIZE, WRAPPER_SIZE } from './utils';
+
+/* eslint-disable jsdoc/valid-types */
+/**
+ * @typedef Props
+ * @property {import('react').CSSProperties['color']} [color] Color of `Spinner`.
+ * @property {number} [size=16] Size of `Spinner`.
+ */
+/* eslint-enable jsdoc/valid-types */
+
+/**
+ *
+ * @param {import('@wp-g2/create-styles').ViewOwnProps<Props, 'div'>} props
+ * @param {import('react').Ref<any>} forwardedRef
+ */
+function Spinner( props, forwardedRef ) {
+	const {
+		color = get( 'colorText' ),
+		size = BASE_SIZE,
+		...otherProps
+	} = useContextSystem( props, 'Spinner' );
+	const ratio = size / BASE_SIZE;
+	const scale = ( ratio * BASE_SIZE ) / WRAPPER_SIZE;
+	const transform = `scale(${ scale })`;
+
+	const styles = { transform };
+
+	return (
+		<ContainerView
+			{ ...otherProps }
+			aria-busy={ true }
+			ref={ forwardedRef }
+			style={ { height: size, width: size } }
+		>
+			<BarsWrapperView aria-hidden={ true } style={ styles }>
+				<BarsView style={ { color } }>
+					<div className="InnerBar1" />
+					<div className="InnerBar2" />
+					<div className="InnerBar3" />
+					<div className="InnerBar4" />
+					<div className="InnerBar5" />
+					<div className="InnerBar6" />
+					<div className="InnerBar7" />
+					<div className="InnerBar8" />
+					<div className="InnerBar9" />
+					<div className="InnerBar10" />
+					<div className="InnerBar11" />
+					<div className="InnerBar12" />
+				</BarsView>
+			</BarsWrapperView>
+		</ContainerView>
+	);
+}
+
+/**
+ * `Spinner` is a component that notify users that their action is being processed.
+ *
+ * @example
+ * ```jsx
+ * import { Spinner } from `@wp-g2/components/ui`;
+ *
+ * function Example() {
+ * 	return (
+ * 		<Spinner />
+ * 	);
+ * }
+ * ```
+ */
+export default contextConnect( Spinner, 'Spinner' );

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

@@ -0,0 +1 @@
+export { default as Spinner } from './component';

packages/components/src/ui/spinner/stories/index.js

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { Spinner } from '../index';
+
+export default {
+	component: Spinner,
+	title: 'G2 Components (Experimental)/Spinner',
+};
+
+export const _default = () => {
+	return (
+		<>
+			<Spinner />
+			<Spinner size={ 30 } />
+			<Spinner color="blue" size="50" />
+		</>
+	);
+};

packages/components/src/ui/spinner/styles.js

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import { styled, ui } from '@wp-g2/styles';
+
+/**
+ * Internal dependencies
+ */
+import { WRAPPER_SIZE } from './utils';
+
+export const ContainerView = styled.div`
+	display: flex;
+	pointer-events: none;
+	position: relative;
+`;
+
+export const BarsWrapperView = styled.div`
+	height: ${ ui.value.px( WRAPPER_SIZE ) };
+	left: 0;
+	opacity: 0.6;
+	position: absolute;
+	top: 0;
+	transform-origin: top left;
+	width: ${ ui.value.px( WRAPPER_SIZE ) };
+`;
+
+export const BarsView = styled.div`
+	color: currentColor;
+	display: inline-flex;
+	height: 54px;
+	left: 50%;
+	padding: 10px;
+	position: absolute;
+	top: 50%;
+	transform: translate( -50%, -50% );
+	width: 54px;
+
+	> div {
+		animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite;
+		background: currentColor;
+		border-radius: 50px;
+		height: 16%;
+		left: 49%;
+		opacity: 0;
+		position: absolute;
+		top: 43%;
+		width: 6%;
+	}
+
+	@keyframes ComponentsUISpinnerFadeAnimation {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0.25;
+		}
+	}
+
+	.InnerBar1 {
+		animation-delay: 0s;
+		transform: rotate( 0deg ) translate( 0, -130% );
+	}
+
+	.InnerBar2 {
+		animation-delay: -0.9167s;
+		transform: rotate( 30deg ) translate( 0, -130% );
+	}
+
+	.InnerBar3 {
+		animation-delay: -0.833s;
+		transform: rotate( 60deg ) translate( 0, -130% );
+	}
+	.InnerBar4 {
+		animation-delay: -0.7497s;
+		transform: rotate( 90deg ) translate( 0, -130% );
+	}
+	.InnerBar5 {
+		animation-delay: -0.667s;
+		transform: rotate( 120deg ) translate( 0, -130% );
+	}
+	.InnerBar6 {
+		animation-delay: -0.5837s;
+		transform: rotate( 150deg ) translate( 0, -130% );
+	}
+	.InnerBar7 {
+		animation-delay: -0.5s;
+		transform: rotate( 180deg ) translate( 0, -130% );
+	}
+	.InnerBar8 {
+		animation-delay: -0.4167s;
+		transform: rotate( 210deg ) translate( 0, -130% );
+	}
+	.InnerBar9 {
+		animation-delay: -0.333s;
+		transform: rotate( 240deg ) translate( 0, -130% );
+	}
+	.InnerBar10 {
+		animation-delay: -0.2497s;
+		transform: rotate( 270deg ) translate( 0, -130% );
+	}
+	.InnerBar11 {
+		animation-delay: -0.167s;
+		transform: rotate( 300deg ) translate( 0, -130% );
+	}
+	.InnerBar12 {
+		animation-delay: -0.0833s;
+		transform: rotate( 330deg ) translate( 0, -130% );
+	}
+`;