feat(fuselage): CardGrid component

.changeset/unlucky-parents-pay.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): `CardGrid` component

packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx

@@ -0,0 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import React from 'react';
+
+import * as stories from './CardGrid.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[CardGrid Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
+});

packages/fuselage/src/components/CardGrid/CardGrid.stories.tsx

@@ -0,0 +1,60 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import { CardGrid } from '.';
+import { Button } from '../Button';
+import {
+  Card,
+  CardBody,
+  CardCol,
+  CardControls,
+  CardHeader,
+  CardTitle,
+} from '../Card';
+import { Icon } from '../Icon';
+
+export default {
+  title: 'Containers/CardGrid',
+  component: CardGrid,
+  parameters: {
+    backgrounds: { default: 'dark' },
+    layout: 'centered',
+    controls: { hideNoControlsWarning: true },
+  },
+} as ComponentMeta<typeof CardGrid>;
+
+const CardItem = (props: ComponentProps<typeof Card>) => (
+  <Card {...props}>
+    <CardCol>
+      <CardHeader>
+        <Icon name='address-book' size='x24' />
+        <CardTitle variant='h3' info='Heading info'>
+          Heading 3
+        </CardTitle>
+      </CardHeader>
+      <CardBody>
+        Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem
+        praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In
+        adipisci consequatur qui laudantium rem praesentium earum ut
+        consectetur.
+      </CardBody>
+    </CardCol>
+    <CardControls>
+      <Button medium primary>
+        Button
+      </Button>
+      <Button medium>Button</Button>
+    </CardControls>
+  </Card>
+);
+
+export const _CardGrid: ComponentStory<typeof CardGrid> = (
+  args: ComponentProps<typeof CardGrid>
+) => (
+  <CardGrid {...args} breakpoints={{ xs: 4, sm: 4, md: 4, lg: 3, xl: 3 }}>
+    {Array.from(new Array(9)).map((_, index) => (
+      <CardItem key={index} />
+    ))}
+  </CardGrid>
+);

packages/fuselage/src/components/CardGrid/CardGrid.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import Grid, { GridItem } from '../Grid';
+
+type CardGridProps = {
+  children: React.ReactNode;
+  breakpoints: ComponentProps<typeof GridItem>;
+};
+
+export const CardGrid = ({
+  children,
+  breakpoints,
+  ...props
+}: CardGridProps) => (
+  <Grid rcx-card-grid m={-8} {...props}>
+    {React.Children.map(children, (child) => (
+      <GridItem rcx-card-grid__item p={8} {...breakpoints}>
+        {child}
+      </GridItem>
+    ))}
+  </Grid>
+);