@automattic/social-previews 1.0.4 → 1.1.2

package/package.json

@@ -1,53 +1,59 @@
 {
-	"name": "@automattic/social-previews",
-	"version": "1.0.4",
-	"description": "A suite of components to generate previews for a post for both social and search engines",
-	"main": "dist/cjs/index.js",
-	"module": "dist/esm/index.js",
-	"sideEffects": [
-		"*.css",
-		"*.scss"
-	],
-	"keywords": [
-		"wordpress",
-		"social",
-		"seo",
-		"search"
-	],
-	"author": "Automattic Inc.",
-	"homepage": "https://github.com/Automattic/wp-calypso",
-	"license": "GPL-2.0-or-later",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/Automattic/wp-calypso.git",
-		"directory": "packages/social-previews"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"bugs": {
-		"url": "https://github.com/Automattic/wp-calypso/issues"
-	},
-	"files": [
-		"dist",
-		"src"
-	],
-	"scripts": {
-		"clean": "npx rimraf dist",
-		"prepublish": "yarn run clean",
-		"prepare": "transpile && copy-assets"
-	},
-	"dependencies": {
-		"@babel/runtime": "^7.11.1",
-		"lodash": "^4.17.15",
-		"prop-types": "^15.7.2"
-	},
-	"devDependencies": {
-		"@automattic/calypso-build": "^6.1.0",
-		"enzyme": "^3.11.0"
-	},
-	"peerDependencies": {
-		"react": "^16.12.0"
-	},
-	"gitHead": "2bbc6a9014676a625c6f28df4c2357d333ff6c28"
-}
+  "name": "@automattic/social-previews",
+  "version": "1.1.2",
+  "description": "A suite of components to generate previews for a post for both social and search engines.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "calypso:src": "src/index.js",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "keywords": [
+    "wordpress",
+    "social",
+    "seo",
+    "search"
+  ],
+  "author": "Automattic Inc.",
+  "homepage": "https://github.com/Automattic/wp-calypso",
+  "license": "GPL-2.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Automattic/wp-calypso.git",
+    "directory": "packages/social-previews"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": "https://github.com/Automattic/wp-calypso/issues",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "transpile && copy-assets",
+    "prepack": "yarn run clean && yarn run build"
+  },
+  "dependencies": {
+    "@wordpress/components": "^19.9.0",
+    "@wordpress/i18n": "^4.7.0",
+    "classnames": "^2.3.1",
+    "lodash": "^4.17.21",
+    "moment": "^2.26.0",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "@automattic/calypso-typescript-config": "^1.0.0",
+    "enzyme": "^3.11.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "peerDependencies": {
+    "@wordpress/data": "^6.7.0",
+    "react": "^17.0.2",
+    "reakit-utils": "^0.15.1",
+    "redux": "^4.1.2"
+  }
+}

package/src/facebook-preview/index.jsx

@@ -1,15 +1,8 @@
-/**
- * External dependencies
- */
-
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
 import { compact } from 'lodash';
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
 import { firstValid, hardTruncation, shortEnough, stripHtmlTags } from '../helpers';
 
-/**
- * Style dependencies
- */
 import './style.scss';
 
 const TITLE_LENGTH = 80;

package/src/helpers.js

@@ -1,10 +1,6 @@
-/**
- * External dependencies
- */
-
 import { find } from 'lodash';
 
-export const shortEnough = ( limit ) => ( title ) => ( title.length <= limit ? title : false );
+export const shortEnough = ( limit ) => ( title ) => title.length <= limit ? title : false;
 
 export const truncatedAtSpace = ( lower, upper ) => ( fullTitle ) => {
 	const title = fullTitle.slice( 0, upper );
@@ -15,8 +11,10 @@ export const truncatedAtSpace = ( lower, upper ) => ( fullTitle ) => {
 
 export const hardTruncation = ( limit ) => ( title ) => title.slice( 0, limit ).concat( '…' );
 
-export const firstValid = ( ...predicates ) => ( a ) =>
-	find( predicates, ( p ) => false !== p( a ) )( a );
+export const firstValid =
+	( ...predicates ) =>
+	( a ) =>
+		find( predicates, ( p ) => false !== p( a ) )( a );
 
 export const stripHtmlTags = ( description ) =>
 	description ? description.replace( /(<([^>]+)>)/gi, '' ) : '';

package/src/search-preview/index.jsx

@@ -1,9 +1,4 @@
-/**
- * External dependencies
- */
-
 import PropTypes from 'prop-types';
-import React from 'react';
 import {
 	firstValid,
 	hardTruncation,
@@ -12,9 +7,6 @@ import {
 	stripHtmlTags,
 } from '../helpers';
 
-/**
- * Style dependencies
- */
 import './style.scss';
 
 const URL_LENGTH = 68;

package/src/twitter-preview/index.jsx

@@ -1,64 +1,49 @@
-/**
- * External dependencies
- */
-
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-
-/**
- * Internal dependencies
- */
+import { PureComponent } from 'react';
+import { Tweet } from './tweet';
 
-import { firstValid, hardTruncation, shortEnough, stripHtmlTags } from '../helpers';
-
-/**
- * Style dependencies
- */
 import './style.scss';
 
-const DESCRIPTION_LENGTH = 200;
-
-const baseDomain = ( url ) =>
-	url
-		.replace( /^[^/]+[/]*/, '' ) // strip leading protocol
-		.replace( /\/.*$/, '' ); // strip everything after the domain
-
-const twitterDescription = firstValid(
-	shortEnough( DESCRIPTION_LENGTH ),
-	hardTruncation( DESCRIPTION_LENGTH )
-);
-
 export class TwitterPreview extends PureComponent {
 	render() {
-		const { url, title, type, description, image } = this.props;
-
-		const previewImageStyle = {
-			backgroundImage: 'url(' + image + ')',
-		};
+		// Previous versions expected passed props to be the Twitter Card details for a single tweet,
+		// rather than an array of tweets. If the tweet array isn't passed, we can construct it from
+		// the old props.
+		const tweets = this.props.tweets || [
+			{
+				text: '',
+				media: [],
+				card: {
+					...this.props,
+					type: 'large_image_summary' === this.props.type ? 'summary_large_image' : this.props.type,
+				},
+				date: Date.now(),
+				name: 'Account Name',
+				profileImage:
+					'https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png',
+				screenName: '@account',
+			},
+		];
 
 		return (
 			<div className="twitter-preview">
-				<div className={ `twitter-preview__${ type }` }>
-					{ image && <div className="twitter-preview__image" style={ previewImageStyle } /> }
-					<div className="twitter-preview__body">
-						<div className="twitter-preview__title">{ title }</div>
-						<div className="twitter-preview__description">
-							{ twitterDescription( stripHtmlTags( description ) ) }
-						</div>
-						<div className="twitter-preview__url">{ baseDomain( url || '' ) }</div>
-					</div>
-				</div>
+				{ tweets &&
+					tweets.map( ( tweet, index ) => {
+						return (
+							<Tweet
+								key={ `twitter-preview__tweet-${ index }` }
+								isLast={ index + 1 === tweets.length }
+								{ ...tweet }
+							/>
+						);
+					} ) }
 			</div>
 		);
 	}
 }
 
 TwitterPreview.propTypes = {
-	url: PropTypes.string,
-	title: PropTypes.string,
-	type: PropTypes.string,
-	description: PropTypes.string,
-	image: PropTypes.string,
+	tweets: PropTypes.array,
 };
 
 export default TwitterPreview;

package/src/twitter-preview/style.scss

@@ -1,112 +1,228 @@
 /*
  * CSS values in this file are specific and
- * designed to match the CSS on external sites,
- * such as Google and Facebook. Therefore there
+ * designed to match the CSS on Twitter. Therefore there
  * will be exceptions to our CSS guidelines here
- * but please do not "update" this file to
- * conform.
+ * but please do not "update" this file to conform.
  *
- * @blame: dmsnell
-*/
+ * @blame: pento
+ */
 
 @import '../variables.scss';
 
 /* stylelint-disable scales/font-size */
 
 .twitter-preview {
+	background-color: #fff;
 	padding: 20px;
-	box-sizing: border-box;
+	width: 635px;
 }
 
-.twitter-preview__summary,
-.twitter-preview__large_image_summary {
-	width: 506px;
-	max-width: 100%;
-	margin: 0 auto;
-	overflow: hidden;
-	border: 1px solid #e1e8ed;
-	border-radius: 12px;
-}
-
-.twitter-preview__summary {
-	height: 125px;
-}
-
-.twitter-preview__large_image_summary {
-	height: auto;
-}
-
-.twitter-preview__image {
-	background-size: cover;
-	background-position: center;
-}
-
-.twitter-preview__summary .twitter-preview__image {
-	float: left;
-	width: 125px;
-	height: 125px;
-}
-
-.twitter-preview__large_image_summary .twitter-preview__image {
-	width: 506px;
-	max-width: 100%;
-	height: 254px;
-	border-bottom: 1px solid #e1e8ed;
-}
-
-.twitter-preview__body {
-	padding: 0.75em;
-	text-decoration: none;
-	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: $font-body-small;
-	color: black;
-	text-align: left;
-	line-height: 1.3em;
-	overflow: hidden;
-}
-
-.twitter-preview__summary .twitter-preview__body {
-	margin-left: 125px;
-	border-left: 1px solid #e1e8ed;
-	height: 100%;
-}
-
-.twitter-preview__large_image_summary .twitter-preview__body {
-	padding-left: 1em;
-	padding-right: 1em;
-}
-
-.twitter-preview__title {
-	max-height: 1.3em;
-	white-space: nowrap;
-	font-weight: bold;
-	font-size: 1em;
-	margin: 0 0 0.15em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.twitter-preview__description {
-	margin-top: 0.32333em;
-	max-height: 3.9em;
-	text-overflow: ellipsis;
-	//clamp after two lines
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-
-.twitter-preview__summary .twitter-preview__description {
-	-webkit-line-clamp: 3;
-}
-
-.twitter-preview__url {
-	text-transform: lowercase;
-	color: #8899a6;
-	max-height: 1.3em;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	margin-top: 0.32333em;
+.twitter-preview__container {
+	display: grid;
+	grid-template-columns: 65px auto;
+	margin-bottom: 5px;
+	margin-right: 24px;
+
+	.twitter-preview__sidebar {
+		display: grid;
+		grid-template-rows: 35px auto;
+		justify-items: center;
+
+		.twitter-preview__profile-image {
+			img {
+				height: 30px;
+				width: 30px;
+				border-radius: 15px;
+				object-fit: cover;
+			}
+		}
+
+		.twitter-preview__connector {
+			width: 2px;
+			background-color: #8c8f94;
+		}
+	}
+
+	.twitter-preview__name {
+		font-weight: bold;
+		font-size: 16px;
+		line-height: 19px;
+	}
+
+	.twitter-preview__screen-name,
+	.twitter-preview__date {
+		color: #667886;
+		font-size: 16px;
+		line-height: 18px;
+		letter-spacing: -0.3px;
+		margin-left: 15px;
+	}
+
+	.twitter-preview__content {
+		margin: 7px 0;
+
+		.twitter-preview__text {
+			font-size: 14px;
+			line-height: 18px;
+			letter-spacing: -0.3px;
+			color: #787c82;
+			white-space: pre-wrap;
+			word-break: break-word;
+		}
+
+		.twitter-preview__media {
+			border-radius: 15px;
+			overflow: hidden;
+			display: grid;
+			grid-gap: 2px;
+			grid-template-areas: 'a';
+			height: 300px;
+			margin-top: 10px;
+
+			img,
+			video {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+
+				&:nth-child( 1 ) {
+					grid-area: a;
+				}
+				&:nth-child( 2 ) {
+					grid-area: b;
+				}
+				&:nth-child( 3 ) {
+					grid-area: c;
+				}
+				&:nth-child( 4 ) {
+					grid-area: d;
+				}
+			}
+
+			&.twitter-preview__media-children-2 {
+				grid-template-areas: 'a b';
+			}
+
+			&.twitter-preview__media-children-3 {
+				grid-template-areas: 'a b'
+				                     'a c';
+			}
+
+			&.twitter-preview__media-children-4 {
+				grid-template-areas: 'a b'
+				                     'c d';
+			}
+		}
+
+		.twitter-preview__quote-tweet {
+			margin-top: 10px;
+			min-height: 200px;
+
+			.twitter-preview__quote-tweet-overlay {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				opacity: 0;
+			}
+		}
+
+		.twitter-preview__card {
+			margin-top: 10px;
+			overflow: hidden;
+			border: 1px solid #e1e8ed;
+			border-radius: 12px;
+
+			.twitter-preview__card-summary {
+				display: grid;
+
+				&.twitter-preview__card-has-image {
+					height: 125px;
+					display: grid;
+					grid-template-columns: 125px auto;
+
+					.twitter-preview__card-body {
+						border-left: 1px solid #e1e8ed;
+						height: 100%;
+					}
+
+					.twitter-preview__card-description {
+						-webkit-line-clamp: 3;
+					}
+				}
+			}
+
+			.twitter-preview__card-summary_large_image {
+				display: grid;
+				grid-template-rows: 254px auto;
+			}
+
+			.twitter-preview__card-image {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			.twitter-preview__card-body {
+				padding: 0.75em;
+				text-decoration: none;
+				font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+				font-size: $font-body-small;
+				color: black;
+				text-align: left;
+				line-height: 1.3em;
+				overflow: hidden;
+			}
+
+			.twitter-preview__card-title {
+				max-height: 1.3em;
+				white-space: nowrap;
+				font-weight: bold;
+				font-size: 1em;
+				margin: 0 0 0.15em;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.twitter-preview__card-description {
+				margin-top: 0.32333em;
+				max-height: 3.9em;
+				text-overflow: ellipsis;
+				//clamp after two lines
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+			}
+
+			.twitter-preview__card-url {
+				text-transform: lowercase;
+				color: #8899a6;
+				max-height: 1.3em;
+				white-space: nowrap;
+				overflow-inline: hidden;
+				text-overflow: ellipsis;
+				margin-top: 0.32333em;
+
+				svg {
+					fill: #8899a6;
+					height: 15px;
+					width: 15px;
+					margin: 0 2px -4px 0;
+				}
+			}
+		}
+	}
+
+	.twitter-preview__footer {
+		display: grid;
+		grid-template-columns: repeat( 4, auto );
+
+		svg {
+			fill: #787c82;
+			height: 16px;
+			width: 16px;
+		}
+	}
 }