Add EuiTabbedContent. (#737)

* Add EuiTabbedContent.
elastic · May 1, 2018 · 537f19b · 537f19b
1 parent ae2f7ab
commit 537f19b
Show file tree

Hide file tree

Showing 10 changed files with 676 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `EuiBetaBadge` for non-GA labelling including options to add it to `EuiCard` and `EuiKeyPadMenuItem` ([#705](https://github.com/elastic/eui/pull/705))
 - Added `direction` prop to EuiFlexGroup ([#711](https://github.com/elastic/eui/pull/711))
 - Added `EuiEmptyPrompt` which can be used as a placeholder over empty tables and lists ([#711](https://github.com/elastic/eui/pull/711))
+- Added `EuiTabbedContent` ([#737](https://github.com/elastic/eui/pull/737))
 
 ## [`0.0.44`](https://github.com/elastic/eui/tree/v0.0.44)
 

diff --git a/src-docs/src/views/tabs/controlled.js b/src-docs/src/views/tabs/controlled.js
@@ -0,0 +1,97 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiButton,
+  EuiTabbedContent,
+  EuiTitle,
+  EuiText,
+  EuiSpacer,
+} from '../../../../src/components';
+
+class EuiTabsExample extends Component {
+  constructor(props) {
+    super(props);
+
+    this.tabs = [{
+      id: 'cobalt',
+      name: 'Cobalt',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle><h3>Cobalt</h3></EuiTitle>
+          <EuiText>Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth&rsquo;s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.</EuiText>
+        </Fragment>
+      ),
+    }, {
+      id: 'dextrose',
+      name: 'Dextrose',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle><h3>Dextrose</h3></EuiTitle>
+          <EuiText>Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.</EuiText>
+        </Fragment>
+      ),
+    }, {
+      id: 'hydrogen',
+      name: 'Hydrogen',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle><h3>Hydrogen</h3></EuiTitle>
+          <EuiText>Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table</EuiText>
+        </Fragment>
+      ),
+    }, {
+      id: 'monosodium_glutammate',
+      name: 'Monosodium Glutamate',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle><h3>Monosodium Glutamate</h3></EuiTitle>
+          <EuiText>Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.</EuiText>
+        </Fragment>
+      ),
+    }];
+
+    this.state = {
+      selectedTab: this.tabs[1],
+    };
+  }
+
+  onTabClick = (selectedTab) => {
+    this.setState({ selectedTab });
+  };
+
+  cycleTab = () => {
+    const selectedTabIndex = this.tabs.indexOf(this.state.selectedTab)
+    const nextTabIndex = selectedTabIndex < this.tabs.length - 1 ? selectedTabIndex + 1 : 0;
+    this.setState({
+      selectedTab: this.tabs[nextTabIndex],
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiButton
+          iconType="arrowRight"
+          iconSide="right"
+          onClick={this.cycleTab}
+        >
+          Cycle through the tabs
+        </EuiButton>
+
+        <EuiSpacer size="m" />
+
+        <EuiTabbedContent
+          tabs={this.tabs}
+          selectedTab={this.state.selectedTab}
+          onTabClick={this.onTabClick}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default EuiTabsExample;
diff --git a/src-docs/src/views/tabs/tabbed_content.js b/src-docs/src/views/tabs/tabbed_content.js
@@ -0,0 +1,68 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiTabbedContent,
+  EuiTitle,
+  EuiText,
+  EuiSpacer,
+} from '../../../../src/components';
+
+class EuiTabsExample extends Component {
+  constructor(props) {
+    super(props);
+
+    this.tabs = [{
+      id: 'cobalt',
+      name: 'Cobalt',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle><h3>Cobalt</h3></EuiTitle>
+          <EuiText>Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth&rsquo;s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.</EuiText>
+        </Fragment>
+      ),
+    }, {
+      id: 'dextrose',
+      name: 'Dextrose',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle><h3>Dextrose</h3></EuiTitle>
+          <EuiText>Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.</EuiText>
+        </Fragment>
+      ),
+    }, {
+      id: 'hydrogen',
+      name: 'Hydrogen',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle><h3>Hydrogen</h3></EuiTitle>
+          <EuiText>Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table</EuiText>
+        </Fragment>
+      ),
+    }, {
+      id: 'monosodium_glutammate',
+      name: 'Monosodium Glutamate',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle><h3>Monosodium Glutamate</h3></EuiTitle>
+          <EuiText>Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.</EuiText>
+        </Fragment>
+      ),
+    }];
+  }
+
+  render() {
+    return (
+      <EuiTabbedContent
+        tabs={this.tabs}
+        initialSelectedTab={this.tabs[1]}
+        onTabClick={(tab) => { console.log('clicked tab', tab); }}
+      />
+    );
+  }
+}
+
+export default EuiTabsExample;
diff --git a/src-docs/src/views/tabs/tabs_example.js b/src-docs/src/views/tabs/tabs_example.js
@@ -8,12 +8,21 @@ import {
 import {
   EuiCode,
   EuiTabs,
+  EuiTabbedContent,
 } from '../../../../src/components';
 
 import Tabs from './tabs';
 const tabsSource = require('!!raw-loader!./tabs');
 const tabsHtml = renderToHtml(Tabs);
 
+import TabbedContent from './tabbed_content';
+const tabbedContentSource = require('!!raw-loader!./tabbed_content');
+const tabbedContentHtml = renderToHtml(TabbedContent);
+
+import Controlled from './controlled';
+const controlledSource = require('!!raw-loader!./controlled');
+const controlledHtml = renderToHtml(Controlled);
+
 export const TabsExample = {
   title: 'Tabs',
   sections: [{
@@ -35,5 +44,45 @@ export const TabsExample = {
       EuiTabs,
     },
     demo: <Tabs />,
+  }, {
+    title: 'Tabbed content',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: tabbedContentSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: tabbedContentHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>EuiTabbedContent</EuiCode> makes it easier to associate tabs with content based
+        on the selected tab. Use the <EuiCode>initialSelectedTab</EuiCode> prop to specify which
+        tab to initially select.
+      </p>
+    ),
+    props: {
+      EuiTabbedContent,
+    },
+    demo: <TabbedContent />,
+  }, {
+    title: 'Controlled tabbed content',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: controlledSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: controlledHtml,
+    }],
+    text: (
+      <p>
+        You can also use the <EuiCode>selectedTab</EuiCode> and <EuiCode>onTabClick</EuiCode> props
+        to take complete control over tab selection. This can be useful if you want to change tabs
+        based on user interaction with another part of the UI.
+      </p>
+    ),
+    props: {
+      EuiTabbedContent,
+    },
+    demo: <Controlled />,
   }],
 };
diff --git a/src/components/index.js b/src/components/index.js
@@ -188,14 +188,14 @@ export {
   EuiModalHeaderTitle,
 } from './modal';
 
-export {
-  EuiOverlayMask,
-} from './overlay_mask';
-
 export {
   EuiOutsideClickDetector,
 } from './outside_click_detector';
 
+export {
+  EuiOverlayMask,
+} from './overlay_mask';
+
 export {
   EuiPage,
   EuiPageBody,
@@ -234,6 +234,10 @@ export {
   EuiSearchBar
 } from './search_bar';
 
+export {
+  EuiSideNav,
+} from './side_nav';
+
 export {
   EuiSpacer,
 } from './spacer';
@@ -269,11 +273,18 @@ export {
 export {
   EuiTab,
   EuiTabs,
+  EuiTabbedContent,
 } from './tabs';
 
 export {
-  EuiSideNav,
-} from './side_nav';
+  EuiText,
+  EuiTextColor,
+  EuiTextAlign,
+} from './text';
+
+export {
+  EuiTitle,
+} from './title';
 
 export {
   EuiGlobalToastList,
@@ -285,13 +296,3 @@ export {
   EuiIconTip,
   EuiToolTip,
 } from './tool_tip';
-
-export {
-  EuiTitle,
-} from './title';
-
-export {
-  EuiText,
-  EuiTextColor,
-  EuiTextAlign,
-} from './text';
diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
@@ -1,2 +1,3 @@
 export { EuiTab } from './tab';
 export { EuiTabs } from './tabs';
+export { EuiTabbedContent } from './tabbed_content';