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

* Update docs and formatting

* half finished docs update

* Finish docs and update svelte

* Update docs

* fix lint and tests

* Update gaps

* fix lint issue

* fix test

* fix lint

* fix test

* lint fix

* revert gap changes

* fix lint issue

* fix spacing

* update title

* fix

* Add large variant

* Update user-card.less

* fix alignment issues

* redo responsive code

* Tweak the user card markup + less

* Add PPCP and start secondary implementation

* clean up PPCP

* add position location class

* fix secondary

* add excerpt class

* remove no wrap

* Update docs to match new markup

* Style and docs adjustments

* Add avatars

* Update svelte component

* fix recognition color issue

* improve svelte component

* Add icon to large usercard

* run format

* refactor

* fix tests

* improve svelte component

* Add timestamp subcomponent

* fix formatting

* Minor updates to recognition

* Tweak spacing

* Update based on classic changes

* Update based on comments

* visual tests

* Update rep color

* Update based on comments

* fix small issue

* Update user-card.less

* Back out empty bling changes

* Adjust timestamp spacing/link changes

* Update Svelte component based on markup changes

* Remove badge markup from default example code

* Update migration guide with markup/class changes

* Revert "Remove badge markup from default example code"

This reverts commit 6bfd3e2.

* Remove badge markup from default example code (attempt 2)

* Update based on feedback

* hardcode icon

* Update UserCard.test.ts

* fix lint issue

* Update postsummary

* fix test

* fix test

* Update UserCard.test.ts

* Update UserCard.test.ts

* optimise component

* change award snippet to blings

* Update based on review comments and figma changes

* Update based on new subcomponents

* Update tests

* Nested conditional tests

* Update UserCard.test.ts

* Update UserCard.test.ts

* Update UserCard.test.ts

---------

Co-authored-by: Dan Cormier <[email protected]>

Author: ttaylor-stack

.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)

MIGRATION_GUIDE.md

@@ -134,6 +134,23 @@ The menu component has been updated to use new class names and structure. The fo
 - `s-textarea__md` removed
 - `s-textarea__xl` removed
 
+#### User Card
+
+Markup for the User Card has changed significantly. Please refer to the [docs](https://beta.stackoverflow.design/product/components/user-cards) for full guidance. Here are the most notable class changes:
+
+- Some component child classes have been replaced in favor of more generic wrappers. These include:
+    - `s-user-card--avatar`: The avatar should just include the appropriate `.s-avatar` classes
+    - `s-user-card--awards`: Awards should be placed within a `li` in a `ul.s-user-card--group` container
+    - `s-user-card--info`: Replaced with other layout classes as appropriate
+    - `s-user-card--link`: Previously used to style the username and now handled by `.s-user-card--username`
+    - `s-user-card--location`: Location should be placed in a `li` in a `ul.s-user-card--group.s-user-card--group__split` container
+    - `s-user-card--role`: Role should be placed in a `li` in a `ul.s-user-card--group.s-user-card--group__split` container
+    - `s-user-card--tags`: Tags are no longer included in the user card
+    - `s-user-card--type`: Replaced with `.s-user-card--recognition`
+- `s-user-card__highlighted` removed
+- `s-user-card__deleted` removed (expected to return in our next User Card iteration)
+- The size modifiers `full`, `small`, and `minimal` have been replaced with `sm` and `lg`
+
 # Migrating from Stacks Svelte v0 to v1
 
 ## Breaking changes

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

@@ -1,129 +1,121 @@
 .s-user-card {
     --_uc-ai: center;
-    --_uc-bg: unset;
-    --_uc-bar: unset;
-    --_uc-d: grid;
-    --_uc-fc: unset;
-    --_uc-g: var(--su4) var(--su8);
-    --_uc-p: var(--su8);
-    --_uc-info-ai: unset;
-    --_uc-info-fd: column;
-    --_uc-link-fs: var(--fs-caption);
-    --_uc-link-ws: unset;
-    --_uc-rep-fc: unset;
-    --_uc-time-fc: var(--black-400);
-    --_uc-time-ws: unset;
-    --_uc-type-fc: var(--theme-primary-400);
-
-    // MODIFIERS
-    &&__deleted {
-        --_uc-fc: var(--black-400);
-    }
-
-    &&__highlighted {
-        --_uc-bg: var(--theme-secondary-100);
-        --_uc-bar: var(--br-md);
-        --_uc-time-fc: var(--black-500);
-        --_uc-type-fc: var(--black-500);
-    }
+    --_uc-fd: unset;
+    --_uc-column-gap: var(--su6);
+    --_uc-group-gap: var(--su4);
+    --_uc-row-gap: var(--su6);
+    --_uc-username-fs: unset;
 
     // VARIANTS
-    &&__minimal,
-    &&__small {
-        --_uc-d: flex;
-        --_uc-g: var(--su4);
-        --_uc-p: 0;
-        --_uc-info-ai: center;
-        --_uc-info-fd: row;
-    }
+    // SIZES
+    &&__lg {
+        .s-avatar {
+            margin-right: var(--su6);
+        }
 
-    &&__full {
-        --_uc-ai: flex-start;
-        --_uc-link-fs: var(--fs-body2);
-    }
+        .s-user-card--username {
+            margin-right: var(--su2);
+        }
 
-    &&__minimal {
-        --_uc-link-ws: nowrap;
-        --_uc-rep-fc: var(--black-500);
-        --_uc-time-ws: nowrap;
+        .s-user-card--group:has(> .s-user-card--rep) {
+            margin-top: calc(var(--su2) * -1);
+        }
+
+        --_uc-ai: flex-start;
+        --_uc-fd: column;
+        --_uc-username-fs: var(--fs-body3);
     }
 
     // CHILD ELEMENTS
-    & &--location,
-    & &--role {
-        font-size: var(--fs-caption);
+    & &--bio {
+        .truncation(3);
         color: var(--black-400);
     }
 
-    & &--awards {
-        li {
-            font-size: var(--fs-caption);
-        }
+    & &--recognition {
+        --_uc-row-gap: var(--su4);
 
-        .list-reset;
-        align-items: center;
-        display: flex;
-        gap: var(--su6);
+        &,
+        & a {
+            color: var(--theme-primary);
+        }
     }
 
-    & &--info {
-        align-items: var(--_uc-info-ai);
-        flex-direction: var(--_uc-info-fd);
-
-        display: flex;
-        gap: var(--su4);
+    & &--rep {
+        color: var(--black-600);
+        font-weight: 600;
     }
 
-    & &--link {
-        font-size: var(--_uc-link-fs);
-        white-space: var(--_uc-link-ws);
+    & &--time {
+        color: var(--black-400);
+    }
 
-        align-items: center;
-        flex-wrap: wrap;
-        min-width: 0; // Allow things to wrap
+    & &--username {
+        font-size: var(--_uc-username-fs);
+        font-weight: 500;
+        min-width: 0;
         overflow-wrap: break-word;
+        word-break: break-all;
     }
 
-    & &--rep {
-        color: var(--_uc-rep-fc);
-
-        font-weight: 700;
+    // Layout specific
+    & &--column {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        gap: var(--_uc-column-gap);
     }
 
-    & &--tags {
-        align-items: center;
-        min-width: 0; // Allow things to wrap
-        flex-wrap: wrap;
-    }
+    & &--group {
+        &:has(> .s-avatar) {
+            --_uc-group-gap: var(--su6);
+        }
 
-    & &--time {
-        color: var(--_uc-time-fc);
-        white-space: var(--_uc-time-ws);
+        &:has(+ .s-user-card--time) {
+            margin-right: var(--su2);
+        }
 
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-        grid-row: ~"1 / 2";
+        align-items: center;
+        display: flex;
+        gap: var(--_uc-group-gap);
     }
 
-    & &--type {
-        a:not(.s-link) {
-            color: inherit !important;
+    & ul&--group {
+        &.s-user-card--group__split {
+            li:not(:last-child) {
+                &:after {
+                    background-color: var(--black-350);
+                    content: "";
+                    display: block;
+                    margin-left: var(--su4);
+                    width: var(--su4);
+                    height: var(--su4);
+                }
+            }
         }
 
-        color: var(--_uc-type-fc);
+        li {
+            align-items: center;
+            display: inline-flex;
+            gap: var(--su2);
+        }
 
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
+        .list-reset;
+    }
+
+    & &--row {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--_uc-row-gap);
     }
 
     align-items: var(--_uc-ai);
-    background-color: var(--_uc-bg);
-    border-radius: var(--_uc-bar);
-    color: var(--_uc-fc);
-    display: var(--_uc-d);
-    gap: var(--_uc-g);
-
-    grid-template-columns: auto 1fr;
-    line-height: 1;
-    padding: var(--_uc-p);
-}
+    color: var(--black-500);
+    display: flex;
+    flex-direction: var(--_uc-fd);
+    flex-wrap: wrap;
+    font-size: var(--fs-caption);
+    gap: var(--su6);
+}

packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-deleted-minimal-w100-sparce.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2336d28eb7be927f2857691a3d3ac217ddd6cd8c797947b368a9f87f99ccbb01
-size 11111
+oid sha256:d67b9592916220c9bf840b8cb11943662f4a3d45c03c5e8422c903bc4e5e473e
+size 11378

packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-deleted-minimal-w100.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c0e85f3f4b5ee89b308b56f89fcabdedd5c49a19d8aa60ecaa63ab1ace5043c0
-size 28641
+oid sha256:0951f218423146cca83d70f1c54d9ba127121b8feac759d5fb238b5dca3c0745
+size 28971

packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-ignored-minimal-w100-sparce.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a9538e9dcf6f48c5eb199942efd2a731bedde3ccef88ee2102a2ad76250de30
-size 10799
+oid sha256:028a8a699f78306dc672f66a08ddaefce89878f0e896547956f5f9cf7ddc55e6
+size 11026

packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-ignored-minimal-w100.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:71466355e3f7a87c7f176e4f30b944eaf2a3bdbf88d474dae2b53c907f7cffde
-size 27788
+oid sha256:d4637dfd8dc26be0cb352a075aeb54e98c907d433a0c3fb7866a8242d6952c21
+size 28109

packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-w100-description-lg.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:007925370bc44c1d41b8553ebb6af24245ae49df5cf0fbdbdab614c4dc41ebec
-size 38958
+oid sha256:a5697c54b58fa1cced87e9ecddaac0e4e2dd1f988d1af0098001faefddb0e92c
+size 38904

packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-w100-description-md.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c5d7bcf1a1e3be2d2f1577e6feed2c3ba7efce1c7d25f16d1400a7d877ad6a72
-size 33717
+oid sha256:850c809eb2a245aa484db4d77a9b7b9231c413ba509dec26ec85f6c44ce85c37
+size 33664

packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-w100-description-sm.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cc5d631d32140e0a8e11599e804c500ef6c6534281cc367c973445b93c15c3f6
-size 22250
+oid sha256:6b94e3b8ee8b9980f7be62d593ffe1c7c2a2b8dddf96e95f18892987354219c3
+size 22527