Improve defaults for LinkedIn preview

Automattic · May 30, 2023 · 17692a5 · 17692a5
1 parent 3a0a3a4
commit 17692a5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/packages/social-previews/src/linkedin-preview/link-preview.tsx b/packages/social-previews/src/linkedin-preview/link-preview.tsx
@@ -1,16 +1,16 @@
-import { DEFAULT_PROPS } from './constants';
 import { LinkedInPostPreview } from './post-preview';
 import { LinkedInPreviewProps } from './types';
 
-type OptionalProps = Partial< typeof DEFAULT_PROPS >;
+type OptionalProps = Partial< Pick< LinkedInPreviewProps, 'name' | 'profileImage' > >;
 
 export type LinkedInLinkPreviewProps = Omit< LinkedInPreviewProps, keyof OptionalProps > &
 	OptionalProps;
 
 export function LinkedInLinkPreview( props: LinkedInLinkPreviewProps ) {
 	return (
 		<LinkedInPostPreview
-			{ ...DEFAULT_PROPS }
+			name=""
+			profileImage=""
 			{ ...props }
 			// Override the props that are irrelevant to link preview
 			description=""

diff --git a/packages/social-previews/src/linkedin-preview/post-preview.tsx b/packages/social-previews/src/linkedin-preview/post-preview.tsx
@@ -1,6 +1,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { baseDomain, preparePreviewText } from '../helpers';
 import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
+import { DefaultAvatar } from './icons/default-avatar';
 import { LinkedInPreviewProps } from './types';
 
 import './style.scss';
@@ -23,11 +24,13 @@ export function LinkedInPostPreview( {
 			<section className={ `linkedin-preview__container ${ hasMedia ? 'has-media' : '' }` }>
 				<div className="linkedin-preview__header">
 					<div className="linkedin-preview__header--avatar">
-						<img src={ profileImage } alt="" />
+						{ profileImage ? <img src={ profileImage } alt="" /> : <DefaultAvatar /> }
 					</div>
 					<div className="linkedin-preview__header--profile">
 						<div className="linkedin-preview__header--profile-info">
-							<div className="linkedin-preview__header--profile-name">{ name }</div>
+							<div className="linkedin-preview__header--profile-name">
+								{ name || __( 'Account Name', 'social-previews' ) }
+							</div>
 							<span>•</span>
 							<div className="linkedin-preview__header--profile-actor">
 								{

diff --git a/packages/social-previews/src/linkedin-preview/previews.tsx b/packages/social-previews/src/linkedin-preview/previews.tsx
@@ -1,7 +1,6 @@
 import { ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import SectionHeading from '../shared/section-heading';
-import { DEFAULT_PROPS } from './constants';
 import { LinkedInLinkPreview } from './link-preview';
 import { LinkedInPostPreview } from './post-preview';
 import type { LinkedInPreviewsProps } from './types';
@@ -46,7 +45,7 @@ export const LinkedInPreviews: React.FC< LinkedInPreviewsProps > = ( {
 							{ __( 'Learn more about links', 'social-previews' ) }
 						</ExternalLink>
 					</p>
-					<LinkedInLinkPreview { ...props } { ...DEFAULT_PROPS } />
+					<LinkedInLinkPreview { ...props } name="" profileImage="" />
 				</section>
 			) }
 		</div>

diff --git a/packages/social-previews/src/linkedin-preview/style.scss b/packages/social-previews/src/linkedin-preview/style.scss
@@ -38,13 +38,18 @@
 		margin-bottom: 0.8rem;
 
 		&--avatar {
+			width: 48px;
+			height: 48px;
+			border-radius: 50%;
+			overflow: hidden;
+			display: flex;
+			align-items: center;
 			flex-shrink: 0;
 		}
 
 		&--avatar img {
-			width: 48px;
-			height: 48px;
-			border-radius: 50%;
+			width: 100%;
+			object-fit: contain;
 		}
 
 		&--profile {