@automattic/social-previews 2.0.0-beta.6 → 2.0.0

package/src/twitter-preview/previews.tsx

@@ -5,49 +5,61 @@ import { TwitterLinkPreview } from './link-preview';
 import { TwitterPostPreview } from './post-preview';
 import type { TwitterPreviewsProps } from './types';
 
-export const TwitterPreviews: React.FC< TwitterPreviewsProps > = ( { tweets, headingLevel } ) => {
+export const TwitterPreviews: React.FC< TwitterPreviewsProps > = ( {
+	headingLevel,
+	hideLinkPreview,
+	hidePostPreview,
+	tweets,
+} ) => {
+	if ( ! tweets?.length ) {
+		return null;
+	}
 	return (
 		<div className="social-preview twitter-preview">
-			<section className="social-preview__section twitter-preview__section">
-				<SectionHeading level={ headingLevel }>
-					{
-						// translators: refers to a social post on Twitter
-						__( 'Your post', 'social-previews' )
-					}
-				</SectionHeading>
-				<p className="social-preview__section-desc">
-					{ __( 'This is what your social post will look like on Twitter:', 'social-previews' ) }
-				</p>
-				{ tweets?.map( ( tweet, index ) => {
-					const isLast = index + 1 === tweets.length;
-					return (
-						<TwitterPostPreview
-							key={ `twitter-preview__tweet-${ index }` }
-							{ ...tweet }
-							showThreadConnector={ ! isLast }
-						/>
-					);
-				} ) }
-			</section>
-			<section className="social-preview__section twitter-preview__section">
-				<SectionHeading level={ headingLevel }>
-					{
-						// translators: refers to a link to a Twitter post
-						__( 'Link preview', 'social-previews' )
-					}
-				</SectionHeading>
-				<p className="social-preview__section-desc">
-					{ __(
-						'This is what it will look like when someone shares the link to your WordPress post on Twitter.',
-						'social-previews'
-					) }
-					&nbsp;
-					<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
-						{ __( 'Learn more about links', 'social-previews' ) }
-					</ExternalLink>
-				</p>
-				<TwitterLinkPreview { ...tweets[ 0 ] } />
-			</section>
+			{ ! hidePostPreview && (
+				<section className="social-preview__section twitter-preview__section">
+					<SectionHeading level={ headingLevel }>
+						{
+							// translators: refers to a social post on Twitter
+							__( 'Your post', 'social-previews' )
+						}
+					</SectionHeading>
+					<p className="social-preview__section-desc">
+						{ __( 'This is what your social post will look like on Twitter:', 'social-previews' ) }
+					</p>
+					{ tweets.map( ( tweet, index ) => {
+						const isLast = index + 1 === tweets.length;
+						return (
+							<TwitterPostPreview
+								key={ `twitter-preview__tweet-${ index }` }
+								{ ...tweet }
+								showThreadConnector={ ! isLast }
+							/>
+						);
+					} ) }
+				</section>
+			) }
+			{ ! hideLinkPreview && (
+				<section className="social-preview__section twitter-preview__section">
+					<SectionHeading level={ headingLevel }>
+						{
+							// translators: refers to a link to a Twitter post
+							__( 'Link preview', 'social-previews' )
+						}
+					</SectionHeading>
+					<p className="social-preview__section-desc">
+						{ __(
+							'This is what it will look like when someone shares the link to your WordPress post on Twitter.',
+							'social-previews'
+						) }
+						&nbsp;
+						<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
+							{ __( 'Learn more about links', 'social-previews' ) }
+						</ExternalLink>
+					</p>
+					<TwitterLinkPreview { ...tweets[ 0 ] } />
+				</section>
+			) }
 		</div>
 	);
 };

package/src/types.ts

@@ -23,7 +23,20 @@ export interface SocialPreviewBaseProps {
 }
 
 export interface SocialPreviewsBaseProps {
+	/**
+	 * The heading level to use for the preview section title
+	 */
 	headingLevel?: SectionHeadingProps[ 'level' ];
+
+	/**
+	 * Whether to hide the "Your post" section
+	 */
+	hidePostPreview?: boolean;
+
+	/**
+	 * Whether to hide the "Link preview" section
+	 */
+	hideLinkPreview?: boolean;
 }
 
 export type MediaItem = {