@sproutsocial/seeds-react-profile 0.3.35 → 0.3.38

package/src/ProfileTokenTailwind.tsx

@@ -0,0 +1,40 @@
+/**
+ * Tailwind/CSS-class implementation of ProfileToken.
+ * Uses Seeds ProfileToken CSS classes from profile-token.css.
+ *
+ * The composed Token component is not yet migrated, so its styling is applied
+ * via its className prop.
+ */
+
+import { Token } from "@sproutsocial/seeds-react-token";
+import { InlineProfile } from "./InlineProfile";
+import type { ProfileTokenProps } from "./types";
+import { cn } from "./cn";
+
+/**
+ * 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 ProfileTokenTailwind = ({
+  className,
+  onClick,
+  tokenProps,
+  ...props
+}: ProfileTokenProps) => {
+  const { className: tokenClassName, ...restTokenProps } =
+    tokenProps ?? ({} as NonNullable<ProfileTokenProps["tokenProps"]>);
+  return (
+    <Token
+      className={cn("seeds-profile-token", className, tokenClassName)}
+      closeable={false}
+      onClick={onClick}
+      {...restTokenProps}
+    >
+      <InlineProfile size="small" {...props} />
+    </Token>
+  );
+};

package/src/__tests__/InlineProfile.test.tsx

@@ -1,3 +1,4 @@
+import styled from "styled-components";
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { InlineProfile } from "../InlineProfile";
 
@@ -80,4 +81,40 @@ describe("InlineProfile", () => {
 
     expect(screen.getByLabelText("Verified account")).toBeInTheDocument();
   });
+
+  it("renders the Tailwind CSS-class implementation by default", () => {
+    const { container } = render(<InlineProfile name="John Doe" />);
+
+    // The default (no styled props / no styled() extension) path renders the
+    // pure CSS-class implementation, whose root carries the seeds-inline-profile class.
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstChild).toHaveClass("seeds-inline-profile");
+  });
+
+  it("merges a consumer className onto the Tailwind root", () => {
+    const { container } = render(
+      <InlineProfile name="John Doe" className="custom-inline" />
+    );
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstChild).toHaveClass("seeds-inline-profile");
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstChild).toHaveClass("custom-inline");
+  });
+
+  it("falls back to the styled-components implementation when extended with styled()", () => {
+    const ExtendedInlineProfile = styled(InlineProfile)`
+      color: red;
+    `;
+
+    const { container } = render(<ExtendedInlineProfile name="John Doe" />);
+
+    // Content still renders through the legacy styled-components path.
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    // The styled() extension injects a generated `sc-…` class name, which
+    // routes to the SC implementation — so the Tailwind class must NOT be
+    // present.
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstChild).not.toHaveClass("seeds-inline-profile");
+  });
 });

package/src/__tests__/ProfileCard.test.tsx

@@ -146,6 +146,70 @@ describe("ProfileCard", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("applies an explicit bannerColor as the header background (Tailwind path)", () => {
+    const { container } = render(
+      <ProfileCard {...defaultProps} bannerColor="#123456" />
+    );
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const header = container.querySelector(".seeds-profile-card-header");
+    expect(header).not.toBeNull();
+    expect(header?.getAttribute("style")).toContain("#123456");
+  });
+
+  it("falls back to the network color variable when only partnerName is provided", () => {
+    // defaultProps.partnerName is "twitter" and no bannerColor is passed.
+    const { container } = render(<ProfileCard {...defaultProps} />);
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const header = container.querySelector(".seeds-profile-card-header");
+    expect(header).not.toBeNull();
+    expect(header?.getAttribute("style")).toContain(
+      "var(--color-network-twitter)"
+    );
+  });
+
+  it("renders no header background when neither bannerColor nor a partner network is provided", () => {
+    const { partnerName, ...propsWithoutPartner } = defaultProps;
+    const { container } = render(<ProfileCard {...propsWithoutPartner} />);
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const header = container.querySelector(".seeds-profile-card-header");
+    expect(header).not.toBeNull();
+    expect(header?.getAttribute("style") ?? "").not.toContain("background");
+  });
+
+  it("forwards cardProps.className to the card root while preserving the base class (Tailwind path)", () => {
+    const { container } = render(
+      <ProfileCard
+        {...defaultProps}
+        cardProps={{ role: "presentation", className: "p-300" }}
+      />
+    );
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const root = container.querySelector(".seeds-profile-card");
+    expect(root).not.toBeNull();
+    expect(root?.className).toContain("seeds-profile-card");
+    expect(root?.className).toContain("p-300");
+  });
+
+  it("routes to the styled-components path when cardProps carries a styled-system prop", () => {
+    const { container } = render(
+      <ProfileCard
+        {...defaultProps}
+        cardProps={{ role: "presentation", p: 400 }}
+      />
+    );
+
+    // The styled-components path renders the composed Card, not the Tailwind
+    // root, so the Tailwind-only class must be absent — confirming styled-system
+    // props passed via cardProps reach the SC path (backward compat).
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const tailwindRoot = container.querySelector(".seeds-profile-card");
+    expect(tailwindRoot).toBeNull();
+  });
+
   it("renders with all features combined", () => {
     render(
       <ProfileCard

package/src/__tests__/ProfileToken.test.tsx

@@ -8,6 +8,15 @@ describe("ProfileToken", () => {
     expect(screen.getByText("John Doe")).toBeInTheDocument();
   });
 
+  it("renders the Tailwind CSS-class implementation by default", () => {
+    const { container } = render(
+      <ProfileToken name="John Doe" partnerName="twitter" />
+    );
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.firstChild).toHaveClass("seeds-profile-token");
+  });
+
   it("applies custom className", () => {
     const { container } = render(
       <ProfileToken
@@ -17,6 +26,9 @@ describe("ProfileToken", () => {
       />
     );
 
+    // The Tailwind path merges the base token class with the consumer className.
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.firstChild).toHaveClass("seeds-profile-token");
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     expect(container.firstChild).toHaveClass("custom-token");
   });

package/src/cn.ts

@@ -0,0 +1,28 @@
+/**
+ * Local class-name merge helper for the Tailwind/CSS-class implementations.
+ *
+ * Copied verbatim from seeds-react-button's ButtonTailwind.tsx — `cn` is NOT
+ * exported from @sproutsocial/seeds-react-utilities, so each migrated package
+ * keeps its own local copy.
+ */
+export function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}

package/src/inline-profile.css

@@ -0,0 +1,73 @@
+/**
+ * Seeds InlineProfile component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ */
+
+@layer components {
+  .seeds-inline-profile {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-200);
+    max-width: 100%;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-subtext);
+    text-align: inherit;
+  }
+
+  .seeds-inline-profile-avatar {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .seeds-inline-profile-content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-200);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .seeds-inline-profile-network {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .seeds-inline-profile-text {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-200);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .seeds-inline-profile-name {
+    display: inline-block;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-inline-profile-handle {
+    display: inline-block;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-family: var(--font-family);
+    color: var(--color-text-subtext);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/profile-card.css

@@ -0,0 +1,74 @@
+/**
+ * Seeds ProfileCard component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * The header background color is dynamic (consumer bannerColor or the network
+ * color for the partner) and is supplied via the
+ * --seeds-profile-card-banner-bg custom property set as an inline style on the
+ * header element; the background declaration below consumes it.
+ */
+
+@layer components {
+  .seeds-profile-card {
+    max-width: 300px;
+    border-radius: var(--radius-500);
+    background-color: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+  }
+
+  .seeds-profile-card-header {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    height: 80px;
+    padding: var(--space-400) var(--space-400) 0 var(--space-400);
+    margin-bottom: 0;
+    color: var(--color-text-inverse);
+    background: var(--seeds-profile-card-banner-bg, transparent);
+    border-radius: var(--radius-500) var(--radius-500) 0 0;
+  }
+
+  .seeds-profile-card-footer {
+    border-top: 1px solid var(--color-container-border-base);
+    border-radius: 0 0 var(--radius-500) var(--radius-500);
+    padding: var(--space-400);
+  }
+
+  .seeds-profile-card-banner-content {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .seeds-profile-card-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-100);
+    padding: 0 var(--space-300);
+  }
+
+  .seeds-profile-card-actions:empty {
+    min-height: 44px;
+  }
+
+  .seeds-profile-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-300);
+    padding: 0 var(--space-400) var(--space-400);
+  }
+
+  .seeds-profile-card-name-section {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200);
+  }
+
+  .seeds-profile-card-info-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+  }
+}

package/src/profile-token.css

@@ -0,0 +1,23 @@
+/**
+ * Seeds ProfileToken component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ */
+
+@layer components {
+  /*
+   * The rendered element carries both .seeds-token (from Token) and
+   * .seeds-profile-token at equal specificity, so the tighter profile padding
+   * would otherwise depend on CSS concatenation order. The compound selector
+   * raises specificity so this override deterministically wins over .seeds-token.
+   */
+  .seeds-token.seeds-profile-token {
+    box-sizing: border-box;
+    display: inline-flex;
+    max-width: 100%;
+    vertical-align: middle;
+    padding: var(--space-100) var(--space-200);
+    margin: var(--space-100) 0;
+  }
+}