feat(user card) - Update User card to new SHINE design (part 1)

.changeset/beige-cycles-spend.md

@@ -0,0 +1,6 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Update User card to new SHINE design (part 1)

packages/stacks-classic/lib/components/user-card/user-card.less

@@ -2,12 +2,12 @@
     --_uc-ai: center;
     --_uc-bg: unset;
     --_uc-bar: unset;
-    --_uc-d: grid;
+    --_uc-d: flex;
     --_uc-fc: unset;
-    --_uc-g: var(--su4) var(--su8);
+    --_uc-g: var(--su4);
     --_uc-p: var(--su8);
-    --_uc-info-ai: unset;
-    --_uc-info-fd: column;
+    --_uc-info-ai: center;
+    --_uc-info-fd: row;
     --_uc-link-fs: var(--fs-caption);
     --_uc-link-ws: unset;
     --_uc-rep-fc: unset;
@@ -63,7 +63,13 @@
         .list-reset;
         align-items: center;
         display: flex;
-        gap: var(--su6);
+        gap: var(--su4);
+
+        // When li contains only s-bling__silver or s-bling__gold (no text content), reduce gap to 2px
+        li:has(> .s-bling__silver:only-child),
+        li:has(> .s-bling__gold:only-child) {
+            margin-right: calc(var(--su2) - var(--su4));
+        }
     }
 
     & &--info {
@@ -82,12 +88,16 @@
         flex-wrap: wrap;
         min-width: 0; // Allow things to wrap
         overflow-wrap: break-word;
+
+        // Reduce gap between adjacent s-badge elements from 6px to 4px
+        .s-badge:has(+ .s-badge) {
+            margin-right: calc(var(--su4) - var(--su6));
+        }
     }
 
     & &--rep {
         color: var(--_uc-rep-fc);
-
-        font-weight: 700;
+        font-weight: 600;
     }
 
     & &--tags {
@@ -101,8 +111,6 @@
         white-space: var(--_uc-time-ws);
 
         font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-        grid-row: ~"1 / 2";
     }
 
     & &--type {
@@ -121,9 +129,8 @@
     border-radius: var(--_uc-bar);
     color: var(--_uc-fc);
     display: var(--_uc-d);
+    flex-direction: row;
     gap: var(--_uc-g);
-
-    grid-template-columns: auto 1fr;
     line-height: 1;
     padding: var(--_uc-p);
 }

packages/stacks-docs/_data/site-navigation.json

@@ -354,7 +354,8 @@
             },
             {
               "title": "User cards",
-              "url": "/product/components/user-cards/"
+              "url": "/product/components/user-cards/",
+              "new": true
             }
           ]
         }

packages/stacks-docs/_data/user-cards-component.json

@@ -25,11 +25,6 @@
       "applies": "N/A",
       "description": "Styles the link to the user’s profile appropriately."
     },
-    {
-      "class": ".s-user-card--type",
-      "applies": "N/A",
-      "description": "An optional container for displaying various user types."
-    },
     {
       "class": ".s-badge .s-badge__sm .s-badge__admin",
       "applies": "Child of <code class='stacks-code'>.s-user-card--link</code>",
@@ -45,16 +40,6 @@
       "applies": "Child of <code class='stacks-code'>.s-user-card--link</code>",
       "description": "Wraps and positions the staff user badge"
     },
-    {
-      "class": ".s-user-card--location",
-      "applies": "N/A",
-      "description": "Styles the user’s location."
-    },
-    {
-      "class": ".s-user-card--role",
-      "applies": "N/A",
-      "description": "Styles the user’s role."
-    },
     {
       "class": ".s-user-card--awards",
       "applies": "N/A",
@@ -65,35 +50,10 @@
       "applies": "N/A",
       "description": "Styles the aggregate number of awards and activity properly."
     },
-    {
-      "class": ".s-user-card--tags",
-      "applies": "N/A",
-      "description": "A container for a user’s most popular tags."
-    },
-    {
-      "class": ".s-user-card__highlighted",
-      "applies": "<code class='stacks-code'>.s-user-card</code>",
-      "description": "Highlights the entire user card by adding a background color, some padding, and rounded corners."
-    },
-    {
-      "class": ".s-user-card__full",
-      "applies": "<code class='stacks-code'>.s-user-card</code>",
-      "description": "Displays a larger avatar, best paired with additional tags meta data."
-    },
     {
       "class": ".s-user-card__small",
       "applies": "<code class='stacks-code'>.s-user-card</code>",
       "description": "Pairs a small avatar with the reputation and awards."
-    },
-    {
-      "class": ".s-user-card__minimal",
-      "applies": "<code class='stacks-code'>.s-user-card</code>",
-      "description": "Pairs a stripped down version of the reputation with a small avatar, and the time since the activity occurred."
-    },
-    {
-      "class": ".s-user-card__deleted",
-      "applies": "<code class='stacks-code'>.s-user-card</code>",
-      "description": "When a user is deleted, we still need to show their name, but we strip the meta data"
     }
   ]
 }