refactor: use function-type component syntax

Author: dkoo

packages/components/src/separator/index.js

@@ -2,11 +2,6 @@
  * Separator
  */
 
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -17,27 +12,20 @@ import './style.scss';
  */
 import classNames from 'classnames';
 
-class Separator extends Component {
-	/**
-	 * Render
-	 */
-	render() {
-		const { alignment = 'full-width', className, marginBottom = 64, marginTop = 64, variant = 'tertiary', ...otherProps } = this.props;
-
-		const classes = classNames(
-			'newspack-separator',
-			className,
-			alignment && `newspack-separator--alignment-${ alignment }`,
-			variant && `newspack-separator--variant-${ variant }`
-		);
-
-		const style = {
-			'--separator-margin-bottom': typeof marginBottom === 'number' ? `${ marginBottom }px` : marginBottom,
-			'--separator-margin-top': typeof marginTop === 'number' ? `${ marginTop }px` : marginTop,
-		};
-
-		return <hr className={ classes } style={ style } { ...otherProps } />;
-	}
-}
+const Separator = ( { alignment = 'full-width', className, marginBottom = 64, marginTop = 64, variant = 'tertiary', ...otherProps } ) => {
+	const classes = classNames(
+		'newspack-separator',
+		className,
+		alignment && `newspack-separator--alignment-${ alignment }`,
+		variant && `newspack-separator--variant-${ variant }`
+	);
+
+	const style = {
+		'--separator-margin-bottom': typeof marginBottom === 'number' ? `${ marginBottom }px` : marginBottom,
+		'--separator-margin-top': typeof marginTop === 'number' ? `${ marginTop }px` : marginTop,
+	};
+
+	return <hr className={ classes } style={ style } { ...otherProps } />;
+};
 
 export default Separator;