chore(unity-react-core): add person profile story and component

packages/unity-react-core/src/components/PersonProfile/PersonProfile.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PersonProfile, SocialMediaPlatform } from "./PersonProfile";
+import img from "@shared/assets/img/named/anon.png";
+
+const meta: Meta<typeof PersonProfile> = {
+  title: "Components/PersonProfile",
+  component: PersonProfile,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    name: {
+      control: "text",
+      description: "The full name of the person",
+    },
+    profession: {
+      control: "object",
+      description: "Professional title and department information",
+    },
+    description: {
+      control: "text",
+      description: "A brief description or bio of the person",
+    },
+    imageUrl: {
+      control: "text",
+      description: "URL for the profile image",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PersonProfile>;
+
+const mockSocialMedia = [
+  {
+    platform: SocialMediaPlatform.Facebook,
+    url: "https://example.com",
+  },
+  {
+    platform: SocialMediaPlatform.LinkedIn,
+    url: "https://example.com",
+  },
+  {
+    platform: SocialMediaPlatform.Twitter,
+    url: "https://example.com",
+  },
+];
+
+export const Default: Story = {
+  args: {
+    name: "John Smith",
+    profession: {
+      title: "Regents Professor",
+      department: "Edplus at ASU",
+    },
+    contactInfo: {
+      email: "[email protected]",
+      phone: "555-555-5555",
+      address: {
+        street: "1234 Address St.",
+        cityStateZip: "Tempe AZ 12345",
+      },
+    },
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ultrices nisl, at vestibulum tortor.",
+    socialMedia: mockSocialMedia,
+    imageUrl: img,
+  },
+};

packages/unity-react-core/src/components/PersonProfile/PersonProfile.test.tsx

@@ -0,0 +1,99 @@
+import { render, cleanup, RenderResult, screen } from "@testing-library/react";
+import React from "react";
+import { expect, describe, it, afterEach, beforeEach } from "vitest";
+
+import {
+  PersonProfile,
+  SocialMediaPlatform,
+  PersonProfileProps,
+} from "./PersonProfile";
+
+const defaultProps: PersonProfileProps = {
+  name: "John Smith",
+  profession: {
+    title: "Regents Professor",
+    department: "Edplus at ASU",
+  },
+  contactInfo: {
+    email: "[email protected]",
+    phone: "555-555-5555",
+    address: {
+      street: "1234 Address St.",
+      cityStateZip: "Tempe AZ 12345",
+    },
+  },
+  description: "Test description",
+  socialMedia: [
+    {
+      platform: SocialMediaPlatform.LinkedIn,
+      url: "https://example.com",
+    },
+  ],
+  imageUrl: "/test-image.jpg",
+};
+
+const renderComponent = (props: PersonProfileProps = defaultProps) => {
+  return render(<PersonProfile {...props} />);
+};
+
+describe("PersonProfile tests", () => {
+  let component: RenderResult;
+
+  beforeEach(() => {
+    component = renderComponent();
+  });
+
+  afterEach(cleanup);
+
+  it("should define component", () => {
+    expect(component).toBeDefined();
+  });
+
+  it("should render the name correctly", () => {
+    expect(screen.getByText("John Smith")).toBeInTheDocument();
+  });
+
+  it("should render professional information", () => {
+    expect(screen.getByText("Regents Professor")).toBeInTheDocument();
+    expect(screen.getByText("Edplus at ASU")).toBeInTheDocument();
+  });
+
+  it("should render contact information", () => {
+    expect(screen.getByText("[email protected]")).toBeInTheDocument();
+    expect(screen.getByText("555-555-5555")).toBeInTheDocument();
+    expect(screen.getByText("1234 Address St.")).toBeInTheDocument();
+    expect(screen.getByText("Tempe AZ 12345")).toBeInTheDocument();
+  });
+
+  it("should render description", () => {
+    expect(screen.getByText("Test description")).toBeInTheDocument();
+  });
+
+  it("should render profile image with correct attributes", () => {
+    const img = screen.getByAltText("John Smith") as HTMLImageElement;
+    expect(img).toBeInTheDocument();
+    expect(img.src).toContain("/test-image.jpg");
+    expect(img.width).toBe(300);
+    expect(img.height).toBe(300);
+  });
+
+  it("should render social media links", () => {
+    const socialLink = screen.getByLabelText("Go to user linkedin profile");
+    expect(socialLink).toBeInTheDocument();
+    expect(socialLink).toHaveAttribute("href", "https://example.com");
+  });
+
+  describe("accessibility tests", () => {
+    it("should have proper aria labels for contact links", () => {
+      expect(screen.getByLabelText("Email user")).toBeInTheDocument();
+      expect(screen.getByLabelText("Call user")).toBeInTheDocument();
+    });
+
+    it("should use semantic HTML elements", () => {
+      expect(component.container.querySelector("address")).toBeInTheDocument();
+      expect(component.container.querySelector("h3")).toBeInTheDocument();
+      expect(component.container.querySelector("h4")).toBeInTheDocument();
+    });
+  });
+
+});

packages/unity-react-core/src/components/PersonProfile/PersonProfile.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import { GaEventWrapper } from "../GaEventWrapper/GaEventWrapper";
+
+export enum SocialMediaPlatform {
+  Facebook = "facebook",
+  LinkedIn = "linkedin",
+  Twitter = "twitter",
+}
+
+const gaData = {
+  event: "link",
+  action: "click",
+  name: "onclick",
+  type: "internal link",
+  region: "main content",
+};
+
+interface SocialMediaLink {
+  platform: SocialMediaPlatform;
+  url: string;
+}
+
+interface ContactInfo {
+  email: string;
+  phone: string;
+  address: {
+    street: string;
+    cityStateZip: string;
+  };
+}
+
+interface Profession {
+  title: string;
+  department: string;
+}
+
+export interface PersonProfileProps {
+  name: string;
+  profession: Profession;
+  contactInfo?: ContactInfo;
+  description?: string;
+  socialMedia?: SocialMediaLink[];
+  imageUrl?: string;
+}
+
+// Helper function to get social media icon class
+const getSocialMediaIcon = (platform: SocialMediaPlatform): string => {
+  switch (platform) {
+    case SocialMediaPlatform.Facebook:
+      return "fab fa-facebook-square";
+    case SocialMediaPlatform.LinkedIn:
+      return "fab fa-linkedin";
+    case SocialMediaPlatform.Twitter:
+      return "fab fa-square-x-twitter";
+    default:
+      return "";
+  }
+};
+
+const PersonProfile: React.FC<PersonProfileProps> = ({
+  name,
+  profession,
+  contactInfo,
+  description,
+  socialMedia,
+  imageUrl,
+}) => {
+  return (
+    <div className="uds-person-profile">
+      <div className="profile-img-container">
+        <div className="profile-img-placeholder">
+          <img
+            className="profile-img"
+            src={imageUrl}
+            alt={name}
+            width={300}
+            height={300}
+            decoding="async"
+            loading="lazy"
+            fetchPriority="high"
+          />
+        </div>
+      </div>
+
+      <div className="person">
+        <h3 className="person-name">{name}</h3>
+        <div className="person-profession">
+          <h4>
+            <span>{profession.title}</span>
+          </h4>
+          <h4>
+            <span>{profession.department}</span>
+          </h4>
+        </div>
+
+        <ul className="person-contact-info">
+          <li>
+            <GaEventWrapper
+              gaData={{ ...gaData, section: name.toLowerCase() }}
+            >
+              <a href={`mailto:${contactInfo.email}`} aria-label="Email user">
+                {contactInfo.email}
+              </a>
+            </GaEventWrapper>
+          </li>
+          <li>
+            <GaEventWrapper gaData={{ ...gaData, section: name.toLowerCase() }}>
+              <a href={`tel:${contactInfo.phone}`} aria-label="Call user">
+                {contactInfo.phone}
+              </a>
+            </GaEventWrapper>
+          </li>
+          <li>
+            <address className="person-address">
+              <span className="person-street">
+                {contactInfo.address.street}
+              </span>
+              <span className="person-city">
+                {contactInfo.address.cityStateZip}
+              </span>
+            </address>
+          </li>
+        </ul>
+
+        <div>
+          <p className="person-description">{description}</p>
+          <ul className="person-social-medias">
+            {socialMedia.map((social, index) => (
+              <li key={index}>
+                <GaEventWrapper
+                  gaData={{ ...gaData, section: name.toLowerCase() }}
+                >
+                  <a
+                    href={social.url}
+                    aria-label={`Go to user ${social.platform} profile`}
+                  >
+                    <span
+                      className={getSocialMediaIcon(social.platform)}
+                    ></span>
+                  </a>
+                </GaEventWrapper>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PersonProfile };