feat(badge): add ai variant (#1853)

* feat(badge): add ai variant

[STACKS-686](https://stackoverflow.atlassian.net/browse/STACKS-686)

* fix minor typo

* Group ai, bot badges under "user" group

* Unify AI badge styles with badges

docs/_data/badges.json

@@ -219,6 +219,22 @@
           "label": "Staff",
           "labelSm": "Staff",
           "description": "Badge indicating user is staff."
+        },
+        {
+          "title": "AI",
+          "class": "s-badge__ai",
+          "html": "s-badge s-badge__ai",
+          "label": "AI",
+          "labelSm": "AI",
+          "description": "Badge indicating content is AI generated."
+        },
+        {
+          "title": "Bot",
+          "class": "s-badge__bot",
+          "html": "s-badge s-badge__bot",
+          "label": "Bot",
+          "labelSm": "Bot",
+          "description": "Badge indicating user is a bot."
         }
       ]
     }

docs/product/components/badges.html

@@ -372,6 +372,12 @@
 <span class="s-badge s-badge__staff">Staff</span>
 <span class="s-badge s-badge__staff s-badge__sm">Staff</span>
 <span class="s-badge s-badge__staff s-badge__xs">Staff</span>
+<span class="s-badge s-badge__bot">Bot</span>
+<span class="s-badge s-badge__bot s-badge__sm">Bot</span>
+<span class="s-badge s-badge__bot s-badge__xs">Bot</span>
+<span class="s-badge s-badge__ai">AI</span>
+<span class="s-badge s-badge__ai s-badge__sm">AI</span>
+<span class="s-badge s-badge__ai s-badge__xs">AI</span>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="overflow-x-auto" tabindex="0">

lib/components/badge/badge.a11y.test.ts

@@ -7,7 +7,7 @@ const variants = {
     numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
     filled: ["danger", "muted"],
     states: ["danger", "muted", "info", "new", "warning"],
-    users: ["admin", "moderator", "staff"],
+    users: ["admin", "moderator", "staff", "ai", "bot"],
 };
 
 describe("badge", () => {

lib/components/badge/badge.less

@@ -174,6 +174,17 @@
     }
 
     // VARIANTS
+    &&__ai {
+        --_ba-bc: var(--_ba-fc);
+        --_ba-bg: var(--black-050);
+        --_ba-fc: var(--orange-500);
+        --_ba-tt: uppercase;
+    }
+
+    &&__bot {
+        --_ba-bc: var(--black-300);
+    }
+
     &&__danger,
     &&__muted {
         &.s-badge__filled {

lib/components/badge/badge.visual.test.ts

@@ -8,7 +8,7 @@ const variants = {
     numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
     filled: ["danger", "muted"],
     states: ["danger", "muted", "info", "new", "warning"],
-    users: ["admin", "moderator", "staff"],
+    users: ["admin", "moderator", "staff", "ai", "bot"],
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any