feat: add big card layout

src/Avatar/Avatar.tsx

@@ -17,10 +17,6 @@ type AvatarProps = {
   isLoading?: boolean;
   maxHeight?: string | number;
   maxWidth?: string | number;
-  /**
-   * thumbnail size to fetch
-   */
-  size?: string;
   sx?: SxProps;
   url?: string;
   /**

src/Card/Card.stories.tsx

@@ -26,7 +26,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Example: Story = {
+export const Example = {
   args: {
     name: 'my card title',
     alt: 'my card title',

src/Card/CardThumbnail.tsx

@@ -12,19 +12,32 @@ export type CardThumbnailProps = {
   width?: number;
   minHeight: number;
   type?: DiscriminatedItem['type'];
+  minWidth?: string;
+  height?: string;
+  maxHeight?: string;
 };
 const CardThumbnail = ({
   thumbnail,
   alt,
   width,
   minHeight,
+  minWidth,
+  height,
+  maxHeight = '100%',
   type = ItemType.FOLDER,
 }: CardThumbnailProps): JSX.Element => {
   const theme = useTheme();
 
   if (thumbnail) {
     return (
-      <Thumbnail url={thumbnail} alt={alt} maxHeight='100%' maxWidth={width} />
+      <Thumbnail
+        url={thumbnail}
+        alt={alt}
+        height={height}
+        maxHeight={maxHeight}
+        maxWidth={width}
+        minWidth={minWidth}
+      />
     );
   }
 

src/Card/big/BigCard.stories.tsx

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+import { v4 } from 'uuid';
+
+import Grid2 from '@mui/material/Unstable_Grid2';
+
+import { BrowserRouter } from 'react-router-dom';
+
+import { ItemType } from '@graasp/sdk';
+
+import BigCard from './BigCard.js';
+
+const meta = {
+  title: 'Common/BigCard',
+  component: BigCard,
+
+  decorators: [
+    (story) => {
+      return <BrowserRouter>{story()}</BrowserRouter>;
+    },
+  ],
+  argTypes: {},
+} satisfies Meta<typeof BigCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    name: 'my card title',
+    tags: [
+      '6th grade at school',
+      'English',
+      'Mathematics',
+      'Taylor',
+      'Biology',
+      'French',
+      'Good',
+    ],
+    likeCount: 213,
+    type: ItemType.DOCUMENT,
+    image: '/test-assets/big_photo.jpg',
+    creator: {
+      name: 'Name Surname',
+      id: v4(),
+      avatar: '/test-assets/small_photo.jpg',
+    },
+    link: '/link',
+    description:
+      'Tempor volutpat eget varius nisl cursus. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Enim cursus ultrices in natoque. Faucibus porttitor posuere consequat congue aliquam. Sapien tempus blandit massa rhoncus',
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // card link
+    await expect(
+      document.querySelector(`a[href="${args.link}"]`),
+    ).toBeVisible();
+
+    // tags
+    args.tags!.map((t) => {
+      expect(canvas.getByText(t)).toBeVisible();
+    });
+
+    // creator
+    expect(canvas.getByText(args.creator!.name)).toBeVisible();
+
+    // likes
+    expect(canvas.getByText(args.likeCount!)).toBeVisible();
+
+    // name, description
+    expect(canvas.getByText(args.name)).toBeVisible();
+    expect(canvas.getByText(args.description!)).toBeVisible();
+
+    // img
+    await expect(
+      document.querySelector(`img[src="${args.image}"]`),
+    ).toBeVisible();
+  },
+} satisfies Story;
+
+export const LongTitleAndLiked = {
+  args: {
+    name: 'my card title that is very long because I want to show everything and have more lines',
+    tags: ['6th grade at school', 'English', 'Mathematics', 'Taylor'],
+    likeCount: 213,
+    type: ItemType.DOCUMENT,
+    image: '/test-assets/big_photo.jpg',
+    isLiked: true,
+    creator: {
+      name: 'Name Surname',
+      id: v4(),
+      avatar: '/test-assets/small_photo.jpg',
+    },
+    description:
+      'Tempor volutpat eget varius nisl cursus. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Enim cursus ultrices in natoque. Faucibus porttitor posuere consequat congue aliquam. Sapien tempus blandit massa rhoncus',
+  },
+} satisfies Story;
+
+export const OneTag = {
+  args: {
+    name: 'my card title that is very long because I want to show everything and have more lines',
+    tags: ['6th grade'],
+    likeCount: 213,
+    type: ItemType.DOCUMENT,
+    image: '/test-assets/big_photo.jpg',
+    isLiked: true,
+    creator: {
+      name: 'Name Surname',
+      id: v4(),
+      avatar: '/test-assets/small_photo.jpg',
+    },
+    description:
+      'Tempor volutpat eget varius nisl cursus. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Enim cursus ultrices in natoque. Faucibus porttitor posuere consequat congue aliquam. Sapien tempus blandit massa rhoncus',
+  },
+} satisfies Story;
+
+export const Smaller = {
+  args: {
+    name: 'my card title',
+    tags: ['6th grade at school', 'English', 'Mathematics', 'Taylor'],
+    likeCount: 213,
+    type: ItemType.DOCUMENT,
+    image: '/test-assets/big_photo.jpg',
+    creator: {
+      name: 'Name Surname',
+      id: v4(),
+      avatar: '/test-assets/small_photo.jpg',
+    },
+    height: 200,
+    numberOfLinesToShow: 2,
+    description:
+      'Tempor volutpat eget varius nisl cursus. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Enim cursus ultrices in natoque. Faucibus porttitor posuere consequat congue aliquam. Sapien tempus blandit massa rhoncus',
+  },
+} satisfies Story;
+
+export const Empty = {
+  args: {
+    name: 'my card title',
+    type: ItemType.DOCUMENT,
+  },
+  play: async ({ canvasElement }) => {
+    // no link
+    await expect(document.querySelector('#storybook-root a')).toBeNull();
+  },
+} satisfies Story;
+
+export const WithLink = {
+  args: {
+    id: 'card-id',
+    link: '/href',
+    name: 'my card title',
+    type: ItemType.DOCUMENT,
+  },
+  play: async ({ canvasElement }) => {
+    // link exists
+    await expect(document.querySelector('#storybook-root a')).toBeVisible();
+  },
+} satisfies Story;
+
+export const Grid = {
+  args: {
+    name: 'my card title',
+    tags: ['6th grade at school', 'English', 'Mathematics', 'Taylor'],
+    likeCount: 213,
+    type: ItemType.DOCUMENT,
+    image: '/test-assets/big_photo.jpg',
+    creator: {
+      name: 'Name Surname',
+      id: v4(),
+      avatar: '/test-assets/small_photo.jpg',
+    },
+    description:
+      'Tempor volutpat eget varius nisl cursus. Fusce cras commodo adipiscing dictumst gravida pharetra velit. Enim cursus ultrices in natoque. Faucibus porttitor posuere consequat congue aliquam. Sapien tempus blandit massa rhoncus',
+  },
+  render: (args) => {
+    return (
+      <Grid2 container spacing={1}>
+        <Grid2 sm={6} lg={4}>
+          <BigCard {...args} />
+        </Grid2>
+        <Grid2 sm={6} lg={4}>
+          <BigCard {...args} />
+        </Grid2>
+        <Grid2 sm={6} lg={4}>
+          <BigCard {...args} />
+        </Grid2>
+        <Grid2 xs={12}>
+          <BigCard {...args} />
+        </Grid2>
+      </Grid2>
+    );
+  },
+} satisfies Story;

src/Card/big/BigCard.tsx

@@ -0,0 +1,146 @@
+import { Box, Card as MuiCard, Stack, Typography } from '@mui/material';
+
+import { CSSProperties } from 'react';
+import { Link } from 'react-router-dom';
+
+import { DiscriminatedItem, UUID } from '@graasp/sdk';
+
+import Avatar from '@/Avatar/Avatar.js';
+import { useMobileView } from '@/hooks/useMobileView.js';
+
+import { CollapsibleText } from '../../CollapsibleText/CollapsibleText.js';
+import CardThumbnail from '../CardThumbnail.js';
+import { LikeCounterButton } from './LikeCounterButton.js';
+import { TagCarousel } from './TagCarousel.js';
+
+type CardProps = {
+  name: string;
+  id?: string;
+  likeCount?: number;
+  tags?: string[];
+  type: DiscriminatedItem['type'];
+  image?: string;
+  height?: number;
+  description?: string;
+  numberOfLinesToShow?: number;
+  isLiked?: boolean;
+  link?: string;
+  creator?: { name: string; id: UUID; avatar?: string; link?: string };
+};
+
+const LinkWrapper = ({
+  to,
+  style,
+  children,
+}: {
+  children: JSX.Element;
+  to?: string;
+  style?: CSSProperties;
+}): JSX.Element => {
+  if (to) {
+    return (
+      <Link to={to} style={style}>
+        {children}
+      </Link>
+    );
+  }
+  return children;
+};
+
+const BigCard = ({
+  id,
+  creator,
+  name,
+  image,
+  link,
+  description,
+  tags,
+  type,
+  likeCount = 0,
+  height = 300,
+  isLiked = false,
+  numberOfLinesToShow = 7,
+}: CardProps): JSX.Element => {
+  const { isMobile } = useMobileView();
+
+  // merge name and description together
+  // so we can count name and description in the same line count and show the full title
+  const text = `<h2>${name}</h2>${description ?? ''}`;
+
+  return (
+    <MuiCard id={id}>
+      <Stack height={height} direction='row' gap={2} alignItems='center' mr={1}>
+        <Box style={{ height: '100%', minWidth: '30%' }}>
+          <LinkWrapper to={link}>
+            <Stack height='100%'>
+              <CardThumbnail
+                minHeight={height}
+                thumbnail={image}
+                alt={name}
+                type={type}
+              />
+            </Stack>
+          </LinkWrapper>
+        </Box>
+        <Stack
+          gap={1}
+          py={1}
+          minWidth={0}
+          justifyContent='space-between'
+          height='100%'
+        >
+          <Stack gap={1}>
+            <TagCarousel tags={tags} />
+
+            <Box
+              sx={{
+                textDecoration: 'unset',
+                color: 'unset',
+                '&:hover': { cursor: 'pointer' },
+              }}
+            >
+              <LinkWrapper
+                to={link}
+                style={{
+                  textDecoration: 'unset',
+                  color: 'unset',
+                  cursor: 'pointer !important',
+                }}
+              >
+                <CollapsibleText
+                  collapsed
+                  numberOfLinesToShow={numberOfLinesToShow}
+                  content={text}
+                  style={{ cursor: 'pointer' }}
+                ></CollapsibleText>
+              </LinkWrapper>
+            </Box>
+          </Stack>
+          <Stack direction='row' justifyContent='space-between'>
+            <LikeCounterButton likeCount={likeCount} isLiked={isLiked} />
+            {creator && (
+              <LinkWrapper
+                to={creator.link}
+                style={{
+                  textDecoration: 'unset',
+                  color: 'unset',
+                }}
+              >
+                <Stack direction='row' alignItems='center' gap={1}>
+                  {!isMobile && <Typography>{creator.name}</Typography>}
+                  <Avatar
+                    alt={creator.name}
+                    maxHeight={40}
+                    maxWidth={40}
+                    url={creator.avatar}
+                  />
+                </Stack>
+              </LinkWrapper>
+            )}
+          </Stack>
+        </Stack>
+      </Stack>
+    </MuiCard>
+  );
+};
+export default BigCard;