From 6cd3960d3e56370b86070efcd93dad197672b2c3 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:02:22 -0400
Subject: [PATCH] fix(AnchoredOverlay): replace broken stories (#5056)

* fix(AnchoredOverlay): replace broken stories

* fix: storybook build failure

* Docs(AnchoredOverlay): rewrite hovercard using stack

* Docs(AnchoredOverlay): remove unused variable

* Docs(AnchoredOverlay): use text size prop in stories instead of fontSize

* Update packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx

Co-authored-by: Mike Perrotti <mperrotti@github.com>

* Docs(AnchoredOverlay): use sx prop for styling instead of styled-system props

---------

Co-authored-by: Mike Perrotti <mperrotti@github.com>
---
 .../AnchoredOverlay.features.stories.tsx      | 66 ++++++++++++-------
 .../AnchoredOverlay.stories.tsx               | 43 +++++++++---
 2 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index 78ff50b16c8..db336516af6 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -2,17 +2,49 @@ import React, {useEffect, useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {FocusKeys} from '@primer/behaviors'
 
-import {Box, Button} from '..'
+import {Avatar, Box, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import Heading from '../Heading'
+import Octicon from '../Octicon'
+import {Button} from '../Button'
 import {registerPortalRoot} from '../Portal'
 import {Playground} from './AnchoredOverlay.stories'
+import {LocationIcon, RepoIcon} from '@primer/octicons-react'
+import {Stack} from '../Stack/Stack'
 
 export default {
   title: 'Components/AnchoredOverlay/Features',
   component: AnchoredOverlay,
 } as Meta
 
+const hoverCard = (
+  <Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
+    <Stack direction="horizontal" gap="condensed" justify="space-between">
+      <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
+      <Button size="small">Follow</Button>
+    </Stack>
+    <Stack direction="horizontal" gap="none">
+      <Text weight="medium">monalisa</Text>
+      <Text color={'var(--fgColor-muted)'} ml={1}>
+        Monalisa Octocat
+      </Text>
+    </Stack>
+    <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
+    <Stack direction="horizontal" gap="none">
+      <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
+        Interwebs
+      </Text>
+    </Stack>
+    <Stack direction="horizontal" gap="none">
+      <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
+        Owns this repository
+      </Text>
+    </Stack>
+  </Stack>
+)
+
 const HeaderAndLayout = ({children}: {children: JSX.Element}) => {
   const scrollingElementRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
@@ -70,9 +102,7 @@ export const CustomAnchorId = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorId="my-custom-anchor-id"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -88,9 +118,7 @@ export const Height = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       height="large"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -106,9 +134,7 @@ export const Width = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       width="large"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -128,9 +154,7 @@ export const AnchorAlignment = () => {
       )}
       align="center"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -146,9 +170,7 @@ export const AnchorSide = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       side="outside-right"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -164,9 +186,7 @@ export const OffsetPositionFromAnchor = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorOffset={100}
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -182,9 +202,7 @@ export const OffsetAlignmentFromAnchor = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       alignmentOffset={100}
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -247,9 +265,7 @@ export const OverlayPropsOverrides = () => {
         <li>overflow: `auto`</li>
         <li>maxHeight: `xsmall`</li>
       </pre>
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index deba2266964..5a7dcbf50da 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -1,16 +1,47 @@
 import React, {useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
+import {LocationIcon, RepoIcon} from '@primer/octicons-react'
 
-import {Box} from '..'
+import {Avatar, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button} from '../Button'
+import Octicon from '../Octicon'
 import {action} from '@storybook/addon-actions'
+import {Stack} from '../Stack/Stack'
 
 export default {
   title: 'Components/AnchoredOverlay',
   component: AnchoredOverlay,
 } as Meta
 
+const hoverCard = (
+  <Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
+    <Stack direction="horizontal" gap="condensed" justify="space-between">
+      <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
+      <Button size="small">Follow</Button>
+    </Stack>
+    <Stack direction="horizontal" gap="none">
+      <Text weight="medium">monalisa</Text>
+      <Text color={'var(--fgColor-muted)'} ml={1}>
+        Monalisa Octocat
+      </Text>
+    </Stack>
+    <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
+    <Stack direction="horizontal" gap="none">
+      <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
+        Interwebs
+      </Text>
+    </Stack>
+    <Stack direction="horizontal" gap="none">
+      <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
+        Owns this repository
+      </Text>
+    </Stack>
+  </Stack>
+)
+
 export const Default = () => {
   const [open, setOpen] = useState(false)
 
@@ -21,9 +52,7 @@ export const Default = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      {hoverCard}
     </AnchoredOverlay>
   )
 }
@@ -48,14 +77,12 @@ export const Playground = (args: Args) => {
       overlayProps={args.portalContainerName}
       side={args.side}
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      {hoverCard}
     </AnchoredOverlay>
   )
 }
 Playground.args = {
-  width: 'small',
+  width: 'auto',
   height: 'auto',
   portalContainerName: 'Portal name',
   side: 'outside-bottom',