diff --git a/src/Navbar.js b/src/Navbar.js index 47c45d0a9..5e34e8edb 100644 --- a/src/Navbar.js +++ b/src/Navbar.js @@ -12,14 +12,17 @@ const propTypes = { color: PropTypes.string, role: PropTypes.string, tag: tagPropType, + container: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), className: PropTypes.string, cssModule: PropTypes.object, expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), + children: PropTypes.node, }; const defaultProps = { tag: 'nav', expand: false, + container: 'fluid', }; const getExpandClass = (expand) => { @@ -42,7 +45,9 @@ const Navbar = (props) => { fixed, sticky, color, + container, tag: Tag, + children, ...attributes } = props; @@ -59,8 +64,17 @@ const Navbar = (props) => { } ), cssModule); + const containerClass = container && (container === true) ? 'container' : `container-${container}`; + return ( - + + { container ? +
+ {children} +
: + children + } +
); }; diff --git a/src/__tests__/Navbar.spec.js b/src/__tests__/Navbar.spec.js index 0f81b7968..51b94d7c1 100644 --- a/src/__tests__/Navbar.spec.js +++ b/src/__tests__/Navbar.spec.js @@ -6,37 +6,60 @@ describe('Navbar', () => { it('should render .navbar markup', () => { const wrapper = shallow(); - expect(wrapper.html()).toBe(''); + expect(wrapper.html()).toBe(''); }); it('should render default .navbar-expand class', () => { const wrapper = shallow(); - expect(wrapper.html()).toBe(''); + expect(wrapper.html()).toBe(''); }); it('should render size based .navbar-expand-* classes', () => { const wrapper = shallow(); - expect(wrapper.html()).toBe(''); + expect(wrapper.html()).toBe(''); }); it('should render custom tag', () => { const wrapper = shallow(); - expect(wrapper.html()).toBe(''); + expect(wrapper.html()).toBe(''); }); it('should render role', () => { const wrapper = shallow(); - expect(wrapper.html()).toBe(''); + expect(wrapper.html()).toBe(''); + }); + + it('should support container options', () => { + let wrapper = shallow(); + expect(wrapper.html()).toBe(''); + + wrapper = shallow(); + expect(wrapper.html()).toBe(''); + + wrapper = shallow(); + expect(wrapper.html()).toBe(''); + + wrapper = shallow(); + expect(wrapper.html()).toBe(''); + + wrapper = shallow(); + expect(wrapper.html()).toBe(''); + + wrapper = shallow(); + expect(wrapper.html()).toBe(''); + + wrapper = shallow(); + expect(wrapper.html()).toBe(''); }); it('should render children', () => { const wrapper = shallow(Children); - expect(wrapper.html()).toBe(''); + expect(wrapper.html()).toBe(''); }); it('should pass additional classNames', () => { diff --git a/stories/examples/Navbar.js b/stories/examples/Navbar.js index 8c6898a6d..8aabbb2a3 100644 --- a/stories/examples/Navbar.js +++ b/stories/examples/Navbar.js @@ -24,38 +24,36 @@ const Example = (args) => { return (
- - reactstrap - - - - Simple Text - - + reactstrap + + + + Simple Text +
); @@ -66,7 +64,8 @@ Example.args = { light: true, dark: false, full: false, - expand: 'md' + expand: 'md', + container: 'fluid', } Example.argTypes = { @@ -74,6 +73,10 @@ Example.argTypes = { control: { type: 'select' }, options: colors }, + container: { + control: { type: 'select' }, + options: [false, true, 'sm', 'md', 'lg', 'xl', 'fluid'] + }, expand: { control: { type: 'select' }, options: [false, true, 'sm', 'md', 'lg', 'xl'] diff --git a/types/lib/Navbar.d.ts b/types/lib/Navbar.d.ts index 498a82b1f..371ef64d9 100644 --- a/types/lib/Navbar.d.ts +++ b/types/lib/Navbar.d.ts @@ -9,6 +9,7 @@ export interface NavbarProps extends React.HTMLAttributes { fixed?: string; sticky?: string; color?: string; + container?: boolean | 'fluid' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; tag?: React.ElementType; cssModule?: CSSModule; expand?: boolean | string;