@sproutsocial/seeds-react-profile 0.1.3 → 0.2.0

package/src/__tests__/ProfileCard.test.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { ProfileCard } from "../ProfileCard";
+
+describe("ProfileCard", () => {
+  const defaultProps = {
+    name: "John Doe",
+    secondaryName: "@johndoe",
+    partnerName: "twitter" as const,
+    avatarUrl: "https://example.com/avatar.jpg",
+  };
+
+  it("renders with name and secondaryName", () => {
+    render(<ProfileCard {...defaultProps} />);
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("@johndoe")).toBeInTheDocument();
+  });
+
+  it("renders with subtext", () => {
+    render(<ProfileCard {...defaultProps} subtext="Software Engineer" />);
+
+    expect(screen.getByText("Software Engineer")).toBeInTheDocument();
+  });
+
+  it("does not render subtext when not provided", () => {
+    render(<ProfileCard {...defaultProps} />);
+
+    expect(screen.queryByText("Software Engineer")).not.toBeInTheDocument();
+  });
+
+  it("renders network logo", () => {
+    render(<ProfileCard {...defaultProps} />);
+
+    expect(screen.getByDataQaLabel({ logo: "twitter" })).toBeInTheDocument();
+    expect(screen.getByLabelText("twitter profile")).toBeInTheDocument();
+  });
+
+  it("renders description", () => {
+    render(
+      <ProfileCard
+        {...defaultProps}
+        description="Building amazing things with code"
+      />
+    );
+
+    expect(
+      screen.getByText("Building amazing things with code")
+    ).toBeInTheDocument();
+  });
+
+  it("renders profile URL link with secondaryName", () => {
+    render(
+      <ProfileCard {...defaultProps} profileUrl="https://twitter.com/johndoe" />
+    );
+
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", "https://twitter.com/johndoe");
+    expect(screen.getByText("@johndoe")).toBeInTheDocument();
+  });
+
+  it("does not render profile URL when secondaryName is not provided", () => {
+    const { secondaryName, ...propsWithoutSecondary } = defaultProps;
+    render(
+      <ProfileCard
+        {...propsWithoutSecondary}
+        profileUrl="https://twitter.com/johndoe"
+      />
+    );
+
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("renders secondaryName without link when profileUrl is not provided", () => {
+    render(<ProfileCard {...defaultProps} />);
+
+    expect(screen.getByText("@johndoe")).toBeInTheDocument();
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("renders location with icon", () => {
+    render(<ProfileCard {...defaultProps} location="San Francisco, CA" />);
+
+    expect(screen.getByText("San Francisco, CA")).toBeInTheDocument();
+  });
+
+  it("renders metadata array", () => {
+    render(
+      <ProfileCard
+        {...defaultProps}
+        metadata={["1.2K followers", "500 following"]}
+      />
+    );
+
+    expect(screen.getByText("1.2K followers")).toBeInTheDocument();
+    expect(screen.getByText("500 following")).toBeInTheDocument();
+  });
+
+  it("renders with verification badge when verified", () => {
+    render(<ProfileCard {...defaultProps} verificationType="verified" />);
+
+    expect(screen.getByLabelText("Verified account")).toBeInTheDocument();
+  });
+
+  it("renders banner content when provided", () => {
+    render(
+      <ProfileCard
+        {...defaultProps}
+        bannerContent={<div>Custom banner content</div>}
+      />
+    );
+
+    expect(screen.getByText("Custom banner content")).toBeInTheDocument();
+  });
+
+  it("renders profile actions when provided", () => {
+    render(
+      <ProfileCard
+        {...defaultProps}
+        profileActions={<button>Edit Profile</button>}
+      />
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Edit Profile" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders footer when provided", () => {
+    render(
+      <ProfileCard
+        {...defaultProps}
+        footer={<div>Custom footer content</div>}
+      />
+    );
+
+    expect(screen.getByText("Custom footer content")).toBeInTheDocument();
+  });
+
+  it("renders without network logo when partnerName is not provided", () => {
+    const { partnerName, ...propsWithoutPartner } = defaultProps;
+    render(<ProfileCard {...propsWithoutPartner} />);
+
+    expect(
+      screen.queryByDataQaLabel({ logo: "twitter" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders with all features combined", () => {
+    render(
+      <ProfileCard
+        {...defaultProps}
+        subtext="Lead Engineer"
+        description="Passionate about building great products"
+        profileUrl="https://twitter.com/johndoe"
+        location="Seattle, WA"
+        metadata={["5K followers", "1K following"]}
+        verificationType="blue_verified"
+        bannerContent={<div>Banner</div>}
+        profileActions={<button>Actions</button>}
+        footer={<div>Footer</div>}
+      />
+    );
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("Lead Engineer")).toBeInTheDocument();
+    expect(
+      screen.getByText("Passionate about building great products")
+    ).toBeInTheDocument();
+    expect(screen.getByText("@johndoe")).toBeInTheDocument();
+    expect(screen.getByRole("link")).toHaveAttribute(
+      "href",
+      "https://twitter.com/johndoe"
+    );
+    expect(screen.getByText("Seattle, WA")).toBeInTheDocument();
+    expect(screen.getByText("5K followers")).toBeInTheDocument();
+    expect(screen.getByLabelText("Verified account")).toBeInTheDocument();
+    expect(screen.getByText("Banner")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Actions" })).toBeInTheDocument();
+    expect(screen.getByText("Footer")).toBeInTheDocument();
+  });
+});

package/src/__tests__/ProfileToken.test.tsx

@@ -7,7 +7,8 @@ describe("ProfileToken", () => {
     name: "John Doe",
     secondaryName: "@johndoe",
     partnerName: "twitter" as const,
-    img: "https://example.com/avatar.jpg",
+    avatarUrl: "https://example.com/avatar.jpg",
+    verificationType: "verified" as const,
   };
 
   it("renders profile information in token format", () => {

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./ProfileCard";
 export * from "./InlineProfile";
 export * from "./ProfileToken";
 export * from "./types";

package/src/types.ts

@@ -6,21 +6,107 @@
  */
 
 import type { EnumLogoNamesWithoutVariants } from "@sproutsocial/seeds-partner-logos";
-import type Token from "@sproutsocial/seeds-react-token";
+import type { TypeTokenProps } from "@sproutsocial/seeds-react-token";
+import type { TypeCardProps } from "@sproutsocial/seeds-react-card";
 
-export interface TypeInlineProfileProps {
+/**
+ * Social network types supported by the Profile component
+ * This is a subset of EnumLogoNamesWithoutVariants that only includes actual social networks
+ */
+export type TypeProfileNetwork = Extract<
+  EnumLogoNamesWithoutVariants,
+  | "twitter"
+  | "facebook"
+  | "instagram"
+  | "linkedin"
+  | "youtube"
+  | "tiktok"
+  | "threads"
+  | "bluesky"
+  | "reddit"
+  | "pinterest"
+  | "whatsapp"
+  | "glassdoor"
+  | "trustpilot"
+  | "tumblr"
+  | "yelp"
+  | "x-twitter"
+>;
+
+/**
+ * Profile verification types
+ */
+export type TypeProfileVerification =
+  | "blue_verified" // Blue checkmark (Facebook, Twitter, etc.)
+  | "gray_verified" // Gray checkmark (Facebook, etc.)
+  | "verified" // Standard verification
+  | "not_verified"; // No verification
+
+/**
+ * Base props interface shared between Profile and InlineProfile components
+ */
+export interface TypeBaseProfileProps {
+  /** The network of the profile */
+  partnerName?: TypeProfileNetwork;
+  /** A custom label to apply to the partner logo */
+  partnerLogoLabel?: string;
+  /** The display name of the profile */
   name: string;
+  /** The handle or username of the profile */
   secondaryName?: string;
+  /** The profile picture URL */
+  avatarUrl?: string;
+  /** The type of verification for the profile, if applicable */
+  verificationType?: TypeProfileVerification;
+  /** Additional CSS class name */
+  className?: string;
+}
+
+/**
+ * Props interface for the InlineProfile component
+ */
+export interface TypeInlineProfileProps
+  extends Omit<TypeBaseProfileProps, "name"> {
+  /** The display name of the profile (optional for inline) */
+  name?: string;
+  /** Size variant for the inline profile */
+  size?: "small" | "medium" | "large";
+  /** The px size of the avatar, which has a default based on the size prop */
   avatarSize?: string;
-  partnerName?: EnumLogoNamesWithoutVariants;
-  partnerLogoLabel?: string;
-  img?: string;
-  children?: React.ReactNode | React.ReactNode[];
 }
 
 export interface ProfileTokenProps extends TypeInlineProfileProps {
-  /** Additional CSS class name */
-  className?: string;
+  /** Click handler for the entire inline profile */
+  onClick?: TypeTokenProps["onClick"];
   /** Additional props to pass to the Token component */
-  tokenProps?: Omit<React.ComponentProps<typeof Token>, "children">;
+  tokenProps?: Omit<TypeTokenProps, "children">;
+}
+
+/**
+ * Main props interface for the Profile component
+ */
+export interface TypeProfileCardProps extends TypeBaseProfileProps {
+  /** Subtext for below the profile name */
+  subtext?: string;
+  /** Profile description or bio */
+  description?: string;
+  /** External profile URL (e.g., "https://twitter.com/username"), only displayed if secondaryName is provided */
+  profileUrl?: string;
+  /** Location text (e.g., "San Francisco, CA") */
+  location?: string;
+  /**
+   * Background color for the banner header.
+   * If not provided, will use theme.colors.network[partnerName] when partnerName is available.
+   */
+  bannerColor?: string;
+  /** Generic content slot for banners, alerts, or status messages */
+  bannerContent?: React.ReactNode;
+  /** Array of metadata strings (e.g., ["1.2K followers", "500 following"]) */
+  metadata?: string[];
+  /** Action buttons or overflow menus for profile operations. Rendered in order provided, right-aligned. */
+  profileActions?: React.ReactNode;
+  /** Custom footer content */
+  footer?: React.ReactNode;
+  /** Props to pass down to the Card */
+  cardProps?: TypeCardProps;
 }