fix: CSidebar wrapper components fixes

- render nodes, even if there are no children,
- delete 'tag' from divider and title
- clean components

Author: woothu

src/CSidebarClose.js

@@ -1,43 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import CButtonClose from './CButtonClose';
+import React from 'react'
+import CButtonClose from './CButtonClose'
 
 //component - CoreUI / CSidebarClose
 
-const CSidebarClose = props=>{
-
-  const {
-    className,
-    ...attributes
-  } = props;
-
-  // render
-
-  const classes = classNames(
-    'c-sidebar-close',
-    className
-  );
-
+const CSidebarClose = props => {
   return (
-    <CButtonClose {...attributes} buttonClass={classes}>
+    <CButtonClose {...props} buttonClass={'c-sidebar-close'}>
       <svg className="c-icon" width="24" height="24" viewBox="0 0 24 24">
         <title>x</title>
         <path d="M20.030 5.030l-1.061-1.061-6.97 6.97-6.97-6.97-1.061 1.061 6.97 6.97-6.97 6.97 1.061 1.061 6.97-6.97 6.97 6.97 1.061-1.061-6.97-6.97 6.97-6.97z"></path>
       </svg>
     </CButtonClose>
-  );
-
+  )
 }
 
-CSidebarClose.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  //
-  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
-};
-
-CSidebarClose.defaultProps = {
-};
-
-export default CSidebarClose;
+export default CSidebarClose

src/CSidebarFooter.js

@@ -1,37 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 //component - CoreUI / CSidebarFooter
 
-const CSidebarFooter = props=>{
+const CSidebarFooter = props => {
 
   const {
     tag: Tag,
-    children,
     className,
     //
     innerRef,
     ...attributes
-  } = props;
+  } = props
 
   // render
-
-  const classes = classNames(className, 'c-sidebar-footer');
+  const classes = classNames('c-sidebar-footer', className)
 
   return (
-    children ?
-      <Tag className={classes} {...attributes} ref={innerRef}>
-        {children}
-      </Tag>
-     : null
-  );
-
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
 }
 
 CSidebarFooter.propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  children: PropTypes.node,
   className: PropTypes.string,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
@@ -41,4 +33,4 @@ CSidebarFooter.defaultProps = {
   tag: 'div'
 };
 
-export default CSidebarFooter;
+export default CSidebarFooter

src/CSidebarForm.js

@@ -1,37 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 //component - CoreUI / CSidebarForm
 
-const CSidebarForm = props=>{
+const CSidebarForm = props => {
 
   const {
     tag: Tag,
-    children,
     className,
     //
     innerRef,
     ...attributes
-  } = props;
+  } = props
 
   //render
 
-  const classes = classNames(className, 'c-sidebar-form');
+  const classes = classNames('c-sidebar-form', className)
 
   return (
-    children ?
-      <Tag className={classes} {...attributes} ref={innerRef}>
-        {children}
-      </Tag>
-     : null
-  );
-
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
 }
 
 CSidebarForm.propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  children: PropTypes.node,
   className: PropTypes.string,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
@@ -41,4 +34,4 @@ CSidebarForm.defaultProps = {
   tag: 'div'
 };
 
-export default CSidebarForm;
+export default CSidebarForm

src/CSidebarHeader.js

@@ -1,40 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 //component - CoreUI / CSidebarHeader
 
-const CSidebarHeader = props=>{
+const CSidebarHeader = props => {
 
   const {
     tag: Tag,
-    children,
     className,
     //
     innerRef,
     ...attributes
-  } = props;
+  } = props
 
   //render
 
-  const classes = classNames(
-    className,
-    'c-sidebar-header'
-  );
+  const classes = classNames('c-sidebar-header', className)
 
   return (
-    children ?
-      <Tag className={classes} {...attributes} ref={innerRef}>
-        {children}
-      </Tag>
-     : null
-  );
-
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
 }
 
 CSidebarHeader.propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  children: PropTypes.node,
   className: PropTypes.string,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
@@ -44,4 +34,4 @@ CSidebarHeader.defaultProps = {
   tag: 'div'
 };
 
-export default CSidebarHeader;
+export default CSidebarHeader

src/CSidebarNavDivider.js

@@ -1,42 +1,36 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 //component - CoreUI / CSidebarNavDivider
 
-const CSidebarNavDivider = props=>{
+const CSidebarNavDivider = props => {
 
   const {
-    tag: Tag,
     className,
     //
     innerRef,
     ...attributes
-  } = props;
+  } = props
 
   //render
 
   const classes = classNames(
-    className,
-    'c-sidebar-nav-divider'
-  );
+    'c-sidebar-nav-divider',
+    className
+  )
 
   return (
-    <Tag className={classes} {...attributes} ref={innerRef} />
-  );
+    <li className={classes} {...attributes} ref={innerRef} />
+  )
 
 }
 
 CSidebarNavDivider.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  children: PropTypes.node,
   className: PropTypes.string,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
 };
 
-CSidebarNavDivider.defaultProps = {
-  tag: 'li'
-};
 
-export default CSidebarNavDivider;
+export default CSidebarNavDivider

src/CSidebarNavTitle.js

@@ -1,42 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 //component - CoreUI / CSidebarNavTitle
 
-const CSidebarNavTitle = props=>{
+const CSidebarNavTitle = props => {
 
   const {
-    tag: Tag,
     className,
     //
     innerRef,
     ...attributes
-  } = props;
+  } = props
 
   //render
-
   const classes = classNames(
-    className,
-    'c-sidebar-nav-title'
-  );
+    'c-sidebar-nav-title',
+    className
+  )
 
   return (
-    <Tag className={classes} {...attributes} ref={innerRef} />
-  );
-
+    <li className={classes} {...attributes} ref={innerRef}/>
+  )
 }
 
 CSidebarNavTitle.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  children: PropTypes.node,
   className: PropTypes.string,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
 };
 
-CSidebarNavTitle.defaultProps = {
-  tag: 'li'
-};
 
-export default CSidebarNavTitle;
+export default CSidebarNavTitle