@automattic/social-previews 2.0.0 → 2.0.1-beta.0

package/src/instagram-preview/post-preview.tsx

@@ -0,0 +1,76 @@
+import { __ } from '@wordpress/i18n';
+import { preparePreviewText } from '../helpers';
+import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
+import { Bookmark as BookmarkIcon } from './icons/bookmark';
+import { Comment as CommentIcon } from './icons/comment';
+import { DefaultAvatar } from './icons/default-avatar';
+import { Heart as HeartIcon } from './icons/heart';
+import { Menu as MenuIcon } from './icons/menu';
+import { Share as ShareIcon } from './icons/share';
+import { InstagramPreviewProps } from './types';
+
+import './style.scss';
+
+export function InstagramPostPreview( {
+	image,
+	name,
+	profileImage,
+	caption,
+}: InstagramPreviewProps ) {
+	const username = name || 'username';
+
+	return (
+		<div className="instagram-preview__wrapper">
+			<section className="instagram-preview__container">
+				<div className="instagram-preview__header">
+					<div className="instagram-preview__header--avatar">
+						{ profileImage ? <img src={ profileImage } alt="" /> : <DefaultAvatar /> }
+					</div>
+					<div className="instagram-preview__header--profile">
+						<div className="instagram-preview__header--profile-name">{ username }</div>
+						<div className="instagram-preview__header--profile-menu">
+							<MenuIcon />
+						</div>
+					</div>
+				</div>
+				<div className="instagram-preview__media">
+					<img className="instagram-preview__media--image" src={ image } alt="" />
+				</div>
+				<div className="instagram-preview__content">
+					<section className="instagram-preview__content--actions">
+						<div className="instagram-preview__content--actions-primary">
+							<HeartIcon />
+							<CommentIcon />
+							<ShareIcon />
+						</div>
+						<div className="instagram-preview__content--actions-secondary">
+							<BookmarkIcon />
+						</div>
+					</section>
+					<div className="instagram-preview__content--body">
+						<div className="instagram-preview__content--name">{ username }</div>
+						&nbsp;
+						{ caption ? (
+							<div
+								className="instagram-preview__content--text"
+								// TODO: Replace `dangerouslySetInnerHTML` with `createInterpolateElement` inside `preparePreviewText`
+								// eslint-disable-next-line react/no-danger
+								dangerouslySetInnerHTML={ {
+									__html: preparePreviewText( caption, {
+										platform: 'instagram',
+										maxChars: FEED_TEXT_MAX_LENGTH,
+										maxLines: FEED_TEXT_MAX_LINES,
+										hyperlinkUrls: false,
+									} ),
+								} }
+							/>
+						) : null }
+					</div>
+					<div className="instagram-preview__content--footer">
+						<span>{ __( 'View one comment', 'social-previews' ) }</span>
+					</div>
+				</div>
+			</section>
+		</div>
+	);
+}

package/src/instagram-preview/previews.tsx

@@ -0,0 +1,33 @@
+import { __ } from '@wordpress/i18n';
+import SectionHeading from '../shared/section-heading';
+import { InstagramPostPreview } from './post-preview';
+import type { InstagramPreviewsProps } from './types';
+
+export const InstagramPreviews: React.FC< InstagramPreviewsProps > = ( {
+	headingLevel,
+	hideLinkPreview,
+	hidePostPreview,
+	...props
+} ) => {
+	return (
+		<div className="social-preview instagram-preview">
+			{ ! hidePostPreview && (
+				<section className="social-preview__section instagram-preview__section">
+					<SectionHeading level={ headingLevel }>
+						{
+							// translators: refers to a social post on Instagram
+							__( 'Your post', 'social-previews' )
+						}
+					</SectionHeading>
+					<p className="social-preview__section-desc">
+						{ __(
+							'This is what your social post will look like on Instagram:',
+							'social-previews'
+						) }
+					</p>
+					<InstagramPostPreview { ...props } />
+				</section>
+			) }
+		</div>
+	);
+};

package/src/instagram-preview/style.scss

@@ -0,0 +1,103 @@
+
+
+.instagram-preview {
+	&__wrapper {
+		padding: 20px;
+		background-color: #fff;
+		margin-inline: auto;
+		max-width: clamp(200px, 100%, 555px);
+	}
+
+	// When the preview is in a section of all previews
+	&__section &__wrapper {
+		padding: 0;
+	}
+
+	&__section.social-preview__section {
+		width: clamp(200px, 100%, 555px);
+	}
+
+	&__container {
+
+		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
+		overflow: hidden;
+	}
+
+	&__header {
+
+		padding: 0.5rem 1rem;
+		display: flex;
+		gap: 0.5rem;
+
+		&--avatar {
+			display: flex;
+			align-items: center;
+			max-width: 32px;
+			max-height: 32px;
+		}
+
+		&--avatar img {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+		}
+
+		&--profile {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			flex-grow: 1;
+		}
+
+		&--profile-name {
+			font-weight: 700;
+		}
+	}
+
+	&__media {
+		display: flex;
+
+		&--image {
+			width: 100%;
+			aspect-ratio: 1;
+			object-fit: cover;
+		}
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+
+		a {
+			text-decoration: none;
+			color: rgb(0, 55, 107);
+		}
+
+		&--actions {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		&--actions-primary {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+
+		&--name {
+			font-weight: 600;
+			display: inline;
+		}
+
+		&--text {
+			display: inline;
+		}
+
+		&--footer {
+			font-weight: 400;
+			color: rgb(115, 115, 115);
+		}
+	}
+}

package/src/instagram-preview/types.ts

@@ -0,0 +1,9 @@
+import { SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
+
+export type InstagramPreviewProps = Pick< SocialPreviewBaseProps, 'image' > & {
+	name: string;
+	profileImage: string;
+	caption?: string;
+};
+
+export type InstagramPreviewsProps = InstagramPreviewProps & SocialPreviewsBaseProps;