Skip to content

Commit 1e733c6

Browse files
francineluccafrancinelucca
authored
Merge 8d8cb53 into b00874c 
2 parents b00874c + 8d8cb53 commit 1e733c6

File tree

2 files changed

+83
-24
lines changed

2 files changed

+83
-24
lines changed

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

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,49 @@ import React, {useEffect, useRef, useState} from 'react'
22
import type {Args, Meta} from '@storybook/react'
33
import {FocusKeys} from '@primer/behaviors'
44

5-
import {Box, Button} from '..'
5+
import {Avatar, Box, Text} from '..'
66
import {AnchoredOverlay} from '../AnchoredOverlay'
77
import Heading from '../Heading'
8+
import Octicon from '../Octicon'
9+
import {Button} from '../Button'
810
import {registerPortalRoot} from '../Portal'
911
import {Playground} from './AnchoredOverlay.stories'
12+
import {LocationIcon, RepoIcon} from '@primer/octicons-react'
13+
import {Stack} from '../Stack/Stack'
1014

1115
export default {
1216
title: 'Components/AnchoredOverlay/Features',
1317
component: AnchoredOverlay,
1418
} as Meta
1519

20+
const hoverCard = (
21+
<Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
22+
<Stack direction="horizontal" gap="condensed" justify="space-between">
23+
<Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
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>
46+
)
47+
1648
const HeaderAndLayout = ({children}: {children: JSX.Element}) => {
1749
const scrollingElementRef = useRef<HTMLDivElement>(null)
1850
useEffect(() => {
@@ -70,8 +102,8 @@ export const CustomAnchorId = () => {
70102
renderAnchor={props => <Button {...props}>Button</Button>}
71103
anchorId="my-custom-anchor-id"
72104
>
73-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
74-
<img src={`//placekitten.com/200/300`} alt="kitten" />
105+
<Box width="100%" height="100%" display="flex" flexDirection="column">
106+
{hoverCard}
75107
</Box>
76108
</AnchoredOverlay>
77109
)
@@ -88,8 +120,8 @@ export const Height = () => {
88120
renderAnchor={props => <Button {...props}>Button</Button>}
89121
height="large"
90122
>
91-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
92-
<img src={`//placekitten.com/200/300`} alt="kitten" />
123+
<Box width="100%" height="100%" display="flex" flexDirection="column">
124+
{hoverCard}
93125
</Box>
94126
</AnchoredOverlay>
95127
)
@@ -106,8 +138,8 @@ export const Width = () => {
106138
renderAnchor={props => <Button {...props}>Button</Button>}
107139
width="large"
108140
>
109-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
110-
<img src={`//placekitten.com/200/300`} alt="kitten" />
141+
<Box width="100%" height="100%" display="flex" flexDirection="column">
142+
{hoverCard}
111143
</Box>
112144
</AnchoredOverlay>
113145
)
@@ -128,8 +160,8 @@ export const AnchorAlignment = () => {
128160
)}
129161
align="center"
130162
>
131-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
132-
<img src={`//placekitten.com/200/300`} alt="kitten" />
163+
<Box width="100%" height="100%" display="flex" flexDirection="column">
164+
{hoverCard}
133165
</Box>
134166
</AnchoredOverlay>
135167
)
@@ -146,8 +178,8 @@ export const AnchorSide = () => {
146178
renderAnchor={props => <Button {...props}>Button</Button>}
147179
side="outside-right"
148180
>
149-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
150-
<img src={`//placekitten.com/200/300`} alt="kitten" />
181+
<Box width="100%" height="100%" display="flex" flexDirection="column">
182+
{hoverCard}
151183
</Box>
152184
</AnchoredOverlay>
153185
)
@@ -165,7 +197,7 @@ export const OffsetPositionFromAnchor = () => {
165197
anchorOffset={100}
166198
>
167199
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
168-
<img src={`//placekitten.com/200/300`} alt="kitten" />
200+
{hoverCard}
169201
</Box>
170202
</AnchoredOverlay>
171203
)
@@ -182,8 +214,8 @@ export const OffsetAlignmentFromAnchor = () => {
182214
renderAnchor={props => <Button {...props}>Button</Button>}
183215
alignmentOffset={100}
184216
>
185-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
186-
<img src={`//placekitten.com/200/300`} alt="kitten" />
217+
<Box width="100%" height="100%" display="flex" flexDirection="column">
218+
{hoverCard}
187219
</Box>
188220
</AnchoredOverlay>
189221
)
@@ -247,8 +279,8 @@ export const OverlayPropsOverrides = () => {
247279
<li>overflow: `auto`</li>
248280
<li>maxHeight: `xsmall`</li>
249281
</pre>
250-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
251-
<img src={`//placekitten.com/200/300`} alt="kitten" />
282+
<Box width="100%" height="100%" display="flex" flexDirection="column">
283+
{hoverCard}
252284
</Box>
253285
</AnchoredOverlay>
254286
)

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

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,47 @@
11
import React, {useState} from 'react'
22
import type {Args, Meta} from '@storybook/react'
3+
import {LocationIcon, RepoIcon} from '@primer/octicons-react'
34

4-
import {Box} from '..'
5+
import {Avatar, Box, Text} from '..'
56
import {AnchoredOverlay} from '../AnchoredOverlay'
67
import {Button} from '../Button'
8+
import Octicon from '../Octicon'
79
import {action} from '@storybook/addon-actions'
10+
import {Stack} from '../Stack/Stack'
811

912
export default {
1013
title: 'Components/AnchoredOverlay',
1114
component: AnchoredOverlay,
1215
} as Meta
1316

17+
const hoverCard = (
18+
<Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
19+
<Stack direction="horizontal" gap="condensed" justify="space-between">
20+
<Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
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>
43+
)
44+
1445
export const Default = () => {
1546
const [open, setOpen] = useState(false)
1647

@@ -21,9 +52,7 @@ export const Default = () => {
2152
onClose={() => setOpen(false)}
2253
renderAnchor={props => <Button {...props}>Button</Button>}
2354
>
24-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
25-
<img src={`//placekitten.com/200/300`} alt="kitten" />
26-
</Box>
55+
{hoverCard}
2756
</AnchoredOverlay>
2857
)
2958
}
@@ -48,14 +77,12 @@ export const Playground = (args: Args) => {
4877
overlayProps={args.portalContainerName}
4978
side={args.side}
5079
>
51-
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
52-
<img src={`//placekitten.com/200/300`} alt="kitten" />
53-
</Box>
80+
{hoverCard}
5481
</AnchoredOverlay>
5582
)
5683
}
5784
Playground.args = {
58-
width: 'small',
85+
width: 'auto',
5986
height: 'auto',
6087
portalContainerName: 'Portal name',
6188
side: 'outside-bottom',

0 commit comments

Comments
 (0)