Merge pull request #53 from dnbexperience/develop

get out anker styling enhancements

packages/dnb-design-system-portal/src/pages/quickguide-designer/font-families.js

@@ -8,7 +8,7 @@ const Syntax = () => (
   <>
     <h5>Fedra Sans Book</h5>
     <div className="typography-box">
-      <div className="typo-book">
+      <div className="dnb-typo-book">
         <p>
           Here is a paragraph with some nonsense lipsum text. Contrary to
           popular belief, Lorem Ipsum passage, and going through the cites
@@ -19,10 +19,10 @@ const Syntax = () => (
         </p>
         <h5>Here are some numbers:</h5>
         <div className="dnb-font-family-demo__numbers">
-          <p className="typo-number--lining">
+          <p className="dnb-typo-number--lining">
             <b>Lining:</b> 123456789
           </p>
-          <p className="typo-number--old-style">
+          <p className="dnb-typo-number--old-style">
             <b>Old style:</b> 123456789
           </p>
         </div>
@@ -31,7 +31,7 @@ const Syntax = () => (
 
     <h5>Fedra Sans Book Italic</h5>
     <div className="typography-box">
-      <div className="typo-book-italic">
+      <div className="dnb-typo-book-italic">
         <p>
           Here is a paragraph with some nonsense lipsum text. Contrary to
           popular belief, Lorem Ipsum passage, and going through the cites
@@ -42,20 +42,20 @@ const Syntax = () => (
         </p>
         <h5>Here are some numbers:</h5>
         <div className="dnb-font-family-demo__numbers">
-          <p className="typo-number--lining">
+          <p className="dnb-typo-number--lining">
             <b>Lining:</b> 123456789
           </p>
-          <p className="typo-number--old-style">
+          <p className="dnb-typo-number--old-style">
             <b>Old style:</b> 123456789
           </p>
         </div>
       </div>
     </div>
 
-    <h5 className="typo-medium">Fedra Sans Medium</h5>
+    <h5 className="dnb-typo-medium">Fedra Sans Medium</h5>
     <div className="typography-box">
-      <div className="typo-medium">
-        <p className="typo-medium">
+      <div className="dnb-typo-medium">
+        <p className="dnb-typo-medium">
           Here is a paragraph with some nonsense lipsum text. Contrary to
           popular belief, Lorem Ipsum passage, and going through the cites
           of the word in classical literature, discovered the undoubtable
@@ -65,10 +65,10 @@ const Syntax = () => (
         </p>
         <h5>Here are some numbers:</h5>
         <div className="dnb-font-family-demo__numbers">
-          <p className="typo-number--lining">
+          <p className="dnb-typo-number--lining">
             <b>Lining:</b> 123456789
           </p>
-          <p className="typo-number--old-style">
+          <p className="dnb-typo-number--old-style">
             <b>Old style:</b> 123456789
           </p>
         </div>
@@ -77,7 +77,7 @@ const Syntax = () => (
 
     <h5>Fedra Sans Medium Italic</h5>
     <div className="typography-box">
-      <div className="typo-medium-italic">
+      <div className="dnb-typo-medium-italic">
         <p>
           Here is a paragraph with some nonsense lipsum text. Contrary to
           popular belief, Lorem Ipsum passage, and going through the cites
@@ -88,10 +88,10 @@ const Syntax = () => (
         </p>
         <h5>Here are some numbers:</h5>
         <div className="dnb-font-family-demo__numbers">
-          <p className="typo-number--lining">
+          <p className="dnb-typo-number--lining">
             <b>Lining:</b> 123456789
           </p>
-          <p className="typo-number--old-style">
+          <p className="dnb-typo-number--old-style">
             <b>Old style:</b> 123456789
           </p>
         </div>
@@ -111,10 +111,10 @@ const Syntax = () => (
         </p>
         <h5>Here are some numbers:</h5>
         <div className="dnb-font-family-demo__numbers">
-          <p className="typo-number--lining">
+          <p className="dnb-typo-number--lining">
             <b>Lining:</b> 123456789
           </p>
-          <p className="typo-number--old-style">
+          <p className="dnb-typo-number--old-style">
             <b>Old style:</b> 123456789
           </p>
         </div>
@@ -134,10 +134,10 @@ const Syntax = () => (
         </p>
         <h5>Here are some numbers:</h5>
         <div className="dnb-font-family-demo__numbers">
-          <p className="typo-number--lining">
+          <p className="dnb-typo-number--lining">
             <b>Lining:</b> 123456789
           </p>
-          <p className="typo-number--old-style">
+          <p className="dnb-typo-number--old-style">
             <b>Old style:</b> 123456789
           </p>
         </div>
@@ -157,10 +157,10 @@ const Syntax = () => (
         </p>
         <h5>Here are some numbers:</h5>
         <div className="dnb-font-family-demo__numbers">
-          <p className="typo-number--lining">
+          <p className="dnb-typo-number--lining">
             <b>Lining:</b> 123456789
           </p>
-          <p className="typo-number--old-style">
+          <p className="dnb-typo-number--old-style">
             <b>Old style:</b> 123456789
           </p>
         </div>
@@ -179,10 +179,10 @@ const Syntax = () => (
         </p>
         <h5>Here are some numbers:</h5>
         <div className="dnb-font-family-demo__numbers">
-          <p className="typo-number--lining">
+          <p className="dnb-typo-number--lining">
             <b>Lining:</b> 123456789
           </p>
-          <p className="typo-number--old-style">
+          <p className="dnb-typo-number--old-style">
             <b>Old style:</b> 123456789
           </p>
         </div>

packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/LoanSausage.js

@@ -185,7 +185,7 @@ class SausageItem extends PureComponent {
           className="dnb-loan-sausage__sausage__bar"
           aria-describedby={title.toLowerCase()}
         />
-        <div className="dnb-loan-sausage__sausage__item__description typo-demi">
+        <div className="dnb-loan-sausage__sausage__item__description dnb-typo-demi">
           <span
             className="dnb-loan-sausage__sausage__description-line"
             aria-hidden="true"

packages/dnb-design-system-portal/src/pages/uilib/helper-classes.md

@@ -1,7 +1,7 @@
 ---
 header: 'UI Library'
 title: 'Helper Classes'
-status: 'dep'
+status: 'wip'
 draft: false
 order: 5
 ---

packages/dnb-design-system-portal/src/pages/uilib/helper-classes/anker.md

@@ -0,0 +1,39 @@
+---
+header: 'UI Library'
+title: 'Anker'
+draft: false
+order: 1
+---
+
+import { IconPrimary as Icon } from 'dnb-ui-lib/src'
+
+# Anker
+
+Beside that the Anker Tag gets assigned by default - or let's say, by only importing the core styles, there are also some classes to handle the visual states manually.
+
+## Default Styles
+
+- `a` <a href="/" >Anker with default style</a>
+- `.dnb-hover-style` <a href="/" class="dnb-hover-style">Hover Style</a>
+- `.dnb-active-style` <a href="/" class="dnb-active-style">Active Style</a>
+- `.dnb-focus-style` <a href="/" class="dnb-focus-style">Focus Style</a>
+- `.dnb-with-animation` <a href="/" class="dnb-with-animation">With a special animation Style</a>
+- <a>No href</a> results in `user-select: none;`
+
+## With Icon
+
+- <a href="/">Anker with Icon <Icon icon="chevron_right" /></a>
+- <p>
+    Eros semper blandit tellus mollis primis quisque platea sollicitudin
+    ipsum <a href="/">Inside a Paragraph <Icon icon="bell" /></a> auctor cursus mauris porta consectetur natoque vehicula vestibulum feugiat ultrices vitae fermentum eros euismod imperdiet eleifend justo vivamus posuere
+  </p>
+- <h2>
+   <a href="/">Inside Headings <Icon icon="bell" /></a> H2
+  </h2>
+
+## Manipulation
+
+- `.dnb-no-anker-animation` <a href="/" class="dnb-no-anker-animation">No Animation</a>
+- `.dnb-no-anker-style` <a href="/" class="dnb-no-anker-style">No Style</a>
+- `.dnb-no-anker-hover` <a href="/" class="dnb-no-anker-hover">No Hover</a>
+- `.dnb-no-anker-underline` <a href="/" class="dnb-no-anker-underline">No Underline</a>

packages/dnb-design-system-portal/src/pages/uilib/usage/demos.md

@@ -2,7 +2,7 @@
 header: 'UI Library'
 title: 'Demos'
 status: 'wip'
-draft: false
+draft: true
 ---
 
 # Demo Apps

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="dnb-no-anker-style"
           to={url}
           onClick={onClick}
         >

packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js

@@ -65,28 +65,15 @@ const StyledListItem = styled.li`
 
   a {
     position: relative;
-    padding: 0.45em 0 0.45em;
-
-    color: var(--color-sea-green);
-
-    &:active,
-    &:hover {
-      color: var(--color-ocean-green);
-    }
-    &:active {
-      opacity: 0.7;
-    }
+    padding: 0.5125em 0 0.45em; /* 0,0625 */
 
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 
-    line-height: 1.5rem;
-
-    /* external link icon */
-    svg {
-      float: right;
-      margin-right: 1em;
+    span {
+      line-height: 1rem;
     }
   }
 
@@ -127,30 +114,6 @@ const StyledListItem = styled.li`
     font-size: 0.875em;
   }
 
-  &.active a {
-    color: var(--color-ocean-green);
-
-    &::after {
-      content: '';
-      position: absolute;
-
-      display: flex;
-
-      height: 60%;
-      width: 4px;
-      max-height: auto;
-
-      /* border-radius: 50%; */
-      background: var(--color-ocean-green);
-      transform: translate(-0.6em, -2px);
-
-      /* Reset Anker Style */
-      left: auto;
-      right: auto;
-      bottom: auto;
-    }
-  }
-
   @keyframes show-mobile-menu {
     0% {
       opacity: 0;
@@ -192,15 +155,13 @@ const StyledListItem = styled.li`
   }
 
   .status-badge {
-    position: absolute;
-    z-index: 2;
-    right: 1.5rem;
+    margin-right: 1rem;
 
     display: flex;
     justify-content: center;
     align-items: baseline; /* then we can set line-height */
 
-    font-size: 0.4375rem;
+    font-size: 7px; /* safari handles rem value incorrectly */
     line-height: 1.3125rem; /* same as height + 1px */
     font-weight: 100;
     text-align: center;
@@ -404,7 +365,7 @@ class ListItem extends PureComponent {
       <StyledListItem
         className={classnames(
           `l-${level}`,
-          active && 'active',
+          active && 'dnb-hover-style', // use anker hover style
           status ? `status-${status}` : null,
           className
         )}
@@ -413,12 +374,16 @@ class ListItem extends PureComponent {
           '--delay': `${nr !== null ? nr * 12 : random(1, 160)}ms`
         }}
       >
-        <Link to={to} className="no-underline no-underline-hover">
-          {children}
+        <Link
+          to={to}
+          className="dnb-no-anker-underline dnb-no-anker-hover"
+        >
+          <span>{children}</span>
           {status && (
             <span
               className="status-badge"
               title={
+                ' ' +
                 {
                   wip: 'Working in Progress',
                   dep: 'Deprecated',

packages/dnb-design-system-portal/src/shared/parts/Layout.js

@@ -176,7 +176,7 @@ const Footer = () => (
   <FooterWrapper>
     <small>
       Last Portal update: {buildVersion}
-      <Link to="/license" className="no-underline">
+      <Link to="/license" className="dnb-no-anker-underline">
         Copyright (c) 2018-present DNB.no
       </Link>
     </small>

packages/dnb-design-system-portal/src/uilib/components/examples/Input.txt

@@ -34,7 +34,7 @@
   autocomplete="on"
   placeholder="Placeholder text"
   description="Kr"
-  extra_information="Info: numbers are ligned by using typo-number--lining"
+  extra_information="Info: numbers are ligned by using dnb-typo-number--lining"
   ref={this._ref}
   on_change={this.handleInputChange}
 >

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..