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/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 ? ( +