feat(badges): update to new SHINE visuals - part 2

.changeset/proud-worms-end.md

@@ -0,0 +1,15 @@
+---
+"@stackoverflow/stacks": major
+"@stackoverflow/stacks-svelte": major
+---
+
+Badges: update to the new SHINE visuals
+
+BREAKING CHANGES:
+- `.s-badge__icon` removed
+- `.s-badge__bounty` removed
+- `.s-badge__answered` removed
+- `.s-badge__votes` removed
+- `.s-badge__rep-down` removed
+- `.s-badge__muted` removed
+- `.s-badge__new` renamed to `.s-badge__featured`

MIGRATION_GUIDE.md

@@ -26,6 +26,14 @@
 
 #### Badge
 - `.s-badge__xs` removed
+- `.s-badge__filled` removed
+- `.s-badge__icon` removed
+- `.s-badge__bounty` removed
+- `.s-badge__answered` removed
+- `.s-badge__votes` removed
+- `.s-badge__rep-down` removed
+- `.s-badge__muted` removed
+- `.s-badge__new` renamed to `.s-badge__featured`
 - `.s-award-bling` renamed to `.s-bling` (used in some badge templates)
 
 #### Bling (previously *Award Bling*)

packages/stacks-classic/lib/components/badge/badge.a11y.test.ts

@@ -1,144 +1,102 @@
-// TODO SPARK reinstate accessibility tests once component styles are updated
-// import { runA11yTests } from "../../test/a11y-test-utils";
-// import { IconEyeSm } from "@stackoverflow/stacks-icons-legacy/icons";
-// import "../../index";
+import { runA11yTests } from "../../test/a11y-test-utils";
+import { IconNotification } from "@stackoverflow/stacks-icons/icons";
+import "../../index";
 
-// const variants = {
-//     blings: ["gold", "silver", "bronze"],
-//     numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
-//     filled: ["danger", "muted"],
-//     states: ["danger", "muted", "info", "new", "warning"],
-//     users: ["admin", "moderator", "staff", "ai", "bot"],
-// };
+const variants = {
+    blings: ["default", "activity", "rep", "gold", "silver", "bronze"],
+    tags: ["gold", "silver", "bronze"],
+    states: [
+        "info",
+        "warning",
+        "danger",
+        "critical",
+        "tonal",
+        "success",
+        "featured",
+    ],
+    users: ["admin", "moderator", "staff", "ai", "bot"],
+};
 
-// describe("badge", () => {
-//     Base badge
-//     runA11yTests({
-//         baseClass: "s-badge",
-//         children: {
-//             default: `base badge`,
-//         },
-//         tag: "span",
-//     });
+describe("badge", () => {
+    // Badges with filled bling
+    variants.blings.map((bling) => {
+        runA11yTests({
+            baseClass: "s-badge",
+            children: {
+                default: `<span class="s-bling s-bling__filled s-bling__${bling}">
+                    <span class="v-visible-sr">${bling} badge</span>
+                </span>
+                ${bling} Badge`,
+            },
+            options: {
+                testidSuffix: bling,
+            },
+            tag: "span",
+        });
+    });
 
-//     // Award badges
-//     variants.blings.map((bling) => {
-//         runA11yTests({
-//             baseClass: "s-badge",
-//             variants: [bling],
-//             children: {
-//                 default: `<span class="s-award-bling s-award-bling__${bling}">
-//                     with bling
-//                 </span>`,
-//             },
-//             options: {
-//                 includeNullVariant: false,
-//             },
-//             tag: "span",
-//         });
-//     });
+    // Tag badges
+    variants.tags.map((tag) => {
+        runA11yTests({
+            baseClass: "s-badge",
+            variants: [tag],
+            children: {
+                default: `<span class="s-bling s-bling__${tag}">
+                    <span class="v-visible-sr">${tag} tag badge</span>
+                </span>
+                tag`,
+            },
+            options: {
+                includeNullVariant: false,
+                testidSuffix: "tag",
+            },
+            tag: "span",
+        });
+    });
 
-//     // Number counts
-//     runA11yTests({
-//         baseClass: "s-badge",
-//         variants: variants.numbers,
-//         children: {
-//             default: "123",
-//         },
-//         options: {
-//             includeNullVariant: false,
-//         },
-//         tag: "span",
-//     });
+    // State badges (with important and squared modifiers)
+    runA11yTests({
+        baseClass: "s-badge",
+        variants: variants.states,
+        modifiers: {
+            primary: ["important"],
+            secondary: ["squared"],
+        },
+        children: {
+            default: `state badge`,
+            icon: `${IconNotification} icon badge`,
+        },
+        options: {
+            testidSuffix: "state",
+        },
+        tag: "span",
+    });
 
-//     // State badges
-//     runA11yTests({
-//         baseClass: "s-badge",
-//         variants: variants.states,
-//         children: {
-//             default: `badge`,
-//         },
-//         tag: "span",
-//         skippedTestids: ["s-badge-dark-new"],
-//     });
+    // User badges
+    runA11yTests({
+        baseClass: "s-badge",
+        variants: variants.users,
+        children: {
+            default: "user badge",
+        },
+        options: {
+            includeNullVariant: false,
+        },
+        tag: "span",
+    });
 
-//     // State badges w/ filled modifier
-//     runA11yTests({
-//         baseClass: "s-badge",
-//         variants: variants.filled,
-//         modifiers: {
-//             primary: ["filled"],
-//         },
-//         children: {
-//             default: `filled badge`,
-//         },
-//         options: {
-//             includeNullModifier: false,
-//         },
-//         tag: "span",
-//     });
-
-//     // State badges w/ filled modifier and icon
-//     runA11yTests({
-//         baseClass: "s-badge",
-//         variants: variants.filled,
-//         modifiers: {
-//             primary: ["filled"],
-//             secondary: ["icon"],
-//         },
-//         children: {
-//             default: `${IconEyeSm} icon badge`,
-//         },
-//         options: {
-//             includeNullModifier: false,
-//         },
-//         tag: "span",
-//     });
-
-//     // State badges w/ icon
-//     runA11yTests({
-//         baseClass: "s-badge",
-//         variants: variants.states.filter((state) => state !== "new"),
-//         modifiers: {
-//             primary: ["icon"],
-//         },
-//         children: {
-//             default: `${IconEyeSm} icon badge`,
-//         },
-//         options: {
-//             includeNullModifier: false,
-//         },
-//         tag: "span",
-//     });
-
-//     // User badges
-//     runA11yTests({
-//         baseClass: "s-badge",
-//         variants: variants.users,
-//         modifiers: {
-//             primary: ["xs", "sm"],
-//         },
-//         children: {
-//             default: "user badge",
-//         },
-//         options: {
-//             includeNullVariant: false,
-//         },
-//         tag: "span",
-//     });
-
-//     // Sizes
-//     runA11yTests({
-//         baseClass: "s-badge",
-//         modifiers: {
-//             primary: ["xs", "sm"],
-//         },
-//         children: {
-//             default: "size badge",
-//         },
-//         options: {
-//             includeNullModifier: false,
-//         },
-//         tag: "span",
-//     });
-// });
+    // Sizes
+    runA11yTests({
+        baseClass: "s-badge",
+        modifiers: {
+            primary: ["sm", "lg"],
+        },
+        children: {
+            default: "size badge",
+        },
+        options: {
+            testidSuffix: "size",
+        },
+        tag: "span",
+    });
+});