diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..854fdab
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "checkJs": true,
+ "module": "esnext",
+ "target": "es2019",
+ "moduleResolution": "node",
+ "jsx": "react"
+ },
+ "exclude": ["node_modules", "**/node_modules/*"]
+}
diff --git a/src/components/ShareSocialCta/index.js b/src/components/ShareSocialCta/index.js
index d3ea8d0..b5cd2ed 100644
--- a/src/components/ShareSocialCta/index.js
+++ b/src/components/ShareSocialCta/index.js
@@ -9,8 +9,70 @@ import TwitterButton from "../SocialButtons/TwitterButton";
import FacebookButton from "../SocialButtons/FacebookButton";
import WhatsappButton from "../SocialButtons/WhatsappButton";
import LinkedinButton from "../SocialButtons/LinkedInButton";
+import NativeShareButton from "../SocialButtons/NativeShareButton";
import EarthIcon from "../Images/Icons/EarthIcon.svg";
+function FallbackShareButtons({
+ ctaTitle,
+ emailBody,
+ emailSubject,
+ facebookQuote,
+ facebookHashtag,
+ linkedinTitle,
+ linkedinDescription,
+ twitterTitle,
+ twitterAccount,
+ twitterHashtags,
+ url,
+ whatsappTitle,
+ currentUrl
+}) {
+ return (
+
+
+
+
+
+
+ {null}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
function ShareSocialCta({
children,
ctaCopy,
@@ -28,6 +90,30 @@ function ShareSocialCta({
whatsappTitle,
currentUrl
}) {
+ const webShareApi =
+ typeof window !== "undefined" && "share" in window.navigator;
+ const propsForFallbackShareButtons = {
+ ctaTitle,
+ emailBody,
+ emailSubject,
+ facebookQuote,
+ facebookHashtag,
+ linkedinTitle,
+ linkedinDescription,
+ twitterTitle,
+ twitterAccount,
+ twitterHashtags,
+ url,
+ whatsappTitle,
+ currentUrl
+ };
+
+ const shareButtons = webShareApi ? (
+
+ ) : (
+
+ );
+
return (
@@ -51,50 +137,9 @@ function ShareSocialCta({
Send this page to your friends, family and followers via our handy
pre written message.
-
-
-
-
-
-
-
- {null}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {shareButtons}
+
Thank you{" "}
diff --git a/src/components/SocialButtons/NativeShareButton.js b/src/components/SocialButtons/NativeShareButton.js
new file mode 100644
index 0000000..11afbbb
--- /dev/null
+++ b/src/components/SocialButtons/NativeShareButton.js
@@ -0,0 +1,44 @@
+import React from "react";
+import styles from "./styles.module.scss";
+import buttonStyles from "../../styles/Buttons.module.scss";
+
+/**
+ * @typedef Props
+ * @prop {string} title
+ * @prop {string} text
+ * @prop {string} url
+ */
+
+/**
+ * Renders a button that opens the Web Share API dialog
+ * with the, in Props, provided text, title and url.
+ *
+ * @param {Props} props
+ */
+export default function NativeShareButton(props) {
+ const { title, text, url } = props;
+
+ async function openShareDialog() {
+ try {
+ await navigator.share({
+ title,
+ text,
+ url
+ });
+ } catch (shareError) {
+ // Handle share error maybe?
+ // This would be trying to share on unsecure origins...
+ }
+ }
+
+ return (
+ <>
+
+ >
+ );
+}