feat(share): add Slack to the share bands

packages/shared/src/components/post/common/PostContentShare.tsx

@@ -80,6 +80,8 @@ export function PostContentShare({
       // shortens at press time and falls back to the tracked URL.
       link={post.commentsPermalink}
       onShare={onShare}
+      origin={Origin.PostContent}
+      post={post}
       text={post.title ?? post.sharedPost?.title ?? ''}
       title="Should anyone else see this post?"
     />

packages/shared/src/components/share/ShareActions.spec.tsx

@@ -12,6 +12,7 @@ import { ShareActions } from './ShareActions';
 import { TestBootProvider } from '../../../__tests__/helpers/boot';
 import { ShareProvider } from '../../lib/share';
 import { useViewSize } from '../../hooks/useViewSize';
+import { postWithCommunitySentiment as sharedPost } from '../../../__tests__/fixture/post';
 
 jest.mock('../../hooks/useViewSize', () => {
   const actual = jest.requireActual('../../hooks/useViewSize');
@@ -52,6 +53,15 @@ describe('ShareActions inline variant', () => {
     expect(screen.getByText('WhatsApp')).toBeInTheDocument();
   });
 
+  it('offers Slack only when there is a post to share', () => {
+    const { unmount } = renderComponent({ variant: 'inline' });
+    expect(screen.queryByText('Slack')).not.toBeInTheDocument();
+    unmount();
+
+    renderComponent({ variant: 'inline', post: sharedPost });
+    expect(screen.getByText('Slack')).toBeInTheDocument();
+  });
+
   it('copies the link and reports the CopyLink provider', async () => {
     renderComponent({ variant: 'inline' });
 

packages/shared/src/components/share/ShareActions.tsx

@@ -13,6 +13,8 @@ import { useShareOrCopyLink } from '../../hooks/useShareOrCopyLink';
 import { shouldUseNativeShare } from '../../lib/func';
 import { ShareProvider } from '../../lib/share';
 import type { ReferralCampaignKey } from '../../lib/referral';
+import type { Post } from '../../graphql/posts';
+import type { Origin } from '../../lib/log';
 import { CopyStateIcon } from './CopyStateIcon';
 import { SplitShareButton } from './SplitShareButton';
 
@@ -23,6 +25,10 @@ export interface ShareActionsProps {
   /** Share text / description used for native share + pre-filled network text. */
   text: string;
   cid?: ReferralCampaignKey;
+  /** The post being shared, when there is one: Slack shares a post. */
+  post?: Post;
+  /** Where the Slack share starts, for its own events. */
+  origin?: Origin;
   variant?: ShareActionsVariant;
   /** Desktop only: reveal the popover on hover as well as click. */
   openOnHover?: boolean;
@@ -50,6 +56,8 @@ export function ShareActions({
   link,
   text,
   cid,
+  post,
+  origin,
   variant = 'icon',
   openOnHover = false,
   buttonVariant = ButtonVariant.Tertiary,
@@ -87,6 +95,8 @@ export function ShareActions({
     <SocialShareList
       link={link}
       description={text}
+      post={post}
+      origin={origin}
       emailTitle={emailTitle}
       emailSummary={emailSummary}
       isCopying={copying}

packages/shared/src/components/share/ShareBand.tsx

@@ -10,6 +10,8 @@ import {
 import { ButtonSize, ButtonVariant } from '../buttons/common';
 import type { ReferralCampaignKey } from '../../lib/referral';
 import type { ShareProvider } from '../../lib/share';
+import type { Post } from '../../graphql/posts';
+import type { Origin } from '../../lib/log';
 
 export interface ShareBandProps {
   title: string;
@@ -19,6 +21,9 @@ export interface ShareBandProps {
   text: string;
   /** Omit when `link` is already a tracked short URL — passing it double-shortens. */
   cid?: ReferralCampaignKey;
+  /** Adds Slack to the networks behind the chevron. */
+  post?: Post;
+  origin?: Origin;
   emailTitle?: string;
   /** Surface and spacing belong to the host: the two callers sit in different places. */
   className?: string;
@@ -40,6 +45,8 @@ export const ShareBand = ({
   link,
   text,
   cid,
+  post,
+  origin,
   emailTitle,
   className,
   onShare,
@@ -68,6 +75,8 @@ export const ShareBand = ({
       link={link}
       text={text}
       cid={cid}
+      post={post}
+      origin={origin}
       emailTitle={emailTitle}
       buttonVariant={ButtonVariant.Primary}
       buttonSize={ButtonSize.Small}

packages/shared/src/features/snapshot/EndOfThreadShare.tsx

@@ -57,6 +57,8 @@ export function EndOfThreadShare({
       description="Send it to someone who’d have opinions."
       link={post.commentsPermalink}
       onShare={onShare}
+      origin={Origin.EndOfConversation}
+      post={post}
       text={post.title ?? post.sharedPost?.title ?? ''}
       title="Enjoyed this discussion?"
     />