Merge pull request #25 from UrbanInstitute/patch-socialshare

Patch socialshare

CHANGELOG.md

@@ -6,6 +6,10 @@
 - Update urbanColors module to align more closely with the Urban Institute data visualization styleguide
 - Improve urbanColors documentation
 - Add PR template for changelog reminder
+- Update urbanColors module to align more closely with the Urban Institute data visualization styleguide
+- Improve urbanColors documentation
+- Update SocialShare Twitter icon to new X logo
+- Simplify SocialShare dialogue URLs
 
 ## 0.3.3
 

src/lib/SocialShare/IconX.svelte

@@ -0,0 +1,19 @@
+<script>
+  /** @type {"dark" | "light"} [variant = "dark"]  */
+  export let variant = "dark";
+  export let size = 49;
+
+  $: fill = variant == "dark" ? "#000000" : "#FFFFFF";
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 48 48"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-label="Twitter logo"
+>
+  <path {fill} fill-rule="evenodd" clip-rule="evenodd" d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zm9.7-34h-3.375l-5.56 6.39L19.96 14H13l8.313 10.938L13.43 34h3.38l6.08-6.99L28.213 34H35l-8.672-11.529L33.7 14zm-4.56 17.971h1.868L18.942 15.923h-2.008L29.14 31.971z"></path>
+</svg>

src/lib/SocialShare/SocialShare.svelte

@@ -1,5 +1,6 @@
 <script>
   import twitterIcon from "./IconTwitter.svelte";
+  import xIcon from "./IconX.svelte";
   import facebookIcon from "./IconFacebook.svelte";
   import linkedinIcon from "./IconLinkedin.svelte";
   import mailIcon from "./IconMail.svelte";
@@ -30,29 +31,28 @@
    */
   export let iconSize = 24;
 
-  const base_share_url = "https://www.addtoany.com/add_to";
   $: encoded_url_to_share = encodeURIComponent(shareUrl);
 
   $: socials = [
-    {
-      name: "twitter",
-      icon: twitterIcon,
-      url: `${base_share_url}/twitter?linkurl=${encoded_url_to_share}&linknote=`
-    },
     {
       name: "facebook",
       icon: facebookIcon,
-      url: `${base_share_url}/facebook?linkurl=${encoded_url_to_share}&linknote=`
+      url: `https://www.facebook.com/sharer/sharer.php?u=${encoded_url_to_share}`
+    },
+    {
+      name: "X",
+      icon: xIcon,
+      url: `https://twitter.com/intent/tweet?text=&url=${encoded_url_to_share}`
     },
     {
       name: "linkedin",
       icon: linkedinIcon,
-      url: `${base_share_url}/linkedin?linkurl=${encoded_url_to_share}&linknote=`
+      url: `https://www.linkedin.com/sharing/share-offsite/?url=${encoded_url_to_share}`
     },
     {
       name: "email",
       icon: mailIcon,
-      url: `${base_share_url}/email?linkurl=${encoded_url_to_share}&linknote=`
+      url: `mailto: ?subject=&body=${encoded_url_to_share}`
     }
   ];
 </script>