From 5f5409ad4ace69232564779a237811ec0f736674 Mon Sep 17 00:00:00 2001
From: Allison Levine <allison.levine@automattic.com>
Date: Wed, 27 Oct 2021 12:06:52 -0400
Subject: [PATCH] [not verified] Swap out TS files for JS files

---
 .../connection-icon/{index.tsx => index.jsx}  | 27 ++++++++++++-------
 .../{index.tsx => index.jsx}                  | 25 ++++++++---------
 2 files changed, 31 insertions(+), 21 deletions(-)
 rename projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/{index.tsx => index.jsx} (60%)
 rename projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/{index.tsx => index.jsx} (72%)

diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/index.tsx b/projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/index.jsx
similarity index 60%
rename from projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/index.tsx
rename to projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/index.jsx
index 22d49c6ef2f10..c3c632bdb5ff6 100644
--- a/projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/index.jsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -8,20 +13,17 @@ import { SocialServiceIcon } from '../../../../shared/icons';
  */
 import './style.scss';
 
-type ConnectionIconProps = {
-	id: string;
-	serviceName: string;
-	label: string;
-	profilePicture: string;
-};
-
-const ConnectionIcon: React.FC< ConnectionIconProps > = props => {
+const ConnectionIcon = props => {
 	const { id, serviceName, label, profilePicture } = props;
 
 	return (
 		<label htmlFor={ id } className="jetpack-publicize-connection-label">
 			<div className="components-connection-icon__picture">
-				{ profilePicture ? <img src={ profilePicture } /> : <span className="placeholder" /> }
+				{ profilePicture ? (
+					<img src={ profilePicture } alt={ label } />
+				) : (
+					<span className="placeholder" />
+				) }
 				<SocialServiceIcon
 					serviceName={ serviceName }
 					className="jetpack-publicize-gutenberg-social-icon"
@@ -32,4 +34,11 @@ const ConnectionIcon: React.FC< ConnectionIconProps > = props => {
 	);
 };
 
+ConnectionIcon.propTypes = {
+	id: PropTypes.string.isRequired,
+	serviceName: PropTypes.string,
+	label: PropTypes.string,
+	profilePicture: PropTypes.string,
+};
+
 export default ConnectionIcon;
diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/index.tsx b/projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/index.jsx
similarity index 72%
rename from projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/index.tsx
rename to projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/index.jsx
index a17cd3ff59ade..408780f81457b 100644
--- a/projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/index.jsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
 
 /**
  * WordPress dependencies
@@ -18,18 +19,7 @@ import ConnectionIcon from '../connection-icon';
  */
 import './style.scss';
 
-type ConnectionToggleProps = {
-	className: string;
-	checked: boolean;
-	id: string;
-	disabled: boolean;
-	onChange: () => void;
-	serviceName: string;
-	label: string;
-	profilePicture: string;
-};
-
-const ConnectionToggle: React.FC< ConnectionToggleProps > = props => {
+const ConnectionToggle = props => {
 	const { className, checked, id, disabled, onChange, serviceName, label, profilePicture } = props;
 
 	const wrapperClasses = classnames( 'components-connection-toggle', {
@@ -56,4 +46,15 @@ const ConnectionToggle: React.FC< ConnectionToggleProps > = props => {
 	);
 };
 
+ConnectionToggle.propTypes = {
+	className: PropTypes.string,
+	checked: PropTypes.bool,
+	id: PropTypes.string.isRequired,
+	disabled: PropTypes.bool,
+	onChange: PropTypes.func,
+	serviceName: PropTypes.string,
+	label: PropTypes.string,
+	profilePicture: PropTypes.string,
+};
+
 export default ConnectionToggle;