refactor: Rename 'description' to 'about' in PersonCard component and update related tests

- Changed 'description' field to 'about' in the PersonCard component and its associated tests
- Updated stories to reflect the new 'about' prop for consistency across components

Author: agjs

src/Components/PersonCard/PersonCard.stories.tsx

@@ -27,7 +27,7 @@ const meta: Meta<typeof PersonCard> = {
     showSocialLinks: {
       control: { type: "boolean" }
     },
-    showDescription: {
+    about: {
       control: { type: "boolean" }
     },
     maxTags: {

src/Components/PersonCard/PersonCard.test.tsx

@@ -7,12 +7,11 @@ import { IPerson, IPersonAction } from "./types";
 
 const mockPerson: IPerson = {
   id: 1,
-  firstName: "Ada",
-  lastName: "Lovelace",
+  name: "Ada Lovelace",
   username: "ada_lovelace",
   email: "ada@lovelace.com",
   avatar: "https://example.com/avatar.jpg",
-  description: "Pioneer in computer science and mathematics",
+  about: "Pioneer in computer science and mathematics",
   role: "Software Engineer",
   location: "London, UK",
   badge: {
@@ -183,19 +182,24 @@ describe("PersonCard", () => {
   });
 
   it("hides sections based on props", () => {
+    const personWithoutAbout = {
+      ...mockPerson,
+      about: undefined
+    };
+
     render(
       <PersonCard
-        person={mockPerson}
+        person={personWithoutAbout}
         showTags={false}
         showSocialLinks={false}
-        showDescription={false}
       />
     );
 
     expect(screen.queryByText("JavaScript")).not.toBeInTheDocument();
     expect(
       screen.queryByText("Pioneer in computer science and mathematics")
     ).not.toBeInTheDocument();
+
     expect(screen.queryByTitle("github")).not.toBeInTheDocument();
   });
 
@@ -211,8 +215,7 @@ describe("PersonCard", () => {
   it("handles missing optional fields gracefully", () => {
     const minimalPerson: IPerson = {
       id: 1,
-      firstName: "John",
-      lastName: "Doe"
+      name: "John Doe"
     };
 
     render(<PersonCard person={minimalPerson} />);
@@ -285,7 +288,7 @@ describe("PersonCard", () => {
       "This is a very long description that should be truncated";
     const personWithLongDescription = {
       ...mockPerson,
-      description: longDescription
+      about: longDescription
     };
 
     render(
@@ -319,7 +322,7 @@ describe("PersonCardSkeleton", () => {
       <PersonCardSkeleton
         showTags={false}
         showSocialLinks={false}
-        showDescription={false}
+        about={false}
       />
     );