From a5d6e7f4b027f32064df53cecddf1e6a62e412c8 Mon Sep 17 00:00:00 2001 From: dabeng Date: Wed, 13 Dec 2017 17:07:43 +0800 Subject: [PATCH] feat(tabs): add the pf tabs component --- package.json | 2 +- src/components/Dropdown/NavDropdown.js | 1 + src/components/Dropdown/index.js | 1 + src/components/Nav/Nav.js | 1 + src/components/Nav/NavItem.js | 1 + src/components/Nav/index.js | 2 + src/components/Tabs/Tab.js | 1 + src/components/Tabs/TabContainer.js | 1 + src/components/Tabs/TabContent.js | 1 + src/components/Tabs/TabPane.js | 1 + src/components/Tabs/Tabs.js | 1 + src/components/Tabs/Tabs.stories.js | 289 +++++++++++++++++++++++++ src/components/Tabs/index.js | 5 + src/index.js | 2 + 14 files changed, 308 insertions(+), 1 deletion(-) create mode 100644 src/components/Dropdown/NavDropdown.js create mode 100644 src/components/Nav/Nav.js create mode 100644 src/components/Nav/NavItem.js create mode 100644 src/components/Nav/index.js create mode 100644 src/components/Tabs/Tab.js create mode 100644 src/components/Tabs/TabContainer.js create mode 100644 src/components/Tabs/TabContent.js create mode 100644 src/components/Tabs/TabPane.js create mode 100644 src/components/Tabs/Tabs.js create mode 100644 src/components/Tabs/Tabs.stories.js create mode 100644 src/components/Tabs/index.js diff --git a/package.json b/package.json index a0c59c2715a..2e98ccee654 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { "classnames": "^2.2.5", - "patternfly": "^3.35.1", + "patternfly": "^3.37.2", "react-bootstrap": "^0.31.5", "react-bootstrap-switch": "^15.5.3", "react-c3js": "^0.1.20", diff --git a/src/components/Dropdown/NavDropdown.js b/src/components/Dropdown/NavDropdown.js new file mode 100644 index 00000000000..574a2de625c --- /dev/null +++ b/src/components/Dropdown/NavDropdown.js @@ -0,0 +1 @@ +export { NavDropdown as default } from 'react-bootstrap'; diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js index ade5256a1f2..70aed43f9de 100644 --- a/src/components/Dropdown/index.js +++ b/src/components/Dropdown/index.js @@ -1 +1,2 @@ export { default as Dropdown } from './Dropdown'; +export { default as NavDropdown } from './NavDropdown'; diff --git a/src/components/Nav/Nav.js b/src/components/Nav/Nav.js new file mode 100644 index 00000000000..c0dcb6ac4d7 --- /dev/null +++ b/src/components/Nav/Nav.js @@ -0,0 +1 @@ +export { Nav as default } from 'react-bootstrap'; diff --git a/src/components/Nav/NavItem.js b/src/components/Nav/NavItem.js new file mode 100644 index 00000000000..de9752cc749 --- /dev/null +++ b/src/components/Nav/NavItem.js @@ -0,0 +1 @@ +export { NavItem as default } from 'react-bootstrap'; diff --git a/src/components/Nav/index.js b/src/components/Nav/index.js new file mode 100644 index 00000000000..a2ac55b89f2 --- /dev/null +++ b/src/components/Nav/index.js @@ -0,0 +1,2 @@ +export { default as Nav } from './Nav'; +export { default as NavItem } from './NavItem'; diff --git a/src/components/Tabs/Tab.js b/src/components/Tabs/Tab.js new file mode 100644 index 00000000000..9d692d56a18 --- /dev/null +++ b/src/components/Tabs/Tab.js @@ -0,0 +1 @@ +export { Tab as default } from 'react-bootstrap'; diff --git a/src/components/Tabs/TabContainer.js b/src/components/Tabs/TabContainer.js new file mode 100644 index 00000000000..9de99ba7c70 --- /dev/null +++ b/src/components/Tabs/TabContainer.js @@ -0,0 +1 @@ +export { TabContainer as default } from 'react-bootstrap'; diff --git a/src/components/Tabs/TabContent.js b/src/components/Tabs/TabContent.js new file mode 100644 index 00000000000..21083419d8f --- /dev/null +++ b/src/components/Tabs/TabContent.js @@ -0,0 +1 @@ +export { TabContent as default } from 'react-bootstrap'; diff --git a/src/components/Tabs/TabPane.js b/src/components/Tabs/TabPane.js new file mode 100644 index 00000000000..0506c3589f9 --- /dev/null +++ b/src/components/Tabs/TabPane.js @@ -0,0 +1 @@ +export { TabPane as default } from 'react-bootstrap'; diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js new file mode 100644 index 00000000000..60edcf2dc03 --- /dev/null +++ b/src/components/Tabs/Tabs.js @@ -0,0 +1 @@ +export { Tabs as default } from 'react-bootstrap'; diff --git a/src/components/Tabs/Tabs.stories.js b/src/components/Tabs/Tabs.stories.js new file mode 100644 index 00000000000..3e1e4bbcca0 --- /dev/null +++ b/src/components/Tabs/Tabs.stories.js @@ -0,0 +1,289 @@ +import React from 'react'; +import ClassNames from 'classnames'; +import { storiesOf } from '@storybook/react'; +import { withKnobs, text, boolean } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; +import { defaultTemplate } from '../../../storybook/decorators/storyTemplates'; +import { + TabContainer, + Nav, + NavItem, + NavDropdown, + MenuItem, + TabPane, + TabContent +} from '../../index'; + +const stories = storiesOf('Tabs', module); +const description = ( +

+ This component is based on React Bootstrap Tabs component. See{' '} + + React Bootstrap Docs + {' '} + for complete Tabs component documentation. +

+); +stories.addDecorator(withKnobs); +stories.addDecorator( + defaultTemplate({ + title: 'Tabs', + documentationLink: + 'http://www.patternfly.org/pattern-library/widgets/#tabs', + description: description + }) +); + +stories.addWithInfo('Basic Tabs', () => { + const bsClass = ClassNames('nav nav-tabs', { + 'nav-justified': boolean('Justified', false) + }); + const t1Disabled = boolean('Tab 1 Disabled', false); + const t1Title = ( +
+ ); + const t2Disabled = boolean('Tab 2 Disabled', false); + const t2Title = ( +
+ ); + const t3Disabled = boolean('Tab 3 Disabled', false); + const t3Title = ( +
+ ); + + return ( + +
+ + + Tab 1 content + Tab 2 content + Tab 3 content + +
+ + ); +}); + +stories.addWithInfo('Basic Tabs - PF style', () => { + const bsClass = ClassNames('nav nav-tabs nav-tabs-pf', { + 'nav-justified': boolean('Justified', false) + }); + const t1Disabled = boolean('Tab 1 Disabled', false); + const t1Title = ( +
+ ); + const t2Disabled = boolean('Tab 2 Disabled', false); + const t2Title = ( +
+ ); + const t3Disabled = boolean('Tab 3 Disabled', false); + const t3Title = ( +
+ ); + + return ( + +
+ + + Tab 1 content + Tab 2 content + Tab 3 content + +
+ + ); +}); + +stories.addWithInfo('Tabs with Dropdown', () => { + const bsClass = ClassNames('nav nav-tabs', { + 'nav-justified': boolean('Justified', false) + }); + + return [ +

+ Note: + This variation is not keyboard accessible and is not recommended for use + where accessibility is a priority. +

, + +
+ + + Tab 1 content + Tab 2 content + Tab 3.1 content + Tab 3.2 content + Tab 3.3 content + Tab 3.4 content + +
+ + ]; +}); + +stories.addWithInfo('Tabs with Dropdown - PF style', () => { + const bsClass = ClassNames('nav nav-tabs nav-tabs-pf', { + 'nav-justified': boolean('Justified', false) + }); + + return [ +

+ Note: + This variation is not keyboard accessible and is not recommended for use + where accessibility is a priority. +

, + +
+ + + Tab 1 content + Tab 2 content + Tab 3.1 content + Tab 3.2 content + Tab 3.3 content + Tab 3.4 content + +
+ + ]; +}); + +stories.addWithInfo('Secondary Tabs', () => { + const bsClass = ClassNames('nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary', { + 'nav-justified': boolean('Secondary Tabs Justified', false) + }); + + return ( + +
+ + + + +
+ + + Tab A content + Tab B content + Tab C content + +
+ + + + +
+ + + Tab D content + Tab E content + Tab F content + +
+ + + + +
+ + + Tab G content + Tab H content + Tab I content + +
+ + + +
+ + ); +}); diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js new file mode 100644 index 00000000000..e0fadd7d9a4 --- /dev/null +++ b/src/components/Tabs/index.js @@ -0,0 +1,5 @@ +export { default as TabContainer } from './TabContainer'; +export { default as TabContent } from './TabContent'; +export { default as TabPane } from './TabPane'; +export { default as Tabs } from './Tabs'; +export { default as Tab } from './Tab'; diff --git a/src/index.js b/src/index.js index a451a935ba3..7bba9ebdff9 100644 --- a/src/index.js +++ b/src/index.js @@ -16,11 +16,13 @@ export * from './components/ListGroup'; export * from './components/ListView'; export * from './components/MenuItem'; export * from './components/Modal'; +export * from './components/Nav'; export * from './components/OverlayTrigger'; export * from './components/Popover'; export * from './components/Sort'; export * from './components/Spinner'; export * from './components/Switch'; +export * from './components/Tabs'; export * from './components/ToastNotification'; export * from './components/Toolbar'; export * from './components/Tooltip';