feat: extend #tabs with enhanced function

dnbexperience · Jan 18, 2019 · 54d8461 · 54d8461
1 parent ecd236d
commit 54d8461
Show file tree

Hide file tree

Showing 9 changed files with 318 additions and 77 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
@@ -0,0 +1,7 @@
+/**
+ * Inline Tag
+ *
+ */
+
+import { Tabs } from 'dnb-ui-lib/src'
+export default Tabs
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
@@ -143,7 +143,7 @@ class ItemWrapper extends PureComponent {
 
     if (this.isActive('demo')) {
       tabsContent.push(
-        <Tabs.TabContent key="demo" id={this._id} selection_key="demo">
+        <Tabs.ContentWrapper key="demo" id={this._id}>
           {!hideTabs && <Description />}
           <DemoWrapper>
             <h2>Demos</h2>
@@ -152,7 +152,7 @@ class ItemWrapper extends PureComponent {
           {Additional && Additional.demo && (
             <Additional.demo CodeRenderer={CodeRenderer} />
           )}
-        </Tabs.TabContent>
+        </Tabs.ContentWrapper>
       )
     }
 
@@ -164,7 +164,7 @@ class ItemWrapper extends PureComponent {
       tabsUsed.push(tabs.find(({ key }) => key === 'info'))
       if (this.isActive('info')) {
         tabsContent.push(
-          <Tabs.TabContent key="info" id={this._id} selection_key="info">
+          <Tabs.ContentWrapper key="info" id={this._id}>
             <Details />
             {Additional && Additional.info && (
               <Additional.info CodeRenderer={CodeRenderer} />
@@ -175,7 +175,7 @@ class ItemWrapper extends PureComponent {
                 <CodeRenderer language="jsx">{ExampleCode}</CodeRenderer>
               </Fragment>
             )}
-          </Tabs.TabContent>
+          </Tabs.ContentWrapper>
         )
       }
     }
@@ -184,12 +184,12 @@ class ItemWrapper extends PureComponent {
       tabsUsed.push(tabs.find(({ key }) => key === 'code'))
       if (this.isActive('code')) {
         tabsContent.push(
-          <Tabs.TabContent key="code" id={this._id} selection_key="code">
+          <Tabs.ContentWrapper key="code" id={this._id}>
             <Code source={CodeComponent} />
             {Additional && Additional.code && (
               <Additional.code CodeRenderer={CodeRenderer} />
             )}
-          </Tabs.TabContent>
+          </Tabs.ContentWrapper>
         )
       }
     }

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
@@ -1,4 +1,16 @@
 <Tabs data={data}>{exampleContent}</Tabs>
+<Tabs
+  data={{
+    first: { title: "First", content: exampleContent.first },
+    second: { title: "Second", content: exampleContent.second },
+    third: {
+      title: "Third",
+      content: exampleContent.third,
+      disabled: true
+    },
+    fourth: { title: "Fourth", content: exampleContent.fourth }
+  }}
+/>
 <Tabs
   selected_key="second"
   align="right"

diff --git a/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
@@ -41,7 +41,7 @@ exports[`FormStatus component have to match snapshot 1`] = `
           >
             <path
               clipRule="evenodd"
-              d="M8 1.75a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7A.75.75 0 0 1 8 1.75zm-.893 10.357A1.25 1.25 0 0 1 8 11.75c.32 0 .646.11.893.357s.357.573.357.893c0 .32-.11.646-.357.893A1.249 1.249 0 0 1 8 14.25c-.32 0-.646-.11-.893-.357A1.249 1.249 0 0 1 6.75 13c0-.32.11-.646.357-.893z"
+              d="M8 1.75a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7A.75.75 0 0 1 8 1.75zm-.893 10.357c.247-.247.573-.357.893-.357.32 0 .646.11.893.357s.357.573.357.893c0 .32-.11.646-.357.893A1.249 1.249 0 0 1 8 14.25c-.32 0-.646-.11-.893-.357A1.249 1.249 0 0 1 6.75 13c0-.32.11-.646.357-.893z"
               fill="#000"
               fillRule="evenodd"
             />

diff --git a/packages/dnb-ui-lib/src/components/tabs/Example.js b/packages/dnb-ui-lib/src/components/tabs/Example.js
@@ -32,7 +32,34 @@ class Example extends PureComponent {
       <Fragment>
         <div className="example-box">
           <Tabs data={data}>{exampleContent}</Tabs>
-          <p className="example-caption">Left aligned tabs</p>
+          <p className="example-caption">
+            Left aligned tabs, using both "data" property and content
+            object
+          </p>
+        </div>
+        <div className="example-box">
+          <Tabs
+            data={{
+              first2: { title: 'First', content: exampleContent.first },
+              second2: { title: 'Second', content: exampleContent.second }
+            }}
+          />
+          <p className="example-caption">
+            Left aligned tabs, using "data" property only
+          </p>
+        </div>
+        <div className="example-box">
+          <Tabs>
+            <Tabs.Tab title="First">
+              <h2>First</h2>
+            </Tabs.Tab>
+            <Tabs.Tab title="Second">
+              <h2>Second</h2>
+            </Tabs.Tab>
+          </Tabs>
+          <p className="example-caption">
+            Left aligned tabs, using React Components only
+          </p>
         </div>
         <div className="example-box">
           <Tabs
@@ -64,15 +91,15 @@ class Example extends PureComponent {
 }
 
 const exampleContent = {
-  first: <h2>First</h2>,
-  second: <Input>Focus me with next Tab key</Input>,
-  third: (
+  first: () => <h2>First</h2>,
+  second: () => <Input>Focus me with next Tab key</Input>,
+  third: () => (
     <p>
       Eros semper blandit tellus mollis primis quisque platea sollicitudin
       ipsum
     </p>
   ),
-  fourth: <h2>Fourth</h2>
+  fourth: () => <h2>Fourth</h2>
 }
 
 const data = [