- This component is based on React Bootstrap MenuItem component.
- This component represents a menu item in a dropdown. See
- {' '}
+ This component is based on React Bootstrap MenuItem component. This
+ component represents a menu item in a dropdown. See{' '}
React Bootstrap Docs
-
- {' '}
+ {' '}
for complete MenuItem component documentation.
)
@@ -35,9 +33,7 @@ stories.addWithInfo('MenuItem', '', () =>
+ {props.children}
+
+ )
+}
+Navbar.propTypes = {
+ /** children nodes */
+ children: PropTypes.node
+}
+
+/**
+ * NavbarHeader Component for Patternfly React
+ */
+export const NavbarHeader = props => {
+ return (
+
+ {props.children}
+
+ )
+}
+NavbarHeader.propTypes = {
+ /** children nodes */
+ children: PropTypes.node
+}
+
+/**
+ * NavbarBrand Component for Patternfly React
+ */
+export const NavbarBrand = props => {
+ return (
+
+ {props.children}
+
+ )
+}
+NavbarBrand.propTypes = {
+ /** children nodes */
+ children: PropTypes.node
+}
+
+/**
+ * NavbarToggle Component for Patternfly React
+ */
+export const NavbarToggle = () => {
+ return (
+
+ Toggle navigation
+
+ )
+}
+
+/**
+ * NavbarCollapse Component for Patternfly React
+ */
+export const NavbarCollapse = props => {
+ return (
+
+ {props.children}
+
+ )
+}
+NavbarCollapse.propTypes = {
+ /** children nodes */
+ children: PropTypes.node
+}
diff --git a/src/Navbar/Navbar.stories.js b/src/Navbar/Navbar.stories.js
new file mode 100644
index 00000000000..f035a9e7636
--- /dev/null
+++ b/src/Navbar/Navbar.stories.js
@@ -0,0 +1,96 @@
+import React from 'react'
+import { Dropdown } from 'react-bootstrap'
+import { storiesOf } from '@storybook/react'
+import { defaultTemplate } from '../../storybook/decorators/storyTemplates'
+import {
+ MenuItem,
+ Nav,
+ NavItem,
+ NavDropdown,
+ Navbar,
+ NavbarBrand,
+ NavbarCollapse,
+ NavbarHeader,
+ NavbarToggle
+} from '../index.js'
+
+const stories = storiesOf('Navbar', module)
+
+const description = (
+
+ This component is based on React Bootstrap Navbar component. See{' '}
+
+ React Bootstrap Docs
+ {' '}
+ for complete Navbar component documentation.
+
+)
+
+stories.addDecorator(
+ defaultTemplate({
+ title: 'Navbar',
+ description: description,
+ documentationLink:
+ 'http://www.patternfly.org/pattern-library/navigation/horizontal-navigation/'
+ })
+)
+
+stories.addWithInfo('Navbar', '', () =>
+
+
+
+
+
+
+
+
+
+ {/* See React Bootstrap docs for custom toggle:
+ https://github.com/react-bootstrap/react-bootstrap/blob/master/docs/examples/DropdownButtonCustomMenu.js
+ */}
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ Brian Johnson
+ ]}
+ >
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ First Link
+
+
+ Another Link
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+ {props.children}
+
+ )
+}
+TabContent.propTypes = {
+ /** the active tab key */
+ activeKey: PropTypes.string,
+ /** the event key for this content */
+ eventKey: PropTypes.string,
+ /** tab content class */
+ className: PropTypes.string,
+ /** children nodes */
+ children: PropTypes.node
+}
+TabContent.defaultProps = {
+ eventKey: '-1' // hide by default
+}
+
+export default TabContent
diff --git a/src/Tabs/TabDropdown.js b/src/Tabs/TabDropdown.js
new file mode 100644
index 00000000000..a3d3323b5db
--- /dev/null
+++ b/src/Tabs/TabDropdown.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import { NavDropdown } from '../index'
+
+/**
+ * Tab Dropdown Component for Patternfly React
+ */
+const TabDropdown = props =>
+ {props.children}
+
+ )
+}
+TabRowContents.propTypes = {
+ /** children nodes */
+ children: PropTypes.node
+}
+export default TabRowContents
diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js
new file mode 100644
index 00000000000..01dcf201e70
--- /dev/null
+++ b/src/Tabs/Tabs.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Nav, TabRowContents } from '../index'
+import ClassNames from 'classnames'
+
+/**
+ * Tabs Component for Patternfly React
+ */
+const Tabs = props => {
+ const contents = props.children.map(child => {
+ return child.type === TabRowContents
+ })
+ const tabsClass = ClassNames(props.className, {
+ 'nav-justified': props.justified,
+ 'nav-tabs-pf': props.pfStyle,
+ 'pf-tabrow': contents.indexOf(true) >= 0
+ })
+ return (
+
+ {props.children}
+
+ )
+}
+
+Tabs.propTypes = {
+ /** tab selected callback */
+ onSelect: PropTypes.func,
+ /** nav tabs class */
+ className: PropTypes.string,
+ /** sets the active tab key */
+ activeKey: PropTypes.number,
+ /** children nodes */
+ children: PropTypes.node,
+ /** apply nav-justified class */
+ justified: PropTypes.bool,
+ /** apply nav-tabs-pf class */
+ pfStyle: PropTypes.bool
+}
+Tabs.defaultProps = {
+ className: 'nav nav-tabs'
+}
+
+export default Tabs
diff --git a/src/Tabs/Tabs.stories.js b/src/Tabs/Tabs.stories.js
new file mode 100644
index 00000000000..f4812805836
--- /dev/null
+++ b/src/Tabs/Tabs.stories.js
@@ -0,0 +1,277 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { withKnobs, select } from '@storybook/addon-knobs'
+import { defaultTemplate } from '../../storybook/decorators/storyTemplates'
+import {
+ Button,
+ MenuItem,
+ Tabs,
+ Tab,
+ TabContent,
+ TabDropdown,
+ TabRowContents
+} from '../index.js'
+
+const stories = storiesOf('Tabs', module)
+stories.addDecorator(withKnobs)
+
+const description = (
+
+ This component is based on the Bootstrap Tabs component. See{' '}
+
+ Bootstrap Docs
+ {' '}
+ for complete Tabs component documentation.
+
+)
+
+stories.addDecorator(
+ defaultTemplate({
+ title: 'Tabs',
+ description: description,
+ documentationLink: 'http://www.patternfly.org/pattern-library/widgets/#tabs'
+ })
+)
+
+stories.addWithInfo('Tabs', '', () => {
+ const tabsActiveKey = select(
+ 'Tabs Active Tab',
+ ['1', '2', '3', '4', '4.1', '4.2', '4.3', '4.4'],
+ '1'
+ )
+ const justifiedActiveKey = select(
+ 'Justified Active Tab',
+ ['1', '2', '3', '4', '4.1', '4.2', '4.3', '4.4'],
+ '1'
+ )
+ const tabContentStyle = { padding: 15, fontSize: 14 }
+ const tabRowButtonStyle = { marginLeft: 5 }
+ return (
+
+
+
+ Tab One
+
+
+ Tab Two
+
+ Tab Three 3
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ Secondary
+
+
+ Primary
+
+
+ Destructive
+
+
+
+
+ tab one contents
+
+
+ tab two contents
+
+
+ tab three contents
+
+
+ tab four contents
+
+
+
+
Justified
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ tab one contents
+
+
+ tab two contents
+
+
+ tab three contents
+
+
+ tab four contents
+
+
+
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
Justified
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ Secondary Tabs
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+ Tab One
+
+
+ Tab Two
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ Secondary
+
+
+ Primary
+
+
+ Destructive
+
+
+
+
+ tab one contents
+
+
+ tab two contents
+
+
+
+
+ Tab One
+
+
+ Tab Two
+
+
+
+ tab one contents
+
+
+ tab two contents
+
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ )
+
+ let tree = component.toJSON()
+ expect(tree).toMatchSnapshot()
+})
+
+test('Patternfly Justified Tabs renders properly', () => {
+ const tabsOnSelect = jest.fn()
+ const component = renderer.create(
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ )
+
+ let tree = component.toJSON()
+ expect(tree).toMatchSnapshot()
+})
+
+test('Patternfly Secondary Tabs renders properly', () => {
+ const tabsOnSelect = jest.fn()
+ const secondaryTabsOnSelect = jest.fn()
+ const component = renderer.create(
+
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Tab One
+
+
+ Tab Two
+
+
+ Tab Three
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ )
+
+ let tree = component.toJSON()
+ expect(tree).toMatchSnapshot()
+})
diff --git a/src/Tabs/__snapshots__/Tabs.test.js.snap b/src/Tabs/__snapshots__/Tabs.test.js.snap
new file mode 100644
index 00000000000..7efc66e20e2
--- /dev/null
+++ b/src/Tabs/__snapshots__/Tabs.test.js.snap
@@ -0,0 +1,967 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Justified Tabs renders properly 1`] = `
+
+`;
+
+exports[`Patternfly Justified Tabs renders properly 1`] = `
+
+`;
+
+exports[`Patternfly Secondary Tabs renders properly 1`] = `
+
+`;
+
+exports[`Patternfly Tabs renders properly 1`] = `
+
+`;
+
+exports[`Tabs renders properly 1`] = `
+
+`;
diff --git a/src/ToastNotification/TimedToastNotification.js b/src/ToastNotification/TimedToastNotification.js
new file mode 100644
index 00000000000..236666ed3a2
--- /dev/null
+++ b/src/ToastNotification/TimedToastNotification.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import helpers from '../common/helpers'
+import Timer from '../common/Timer'
+import { TOAST_NOTIFICATION_TYPES } from '../common/constants'
+import { ToastNotification } from '../index.js'
+
+/**
+ * TimedToastNotification Component for Patternfly React
+ */
+class TimedToastNotification extends React.Component {
+ constructor(props) {
+ super(props)
+ helpers.bindMethods(this, ['onMouseEnter', 'onMouseLeave'])
+ }
+
+ componentDidMount() {
+ const { sticky, onDismiss, timerDelay } = this.props
+
+ if (!sticky) {
+ this.timer = new Timer(onDismiss, timerDelay)
+ this.timer.startTimer()
+ }
+ }
+
+ componentWillUnmount() {
+ this.timer && this.timer.clearTimer()
+ }
+
+ onMouseEnter() {
+ this.timer && this.timer.clearTimer()
+ const { onMouseEnter } = this.props
+ onMouseEnter && onMouseEnter()
+ }
+
+ onMouseLeave() {
+ this.timer && this.timer.startTimer()
+ const { onMouseLeave } = this.props
+ onMouseLeave && onMouseLeave()
+ }
+ render() {
+ const { children } = this.props
+ return (
+
+ {children}
+
+ )
+ }
+}
+
+TimedToastNotification.propTypes = {
+ /** sticky keeps the notification up endlessly */
+ sticky: PropTypes.bool,
+ /** timer delay */
+ timerDelay: PropTypes.number,
+ /** additional notification classes */
+ className: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+ /** callback when alert is dismissed */
+ onDismiss: PropTypes.func,
+ /** onMouseEnter callback */
+ onMouseEnter: PropTypes.func,
+ /** onMouseLeave callback */
+ onMouseLeave: PropTypes.func,
+ /** the type of alert */
+ type: PropTypes.oneOf(TOAST_NOTIFICATION_TYPES).isRequired, // eslint-disable-line react/no-unused-prop-types
+ /** children nodes */
+ children: PropTypes.node
+}
+TimedToastNotification.defaultProps = {
+ type: 'error',
+ timerDelay: 8000
+}
+
+export default TimedToastNotification
diff --git a/src/ToastNotification/ToastNotification.js b/src/ToastNotification/ToastNotification.js
new file mode 100644
index 00000000000..6a06427e164
--- /dev/null
+++ b/src/ToastNotification/ToastNotification.js
@@ -0,0 +1,73 @@
+import ClassNames from 'classnames'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button } from '../index'
+import { TOAST_NOTIFICATION_TYPES } from '../common/constants'
+
+/**
+ * ToastNotification Component for Patternfly React
+ */
+const ToastNotification = ({
+ className,
+ onDismiss,
+ type,
+ onMouseEnter,
+ onMouseLeave,
+ children,
+ ...props
+}) => {
+ const notificationClasses = ClassNames(
+ {
+ alert: true,
+ 'toast-pf': true,
+ 'alert-danger': type === 'danger' || type === 'error',
+ 'alert-warning': type === 'warning',
+ 'alert-success': type === 'success',
+ 'alert-info': type === 'info',
+ 'alert-dismissable': onDismiss
+ },
+ className
+ )
+ const iconClass = ClassNames({
+ pficon: true,
+ 'pficon-error-circle-o': type === 'danger' || type === 'error',
+ 'pficon-warning-triangle-o': type === 'warning',
+ 'pficon-ok': type === 'success',
+ 'pficon-info': type === 'info'
+ })
+
+ return (
+
+ {onDismiss &&
+
+ }
+
+ )
+}
+ToastNotification.propTypes = {
+ /** additional notification classes */
+ className: PropTypes.string,
+ /** callback when alert is dismissed */
+ onDismiss: PropTypes.func,
+ /** the type of alert */
+ type: PropTypes.oneOf(TOAST_NOTIFICATION_TYPES).isRequired,
+ /** onMouseEnter callback */
+ onMouseEnter: PropTypes.func,
+ /** onMouseLeave callback */
+ onMouseLeave: PropTypes.func,
+ /** children nodes */
+ children: PropTypes.node
+}
+ToastNotification.defaultProps = {
+ type: 'error'
+}
+
+export default ToastNotification
diff --git a/src/ToastNotification/ToastNotification.stories.js b/src/ToastNotification/ToastNotification.stories.js
new file mode 100644
index 00000000000..d18071be67b
--- /dev/null
+++ b/src/ToastNotification/ToastNotification.stories.js
@@ -0,0 +1,108 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { withKnobs, text, select, boolean } from '@storybook/addon-knobs'
+import { defaultTemplate } from '../../storybook/decorators/storyTemplates'
+import {
+ DropdownKebab,
+ MenuItem,
+ ToastNotification,
+ TimedToastNotification,
+ ToastNotificationList
+} from '../index.js'
+
+const stories = storiesOf('ToastNotification', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator(
+ defaultTemplate({
+ title: 'Toast Notification',
+ documentationLink:
+ 'http://www.patternfly.org/pattern-library/communication/toast-notifications/'
+ })
+)
+
+stories.addWithInfo(
+ 'Toast Notification',
+ `Toast Notifications pop onto the screen to notify the user of a system occurrence`,
+ () => {
+ const label = text('Label', 'Great job! This is really working out.')
+ const type = select(
+ 'Type',
+ ['success', 'danger', 'warning', 'info'],
+ 'success'
+ )
+ const dismissEnabled = boolean('Dismiss', false)
+ const menuEnabled = boolean('Menu', true)
+ const actionEnabled = boolean('Action', true)
+ return (
+
+
+
+ {label}
+
+
+ {menuEnabled &&
+
+ Action
+ Another Action
+ Something else here
+ Separated link
+ }
+ {actionEnabled &&
+ }
+
+
+
+
+ {text(
+ 'Label',
+ "By default, a toast notification's timer expires after eight seconds."
+ )}
+
+
+
+
+ Additionally, if the user hovers a toast notification its timer is
+ reset.
+
+
+
+
+ If a notification is marked sticky it will persist endlessly until
+ closed.
+
+
+
+)
diff --git a/src/ToastNotification/ToastNotification.test.js b/src/ToastNotification/ToastNotification.test.js
new file mode 100644
index 00000000000..4a1cdd61dd3
--- /dev/null
+++ b/src/ToastNotification/ToastNotification.test.js
@@ -0,0 +1,43 @@
+/* eslint-env jest */
+
+import React from 'react'
+import renderer from 'react-test-renderer'
+
+import ToastNotification from './ToastNotification'
+import TimedToastNotification from './TimedToastNotification'
+
+test('ToastNotification renders properly', () => {
+ const handleNotificationClose = jest.fn()
+ const handleOnMouseEnter = jest.fn()
+ const handleOnMouseLeave = jest.fn()
+ const component = renderer.create(
+
+ Danger Will Robinson!
+
+ )
+ let tree = component.toJSON()
+ expect(tree).toMatchSnapshot()
+})
+
+test('TimedToastNotification renders properly', () => {
+ const handleNotificationClose = jest.fn()
+ const handleOnMouseEnter = jest.fn()
+ const handleOnMouseLeave = jest.fn()
+ const component = renderer.create(
+
+ Danger Will Robinson!
+
+ )
+ let tree = component.toJSON()
+ expect(tree).toMatchSnapshot()
+})
diff --git a/src/ToastNotification/ToastNotificationList.js b/src/ToastNotification/ToastNotificationList.js
new file mode 100644
index 00000000000..133d13c38ea
--- /dev/null
+++ b/src/ToastNotification/ToastNotificationList.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * ToastNotificationList Component for Patternfly React
+ */
+const ToastNotificationList = ({ className, children }) => {
+ return (
+
+ {children}
+
+ )
+}
+ToastNotificationList.propTypes = {
+ /** additional notification list classes */
+ className: PropTypes.string,
+ /** children nodes */
+ children: PropTypes.node
+}
+ToastNotificationList.defaultProps = {
+ className: 'toast-notifications-list-pf'
+}
+
+export default ToastNotificationList
diff --git a/src/ToastNotification/__snapshots__/ToastNotification.test.js.snap b/src/ToastNotification/__snapshots__/ToastNotification.test.js.snap
new file mode 100644
index 00000000000..8ff3f064ba1
--- /dev/null
+++ b/src/ToastNotification/__snapshots__/ToastNotification.test.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimedToastNotification renders properly 1`] = `
+
+
+
+
+ Danger Will Robinson!
+
+
+`;
+
+exports[`ToastNotification renders properly 1`] = `
+
+
+
+
+ Danger Will Robinson!
+
+
+`;
diff --git a/src/common/Timer.js b/src/common/Timer.js
new file mode 100644
index 00000000000..08a8e7bdde9
--- /dev/null
+++ b/src/common/Timer.js
@@ -0,0 +1,23 @@
+/**
+ * Timer class implements a simple timeout mechanism
+ */
+class Timer {
+ constructor(func, delay) {
+ this.timer = null
+ this.delay = delay
+ this.execute = func
+ }
+
+ startTimer() {
+ this.clearTimer()
+
+ this.timer = setTimeout(this.execute, this.delay)
+ }
+ clearTimer() {
+ if (this.timer) {
+ clearTimeout(this.timer)
+ }
+ }
+}
+
+export default Timer
diff --git a/src/common/constants.js b/src/common/constants.js
new file mode 100644
index 00000000000..0fe60a9978d
--- /dev/null
+++ b/src/common/constants.js
@@ -0,0 +1,9 @@
+export const TOAST_NOTIFICATION_TYPES = [
+ 'danger',
+ 'error',
+ 'warning',
+ 'success',
+ 'info'
+]
+
+export const ALERT_TYPES = ['danger', 'error', 'warning', 'success', 'info']
diff --git a/src/common/helpers.js b/src/common/helpers.js
new file mode 100644
index 00000000000..3e7e7a455a1
--- /dev/null
+++ b/src/common/helpers.js
@@ -0,0 +1,8 @@
+export default {
+ bindMethods: function(context, methods) {
+ methods.forEach(method => {
+ context[method] = context[method].bind(context)
+ })
+ },
+ noop: Function.prototype // empty function
+}
diff --git a/src/index.js b/src/index.js
index df4613adaff..3e6317a792b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,28 @@
export { default as Alert } from './Alert/Alert'
+export { default as Button } from './Button/Button'
export { default as DropdownKebab } from './DropdownKebab/DropdownKebab'
export { default as MenuItem } from './MenuItem/MenuItem'
-export { default as Button } from './Button/Button'
+export { default as Nav } from './Navbar/Nav'
+export { default as NavDropdown } from './Navbar/NavDropdown'
+export { default as NavItem } from './Navbar/NavItem'
+export {
+ Navbar,
+ NavbarBrand,
+ NavbarCollapse,
+ NavbarHeader,
+ NavbarToggle
+} from './Navbar/Navbar'
+export { default as Tab } from './Tabs/Tab'
+export { default as Tabs } from './Tabs/Tabs'
+export { default as TabContent } from './Tabs/TabContent'
+export { default as TabDropdown } from './Tabs/TabDropdown'
+export { default as TabRowContents } from './Tabs/TabRowContents'
+export {
+ default as ToastNotification
+} from './ToastNotification/ToastNotification'
+export {
+ default as TimedToastNotification
+} from './ToastNotification/TimedToastNotification'
+export {
+ default as ToastNotificationList
+} from './ToastNotification/ToastNotificationList'
diff --git a/storybook/decorators/storyTemplates.js b/storybook/decorators/storyTemplates.js
index 69f8aa25ca6..d947968fc9a 100644
--- a/storybook/decorators/storyTemplates.js
+++ b/storybook/decorators/storyTemplates.js
@@ -3,12 +3,13 @@ import React from 'react'
export const defaultTemplate = config => story =>
- {config.title}
+
+ {config.title}
+
{!config.documentationLink &&
- This pattern does not yet exist in
- {' '}
+ This pattern does not yet exist in{' '}
PatternFly
.
}
diff --git a/storybook/preview-head.html b/storybook/preview-head.html
index 51de8eb1145..feff7ac6613 100644
--- a/storybook/preview-head.html
+++ b/storybook/preview-head.html
@@ -1,2 +1,3 @@
+
\ No newline at end of file