.s-user-card--link",
"description": "Wraps and positions the admin user badge"
},
{
- "class": ".s-badge .s-badge__xs .s-badge__moderator",
+ "class": ".s-badge .s-badge__sm .s-badge__moderator",
"applies": "Child of .s-user-card--link",
"description": "Wraps and positions the staff user badge"
},
{
- "class": ".s-badge .s-badge__xs .s-badge__staff",
+ "class": ".s-badge .s-badge__sm .s-badge__staff",
"applies": "Child of .s-user-card--link",
"description": "Wraps and positions the staff user badge"
},
diff --git a/packages/stacks-docs/product/components/badges.html b/packages/stacks-docs/product/components/badges.html
index 473e20c6b1..42149ca807 100644
--- a/packages/stacks-docs/product/components/badges.html
+++ b/packages/stacks-docs/product/components/badges.html
@@ -8,22 +8,44 @@
Achievement badges that a user earns within a community.
+Achievement and activity badges that a user receives within a community.
Badge that displays the total number of badges of a type a user has earned.
+ {% header "h3", "Tag badges" %} +Achievement badges that a user receives for a specific tag within a community.
Badges come in three sizes.
| Example | +Base | +Filled | Class | Description |
|---|---|---|---|---|
| + {% if type.blingClasses != nil %} + + {{ type.title }} badge + + {% endif %} {% if type.icon != nil %} {% icon type.icon %} {{ type.label }} {% else %} @@ -440,11 +493,28 @@ {% endif %} | ++ + {% if alt_type.blingClasses != nil %} + + {{ alt_type.title }} badge + + {% endif %} + {% if alt_type.icon != nil %} + {% icon alt_type.icon %} {{ alt_type.label }} + {% else %} + {{ alt_type.label }} + {% endif %} + + |
.s-badge
{% if type.class != nil %}
- .{{ type.class }}
+ {% assign classList = type.class | split: ' ' %}
+ {% for className in classList %}
+ .{{ className }}
+ {% endfor %}
{% endif %}
{% if badge.class != nil %}
.{{ badge.class }}
diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html
index dde94f84ca..c5bb1ccf11 100644
--- a/packages/stacks-docs/product/components/user-cards.html
+++ b/packages/stacks-docs/product/components/user-cards.html
@@ -89,7 +89,7 @@
Paul Wright
- Mod
+ Mod
…
- …
+ …
Paul Wright
- Staff
- Admin
+ Staff
+ Admin
Nick Craver
- Mod
+ Mod
+
Mod
{/if}
{#if !deleted && staff}
- Staff
+ Staff
{/if}
{#if !deleted && admin}
- Admin
+ Admin
{/if}
{/if}
diff --git a/packages/stacks-svelte/src/components/index.ts b/packages/stacks-svelte/src/components/index.ts
index a8df722918..16863861a4 100644
--- a/packages/stacks-svelte/src/components/index.ts
+++ b/packages/stacks-svelte/src/components/index.ts
@@ -1,32 +1,33 @@
export { default as ActivityIndicator } from "./ActivityIndicator/ActivityIndicator.svelte";
export { default as Avatar } from "./Avatar/Avatar.svelte";
+export { default as Badge } from "./Badge/Badge.svelte";
export { default as Bling } from "./Bling/Bling.svelte";
export { default as Button } from "./Button/Button.svelte";
-export { default as Icon } from "./Icon/Icon.svelte";
export { default as ExpandingInput } from "./ExpandingInput/ExpandingInput.svelte";
+export { default as Icon } from "./Icon/Icon.svelte";
export { default as Link } from "./Link/Link.svelte";
export { default as Menu } from "./Menu/Menu.svelte";
export { default as MenuDivider } from "./Menu/MenuDivider.svelte";
export { default as MenuItem } from "./Menu/MenuItem.svelte";
export { default as MenuTitle } from "./Menu/MenuTitle.svelte";
-export { default as Spinner } from "./Spinner/Spinner.svelte";
-export { default as Skeleton } from "./Skeleton/Skeleton.svelte";
-export { default as TextInput } from "./TextInput/TextInput.svelte";
export { default as Modal } from "./Modal/Modal.svelte";
export { default as Navigation } from "./Navigation/Navigation.svelte";
export { default as NavigationItem } from "./Navigation/NavigationItem.svelte";
export { default as NavigationTitle } from "./Navigation/NavigationTitle.svelte";
export { default as Notice } from "./Notice/Notice.svelte";
export { default as NoticeAction } from "./Notice/NoticeAction.svelte";
-export { default as Toaster, showToast, hideToast } from "./Toast/Toast.svelte";
export { default as PaginationController } from "./Pagination/PaginationController.svelte";
export { default as Popover } from "./Popover/Popover.svelte";
-export { default as PopoverReference } from "./Popover/PopoverReference.svelte";
export { default as PopoverCloseButton } from "./Popover/PopoverCloseButton.svelte";
export { default as PopoverContent } from "./Popover/PopoverContent.svelte";
+export { default as PopoverReference } from "./Popover/PopoverReference.svelte";
export { default as PostSummary } from "./PostSummary/PostSummary.svelte";
export { default as PostSummaryAnswer } from "./PostSummary/PostSummaryAnswer.svelte";
export { default as Select } from "./Select/Select.svelte";
export { default as SelectItem } from "./Select/SelectItem.svelte";
+export { default as Skeleton } from "./Skeleton/Skeleton.svelte";
+export { default as Spinner } from "./Spinner/Spinner.svelte";
export { default as Tag } from "./Tag/Tag.svelte";
+export { default as TextInput } from "./TextInput/TextInput.svelte";
+export { default as Toaster, showToast, hideToast } from "./Toast/Toast.svelte";
export { default as UserCard } from "./UserCard/UserCard.svelte";
|