enhance the anker even more and make it compatible with the button anker

dnbexperience · Jan 11, 2019 · d52f9e2 · d52f9e2
1 parent 14fecd4
commit d52f9e2
Show file tree

Hide file tree

Showing 18 changed files with 82 additions and 46 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/focus.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/focus.md
@@ -14,7 +14,7 @@ Read more about the term Page Focus in the [Body Component](/uilib/components/bo
 ```html
 <body>
   <aside><!-- focusable navigation --></aside>
-  <main class="dnb-no-focus" tabindex="-1">
+  <main class="no-focus" tabindex="-1">
     <!-- more markup with focusable HTMLElements -->
   </main>
 </body>

diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js
@@ -70,9 +70,14 @@ const linkStyle = css`
   background-color: var(--color-white);
   transition: background-color 0.5s ease;
 
+  ${'' /* transition: transform ease-out 0.5s;
+  transform: scale3d(1, 1, 1); */}
+
   &:focus,
   &:hover {
     background-color: var(--color-mint-green-50);
+    ${'' /* transform: scale3d(1.02, 1.02, 1);
+    transition: transform ease-out 0.3s; */}
   }
 `
 
@@ -142,7 +147,7 @@ export default class Card extends PureComponent {
       >
         <Link
           css={[linkStyle, customStyle]}
-          className="no-dnb-style"
+          className="no-style"
           to={url}
           onClick={onClick}
         >

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -92,7 +92,7 @@ const Content = ({ className, children }) => (
     className={classnames(
       'dnb-style',
       'dnb-page-content',
-      'dnb-no-focus',
+      'no-focus',
       className
     )}
     css={markdownStyle}

diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/examples/HelperClasses.txt b/packages/dnb-design-system-portal/src/uilib/patterns/examples/HelperClasses.txt
@@ -1,7 +1,7 @@
 <details>
-  <summary className="dnb-fake-focus">Try to focus me</summary>
+  <summary className="fake-focus">Try to focus me</summary>
   My main focus state has been removed and replaced by the helping class
-  .dnb-fake-focus.
+  .fake-focus.
 </details>
 <div className="dnb-sr-only">
   I am only visible to screen readers, so you probably can't see me..

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
@@ -449,9 +449,11 @@ exports[`Button scss have to match snapshot 1`] = `
       border: none; }
   .dnb-button[type='button'] {
     appearance: none; }
-  a .dnb-button {
-    border-bottom: none; }
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
+
+a.dnb-button {
+  border-bottom: none;
+  transition: none; }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -178,13 +178,14 @@
     appearance: none;
   }
 
-  // make sure we style a nodes like a button
-  @at-root a & {
-    border-bottom: none;
-  }
-
   /* Firefox includes a hidden border which messes up button dimensions */
   @at-root button#{&}::-moz-focus-inner & {
     border: none;
   }
 }
+
+// make sure we style an Anker like a button
+a.dnb-button {
+  border-bottom: none;
+  transition: 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
@@ -479,11 +479,13 @@ exports[`Dropdown scss have to match snapshot 1`] = `
       border: none; }
   .dnb-button[type='button'] {
     appearance: none; }
-  a .dnb-button {
-    border-bottom: none; }
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
 
+a.dnb-button {
+  border-bottom: none;
+  transition: none; }
+
 /*
 * DNB FormLabel
 *

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -339,11 +339,13 @@ exports[`InputMasked scss have to match snapshot 1`] = `
       border: none; }
   .dnb-button[type='button'] {
     appearance: none; }
-  a .dnb-button {
-    border-bottom: none; }
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
 
+a.dnb-button {
+  border-bottom: none;
+  transition: none; }
+
 /*
 * DNB FormLabel
 *

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
@@ -421,11 +421,13 @@ exports[`Input scss have to match snapshot 1`] = `
       border: none; }
   .dnb-button[type='button'] {
     appearance: none; }
-  a .dnb-button {
-    border-bottom: none; }
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
 
+a.dnb-button {
+  border-bottom: none;
+  transition: none; }
+
 /*
 * DNB FormLabel
 *

diff --git a/packages/dnb-ui-lib/src/components/modal/Modal.js b/packages/dnb-ui-lib/src/components/modal/Modal.js
@@ -359,7 +359,7 @@ class ModalContent extends PureComponent {
             aria-hidden="true"
             aria-modal="true"
             tabIndex="-1"
-            className="dnb-modal__content__inner dnb-no-focus dnb-style"
+            className="dnb-modal__content__inner no-focus dnb-style"
             onClick={this.preventClick}
             onKeyDown={this.onKeyDownHandler}
             {...params}

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
@@ -294,7 +294,7 @@ exports[`Modal component have to match snapshot 1`] = `
             aria-hidden="true"
             aria-labelledby={null}
             aria-modal="true"
-            className="dnb-modal__content__inner dnb-no-focus dnb-style"
+            className="dnb-modal__content__inner no-focus dnb-style"
             id={null}
             onClick={[Function]}
             onKeyDown={[Function]}
@@ -707,11 +707,13 @@ exports[`Modal scss have to match snapshot 1`] = `
       border: none; }
   .dnb-button[type='button'] {
     appearance: none; }
-  a .dnb-button {
-    border-bottom: none; }
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
 
+a.dnb-button {
+  border-bottom: none;
+  transition: none; }
+
 .dnb-modal {
   font-family: var(--font-family-std, sans-serif);
   font-size: 1rem;

diff --git a/packages/dnb-ui-lib/src/components/tabs/Tabs.js b/packages/dnb-ui-lib/src/components/tabs/Tabs.js
@@ -304,7 +304,7 @@ export default class Tabs extends PureComponent {
       return (
         <div
           role="tablist"
-          className="dnb-tabs__tabs__tablist dnb-tab-focus"
+          className="dnb-tabs__tabs__tablist tab-focus"
           tabIndex="0"
           onKeyUp={this.onKeyUpHandler}
           onKeyDown={this.onKeyDownHandler}

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
@@ -63,7 +63,7 @@ exports[`Tabs component have to match snapshot 1`] = `
         >
           <Tabs>
             <div
-              className="dnb-tabs__tabs__tablist dnb-tab-focus"
+              className="dnb-tabs__tabs__tablist tab-focus"
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               role="tablist"

diff --git a/packages/dnb-ui-lib/src/patterns/helper-classes/Example.js b/packages/dnb-ui-lib/src/patterns/helper-classes/Example.js
@@ -12,9 +12,9 @@ class Example extends PureComponent {
       <Fragment>
         <div className="example-box">
           <details>
-            <summary className="dnb-fake-focus">Try to focus me</summary>
+            <summary className="fake-focus">Try to focus me</summary>
             My main focus state has been removed and replaced by the
-            helping class .dnb-fake-focus.
+            helping class .fake-focus.
           </details>
           <div className="dnb-sr-only">
             I am only visible to screen readers, so you probably can't see

diff --git a/packages/dnb-ui-lib/src/patterns/helper-classes/details.md b/packages/dnb-ui-lib/src/patterns/helper-classes/details.md
@@ -1,6 +1,6 @@
 | Selector               | Description                                                                                                                                                                                                                                                                                      |
 | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `dnb-fake-focus`       | Removes default focus outline from a focusable element and adds a custom visual focus state when is focused                                                                                                                                                                                      |
+| `fake-focus`           | Removes default focus outline from a focusable element and adds a custom visual focus state when is focused                                                                                                                                                                                      |
 | `dnb-sr-only`          | Visually hides an element, but is still reachable by screen readers. `sr`=screen reade                                                                                                                                                                                                           |
 | `dnb-not-sr-only`      | The opposite of `dnb-sr-only`                                                                                                                                                                                                                                                                    |
 | `dnb-unstyled-list`    | Removes default styling for lists. Apply to the `ul` or `ol` elements"                                                                                                                                                                                                                           |

diff --git a/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js b/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js
@@ -176,7 +176,7 @@ export default class MainNav extends PureComponent {
                 <Search id="nav_search_mobile" />
               </div>
               <div
-                className="dnb-main-nav__links dnb-width-limit dnb-fake-focus"
+                className="dnb-main-nav__links dnb-width-limit fake-focus"
                 tabIndex="-1"
                 ref={this._innerRef}
               >

diff --git a/packages/dnb-ui-lib/src/shared/tools.js b/packages/dnb-ui-lib/src/shared/tools.js
@@ -6,17 +6,14 @@
 export const pageFocus = (element = null) => {
   try {
     if (!element) {
-      element = document.querySelector('.dnb-no-focus')
+      element = document.querySelector('.no-focus')
     }
     if (element instanceof HTMLElement) {
       if (!element.hasAttribute('tabindex')) {
         element.setAttribute('tabindex', '-1')
       }
-      if (
-        element.classList &&
-        !element.classList.contains('dnb-no-focus')
-      ) {
-        element.classList.add('dnb-no-focus')
+      if (element.classList && !element.classList.contains('no-focus')) {
+        element.classList.add('no-focus')
       }
       element.focus()
     }

diff --git a/packages/dnb-ui-lib/src/style/core/dnb-core.scss b/packages/dnb-ui-lib/src/style/core/dnb-core.scss
@@ -19,6 +19,19 @@ body {
 }
 
 // Anker
+@mixin hover-style() {
+  background-color: var(--color-mint-green-50);
+  border-bottom-width: 2px;
+}
+@mixin active-style() {
+  color: #fff;
+  background-color: var(--color-sea-green);
+  border-bottom: none;
+}
+@mixin focus-style() {
+  @include fakeFocus();
+  border-bottom: none;
+}
 a {
   // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
   display: inline;
@@ -46,21 +59,16 @@ a {
 
   &:active,
   &:hover {
-    background-color: var(--color-mint-green-50);
-    border-bottom-width: 2px;
+    @include hover-style();
 
     // margins are not needed as long as we go for "inline"
     // margin-bottom: -0.1875em;
   }
   &:active {
-    color: #fff;
-    background-color: var(--color-sea-green);
-    border-bottom: none;
+    @include active-style();
   }
-
   &:focus {
-    @include fakeFocus();
-    border-bottom: none;
+    @include focus-style();
   }
 
   transition: background-color 0.2s ease;
@@ -72,6 +80,15 @@ a {
     transform: translateY(-1px);
   }
 }
+a.hover-style {
+  @include hover-style();
+}
+a.active-style {
+  @include active-style();
+}
+a.focus-style {
+  @include focus-style();
+}
 a.with-animation {
   position: relative; // because of z-index and underline/hover sudo classes
   z-index: 1; // because of focus handling
@@ -122,7 +139,7 @@ a.with-animation {
     }
   }
 }
-a.no-dnb-style {
+a.no-style {
   padding: 0;
   margin: 0;
   white-space: normal;
@@ -131,6 +148,7 @@ a.no-dnb-style {
   &:active,
   &:hover {
     color: inherit;
+    background-color: none;
   }
 
   &::after {
@@ -149,6 +167,11 @@ a.no-underline {
   }
 }
 a.no-hover {
+  &:active,
+  &:hover {
+    color: inherit;
+    background-color: none;
+  }
   // bg
   &::before {
     content: none;
@@ -172,13 +195,13 @@ html[data-whatinput='mouse'] .dnb-style *:focus {
 html[data-whatinput='keyboard'] .dnb-style *:not(a):not(div):focus {
   @include fakeFocus();
 }
-.dnb-no-focus {
+.no-focus {
   outline: none;
 }
-.dnb-fake-focus {
+.fake-focus {
   @include fakeFocus();
 }
-.dnb-tab-focus {
+.tab-focus {
   outline: none;
   &:focus {
     @include fakeFocus('keyboard');