Skip to content

Commit

Permalink
Publicize: Add new publicize icon toggle component (#20957)
Browse files Browse the repository at this point in the history
- Add new ConnectionToggle component that includes service profile picture, username, icon, and toggle.
- Add new ConnectionIcon component that includes service profile picture, username, and icon.
- Update Facebook and Twitter social icons to fulfill brand guidelines. This will also change the icons in the Social Previews panel and modal.
- Update Publicize module and endpoint schemas to include profile_picture
- Refresh Publicize connections and set a transient to stagger requests
  • Loading branch information
allilevine authored Nov 1, 2021
1 parent ce8cdf0 commit d560a45
Show file tree
Hide file tree
Showing 13 changed files with 305 additions and 61 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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()`
Expand Down Expand Up @@ -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' ),
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: enhancement

Add the user's profile picture and new styling to the Publicize toggle.
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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%;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down Expand Up @@ -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 }
/>
);

Expand All @@ -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>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@

.publicize-jetpack-connection-container {
display: flex;

.components-disabled {
width: 100%;
}
}

.jetpack-publicize-gutenberg-social-icon {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}

Expand Down
16 changes: 14 additions & 2 deletions projects/plugins/jetpack/extensions/shared/icons.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit d560a45

Please sign in to comment.