Skip to content

Commit badebc7

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: add new avatar component (#15882)
Related to #14997 - Add a new `Avatar` component based on the [new avatar design](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=xqxOSUk48GvDsjGK-0). - Deprecate existent `Avatar` component.
1 parent 468ffd9 commit badebc7

File tree

33 files changed

+420
-161
lines changed

33 files changed

+420
-161
lines changed

‎site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"@mui/system": "5.16.7",
5151
"@mui/utils": "5.16.6",
5252
"@mui/x-tree-view": "7.18.0",
53+
"@radix-ui/react-avatar": "1.1.2",
5354
"@radix-ui/react-dialog": "1.1.2",
5455
"@radix-ui/react-label": "2.1.0",
5556
"@radix-ui/react-slider": "1.2.1",

‎site/pnpm-lock.yaml

Lines changed: 81 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/components/Avatar/Avatar.stories.tsx

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,73 @@
1-
import PauseIcon from "@mui/icons-material/PauseOutlined";
21
import type { Meta, StoryObj } from "@storybook/react";
3-
import { Avatar, AvatarIcon } from "./Avatar";
2+
import { Avatar, AvatarFallback, AvatarImage } from "./Avatar";
43

54
const meta: Meta<typeof Avatar> = {
65
title: "components/Avatar",
76
component: Avatar,
7+
args: {
8+
children: <AvatarImage src="https://github.com/kylecarbs.png" />,
9+
},
810
};
911

1012
export default meta;
1113
type Story = StoryObj<typeof Avatar>;
1214

13-
export const WithLetter: Story = {
14-
args: {
15-
children: "Coder",
16-
},
15+
export const ImageLgSize: Story = {
16+
args: { size: "lg" },
1717
};
1818

19-
export const WithLetterXL = {
19+
export const ImageDefaultSize: Story = {};
20+
21+
export const ImageSmSize: Story = {
22+
args: { size: "sm" },
23+
};
24+
25+
export const IconLgSize: Story = {
2026
args: {
21-
children: "Coder",
22-
size: "xl",
27+
size: "lg",
28+
variant: "icon",
29+
children: (
30+
<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
31+
),
2332
},
2433
};
2534

26-
export const WithImage = {
35+
export const IconDefaultSize: Story = {
2736
args: {
28-
src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
37+
variant: "icon",
38+
children: (
39+
<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
40+
),
2941
},
3042
};
3143

32-
export const WithImageXL = {
44+
export const IconSmSize: Story = {
3345
args: {
34-
src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
35-
size: "xl",
46+
variant: "icon",
47+
size: "sm",
48+
children: (
49+
<AvatarImage src="https://em-content.zobj.net/source/apple/391/billed-cap_1f9e2.png" />
50+
),
3651
},
3752
};
3853

39-
export const WithMuiIcon = {
54+
export const FallbackLgSize: Story = {
4055
args: {
41-
background: true,
42-
children: <PauseIcon />,
56+
size: "lg",
57+
58+
children: <AvatarFallback>AR</AvatarFallback>,
4359
},
4460
};
4561

46-
export const WithMuiIconXL = {
62+
export const FallbackDefaultSize: Story = {
4763
args: {
48-
background: true,
49-
children: <PauseIcon />,
50-
size: "xl",
64+
children: <AvatarFallback>AR</AvatarFallback>,
5165
},
5266
};
5367

54-
export const WithAvatarIcon = {
68+
export const FallbackSmSize: Story = {
5569
args: {
56-
background: true,
57-
children: <AvatarIcon src="/icon/database.svg" alt="Database" />,
70+
size: "sm",
71+
children: <AvatarFallback>AR</AvatarFallback>,
5872
},
5973
};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy