feat(Tabs): add no_border prop which removes tablist border

packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js

@@ -316,3 +316,19 @@ const MaxWidth = styled(Wrapper)`
     }
   } */
 `
+export const TabsNoBorder = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="tabs-no-border">
+      {() => /* jsx */ `
+<Tabs no_border={true}>
+  <Tabs.Content title="First">
+    <H2 top={0} bottom>First</H2>
+  </Tabs.Content>
+  <Tabs.Content title="Second">
+    <H2 top={0} bottom>Second</H2>
+  </Tabs.Content>
+</Tabs>
+`}
+    </ComponentBox>
+  </Wrapper>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.md

@@ -11,6 +11,7 @@ TabsExampleUsingData,
 TabsExampleRightAligned,
 TabsExampleReachRouterNavigation,
 TabsExampleReactRouterNavigation,
+TabsNoBorder,
 } from 'Docs/uilib/components/tabs/Examples'
 
 ## Demos
@@ -61,6 +62,10 @@ But depending on your setup, you may have to align your Tabs all the way to the
 }
 ```
 
+### Tabs without bottom border
+
+<TabsNoBorder />
+
 ### Router navigation with Reach Router
 
 This demo uses `@reach/router`. More [examples on CodeSandbox](https://codesandbox.io/embed/8z8xov7xyj).

packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.md

@@ -18,6 +18,7 @@ showTabs: true
 | `prerender`                                 | _(optional)_ if set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.                                                                                              |
 | `prevent_rerender`                          | _(optional)_ if set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`. |
 | `scroll`                                    | _(optional)_ if set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.                                                                                                                 |
+| `no_border`                                    | _(optional)_ if set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.                                                                                                                 |
 | `skeleton`                                  | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                                                                                                     |
 | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                   |
 

packages/dnb-eufemia/src/components/tabs/Tabs.js

@@ -86,6 +86,7 @@ export default class Tabs extends React.PureComponent {
     align: PropTypes.oneOf(['left', 'center', 'right']),
     tabs_style: PropTypes.string,
     tabs_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    no_border: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     use_hash: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     prerender: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     prevent_rerender: PropTypes.oneOfType([
@@ -124,6 +125,7 @@ export default class Tabs extends React.PureComponent {
     align: 'left',
     tabs_style: null,
     tabs_spacing: null,
+    no_border: false,
     use_hash: false,
     prerender: false,
     prevent_rerender: false,
@@ -994,7 +996,7 @@ export default class Tabs extends React.PureComponent {
   }
 
   TabsListHandler = ({ children, className, ...rest }) => {
-    const { align, tabs_style, tabs_spacing } = this.props
+    const { align, tabs_style, tabs_spacing, no_border } = this.props
     const { hasScrollbar, atEdge } = this.state
 
     return (
@@ -1010,6 +1012,7 @@ export default class Tabs extends React.PureComponent {
             : null,
           hasScrollbar && 'dnb-tabs--has-scrollbar',
           atEdge && 'dnb-tabs--at-edge',
+          no_border && 'dnb-tabs__tabs--no-border',
           className
         )}
         ref={this._tabsRef}

packages/dnb-eufemia/src/components/tabs/__tests__/Tabs.screenshot.test.js

@@ -47,6 +47,18 @@ describe('Tabs screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match tabs with no bottom border', async () => {
+    const screenshot = await testPageScreenshot({
+      style: {
+        width: '40rem',
+        height: '10rem',
+        padding: '0 2rem 4rem 2rem',
+      },
+      selector: '[data-visual-test="tabs-no-border"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Tabs screenshot', () => {

packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap

@@ -29,6 +29,7 @@ exports[`A single Tab component has to work with "Tabs.Content" from outside 1`]
     }
     id="linked"
     label={null}
+    no_border={false}
     on_change={null}
     on_click={null}
     on_focus={null}
@@ -551,6 +552,7 @@ exports[`Tabs component have to match snapshot 1`] = `
         "data": "data",
         "id": "id",
         "label": "label",
+        "no_border": "no_border",
         "on_change": [Function],
         "on_click": [Function],
         "on_focus": [Function],
@@ -608,6 +610,7 @@ exports[`Tabs component have to match snapshot 1`] = `
   }
   id="id"
   label={null}
+  no_border={false}
   on_change={null}
   on_click={null}
   on_focus={null}
@@ -1342,6 +1345,8 @@ exports[`Tabs scss have to match snapshot 1`] = `
     bottom: 0;
     width: 100vw;
     height: 1px; }
+  .dnb-tabs__tabs--no-border::before {
+    content: none; }
 
 .dnb-tabs:not(.dnb-tabs--has-scrollbar) .dnb-tabs__tabs__tablist {
   margin-left: -0.5rem;

packages/dnb-eufemia/src/components/tabs/style/_tabs.scss

@@ -53,6 +53,12 @@
       width: 100vw;
       height: 1px;
     }
+
+    &--no-border {
+      &::before {
+        content: none;
+      }
+    }
   }
 
   &:not(.dnb-tabs--has-scrollbar) &__tabs__tablist {