Thanks to visit codestin.com
Credit goes to github.com

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

+1
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

+81-1
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

+38-24
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)