Jetpack: Extend disconnection dialog component to handle multiple steps and accept more props

projects/js-packages/api/changelog/update-extend-disconnect-dialog-component

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package version

projects/js-packages/components/changelog/add-decorative-card-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Add a new DecorativeCard component to the components package.

projects/js-packages/components/components/decorative-card/index.jsx

@@ -0,0 +1,68 @@
+/**
+ * External Dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+
+/**
+ * A decorative card used in the disconnection flow.
+ *
+ * @param {object} props - The properties.
+ * @returns {React.Component} - The DecorativeCard component.
+ */
+
+const DecorativeCard = props => {
+	const { format, icon, imageUrl } = props;
+
+	const renderIcon = () => {
+		if ( icon ) {
+			return (
+				<div className="jp-components__decorative-card__icon-container">
+					<span
+						className={
+							'jp-components__decorative-card__icon jp-components__decorative-card__icon--' + icon
+						}
+					></span>
+				</div>
+			);
+		}
+	};
+
+	return (
+		<div
+			className={
+				'jp-components__decorative-card ' +
+				( format ? 'jp-components__decorative-card--' + format : '' )
+			}
+		>
+			<div
+				className="jp-components__decorative-card__image"
+				style={ { backgroundImage: imageUrl ? `url( ${ imageUrl } )` : '' } }
+			></div>
+			<div className="jp-components__decorative-card__content">
+				<div className="jp-components__decorative-card__lines"></div>
+			</div>
+			{ renderIcon() }
+		</div>
+	);
+};
+
+DecorativeCard.propTypes = {
+	/** The format of the card (horizontal or vertical) */
+	format: PropTypes.oneOf( [ 'horizontal', 'vertical' ] ),
+	/** An icon slug that can be used to show an icon (options are limited to what is in the stylesheet) */
+	icon: PropTypes.oneOf( [ 'unlink' ] ),
+	/** URL for an image to show in the card. */
+	imageUrl: PropTypes.string,
+};
+
+DecorativeCard.defaultProps = {
+	format: 'horizontal',
+};
+
+export default DecorativeCard;

projects/js-packages/components/components/decorative-card/stories/index.jsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import DecorativeCard from '../index.jsx';
+
+export default {
+	title: 'Playground/Decorative Card',
+	component: DecorativeCard,
+};
+
+// Export additional stories using pre-defined values
+const Template = args => <DecorativeCard { ...args } />;
+
+// Export Default story
+export const _default = Template.bind( {} );
+
+export const Unlink = Template.bind( {} );
+Unlink.args = {
+	icon: 'unlink',
+};

projects/js-packages/components/components/decorative-card/style.scss

@@ -0,0 +1,116 @@
+@import '~@automattic/jetpack-base-styles/style';
+
+.jp-components__decorative-card {
+	display: flex;
+	border-radius: 8px;
+	overflow: hidden;
+	box-shadow: 0 0 15px var( --jp-gray );
+	position: relative;
+	width: 360px;
+	max-width: 100%;
+	height: 280px;
+	margin: 0 auto;
+	margin-bottom: 3rem;
+
+	&__image,
+	&__content {
+		width: 50%;
+	}
+
+	&__image {
+		background: var( --jp-gray );
+		background-size: cover;
+		position: relative;
+
+		&:before {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 24px;
+			left: 24px;
+			width: 38px;
+			height: 8px;
+			background-image: url('data:image/svg+xml;uf8,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
+		}
+	}
+
+	&__content {
+		background: #FFFFFF;
+		padding: 2rem;
+	}
+
+	&__icon-container {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 80px;
+		height: 80px;
+		background: var(--jp-red);
+		border-radius: 50px;
+	}
+
+	&__icon {
+		width: 40px;
+		height: 40px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		background-position: center, center;
+		background-repeat: no-repeat;
+
+		&--unlink {
+			background-image: url('data:image/svg+xml;uf8,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
+		}
+	}
+
+	&__lines {
+		display: block;
+		width: 100%;
+		height: 12px;
+		border-radius: 6px;
+		background: #E9EFF5;
+		position: relative;
+
+		&::before,
+		&::after {
+			content: '';
+			display: block;
+			width: 100%;
+			height: 12px;
+			border-radius: 6px;
+			background: #E9EFF5;
+			position: relative;
+			top: calc(100% + 16px);
+		}
+
+		&:after {
+			top: calc(100% + 32px);
+			width: 75%;
+		}
+	}
+
+	// Variants
+	&--vertical {
+		flex-direction: column;
+
+		.jp-components__decorative-card__image,
+		.jp-components__decorative-card__content {
+			width: 100%;
+			height: 50%;
+		}
+
+		.jp-components__decorative-card__lines {
+			max-width: 135px;
+			margin-left: auto;
+			margin-right: auto;
+
+			&::before,
+			&::after {
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+	}
+}

projects/js-packages/components/index.jsx

@@ -21,3 +21,4 @@ export { default as JetpackFooter } from './components/jetpack-footer';
 export { default as Spinner } from './components/spinner';
 export { default as ActionButton } from './components/action-button';
 export { default as PricingCard } from './components/pricing-card';
+export { default as DecorativeCard } from './components/decorative-card';

projects/js-packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.6.4-alpha",
+	"version": "0.7.0-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/js-packages/connection/changelog/update-extend-disconnect-dialog-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Extend functionality of the disconnect modal to allow it to be used in more contexts

projects/js-packages/connection/components/connected-plugins/index.jsx

@@ -0,0 +1,74 @@
+/**
+ * External Dependencies
+ */
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal Dependencies
+ */
+import DisconnectCard from '../disconnect-card';
+
+/**
+ * Render a list of connected plugins.
+ *
+ * @param {object} props - The properties
+ * @returns {React.Component} - The ConnectedPlugins React component
+ */
+
+const ConnectedPlugins = props => {
+	const { connectedPlugins, disconnectingPlugin } = props;
+
+	/**
+	 * Add a slug property to each ConnectedPlugins object so they can be converted to an array.
+	 * This allows the connected plugins to be iterated over more easily for display.
+	 */
+	const connectedPluginsArray = useMemo( () => {
+		if ( connectedPlugins ) {
+			const keys = Object.keys( connectedPlugins );
+			return keys
+				.map( key => {
+					return Object.assign( { slug: key }, connectedPlugins[ key ] );
+				} )
+				.filter( plugin => {
+					return disconnectingPlugin !== plugin.slug;
+				} );
+		}
+
+		// No connected plugins.
+		return [];
+	}, [ connectedPlugins, disconnectingPlugin ] );
+
+	if ( connectedPlugins && connectedPluginsArray.length > 0 ) {
+		return (
+			<React.Fragment>
+				<div className="jp-connection__disconnect-dialog__step-copy">
+					<p className="jp-connection__disconnect-dialog__large-text">
+						{ __(
+							'Jetpack is powering other plugins on your site. If you disconnect, these plugins will no longer work.',
+							'jetpack'
+						) }
+					</p>
+				</div>
+				<div className="jp-connection__disconnect-card__group">
+					{ connectedPluginsArray.map( plugin => {
+						return <DisconnectCard title={ plugin.name } />;
+					} ) }
+				</div>
+			</React.Fragment>
+		);
+	}
+
+	// Default to null if there are no connected plugins passed on the props
+	return null;
+};
+
+ConnectedPlugins.PropTypes = {
+	/** Plugins that are using the Jetpack connection. */
+	connectedPlugins: PropTypes.object,
+	/** Slug of the plugin that has initiated the disconnect. */
+	disconnectingPlugin: PropTypes.string,
+};
+
+export default ConnectedPlugins;