feat: add "more..." button to show additional projects

attarchi · attarchi · commit e4946bdff8da · 2025-07-19T20:48:49.000+03:00
- Show only first 3 projects initially when more than 3 exist
- Add link-style button positioned in bottom right corner
- Reveal all remaining projects with staggered animations when clicked
- Hide button after expansion
- Maintain responsive grid layouts and existing animations
diff --git a/src/components/sections/FeaturedProjects.tsx b/src/components/sections/FeaturedProjects.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { motion } from 'framer-motion';
-import { ProjectCard } from '@/components/micro';
-import { projectStaggerVariants } from '@/lib';
+import { useState } from 'react';
+import { ProjectCard, Button } from '@/components/micro';
+import { projectStaggerVariants, projectCardVariants } from '@/lib';
 import { type Project } from '@/content';
 
 export interface FeaturedProjectsProps {
@@ -20,8 +21,15 @@ function getGridClasses(projectCount: number): string {
 }
 
 export function FeaturedProjects({ projects }: FeaturedProjectsProps) {
+  const [showAllProjects, setShowAllProjects] = useState(false);
   const projectCount = projects?.length || 0;
   const gridClasses = getGridClasses(projectCount);
+  
+  // Show only first 3 projects initially, or all if less than 4
+  const initialProjects = projects?.slice(0, 3) || [];
+  const remainingProjects = projects?.slice(3) || [];
+  const shouldShowMoreButton = projectCount > 3;
+  const displayedProjects = showAllProjects ? projects : initialProjects;
 
   return (
     <section
@@ -37,23 +45,60 @@ export function FeaturedProjects({ projects }: FeaturedProjectsProps) {
           Featured Projects
         </h2>
         
-        <motion.div 
-          className={`${gridClasses} gap-8 mt-12`}
-          data-testid="projects-grid"
-          variants={projectStaggerVariants}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.3 }}
-        >
-          {projects?.map((project, index) => (
-            <ProjectCard
-              key={index}
-              title={project.title}
-              description={project.description}
-              technologies={project.technologies}
-            />
-          ))}
-        </motion.div>
+        {!showAllProjects ? (
+          <motion.div 
+            className={`${gridClasses} gap-8 mt-12`}
+            data-testid="projects-grid"
+            variants={projectStaggerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.3 }}
+          >
+            {initialProjects?.map((project, index) => (
+              <ProjectCard
+                key={index}
+                title={project.title}
+                description={project.description}
+                technologies={project.technologies}
+              />
+            ))}
+          </motion.div>
+        ) : (
+          <motion.div 
+            className={`${gridClasses} gap-8 mt-12`}
+            data-testid="projects-grid"
+            variants={projectStaggerVariants}
+            initial="hidden"
+            animate="visible"
+          >
+            {projects?.map((project, index) => (
+              <ProjectCard
+                key={index}
+                title={project.title}
+                description={project.description}
+                technologies={project.technologies}
+              />
+            ))}
+          </motion.div>
+        )}
+
+        {shouldShowMoreButton && !showAllProjects && (
+          <motion.div
+            className="flex justify-end mt-8"
+            data-testid="more-button-container"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+          >
+            <Button
+              variant="link"
+              onClick={() => setShowAllProjects(true)}
+              data-testid="more-projects-button"
+            >
+              more...
+            </Button>
+          </motion.div>
+        )}
       </div>
     </section>
   );
diff --git a/src/components/sections/__tests__/FeaturedProjects.test.tsx b/src/components/sections/__tests__/FeaturedProjects.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { FeaturedProjects } from "../FeaturedProjects";
 
 jest.mock("@/components/micro");
@@ -60,6 +60,126 @@ describe("FeaturedProjects", () => {
     expect(projectCards).toHaveLength(0);
   });
 
+  describe("More Projects Functionality", () => {
+    const manyProjects = [
+      {
+        title: "Test Project 1",
+        description: "Test description 1",
+        technologies: ["React", "Node.js"]
+      },
+      {
+        title: "Test Project 2", 
+        description: "Test description 2",
+        technologies: ["Next.js", "PostgreSQL"]
+      },
+      {
+        title: "Test Project 3",
+        description: "Test description 3",
+        technologies: ["Vue", "MongoDB"]
+      },
+      {
+        title: "Test Project 4",
+        description: "Test description 4",
+        technologies: ["Angular", "MySQL"]
+      },
+      {
+        title: "Test Project 5",
+        description: "Test description 5",
+        technologies: ["Svelte", "Redis"]
+      }
+    ];
+
+    it("shows only first 3 projects initially when more than 3 projects exist", () => {
+      render(<FeaturedProjects projects={manyProjects} />);
+      
+      const projectCards = screen.getAllByTestId("project-card");
+      expect(projectCards).toHaveLength(3);
+      
+      // Check that only first 3 projects are visible
+      expect(screen.getByText("Test Project 1")).toBeInTheDocument();
+      expect(screen.getByText("Test Project 2")).toBeInTheDocument();
+      expect(screen.getByText("Test Project 3")).toBeInTheDocument();
+      expect(screen.queryByText("Test Project 4")).not.toBeInTheDocument();
+      expect(screen.queryByText("Test Project 5")).not.toBeInTheDocument();
+    });
+
+    it("shows 'more...' button when more than 3 projects exist", () => {
+      render(<FeaturedProjects projects={manyProjects} />);
+      
+      const moreButton = screen.getByRole("button", { name: /more/i });
+      expect(moreButton).toBeInTheDocument();
+      expect(moreButton).toHaveTextContent("more...");
+    });
+
+    it("does not show 'more...' button when 3 or fewer projects exist", () => {
+      const threeProjects = manyProjects.slice(0, 3);
+      render(<FeaturedProjects projects={threeProjects} />);
+      
+      const moreButton = screen.queryByRole("button", { name: /more/i });
+      expect(moreButton).not.toBeInTheDocument();
+    });
+
+    it("shows all projects when 'more...' button is clicked", () => {
+      render(<FeaturedProjects projects={manyProjects} />);
+      
+      const moreButton = screen.getByRole("button", { name: /more/i });
+      fireEvent.click(moreButton);
+      
+      const projectCards = screen.getAllByTestId("project-card");
+      expect(projectCards).toHaveLength(5);
+      
+      // Check that all projects are now visible
+      expect(screen.getByText("Test Project 1")).toBeInTheDocument();
+      expect(screen.getByText("Test Project 2")).toBeInTheDocument();
+      expect(screen.getByText("Test Project 3")).toBeInTheDocument();
+      expect(screen.getByText("Test Project 4")).toBeInTheDocument();
+      expect(screen.getByText("Test Project 5")).toBeInTheDocument();
+    });
+
+    it("hides 'more...' button after it is clicked", () => {
+      render(<FeaturedProjects projects={manyProjects} />);
+      
+      const moreButton = screen.getByRole("button", { name: /more/i });
+      fireEvent.click(moreButton);
+      
+      expect(screen.queryByRole("button", { name: /more/i })).not.toBeInTheDocument();
+    });
+
+    it("shows additional projects with animations when 'more...' button is clicked", () => {
+      render(<FeaturedProjects projects={manyProjects} />);
+      
+      const moreButton = screen.getByRole("button", { name: /more/i });
+      fireEvent.click(moreButton);
+      
+      // Additional projects should be rendered with motion.div wrapper
+      const projectCards = screen.getAllByTestId("project-card");
+      expect(projectCards).toHaveLength(5);
+      
+      // The additional projects (4th and 5th) should be wrapped in motion.div
+      const motionDivs = document.querySelectorAll('[data-testid="project-card"]');
+      expect(motionDivs.length).toBe(5);
+    });
+
+    it("positions 'more...' button in bottom right corner", () => {
+      render(<FeaturedProjects projects={manyProjects} />);
+      
+      const moreButton = screen.getByRole("button", { name: /more/i });
+      const buttonContainer = moreButton.closest('[data-testid="more-button-container"]');
+      
+      expect(buttonContainer).toBeInTheDocument();
+      expect(buttonContainer).toHaveClass("flex", "justify-end", "mt-8");
+    });
+
+    it("uses link variant for 'more...' button", () => {
+      render(<FeaturedProjects projects={manyProjects} />);
+      
+      const moreButton = screen.getByRole("button", { name: /more/i });
+      expect(moreButton).toHaveAttribute("data-testid", "more-projects-button");
+      // Since Button is mocked, we can't test the actual classes
+      // The variant="link" prop is passed to the Button component
+    });
+  });
+
   describe("Dynamic Grid Layout", () => {
     it("uses 2 columns layout for less than 3 projects", () => {
       const oneProject = [mockProjects[0]];
