ELES-1362 share highlight preview when copying a link

components/x-gift-article/__tests__/x-gift-article.test.jsx

@@ -24,6 +24,9 @@ const baseArgs = {
 		'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quos, quis quas ad, minima fuga at nemo deleniti hic repellendus totam. Impedit mollitia quam repellat harum. Nostrum sapiente minima soluta , Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quos, quis quas ad, minima fuga at nemo deleniti hic repellendus totam. Impedit mollitia quam repellat harum. Nostrum sapiente minima soluta.'
 }
 
+const trimmedHighlight = baseArgs.highlight.split(' ').slice(0, 30).join(' ')
+const expectedHighlightText = `${baseArgs.article.title} - "${trimmedHighlight} ..."`
+
 describe('x-gift-article', () => {
 	let actions = {}
 
@@ -85,8 +88,8 @@ describe('x-gift-article', () => {
 
 		subject.update()
 
-		const input = subject.find('input#share-link')
-		expect(input.prop('value')).toEqual('https://shortened-non-gift-url')
+		const input = subject.find('#share-link')
+		expect(input.prop('value')).toEqual(expectedHighlightText + '\n\n' + 'https://shortened-non-gift-url')
 	})
 
 	it('should call createGiftUrl and display correct url', async () => {
@@ -96,9 +99,9 @@ describe('x-gift-article', () => {
 
 		subject.update()
 
-		const input = subject.find('input#share-link')
+		const input = subject.find('#share-link')
 
-		expect(input.prop('value')).toEqual('https://shortened-gift-url')
+		expect(input.prop('value')).toEqual(expectedHighlightText + '\n\n' + 'https://shortened-gift-url')
 	})
 
 	it('should call createEnterpriseUrl and display correct url', async () => {
@@ -108,8 +111,8 @@ describe('x-gift-article', () => {
 
 		subject.update()
 
-		const input = subject.find('input#share-link')
-		expect(input.prop('value')).toEqual('https://gift-url-redeemed')
+		const input = subject.find('#share-link')
+		expect(input.prop('value')).toEqual(expectedHighlightText + '\n\n' + 'https://gift-url-redeemed')
 	})
 
 	it('when credits are available, an alert is not shown', async () => {

components/x-gift-article/readme.md

@@ -74,11 +74,14 @@ All `x-` components are designed to be compatible with a variety of runtimes, no
 
 ### Properties
 
-| Property               | Type    | Required | Note                                                                                                                         |
-| ---------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `isFreeArticle`        | Boolean | yes      | Only non gift form is displayed when this value is `true`.                                                                   |
-| `article`              | Object  | yes      | Must contain `id`, `title` and `url` properties                                                                              |
-| `nativeShare`          | Boolean | no       | This is a property for App to display Native Sharing.                                                                        |
-| `apiProtocol`          | String  | no       | The protocol to use when making requests to the gift article and URL shortening services. Ignored if `apiDomain` is not set. |
-| `apiDomain`            | String  | no       | The domain to use when making requests to the gift article and URL shortening services.                                      |
-| `enterpriseApiBaseUrl` | String  | no       | The base URL to use when making requests to the enterprise sharing service.                                                  |
+| Property                         | Type    | Required | Note                                                                                                                         |
+| -------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `isFreeArticle`                  | Boolean | yes      | Only non gift form is displayed when this value is `true`.                                                                   |
+| `article`                        | Object  | yes      | Must contain `id`, `title` and `url` properties                                                                              |
+| `apiProtocol`                    | String  | no       | The protocol to use when making requests to the gift article and URL shortening services. Ignored if `apiDomain` is not set. |
+| `apiDomain`                      | String  | no       | The domain to use when making requests to the gift article and URL shortening services.                                      |
+| `enterpriseApiBaseUrl`           | String  | no       | The base URL to use when making requests to the enterprise sharing service.                                                  |
+| `title`                          | String  | no       | The title for the modal                                                                                                      |
+| `showHighlightsCheckbox`         | Boolean | no       | Show or hide the option to include highlights                                                                                |
+| `showHighlightsRecipientMessage` | Boolean | no       | Show or hide `ReceivedHighlightsAlert` component                                                                             |
+| `highlight`                      | String  | no       | The text of the quote or highlight to be shared                                                                              |

components/x-gift-article/src/ShareArticleDialog.scss

@@ -147,6 +147,10 @@
 			margin: 0;
 		}
 
+		#share-link {
+			margin-bottom: oSpacingByName('s4');
+		}
+
 		padding: oSpacingByName('s4');
 
 		.share-article-dialog__header {

components/x-gift-article/src/UrlSection.jsx

@@ -1,10 +1,21 @@
 import { h } from '@financial-times/x-engine'
+import { trimHighlights } from './lib/highlightsHelpers'
 import CopyConfirmation from './CopyConfirmation'
 import { ShareType } from './lib/constants'
 import { SocialShareButtons } from './SocialShareButtons'
 
 export const UrlSection = (props) => {
-	const { urlType, url, actions, shareType, showCopyConfirmation, enterpriseEnabled } = props
+	const {
+		urlType,
+		url,
+		actions,
+		shareType,
+		showCopyConfirmation,
+		enterpriseEnabled,
+		includeHighlights,
+		article,
+		highlight
+	} = props
 
 	const copyLinkHandler = (event) => {
 		switch (shareType) {
@@ -28,15 +39,26 @@ export const UrlSection = (props) => {
 				data-section-id={shareType + 'Link'}
 				data-trackable="copy-link"
 			>
-				<input id="share-link" type="text" name={urlType} value={url} readOnly />
+				{includeHighlights ? (
+					<textarea
+						rows={12}
+						cols={40}
+						id="share-link"
+						name={urlType}
+						value={`${article.title} - "${trimHighlights(highlight)}"\n\n${url}`}
+						readOnly
+					/>
+				) : (
+					<input id="share-link" type="text" name={urlType} value={url} readOnly />
+				)}
 				<button
 					className={`o-buttons o-buttons--big o-buttons--primary ${
 						enterpriseEnabled ? 'o-buttons--professional' : ''
 					}`}
 					aria-label="Copy link of the gift article to your clipboard"
 					onClick={copyLinkHandler}
 				>
-					Copy link
+					{includeHighlights ? 'Copy' : 'Copy link'}
 				</button>
 				{showCopyConfirmation && <CopyConfirmation hideCopyConfirmation={actions.hideCopyConfirmation} />}
 			</div>

components/x-gift-article/src/lib/share-link-actions.js

@@ -26,7 +26,7 @@ function createMailtoUrl({ article, includeHighlights, highlight }, shareUrl) {
 
 function copyToClipboard(event) {
 	const urlSection = event.target.closest('.js-gift-article__url-section')
-	const inputEl = urlSection.querySelector('input')
+	const inputEl = urlSection.querySelector('#share-link')
 	const oldContentEditable = inputEl.contentEditable
 	const oldReadOnly = inputEl.readOnly
 	const range = document.createRange()