docs(snapshot): document hot take and reading history share placements

packages/shared/src/components/history/ReadingHistory.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { subDays } from 'date-fns';
 import type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import nock from 'nock';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { PostItemCardProps } from '../post/PostItemCard';
@@ -199,6 +199,26 @@ describe('PostItemCard component', () => {
     );
   });
 
+  it('should copy the post link and confirm on the button itself', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, { clipboard: { writeText } });
+
+    renderCard({ showCopyLink: true });
+
+    fireEvent.click(await screen.findByLabelText('Copy link'));
+
+    await waitFor(() =>
+      expect(writeText).toHaveBeenCalledWith(post.commentsPermalink),
+    );
+    await screen.findByLabelText('Link copied');
+  });
+
+  it('should not render the copy link button by default', async () => {
+    renderCard();
+    await screen.findByText(postTitle);
+    expect(screen.queryByLabelText('Copy link')).not.toBeInTheDocument();
+  });
+
   it('should call onHide on close button clicked', async () => {
     renderCard({ onHide });
     const button = (await screen.findAllByRole('button'))[0];

packages/shared/src/components/history/ReadingHistoryList.tsx

@@ -23,37 +23,43 @@ export default function ReadHistoryList({
     let currentDate: Date;
 
     return data?.pages.map((page, pageIndex) =>
-      page.readHistory.edges.reduce((dom, { node: history }, edgeIndex) => {
-        const { timestamp } = history;
-        const date = new Date(timestamp);
+      page.readHistory.edges.reduce<ReactElement[]>(
+        (dom, { node: history }, edgeIndex) => {
+          const { timestamp } = history;
+          // Optional only because PostItem is shared with surfaces that carry
+          // no timestamp; every reading-history edge has one.
+          const date = new Date(timestamp as Date);
+
+          if (!currentDate || !isDateOnlyEqual(currentDate, date)) {
+            currentDate = date;
+            dom.push(
+              <DateFormat
+                key={date.toISOString()}
+                date={date}
+                type={TimeFormatType.ReadHistory}
+                className="my-3 px-6 text-text-tertiary typo-body first:mt-0"
+              />,
+            );
+          }
+
+          const indexes = { page: pageIndex, edge: edgeIndex };
 
-        if (!currentDate || !isDateOnlyEqual(currentDate, date)) {
-          currentDate = date;
           dom.push(
-            <DateFormat
-              key={date.toISOString()}
-              date={date}
-              type={TimeFormatType.ReadHistory}
-              className="my-3 px-6 text-text-tertiary typo-body first:mt-0"
+            <PostItemCard
+              key={`${history.post.id}-${timestamp}`}
+              postItem={history}
+              indexes={indexes}
+              onHide={(params) => onHide({ ...params, ...indexes })}
+              showVoteActions
+              showCopyLink
+              logOrigin={Origin.History}
             />,
           );
-        }
-
-        const indexes = { page: pageIndex, edge: edgeIndex };
-
-        dom.push(
-          <PostItemCard
-            key={`${history.post.id}-${timestamp}`}
-            postItem={history}
-            indexes={indexes}
-            onHide={(params) => onHide({ ...params, ...indexes })}
-            showVoteActions
-            logOrigin={Origin.History}
-          />,
-        );
 
-        return dom;
-      }, []),
+          return dom;
+        },
+        [],
+      ),
     );
     // @NOTE see https://dailydotdev.atlassian.net/l/cp/dK9h1zoM
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/shared/src/components/icons/Snapshot/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const SnapshotIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/index.ts

@@ -150,6 +150,7 @@ export * from './Shortcuts';
 export * from './Sidebar';
 export * from './Sites';
 export * from './Slack';
+export * from './Snapshot';
 export * from './Sort';
 export * from './Source';
 export * from './Sparkle';

packages/shared/src/components/post/PostItemCard.tsx

@@ -24,6 +24,8 @@ import { isSourceUserSource } from '../../graphql/sources';
 
 import { ReadingHistoryOptionsMenu } from '../history/ReadingHistoryOptionsMenu';
 import type { QueryIndexes } from '../../hooks/useReadingHistory';
+import { useCopyPostLink } from '../../hooks/useCopyPostLink';
+import { CopyStateIcon } from '../share/CopyStateIcon';
 
 export interface PostItemCardProps {
   className?: string;
@@ -32,6 +34,7 @@ export interface PostItemCardProps {
   clickable?: boolean;
   onHide?: (params: HidePostItemCardProps) => Promise<unknown>;
   showVoteActions?: boolean;
+  showCopyLink?: boolean;
   logOrigin?: Origin;
   indexes?: QueryIndexes;
 }
@@ -48,6 +51,7 @@ export default function PostItemCard({
   onHide,
   className,
   showVoteActions = false,
+  showCopyLink = false,
   logOrigin = Origin.Feed,
   indexes,
 }: PostItemCardProps): ReactElement {
@@ -66,6 +70,7 @@ export default function PostItemCard({
   const isUserSource = isSourceUserSource(source);
 
   const { toggleUpvote, toggleDownvote } = useReadHistoryVotePost();
+  const [copying, copyLink] = useCopyPostLink(post.commentsPermalink);
 
   const classes = classNames(
     'relative flex w-full flex-row py-3 pl-9 pr-5',
@@ -185,6 +190,19 @@ export default function PostItemCard({
                   onClick={onHideClick}
                 />
               )}
+              {showButtons && showCopyLink && (
+                <Button
+                  size={ButtonSize.Small}
+                  variant={ButtonVariant.Tertiary}
+                  aria-label={copying ? 'Link copied' : 'Copy link'}
+                  icon={<CopyStateIcon copied={copying} />}
+                  onClick={(e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    copyLink();
+                  }}
+                />
+              )}
               {showButtons && (
                 <ReadingHistoryOptionsMenu
                   post={post}

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

@@ -0,0 +1,46 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { CopyIcon, VIcon } from '../icons';
+import type { IconProps } from '../Icon';
+
+/**
+ * easeOutExpo — the curve the design-system dropdown animates on. It
+ * decelerates into the target with no overshoot, which is what keeps a swap
+ * from reading as a wobble.
+ */
+export const EASE_OUT_EXPO = 'ease-[cubic-bezier(0.16,1,0.3,1)]';
+
+/**
+ * Both glyphs share one grid cell so nothing beside them shifts mid-swap, and
+ * the transition collapses to an instant swap under `prefers-reduced-motion`.
+ */
+export const CopyStateIcon = ({
+  copied,
+  className,
+  ...props
+}: IconProps & { copied: boolean }): ReactElement => {
+  const layer = classNames(
+    className,
+    'col-start-1 row-start-1 transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none',
+    EASE_OUT_EXPO,
+  );
+
+  return (
+    <span className="inline-grid">
+      <CopyIcon
+        {...props}
+        className={classNames(layer, copied && 'scale-50 opacity-0 blur-[2px]')}
+      />
+      <VIcon
+        {...props}
+        secondary
+        className={classNames(
+          layer,
+          'text-status-success',
+          !copied && 'scale-50 opacity-0 blur-[2px]',
+        )}
+      />
+    </span>
+  );
+};