Add description to the UI (#72)

* Update types.d.ts

* Update ProjectCard.tsx

* Update ProjectCard.tsx

* Update src/components/ProjectCard.tsx

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

* Update ProjectCard.test.tsx

* Update ProjectGrid.test.tsx

* Update ProjectGrid.test.tsx

* Update App.test.tsx (#73)

* Update App.test.tsx

* Update App.test.tsx

---------

Co-authored-by: gstraccini[bot] <150967461+gstraccini[bot]@users.noreply.github.com>
Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

src/components/ProjectCard.tsx

@@ -55,12 +55,19 @@ const LinkButton = styled.a`
   }
 `;
 
+const Description = styled.p`
+  margin: 0;
+  font-size: 1rem;
+  color: #000000;
+`;
+
 /**
  * A functional component that renders a project card displaying project details.
  *
  * @component
  * @param {Object} props - The properties for the ProjectCard component.
  * @param {string} props.title - The title of the project.
+ * @param {string} props.description - The description of the project.
  * @param {string} props.slug - The unique identifier for the project, used in URLs.
  * @param {number} props.apiVersion - The version of the API to be displayed.
  *
@@ -72,7 +79,7 @@ const LinkButton = styled.a`
  *
  * @throws {Error} Throws an error if any required prop is missing.
  */
-const ProjectCard: React.FC<Project> = ({ title, slug, apiVersion }) => {
+const ProjectCard: React.FC<Project> = ({ title, description, slug, apiVersion }) => {
   const imageUrl = `project-images/${slug}.png`;
   const uiUrl = `https://apibr.com/ui/${slug}`;
   const swaggerUrl = `https://apibr.com/${slug}/swagger`;
@@ -94,6 +101,7 @@ const ProjectCard: React.FC<Project> = ({ title, slug, apiVersion }) => {
             API (v{apiVersion})
           </LinkButton>
         </Links>
+        <Description>{description}</Description>
       </Content>
     </Card>
   );

src/types.d.ts

@@ -1,5 +1,6 @@
 export interface Project {
   title: string;
+  description: string;
   slug: string;
   apiVersion: number;
 }

test/App.test.tsx

@@ -5,14 +5,16 @@ import App from '../src/App';
 describe('App Component', () => {
   it('renders the Header component', () => {
     render(<App />);
-    const headerElement = screen.getByText(/API BR - Catalog/i);
+    const headerElement = screen.getByText(/^API BR - Catalog$/i);
     expect(headerElement).toBeInTheDocument();
   });
 
   it('renders the ProjectGrid component with projects', () => {
     render(<App />);
-    const projectTitle = screen.getByText(/Sports Agenda/i);
-    expect(projectTitle).toBeInTheDocument();
+    const projectTitleVagasAggregator = screen.getByText(/^Vagas Aggregator$/i);
+    expect(projectTitleVagasAggregator).toBeInTheDocument();
+    const projectTitleSportsAgenda = screen.getByText(/^Sports Agenda$/i);
+    expect(projectTitleSportsAgenda).toBeInTheDocument();
   });
 
   it('renders the Footer component', () => {

test/components/ProjectCard.test.tsx

@@ -5,6 +5,7 @@ import { Project } from "../../src/types";
 describe("ProjectCard Component", () => {
   const mockProject: Project = {
     title: "Sample Project",
+    description: "Sample project description",
     slug: "sample-project",
     apiVersion: 1,
   };
@@ -49,6 +50,12 @@ describe("ProjectCard Component", () => {
     );
   });
 
+  it("renders the project description", () => {
+    render(<ProjectCard {...mockProject} />);
+    const descriptionElement = screen.getByText(mockProject.description);
+    expect(descriptionElement).toBeInTheDocument();
+  });
+
   it("applies hover styles correctly", () => {
     render(<ProjectCard {...mockProject} />);    
     const cardElement = screen.getByRole("img", { name: mockProject.title }).closest("div");

test/components/ProjectGrid.test.tsx

@@ -2,40 +2,34 @@ import { render, screen } from "@testing-library/react";
 import ProjectGrid from "../../src/components/ProjectGrid";
 import { Project } from "../../src/types";
 
-// Mock data for testing
 const mockProjects: Project[] = [
-  { title: "Project 1", slug: "project-1", apiVersion: 1 },
-  { title: "Project 2", slug: "project-2", apiVersion: 1 },
-  { title: "Project 3", slug: "project-3", apiVersion: 1 },
+  { title: "Project 1", description: "Project 1 description", slug: "project-1", apiVersion: 1 },
+  { title: "Project 2", description: "Project 2 description", slug: "project-2", apiVersion: 1 },
+  { title: "Project 3", description: "Project 3 description", slug: "project-3", apiVersion: 1 },
 ];
 
 describe("ProjectGrid Component", () => {
   it("renders a grid of project cards", () => {
     render(<ProjectGrid projects={mockProjects} />);
 
-    // Check that the grid container is rendered
     const gridElement = screen.getByTestId("project-grid");
     expect(gridElement).toBeInTheDocument();
 
-    // Check that the correct number of ProjectCard components are rendered
     const projectCards = screen.getAllByTestId("project-card");
     expect(projectCards.length).toBe(mockProjects.length);
 
-    // Check that each ProjectCard has the correct title
     mockProjects.forEach((project, index) => {
       expect(projectCards[index]).toHaveTextContent(project.title);
+      expect(projectCards[index]).toHaveTextContent(project.description);
     });
   });
 
   it("applies correct grid styles", () => {
     render(<ProjectGrid projects={mockProjects} />);
 
-    // Check that the grid container has the correct display and gap
     const gridElement = screen.getByTestId("project-grid");
     expect(gridElement).toHaveStyle("display: grid");
     expect(gridElement).toHaveStyle("gap: 16px");
-
-    // Check that grid-template-columns is applied with auto-fit and minmax
     expect(gridElement).toHaveStyle(
       "grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"
     );