Improve defaults for Twitter preview

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

Hide file tree

Showing 6 changed files with 26 additions and 23 deletions.
diff --git a/packages/social-previews/src/twitter-preview/header.tsx b/packages/social-previews/src/twitter-preview/header.tsx
@@ -1,13 +1,16 @@
+import { __ } from '@wordpress/i18n';
 import { formatTweetDate } from '../helpers';
 import { HeaderProps } from './types';
 
 export const Header: React.FC< HeaderProps > = ( { name, screenName, date } ) => {
 	return (
 		<div className="twitter-preview__header">
-			<span className="twitter-preview__name">{ name }</span>
-			<span className="twitter-preview__screen-name">{ screenName }</span>
+			<span className="twitter-preview__name">
+				{ name || __( 'Account Name', 'social-previews' ) }
+			</span>
+			<span className="twitter-preview__screen-name">{ screenName || '@account' }</span>
 			<span>·</span>
-			<span className="twitter-preview__date">{ formatTweetDate( date ) }</span>
+			<span className="twitter-preview__date">{ formatTweetDate( date || Date.now() ) }</span>
 		</div>
 	);
 };
diff --git a/packages/social-previews/src/twitter-preview/link-preview.tsx b/packages/social-previews/src/twitter-preview/link-preview.tsx
@@ -1,16 +1,9 @@
-import { DEFAULT_PROPS } from './constants';
 import { TwitterPostPreview } from './post-preview';
 import { TwitterPreviewProps } from './types';
 
-type OptionalProps = Partial< typeof DEFAULT_PROPS >;
-
-export type TwitterLinkPreviewProps = Omit< TwitterPreviewProps, keyof OptionalProps > &
-	OptionalProps;
-
-export const TwitterLinkPreview: React.FC< TwitterLinkPreviewProps > = ( props ) => {
+export const TwitterLinkPreview: React.FC< TwitterPreviewProps > = ( props ) => {
 	return (
 		<TwitterPostPreview
-			{ ...DEFAULT_PROPS }
 			{ ...props }
 			// Override the props that are irrelevant to link preview
 			text=""

diff --git a/packages/social-previews/src/twitter-preview/previews.tsx b/packages/social-previews/src/twitter-preview/previews.tsx
@@ -14,6 +14,7 @@ export const TwitterPreviews: React.FC< TwitterPreviewsProps > = ( {
 	if ( ! tweets?.length ) {
 		return null;
 	}
+
 	return (
 		<div className="social-preview twitter-preview">
 			{ ! hidePostPreview && (
@@ -57,7 +58,7 @@ export const TwitterPreviews: React.FC< TwitterPreviewsProps > = ( {
 							{ __( 'Learn more about links', 'social-previews' ) }
 						</ExternalLink>
 					</p>
-					<TwitterLinkPreview { ...tweets[ 0 ] } />
+					<TwitterLinkPreview { ...tweets[ 0 ] } name="" profileImage="" screenName="" />
 				</section>
 			) }
 		</div>

diff --git a/packages/social-previews/src/twitter-preview/sidebar.tsx b/packages/social-previews/src/twitter-preview/sidebar.tsx
@@ -1,15 +1,16 @@
 import { __ } from '@wordpress/i18n';
-import { DEFAULT_PROPS } from './constants';
+import { DefaultAvatar } from './icons/default-avatar';
 import { SidebarProps } from './types';
 
 export const Sidebar: React.FC< SidebarProps > = ( { profileImage, showThreadConnector } ) => {
 	return (
 		<div className="twitter-preview__sidebar">
 			<div className="twitter-preview__profile-image">
-				<img
-					alt={ __( 'Twitter profile image', 'social-previews' ) }
-					src={ profileImage || DEFAULT_PROPS.profileImage }
-				/>
+				{ profileImage ? (
+					<img alt={ __( 'Twitter profile image', 'social-previews' ) } src={ profileImage } />
+				) : (
+					<DefaultAvatar />
+				) }
 			</div>
 			{ showThreadConnector && <div className="twitter-preview__connector" /> }
 		</div>

diff --git a/packages/social-previews/src/twitter-preview/style.scss b/packages/social-previews/src/twitter-preview/style.scss
@@ -49,11 +49,16 @@
 		justify-items: center;
 
 		.twitter-preview__profile-image {
+			display: flex;
+			align-items: center;
+			max-width: 30px;
+			max-height: 30px;
+			border-radius: 15px; /* stylelint-disable-line scales/radii */
+			overflow: hidden;
+
 			img {
-				height: 30px;
-				width: 30px;
-				border-radius: 15px; /* stylelint-disable-line scales/radii */
 				object-fit: cover;
+				width: 100%;
 			}
 		}
 

diff --git a/packages/social-previews/src/twitter-preview/types.ts b/packages/social-previews/src/twitter-preview/types.ts
@@ -14,9 +14,9 @@ export type SidebarProps = {
 };
 
 export type HeaderProps = {
-	name: string;
-	date: Date | number;
-	screenName: string;
+	name?: string;
+	date?: Date | number;
+	screenName?: string;
 };
 
 export type MediaProps = {