Skip to content

Commit 8d8cb53

Browse files
francineluccafrancinelucca
committed
Docs(AnchoredOverlay): rewrite hovercard using stack
1 parent 5835d4a commit 8d8cb53

File tree

2 files changed

+50
-66
lines changed

2 files changed

+50
-66
lines changed

‎packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,47 +10,39 @@ import {Button} from '../Button'
1010
import {registerPortalRoot} from '../Portal'
1111
import {Playground} from './AnchoredOverlay.stories'
1212
import {LocationIcon, RepoIcon} from '@primer/octicons-react'
13+
import {Stack} from '../Stack/Stack'
1314

1415
export default {
1516
title: 'Components/AnchoredOverlay/Features',
1617
component: AnchoredOverlay,
1718
} as Meta
1819

1920
const hoverCard = (
20-
<Box p={3} minWidth={320}>
21-
<Box display="flex" flexDirection="column" sx={{position: 'relative'}}>
21+
<Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
22+
<Stack direction="horizontal" gap="condensed" justify="space-between">
2223
<Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
23-
<Box display="flex">
24-
<Text weight="medium">monalisa</Text>
25-
<Text color={'var(--fgColor-muted)'} ml={1}>
26-
Monalisa Octocat
27-
</Text>
28-
</Box>
29-
<Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
30-
<Box display="flex" mt={1}>
31-
<Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
32-
<Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
33-
Interwebs
34-
</Text>
35-
</Box>
36-
<Box display="flex" mt={1}>
37-
<Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
38-
<Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
39-
Owns this repository
40-
</Text>
41-
</Box>
42-
<Button
43-
size="small"
44-
sx={{
45-
position: 'absolute',
46-
right: 0,
47-
top: 0,
48-
}}
49-
>
50-
Follow
51-
</Button>
52-
</Box>
53-
</Box>
24+
<Button size="small">Follow</Button>
25+
</Stack>
26+
<Stack direction="horizontal" gap="none">
27+
<Text weight="medium">monalisa</Text>
28+
<Text color={'var(--fgColor-muted)'} ml={1}>
29+
Monalisa Octocat
30+
</Text>
31+
</Stack>
32+
<Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
33+
<Stack direction="horizontal" gap="none">
34+
<Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
35+
<Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
36+
Interwebs
37+
</Text>
38+
</Stack>
39+
<Stack direction="horizontal" gap="none">
40+
<Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
41+
<Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
42+
Owns this repository
43+
</Text>
44+
</Stack>
45+
</Stack>
5446
)
5547

5648
const HeaderAndLayout = ({children}: {children: JSX.Element}) => {

‎packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,47 +7,39 @@ import {AnchoredOverlay} from '../AnchoredOverlay'
77
import {Button} from '../Button'
88
import Octicon from '../Octicon'
99
import {action} from '@storybook/addon-actions'
10+
import {Stack} from '../Stack/Stack'
1011

1112
export default {
1213
title: 'Components/AnchoredOverlay',
1314
component: AnchoredOverlay,
1415
} as Meta
1516

1617
const hoverCard = (
17-
<Box p={3} minWidth={320}>
18-
<Box display="flex" flexDirection="column" sx={{position: 'relative'}}>
18+
<Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
19+
<Stack direction="horizontal" gap="condensed" justify="space-between">
1920
<Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
20-
<Box display="flex">
21-
<Text weight="medium">monalisa</Text>
22-
<Text color={'var(--fgColor-muted)'} ml={1}>
23-
Monalisa Octocat
24-
</Text>
25-
</Box>
26-
<Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
27-
<Box display="flex" mt={1}>
28-
<Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
29-
<Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
30-
Interwebs
31-
</Text>
32-
</Box>
33-
<Box display="flex" mt={1}>
34-
<Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
35-
<Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
36-
Owns this repository
37-
</Text>
38-
</Box>
39-
<Button
40-
size="small"
41-
sx={{
42-
position: 'absolute',
43-
right: 0,
44-
top: 0,
45-
}}
46-
>
47-
Follow
48-
</Button>
49-
</Box>
50-
</Box>
21+
<Button size="small">Follow</Button>
22+
</Stack>
23+
<Stack direction="horizontal" gap="none">
24+
<Text weight="medium">monalisa</Text>
25+
<Text color={'var(--fgColor-muted)'} ml={1}>
26+
Monalisa Octocat
27+
</Text>
28+
</Stack>
29+
<Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
30+
<Stack direction="horizontal" gap="none">
31+
<Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
32+
<Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
33+
Interwebs
34+
</Text>
35+
</Stack>
36+
<Stack direction="horizontal" gap="none">
37+
<Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
38+
<Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
39+
Owns this repository
40+
</Text>
41+
</Stack>
42+
</Stack>
5143
)
5244

5345
export const Default = () => {

0 commit comments

Comments
 (0)