fix: secondary button border-bottom did not show up on href buttons

packages/dnb-design-system-portal/src/pages/uilib/components/button.md

@@ -6,9 +6,9 @@ order: 2
 
 import Tabs from 'Tags/Tabs'
 
-import FirstTabContent from 'Pages/uilib/components/button/first-tab-content'
-import SecondTabContent from 'Pages/uilib/components/button/second-tab-content'
-import ThirdTabContent from 'Pages/uilib/components/button/third-tab-content'
+import FirstTabContent from 'Pages/uilib/components/button/button-info'
+import SecondTabContent from 'Pages/uilib/components/button/button-properties'
+import ThirdTabContent from 'Pages/uilib/components/button/button-events'
 
 # Button
 

packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js

@@ -5,15 +5,13 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import ComponentBox from '../../../../shared/inlineTags/ComponentBox'
-import Button from 'dnb-ui-lib/src/components/button'
 import { bell_medium as Bell, question } from 'dnb-ui-lib/src/icons'
 
 class Example extends PureComponent {
   clickHandler = () => {
     alert('You clicked a button with a click function attached to it')
   }
   render() {
-    console.log('Example')
     return (
       <Fragment>
         <ComponentBox>
@@ -33,101 +31,133 @@ class Example extends PureComponent {
 />
           `}
         </ComponentBox>
-        <div className="example-box">
-          <Button
-            text="Disabled primary button"
-            title="This is a button title"
-            disabled
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Disabled secondary button"
-            variant="secondary"
-            title="This is a button title"
-            disabled
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Primary button with icon"
-            title="This is a button title"
-            icon="chevron_right"
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Primary button with icon on left"
-            title="This is a button title"
-            icon_position="left"
-            icon="chevron_left"
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            variant="tertiary"
-            text="Tertiary button with icon on left"
-            title="This is a button title"
-            icon_position="left"
-            icon="chevron_left"
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            variant="tertiary"
-            text="Tertiary button with icon on left"
-            title="This is a button title"
-            icon_position="left"
-            icon="chevron_left"
-            disabled
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Primary button with href"
-            href="?no-cache=1"
-            title="This is a link"
-            icon_position="right"
-            icon="chevron_right"
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            title="Disabled Icon only Button"
-            icon="calendar"
-            disabled
-          />
-          <Button title="Button with Icon only" icon="calendar" />
-          <Button
-            title="Default sized Button with medium Icon"
-            icon="calendar"
-            icon_size="medium"
-            size="default"
-          />
-          <Button
-            title="Button with custom, Secondary Icon only"
-            icon={question}
-          />
-          <p className="example-caption">Button with Icon only</p>
-        </div>
-        <div className="example-box">
-          <Button
-            variant="signal"
-            text="Signal Button (large size)"
-            size="large"
-            icon={Bell}
-            icon_size="medium" // medium is equalent to 24, but responsive
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            variant="signal"
-            text="Disabled Signal Button"
-            icon={<Bell />}
-            icon_size="medium"
-            disabled
-          />
-        </div>
+        <ComponentBox>
+          {`
+<Button
+  text="Disabled primary button"
+  title="This is a button title"
+  disabled
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  text="Disabled secondary button"
+  variant="secondary"
+  title="This is a button title"
+  disabled
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  text="Primary button with icon"
+  title="This is a button title"
+  icon="chevron_right"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  text="Primary button with icon on left"
+  title="This is a button title"
+  icon_position="left"
+  icon="chevron_left"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  variant="tertiary"
+  text="Tertiary button with icon on left"
+  title="This is a button title"
+  icon_position="left"
+  icon="chevron_left"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  variant="tertiary"
+  text="Tertiary button with icon on left"
+  title="This is a button title"
+  icon_position="left"
+  icon="chevron_left"
+  disabled
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<>
+<Button
+  text="Primary button with href"
+  href="?no-cache=1"
+  title="This is a link"
+  icon_position="right"
+  icon="chevron_right"
+/>
+<Button
+  variant="secondary"
+  text="Secondary button with href"
+  href="?no-cache=1"
+  title="This is a link"
+  icon_position="left"
+  icon="chevron_left"
+/>
+</>
+          `}
+        </ComponentBox>
+        <ComponentBox scope={{ question }}>
+          {`
+<>
+  <Button
+    title="Disabled Icon only Button"
+    icon="calendar"
+    disabled
+  />
+  <Button title="Button with Icon only" icon="calendar" />
+  <Button
+    title="Default sized Button with medium Icon"
+    icon="calendar"
+    icon_size="medium"
+    size="default"
+  />
+  <Button
+    title="Button with custom, Secondary Icon only"
+    icon={question}
+  />
+  <p className="example-caption">Button with Icon only</p>
+</>
+          `}
+        </ComponentBox>
+        <ComponentBox scope={{ Bell }}>
+          {`
+<Button
+  variant="signal"
+  text="Signal Button (large size)"
+  size="large"
+  icon={Bell}
+  icon_size="medium" // medium is equalent to 24, but responsive
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox scope={{ Bell }}>
+          {`
+<Button
+  variant="signal"
+  text="Disabled Signal Button"
+  icon={<Bell />}
+  icon_size="medium"
+  disabled
+/>
+          `}
+        </ComponentBox>
       </Fragment>
     )
   }

packages/dnb-design-system-portal/src/pages/uilib/components/button/second-tab-content.md → packages/dnb-design-system-portal/src/pages/uilib/components/button/button-properties.md

@@ -18,9 +18,3 @@ draft: true
 | `class`         | _(optional)_ any extra modifying class.                                                                                                |
 | `attributes`    | _(optional)_ insert any other attributes. For example `disabled` or any other custom attributes.                                       |
 | `href`          | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
-
-## Events
-
-| Events     | Description                                   |
-| ---------- | --------------------------------------------- |
-| `on_click` | _(optional)_ will be called on a click event. |

packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js

@@ -27,7 +27,7 @@ import dnbTheme from './themes/dnb-prism-theme'
 const prismStyle = css(dnbTheme)
 
 const Wrapper = styled.div`
-  /* empty */
+  margin-bottom: 2rem;
 `
 
 const CodeBlock = ({

packages/dnb-ui-lib/src/components/button/Button.js

@@ -187,7 +187,7 @@ export default class Button extends PureComponent {
       id,
       class_name,
       className,
-      href ? 'dnb-no-anchor-underline dnb-no-anchor-hover' : null
+      href ? '' : null // dnb-no-anchor-underline dnb-no-anchor-hover
     )
 
     const params = {

packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap

@@ -123,7 +123,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
   variant="primary"
 >
   <a
-    className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className dnb-no-anchor-underline dnb-no-anchor-hover"
+    className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className"
     disabled="disabled"
     href="https://url"
     id="id"
@@ -216,6 +216,10 @@ exports[`Button scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+/*
+ * Anchor
+ *
+ */
 /*
  * Typography
  *
@@ -412,6 +416,17 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   .dnb-button--signal[disabled] {
     color: #b0b0b0;
     background-color: var(--color-signal-yellow-30); }
+
+a.dnb-button {
+  transition: none; }
+  a.dnb-button:hover {
+    color: inherit;
+    background-color: inherit;
+    border-bottom-width: 1px; }
+  a.dnb-button::before {
+    content: none; }
+  a.dnb-button::before {
+    transition: max-height 0.01s linear; }
 "
 `;
 
@@ -655,14 +670,13 @@ exports[`Button scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0;
-    /* -1px because of the border width */ }
+    line-height: 0; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
     @supports not (-ms-ime-align: auto) {
       .dnb-button__icon {
-        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
+        transform: translateY(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -757,6 +771,10 @@ exports[`Button scss have to match snapshot 1`] = `
     border: none; }
 
 a.dnb-button {
-  transition: none; }
+  -webkit-appearance: none; }
+  a.dnb-button .dnb-button__icon {
+    transform: translateY(0); }
+  a.dnb-button .dnb-button__text {
+    transform: translateY(1px); }
 "
 `;

packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss

@@ -3,9 +3,6 @@
 *
 */
 
-// this one is needed, in case dont import "/themes/imports.scss" before
-// @import '../../../style/core/utilities.scss';
-
 @mixin buttonHover($color, $background-color) {
   @include hover(true) {
     color: $color;

packages/dnb-ui-lib/src/components/button/style/_button.scss

@@ -50,9 +50,8 @@
       height: var(--button-icon-size);
     }
 
-    /* -1px because of the border width */
     @supports not (-ms-ime-align: auto) {
-      transform: translateY(calc(1px - 1px - var(--button-border-width)));
+      transform: translateY(-1px);
     }
   }
   &__text {
@@ -203,5 +202,13 @@
 
 // make sure we style an Anchor like a button
 a.dnb-button {
-  transition: none;
+  -webkit-appearance: none; // because we have "appearance: button" in reset.scss
+
+  // some correction
+  .dnb-button__icon {
+    transform: translateY(0);
+  }
+  .dnb-button__text {
+    transform: translateY(1px);
+  }
 }

packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss

@@ -3,9 +3,6 @@
 *
 */
 
-// as long as we import "dnb-button-theme-ui" - we dont need also /themes/imports.scss
-// @import '../../../../style/themes/imports.scss';
-
 @import './dnb-button-theme-ui.scss';
 
 :root {