From 6cabcbd100a91becf15c2cede187b332d5ddda65 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Fri, 25 Jan 2019 11:33:57 +0100
Subject: [PATCH] fix: make sure #icon gets always a default size

---
 .../src/components/button/Button.js           |  8 +--
 .../__snapshots__/Button.test.js.snap         | 26 ++++-----
 .../src/components/button/style/_button.scss  |  2 +-
 .../__snapshots__/Dropdown.test.js.snap       | 22 ++++----
 .../__snapshots__/FormStatus.test.js.snap     |  2 +-
 .../dnb-ui-lib/src/components/icon/Icon.js    |  4 ++
 .../__tests__/__snapshots__/Icon.test.js.snap | 22 ++++----
 .../src/components/icon/description.md        | 13 +++++
 .../src/components/icon/style/_icon.scss      | 19 ++++---
 .../__snapshots__/InputMasked.test.js.snap    | 22 ++++----
 .../__snapshots__/Input.test.js.snap          | 22 ++++----
 .../__snapshots__/Modal.test.js.snap          | 34 ++++++------
 .../__tests__/__snapshots__/Tabs.test.js.snap | 10 ++--
 .../tabs/style/themes/dnb-tabs-theme-ui.scss  |  8 +--
 .../dnb-ui-lib/src/style/themes/anchor.scss   | 53 +++++++++++--------
 15 files changed, 152 insertions(+), 115 deletions(-)

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
index f2c1403d008..a1b60222682 100644
--- a/packages/dnb-ui-lib/src/components/button/Button.js
+++ b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -6,7 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Icon from '../icon-primary/IconPrimary'
+import IconPrimary from '../icon-primary/IconPrimary'
 import {
   registerElement,
   validateDOMAttributes,
@@ -63,7 +63,7 @@ export const defaultProps = {
   title: null,
   icon: null,
   icon_position: 'right',
-  icon_size: null,
+  icon_size: 'default',
   href: null,
   id: null,
   class: null,
@@ -232,7 +232,7 @@ class Content extends PureComponent {
     title: null,
     content: null,
     icon: null,
-    icon_size: null,
+    icon_size: 'default',
     isIconOnly: null
   }
   render() {
@@ -262,7 +262,7 @@ class Content extends PureComponent {
     if (icon) {
       const alt = title || text
       ret.push(
-        <Icon
+        <IconPrimary
           key="button-icon"
           className="dnb-button__icon"
           icon={icon}
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
index 39fd3ce5437..cba8cb90180 100644
--- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -77,7 +77,7 @@ exports[`Button component have to match default button snapshot 1`] = `
         <span
           aria-hidden="true"
           aria-label="This is a button title"
-          className="dnb-icon dnb-button__icon"
+          className="dnb-icon dnb-icon--default dnb-button__icon"
           role="img"
         >
           <question>
@@ -178,7 +178,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         <span
           aria-hidden="true"
           aria-label="This is a button title"
-          className="dnb-icon dnb-button__icon"
+          className="dnb-icon dnb-icon--default dnb-button__icon"
           role="img"
         >
           <question>
@@ -553,24 +553,26 @@ exports[`Button scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -717,7 +719,7 @@ exports[`Button scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
index 5576cfc5ca9..bdf9c51aa2a 100644
--- a/packages/dnb-ui-lib/src/components/button/style/_button.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -169,7 +169,7 @@
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0;
+    line-height: inherit;
 
     @include hover(true) {
       box-shadow: none;
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
index 30f10b6c9c8..97d15b73c19 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -325,24 +325,26 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -489,7 +491,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {
diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
index 1157829b9fc..5c4635e9180 100644
--- a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
@@ -35,7 +35,7 @@ exports[`FormStatus component have to match snapshot 1`] = `
     >
       <span
         aria-label="exclamation"
-        className="dnb-icon"
+        className="dnb-icon dnb-icon--default"
         role="img"
       >
         <exclamation>
diff --git a/packages/dnb-ui-lib/src/components/icon/Icon.js b/packages/dnb-ui-lib/src/components/icon/Icon.js
index 16a9dc8cc09..9355269cd2f 100644
--- a/packages/dnb-ui-lib/src/components/icon/Icon.js
+++ b/packages/dnb-ui-lib/src/components/icon/Icon.js
@@ -216,6 +216,10 @@ export default class Icon extends PureComponent {
     // define all the svg parameters
     const svgParams = prepareSvgParams()
 
+    if (!sizeAsString) {
+      sizeAsString = 'default'
+    }
+
     return {
       svgParams,
       sizeAsInt,
diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
index b52b4469bcb..1b415fa3a57 100644
--- a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -19,7 +19,7 @@ exports[`Icon component have to match snapshot 1`] = `
     aria-hidden="true"
     aria-label="alt"
     attributes="attributes"
-    className="dnb-icon dnb-icon--modifier class className"
+    className="dnb-icon dnb-icon--modifier dnb-icon--default class className"
     height="height"
     role="img"
     title="title"
@@ -191,24 +191,26 @@ exports[`Icon scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
diff --git a/packages/dnb-ui-lib/src/components/icon/description.md b/packages/dnb-ui-lib/src/components/icon/description.md
index 8ea064a7ed2..ca89f6133c9 100644
--- a/packages/dnb-ui-lib/src/components/icon/description.md
+++ b/packages/dnb-ui-lib/src/components/icon/description.md
@@ -4,6 +4,19 @@ The main icon component is basically a wrapper for what ever icon you place with
 
 There is also the [Primary Icon](/uilib/components/icon-primary/) which comes with all the [Primary Icons](/icons/primary) included.
 
+### Icon Sizes
+
+_Exists in the [Icon Library](/icons)_
+
+- **default** `1rem` (16px)
+- **medium** `1.5rem` (24px)
+
+_Additional Sizes_
+
+- **small** `0.75rem` (12px)
+- **large** `2rem` (32px)
+- **custom-size** will not be responsive. Width and Height is set as `pixels`
+
 ### More details
 
 To make it clear that all the "most common" icons are loaded at once, we have an additional icon component, named `IconPrimary` or `dnb-icon-primary`.
diff --git a/packages/dnb-ui-lib/src/components/icon/style/_icon.scss b/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
index 2de263c6a46..a8c53238141 100644
--- a/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
+++ b/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
@@ -17,21 +17,24 @@
     stroke: currentColor;
   }
 
+  width: 1em;
+  height: 1em;
+
   &--small {
-    width: 0.8em;
-    height: 0.8em;
+    width: 0.75rem;
+    height: 0.75rem;
   }
   &--default {
-    width: 1em;
-    height: 1em;
+    width: 1rem;
+    height: 1rem;
   }
   &--medium {
-    width: 1.5em;
-    height: 1.5em;
+    width: 1.5rem;
+    height: 1.5rem;
   }
   &--large {
-    width: 2em;
-    height: 2em;
+    width: 2rem;
+    height: 2rem;
   }
   &--custom-size {
     width: auto; // only to feed the svg
diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index b43ec81cb4c..e8848ccd152 100644
--- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -181,24 +181,26 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -345,7 +347,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
index 3331451f48a..6b8c78a68c0 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -366,24 +366,26 @@ exports[`Input scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -530,7 +532,7 @@ exports[`Input scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index b630b581f09..f5d67b64be7 100644
--- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -79,7 +79,7 @@ exports[`Modal component have to match snapshot 1`] = `
         href={null}
         icon="question"
         icon_position="right"
-        icon_size={null}
+        icon_size="default"
         id={null}
         innerRef={null}
         on_click={[Function]}
@@ -107,7 +107,7 @@ exports[`Modal component have to match snapshot 1`] = `
             href={null}
             icon="question"
             icon_position="right"
-            icon_size={null}
+            icon_size="default"
             id={null}
             innerRef={null}
             isIconOnly={true}
@@ -129,7 +129,7 @@ exports[`Modal component have to match snapshot 1`] = `
               icon="question"
               key="button-icon"
               modifier={null}
-              size={null}
+              size="default"
               title={null}
               width={null}
             >
@@ -317,7 +317,7 @@ exports[`Modal component have to match snapshot 1`] = `
                 href={null}
                 icon="close"
                 icon_position="right"
-                icon_size={null}
+                icon_size="default"
                 id={null}
                 innerRef={null}
                 on_click={[Function]}
@@ -345,7 +345,7 @@ exports[`Modal component have to match snapshot 1`] = `
                     href={null}
                     icon="close"
                     icon_position="right"
-                    icon_size={null}
+                    icon_size="default"
                     id={null}
                     innerRef={null}
                     isIconOnly={true}
@@ -367,7 +367,7 @@ exports[`Modal component have to match snapshot 1`] = `
                       icon="close"
                       key="button-icon"
                       modifier={null}
-                      size={null}
+                      size="default"
                       title={null}
                       width={null}
                     >
@@ -550,24 +550,26 @@ exports[`Modal scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -714,7 +716,7 @@ exports[`Modal scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
index a9a2db29cac..5be03c4597a 100644
--- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -273,12 +273,10 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
   border-bottom: 1px solid var(--color-mint-green); }
   @media screen and (max-width: 400px) {
     .dnb-tabs__tabs::after {
-      border-bottom-color: transparent; } }
-
-@media screen and (max-width: 400px) {
-  .dnb-tabs__tabs {
-    box-shadow: 0 0 0 1px var(--color-mint-green);
-    border-color: transparent; } }
+      top: 0;
+      bottom: auto;
+      height: 100%;
+      border-top: 1px solid var(--color-mint-green); } }
 
 .dnb-tabs__tabs .dnb-tablink-title {
   font-weight: var(--font-weight-book);
diff --git a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
index 79d69def7ba..2592a7e57c3 100644
--- a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
@@ -10,12 +10,12 @@
     &::after {
       border-bottom: 1px solid var(--color-mint-green);
       @include allBelow(small) {
-        border-bottom-color: transparent;
+        top: 0;
+        bottom: auto;
+        height: 100%;
+        border-top: 1px solid var(--color-mint-green);
       }
     }
-    @include allBelow(small) {
-      @include fakeBorder(var(--color-mint-green), 1px);
-    }
 
     .dnb-tablink {
       // should be same as .lead small
diff --git a/packages/dnb-ui-lib/src/style/themes/anchor.scss b/packages/dnb-ui-lib/src/style/themes/anchor.scss
index 63875429602..de01748ce0d 100644
--- a/packages/dnb-ui-lib/src/style/themes/anchor.scss
+++ b/packages/dnb-ui-lib/src/style/themes/anchor.scss
@@ -5,29 +5,7 @@
 
 @import '../core/utilities.scss';
 
-@mixin hoverStyle() {
-  background-color: var(--color-mint-green-50);
-  border-bottom-width: 2px;
-}
-@mixin activeStyle() {
-  color: #fff;
-  background-color: var(--color-sea-green);
-  border-bottom: none;
-}
-@mixin focusStyle($whatinput: null) {
-  &:not(:active) {
-    @include hoverStyle();
-    transition: none;
-    border-bottom: none;
-  }
-  @if $whatinput {
-    @include fakeFocus($whatinput);
-  } @else {
-    @include fakeFocus();
-  }
-}
-
-a {
+@mixin defaultAnchorStyle() {
   // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
   display: inline;
 
@@ -49,8 +27,34 @@ a {
 
   color: inherit;
   color: var(--color-sea-green);
+
   text-decoration: none;
   border-bottom: 1px solid var(--color-sea-green);
+}
+@mixin hoverStyle() {
+  background-color: var(--color-mint-green-50);
+  border-bottom-width: 2px;
+}
+@mixin activeStyle() {
+  color: #fff;
+  background-color: var(--color-sea-green);
+  border-bottom: none;
+}
+@mixin focusStyle($whatinput: null) {
+  &:not(:active) {
+    @include hoverStyle();
+    transition: none;
+    border-bottom: none;
+  }
+  @if $whatinput {
+    @include fakeFocus($whatinput);
+  } @else {
+    @include fakeFocus();
+  }
+}
+
+a {
+  @include defaultAnchorStyle();
 
   &:hover,
   &:active {
@@ -170,6 +174,9 @@ a {
     transition: max-height 0.01s linear;
   }
 }
+.dnb-anchor-style {
+  @include defaultAnchorStyle();
+}
 .dnb-no-anchor-style {
   white-space: normal;
   border-bottom: none;