@sproutsocial/seeds-react-profile 0.1.3 → 0.2.0

package/src/InlineProfile.stories.tsx

@@ -1,15 +1,9 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { InlineProfile } from "./InlineProfile";
-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 InlineProfile> = {
   title: "Components/Profile/InlineProfile",
   component: InlineProfile,
@@ -17,6 +11,23 @@ const meta: Meta<typeof InlineProfile> = {
     layout: "centered",
   },
   tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    partnerName: {
+      control: { type: "select" },
+      options: [
+        "twitter",
+        "facebook",
+        "instagram",
+        "linkedin",
+        "youtube",
+        "tiktok",
+      ],
+    },
+  },
 };
 
 export default meta;
@@ -26,7 +37,8 @@ export const Default: Story = {
   args: {
     name: "John Doe",
     secondaryName: "@johndoe",
-    img: avatarUrl,
+    avatarUrl: avatarUrl,
+    partnerName: "twitter",
   },
 };
 
@@ -34,8 +46,8 @@ export const WithVerification: Story = {
   args: {
     name: "Elon Musk",
     secondaryName: "@elonmusk",
-    img: avatarUrl,
-    children: <VerificationBadge />,
+    avatarUrl: avatarUrl,
+    isVerified: true,
   },
 };
 
@@ -43,8 +55,18 @@ export const WithPartnerLogo: Story = {
   args: {
     name: "meta",
     secondaryName: "/meta",
-    img: avatarUrl,
+    avatarUrl: avatarUrl,
     partnerName: "facebook",
+    showNetworkLogo: true,
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    name: "Instagram User",
+    secondaryName: "@instagramuser",
+    avatarUrl: avatarUrl,
+    partnerName: "instagram",
   },
 };
 
@@ -59,7 +81,7 @@ export const Large: Story = {
   args: {
     name: "large profile",
     secondaryName: "@large",
-    avatarSize: "32px",
+    size: "large",
   },
 };
 
@@ -69,27 +91,64 @@ export const DifferentNetworks: Story = {
       <InlineProfile
         name="twitter user"
         secondaryName="@twitteruser"
-        img={avatarUrl}
+        avatarUrl={avatarUrl}
         partnerName="twitter"
       />
       <InlineProfile
         name="facebook user"
         secondaryName="/facebookuser"
-        img={avatarUrl}
+        avatarUrl={avatarUrl}
         partnerName="facebook"
       />
       <InlineProfile
         name="instagram user"
         secondaryName="@instagramuser"
-        img={avatarUrl}
+        avatarUrl={avatarUrl}
         partnerName="instagram"
       />
       <InlineProfile
         name="linkedin user"
         secondaryName="linkedinuser"
-        img={avatarUrl}
+        avatarUrl={avatarUrl}
         partnerName="linkedin"
       />
     </div>
   ),
 };
+
+export const LongNamesTruncation: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div
+        style={{ maxWidth: "300px", border: "1px solid #ccc", padding: "8px" }}
+      >
+        <InlineProfile
+          name="A Very Long User Name That Should Truncate With Ellipsis"
+          secondaryName="@averylonghandlethatshouldalsotruncate"
+          avatarUrl={avatarUrl}
+          partnerName="twitter"
+        />
+      </div>
+      <div
+        style={{ maxWidth: "200px", border: "1px solid #ccc", padding: "8px" }}
+      >
+        <InlineProfile
+          name="Another Super Long Name"
+          secondaryName="@anotherlonghandle"
+          avatarUrl={avatarUrl}
+          partnerName="facebook"
+        />
+      </div>
+      <div
+        style={{ maxWidth: "150px", border: "1px solid #ccc", padding: "8px" }}
+      >
+        <InlineProfile
+          name="Very Narrow Container"
+          secondaryName="@narrow"
+          avatarUrl={avatarUrl}
+          partnerName="instagram"
+        />
+      </div>
+    </div>
+  ),
+};

package/src/InlineProfile.tsx

@@ -1,23 +1,83 @@
 import styled from "styled-components";
-import { Text } from "@sproutsocial/seeds-react-text";
 import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
 import { Avatar } from "@sproutsocial/seeds-react-avatar";
 import type { TypeInlineProfileProps } from "./types";
+import { VerifiedProfileIcon } from "./VerifiedProfileIcon";
 
-const InlineProfileContainer = styled.div`
-  display: flex;
+const InlineProfileContainer = styled.span<{
+  $size?: "small" | "medium" | "large";
+}>`
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
+  gap: ${(props) => props.theme.space[200]};
   max-width: 100%;
+  ${(props) => props.theme.typography[200]}
+  color: ${(props) => props.theme.colors.text.subtext};
+  text-align: inherit;
 `;
 
-const InlineProfileBody = styled.span`
-  display: flex;
+const InlineProfileAvatar = styled.span`
+  display: inline-flex;
+  flex-shrink: 0;
+`;
+
+const InlineProfileContent = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+  min-width: 0;
+  flex: 1;
+`;
+
+const InlineProfileNetwork = styled.span`
+  display: inline-flex;
   align-items: center;
-  margin-left: 8px;
+  flex-shrink: 0;
 `;
 
+const InlineProfileText = styled.span`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+  min-width: 0;
+  flex: 1;
+`;
+
+const InlineProfileName = styled.span`
+  display: inline-block;
+  ${(props) => props.theme.typography[200]}
+  font-family: ${(props) => props.theme.fontFamily};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  text-transform: lowercase;
+  color: ${(props) => props.theme.colors.text.body};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const InlineProfileHandle = styled.span`
+  display: inline-block;
+  ${(props) => props.theme.typography[200]}
+  font-family: ${(props) => props.theme.fontFamily};
+  color: ${(props) => props.theme.colors.text.subtext};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const avatarSizeMap = {
+  small: "16px",
+  medium: "20px",
+  large: "24px",
+} as const;
+
 /**
+ * A compact inline profile component that displays avatar, name/handle, and verification.
+ * Perfect for use in post headers, comments, or other compact spaces.
  *
  * @param props - Profile props
  * @param props.name - Name of the profile
@@ -25,7 +85,7 @@ const InlineProfileBody = styled.span`
  * @param props.partnerName - Partner logo name
  * @param props.partnerLogoLabel - Aria-label for the partner logo
  * @param props.avatarSize - Size of the avatar
- * @param props.img - Image URL for the avatar
+ * @param props.avatarUrl - Image URL for the avatar
  * @param props.children - Additional elements to render within the profile component
  * @returns JSX.Element representing a user profile
  *
@@ -36,7 +96,7 @@ const InlineProfileBody = styled.span`
  *   partnerName="facebook"
  *   partnerLogoLabel="Facebook Logo"
  *   avatarSize="24px"
- *   img="https://example.com/avatar.jpg"
+ *   avatarUrl="https://example.com/avatar.jpg"
  * >
  *   <Badge text="Moderator" badgeColor="green" />
  * </InlineProfile>
@@ -46,30 +106,47 @@ export const InlineProfile = ({
   secondaryName,
   partnerName,
   partnerLogoLabel,
-  avatarSize = "22px",
-  img,
-  children,
+  size = "medium",
+  avatarSize: avatarSizeOverride,
+  avatarUrl,
+  verificationType,
+  className,
 }: TypeInlineProfileProps) => {
+  const displayName = name || secondaryName || "Unknown Profile";
+  const avatarSize = avatarSizeOverride || avatarSizeMap[size];
+
   return (
-    <InlineProfileContainer>
-      <Avatar size={avatarSize} src={img} name={name} />
-      {partnerName && (
-        <PartnerLogo
-          size="small"
-          partnerName={partnerName}
-          ml={300}
-          aria-label={partnerLogoLabel}
-        />
-      )}
-      <Text fontSize={200} fontWeight="semibold" ml={300} truncated={true}>
-        {name}
-      </Text>
-      {secondaryName && (
-        <Text fontSize={200} ml={300} fontWeight="normal" truncated={true}>
-          {secondaryName}
-        </Text>
-      )}
-      <InlineProfileBody>{children}</InlineProfileBody>
+    <InlineProfileContainer className={className} $size={size}>
+      <InlineProfileAvatar>
+        <Avatar src={avatarUrl} name={displayName} size={avatarSize} />
+      </InlineProfileAvatar>
+
+      <InlineProfileContent>
+        {partnerName && (
+          <InlineProfileNetwork>
+            <PartnerLogo
+              partnerName={partnerName}
+              aria-label={partnerLogoLabel || `${partnerName} profile`}
+              size="small"
+            />
+          </InlineProfileNetwork>
+        )}
+
+        <InlineProfileText>
+          {name && <InlineProfileName>{name}</InlineProfileName>}
+
+          {secondaryName && (
+            <InlineProfileHandle>{secondaryName}</InlineProfileHandle>
+          )}
+        </InlineProfileText>
+
+        {verificationType && (
+          <VerifiedProfileIcon
+            partnerName={partnerName}
+            verificationType={verificationType}
+          />
+        )}
+      </InlineProfileContent>
     </InlineProfileContainer>
   );
 };

package/src/ProfileCard.stories.tsx

@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { ProfileCard } from "./ProfileCard";
+
+const meta: Meta<typeof ProfileCard> = {
+  title: "Components/Profile/ProfileCard",
+  component: ProfileCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    partnerName: {
+      control: { type: "select" },
+      options: [
+        "twitter",
+        "facebook",
+        "instagram",
+        "linkedin",
+        "youtube",
+        "tiktok",
+        "threads",
+        "bluesky",
+      ],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "John Doe",
+    secondaryName: "@johndoe",
+    partnerName: "twitter",
+    avatarUrl: "https://via.placeholder.com/60",
+    description:
+      "Software developer and tech enthusiast. Building the future one line of code at a time.",
+  },
+};
+
+export const WithVerification: Story = {
+  args: {
+    name: "Elon Musk",
+    secondaryName: "@elonmusk",
+    partnerName: "twitter",
+    verificationType: "verified",
+    avatarUrl: "https://via.placeholder.com/60",
+    subtext: "Technoking of Tesla",
+    description:
+      "CEO of Tesla and SpaceX. Working to make life multiplanetary.",
+  },
+};
+
+export const WithProfileDetails: Story = {
+  args: {
+    name: "Tech Company",
+    secondaryName: "@techcompany",
+    partnerName: "twitter",
+    avatarUrl: "https://via.placeholder.com/60",
+    description: "Building the future of technology.",
+    profileUrl: "https://twitter.com/techcompany",
+    location: "San Francisco, CA",
+    metadata: ["1.2K followers", "500 following"],
+  },
+};
+
+export const InstagramUser: Story = {
+  args: {
+    name: "Instagram User",
+    secondaryName: "@instagramuser",
+    partnerName: "instagram",
+    avatarUrl: "https://via.placeholder.com/60",
+    description:
+      "Photographer and content creator sharing moments from around the world.",
+    profileUrl: "https://instagram.com/instagramuser",
+    location: "New York, NY",
+    metadata: ["10.5K followers", "892 following", "1,234 posts"],
+  },
+};
+
+export const LinkedInUser: Story = {
+  args: {
+    name: "LinkedIn Professional",
+    secondaryName: "linkedinuser",
+    partnerName: "linkedin",
+    avatarUrl: "https://via.placeholder.com/60",
+    subtext: "Senior Product Manager",
+    description: "Building products at a leading tech company.",
+  },
+};
+
+export const WithSubtext: Story = {
+  args: {
+    name: "Jane Smith",
+    secondaryName: "@janesmith",
+    partnerName: "twitter",
+    avatarUrl: "https://via.placeholder.com/60",
+    subtext: "Design Lead @ Sprout Social",
+    description:
+      "Passionate about creating beautiful and accessible user experiences.",
+  },
+};
+
+export const WithBannerContent: Story = {
+  args: {
+    name: "Profile with Banner",
+    secondaryName: "@withbanner",
+    partnerName: "twitter",
+    avatarUrl: "https://via.placeholder.com/60",
+    description: "This profile demonstrates the bannerContent slot.",
+    bannerContent: (
+      <Box
+        bg="status.error.background"
+        p={300}
+        display="flex"
+        alignItems="center"
+        gap={200}
+      >
+        <Icon
+          name="circle-exclamation"
+          color="status.error.text"
+          size="small"
+        />
+        <Text color="status.error.text" fontSize={200}>
+          Profile disconnected
+        </Text>
+      </Box>
+    ),
+  },
+};
+
+export const WithProfileActions: Story = {
+  args: {
+    name: "Profile with Actions",
+    secondaryName: "@withactions",
+    partnerName: "twitter",
+    avatarUrl: "https://via.placeholder.com/60",
+    description: "This profile demonstrates action buttons.",
+    profileActions: (
+      <>
+        <Button appearance="unstyled" size="small" aria-label="Share">
+          <Icon name="arrow-up-from-bracket" />
+        </Button>
+        <Button appearance="unstyled" size="small" aria-label="More options">
+          <Icon name="ellipsis-horizontal" />
+        </Button>
+      </>
+    ),
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    name: "Footer Profile",
+    secondaryName: "@footer",
+    partnerName: "twitter",
+    avatarUrl: "https://via.placeholder.com/60",
+    description: "This profile has custom footer content.",
+    footer: (
+      <div style={{ textAlign: "center", color: "#666", fontSize: "12px" }}>
+        Last updated: 2 hours ago
+      </div>
+    ),
+  },
+};
+
+export const YouTubeUser: Story = {
+  args: {
+    name: "YouTube Creator",
+    secondaryName: "@youtubecreator",
+    partnerName: "youtube",
+    avatarUrl: "https://via.placeholder.com/60",
+    description: "Content creator sharing videos with the world.",
+  },
+};
+
+export const TikTokUser: Story = {
+  args: {
+    name: "TikTok Creator",
+    secondaryName: "@tiktokcreator",
+    partnerName: "tiktok",
+    avatarUrl: "https://via.placeholder.com/60",
+    description: "Short-form video content creator.",
+  },
+};
+
+export const DifferentNetworks: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ProfileCard
+        name="Twitter User"
+        secondaryName="@twitteruser"
+        partnerName="twitter"
+        avatarUrl="https://via.placeholder.com/60"
+        description="Active on Twitter"
+      />
+      <ProfileCard
+        name="Facebook User"
+        secondaryName="facebookuser"
+        partnerName="facebook"
+        avatarUrl="https://via.placeholder.com/60"
+        description="Facebook enthusiast"
+      />
+      <ProfileCard
+        name="Instagram User"
+        secondaryName="@instagramuser"
+        partnerName="instagram"
+        avatarUrl="https://via.placeholder.com/60"
+        description="Visual storyteller"
+      />
+      <ProfileCard
+        name="LinkedIn User"
+        secondaryName="linkedinuser"
+        partnerName="linkedin"
+        avatarUrl="https://via.placeholder.com/60"
+        description="Professional networker"
+      />
+      <ProfileCard
+        name="YouTube Creator"
+        secondaryName="@youtubecreator"
+        partnerName="youtube"
+        avatarUrl="https://via.placeholder.com/60"
+        description="Video content creator"
+      />
+      <ProfileCard
+        name="TikTok Creator"
+        secondaryName="@tiktokcreator"
+        partnerName="tiktok"
+        avatarUrl="https://via.placeholder.com/60"
+        description="Short-form video creator"
+      />
+    </div>
+  ),
+};
+
+export const LongContentTruncation: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ maxWidth: "300px" }}>
+        <ProfileCard
+          name="A Very Long Profile Name That Should Truncate Properly"
+          secondaryName="@averylongtwitterhandlethatshouldalsotruncate"
+          partnerName="twitter"
+          avatarUrl="https://via.placeholder.com/60"
+          description="This is a very long bio description that goes on and on with lots of information about the user and their interests and what they do and all sorts of other details that might need to be displayed in a card format but should truncate properly when it gets too long"
+        />
+      </div>
+      <div style={{ maxWidth: "250px" }}>
+        <ProfileCard
+          name="Another Long Name"
+          secondaryName="@anotherlonghandle"
+          partnerName="facebook"
+          avatarUrl="https://via.placeholder.com/60"
+          description="Another long description that should also truncate when the container is smaller and needs to handle overflow text gracefully"
+        />
+      </div>
+    </div>
+  ),
+};