From 2161f12ddcfae84ad600b4549b206f067d7a1578 Mon Sep 17 00:00:00 2001 From: Thayanan Tharmapalan Date: Tue, 8 Feb 2022 16:42:47 +0100 Subject: [PATCH] feat(Tabs): add no_border prop --- .../src/docs/uilib/components/tabs/Examples.js | 16 ++++++++++++++++ .../src/docs/uilib/components/tabs/demos.md | 5 +++++ .../docs/uilib/components/tabs/properties.md | 1 + .../dnb-eufemia/src/components/tabs/Tabs.js | 5 ++++- .../tabs/__tests__/Tabs.screenshot.test.js | 12 ++++++++++++ .../__tests__/__snapshots__/Tabs.test.js.snap | 5 +++++ ...-tabs-with-no-bottom-border-1-6f4ae.snap.png | Bin 0 -> 4805 bytes .../src/components/tabs/style/_tabs.scss | 6 ++++++ 8 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/tabs-screenshot-test-js-tabs-screenshot-have-to-match-tabs-with-no-bottom-border-1-6f4ae.snap.png diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js index 9d3979451d3..d1c0186aeab 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js @@ -316,3 +316,19 @@ const MaxWidth = styled(Wrapper)` } } */ ` +export const TabsNoBorder = () => ( + + + {() => /* jsx */ ` + + +

First

+ + +

Second

+ + +`} + + +) \ No newline at end of file diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.md index 3ab81b5f984..0156d342d8c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.md +++ b/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 + + + ### Router navigation with Reach Router This demo uses `@reach/router`. More [examples on CodeSandbox](https://codesandbox.io/embed/8z8xov7xyj). diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.md index e8bbe0e61ef..8f9e818744a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.md +++ b/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. | diff --git a/packages/dnb-eufemia/src/components/tabs/Tabs.js b/packages/dnb-eufemia/src/components/tabs/Tabs.js index 48faa4e6bbd..f8851d7aa93 100644 --- a/packages/dnb-eufemia/src/components/tabs/Tabs.js +++ b/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} diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/Tabs.screenshot.test.js b/packages/dnb-eufemia/src/components/tabs/__tests__/Tabs.screenshot.test.js index 2b62e86e554..2917faedbed 100644 --- a/packages/dnb-eufemia/src/components/tabs/__tests__/Tabs.screenshot.test.js +++ b/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', () => { diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap index f86a2c08645..8cc2c8ea2c5 100644 --- a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap +++ b/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; diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/tabs-screenshot-test-js-tabs-screenshot-have-to-match-tabs-with-no-bottom-border-1-6f4ae.snap.png b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/tabs-screenshot-test-js-tabs-screenshot-have-to-match-tabs-with-no-bottom-border-1-6f4ae.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..52bc177310663e2f416a1835e7226814576e9d1b GIT binary patch literal 4805 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 Jt1WKC{~KSDP00WN literal 0 HcmV?d00001 diff --git a/packages/dnb-eufemia/src/components/tabs/style/_tabs.scss b/packages/dnb-eufemia/src/components/tabs/style/_tabs.scss index f6792809c15..b44dbeaeb53 100644 --- a/packages/dnb-eufemia/src/components/tabs/style/_tabs.scss +++ b/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 {