admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor/dropdown menu (#279)

Browse Source 
* Created dropdown menu UI component with story

* Added all components for composing Dropdown Menus

* Better component naming and reordered stories

* Solved comment thread from review
This commit is contained in:
Lucas Bordeau
2023-06-13 15:15:19 +02:00
committed by GitHub
parent 16e1b862d9
commit 3a719001de
15 changed files with 614 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
front/src/modules/users/components/UserAvatar.tsx → front/src/modules/users/components/Avatar.tsx
View File

@ -6,12 +6,13 @@ type OwnProps = {
avatarUrl: string | null | undefined;
size: number;
placeholderLetter: string;
type?: 'squared' | 'rounded';
};
export const StyledUserAvatar = styled.div<Omit<OwnProps, 'placeholderLetter'>>`
export const StyledAvatar = styled.div<Omit<OwnProps, 'placeholderLetter'>>`
width: ${(props) => props.size}px;
height: ${(props) => props.size}px;
border-radius: 50%;
border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
background-image: url(${(props) =>
isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
background-color: ${(props) =>
@ -46,16 +47,21 @@ export const StyledPlaceholderLetter = styled.div<StyledPlaceholderLetterProps>`
color: ${(props) => props.theme.text80};
`;
export function UserAvatar({ avatarUrl, size, placeholderLetter }: OwnProps) {
export function Avatar({
avatarUrl,
size,
placeholderLetter,
type = 'squared',
}: OwnProps) {
const noAvatarUrl = !isNonEmptyString(avatarUrl);
return (
<StyledUserAvatar avatarUrl={avatarUrl} size={size}>
<StyledAvatar avatarUrl={avatarUrl} size={size} type={type}>
{noAvatarUrl && (
<StyledPlaceholderLetter size={size}>
{placeholderLetter}
</StyledPlaceholderLetter>
)}
</StyledUserAvatar>
</StyledAvatar>
);
}

36
front/src/modules/users/components/__stories__/UserAvatar.stories.tsx → front/src/modules/users/components/__stories__/Avatar.stories.tsx
View File

@ -2,39 +2,49 @@ import type { Meta, StoryObj } from '@storybook/react';
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
import { UserAvatar } from '../UserAvatar';
import { Avatar } from '../Avatar';
const meta: Meta<typeof UserAvatar> = {
title: 'Users/UserAvatar',
component: UserAvatar,
const meta: Meta<typeof Avatar> = {
title: 'Components/Common/Avatar',
component: Avatar,
};
export default meta;
type Story = StoryObj<typeof UserAvatar>;
type Story = StoryObj<typeof Avatar>;
const avatarUrl =
'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
export const Size40: Story = {
export const Rounded: Story = {
render: getRenderWrapperForComponent(
<UserAvatar avatarUrl={avatarUrl} size={40} placeholderLetter="L" />,
<Avatar
avatarUrl={avatarUrl}
size={16}
placeholderLetter="L"
type="rounded"
/>,
),
};
export const Size32: Story = {
export const Squared: Story = {
render: getRenderWrapperForComponent(
<UserAvatar avatarUrl={avatarUrl} size={32} placeholderLetter="L" />,
<Avatar
avatarUrl={avatarUrl}
size={16}
placeholderLetter="L"
type="squared"
/>,
),
};
export const Size16: Story = {
export const NoAvatarPictureRounded: Story = {
render: getRenderWrapperForComponent(
<UserAvatar avatarUrl={avatarUrl} size={16} placeholderLetter="L" />,
<Avatar avatarUrl={''} size={16} placeholderLetter="L" type="rounded" />,
),
};
export const NoAvatarPicture: Story = {
export const NoAvatarPictureSquared: Story = {
render: getRenderWrapperForComponent(
<UserAvatar avatarUrl={''} size={16} placeholderLetter="L" />,
<Avatar avatarUrl={''} size={16} placeholderLetter="L" type="squared" />,
),
};