Merge pull request #742 from Financial-Times/x-gift-article-release-b…

…ranch

x-gift-article release branch

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

@@ -73,7 +73,9 @@ describe('x-gift-article', () => {
 
 		const subject = mount(<ShareArticleModal {...args} />)
 
-		expect(subject.find('h2').text()).toEqual('A given test article title')
+		expect(subject.find('.share-article-dialog__header-article-title').text()).toEqual(
+			'A given test article title'
+		)
 	})
 
 	it('should call correct endpoints on activate', async () => {

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

@@ -4,7 +4,7 @@ export const AdvancedSharingBanner = ({ enterpriseEnabled, enterpriseRequestAcce
 	return enterpriseEnabled && !enterpriseRequestAccess ? (
 		<div>
 			<div className="share-article-dialog__banner-strip" />
-			<h4 className="share-article-dialog__banner-title">Advanced Sharing</h4>
+			<h2 className="share-article-dialog__banner-title">Advanced Sharing</h2>
 		</div>
 	) : null
 }

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

@@ -38,7 +38,7 @@ export const FooterMessage = ({
 				Send to multiple people with{' '}
 				<a
 					className="o-typography-professional o-typography-link"
-					href="https://enterprise.ft.com/ft-enterprise-sharing-trial"
+					href="https://professional.ft.com/advanced-sharing-request-access"
 					target="_blank"
 					rel="noreferrer"
 					data-trackable="trial-link"

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

@@ -16,16 +16,18 @@ export const Header = ({
 	) {
 		return (
 			<header>
-				<div className="share-article-dialog__header-share-link-title">Sharing link</div>
+				<h3 className="share-article-dialog__header-share-link-title">Sharing link</h3>
 			</header>
 		)
 	}
 
 	// when a gift link is not created, the title should be "Share this article:"
 	return (
 		<header>
-			<h5 className="share-article-dialog__header-share-article-title">{title}</h5>
-			<h2 className="share-article-dialog__header-article-title">{article.title}</h2>
+			<h3 className="share-article-dialog__header">
+				<span className="share-article-dialog__header-share-article-title">{title}</span>
+				<span className="share-article-dialog__header-article-title">{article.title}</span>
+			</h3>
 		</header>
 	)
 }

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

@@ -12,14 +12,16 @@ export default (props) => {
 			data-trackable={`share-modal | ${
 				props.enterpriseEnabled && !props.enterpriseRequestAccess ? 'b2b' : 'b2c'
 			}`}
+			role="dialog"
+			aria-modal="true"
 		>
-			<div className="o-overlay__close" />
+			<button className="share-article-modal__close" aria-label="Close" />
 			<AdvancedSharingBanner {...props} />
-			<main className="share-article-dialog__main">
+			<div className="share-article-dialog__main">
 				<Header {...props} />
 				<GiftLinkSection {...props} />
 				<Footer {...props} />
-			</main>
+			</div>
 		</div>
 	)
 }

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

@@ -87,14 +87,20 @@
 	padding: oSpacingByName('s4');
 }
 
+.share-article-dialog__header {
+	margin: 0;
+}
+
 .share-article-dialog__header-share-article-title {
+	display: block;
 	@include oTypographySans($scale: -1, $weight: 'medium');
 	color: oColorsByName('black');
 	margin-top: oSpacingByName('s1');
 	margin-bottom: oSpacingByName('s1');
 }
 
 .share-article-dialog__header-article-title {
+	display: block;
 	@include oTypographyDisplay($scale: 3, $weight: 'medium');
 	color: oColorsByName('black');
 	margin-top: oSpacingByName('s2');
@@ -107,6 +113,8 @@
 
 .share-article-dialog__header-share-link-title {
 	@include oTypographySans($scale: 0, $weight: 'semibold');
+	margin-top: oSpacingByName('s2');
+	margin-bottom: oSpacingByName('s3');
 }
 
 .share-article-dialog__non-subscriber-checkbox {
@@ -179,3 +187,39 @@
 		@include oTypographySans($weight: 'medium');
 	}
 }
+
+// Stopped using o-overlay but preserved its close functionality
+// Styles copied from o-overlay
+.share-article-modal__close {
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: 50%;
+	background-color: transparent;
+	vertical-align: baseline;
+	width: 20px;
+	height: 20px;
+	background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=next-article&tint=%2366605C%2C%2366605C);
+	appearance: none;
+	border: 0;
+	font: inherit;
+	outline: inherit;
+	box-sizing: content-box;
+	float: right;
+	position: relative;
+	margin: 12px;
+	padding: 0.25em;
+	cursor: pointer;
+	font-size: 8px;
+	line-height: 1;
+	user-select: none;
+		// Increase hit zone of the button around it for better usability
+		&:after {
+			position: absolute;
+			content: '';
+			top: -(oSpacingByName('s3'));
+			right: -(oSpacingByName('s3'));
+			left: -(oSpacingByName('s3'));
+			bottom: -(oSpacingByName('s3'));
+		}
+}

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

@@ -57,7 +57,9 @@ export const SharedLinkTypeSelector = (props) => {
 						onChange={handleChange}
 						disabled={!canShareWithNonSubscribers}
 					/>
-					<span className="o-forms-input__label">Give access to non-subscribers</span>
+					<span className="o-forms-input__label">
+						{advancedSharingEnabled ? 'Give access to non-subscribers' : 'Give access to a non-subscriber'}
+					</span>
 				</label>
 			</span>
 			{!canShareWithNonSubscribers && (

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

@@ -32,7 +32,7 @@ export const SocialShareButtons = ({ actions, mailtoUrl, shareType, enterpriseEn
 
 	return (
 		<div>
-			<h4 className="share-article-dialog__share-via-socials-title">Or share via</h4>
+			<h3 className="share-article-dialog__share-via-socials-title">Or share via</h3>
 			<div id="social-share-buttons" data-o-component="o-share" className="o-share">
 				<ul className="share-article-dialog__share-via-socials-wrapper">
 					<li className="o-share__action">