feat(Navbar): add container options

reactstrap · Oct 27, 2021 · f0054bf · f0054bf
1 parent 2c60571
commit f0054bf
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 40 deletions.
diff --git 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 (
-    <Tag {...attributes} className={classes} />
+    <Tag {...attributes} className={classes}>
+      { container ?
+        <div className={containerClass}>
+          {children}
+        </div> :
+        children
+      }
+    </Tag>
   );
 };
 

diff --git 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(<Navbar />);
 
-    expect(wrapper.html()).toBe('<nav class="navbar"></nav>');
+    expect(wrapper.html()).toBe('<nav class="navbar"><div class="container-fluid"></div></nav>');
   });
 
   it('should render default .navbar-expand class', () => {
     const wrapper = shallow(<Navbar expand />);
 
-    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand"></nav>');
+    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand"><div class="container-fluid"></div></nav>');
   });
 
   it('should render size based .navbar-expand-* classes', () => {
     const wrapper = shallow(<Navbar expand="md" />);
 
-    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand-md"></nav>');
+    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand-md"><div class="container-fluid"></div></nav>');
   });
 
   it('should render custom tag', () => {
     const wrapper = shallow(<Navbar tag="div" />);
 
-    expect(wrapper.html()).toBe('<div class="navbar"></div>');
+    expect(wrapper.html()).toBe('<div class="navbar"><div class="container-fluid"></div></div>');
   });
 
   it('should render role', () => {
     const wrapper = shallow(<Navbar role="navigation" />);
 
-    expect(wrapper.html()).toBe('<nav role="navigation" class="navbar"></nav>');
+    expect(wrapper.html()).toBe('<nav role="navigation" class="navbar"><div class="container-fluid"></div></nav>');
+  });
+
+  it('should support container options', () => {
+    let wrapper = shallow(<Navbar container={false} />);
+    expect(wrapper.html()).toBe('<nav class="navbar"></nav>');
+
+    wrapper = shallow(<Navbar container />);
+    expect(wrapper.html()).toBe('<nav class="navbar"><div class="container"></div></nav>');
+
+    wrapper = shallow(<Navbar container="xs" />);
+    expect(wrapper.html()).toBe('<nav class="navbar"><div class="container-xs"></div></nav>');
+
+    wrapper = shallow(<Navbar container="sm" />);
+    expect(wrapper.html()).toBe('<nav class="navbar"><div class="container-sm"></div></nav>');
+
+    wrapper = shallow(<Navbar container="md" />);
+    expect(wrapper.html()).toBe('<nav class="navbar"><div class="container-md"></div></nav>');
+
+    wrapper = shallow(<Navbar container="lg" />);
+    expect(wrapper.html()).toBe('<nav class="navbar"><div class="container-lg"></div></nav>');
+
+    wrapper = shallow(<Navbar container="xl" />);
+    expect(wrapper.html()).toBe('<nav class="navbar"><div class="container-xl"></div></nav>');
   });
 
   it('should render children', () => {
     const wrapper = shallow(<Navbar>Children</Navbar>);
 
-    expect(wrapper.html()).toBe('<nav class="navbar">Children</nav>');
+    expect(wrapper.html()).toBe('<nav class="navbar"><div class="container-fluid">Children</div></nav>');
   });
 
   it('should pass additional classNames', () => {

diff --git a/stories/examples/Navbar.js b/stories/examples/Navbar.js
@@ -24,38 +24,36 @@ const Example = (args) => {
   return (
     <div>
       <Navbar {...args}>
-        <Container fluid>
-          <NavbarBrand href="/">reactstrap</NavbarBrand>
-          <NavbarToggler onClick={toggle} />
-          <Collapse isOpen={isOpen} navbar>
-            <Nav className="mr-auto" navbar>
-              <NavItem>
-                <NavLink href="/components/">Components</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
-              </NavItem>
-              <UncontrolledDropdown nav inNavbar>
-                <DropdownToggle nav caret>
-                  Options
-                </DropdownToggle>
-                <DropdownMenu right>
-                  <DropdownItem>
-                    Option 1
-                  </DropdownItem>
-                  <DropdownItem>
-                    Option 2
-                  </DropdownItem>
-                  <DropdownItem divider />
-                  <DropdownItem>
-                    Reset
-                  </DropdownItem>
-                </DropdownMenu>
-              </UncontrolledDropdown>
-            </Nav>
-            <NavbarText>Simple Text</NavbarText>
-          </Collapse>
-        </Container>
+        <NavbarBrand href="/">reactstrap</NavbarBrand>
+        <NavbarToggler onClick={toggle} />
+        <Collapse isOpen={isOpen} navbar>
+          <Nav className="mr-auto" navbar>
+            <NavItem>
+              <NavLink href="/components/">Components</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
+            </NavItem>
+            <UncontrolledDropdown nav inNavbar>
+              <DropdownToggle nav caret>
+                Options
+              </DropdownToggle>
+              <DropdownMenu right>
+                <DropdownItem>
+                  Option 1
+                </DropdownItem>
+                <DropdownItem>
+                  Option 2
+                </DropdownItem>
+                <DropdownItem divider />
+                <DropdownItem>
+                  Reset
+                </DropdownItem>
+              </DropdownMenu>
+            </UncontrolledDropdown>
+          </Nav>
+          <NavbarText>Simple Text</NavbarText>
+        </Collapse>
       </Navbar>
     </div>
   );
@@ -66,14 +64,19 @@ Example.args = {
   light: true,
   dark: false,
   full: false,
-  expand: 'md'
+  expand: 'md',
+  container: 'fluid',
 }
 
 Example.argTypes = {
   color: {
     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
@@ -9,6 +9,7 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
   fixed?: string;
   sticky?: string;
   color?: string;
+  container?: boolean | 'fluid' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   tag?: React.ElementType;
   cssModule?: CSSModule;
   expand?: boolean | string;