diff --git a/components/x-gift-article/__tests__/x-gift-article.test.jsx b/components/x-gift-article/__tests__/x-gift-article.test.jsx index dcdbeb28c..0ee395a3b 100644 --- a/components/x-gift-article/__tests__/x-gift-article.test.jsx +++ b/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 () => { diff --git a/components/x-gift-article/readme.md b/components/x-gift-article/readme.md index 2e435514f..110a24837 100644 --- a/components/x-gift-article/readme.md +++ b/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 | diff --git a/components/x-gift-article/src/ShareArticleDialog.scss b/components/x-gift-article/src/ShareArticleDialog.scss index 83ac29569..2186e876c 100644 --- a/components/x-gift-article/src/ShareArticleDialog.scss +++ b/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 { diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx index 48c1346da..9b131c6ab 100644 --- a/components/x-gift-article/src/UrlSection.jsx +++ b/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,7 +39,18 @@ export const UrlSection = (props) => { data-section-id={shareType + 'Link'} data-trackable="copy-link" > - + {includeHighlights ? ( +