feat: add also new class for anchor styling .dnb-anchor

dnbexperience · Feb 14, 2019 · 8f3ce5c · 8f3ce5c
1 parent c40509f
commit 8f3ce5c
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 27 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js
@@ -174,7 +174,7 @@ export default class Card extends PureComponent {
           >
             <Link
               css={[linkStyle, customStyle]}
-              className="dnb-no-anchor-style"
+              className="dnb-anchor-no-style"
               to={url}
               onClick={closeMenu}
             >

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -568,7 +568,7 @@ class ListItem extends PureComponent {
       <StyledListItem
         className={classnames(
           `l-${level}`,
-          active && 'is-active dnb-hover-style', // use anchor hover style
+          active && 'is-active dnb-anchor--hover', // use anchor hover style
           inside && 'is-inside',
           status ? `status-${status}` : null,
           className
@@ -581,8 +581,8 @@ class ListItem extends PureComponent {
         <Link
           to={to}
           className={classnames(
-            'dnb-no-anchor-underline',
-            'dnb-no-anchor-hover',
+            'dnb-anchor-no-underline',
+            'dnb-anchor-no-hover',
             icon && graphics[icon] ? 'has-icon' : null
           )}
         >

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -206,7 +206,7 @@ const Footer = () => (
     <Logo height="40" color="white" />
     <small>
       Last Portal update: {buildVersion}
-      <Link to="/license" className="dnb-no-anchor-underline">
+      <Link to="/license" className="dnb-anchor-no-underline">
         Copyright (c) 2018-present DNB.no
       </Link>
     </small>

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -187,7 +187,7 @@ export default class Button extends PureComponent {
       id,
       class_name,
       className,
-      href ? '' : null // dnb-no-anchor-underline dnb-no-anchor-hover
+      href ? '' : null // dnb-anchor-no-underline dnb-anchor-no-hover
     )
 
     const params = {

diff --git a/...e-screenshot-have-to-match-blockquote-with-top-aligned-graphic-1-c67e6.snap.png b/...e-screenshot-have-to-match-blockquote-with-top-aligned-graphic-1-c67e6.snap.png
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss
@@ -92,3 +92,16 @@
     transition: max-height 0.01s linear;
   }
 }
+@mixin useAnchorContrastStyle() {
+  color: var(--color-white);
+  border-bottom-color: var(--color-white);
+  &:hover {
+    color: var(--color-emerald-green);
+  }
+  &:active {
+    color: var(--color-mint-green);
+  }
+  &:focus {
+    color: var(--color-emerald-green);
+  }
+}
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss
@@ -5,7 +5,8 @@
 
 @import './anchor-mixins.scss';
 
-a {
+a,
+.dnb-anchor {
   @include defaultAnchorStyle();
 
   // have focus before :active, because of border-radius
@@ -29,16 +30,16 @@ a {
     transform: translateY(-1px);
   }
 }
-.dnb-hover-style {
+.dnb-anchor--hover {
   @include hoverStyle();
 }
-.dnb-active-style {
+.dnb-anchor--active {
   @include activeStyle();
 }
-.dnb-focus-style {
+.dnb-anchor--focus {
   @include focusStyle('mouse');
 }
-.dnb-with-animation {
+.dnb-anchor--animation {
   position: relative; // because of z-index and underline/hover sudo classes
   z-index: 1; // because of focus handling
 
@@ -91,12 +92,17 @@ a {
       border-bottom: none;
     }
   }
+  // If a link don't contains a / or http(s)
+  &:not([href^='/']):not([href^='http']) {
+    cursor: pointer;
+    user-select: none;
+  }
 }
 
 .dnb-anchor-style {
   @include defaultAnchorStyle();
 }
-.dnb-no-anchor-style {
+.dnb-anchor-no-style {
   white-space: normal;
   border-bottom: none;
   color: inherit;
@@ -113,17 +119,15 @@ a {
   @include resetUnderlineStyle();
   @include resetHoverStyle();
 }
-.dnb-no-anchor-underline {
+.dnb-anchor-no-underline {
   @include resetUnderlineStyle();
 }
-.dnb-no-anchor-hover {
+.dnb-anchor-no-hover {
   @include resetHoverStyle();
 }
-.dnb-no-anchor-animation {
+.dnb-anchor-no-animation {
   @include resetAnimationStyle();
 }
-// If a link don't contains a / or http(s)
-a:not([href^='/']):not([href^='http']) {
-  cursor: pointer;
-  user-select: none;
+.dnb-anchor-contrast {
+  @include useAnchorContrastStyle();
 }
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/blockquote.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/blockquote.scss
@@ -44,6 +44,10 @@ blockquote,
     padding-bottom: 3rem;
   }
 
+  a {
+    @include useAnchorContrastStyle();
+  }
+
   cite,
   footer,
   figcaption {

diff --git a/packages/dnb-ui-lib/stories/elementsStories.js b/packages/dnb-ui-lib/stories/elementsStories.js
@@ -71,7 +71,7 @@ stories.push([
                   <a href="#sort">Column 3</a>
                 </th>
                 <th>
-                  <a href="#sort" className="dnb-no-anchor-underline">
+                  <a href="#sort" className="dnb-anchor-no-underline">
                     Column 4 <IconPrimary icon="chevron-down" />
                   </a>
                 </th>
@@ -331,22 +331,22 @@ stories.push([
         </a>
       </Box>
       <Box>
-        <a href="/" className="dnb-hover-style">
+        <a href="/" className="dnb-anchor--hover">
           Hover Style
         </a>
       </Box>
       <Box>
-        <a href="/" className="dnb-active-style">
+        <a href="/" className="dnb-anchor--active">
           Active Style
         </a>
       </Box>
       <Box>
-        <a href="/" className="dnb-focus-style">
+        <a href="/" className="dnb-anchor--focus">
           Focus Style
         </a>
       </Box>
       <Box>
-        <a href="/" className="dnb-with-animation">
+        <a href="/" className="dnb-anchor--animation">
           With a special
         </a>
       </Box>
@@ -359,12 +359,12 @@ stories.push([
         </a>
       </Box>
       <Box>
-        <a href="http://dnb.no" className="dnb-with-animation">
+        <a href="http://dnb.no" className="dnb-anchor--animation">
           Anchor with Animation <IconPrimary icon="chevron_right" />
         </a>
       </Box>
       <Box>
-        <a href="http://dnb.no" className="dnb-with-animation">
+        <a href="http://dnb.no" className="dnb-anchor--animation">
           Anchor with Animation - Adipiscing per egestas duis feugiat
           dignissim quam cras eget non est ante purus taciti volutpat mi
           phasellus rhoncus ridiculus diam at proin fusce bibendum netus
@@ -374,7 +374,7 @@ stories.push([
       <Box>
         <a
           href="http://dnb.no"
-          className="dnb-with-animation"
+          className="dnb-anchor--animation"
           style={{ whiteSpace: 'normal' }}
         >
           Anchor with Animation and no `white-space: pre;` - Adipiscing per
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,6 +44,10 @@ blockquote, @@
         padding-bottom: 3rem;
       }
+      a {
+        @include useAnchorContrastStyle();
+      }
       cite,
       footer,
       figcaption {
@@ Expand Down @@