feat(link): Update link component to SHINE designs (#2164)

* Start link changes

* update link

* Update link.less

* update link svelte component

* update svelte component

* Update link.less

* fix a11y tests

* remove block link

* fix lint

* fix lint

* fix lint

* update stacks docs to add s-link to bare <a>

* Remove s-block-link visual regression images

* Revert "update stacks docs to add s-link to bare <a>"

This reverts commit f2dcd2f.

* Remove visited link modifier

* Handle links on a per-component basis

* formatting

* Tweak colors

* Include HC mode nav item underline

* Update anchors test files to remove `default`

* Update link.less

* run format

* Update necessary <a> elements to have correct styling

* update handle inherits correctly

* revert unneeded changes

* fix issue where styles were not applied

* add changeset and update migration guide

* Apply underline to links; minor consolidation

* Migration guide tweaks

* Fix post summary title link underlining

* Update visual regression images

* Remove cruft from svelte props

* Update dropdown triangle to rely on inline-flex

---------

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

Author: ttaylor-stack

.changeset/cute-parts-glow.md

@@ -0,0 +1,11 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Update link component to new SHINE designs
+
+BREAKING CHANGES:
+
+- <a> elements no longer automatically have s-link styling, `s-link` needs to be an explict class of any <a> element that needs the styling
+- `block-link` component deleted

MIGRATION_GUIDE.md

@@ -33,6 +33,9 @@
 
 ### Components
 
+#### Anchors
+- Removed `.s-anchors__default` in favor of appling those styles as the default for `.s-anchors`
+
 #### Badge
 - `.s-badge__xs` removed
 - `.s-badge__filled` removed
@@ -54,6 +57,9 @@
 - 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.
 
+#### Block Link
+- The Block Link component has been removed.
+
 #### Buttons
 - The secondary style `outlined` has been removed i.e. `.s-btn__outlined`
 - The default button style is `filled`, use `.s-btn__clear` to use a clear style of a button
@@ -76,6 +82,10 @@
 - `s-label__md`, `s-label__xl` removed
 - `s-label--status`, `s-label--status__required`, `s-label--status__new`, `s-label--status__beta` removed. Use the new `s-badge` states instead.
 
+#### Link
+- <a> elements no longer automatically have s-link styling, `s-link` needs to be an explict class of any <a> element that needs the styling
+- `s-link__visited` Removed 
+
 #### Loader
 - `Spinner` component replaced with new `Loader` component
 - `xs` and `xl` sized have been removed, leaving only the default, `sm`, and `lg` sizes

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

@@ -11,14 +11,7 @@ describe("anchors", () => {
     runA11yTests({
         baseClass: "s-anchors",
         modifiers: {
-            primary: [
-                "default",
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-            ],
+            primary: ["grayscale", "muted", "danger", "inherit", "underlined"],
         },
         children: {
             default: `A ${link(
@@ -28,8 +21,5 @@ describe("anchors", () => {
                 false
             )}.`,
         },
-        options: {
-            includeNullModifier: false,
-        },
     });
 });

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

@@ -1,9 +1,14 @@
 .s-anchors {
-    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
-    // --_an-a-fc
-    // --_an-a-fc-hover
-    // --_an-a-fc-visited
-    // --_an-a-fc-hover-visited
+    --_an-a-fc: var(--theme-link-color, var(--black-600));
+    --_an-a-fc-hover: var(--theme-link-color-hover, var(--blue-400));
+    --_an-a-fc-visited: var(--theme-link-color-visited, var(--black-400));
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
 
     // MODIFIERS
     &&__underlined {
@@ -14,30 +19,15 @@
     }
 
     // VARIANTS
-    &&__danger,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted {
-        --_an-a-fc-hover-visited: var(--_an-a-fc-hover);
-    }
-
     &&__danger {
         --_an-a-fc: var(--red-400);
         --_an-a-fc-hover: var(--red-500);
         --_an-a-fc-visited: var(--red-600);
     }
 
-    &&__default {
-        --_an-a-fc: var(--theme-link-color, var(--theme-secondary));
-        --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
-        --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
-        --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));
-    }
-
     &&__grayscale {
         --_an-a-fc: var(--black-500);
         --_an-a-fc-hover: var(--black-600);
-        --_an-a-fc-visited: var(--black-400);
     }
 
     &&__inherit {
@@ -55,31 +45,30 @@
 
     &&__muted {
         --_an-a-fc: var(--black-400);
-        --_an-a-fc-hover: var(--black-500);
-        --_an-a-fc-visited: var(--black-600);
     }
 
-    &&__danger,
-    &&__default,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            &:active,
-            &:hover {
-                color: var(--_an-a-fc-hover);
-            }
+    p& > a[href],
+    p > a[href] {
+        text-decoration: underline;
+    }
 
-            color: var(--_an-a-fc, inherit);
+    a:not(.s-link),
+    .s-btn.s-btn__link {
+        &:active,
+        &:hover {
+            color: var(--_an-a-fc-hover);
+            text-decoration: underline;
         }
 
-        a:not(.s-link):visited {
-            &:hover {
-                color: var(--_an-a-fc-hover-visited, inherit);
-            }
+        color: var(--_an-a-fc, inherit);
+        text-decoration: none;
+    }
 
-            color: var(--_an-a-fc-visited, inherit);
+    a:not(.s-link):visited {
+        &:hover {
+            color: var(--_an-a-fc-hover, inherit);
         }
+
+        color: var(--_an-a-fc-visited, inherit);
     }
 }

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

@@ -18,14 +18,7 @@ describe("anchors", () => {
     runVisualTests({
         baseClass: "s-anchors",
         modifiers: {
-            primary: [
-                "default",
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-            ],
+            primary: ["grayscale", "muted", "danger", "inherit", "underlined"],
         },
         children: {
             // children include nested anchors block to test for appropriate nested styling
@@ -35,9 +28,6 @@ describe("anchors", () => {
                 <div class="s-card s-anchors s-anchors__muted mt4">Muted: ${links}</div>
             `,
         },
-        options: {
-            includeNullModifier: false,
-        },
         template: ({ component, testid }) => html`
             <div data-testid="${testid}" class="s-card ws3 fc-green-500">
                 ${testid}: ${component}

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

@@ -102,5 +102,6 @@
     background-size: 100%;
     display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
     position: relative;
+    text-decoration: none;
     vertical-align: bottom; // Make our avatars play more nicely with text next to it.
 }