Social: Add new connection modal (#37211)

* Add the constants

* Chain down iconSize to SocialServiceIcon

* changelog

* Add the connection modal

* Add the connect page component

* Add assets

* Add LinkedIn, Nextdoor, and Tumblr example

* Add Mastodon

* Hook up the modal

* Fixup versions

* Add aria-label to button

* Update projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/style.module.scss

Co-authored-by: Manzoor Wani <[email protected]>

* Update projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss

Co-authored-by: Manzoor Wani <[email protected]>

* Update projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss

Co-authored-by: Manzoor Wani <[email protected]>

* Update projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss

Co-authored-by: Manzoor Wani <[email protected]>

* Update projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx

Co-authored-by: Manzoor Wani <[email protected]>

* Add connect button to main page as well

* Fixup versions

* Show `back` instead of chevronleft

* Fix TS compile error for image imports in js-packages

* Update projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx

Co-authored-by: Manzoor Wani <[email protected]>

---------

Co-authored-by: Manzoor Wani <[email protected]>

projects/js-packages/components/changelog/add-social-add-connection-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Social: Added add connection modal

projects/js-packages/components/components/icons/index.tsx

@@ -278,11 +278,13 @@ export function getIconBySlug< Slug extends IconSlug >( slug: Slug ): IconsMap[
 export const SocialServiceIcon: React.FC< {
 	serviceName: React.ComponentProps< typeof SocialLogo >[ 'icon' ];
 	className?: string;
-} > = ( { serviceName, className } ) => {
+	iconSize?: number;
+} > = ( { serviceName, className, iconSize } ) => {
 	return (
 		<SocialLogo
 			className={ classNames( styles.socialIcon, styles[ serviceName ], className ) }
 			icon={ serviceName }
+			size={ iconSize || 24 }
 		/>
 	);
 };

projects/js-packages/publicize-components/changelog/add-social-add-connection-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Social: Added add connection modal

projects/js-packages/publicize-components/index.ts

@@ -18,6 +18,7 @@ export { default as ReviewPrompt } from './src/components/review-prompt';
 export { default as PostPublishReviewPrompt } from './src/components/post-publish-review-prompt';
 export { default as PostPublishManualSharing } from './src/components/post-publish-manual-sharing';
 export { default as RefreshJetpackSocialSettingsWrapper } from './src/components/refresh-jetpack-social-settings';
+export { default as AddConnectionModal } from './src/components/add-connection-modal';
 export { default as ConnectionManagement } from './src/components/connection-management';
 
 export { default as useSocialMediaConnections } from './src/hooks/use-social-media-connections';

projects/js-packages/publicize-components/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.50.0",
+	"version": "0.51.0-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

projects/js-packages/publicize-components/src/assets/index.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx

@@ -0,0 +1,52 @@
+import { Button, useBreakpointMatch } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import { Connection } from '../constants';
+import styles from './style.module.scss';
+
+type ConnectPageProps = {
+	service: Connection;
+	onBackClicked: () => void;
+};
+
+export const ConnectPage: React.FC< ConnectPageProps > = ( { service, onBackClicked } ) => {
+	const [ isSmall ] = useBreakpointMatch( 'sm' );
+
+	return (
+		<>
+			<div
+				className={ classNames( styles[ 'example-wrapper' ], {
+					[ styles.small ]: isSmall,
+				} ) }
+			>
+				{ service.examples.map( ( Example, idx ) => (
+					<div key={ service.name + idx } className={ styles.example }>
+						<Example />
+					</div>
+				) ) }
+			</div>
+			<div className={ styles[ 'actions-wrapper' ] }>
+				<Button
+					variant="secondary"
+					onClick={ onBackClicked }
+					aria-label={ __( 'Go back', 'jetpack' ) }
+				>
+					{ __( 'Back', 'jetpack' ) }
+				</Button>
+				<form className={ classNames( styles[ 'connect-form' ], { [ styles.small ]: isSmall } ) }>
+					{ 'mastodon' === service.name ? (
+						<input
+							required
+							type="text"
+							aria-label={ __( 'Mastodon username', 'jetpack' ) }
+							placeholder={ '@[email protected]' }
+						/>
+					) : null }
+					<Button type="submit" variant="primary">
+						{ __( 'Connect', 'jetpack' ) }
+					</Button>
+				</form>
+			</div>
+		</>
+	);
+};

projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/style.module.scss

@@ -0,0 +1,53 @@
+.example-wrapper {
+	display: grid;
+	grid-auto-columns: minmax(0, 1fr);
+	grid-auto-flow: column;
+	font-size: 15px;
+	margin-top: 0.4rem;
+	min-height: 300px;
+
+	&.small {
+		grid-auto-flow: row;
+		grid-gap: 2rem;
+		height: auto;
+		min-height: unset;
+	}
+
+	img {
+		max-height: 520px;
+		max-width: 100%;
+	}
+
+	> div {
+		padding: 0.4rem;
+
+		&:has(img) {
+			margin-inline-start: auto;
+			margin-inline-end: auto;
+		}
+	}
+}
+
+.actions-wrapper {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 1rem;
+}
+
+.chevron-back {
+	display: block;
+}
+
+.connect-form {
+	display: grid;
+	gap: 0.5rem;
+
+	& > input {
+		height: 100%;
+		width: 18rem;
+	}
+
+	&:not(.small) {
+		grid-auto-flow: column;
+	}
+}