Repository: couds/react-bulma-components (js)

Issue:
Navbar-dropdown cant be a span element must be a div or other block element
**Describe the bug**
Using a divider converted as a hr element, is not allowed in proper html to be inside a list item span element. When validate my code in W3C's validator it says: Element hr not allowed as child of element span in this context.

The officiell Bulma uses div elements here, why have you change that to span?


Pull request description:
Fixes #372 Navbar item default renderas

Patch:
diff --git a/src/components/navbar/components/dropdown.js b/src/components/navbar/components/dropdown.js
index d5f7ffd..64600c7 100644
--- a/src/components/navbar/components/dropdown.js
+++ b/src/components/navbar/components/dropdown.js
@@ -36,7 +36,7 @@ NavbarDropdown.propTypes = {
 };
 
 NavbarDropdown.defaultProps = {
-  renderAs: 'span',
+  renderAs: 'div',
 };
 
 export default NavbarDropdown;
diff --git a/src/components/navbar/components/item.js b/src/components/navbar/components/item.js
index 005107b..e0efd73 100644
--- a/src/components/navbar/components/item.js
+++ b/src/components/navbar/components/item.js
@@ -21,7 +21,7 @@ const NavbarItem = ({
   });
 
   if (dropdown && renderAs === 'a') {
-    as = 'span';
+    as = 'div';
   }
   return (
     <Element


Test patch:
diff --git a/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap b/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
index 4735b55..be795ed 100644
--- a/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
+++ b/src/components/navbar/__test__/__snapshots__/navbar.test.js.snap
@@ -57,7 +57,7 @@ exports[`Navbar component Should have Navbar classname 1`] = `
     <div
       className="navbar-start"
     >
-      <span
+      <div
         className="navbar-item has-dropdown is-hoverable"
       >
         <span
@@ -65,7 +65,7 @@ exports[`Navbar component Should have Navbar classname 1`] = `
         >
           Docs
         </span>
-        <span
+        <div
           className="navbar-dropdown is-boxed"
         >
           <a
@@ -83,8 +83,8 @@ exports[`Navbar component Should have Navbar classname 1`] = `
           >
             Home
           </a>
-        </span>
-      </span>
+        </div>
+      </div>
     </div>
   </div>
 </nav>