@sproutsocial/seeds-react-profile 0.1.3 → 0.3.0

package/src/ProfileCard.tsx

@@ -0,0 +1,186 @@
+import styled from "styled-components";
+import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
+import { Avatar } from "@sproutsocial/seeds-react-avatar";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+} from "@sproutsocial/seeds-react-card";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Text } from "@sproutsocial/seeds-react-text";
+import type { TypeProfileCardProps } from "./types";
+import { VerifiedProfileIcon } from "./VerifiedProfileIcon";
+
+// Styled Components
+const StyledProfileCard = styled(Card)`
+  max-width: 300px;
+`;
+
+const StyledCardHeader = styled(CardHeader)<{
+  $bannerColor?: string;
+  $partnerName?: string;
+}>`
+  position: relative;
+  height: 80px;
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[400]} 0 ${(props) => props.theme.space[400]};
+  margin-bottom: 0;
+  color: ${(props) => props.theme.colors.text.inverse};
+  border-radius: ${(props) => props.theme.radii[500]}
+    ${(props) => props.theme.radii[500]} 0 0;
+  ${(props) => {
+    // Use explicit bannerColor if provided
+    if (props.$bannerColor) {
+      return `background: ${props.$bannerColor};`;
+    }
+    // Fall back to theme.colors.network[partnerName] if partnerName is available
+    if (props.$partnerName && props.theme.colors.network) {
+      const networkColor =
+        props.theme.colors.network[
+          props.$partnerName as keyof typeof props.theme.colors.network
+        ];
+      return networkColor ? `background: ${networkColor};` : "";
+    }
+    return "";
+  }}
+`;
+
+const BannerContent = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+`;
+
+const ActionsSection = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.space[100]};
+  padding: 0 ${(props) => props.theme.space[300]};
+
+  &:empty {
+    min-height: 44px;
+  }
+`;
+
+const StyledCardContent = styled(CardContent)`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.space[300]};
+  padding: 0 ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[400]};
+`;
+
+const ProfileNameSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+`;
+
+const InfoRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+`;
+
+/**
+ * A flexible profile component that can display user profiles in various formats
+ * across different social networks with consistent styling and behavior.
+ */
+export const ProfileCard = ({
+  partnerName,
+  name,
+  secondaryName,
+  avatarUrl,
+  subtext,
+  description,
+  verificationType,
+  profileUrl,
+  location,
+  bannerColor,
+  bannerContent,
+  metadata,
+  profileActions,
+  footer,
+  cardProps,
+}: TypeProfileCardProps) => {
+  return (
+    <StyledProfileCard role="presentation" {...cardProps}>
+      <StyledCardHeader $bannerColor={bannerColor} $partnerName={partnerName}>
+        <Avatar src={avatarUrl} name={name} size="60px" mt={450} />
+        {bannerContent && <BannerContent>{bannerContent}</BannerContent>}
+      </StyledCardHeader>
+
+      <ActionsSection>{profileActions}</ActionsSection>
+
+      <StyledCardContent>
+        <ProfileNameSection>
+          {partnerName && (
+            <PartnerLogo
+              partnerName={partnerName}
+              aria-label={`${partnerName} profile`}
+              size="small"
+            />
+          )}
+          <Text.SubHeadline as="h2">{name}</Text.SubHeadline>
+        </ProfileNameSection>
+
+        {subtext && (
+          <Text fontSize={200} color="text.subtext">
+            {subtext}
+          </Text>
+        )}
+
+        {secondaryName && (
+          <InfoRow>
+            {profileUrl ? (
+              <Link href={profileUrl} external>
+                <Text fontSize={200}>{secondaryName}</Text>
+                <Icon
+                  name="arrow-right-up-outline"
+                  aria-hidden
+                  ml={100}
+                  size="small"
+                />
+              </Link>
+            ) : (
+              <Text.SmallByline color="text.subtext">
+                {secondaryName}
+              </Text.SmallByline>
+            )}
+            {verificationType && (
+              <VerifiedProfileIcon
+                partnerName={partnerName}
+                verificationType={verificationType}
+              />
+            )}
+          </InfoRow>
+        )}
+
+        {description && <Text fontSize={200}>{description}</Text>}
+
+        {location && (
+          <InfoRow>
+            <Icon name="location-pin-outline" aria-hidden size="small" />
+            <Text fontSize={200}>{location}</Text>
+          </InfoRow>
+        )}
+
+        {metadata && metadata.length > 0 && (
+          <InfoRow>
+            {metadata.map((info, index) => (
+              <Text fontSize={200} key={index}>
+                {info}
+              </Text>
+            ))}
+          </InfoRow>
+        )}
+      </StyledCardContent>
+
+      {footer && <CardFooter>{footer}</CardFooter>}
+    </StyledProfileCard>
+  );
+};
+
+export default ProfileCard;

package/src/ProfileToken.stories.tsx

@@ -1,14 +1,5 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { ProfileToken } from "./ProfileToken";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-
-const avatarUrl =
-  "https://d672eyudr6aq1.cloudfront.net/avatar/cede1373e17c05542b1cc60f427067f2?s=30&d=404";
-
-const VerificationBadge = () => (
-  <Icon name="check-solid" style={{ color: "#1da1f2" }} />
-);
 
 const meta: Meta<typeof ProfileToken> = {
   title: "Components/Profile/ProfileToken",
@@ -17,7 +8,25 @@ const meta: Meta<typeof ProfileToken> = {
     layout: "centered",
   },
   tags: ["autodocs"],
-  argTypes: {},
+  argTypes: {
+    partnerName: {
+      control: { type: "select" },
+      options: [
+        "twitter",
+        "facebook",
+        "instagram",
+        "linkedin",
+        "youtube",
+        "tiktok",
+        "threads",
+        "bluesky",
+      ],
+    },
+    verificationType: {
+      control: { type: "select" },
+      options: ["verified", "blue_verified", "gray_verified", "not_verified"],
+    },
+  },
 };
 
 export default meta;
@@ -26,8 +35,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     name: "John Doe",
-    secondaryName: "@johndoe",
-    img: avatarUrl,
     partnerName: "twitter",
   },
 };
@@ -35,18 +42,14 @@ export const Default: Story = {
 export const WithVerification: Story = {
   args: {
     name: "Elon Musk",
-    secondaryName: "@elonmusk",
-    img: avatarUrl,
     partnerName: "twitter",
-    children: <VerificationBadge />,
+    verificationType: "verified",
   },
 };
 
 export const FacebookUser: Story = {
   args: {
     name: "Facebook User",
-    secondaryName: "/facebookuser",
-    img: avatarUrl,
     partnerName: "facebook",
   },
 };
@@ -54,8 +57,6 @@ export const FacebookUser: Story = {
 export const InstagramUser: Story = {
   args: {
     name: "Instagram User",
-    secondaryName: "@instagramuser",
-    img: avatarUrl,
     partnerName: "instagram",
   },
 };
@@ -63,8 +64,6 @@ export const InstagramUser: Story = {
 export const LinkedInUser: Story = {
   args: {
     name: "LinkedIn User",
-    secondaryName: "linkedinuser",
-    img: avatarUrl,
     partnerName: "linkedin",
   },
 };
@@ -72,8 +71,6 @@ export const LinkedInUser: Story = {
 export const YouTubeUser: Story = {
   args: {
     name: "YouTube Creator",
-    secondaryName: "@youtubecreator",
-    img: avatarUrl,
     partnerName: "youtube",
   },
 };
@@ -81,8 +78,6 @@ export const YouTubeUser: Story = {
 export const TikTokUser: Story = {
   args: {
     name: "TikTok Creator",
-    secondaryName: "@tiktokcreator",
-    img: avatarUrl,
     partnerName: "tiktok",
   },
 };
@@ -90,8 +85,6 @@ export const TikTokUser: Story = {
 export const ThreadsUser: Story = {
   args: {
     name: "Threads User",
-    secondaryName: "@threadsuser",
-    img: avatarUrl,
     partnerName: "threads",
   },
 };
@@ -99,59 +92,27 @@ export const ThreadsUser: Story = {
 export const BlueskyUser: Story = {
   args: {
     name: "Bluesky User",
-    secondaryName: "@blueskyuser",
-    img: avatarUrl,
     partnerName: "bluesky",
   },
 };
 
-export const WithoutAvatar: Story = {
+export const BlueVerifiedUser: Story = {
   args: {
-    name: "No Avatar User",
-    secondaryName: "@noavat,ar",
+    name: "Blue Verified User",
     partnerName: "twitter",
+    verificationType: "blue_verified",
   },
 };
 
 export const DifferentNetworks: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-      <ProfileToken
-        name="Twitter User"
-        secondaryName="@twitteruser"
-        img={avatarUrl}
-        partnerName="twitter"
-      />
-      <ProfileToken
-        name="Facebook User"
-        secondaryName="/facebookuser"
-        img={avatarUrl}
-        partnerName="facebook"
-      />
-      <ProfileToken
-        name="Instagram User"
-        secondaryName="@instagramuser"
-        img={avatarUrl}
-        partnerName="instagram"
-      />
-      <ProfileToken
-        name="LinkedIn User"
-        secondaryName="linkedinuser"
-        img={avatarUrl}
-        partnerName="linkedin"
-      />
-      <ProfileToken
-        name="YouTube Creator"
-        secondaryName="@youtubecreator"
-        img={avatarUrl}
-        partnerName="youtube"
-      />
-      <ProfileToken
-        name="TikTok Creator"
-        secondaryName="@tiktokcreator"
-        img={avatarUrl}
-        partnerName="tiktok"
-      />
+      <ProfileToken name="Twitter User" partnerName="twitter" />
+      <ProfileToken name="Facebook User" partnerName="facebook" />
+      <ProfileToken name="Instagram User" partnerName="instagram" />
+      <ProfileToken name="LinkedIn User" partnerName="linkedin" />
+      <ProfileToken name="YouTube Creator" partnerName="youtube" />
+      <ProfileToken name="TikTok Creator" partnerName="tiktok" />
     </div>
   ),
 };
@@ -161,42 +122,39 @@ export const TokenVariations: Story = {
     <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
       <ProfileToken
         name="Verified User"
-        secondaryName="@verified"
-        img={avatarUrl}
-        partnerName="twitter"
-      >
-        <VerificationBadge />
-      </ProfileToken>
-      <ProfileToken
-        name="Regular User"
-        secondaryName="@regular"
-        img={avatarUrl}
         partnerName="twitter"
+        verificationType="verified"
       />
-      <ProfileToken
-        name="Facebook User"
-        secondaryName="/facebookuser"
-        img={avatarUrl}
-        partnerName="facebook"
-      />
-      <ProfileToken
-        name="Instagram User"
-        secondaryName="@instagramuser"
-        img={avatarUrl}
-        partnerName="instagram"
-      />
-      <ProfileToken
-        name="LinkedIn User"
-        secondaryName="linkedinuser"
-        img={avatarUrl}
-        partnerName="linkedin"
-      />
-      <ProfileToken
-        name="YouTube Creator"
-        secondaryName="@youtubecreator"
-        img={avatarUrl}
-        partnerName="youtube"
-      />
+      <ProfileToken name="Regular User" partnerName="twitter" />
+      <ProfileToken name="Facebook User" partnerName="facebook" />
+      <ProfileToken name="Instagram User" partnerName="instagram" />
+      <ProfileToken name="LinkedIn User" partnerName="linkedin" />
+      <ProfileToken name="YouTube Creator" partnerName="youtube" />
+    </div>
+  ),
+};
+
+export const LongNamesTruncation: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div
+        style={{ maxWidth: "250px", border: "1px solid #ccc", padding: "8px" }}
+      >
+        <ProfileToken
+          name="A Very Long User Name That Should Truncate"
+          partnerName="twitter"
+        />
+      </div>
+      <div
+        style={{ maxWidth: "180px", border: "1px solid #ccc", padding: "8px" }}
+      >
+        <ProfileToken name="Another Long Name Token" partnerName="facebook" />
+      </div>
+      <div
+        style={{ maxWidth: "120px", border: "1px solid #ccc", padding: "8px" }}
+      >
+        <ProfileToken name="Very Narrow Token" partnerName="instagram" />
+      </div>
     </div>
   ),
 };

package/src/ProfileToken.tsx

@@ -1,20 +1,40 @@
-import React from "react";
+import styled from "styled-components";
 import { Token } from "@sproutsocial/seeds-react-token";
 import { InlineProfile } from "./InlineProfile";
 import type { ProfileTokenProps } from "./types";
 
+const StyledProfileToken = styled(Token)`
+  box-sizing: border-box;
+  display: inline-flex;
+  max-width: 100%;
+  vertical-align: middle;
+  padding: ${(props) => props.theme.space[100]}
+    ${(props) => props.theme.space[200]};
+  margin: ${(props) => props.theme.space[100]} 0;
+`;
+
 /**
- * A ProfileToken component that wraps CompactProfile in a Seeds Token component.
+ * A ProfileToken component that wraps InlineProfile in a Seeds Token component.
  * This token is not closable and provides a compact way to display profile information inline.
+ *
+ * ProfileToken enforces design standards by only showing the profile name and network logo.
+ * It does not support avatars, secondary names (handles), or custom avatar sizes.
+ * Use InlineProfile directly if you need more flexibility.
  */
-export const ProfileToken: React.FC<ProfileTokenProps> = ({
-  tokenProps,
+export const ProfileToken = ({
   className,
+  onClick,
+  tokenProps,
   ...props
-}) => (
-  <Token className={className} closeable={false} {...tokenProps}>
-    <InlineProfile {...props} />
-  </Token>
+}: ProfileTokenProps) => (
+  <StyledProfileToken
+    className={className}
+    closeable={false}
+    onClick={onClick}
+    {...tokenProps}
+  >
+    <InlineProfile size="small" {...props} />
+  </StyledProfileToken>
 );
 
 export default ProfileToken;

package/src/VerifiedProfileIcon.tsx

@@ -0,0 +1,64 @@
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import type { TypeProfileNetwork, TypeProfileVerification } from "./types";
+
+// TODO: Move these to a more appropriate location
+const VERIFICATION_COLORS = {
+  twitter: "#000000",
+  facebook: "#1877F2",
+  x: "#000000",
+  linkedin: "#0A66C2",
+  instagram: "#e4405f",
+  gray: "#515e5f",
+} as const;
+
+/**
+ * Gets the verification color based on partnerName and verification type
+ */
+export const getVerificationColor = (
+  partnerName?: TypeProfileNetwork,
+  verificationType?: TypeProfileVerification
+): string => {
+  if (!verificationType || verificationType === "not_verified") return "";
+
+  switch (verificationType) {
+    case "blue_verified":
+      // Use partner-specific blue color
+      return partnerName === "facebook"
+        ? VERIFICATION_COLORS.facebook
+        : VERIFICATION_COLORS.twitter;
+    case "gray_verified":
+      return VERIFICATION_COLORS.gray;
+    case "verified":
+    default:
+      // Default to partner color or Twitter blue
+      if (partnerName && partnerName in VERIFICATION_COLORS) {
+        return VERIFICATION_COLORS[
+          partnerName as keyof typeof VERIFICATION_COLORS
+        ];
+      }
+      return VERIFICATION_COLORS.twitter;
+  }
+};
+
+export interface TypeVerifiedProfileIconProps {
+  partnerName?: TypeProfileNetwork;
+  verificationType: TypeProfileVerification;
+}
+
+export const VerifiedProfileIcon = ({
+  partnerName,
+  verificationType,
+}: TypeVerifiedProfileIconProps) => {
+  if (!verificationType || verificationType === "not_verified") return;
+
+  const verificationColor = getVerificationColor(partnerName, verificationType);
+  return (
+    <Icon
+      title="Verified"
+      aria-label="Verified account"
+      color={verificationColor}
+      name="verified"
+      ml="150"
+    />
+  );
+};

package/src/__tests__/InlineProfile.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { InlineProfile } from "../InlineProfile";
 
@@ -9,7 +8,7 @@ describe("InlineProfile", () => {
         name="John Doe"
         secondaryName="@johndoe"
         partnerName="twitter"
-        img="https://example.com/avatar.jpg"
+        avatarUrl="https://example.com/avatar.jpg"
       />
     );
 
@@ -17,21 +16,6 @@ describe("InlineProfile", () => {
     expect(screen.getByText("@johndoe")).toBeInTheDocument();
   });
 
-  it("renders with children", () => {
-    render(
-      <InlineProfile
-        name="John Doe"
-        secondaryName="@johndoe"
-        partnerName="twitter"
-        img="https://example.com/avatar.jpg"
-      >
-        Children
-      </InlineProfile>
-    );
-
-    expect(screen.getByText("Children")).toBeInTheDocument();
-  });
-
   it("renders network logo", () => {
     render(
       <InlineProfile
@@ -39,7 +23,7 @@ describe("InlineProfile", () => {
         secondaryName="@johndoe"
         partnerName="twitter"
         partnerLogoLabel="Twitter Logo"
-        img="https://example.com/avatar.jpg"
+        avatarUrl="https://example.com/avatar.jpg"
       />
     );
 
@@ -52,7 +36,7 @@ describe("InlineProfile", () => {
       <InlineProfile
         name="John Doe"
         secondaryName="@johndoe"
-        img="https://example.com/avatar.jpg"
+        avatarUrl="https://example.com/avatar.jpg"
       />
     );
 
@@ -66,7 +50,7 @@ describe("InlineProfile", () => {
       <InlineProfile
         name="John Doe"
         partnerName="twitter"
-        img="https://example.com/avatar.jpg"
+        avatarUrl="https://example.com/avatar.jpg"
       />
     );
 
@@ -74,10 +58,26 @@ describe("InlineProfile", () => {
     expect(screen.queryByText(/@/)).not.toBeInTheDocument();
   });
 
-  it("renders avatar with name fallback when img prop is not provided", () => {
+  it("hides avatar when avatarUrl prop is not provided", () => {
     render(<InlineProfile name="John Doe" />);
 
-    const avatar = screen.getByText("JD");
-    expect(avatar).toBeInTheDocument();
+    // Avatar should not be rendered when no URL provided
+    expect(screen.queryByText("JD")).not.toBeInTheDocument();
+    // But name should still be visible
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+  });
+
+  it("renders with verification badge when verified", () => {
+    render(
+      <InlineProfile
+        name="John Doe"
+        secondaryName="@johndoe"
+        partnerName="twitter"
+        avatarUrl="https://example.com/avatar.jpg"
+        verificationType="verified"
+      />
+    );
+
+    expect(screen.getByLabelText("Verified account")).toBeInTheDocument();
   });
 });