BREAKING CHANGE(web): Add underline to hover and active states to def…

…ault links #DS-650

Remove the feature class which enabled this behaviour.

 ## Migration Guide

Remove feature class `.spirit-v1-links-underlined`, if used.
No other actions are required. However, if you didn't use
the feature class, you might want to check if the links in your product
design system components behave as expected in both hover and active
states, because they are now underlined.

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.

packages/web/src/scss/foundation/_links.scss

@@ -1,6 +1,3 @@
-// 1. Enable fixed default link underline on hover and active states using `spirit-v1-link-underlined` on the root element, eg. body.
-// This will be removed in v1 and the new default link underline will be the default.
-
 @use '@tokens' as tokens;
 @use '../settings/links';
 
@@ -14,23 +11,14 @@ a {
  color: tokens.$action-link-primary-default;
 
  &:active {
+ text-decoration: underline;
  color: tokens.$action-link-primary-active;
  }
 
  @media (hover: hover) {
  &:hover {
+ text-decoration: underline;
  color: tokens.$action-link-primary-hover;
  }
  }
 }
-
-// 1.
-:where(.spirit-v1-links-underlined) a:active {
- text-decoration: underline;
-}
-
-@media (hover: hover) {
- :where(.spirit-v1-links-underlined) a:hover {
- text-decoration: underline;
- }
-}

packages/web/src/scss/helpers/links/index.html

@@ -54,60 +54,6 @@ <h3 class="typography-heading-xsmall-text">
  Heading XSmall Text with <a href="#">link without underlined class, behaves the same as the one before</a>
  </h3>
 
- <div class="spirit-v1-links-underlined mt-1200">
- <h3 class="docs-Heading">V1 Feature &mdash; correct link underline</h3>
-
- <p>
- <a href="#" class="link-primary">Primary Link</a>
- </p>
- <p>
- <a href="#" class="link-secondary">Secondary Link</a>
- </p>
- <p class="docs-Box">
- <a href="#" class="link-inverted">Inverted Link</a>
- </p>
- <p>
- <a href="#" class="link-primary link-disabled">Primary Disabled Link</a>
- </p>
- <p>
- <a href="#" class="link-secondary link-disabled">Secondary Disabled Link</a>
- </p>
- <p class="docs-Box">
- <a href="#" class="link-inverted link-disabled">Inverted Disabled Link</a>
- </p>
- <p>
- <a href="#" class="link-primary link-underlined">Primary Underlined Link</a>
- </p>
- <p>
- <a href="#" class="link-secondary link-underlined">Secondary Underlined Link</a>
- </p>
- <p class="docs-Box">
- <a href="#" class="link-inverted link-underlined">Inverted Underlined Link</a>
- </p>
- <p>
- <a href="#" class="link-primary link-disabled link-underlined">Primary Disabled Underlined Link</a>
- </p>
- <p>
- <a href="#" class="link-secondary link-disabled link-underlined">Secondary Disabled Underlined Link</a>
- </p>
- <p class="docs-Box mb-1000">
- <a href="#" class="link-inverted link-disabled link-underlined">Inverted Disabled Underlined Link</a>
- </p>
-
- <h3 class="typography-heading-xsmall-text">
- Heading XSmall Text with <a href="#">link (default style), obtains visited state</a>
- </h3>
- <h3 class="typography-heading-xsmall-text">
- Heading XSmall Text with <a href="#" class="link-primary">link (primary), obtains visited state</a>
- </h3>
- <h3 class="typography-heading-xsmall-text">
- Heading XSmall Text with <a href="#" class="link-underlined">link with underlined class, obtains visited state, gets underlined only on hover and active</a>
- </h3>
- <h3 class="typography-heading-xsmall-text">
- Heading XSmall Text with <a href="#">link without underlined class, behaves the same as the one before</a>
- </h3>
- </div>
-
 </section>
 
 {{/layout/plain}}