|
- {% if type.repType != nil %}
-
- {{ type.label }}
-
- {% else %}
- {{ type.label }}
- {% endif %}
+
+ {{ type.repType }} bling
+
+ {{ type.label }}
|
@@ -76,19 +72,22 @@
{% highlight html %}
-
- 635
+
+ gold bling
+ 635
-
- 7624
+
+ silver bling
+ 7624
-
- 8234
+
+ bronze bling
+ 8234
{% endhighlight %}
@@ -108,13 +107,10 @@
|
- {% if type.repType != nil %}
-
- {{ type.label }}
-
- {% else %}
- {{ type.label }}
- {% endif %}
+
+ {{ type.repType }} bling
+
+ {{ type.label }}
|
@@ -163,13 +159,9 @@
|
|
- {% if type.repType != nil %}
-
- {{ type.label }}
-
- {% else %}
- {{ type.label }}
- {% endif %}
+
+
+ {{ type.label }}
|
diff --git a/packages/stacks-docs/product/components/bling.html b/packages/stacks-docs/product/components/bling.html
new file mode 100644
index 0000000000..2023cdd5ef
--- /dev/null
+++ b/packages/stacks-docs/product/components/bling.html
@@ -0,0 +1,156 @@
+---
+layout: page
+title: Bling
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-bling--docs
+description: Bling is used to indicate award type in badges, topbar, and user cards.
+tags: components
+---
+
+ {% header "h2", "Types" %}
+ Use the clear bling variant only when its associated color is already present in the component, such as within a colored tag badge or alongside a filled element.
+
+{% highlight html %}
+
+ …
+
+
+ …
+
+
+ …
+
+
+ …
+
+{% endhighlight %}
+
+
+
+
+
+ | Example |
+ Class |
+ Description |
+
+
+
+ {% for bling in bling.types %}
+ {% unless bling.name == "rep" or bling.name == "activity" %}
+
+ |
+
+ {{ bling.name }} bling
+
+ |
+
+
+ .s-bling
+ {% if bling.name != "default" %}
+ .s-bling__{{ bling.modifier }}
+ {% endif %}
+
+ |
+ {{ bling.descriptions.base }} |
+
+ {% endunless %}
+ {% endfor %}
+
+
+
+
+
+
+
+
+ {% header "h2", "Filled" %}
+ Use the filled bling style to represent a specific achievement badge or to display the total count of badges a user has earned.
+
+{% highlight html %}
+ …
+ …
+ …
+ …
+ …
+ …
+{% endhighlight %}
+
+
+
+
+
+ | Example |
+ Class |
+ Description |
+
+
+
+ {% for bling in bling.types %}
+
+ |
+
+ {{ bling.name }} bling
+
+ |
+
+
+ .s-bling
+ .s-bling__filled
+ {% if bling.name != "default" %}
+ .s-bling__{{ bling.modifier }}
+ {% endif %}
+
+ |
+ {{ bling.descriptions.filled }} |
+
+ {% endfor %}
+
+
+
+
+
+
+
+
+ {% header "h2", "Sizes" %}
+ A bling component has a default size. To change the bling’s size, apply one of the following sizing classes along with the base .s-bling class.
+
+{% highlight html %}
+ …
+ …
+ …
+{% endhighlight %}
+
+
+
+
+
+ | Example |
+ Class |
+ Description |
+
+
+
+ {% for size in bling.sizes %}
+
+ |
+
+ {{ size }} bling
+
+ |
+
+
+ .s-bling
+ {% if size != "default" %}
+ .s-bling__{{ size }}
+ {% endif %}
+
+ |
+ A “{{ size }}” bling. |
+
+ {% endfor %}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/stacks-docs/product/components/tables.html b/packages/stacks-docs/product/components/tables.html
index 7ec5893fbd..f6c4bd164c 100644
--- a/packages/stacks-docs/product/components/tables.html
+++ b/packages/stacks-docs/product/components/tables.html
@@ -50,9 +50,24 @@
- 350
- - 1
- - 2
- - 7
+ -
+
+ gold bling
+
+ 1
+
+ -
+
+ silver bling
+
+ 2
+
+ -
+
+ bronze bling
+
+ 7
+
|
@@ -65,8 +80,17 @@
- 260
- - 1
- - 4
+ -
+
+ gold bling
+
+ 1
+
-
+
+ bronze bling
+
+ 4
+
@@ -79,9 +103,24 @@
- 1460
- - 1
- - 3
- - 12
+ -
+
+ gold bling
+
+ 1
+
+ -
+
+ silver bling
+
+ 3
+
+ -
+
+ bronze bling
+
+ 12
+
diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html
index 8133809996..dde94f84ca 100644
--- a/packages/stacks-docs/product/components/user-cards.html
+++ b/packages/stacks-docs/product/components/user-cards.html
@@ -42,9 +42,9 @@
…
- …
- - …
- - …
- - …
+ - …
+ - …
+ - …
@@ -59,9 +59,24 @@
Paul Wright
- 2,500
- - 5
- - 9
- - 1
+ -
+
+ gold bling
+
+ 5
+
+ -
+
+ silver bling
+
+ 9
+
+ -
+
+ bronze bling
+
+ 1
+
@@ -78,9 +93,24 @@
- 2,500
- - 5
- - 9
- - 1
+ -
+
+ gold bling
+
+ 5
+
+ -
+
+ silver bling
+
+ 9
+
+ -
+
+ bronze bling
+
+ 1
+
@@ -102,9 +132,9 @@
…
- …
- - …
- - …
- - …
+ - …
+ - …
+ - …
@@ -124,9 +154,24 @@
Paul Wright
- 2,500
- - 5
- - 9
- - 1
+ -
+
+ gold bling
+
+ 5
+
+ -
+
+ silver bling
+
+ 9
+
+ -
+
+ bronze bling
+
+ 1
+
@@ -142,9 +187,24 @@
Paul Wright
- 2,500
- - 5
- - 9
- - 1
+ -
+
+ gold bling
+
+ 5
+
+ -
+
+ silver bling
+
+ 9
+
+ -
+
+ bronze bling
+
+ 1
+
@@ -163,9 +223,24 @@
Paul Wright
- 2,500
- - 5
- - 9
- - 1
+ -
+
+ gold bling
+
+ 5
+
+ -
+
+ silver bling
+
+ 9
+
+ -
+
+ bronze bling
+
+ 1
+
@@ -194,9 +269,9 @@
- …
- - …
- - …
- - …
+ - …
+ - …
+ - …
…
@@ -333,9 +458,24 @@
- 2,500
- - 5
- - 9
- - 1
+ -
+
+ gold bling
+
+ 5
+
+ -
+
+ silver bling
+
+ 9
+
+ -
+
+ bronze bling
+
+ 1
+
diff --git a/packages/stacks-svelte/src/components/AwardBling/AwardBling.stories.svelte b/packages/stacks-svelte/src/components/AwardBling/AwardBling.stories.svelte
deleted file mode 100644
index 70670af0ad..0000000000
--- a/packages/stacks-svelte/src/components/AwardBling/AwardBling.stories.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-
-
-
- {#snippet template(args)}
-
- {@render createSnippet(args.children as unknown as string)()}
-
- {/snippet}
-
-
-
-
-
-
-
- | Type |
- Example |
-
-
-
- {#each AwardBlingTypes as type (type)}
-
- |
- {type}
- |
-
-
- 23
-
- |
-
- {/each}
-
-
-
-
diff --git a/packages/stacks-svelte/src/components/AwardBling/AwardBling.svelte b/packages/stacks-svelte/src/components/AwardBling/AwardBling.svelte
deleted file mode 100644
index c7da8b1f11..0000000000
--- a/packages/stacks-svelte/src/components/AwardBling/AwardBling.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-
-
-
-
-
- {@render children?.()}
- {name}
-
diff --git a/packages/stacks-svelte/src/components/AwardBling/AwardBling.test.ts b/packages/stacks-svelte/src/components/AwardBling/AwardBling.test.ts
deleted file mode 100644
index 762e786bbb..0000000000
--- a/packages/stacks-svelte/src/components/AwardBling/AwardBling.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { createRawSnippet } from "svelte";
-import { expect } from "@open-wc/testing";
-import { render, screen } from "@testing-library/svelte";
-
-import AwardBling from "./AwardBling.svelte";
-
-const children = createRawSnippet(() => ({
- render: () => "23",
-}));
-
-describe("AwardBling", () => {
- it("should render the award bling with the required name as screen reader text", () => {
- render(AwardBling, {
- name: "test award bling",
- type: "gold",
- children,
- });
- expect(screen.getByText("test award bling")).to.exist;
- });
-
- it("should render the award bling as the specified type", async () => {
- render(AwardBling, {
- name: "test award bling",
- type: "silver",
- children,
- });
- expect(
- screen.getByText("test award bling").parentElement
- ).to.have.class("s-award-bling__silver");
- });
-
- it("should render the award bling with the specified content", async () => {
- render(AwardBling, {
- name: "test award bling",
- type: "bronze",
- children,
- });
- expect(screen.getByText("23")).to.exist;
- });
-});
diff --git a/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte b/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
index 04717e4101..75ee468f5d 100644
--- a/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
+++ b/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
@@ -37,7 +37,7 @@
const { Story } = defineMeta({
title: "Components/Badge",
component: Badge,
- tags: ["!autodocs", "!dev"], // This hides the stories and link in sidebar
+ // tags: ["!autodocs", "!dev"], // This hides the stories and link in sidebar
argTypes: {
award: {
control: "select",
diff --git a/packages/stacks-svelte/src/components/Badge/Badge.svelte b/packages/stacks-svelte/src/components/Badge/Badge.svelte
index 1c3cf6b527..538e656582 100644
--- a/packages/stacks-svelte/src/components/Badge/Badge.svelte
+++ b/packages/stacks-svelte/src/components/Badge/Badge.svelte
@@ -24,14 +24,14 @@
+
+
+ {#snippet template(args)}
+
+ {/snippet}
+
+
+
+
+
+
+
+ | Type |
+ Example |
+
+
+
+ {#each BlingTypes as type (type)}
+ {#if type !== "rep" && type !== "activity"}
+
+ |
+ {type || "default"}
+ |
+
+
+ |
+
+ {/if}
+ {/each}
+
+
+
+
+
+
+
+
+
+
+ | Type |
+ Example |
+
+
+
+ {#each BlingTypes as type (type)}
+
+ |
+ {type || "default"}
+ |
+
+
+ |
+
+ {/each}
+
+
+
+
+
+
+
+
+
+
+ | Type |
+ Example |
+
+
+
+ {#each BlingSizes as size (size)}
+
+ |
+ {size || "default"}
+ |
+
+
+ |
+
+ {/each}
+
+
+
+
diff --git a/packages/stacks-svelte/src/components/Bling/Bling.svelte b/packages/stacks-svelte/src/components/Bling/Bling.svelte
new file mode 100644
index 0000000000..51f956e519
--- /dev/null
+++ b/packages/stacks-svelte/src/components/Bling/Bling.svelte
@@ -0,0 +1,68 @@
+
+
+
+
+
+ {name}
+
diff --git a/packages/stacks-svelte/src/components/Bling/Bling.test.ts b/packages/stacks-svelte/src/components/Bling/Bling.test.ts
new file mode 100644
index 0000000000..18cbc82cfa
--- /dev/null
+++ b/packages/stacks-svelte/src/components/Bling/Bling.test.ts
@@ -0,0 +1,43 @@
+import { expect } from "@open-wc/testing";
+import { render, screen } from "@testing-library/svelte";
+
+import Bling from "./Bling.svelte";
+
+describe("Bling", () => {
+ it("should render the bling with the required name as screen reader text", () => {
+ render(Bling, {
+ name: "test bling",
+ });
+ expect(screen.getByText("test bling")).to.exist;
+ });
+
+ it("should render the bling as the specified type", async () => {
+ render(Bling, {
+ name: "test silver bling",
+ type: "silver",
+ });
+ expect(
+ screen.getByText("test silver bling").parentElement
+ ).to.have.class("s-bling__silver");
+ });
+
+ it("should render the bling as filled", async () => {
+ render(Bling, {
+ name: "test filled bling",
+ filled: true,
+ });
+ expect(
+ screen.getByText("test filled bling").parentElement
+ ).to.have.class("s-bling__filled");
+ });
+
+ it("should render the bling as with the correct size", async () => {
+ render(Bling, {
+ name: "test lg bling",
+ size: "lg",
+ });
+ expect(screen.getByText("test lg bling").parentElement).to.have.class(
+ "s-bling__lg"
+ );
+ });
+});
diff --git a/packages/stacks-svelte/src/components/UserCard/UserCard.svelte b/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
index 188dda1351..75acf450bb 100644
--- a/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
+++ b/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
@@ -6,6 +6,7 @@
|