Lucas/t 366 on comment drawer when i have comments on the selected (#201)

* Fixed right drawer width and shared in theme * Added date packages and tooltip * Added date utils and tests * Added comment thread components * Fixed comment chip * Fix from rebase * Fix from rebase * Fix margin right * Fixed CSS and graphql
2023-06-07 12:48:44 +02:00
parent b1bf050936
commit 5e2673a2a4
30 changed files with 688 additions and 77 deletions
--- a/front/src/modules/users/components/UserAvatar.tsx
+++ b/front/src/modules/users/components/UserAvatar.tsx
@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+
+import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
+
+type OwnProps = {
+  avatarUrl: string | null | undefined;
+  size: number;
+  placeholderLetter: string;
+};
+
+export const StyledUserAvatar = styled.div<Omit<OwnProps, 'placeholderLetter'>>`
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 50%;
+  background-image: url(${(props) =>
+    isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
+  background-color: ${(props) =>
+    !isNonEmptyString(props.avatarUrl)
+      ? props.theme.tertiaryBackground
+      : 'none'};
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+
+  display: flex;
+  align-items: center;
+
+  justify-content: center;
+`;
+
+type StyledPlaceholderLetterProps = {
+  size: number;
+};
+
+export const StyledPlaceholderLetter = styled.div<StyledPlaceholderLetterProps>`
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+
+  font-size: 12px;
+  font-weight: 500;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: ${(props) => props.theme.text80};
+`;
+
+export function UserAvatar({ avatarUrl, size, placeholderLetter }: OwnProps) {
+  const noAvatarUrl = !isNonEmptyString(avatarUrl);
+
+  return (
+    <StyledUserAvatar avatarUrl={avatarUrl} size={size}>
+      {noAvatarUrl && (
+        <StyledPlaceholderLetter size={size}>
+          {placeholderLetter}
+        </StyledPlaceholderLetter>
+      )}
+    </StyledUserAvatar>
+  );
+}
--- a/front/src/modules/users/components/stories/UserAvatar.stories.tsx
+++ b/front/src/modules/users/components/stories/UserAvatar.stories.tsx
@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { UserAvatar } from '../UserAvatar';
+
+const meta: Meta<typeof UserAvatar> = {
+  title: 'Components/User/UserAvatar',
+  component: UserAvatar,
+};
+
+export default meta;
+type Story = StoryObj<typeof UserAvatar>;
+
+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 = {
+  render: getRenderWrapperForComponent(
+    <UserAvatar avatarUrl={avatarUrl} size={40} placeholderLetter="L" />,
+  ),
+};
+
+export const Size32: Story = {
+  render: getRenderWrapperForComponent(
+    <UserAvatar avatarUrl={avatarUrl} size={32} placeholderLetter="L" />,
+  ),
+};
+
+export const Size16: Story = {
+  render: getRenderWrapperForComponent(
+    <UserAvatar avatarUrl={avatarUrl} size={16} placeholderLetter="L" />,
+  ),
+};
+
+export const NoAvatarPicture: Story = {
+  render: getRenderWrapperForComponent(
+    <UserAvatar avatarUrl={''} size={16} placeholderLetter="L" />,
+  ),
+};