@automattic/social-previews 2.1.0-beta.8 → 3.0.0

package/dist/esm/twitter-preview/style.scss

@@ -1,249 +0,0 @@
-/*
- * CSS values in this file are specific and
- * 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.
- *
- * @blame: pento
- */
-
-@import "../variables";
-
-.twitter-preview {
-	padding: 20px;
-}
-
-.twitter-preview__wrapper {
-	background-color: #fff;
-	max-width: clamp(200px, 100%, 635px);
-	margin-inline: auto;
-	padding-top: 1rem;
-	border-radius: 4px;
-	padding-inline-end: 1rem;
-}
-
-.twitter-preview__section.social-preview__section {
-	width: clamp(200px, 100%, 635px);
-
-	// To compensate for the padding for profile picture in twitter threads
-	.social-preview__section-heading,
-	.social-preview__section-desc {
-		padding-inline-start: 17px;
-	}
-}
-
-.twitter-preview__container {
-	display: grid;
-	grid-template-columns: 65px auto;
-	margin-bottom: 5px;
-	font-size: $tweet-font-size;
-	line-height: 20px;
-
-	.twitter-preview__sidebar {
-		display: grid;
-		grid-template-rows: 35px auto;
-		justify-items: center;
-
-		.twitter-preview__profile-image {
-			display: flex;
-			align-items: center;
-			max-width: 30px;
-			max-height: 30px;
-			border-radius: 50%;
-			overflow: hidden;
-
-			img {
-				object-fit: cover;
-				width: 100%;
-			}
-		}
-
-		.twitter-preview__connector {
-			width: 2px;
-			background-color: #8c8f94;
-		}
-	}
-
-	.twitter-preview__main {
-		padding-bottom: 1rem;
-		overflow: hidden;
-	}
-
-	.twitter-preview__header {
-		display: flex;
-		gap: 0.25rem;
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-		font-size: 16px;
-		line-height: 18px;
-		margin-bottom: 2px;
-	}
-
-	.twitter-preview__name {
-		font-weight: 700;
-	}
-
-	.twitter-preview__screen-name,
-	.twitter-preview__date {
-		color: #667886;
-		letter-spacing: -0.3px;
-	}
-
-	.twitter-preview__content {
-
-		.twitter-preview__text {
-			color: rgb(15, 20, 25);
-			white-space: pre-wrap;
-			word-break: break-word;
-		}
-
-		.twitter-preview__media {
-			border-radius: 15px; /* stylelint-disable-line scales/radii */
-			overflow: hidden;
-			display: grid;
-			grid-gap: 2px;
-			grid-template-areas: "a";
-			height: 300px;
-			margin-top: 12px;
-
-			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: 12px;
-			margin-bottom: 12px;
-			overflow: hidden;
-			border: 1px solid #e1e8ed;
-			border-radius: 12px; /* stylelint-disable-line scales/radii */
-
-			.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;
-				aspect-ratio: 16/9;
-			}
-
-			.twitter-preview__card-body {
-				padding: 0.75em;
-				text-decoration: none;
-				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-				color: var(--studio-black);
-				text-align: left;
-				overflow: hidden;
-				display: flex;
-				flex-direction: column;
-				gap: 2px;
-			}
-
-			.twitter-preview__card-title {
-				max-height: 1.3em;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			.twitter-preview__card-description {
-				max-height: 3.9em;
-				text-overflow: ellipsis;
-				color: rgb(83, 100, 113);
-				//clamp after three lines
-				display: -webkit-box;
-				-webkit-line-clamp: 3;
-				-webkit-box-orient: vertical;
-				overflow: hidden;
-			}
-
-			.twitter-preview__card-url {
-				text-transform: lowercase;
-				color: #8899a6;
-				white-space: nowrap;
-				overflow-inline: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-	}
-
-	.twitter-preview__footer {
-		display: flex;
-		justify-content: space-between;
-		max-width: 425px;
-		margin-top: 12px;
-
-		svg {
-			fill: #787c82;
-			height: 16px;
-			width: 16px;
-		}
-	}
-}

package/dist/esm/twitter-preview/text.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { preparePreviewText } from '../helpers';
-export const Text = ({ text, url, retainUrl }) => {
-    if (!text) {
-        return null;
-    }
-    // If the text ends with the card URL, remove it.
-    const tweetText = url && !retainUrl && text.endsWith(url)
-        ? text.substring(0, text.lastIndexOf(url))
-        : text;
-    return (_jsx("div", { className: "twitter-preview__text", children: preparePreviewText(tweetText, { platform: 'twitter' }) }));
-};
-//# sourceMappingURL=text.js.map

package/dist/esm/twitter-preview/text.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/twitter-preview/text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,CAAC,MAAM,IAAI,GAA0B,CAAE,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAG,EAAE;IACzE,IAAK,CAAE,IAAI,EAAG,CAAC;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IACD,iDAAiD;IACjD,MAAM,SAAS,GACd,GAAG,IAAI,CAAE,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAE,GAAG,CAAE;QACzC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAE,CAAC,EAAE,IAAI,CAAC,WAAW,CAAE,GAAG,CAAE,CAAE;QAC9C,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACN,cAAK,SAAS,EAAC,uBAAuB,YACnC,kBAAkB,CAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAE,GACrD,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/twitter-preview/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/esm/twitter-preview/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/twitter-preview/types.ts"],"names":[],"mappings":""}

package/dist/esm/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/esm/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/dist/esm/variables.scss

@@ -1,14 +0,0 @@
-// Define variables, but only if they already don't exist.
-//                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-// This is for any outside consumers of the package that
-// don't have the entire calypso environment, which provides
-// these variables from a private package.
-// (See: https://sass-lang.com/documentation/variables#default-values )
-
-// In a regular calypso environment with @automattic/typography pulled in,
-// these won't have any effect.
-
-$font-body-extra-small: 12px !default;
-$font-body-small: 14px !default;
-$tweet-font-size: 15px !default;
-$tweet-line-height: 20px !default;