Skip to content

Commit b8f51b1

Browse files
austincalvelageaustincalvelage
committed
Use IconFrame
1 parent 39e36de commit b8f51b1

6 files changed

Lines changed: 49 additions & 60 deletions

File tree

‎packages/swingset/src/stories/icon-frame.stories.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { Icon, IconFrame } from '@clerk/ui/mosaic/components/icon';
2-
import { colorVars } from '@clerk/ui/mosaic/styles';
2+
import { colorVars, space } from '@clerk/ui/mosaic/styles';
33

44
import type { StoryMeta } from '@/lib/types';
55

66
export { default as __source } from './icon-frame.stories?raw';
77

88
const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
99

10-
function ProviderIcon({ provider }: { provider: string }) {
10+
function ProviderLogo({ provider }: { provider: string }) {
1111
return (
1212
<img
1313
alt=''
1414
src={providerIconUrl(provider)}
15-
style={{ display: 'block', height: 20, objectFit: 'contain', width: 20 }}
15+
style={{ display: 'block', height: space['5'], objectFit: 'contain', width: space['5'] }}
1616
/>
1717
);
1818
}
@@ -123,10 +123,10 @@ export function BrandIcons() {
123123
return (
124124
<div style={{ alignItems: 'center', display: 'flex', gap: 12 }}>
125125
<IconFrame aria-label='Apple'>
126-
<ProviderIcon provider='apple' />
126+
<ProviderLogo provider='apple' />
127127
</IconFrame>
128128
<IconFrame aria-label='GitHub'>
129-
<ProviderIcon provider='github' />
129+
<ProviderLogo provider='github' />
130130
</IconFrame>
131131
</div>
132132
);

‎packages/swingset/src/stories/section.stories.tsx‎

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,24 @@ import { Badge } from '@clerk/ui/mosaic/components/badge';
33
import { Button } from '@clerk/ui/mosaic/components/button';
44
import { Icon, IconFrame } from '@clerk/ui/mosaic/components/icon';
55
import { Section } from '@clerk/ui/mosaic/components/section';
6-
import * as stylex from '@stylexjs/stylex';
6+
import { space } from '@clerk/ui/mosaic/styles';
77

88
import type { StoryMeta } from '@/lib/types';
99

1010
export { default as __source } from './section.stories?raw';
1111

1212
const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
1313

14-
const styles = stylex.create({
15-
providerMedia: {
16-
backgroundColor: 'var(--cl-color-background)',
17-
borderColor: 'light-dark(var(--cl-color-border-faded), var(--cl-color-background))',
18-
borderRadius: 'var(--cl-radius-lg)',
19-
borderStyle: 'solid',
20-
borderWidth: '1px',
21-
},
22-
providerIcon: {
23-
display: 'block',
24-
height: '20px',
25-
width: '20px',
26-
},
27-
});
28-
29-
function ProviderIcon({ provider }: { provider: string }) {
14+
function ProviderMedia({ provider }: { provider: string }) {
3015
return (
31-
<Section.Media
32-
size='lg'
33-
{...stylex.props(styles.providerMedia)}
34-
>
35-
<img
36-
alt=''
37-
src={providerIconUrl(provider)}
38-
{...stylex.props(styles.providerIcon)}
39-
/>
16+
<Section.Media size='lg'>
17+
<IconFrame>
18+
<img
19+
alt=''
20+
src={providerIconUrl(provider)}
21+
style={{ display: 'block', height: space['5'], width: space['5'] }}
22+
/>
23+
</IconFrame>
4024
</Section.Media>
4125
);
4226
}
@@ -308,7 +292,7 @@ export function ConnectedAccounts() {
308292
<Section.Group>
309293
<Section.Row>
310294
<Section.Item>
311-
<ProviderIcon provider='google' />
295+
<ProviderMedia provider='google' />
312296
<Section.Content>
313297
<Section.Label>Google</Section.Label>
314298
<Section.Description>test@google.com</Section.Description>
@@ -328,7 +312,7 @@ export function ConnectedAccounts() {
328312
</Section.Row>
329313
<Section.Row>
330314
<Section.Item>
331-
<ProviderIcon provider='apple' />
315+
<ProviderMedia provider='apple' />
332316
<Section.Content>
333317
<Section.Label>Apple</Section.Label>
334318
</Section.Content>

‎packages/ui/src/mosaic/user-profile/__tests__/user-profile-profile-panel.view.test.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,20 @@ describe('UserProfileProfilePanelView', () => {
101101
expect(onDeleteAccount).toHaveBeenCalledOnce();
102102
});
103103

104+
it('renders provider images in icon frames', () => {
105+
const { container } = renderView({
106+
connectedAccounts: [{ id: 'google', provider: 'Google', iconUrl: '/google.svg' }],
107+
web3Wallets: [{ id: 'metamask', provider: 'MetaMask', iconUrl: '/metamask.svg' }],
108+
});
109+
110+
const frames = container.querySelectorAll('.cl-icon-frame');
111+
const images = container.querySelectorAll('img');
112+
expect(frames).toHaveLength(2);
113+
expect(frames[0]).toContainElement(images[0]);
114+
expect(frames[1]).toContainElement(images[1]);
115+
frames.forEach(frame => expect(frame.closest('.cl-section-media')).toHaveAttribute('data-size', 'lg'));
116+
});
117+
104118
it('renders Web3 wallets and forwards wallet actions', async () => {
105119
const onConnectWeb3Wallet = vi.fn();
106120
const onSetPrimaryWeb3Wallet = vi.fn();

‎packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as stylex from '@stylexjs/stylex';
22

33
import { Button } from '../components/button';
4-
import { Icon } from '../components/icon';
4+
import { Icon, IconFrame } from '../components/icon';
55
import { Section } from '../components/section';
66
import type { UserProfileMenuAction } from './user-profile-action-menu';
77
import { UserProfileActionMenu } from './user-profile-action-menu';
@@ -46,15 +46,14 @@ export function UserProfileConnectedAccountsSectionView({
4646
<Section.Row key={account.id}>
4747
<Section.Item>
4848
{account.iconUrl ? (
49-
<Section.Media
50-
size='xl'
51-
{...stylex.props(styles.providerMedia)}
52-
>
53-
<img
54-
alt=''
55-
src={account.iconUrl}
56-
{...stylex.props(styles.providerIcon)}
57-
/>
49+
<Section.Media size='lg'>
50+
<IconFrame>
51+
<img
52+
alt=''
53+
src={account.iconUrl}
54+
{...stylex.props(styles.providerIcon)}
55+
/>
56+
</IconFrame>
5857
</Section.Media>
5958
) : null}
6059
<Section.Content>

‎packages/ui/src/mosaic/user-profile/user-profile-profile-panel.styles.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,6 @@ export const styles = stylex.create({
99
display: 'flex',
1010
minWidth: 0,
1111
},
12-
providerMedia: {
13-
borderColor: 'light-dark(var(--cl-color-border-faded), var(--cl-color-background))',
14-
borderRadius: 'var(--cl-radius-lg)',
15-
borderStyle: 'solid',
16-
borderWidth: '1px',
17-
backgroundColor: 'var(--cl-color-background)',
18-
},
1912
providerIcon: {
2013
display: 'block',
2114
height: space['5'],

‎packages/ui/src/mosaic/user-profile/user-profile-web3-wallets-section.view.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as stylex from '@stylexjs/stylex';
22

33
import { Badge } from '../components/badge';
44
import { Button } from '../components/button';
5-
import { Icon } from '../components/icon';
5+
import { Icon, IconFrame } from '../components/icon';
66
import { Section } from '../components/section';
77
import type { UserProfileMenuAction } from './user-profile-action-menu';
88
import { UserProfileActionMenu } from './user-profile-action-menu';
@@ -75,15 +75,14 @@ export function UserProfileWeb3WalletsSectionView({
7575
<Section.Row key={wallet.id}>
7676
<Section.Item>
7777
{wallet.iconUrl ? (
78-
<Section.Media
79-
size='xl'
80-
{...stylex.props(styles.providerMedia)}
81-
>
82-
<img
83-
alt=''
84-
src={wallet.iconUrl}
85-
{...stylex.props(styles.providerIcon)}
86-
/>
78+
<Section.Media size='lg'>
79+
<IconFrame>
80+
<img
81+
alt=''
82+
src={wallet.iconUrl}
83+
{...stylex.props(styles.providerIcon)}
84+
/>
85+
</IconFrame>
8786
</Section.Media>
8887
) : null}
8988
<Section.Content>

0 commit comments

Comments
 (0)