🎨 Reordered share buttons and improved LinkedIn share URL

ref #26866

LinkedIn is now a primary action and uses the shareArticle URL to improve preview unfurl reliability.

Author: peterzimon

apps/portal/src/components/pages/share-modal.js

@@ -293,7 +293,7 @@ export const ShareModalStyles = `
             order: 2;
         }
 
-        .gh-portal-share-action.facebook {
+        .gh-portal-share-action.linkedin {
             order: 3;
         }
 
@@ -455,6 +455,14 @@ const createEmailShareLink = ({shareTitle, shareUrl}) => {
     return `mailto:${params.length ? `?${params.join('&')}` : ''}`;
 };
 
+const createLinkedinShareLink = ({shareTitle, shareUrl}) => {
+    return createShareLink('https://www.linkedin.com/shareArticle', {
+        mini: 'true',
+        url: shareUrl,
+        title: shareTitle
+    });
+};
+
 const ShareModal = () => {
     const [copied, setCopied] = useState(false);
     const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
@@ -477,7 +485,7 @@ const ShareModal = () => {
             facebook: createShareLink('https://www.facebook.com/sharer/sharer.php', {u: shareUrl}),
             email: createEmailShareLink({shareTitle, shareUrl}),
             threads: createShareLink('https://www.threads.net/intent/post', {text: threadsText}),
-            linkedin: createShareLink('https://www.linkedin.com/sharing/share-offsite/', {url: shareUrl}),
+            linkedin: createLinkedinShareLink({shareTitle, shareUrl}),
             bluesky: createShareLink('https://bsky.app/intent/compose', {text: threadsText})
         };
     }, [shareTitle, shareUrl]);
@@ -616,15 +624,15 @@ const ShareModal = () => {
                 </a>
 
                 <a
-                    className='gh-portal-btn gh-portal-share-action facebook'
-                    href={socialLinks.facebook}
+                    className='gh-portal-btn gh-portal-share-action linkedin'
+                    href={socialLinks.linkedin}
                     target='_blank'
                     rel='noopener noreferrer'
-                    aria-label={t('Facebook')}
-                    title={t('Facebook')}
+                    aria-label={t('LinkedIn')}
+                    title={t('LinkedIn')}
                 >
                     <span className='gh-portal-share-icon' aria-hidden='true'>
-                        <FacebookIcon />
+                        <LinkedinIcon />
                     </span>
                 </a>
 
@@ -659,16 +667,16 @@ const ShareModal = () => {
                         <div className='gh-portal-share-more-menu' role='menu' aria-label={t('More options')}>
                             <a
                                 className='gh-portal-share-more-item'
-                                href={socialLinks.linkedin}
+                                href={socialLinks.facebook}
                                 target='_blank'
                                 rel='noopener noreferrer'
                                 role='menuitem'
                                 onClick={onClickMoreItem}
                             >
                                 <span className='gh-portal-share-more-item-icon' aria-hidden='true'>
-                                    <LinkedinIcon />
+                                    <FacebookIcon />
                                 </span>
-                                <span>{t('LinkedIn')}</span>
+                                <span>{t('Facebook')}</span>
                             </a>
                             <a
                                 className='gh-portal-share-more-item'

apps/portal/test/unit/components/pages/share-modal.test.js

@@ -95,13 +95,13 @@ describe('ShareModal', () => {
         const actions = Array.from(container.querySelector('.gh-portal-share-actions').children);
         expect(actions[0]).toHaveClass('gh-portal-share-action', 'copy');
         expect(actions[1]).toHaveClass('gh-portal-share-action', 'twitter');
-        expect(actions[2]).toHaveClass('gh-portal-share-action', 'facebook');
+        expect(actions[2]).toHaveClass('gh-portal-share-action', 'linkedin');
         expect(actions[3]).toHaveClass('gh-portal-share-action', 'email');
         expect(actions[4]).toHaveClass('gh-portal-share-more');
 
         const copyButton = getByRole('button', {name: 'Copy link'});
         const twitterLink = getByRole('link', {name: 'X (Twitter)'});
-        const facebookLink = getByRole('link', {name: 'Facebook'});
+        const linkedInLink = getByRole('link', {name: 'LinkedIn'});
         const emailLink = getByRole('link', {name: 'Email'});
         const moreOptionsButton = getByRole('button', {name: 'More options'});
 
@@ -110,15 +110,17 @@ describe('ShareModal', () => {
         expect(queryByRole('menu')).not.toBeInTheDocument();
 
         const twitterUrl = new URL(twitterLink.getAttribute('href'));
-        const facebookUrl = new URL(facebookLink.getAttribute('href'));
+        const linkedInUrl = new URL(linkedInLink.getAttribute('href'));
         const emailUrl = new URL(emailLink.getAttribute('href'));
 
         expect(twitterUrl.origin + twitterUrl.pathname).toBe('https://twitter.com/intent/tweet');
         expect(twitterUrl.searchParams.get('url')).toBe('https://example.com/post?ref=test');
         expect(twitterUrl.searchParams.get('text')).toBe('Example post title');
 
-        expect(facebookUrl.origin + facebookUrl.pathname).toBe('https://www.facebook.com/sharer/sharer.php');
-        expect(facebookUrl.searchParams.get('u')).toBe('https://example.com/post?ref=test');
+        expect(linkedInUrl.origin + linkedInUrl.pathname).toBe('https://www.linkedin.com/shareArticle');
+        expect(linkedInUrl.searchParams.get('mini')).toBe('true');
+        expect(linkedInUrl.searchParams.get('url')).toBe('https://example.com/post?ref=test');
+        expect(linkedInUrl.searchParams.get('title')).toBe('Example post title');
 
         expect(emailUrl.protocol).toBe('mailto:');
         expect(emailUrl.searchParams.get('subject')).toBe('Example post title');
@@ -134,16 +136,16 @@ describe('ShareModal', () => {
         expect(moreOptionsButton).toHaveAttribute('aria-expanded', 'true');
         expect(getByRole('menu')).toBeInTheDocument();
 
-        const linkedInLink = getByRole('menuitem', {name: 'LinkedIn'});
+        const facebookLink = getByRole('menuitem', {name: 'Facebook'});
         const threadsLink = getByRole('menuitem', {name: 'Threads'});
         const blueskyLink = getByRole('menuitem', {name: 'Bluesky'});
 
-        const linkedInUrl = new URL(linkedInLink.getAttribute('href'));
+        const facebookUrl = new URL(facebookLink.getAttribute('href'));
         const threadsUrl = new URL(threadsLink.getAttribute('href'));
         const blueskyUrl = new URL(blueskyLink.getAttribute('href'));
 
-        expect(linkedInUrl.origin + linkedInUrl.pathname).toBe('https://www.linkedin.com/sharing/share-offsite/');
-        expect(linkedInUrl.searchParams.get('url')).toBe('https://example.com/post?ref=test');
+        expect(facebookUrl.origin + facebookUrl.pathname).toBe('https://www.facebook.com/sharer/sharer.php');
+        expect(facebookUrl.searchParams.get('u')).toBe('https://example.com/post?ref=test');
 
         expect(threadsUrl.origin + threadsUrl.pathname).toBe('https://www.threads.net/intent/post');
         expect(threadsUrl.searchParams.get('text')).toBe('Example post title https://example.com/post?ref=test');
@@ -186,9 +188,7 @@ describe('ShareModal', () => {
 
         const {getByRole, getByText, queryByTestId} = setup();
 
-        fireEvent.click(getByRole('button', {name: 'More options'}));
-
-        const linkedInLink = getByRole('menuitem', {name: 'LinkedIn'});
+        const linkedInLink = getByRole('link', {name: 'LinkedIn'});
         const linkedInUrl = new URL(linkedInLink.getAttribute('href'));
 
         expect(linkedInUrl.searchParams.get('url')).toBe(window.location.href);