Publicize: Add new publicize icon toggle component

projects/plugins/jetpack/_inc/lib/core-api/wpcom-fields/post-fields-publicize-connections.php

@@ -6,12 +6,13 @@
  * { # Post Object
  *   ...
  *   jetpack_publicize_connections: { # Defined below in this file. See schema for more detail.
- *     id:           (string)  Connection unique_id
- *     service_name: (string)  Service slug
- *     display_name: (string)  User name/display name of user/connection on Service
- *     enabled:      (boolean) Is this connection slated to be shared to? context=edit only
- *     done:         (boolean) Is this post (or connection) done sharing? context=edit only
- *     toggleable:   (boolean) Can the current user change the `enabled` setting for this Connection+Post? context=edit only
+ *     id:              (string)  Connection unique_id
+ *     service_name:    (string)  Service slug
+ *     display_name:    (string)  User name/display name of user/connection on Service
+ *     profile_picture: (string)  Profile picture of user/connection on Service
+ *     enabled:         (boolean) Is this connection slated to be shared to? context=edit only
+ *     done:            (boolean) Is this post (or connection) done sharing? context=edit only
+ *     toggleable:      (boolean) Can the current user change the `enabled` setting for this Connection+Post? context=edit only
  *   }
  *   ...
  *   meta: { # Not defined in this file. Handled in modules/publicize/publicize.php via `register_meta()`
@@ -71,36 +72,42 @@ private function post_connection_schema() {
 			'title'      => 'jetpack-publicize-post-connection',
 			'type'       => 'object',
 			'properties' => array(
-				'id'           => array(
+				'id'              => array(
 					'description' => __( 'Unique identifier for the Publicize Connection', 'jetpack' ),
 					'type'        => 'string',
 					'context'     => array( 'view', 'edit' ),
 					'readonly'    => true,
 				),
-				'service_name' => array(
+				'service_name'    => array(
 					'description' => __( 'Alphanumeric identifier for the Publicize Service', 'jetpack' ),
 					'type'        => 'string',
 					'context'     => array( 'view', 'edit' ),
 					'readonly'    => true,
 				),
-				'display_name' => array(
+				'display_name'    => array(
 					'description' => __( 'Username of the connected account', 'jetpack' ),
 					'type'        => 'string',
 					'context'     => array( 'view', 'edit' ),
 					'readonly'    => true,
 				),
-				'enabled'      => array(
+				'profile_picture' => array(
+					'description' => __( 'Profile picture of the connected account', 'jetpack' ),
+					'type'        => 'string',
+					'context'     => array( 'view', 'edit' ),
+					'readonly'    => true,
+				),
+				'enabled'         => array(
 					'description' => __( 'Whether to share to this connection', 'jetpack' ),
 					'type'        => 'boolean',
 					'context'     => array( 'edit' ),
 				),
-				'done'         => array(
+				'done'            => array(
 					'description' => __( 'Whether Publicize has already finished sharing for this post', 'jetpack' ),
 					'type'        => 'boolean',
 					'context'     => array( 'edit' ),
 					'readonly'    => true,
 				),
-				'toggleable'   => array(
+				'toggleable'      => array(
 					'description' => __( 'Whether `enable` can be changed for this post/connection', 'jetpack' ),
 					'type'        => 'boolean',
 					'context'     => array( 'edit' ),

projects/plugins/jetpack/changelog/add-re-publicize-icon-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add the user's profile picture and new styling to the Publicize toggle.

projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/index.jsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { SocialServiceIcon } from '../../../../shared/icons';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+const ConnectionIcon = props => {
+	const { id, serviceName, label, profilePicture } = props;
+
+	return (
+		<label htmlFor={ id } className="jetpack-publicize-connection-label">
+			<div className={ profilePicture ? 'components-connection-icon__picture' : '' }>
+				{ profilePicture && <img src={ profilePicture } alt={ label } /> }
+				<SocialServiceIcon
+					serviceName={ serviceName }
+					className="jetpack-publicize-gutenberg-social-icon"
+				/>
+			</div>
+			<span className="jetpack-publicize-connection-label-copy">{ label }</span>
+		</label>
+	);
+};
+
+ConnectionIcon.propTypes = {
+	id: PropTypes.string.isRequired,
+	serviceName: PropTypes.string,
+	label: PropTypes.string,
+	profilePicture: PropTypes.string,
+};
+
+export default ConnectionIcon;

projects/plugins/jetpack/extensions/plugins/publicize/components/connection-icon/style.scss

@@ -0,0 +1,36 @@
+.jetpack-publicize-connection-label {
+	display: flex;
+	align-items: center;
+
+	// Icon and picture.
+	.components-connection-icon__picture {
+		display: grid;
+
+		img,
+		.placeholder {
+			border-radius: 2px;
+			width: 24px;
+			height: 24px;
+			grid-area: 1 / 1 / 2 / 2;
+		}
+
+		.placeholder {
+			display: block;
+			background-color: #a8bece;
+		}
+
+		svg {
+			width: 15px;
+			height: 15px;
+			grid-area: 1 / 1 / 2 / 2;
+			margin-top: 14px;
+			margin-left: 14px;
+			border-radius: 2px;
+			background-color: white;
+
+			&.is-facebook {
+				border-radius: 50%;
+			}
+		}
+	}
+}

projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/index.jsx

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { FormToggle } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ConnectionIcon from '../connection-icon';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+const ConnectionToggle = props => {
+	const { className, checked, id, disabled, onChange, serviceName, label, profilePicture } = props;
+
+	const wrapperClasses = classnames( 'components-connection-toggle', {
+		'is-not-checked': ! checked,
+		'is-disabled': disabled,
+	} );
+
+	return (
+		<div className={ wrapperClasses }>
+			<ConnectionIcon
+				id={ id }
+				serviceName={ serviceName }
+				label={ label }
+				profilePicture={ profilePicture }
+			/>
+			<FormToggle
+				id={ id }
+				className={ className }
+				checked={ checked }
+				onChange={ onChange }
+				disabled={ disabled }
+			/>
+		</div>
+	);
+};
+
+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;

projects/plugins/jetpack/extensions/plugins/publicize/components/connection-toggle/style.scss

@@ -0,0 +1,19 @@
+@import '../../../../shared/styles/gutenberg-base-styles.scss';
+
+.components-connection-toggle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+
+	// Unchecked state.
+	&.is-not-checked .jetpack-gutenberg-social-icon {
+		fill: $gray-300;
+	}
+
+	// Disabled state:
+	&.is-disabled,
+	.components-disabled & {
+		opacity: 0.5;
+	}
+}

projects/plugins/jetpack/extensions/plugins/publicize/components/connection/index.js

@@ -10,15 +10,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Disabled, FormToggle, Notice, ExternalLink } from '@wordpress/components';
+import { Disabled, Notice, ExternalLink } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { includes } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import getSiteFragment from '../../../../shared/get-site-fragment';
-import { SocialServiceIcon } from '../../../../shared/icons';
+import ConnectionToggle from '../connection-toggle';
 
 class PublicizeConnection extends Component {
 	/**
@@ -61,17 +61,21 @@ class PublicizeConnection extends Component {
 	}
 
 	render() {
-		const { disabled, enabled, id, label, name } = this.props;
+		const { disabled, enabled, id, label, name, profilePicture } = this.props;
 		const fieldId = 'connection-' + name + '-' + id;
 		// Genericon names are dash separated
 		const serviceName = name.replace( '_', '-' );
 
 		let toggle = (
-			<FormToggle
+			<ConnectionToggle
 				id={ fieldId }
 				className="jetpack-publicize-connection-toggle"
 				checked={ enabled }
 				onChange={ this.onConnectionChange }
+				disabled={ disabled }
+				serviceName={ serviceName }
+				label={ label }
+				profilePicture={ profilePicture }
 			/>
 		);
 
@@ -82,16 +86,7 @@ class PublicizeConnection extends Component {
 		return (
 			<li>
 				{ this.maybeDisplayLinkedInNotice() }
-				<div className="publicize-jetpack-connection-container">
-					<label htmlFor={ fieldId } className="jetpack-publicize-connection-label">
-						<SocialServiceIcon
-							serviceName={ serviceName }
-							className="jetpack-publicize-gutenberg-social-icon"
-						/>
-						<span className="jetpack-publicize-connection-label-copy">{ label }</span>
-					</label>
-					{ toggle }
-				</div>
+				<div className="publicize-jetpack-connection-container">{ toggle }</div>
 			</li>
 		);
 	}

projects/plugins/jetpack/extensions/plugins/publicize/components/form/index.js

@@ -45,17 +45,20 @@ export default function PublicizeForm( {
 			{ hasConnections && (
 				<PanelRow>
 					<ul className="jetpack-publicize__connections-list">
-						{ connections.map( ( { display_name, enabled, id, service_name, toggleable } ) => (
-							<PublicizeConnection
-								disabled={ isRePublicizeFeatureEnabled ? ! isPublicizeEnabled : ! toggleable }
-								enabled={ enabled && ! isPublicizeDisabledBySitePlan }
-								key={ id }
-								id={ id }
-								label={ display_name }
-								name={ service_name }
-								toggleConnection={ toggleById }
-							/>
-						) ) }
+						{ connections.map(
+							( { display_name, enabled, id, service_name, toggleable, profile_picture } ) => (
+								<PublicizeConnection
+									disabled={ isRePublicizeFeatureEnabled ? ! isPublicizeEnabled : ! toggleable }
+									enabled={ enabled && ! isPublicizeDisabledBySitePlan }
+									key={ id }
+									id={ id }
+									label={ display_name }
+									name={ service_name }
+									toggleConnection={ toggleById }
+									profilePicture={ profile_picture }
+								/>
+							)
+						) }
 					</ul>
 				</PanelRow>
 			) }

projects/plugins/jetpack/extensions/plugins/publicize/editor.scss

@@ -13,6 +13,10 @@
 
 .publicize-jetpack-connection-container {
 	display: flex;
+
+	.components-disabled {
+		width: 100%;
+	}
 }
 
 .jetpack-publicize-gutenberg-social-icon {

projects/plugins/jetpack/extensions/plugins/publicize/store/effects.js

@@ -53,14 +53,10 @@ export async function refreshConnectionTestResults() {
 					done: false,
 					enabled: true,
 					toggleable: true,
+					profile_picture: freshConnection.profile_picture,
 				};
 			}
 
-			// Populate the connection with extra fresh data.
-			if ( freshConnection.profile_picture ) {
-				connection.profile_picture = freshConnection.profile_picture;
-			}
-
 			connections.push( connection );
 		}
 

projects/plugins/jetpack/extensions/shared/icons.js

@@ -209,15 +209,27 @@ const FacebookIcon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Rect x="0" fill="none" width="24" height="24" />
 		<G>
-			<Path d="M20.007 3H3.993C3.445 3 3 3.445 3 3.993v16.013c0 .55.445.994.993.994h8.62v-6.97H10.27V11.31h2.346V9.31c0-2.325 1.42-3.59 3.494-3.59.993 0 1.847.073 2.096.106v2.43h-1.438c-1.128 0-1.346.537-1.346 1.324v1.734h2.69l-.35 2.717h-2.34V21h4.587c.548 0 .993-.445.993-.993V3.993c0-.548-.445-.993-.993-.993z" />
+			<Path
+				d="M12,2C6.5,2,2,6.5,2,12c0,5,3.7,9.1,8.4,9.9v-7H7.9V12h2.5V9.8c0-2.5,1.5-3.9,3.8-3.9c1.1,0,2.2,0.2,2.2,0.2v2.5h-1.3
+	c-1.2,0-1.6,0.8-1.6,1.6V12h2.8l-0.4,2.9h-2.3v7C18.3,21.1,22,17,22,12C22,6.5,17.5,2,12,2z"
+			/>
 		</G>
 	</SVG>
 );
 const TwitterIcon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Rect x="0" fill="none" width="24" height="24" />
 		<G>
-			<Path d="M22.23 5.924c-.736.326-1.527.547-2.357.646.847-.508 1.498-1.312 1.804-2.27-.793.47-1.67.812-2.606.996C18.325 4.498 17.258 4 16.078 4c-2.266 0-4.103 1.837-4.103 4.103 0 .322.036.635.106.935-3.41-.17-6.433-1.804-8.457-4.287-.353.607-.556 1.312-.556 2.064 0 1.424.724 2.68 1.825 3.415-.673-.022-1.305-.207-1.86-.514v.052c0 1.988 1.415 3.647 3.293 4.023-.344.095-.707.145-1.08.145-.265 0-.522-.026-.773-.074.522 1.63 2.038 2.817 3.833 2.85-1.404 1.1-3.174 1.757-5.096 1.757-.332 0-.66-.02-.98-.057 1.816 1.164 3.973 1.843 6.29 1.843 7.547 0 11.675-6.252 11.675-11.675 0-.178-.004-.355-.012-.53.802-.578 1.497-1.3 2.047-2.124z" />
+			<Path
+				d="M19,3H5C3.895,3,3,3.895,3,5v14c0,1.105,0.895,2,2,2h14c1.105,0,2-0.895,2-2V5C21,3.895,20.105,3,19,3z M16.466,9.71
+		c0.004,0.099,0.007,0.198,0.007,0.298c0,3.045-2.318,6.556-6.556,6.556c-1.301,0-2.512-0.381-3.532-1.035
+		c0.18,0.021,0.364,0.032,0.55,0.032c1.079,0,2.073-0.368,2.862-0.986c-1.008-0.019-1.859-0.685-2.152-1.6
+		c0.141,0.027,0.285,0.041,0.433,0.041c0.21,0,0.414-0.028,0.607-0.081c-1.054-0.212-1.848-1.143-1.848-2.259
+		c0-0.01,0-0.019,0-0.029c0.311,0.173,0.666,0.276,1.044,0.288c-0.618-0.413-1.025-1.118-1.025-1.918
+		c0-0.422,0.114-0.818,0.312-1.158c1.136,1.394,2.834,2.311,4.749,2.407c-0.039-0.169-0.06-0.344-0.06-0.525
+		c0-1.272,1.032-2.304,2.304-2.304c0.663,0,1.261,0.28,1.682,0.728c0.525-0.103,1.018-0.295,1.463-0.559
+		c-0.172,0.538-0.537,0.99-1.013,1.275c0.466-0.056,0.91-0.18,1.323-0.363C17.306,8.979,16.916,9.385,16.466,9.71z"
+			/>
 		</G>
 	</SVG>
 );