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 ac011b430..2c7eee2bd 100644
--- a/components/x-gift-article/__tests__/x-gift-article.test.jsx
+++ b/components/x-gift-article/__tests__/x-gift-article.test.jsx
@@ -73,7 +73,9 @@ describe('x-gift-article', () => {
const subject = mount()
- 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 () => {
diff --git a/components/x-gift-article/src/AdvancedSharingBanner.jsx b/components/x-gift-article/src/AdvancedSharingBanner.jsx
index 875b5b556..cc261c1db 100644
--- a/components/x-gift-article/src/AdvancedSharingBanner.jsx
+++ b/components/x-gift-article/src/AdvancedSharingBanner.jsx
@@ -4,7 +4,7 @@ export const AdvancedSharingBanner = ({ enterpriseEnabled, enterpriseRequestAcce
return enterpriseEnabled && !enterpriseRequestAccess ? (
-
Advanced Sharing
+
Advanced Sharing
) : null
}
diff --git a/components/x-gift-article/src/FooterMessage.jsx b/components/x-gift-article/src/FooterMessage.jsx
index 5aed3bccc..a1d35a640 100644
--- a/components/x-gift-article/src/FooterMessage.jsx
+++ b/components/x-gift-article/src/FooterMessage.jsx
@@ -38,7 +38,7 @@ export const FooterMessage = ({
Send to multiple people with{' '}
- Sharing link
+ Sharing link
)
}
@@ -24,8 +24,10 @@ export const Header = ({
// when a gift link is not created, the title should be "Share this article:"
return (
- {title}
- {article.title}
+
+ {title}
+ {article.title}
+
)
}
diff --git a/components/x-gift-article/src/ShareArticleDialog.jsx b/components/x-gift-article/src/ShareArticleDialog.jsx
index d66902118..7cf998d4d 100644
--- a/components/x-gift-article/src/ShareArticleDialog.jsx
+++ b/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"
>
-
+
-
+
-
+
)
}
diff --git a/components/x-gift-article/src/ShareArticleDialog.scss b/components/x-gift-article/src/ShareArticleDialog.scss
index 814d72c07..5c66e43c5 100644
--- a/components/x-gift-article/src/ShareArticleDialog.scss
+++ b/components/x-gift-article/src/ShareArticleDialog.scss
@@ -87,7 +87,12 @@
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');
@@ -95,6 +100,7 @@
}
.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'));
+ }
+}
diff --git a/components/x-gift-article/src/SharedLinkTypeSelector.jsx b/components/x-gift-article/src/SharedLinkTypeSelector.jsx
index ba77438f2..65e7ecbf9 100644
--- a/components/x-gift-article/src/SharedLinkTypeSelector.jsx
+++ b/components/x-gift-article/src/SharedLinkTypeSelector.jsx
@@ -57,7 +57,9 @@ export const SharedLinkTypeSelector = (props) => {
onChange={handleChange}
disabled={!canShareWithNonSubscribers}
/>
- Give access to non-subscribers
+
+ {advancedSharingEnabled ? 'Give access to non-subscribers' : 'Give access to a non-subscriber'}
+
{!canShareWithNonSubscribers && (
diff --git a/components/x-gift-article/src/SocialShareButtons.jsx b/components/x-gift-article/src/SocialShareButtons.jsx
index 233e1673d..93e3946a6 100644
--- a/components/x-gift-article/src/SocialShareButtons.jsx
+++ b/components/x-gift-article/src/SocialShareButtons.jsx
@@ -32,7 +32,7 @@ export const SocialShareButtons = ({ actions, mailtoUrl, shareType, enterpriseEn
return (
-
Or share via
+
Or share via