From 4c86ff95d70d0b9e23c018e220ab9a598b788deb Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Mon, 21 Jan 2019 13:36:09 +0100
Subject: [PATCH] feat: refactor #tabs to make it more flexible and

---
 .../src/shared/inlineTags/Tabs.js             | 135 +++++++++++++++++-
 .../src/shared/parts/uilib/ItemWrapper.js     |   3 +-
 .../src/uilib/components/examples/Tabs.txt    |  11 +-
 .../dnb-ui-lib/src/components/tabs/Example.js |  11 +-
 .../dnb-ui-lib/src/components/tabs/Tabs.js    | 112 ++++++++++-----
 .../components/tabs/__tests__/Tabs.test.js    |   8 +-
 .../__tests__/__snapshots__/Tabs.test.js.snap |  46 +++---
 .../dnb-ui-lib/src/components/tabs/details.md |   2 +-
 .../src/components/tabs/style/_tabs.scss      |   3 +-
 .../dnb-ui-lib/stories/componentExamples.js   |   8 +-
 10 files changed, 257 insertions(+), 82 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/Tabs.js b/packages/dnb-design-system-portal/src/shared/inlineTags/Tabs.js
index 32a3e6d39f9..6533981bb10 100644
--- a/packages/dnb-design-system-portal/src/shared/inlineTags/Tabs.js
+++ b/packages/dnb-design-system-portal/src/shared/inlineTags/Tabs.js
@@ -3,5 +3,136 @@
  *
  */
 
-import { Tabs } from 'dnb-ui-lib/src'
-export default Tabs
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+import { css } from '@emotion/core'
+// import styled from '@emotion/styled'
+import { navigate, parsePath } from 'gatsby'
+import { CloseButton } from 'dnb-ui-lib/src/components/modal'
+import { fullscreen as fullscreenIcon } from 'dnb-ui-lib/src/icons/secondary_icons'
+import { Button, Tabs } from 'dnb-ui-lib/src'
+
+const pathPrefix = __PATH_PREFIX__ // eslint-disable-line
+
+const getLocation = () => {
+  if (typeof window === 'undefined') {
+    return null
+  }
+  const { pathname, search, hash } = window.location
+  return {
+    ...parsePath(pathname.replace(new RegExp(pathPrefix || '', 'g'), '')),
+    search,
+    hash
+  }
+}
+
+// const DemoWrapper = styled.div`
+//   padding: 2rem 0 0;
+// `
+
+const tabsWrapperStyle = css`
+  .fullscreen-page & {
+    top: 0;
+    .is-sticky .dnb-tabs__tabs {
+      margin: 0 -2rem;
+    }
+  }
+  .dnb-modal__close-button {
+    position: relative;
+    top: auto; /* to force the button to center */
+    right: auto;
+  }
+`
+
+class CustomTabs extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    tabs: PropTypes.array
+  }
+  static defaultProps = {
+    tabs: [
+      { title: 'Demo', key: 'demo' },
+      { title: 'Details', key: 'info' },
+      { title: 'Markup', key: 'code' }
+    ]
+  }
+  state = {
+    activeTabKey: 'demo',
+    wasFullscreen: null
+  }
+  constructor(props) {
+    super(props)
+    this._id = 'item-wrapper'
+    const location = getLocation()
+    if (location)
+      this.state.wasFullscreen = /fullscreen/.test(location.search)
+  }
+  openTab = ({ key }) => {
+    this.setState({
+      activeTabKey: key
+    })
+  }
+  isActive(tabKey) {
+    return this.state.activeTabKey === tabKey
+  }
+  componentWillMount() {
+    const location = getLocation()
+    if (location)
+      this.setState({
+        wasFullscreen: /fullscreen/.test(location.search)
+      })
+  }
+  openFullscreen = () => {
+    const location = getLocation()
+    if (location)
+      navigate(
+        `${location.pathname}?fullscreen#${this.state.activeTabKey}`
+      )
+  }
+  quitFullscreen = () => {
+    const location = getLocation()
+    if (location) navigate([location.pathname, location.hash].join(''))
+  }
+
+  render() {
+    const { tabs, children } = this.props
+    const data = Tabs.getData({ tabs, children })
+
+    return (
+      <Tabs
+        // id={this._id}
+        use_hash
+        data={data}
+        on_change={this.openTab}
+        render={({ Wrapper, Content, TabsList, Tabs }) => {
+          return (
+            <Wrapper css={tabsWrapperStyle}>
+              <TabsList>
+                <Tabs />
+                {this.state.wasFullscreen ? (
+                  <CloseButton
+                    on_click={this.quitFullscreen}
+                    title="Quit Fullscreen"
+                  />
+                ) : (
+                  <Button
+                    on_click={this.openFullscreen}
+                    variant="secondary"
+                    title="Fullscreen"
+                    icon={fullscreenIcon}
+                  />
+                )}
+              </TabsList>
+              <Content />
+            </Wrapper>
+          )
+        }}
+      />
+    )
+  }
+}
+
+export default CustomTabs
+
+CustomTabs.Content = Tabs.Content
diff --git a/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js b/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js
index 15b524ce831..8e09a2dbdac 100644
--- a/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js
+++ b/packages/dnb-design-system-portal/src/shared/parts/uilib/ItemWrapper.js
@@ -209,7 +209,7 @@ class ItemWrapper extends PureComponent {
             use_hash
             data={tabsUsed}
             on_change={this.openTab}
-            render={({ Wrapper, TabsList, Tabs }) => {
+            render={({ Wrapper, TabsList, Content, Tabs }) => {
               return (
                 <Wrapper css={tabsWrapperStyle}>
                   <TabsList>
@@ -228,6 +228,7 @@ class ItemWrapper extends PureComponent {
                       />
                     )}
                   </TabsList>
+                  <Content />
                 </Wrapper>
               )
             }}
diff --git a/packages/dnb-design-system-portal/src/uilib/components/examples/Tabs.txt b/packages/dnb-design-system-portal/src/uilib/components/examples/Tabs.txt
index 117e00cde40..0c1ae1e00bc 100644
--- a/packages/dnb-design-system-portal/src/uilib/components/examples/Tabs.txt
+++ b/packages/dnb-design-system-portal/src/uilib/components/examples/Tabs.txt
@@ -6,12 +6,12 @@
   }}
 />
 <Tabs>
-  <Tabs.Tab title="First">
+  <Tabs.Content title="First">
     <h2>First</h2>
-  </Tabs.Tab>
-  <Tabs.Tab title="Second">
+  </Tabs.Content>
+  <Tabs.Content title="Second">
     <h2>Second</h2>
-  </Tabs.Tab>
+  </Tabs.Content>
 </Tabs>
 <Tabs
   selected_key="second"
@@ -19,7 +19,7 @@
   label="Some Tabs label"
   data={data}
   on_change={this.openTab}
-  render={({ Wrapper, TabsList, Tabs }) => {
+  render={({ Wrapper, Content, TabsList, Tabs }) => {
     return (
       <Wrapper>
         <TabsList>
@@ -28,6 +28,7 @@
           </small>
           <Tabs />
         </TabsList>
+        <Content />
       </Wrapper>
     );
   }}
diff --git a/packages/dnb-ui-lib/src/components/tabs/Example.js b/packages/dnb-ui-lib/src/components/tabs/Example.js
index 7d70ead0eff..e85cf480f2d 100644
--- a/packages/dnb-ui-lib/src/components/tabs/Example.js
+++ b/packages/dnb-ui-lib/src/components/tabs/Example.js
@@ -50,12 +50,12 @@ class Example extends PureComponent {
         </div>
         <div className="example-box">
           <Tabs>
-            <Tabs.Tab title="First">
+            <Tabs.Content title="First">
               <h2>First</h2>
-            </Tabs.Tab>
-            <Tabs.Tab title="Second">
+            </Tabs.Content>
+            <Tabs.Content title="Second">
               <h2>Second</h2>
-            </Tabs.Tab>
+            </Tabs.Content>
           </Tabs>
           <p className="example-caption">
             Left aligned tabs, using React Components only
@@ -68,7 +68,7 @@ class Example extends PureComponent {
             label="Some Tabs label"
             data={data}
             on_change={this.openTab}
-            render={({ Wrapper, TabsList, Tabs }) => {
+            render={({ Wrapper, Content, TabsList, Tabs }) => {
               return (
                 <Wrapper>
                   <TabsList>
@@ -77,6 +77,7 @@ class Example extends PureComponent {
                     </small>
                     <Tabs />
                   </TabsList>
+                  <Content />
                 </Wrapper>
               )
             }}
diff --git a/packages/dnb-ui-lib/src/components/tabs/Tabs.js b/packages/dnb-ui-lib/src/components/tabs/Tabs.js
index 1e62c63efec..fb0f932cae6 100644
--- a/packages/dnb-ui-lib/src/components/tabs/Tabs.js
+++ b/packages/dnb-ui-lib/src/components/tabs/Tabs.js
@@ -106,18 +106,36 @@ export default class Tabs extends PureComponent {
     const data =
       !props.data && props.children ? props.children : props.data
 
-    // if it is a React Component - collect data from Tabs.Tab component
+    // if it is a React Component - collect data from Tabs.Content component
     if (
       Array.isArray(props.children) &&
       (typeof props.children[0] === 'function' ||
         React.isValidElement(props.children[0]))
     ) {
-      res = props.children.reduce((acc, cur, i) => {
-        if (cur.props.title) {
-          const { key, ...rest } = cur.props
+      res = props.children.reduce((acc, content, i) => {
+        if (
+          content.type &&
+          (content.type.name || content.type.displayName) ===
+            'CustomContent'
+        ) {
+          const { title, key: _key, hash, ...rest } = {
+            // props from the "CustomContent" Component
+            ...content.props,
+
+            // tabs data from main prop
+            ...((props.tabs &&
+              Array.isArray(props.tabs) &&
+              props.tabs[i]) ||
+              {}),
+
+            // remove children, if there is some
+            ...{ children: null }
+          }
+
           acc.push({
-            key: key || `key${i}`,
-            content: cur, // can be a Node or a Function
+            title,
+            key: (!_key && hash ? hash : _key) || generateKey(title),
+            content, // can be a Node or a Function
             ...rest
           })
         }
@@ -125,7 +143,7 @@ export default class Tabs extends PureComponent {
       }, [])
     }
 
-    // continue, while the children dident contain our data
+    // continue, while the children didn't contain our data
     if (!(res && res.length > 0)) {
       // if data is array, it looks good!
       if (props.data && Array.isArray(data)) {
@@ -300,19 +318,17 @@ export default class Tabs extends PureComponent {
     const { selected_key } = this.state
     let content = null
 
-    // if content is provided as an object
-    if (
-      children &&
-      typeof children === 'object' &&
-      children[selected_key]
-    ) {
-      content = children[selected_key]
-
-      // if content is provided as a render prop
-    } else if (children && typeof children === 'function') {
-      content = children.apply(this, [selected_key])
+    if (children) {
+      if (typeof children === 'object' && children[selected_key]) {
+        // if content is provided as an object
+        content = children[selected_key]
+      } else if (typeof children === 'function') {
+        // if content is provided as a render prop
+        content = children.apply(this, [selected_key])
+      }
     }
 
+    // check of the content is provided in the "data" part instead
     if (!content) {
       let items = []
 
@@ -322,7 +338,7 @@ export default class Tabs extends PureComponent {
         items = children
       }
 
-      // if content was provided as a React Component like "Tabs.Tab"
+      // if content was provided as a React Component like "Tabs.Content"
       // - or the content was provided as a content prop i data
       if (items) {
         content = items
@@ -336,11 +352,7 @@ export default class Tabs extends PureComponent {
       content = <Component />
     }
 
-    return (
-      <ContentWrapper id={this._id} selected_key={selected_key}>
-        {content || <span>Tab content not found</span>}
-      </ContentWrapper>
-    )
+    return content
   }
 
   render() {
@@ -398,6 +410,7 @@ export default class Tabs extends PureComponent {
         </div>
       )
     }
+    Tabs.displayName = 'Tabs'
 
     // To have a reusable Component laster, do this like that
     const TabsList = ({ children }) => (
@@ -410,9 +423,10 @@ export default class Tabs extends PureComponent {
         {children}
       </div>
     )
+    TabsList.displayName = 'TabsList'
 
     // To have a reusable Component laster, do this like that
-    const Wrapper = ({ children, isInside, ...rest }) => {
+    const Wrapper = ({ children, ...rest }) => {
       const params = {
         className: classnames('dnb-tabs', className, _className)
       }
@@ -420,29 +434,38 @@ export default class Tabs extends PureComponent {
       // also used for code markup simulation
       validateDOMAttributes(this.props, params)
 
-      // check if the Wrapper is used from "inside", else there have to be children
-      // from inside, there is the posibility that we got the content privded by the "data" prop
-      const content =
-        isInside || this.props.children ? this.renderContent() : null
-
       return (
         <div {...params} {...rest}>
           {children}
-          {content}
+          {/* {content} */}
         </div>
       )
     }
+    Wrapper.displayName = 'TabsWrapper'
+
+    const Content = ({ showEmptyMessage = false } = {}) => {
+      const { selected_key } = this.props
+      const content = this.renderContent()
+      return (
+        <ContentWrapper id={this._id} selected_key={selected_key}>
+          {content ||
+            (showEmptyMessage && <span>Tab content not found</span>)}
+        </ContentWrapper>
+      )
+    }
+    Content.displayName = 'TabContent'
 
     // here we reuse the component, if it has a custom renderer
     if (typeof customRenderer === 'function') {
-      return customRenderer({ Wrapper, TabsList, Tabs })
+      return customRenderer({ Wrapper, Content, TabsList, Tabs })
     }
 
     return (
-      <Wrapper isInside>
+      <Wrapper>
         <TabsList>
           <Tabs />
         </TabsList>
+        <Content showEmptyMessage />
       </Wrapper>
     )
   }
@@ -481,18 +504,21 @@ class ContentWrapper extends PureComponent {
 /*
   Like:
   <Tabs>
-    <Tabs.Tab title="first" selected disabled>first</Tabs.Tab>
-    <Tabs.Tab title="second">second</Tabs.Tab>
+    <Tabs.Content title="first" selected disabled>first</Tabs.Content>
+    <Tabs.Content title="second">second</Tabs.Content>
   </Tabs>
  */
-class Tab extends PureComponent {
+class CustomContent extends PureComponent {
   static propTypes = {
-    title: PropTypes.string.isRequired, // eslint-disable-line
+    title: PropTypes.string, // eslint-disable-line
+    hash: PropTypes.string, // eslint-disable-line
     selected: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // eslint-disable-line
     disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // eslint-disable-line
     children: PropTypes.node.isRequired
   }
   static defaultProps = {
+    title: null,
+    hash: null,
     selected: null,
     disabled: null
   }
@@ -502,5 +528,15 @@ class Tab extends PureComponent {
   }
 }
 
-Tabs.Tab = Tab
+const generateKey = title => {
+  const key = String(title)
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, '-')
+    .replace(/-{1,}/g, '-')
+  return key
+}
+
+Tabs.Content = CustomContent
+Tabs.generateKey = generateKey
 Tabs.ContentWrapper = ContentWrapper
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/Tabs.test.js b/packages/dnb-ui-lib/src/components/tabs/__tests__/Tabs.test.js
index 8c7ad418cd3..338ca5b2326 100644
--- a/packages/dnb-ui-lib/src/components/tabs/__tests__/Tabs.test.js
+++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/Tabs.test.js
@@ -131,13 +131,13 @@ describe('A single Tab component', () => {
     expect(Comp.find('div.dnb-tabs__content').text()).toBe('First')
   })
 
-  it('has to work with "Tabs.Tab" as children Components', () => {
+  it('has to work with "Tabs.Content" as children Components', () => {
     const Comp = mount(
       <Component>
-        <Component.Tab title="first">first</Component.Tab>
-        <Component.Tab title="second" selected>
+        <Component.Content title="first">first</Component.Content>
+        <Component.Content title="second" selected>
           second
-        </Component.Tab>
+        </Component.Content>
       </Component>
     )
     expect(Comp.find('button.selected').exists()).toBe(true)
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
index f99bd14534d..bfa64d34753 100644
--- 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
@@ -31,10 +31,11 @@ exports[`Tabs component have to match snapshot 1`] = `
   }
   2={
     Object {
-      "displayName": "Tab",
+      "displayName": "CustomContent",
       "props": Object {
         "children": "children",
         "disabled": "disabled",
+        "hash": "hash",
         "selected": "selected",
         "title": "title",
       },
@@ -65,9 +66,7 @@ exports[`Tabs component have to match snapshot 1`] = `
   selected_key="second"
   use_hash={false}
 >
-  <Wrapper
-    isInside={true}
-  >
+  <TabsWrapper>
     <div
       className="dnb-tabs"
     >
@@ -154,25 +153,29 @@ exports[`Tabs component have to match snapshot 1`] = `
           </Tabs>
         </div>
       </TabsList>
-      <ContentWrapper
-        id="id"
-        selected_key="second"
+      <TabContent
+        showEmptyMessage={true}
       >
-        <div
-          aria-labelledby="id-tab-second"
-          className="dnb-tabs__content"
-          id="id-content-second"
-          role="tabpanel"
+        <ContentWrapper
+          id="id"
+          selected_key="second"
         >
-          <second>
-            <h2>
-              Second
-            </h2>
-          </second>
-        </div>
-      </ContentWrapper>
+          <div
+            aria-labelledby="id-tab-second"
+            className="dnb-tabs__content"
+            id="id-content-second"
+            role="tabpanel"
+          >
+            <second>
+              <h2>
+                Second
+              </h2>
+            </second>
+          </div>
+        </ContentWrapper>
+      </TabContent>
     </div>
-  </Wrapper>
+  </TabsWrapper>
 </Tabs>
 `;
 
@@ -506,6 +509,7 @@ exports[`Tabs scss have to match snapshot 1`] = `
       margin-left: 0; } }
 
 .dnb-tabs__content {
-  padding: 1rem 0.5rem; }
+  padding-top: 1rem;
+  margin-bottom: 1rem; }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/tabs/details.md b/packages/dnb-ui-lib/src/components/tabs/details.md
index 7c6bc1a7dd4..e204ee9b7f4 100644
--- a/packages/dnb-ui-lib/src/components/tabs/details.md
+++ b/packages/dnb-ui-lib/src/components/tabs/details.md
@@ -4,7 +4,7 @@
 | `label`        | _(optional)_ for accessibility reason, we can decorate our tablist with a title                                  |     |
 | `align`        | _(optional)_ define the align placement. Defaults to left.                                                       |     |
 | `use_hash`     | _(optional)_ enable adding a hash to the url (on tab changes), so the tab will be remembered. Defaults to false. |     |
-| `data`         | _(mandatory)_ defines the data structure to load as a JSON. e.g. `[{title: '...', key: '...'}]`                  |     |
+| `data`         | _(mandatory)_ defines the data structure to load as a JSON. e.g. `[{title: '...', key|hash: '...'}]`             |     |
 
 | Events      | Description                                                                   |
 | ----------- | ----------------------------------------------------------------------------- |
diff --git a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
index f3b9eee08b1..e6484ccb2b2 100644
--- a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
+++ b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
@@ -103,6 +103,7 @@
   }
 
   &__content {
-    padding: 1rem 0.5rem;
+    padding-top: 1rem;
+    margin-bottom: 1rem;
   }
 }
diff --git a/packages/dnb-ui-lib/stories/componentExamples.js b/packages/dnb-ui-lib/stories/componentExamples.js
index 8ef1c4d0979..7f7f2efcfdc 100644
--- a/packages/dnb-ui-lib/stories/componentExamples.js
+++ b/packages/dnb-ui-lib/stories/componentExamples.js
@@ -123,12 +123,12 @@ stories.push([
       </Box>
       <Box>
         <Tabs>
-          <Tabs.Tab title="First">
+          <Tabs.Content title="First">
             <h2>First</h2>
-          </Tabs.Tab>
-          <Tabs.Tab title="Second" selected>
+          </Tabs.Content>
+          <Tabs.Content title="Second" selected>
             <h2>Second</h2>
-          </Tabs.Tab>
+          </Tabs.Content>
         </Tabs>
       </Box>
     </Wrapper>