The Base style is the standard variant used to connect a user to their content, appearing most frequently in post-summary lists and on question pages. This view is flexible, allowing various metadata fields to be shown or hidden as needed.
+ {% tip, "info", "mb24" %} + Note on timestamps: Hovering over the timestamp displays a popover with precise dates and a link to the post's /timeline. For authors, this shows the post creation date; for editors, it shows the last modification date. + {% endtip %}
{% highlight html %}
{% endhighlight %}
-
-
- {% header "h3", "Highlighted" %}
-
-
-
+
-
-
- Paul Wright
-
+
-
-
- 2,500 -
- - - gold bling - - 5 - -
- - - silver bling - - 9 - -
- - - bronze bling - - 1 - -
SofiaAlc
+
Highlights the entire user card by adding a background color, some padding, and rounded corners. Used for post authors and edits.
-
-{% highlight html %}
-
-{% endhighlight %}
-
- {% header "h3", "Full" %}
-
-
-
-
-
-
-
+
-
+
-
-
- Paul Wright
-
- -
-
- 2,500 -
- - - gold bling - - 5 - -
- - - silver bling - - 9 - -
- - - bronze bling - - 1 - -
-
-
-
-
-
-
-
-
-
-
-
- Paul Wright
-
- -
-
- 2,500 -
- - - gold bling - - 5 - -
- - - silver bling - - 9 - -
- - - bronze bling - - 1 - -
- {% icon "StarVerifiedSm" %} Recognized by Hum
-
-
-
-
-
-
-
-
-
+
+
- Paul Wright
-
- -
-
- 2,500 -
- - - gold bling - - 5 - -
- - - silver bling - - 9 - -
- - - bronze bling - - 1 - -
- {% icon "StarVerifiedSm" %} Recognized by Hum
-
- SofiaAlc
+
Displays a larger avatar, best paired with additional tags meta data. Currently used in user directories.
-
-{% highlight html %}
-
-{% endhighlight %}
-
-
-
-
-
-
-
-
-
- Paul Wright
- Staff
- Admin
-
-
-
- 2,500 +
- + + reputation bling + + 1,775 +
- gold bling - 5
- silver bling - 9
- bronze bling - 1
Paris, France
-
+
-
-
-
-
-
-
- Nick Craver
- Mod
+
+
+
+
-
+
+
SofiaAlc
+
+ -
-
- 17k +
- + + reputation bling + + 1,775 +
- gold bling - 108 + 12
- silver bling - 265 + 8
- bronze bling - 812 + 4
Architecture Lead
- North Carolina
-
+
-
-
-
-
- {% header "h3", "Small" %}
+ {% header "h3", "with user badges" %}
+
-
- Aaron Shekey
+
+
+
-
-
- -
-
- 768 -
- - - silver bling - - 9 - -
- - - bronze bling - - 1 - -
Senior Product Designer
- Minneapolis, MN
-
-
-
-
-
-
-
- Aaron Shekey
-
-
- -
-
- 768 -
- - - silver bling - - 9 - -
- - - bronze bling - - 1 - -
Minneapolis, MN
-
- {% icon "StarVerifiedSm" %} Recognized by Hum
+
Adds the User badge indicator to the usercard. Use this to signify the official role, status, or origin of the account (such as Moderator, Staff, or Bot) directly alongside the user's name.
{% highlight html %}
-
+
+
+
+
+
+
+
+
+
{% endhighlight %}
- {% header "h3", "Minimal" %}
-
+
+
+
+…
+ …
+ …
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SofiaAlc
+ Mod
+
-
-
- 2,500 +
- + + reputation bling + + 1,775 +
- gold bling - 5
- silver bling - 9
- bronze bling - 1
+
+
+
+
+
+
+
SofiaAlc
+ Staff
+
+ -
+
- + + reputation bling + + 1,775 + +
- + + gold bling + + 12 + +
- + + silver bling + + 8 + +
- + + bronze bling + + 4 + +
- Minimal user cards reduce the amount of information down to who asked the question, how much rep they have, and when the action was taken. To read as plainly as possible, e.g. “Paul Wright modified 3 minutes ago,” we change the positioning of the time, and remove any reputation bling, leaving just the aggregated reputation. -
+ {% header "h3", "Sizes" %} + {% header "h4", "Small" %} +Use the Small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies.
{% highlight html %}
-
+
-
+
+
+
{% endhighlight %}
-
-
-
-
-
-
-
-
- {% header "h3", "Deleted" %}
-
When a user is deleted, we still need to show their name, but we strip the meta data.
+ {% header "h4", "Default" %} +Use the Default variant when the user needs a more primary focus of the content. This style features a larger avatar to establish top-level hierarchy like question and answer authors.
{% highlight html %}
-
-
-
+
-
-
+
+
{% endhighlight %}
-
-
-
-
-
-
-
-
-
@@ -179,25 +97,3 @@
-
-
-
-
-
-
diff --git a/packages/stacks-svelte/src/components/UserCard/UserCard.svelte b/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
index eb11b1f7e7..b6e4dd9e34 100644
--- a/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
+++ b/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
@@ -1,14 +1,11 @@
-
- {i18nViewAnswersText}
import { defineMeta } from "@storybook/addon-svelte-csf";
- import { createRawSnippet } from "svelte";
- import Tag from "../Tag/Tag.svelte";
import UserCard, { type Size } from "./UserCard.svelte";
- import Icon from "../Icon/Icon.svelte";
- import { IconStarVerifiedSm } from "@stackoverflow/stacks-icons-legacy/icons";
- const createSnippet = (markup = "") =>
- createRawSnippet(() => ({
- render: () => markup,
- }));
-
- const UserCardSizes: (Size | undefined)[] = [
- undefined,
- "full",
- "small",
- "minimal",
- ];
+ const UserCardSizes: (Size | undefined)[] = [undefined, "small"];
const baseArgs = {
avatar: "https://picsum.photos/128",
href: "#",
- name: "Josephine Doe",
- timestamp: "asked 2 hours ago",
- reputation: "1,226",
+ name: "SofiaAlc",
+ timestamp: "asked 2 hr ago",
+ reputation: "1,775",
gold: 12,
- silver: 23,
- bronze: 86,
+ silver: 8,
+ bronze: 4,
};
const { Story } = defineMeta({
@@ -37,34 +23,13 @@
control: "select",
options: UserCardSizes,
},
- tags: {
- control: "select",
- options: ["no tags", "tags"],
- mapping: {
- "no tags": "",
- "tags": 'javascript',
- },
- },
- type: {
- control: "select",
- options: ["no type", "type"],
- mapping: {
- "no type": "",
- "type": `${IconStarVerifiedSm} Recognized by Hum`,
- },
- },
},
});
{#snippet template(args)}
- {@const { tags, type, ...restArgs } = args}
-
@@ -105,53 +70,6 @@
-
-
-
+
+
+
+
-
-
+
- Paul Wright
-
+
+ SofiaAlc
+
-
-
+
\ No newline at end of file
diff --git a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
index 3bc507526a..8fabf4f487 100644
--- a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
+++ b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
@@ -330,7 +330,7 @@
{/if}
-
+
+
+
+
+
+
+
+ -
+
- + + reputation bling + + 1,775 + +
- + + gold bling + + 12 + +
- + + silver bling + + 8 + +
- + + bronze bling + + 4 + +
+
+
+
-
-
+
- Paul Wright
-
+
+ SofiaAlc
+ Mod
+
-
-
-
-
-
-
-
-
-| Property | -Example | -
|---|---|
| - {prop} - | -
- |
-
-
- {#snippet tags()}
- css
- reactjs
- javascript
- {/snippet}
-
-
-
-
- {#snippet type()}
-
-
-
- {#if timestamp && size !== "minimal" && size !== "small"}
-
- {/if}
-
- {#if deleted}
-
+
{#if name}
- {name}
- {#if !deleted && moderator}
-
diff --git a/packages/stacks-svelte/src/components/UserCard/UserCard.test.ts b/packages/stacks-svelte/src/components/UserCard/UserCard.test.ts
index 57ab8c3c92..e21ecc4158 100644
--- a/packages/stacks-svelte/src/components/UserCard/UserCard.test.ts
+++ b/packages/stacks-svelte/src/components/UserCard/UserCard.test.ts
@@ -1,17 +1,8 @@
-import { createRawSnippet } from "svelte";
import { expect } from "@open-wc/testing";
import { render, screen } from "@testing-library/svelte";
import UserCard from "./UserCard.svelte";
-const tags = createRawSnippet(() => ({
- render: () => 'JavaScript',
-}));
-
-const type = createRawSnippet(() => ({
- render: () => "Recognized by Hum",
-}));
-
describe("UserCard", () => {
it("should render the user name", () => {
render(UserCard, {
@@ -31,24 +22,6 @@ describe("UserCard", () => {
expect(avatarImg).to.have.attr("src", "https://picsum.photos/128");
});
- it("should render the user role", () => {
- render(UserCard, {
- name: "John Doe",
- avatar: "https://picsum.photos/128",
- role: "Developer",
- });
- expect(screen.getByText("Developer")).to.exist;
- });
-
- it("should render the user location", () => {
- render(UserCard, {
- name: "John Doe",
- avatar: "https://picsum.photos/128",
- location: "New York",
- });
- expect(screen.getByText("New York")).to.exist;
- });
-
it("should render the user reputation", () => {
render(UserCard, {
name: "John Doe",
@@ -85,87 +58,11 @@ describe("UserCard", () => {
render(UserCard, {
name: "John Doe",
avatar: "https://picsum.photos/128",
- size: "full",
+ size: "small",
});
expect(
screen.getAllByText("John Doe")[1].closest(".s-user-card")
- ).to.have.class("s-user-card__full");
- });
-
- it("should render the user card with the highlighted class", () => {
- render(UserCard, {
- name: "John Doe",
- avatar: "https://picsum.photos/128",
- highlighted: true,
- });
- expect(
- screen.getAllByText("John Doe")[1].closest(".s-user-card")
- ).to.have.class("s-user-card__highlighted");
- });
-
- it("should render the user card with the deleted class", () => {
- render(UserCard, {
- name: "John Doe",
- avatar: "https://picsum.photos/128",
- deleted: true,
- });
- expect(
- screen.getAllByText("John Doe")[1].closest(".s-user-card")
- ).to.have.class("s-user-card__deleted");
- });
-
- it("should render the Icon UserFill instead of Avatar and name unlinked when deleted prop is true", () => {
- render(UserCard, {
- name: "John Doe",
- avatar: "https://picsum.photos/128",
- deleted: true,
- href: "#",
- });
- const avatarImg = screen
- .getByTitle("John Doe")
- .closest(".s-user-card--avatar");
- expect(avatarImg).to.have.class("IconUserFill");
- });
-
- it("should not render many properties when the deleted prop is true", () => {
- render(UserCard, {
- name: "John Doe",
- admin: true,
- avatar: "https://picsum.photos/128",
- bronze: 3333,
- gold: 1111,
- href: "#",
- location: "Calgary",
- moderator: true,
- reputation: 1234,
- role: "Staff Engineer",
- silver: 2222,
- staff: true,
- timestamp: "Asked 2 hours ago",
- deleted: true,
- size: "full",
- type,
- tags,
- });
- // Deleted user card should still render these properties
- expect(screen.getByTitle("John Doe")).to.exist; // name
- expect(screen.getByText("Asked 2 hours ago")).to.exist; // timestamp
-
- // Deleted user card should not render these properties
- expect(screen.queryByText("Admin")).not.to.exist; // admin badge
- expect(screen.queryByText("Mod")).not.to.exist; // moderator badge
- expect(screen.queryByText("Staff")).not.to.exist; // staff badge
-
- expect(screen.queryByText("1111")).not.to.exist; // gold
- expect(screen.queryByText("2222")).not.to.exist; // silver
- expect(screen.queryByText("3333")).not.to.exist; // bronze
-
- expect(screen.queryByText("1234")).not.to.exist; // reputation
- expect(screen.queryByText("Calgary")).not.to.exist; // location
- expect(screen.queryByText("Staff Engineer")).not.to.exist; // role
-
- expect(screen.queryByText("Recognized by Hum")).not.to.exist; // type snippet text
- expect(screen.queryByText("JavaScript")).not.to.exist; // tags snippet text
+ ).to.have.class("s-user-card__small");
});
it("should render the avatar and name as links", () => {
@@ -177,7 +74,7 @@ describe("UserCard", () => {
const avatarImg = screen.getByRole("presentation").parentElement;
const name = screen.getAllByText("John Doe")[1];
expect(avatarImg).to.have.attr("href", "#");
- expect(name).to.have.attr("href", "#");
+ expect(name.parentElement).to.have.attr("href", "#");
});
it("should render the user card with arbitrary classes", () => {
@@ -203,27 +100,4 @@ describe("UserCard", () => {
expect(screen.getByText("Mod")).to.exist;
expect(screen.getByText("Staff")).to.exist;
});
-
- it("should render the user card with the tags slot within appropriate container", () => {
- render(UserCard, {
- name: "John Doe",
- avatar: "https://picsum.photos/128",
- tags,
- });
-
- expect(screen.getByText("JavaScript").closest(".s-user-card--tags")).to
- .exist;
- });
-
- it("should render the user card with the type slot within appropriate container", () => {
- render(UserCard, {
- name: "John Doe",
- avatar: "https://picsum.photos/128",
- type,
- });
-
- expect(
- screen.getByText("Recognized by Hum").closest(".s-user-card--type")
- ).to.exist;
- });
});
+
- {#if !deleted && type}
- {name}
+ {#if moderator}
+
Mod
{/if}
- {#if !deleted && staff}
- Staff
+ {#if staff}
+
+ Staff
+
{/if}
- {#if !deleted && admin}
- Admin
+ {#if admin}
+
+ Admin
+
{/if}
{/if}
-
- {#if !deleted && (reputation || gold || silver || bronze)}
- -
- {#if reputation}
-
- {reputation} - {/if} - {#if gold} -
{role}
- {/if}
-
- {#if !deleted && location}
- {location}
- {/if}
-
- {#if timestamp && (size === "minimal" || size === "small")}
-
- {/if}
-
- {#if !deleted && tags}
-
- {/if}
- {@render type()}
-
+ {#if reputation || gold || silver || bronze}
+ -
+ {#if reputation}
+
-
+
+ {reputation} +
+ {/if}
+ {#if gold}
+ -
+
+ {gold} gold awards +
+ {/if}
+ {#if silver}
+ -
+
+ {silver} silver awards +
+ {/if}
+ {#if bronze}
+ -
+
+ {bronze} bronze awards +
+ {/if}
+