fix(Anchor:) fixes anchor modifier .dnb-anchor--no-hover

dnbexperience · Sep 15, 2023 · 3ecae36 · 3ecae36
1 parent 42822c2
commit 3ecae36
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 32 deletions.
diff --git a/...anchor-for-eiendom-have-to-match-the-hover-state-for-modifier-no-hover.snap.png b/...anchor-for-eiendom-have-to-match-the-hover-state-for-modifier-no-hover.snap.png
diff --git a/...anchor-for-eiendom-have-to-match-the-hover-state-for-modifier-no-style.snap.png b/...anchor-for-eiendom-have-to-match-the-hover-state-for-modifier-no-style.snap.png
diff --git a/...ts__/anchor-for-ui-have-to-match-the-hover-state-for-modifier-no-hover.snap.png b/...ts__/anchor-for-ui-have-to-match-the-hover-state-for-modifier-no-hover.snap.png
diff --git a/...ts__/anchor-for-ui-have-to-match-the-hover-state-for-modifier-no-style.snap.png b/...ts__/anchor-for-ui-have-to-match-the-hover-state-for-modifier-no-style.snap.png
diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap b/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap
@@ -276,10 +276,10 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-anchor:focus-visible, .dnb-section .dnb-anchor:focus-visible.dnb-anchor {
   text-decoration: none;
 }
-.dnb-anchor:hover {
+.dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-anchor:hover:not(.dnb-anchor--no-style) {
   border-radius: 0.25em;
 }
-.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor {
+.dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section .dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor, .dnb-anchor:hover:not(.dnb-anchor--no-style), .dnb-section .dnb-anchor:hover:not(.dnb-anchor--no-style).dnb-anchor {
   text-decoration: none;
 }
 .dnb-anchor:active {
@@ -323,7 +323,7 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-anchor.dnb-anchor--contrast {
   color: var(--color-white);
 }
-.dnb-anchor.dnb-anchor--contrast:hover {
+.dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover), .dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-style) {
   color: var(--anchor-color--contrast);
   box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
@@ -377,20 +377,11 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-anchor--no-style, .dnb-section .dnb-anchor--no-style.dnb-anchor {
   text-decoration: none;
 }
-.dnb-anchor--no-style:hover {
-  color: inherit;
-  background-color: transparent;
-}
 
 .dnb-anchor--no-underline, .dnb-section .dnb-anchor--no-underline.dnb-anchor {
   text-decoration: none;
 }
 
-.dnb-anchor--no-hover:hover {
-  color: inherit;
-  background-color: transparent;
-}
-
 .dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
@@ -440,7 +431,7 @@ exports[`Anchor scss has to match theme css for sbanken 1`] = `
 .dnb-anchor--no-underline, .dnb-anchor--has-icon, .dnb-anchor--inline {
   box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), -0.25em 0 0 0 var(--anchor-background), 0.25em 0 0 0 var(--anchor-background);
 }
-.dnb-anchor:hover {
+.dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-anchor:hover:not(.dnb-anchor--no-style) {
   --anchor-background: var(--sb-color-green-dark);
   color: var(--sb-color-text);
   transition: none;
@@ -580,7 +571,7 @@ exports[`Anchor scss has to match theme css for ui 1`] = `
   --anchor-background--active: var(--color-emerald-green);
   color: var(--anchor-color);
 }
-.dnb-anchor:hover {
+.dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-anchor:hover:not(.dnb-anchor--no-style) {
   --anchor-color: var(--color-sea-green);
   box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), -0.125em 0 0 0 var(--anchor-background--hover), 0.125em 0 0 0 var(--anchor-background--hover);
 }

diff --git a/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss b/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss
@@ -53,15 +53,6 @@
   }
 }
 
-@mixin resetAnchorHoverStyle() {
-  &:hover {
-    color: inherit;
-
-    // in case we don't want to change the color to the body color
-    background-color: transparent;
-  }
-}
-
 @mixin resetAnimationStyle() {
   transition: none;
 }
@@ -106,7 +97,8 @@
 @mixin useAnchorContrastStyle {
   color: var(--color-white);
 
-  &:hover {
+  &:hover:not(.dnb-anchor--no-hover),
+  &:hover:not(.dnb-anchor--no-style) {
     color: var(--anchor-color--contrast);
     @include anchorBackground(var(--color-white));
   }
@@ -176,7 +168,8 @@
     @include anchorFocusStyle();
   }
 
-  &:hover {
+  &:hover:not(.dnb-anchor--no-hover),
+  &:hover:not(.dnb-anchor--no-style) {
     @include anchorHoverStyle();
   }
 

diff --git a/packages/dnb-eufemia/src/components/anchor/style/dnb-anchor.scss b/packages/dnb-eufemia/src/components/anchor/style/dnb-anchor.scss
@@ -46,18 +46,13 @@ button.dnb-anchor {
   color: inherit;
 
   @include resetUnderlineStyle();
-  @include resetAnchorHoverStyle();
   @include resetAnimationStyle();
 }
 
 .dnb-anchor--no-underline {
   @include resetUnderlineStyle();
 }
 
-.dnb-anchor--no-hover {
-  @include resetAnchorHoverStyle();
-}
-
 .dnb-anchor--no-radius {
   @include resetBorderRadius();
 }

diff --git a/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss b/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss
@@ -66,7 +66,8 @@
     );
   }
 
-  &:hover {
+  &:hover:not(.dnb-anchor--no-hover),
+  &:hover:not(.dnb-anchor--no-style) {
     @include anchorHover();
   }
 

diff --git a/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss b/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss
@@ -30,7 +30,8 @@
 
   color: var(--anchor-color);
 
-  &:hover {
+  &:hover:not(.dnb-anchor--no-hover),
+  &:hover:not(.dnb-anchor--no-style) {
     @include anchorHover();
   }