chore(bling): update to SHINE styling (#2013)

* chore(bling): update to SHINE styling

* Let's stick with "award bling" for now

* Why was I doing `--`?

* update tests

* Update other baseline images

* Update svelte component

* update tests, formatting

* Fix some tests

* got a little lint in my pocket

* Change name to bling

* formatting!

* Add TODO for migration guide

* Address PR review

* Remove award bling test images

* update remaining visual regression test images

* Update activity variant to use pink colors

* changeset

* Address review

* Update docs, tests to use updated badge, migration guide

* whoops

* Add svelte link

* Change rep bling color

* Omit rep, activity base bling from svelte examples

* Make the base bling appear as the base bling in svelte docs

* Update docs

* Minor tweaks to the docs

Author: dancormier

.changeset/goofy-toys-attend.md

@@ -0,0 +1,6 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Update Bling component to match SHINE styles

MIGRATION_GUIDE.md

@@ -24,6 +24,10 @@
 
 ### Components
 
+#### Bling (previously *Award Bling*)
+- The Award Bling component has been renamed to Bling.
+- Bling no longer accepts children elements besides those for screen readers. Please include any visually represented strings (such as counts) as siblings to the bling component.
+
 #### Popover
 - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `<div class="s-popover--arrow"></div>`) should be deleted from the codebases as part of the migration.
 
@@ -33,7 +37,11 @@
 
 # Migrating from Stacks Svelte v0 to v1
 
-Coming soon…
+## Breaking changes
+
+### Bling (previously *AwardBling*)
+
+The `AwardBling` component has been renamed to `Bling`.
 
 # Migrating from Stacks v1 to v2
 

packages/stacks-classic/lib/components/award-bling/award-bling.a11y.test.ts

@@ -38,7 +38,7 @@ describe("badge", () => {
             baseClass: "s-badge",
             variants: [bling],
             children: {
-                default: `<span class="s-award-bling s-award-bling__${bling}">
+                default: `<span class="s-bling s-bling__${bling}">
                     with bling
                 </span>`,
             },

packages/stacks-classic/lib/components/award-bling/award-bling.less

@@ -0,0 +1,16 @@
+import { runA11yTests } from "../../test/a11y-test-utils";
+import "../../index";
+
+describe("bling", () => {
+    runA11yTests({
+        baseClass: "s-bling",
+        variants: ["activity", "rep", "gold", "silver", "bronze"],
+        modifiers: {
+            primary: ["filled"],
+            secondary: ["sm", "lg"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">bling</div>`,
+        },
+    });
+});

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

@@ -0,0 +1,93 @@
+.s-bling {
+    --_bl-bg: unset;
+    --_bl-size: calc(var(--su8) + var(--su2));
+    // Icon
+    --_bl-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='4' r='4'/></svg>");
+    --_bl-icon-bg: var(--black-500);
+    --_bl-icon-size: var(--su8);
+
+    // VARIANTS
+    &&__gold,
+    &&__silver {
+        --_bl-icon-size: calc(var(--su8) + var(--su2));
+    }
+
+    &&__activity {
+        --_bl-icon-bg: var(--pink-400);
+    }
+    // Metals
+    &&__gold {
+        --_bl-icon-bg: var(--yellow-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 9' xmlns='http://www.w3.org/2000/svg'><path d='M3.89709 0L7.79421 2.25V6.75L3.89709 9L-1.95503e-05 6.75V2.25L3.89709 0Z'/></svg>");
+    }
+
+    &&__silver {
+        --_bl-icon-bg: var(--blue-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'><path d='M4.27979 0L8.55954 3.10942L6.92482 8.14058H1.63475L3.09944e-05 3.10942L4.27979 0Z'/></svg>");
+    }
+
+    &&__bronze {
+        --_bl-icon-bg: var(--orange-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><rect width='8' height='8'/></svg>");
+    }
+
+    // MODIFIERS
+    // Filled
+    &&__filled {
+        --_bl-bg: var(--black-225);
+        --_bl-icon-bg: var(--black-600);
+        --_bl-size: var(--su24);
+
+        &.s-bling {
+            &__rep {
+                --_bl-bg: var(--black-300);
+            }
+            &__activity {
+                --_bl-bg: var(--pink-300);
+                --_bl-icon-bg: var(--pink-600);
+            }
+            &__gold {
+                --_bl-bg: var(--yellow-300);
+                --_bl-icon-bg: var(--yellow-600);
+            }
+            &__silver {
+                --_bl-bg: var(--blue-300);
+                --_bl-icon-bg: var(--blue-600);
+            }
+            &__bronze {
+                --_bl-bg: var(--orange-300);
+                --_bl-icon-bg: var(--orange-600);
+            }
+        }
+    }
+
+    // Sizes
+    &&__sm {
+        --_bl-icon-size: var(--su6);
+        --_bl-size: var(--su16);
+    }
+
+    &&__lg {
+        --_bl-size: calc(var(--su24) + var(--su4)); // 28px
+    }
+
+    // CHILD ELEMENTS
+    &:before {
+        -webkit-mask: var(--_bl-icon) no-repeat center;
+        mask: var(--_bl-icon) no-repeat center;
+
+        background-color: var(--_bl-icon-bg);
+        content: "";
+        height: var(--_bl-icon-size);
+        width: var(--_bl-icon-size);
+    }
+
+    background-color: var(--_bl-bg);
+    height: var(--_bl-size);
+    width: var(--_bl-size);
+
+    align-items: center;
+    color: inherit;
+    display: inline-flex;
+    justify-content: center;
+}

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

@@ -4,13 +4,14 @@ import "../../index";
 
 describe("anchors", () => {
     runVisualTests({
-        baseClass: "s-award-bling",
-        variants: ["gold", "silver", "bronze"],
-        children: {
-            default: `100 <div class="v-visible-sr">award</div>`,
+        baseClass: "s-bling",
+        variants: ["activity", "rep", "gold", "silver", "bronze"],
+        modifiers: {
+            primary: ["filled"],
+            secondary: ["sm", "lg"],
         },
-        options: {
-            includeNullVariant: false,
+        children: {
+            default: `<div class="v-visible-sr">bling</div>`,
         },
         template: ({ component, testid }) => html`
             <div

packages/stacks-classic/lib/components/bling/bling.less

@@ -94,9 +94,24 @@ const children = {
                 <div class="s-user-card--info">
                     <ul class="s-user-card--awards">
                         <li class="s-user-card--rep">3,145</li>
-                        <li class="s-award-bling s-award-bling__gold">3</li>
-                        <li class="s-award-bling s-award-bling__silver">9</li>
-                        <li class="s-award-bling s-award-bling__bronze">20</li>
+                        <li>
+                            <span class="s-bling s-bling__gold">
+                                <span class="v-visible-sr">gold bling</span>
+                            </span>
+                            3
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__silver">
+                                <span class="v-visible-sr">silver bling</span>
+                            </span>
+                            9
+                        </li>
+                        <li>
+                            <span class="s-bling s-bling__bronze">
+                                <span class="v-visible-sr">bronze bling</span>
+                            </span>
+                            20
+                        </li>
                     </ul>
                 </div>
             </a>

packages/stacks-classic/lib/components/award-bling/award-bling.visual.test.ts renamed to packages/stacks-classic/lib/components/bling/bling.visual.test.ts

@@ -9,9 +9,9 @@
 @import "components/activity-indicator/activity-indicator.less";
 @import "components/anchor/anchor.less";
 @import "components/avatar/avatar.less";
-@import "components/award-bling/award-bling.less";
 @import "components/badge/badge.less";
 @import "components/banner/banner.less";
+@import "components/bling/bling.less";
 @import "components/block-link/block-link.less";
 @import "components/breadcrumbs/breadcrumbs.less";
 @import "components/button/button.less";