Merge pull request #69 from cquiroz/common

Updated react common

Author: cquiroz

build.sbt

@@ -131,7 +131,7 @@ lazy val facade =
       libraryDependencies ++= Seq(
         "com.github.japgolly.scalajs-react" %%% "core" % scalaJsReact,
         "com.github.japgolly.scalajs-react" %%% "extra" % scalaJsReact,
-        "io.github.cquiroz.react" %%% "common" % "0.3.5",
+        "io.github.cquiroz.react" %%% "common" % "0.3.6",
         "com.github.japgolly.scalajs-react" %%% "test" % scalaJsReact % Test,
         "com.lihaoyi" %%% "utest" % "0.7.2" % Test,
         "org.typelevel" %%% "cats-core" % "2.1.0" % Test

facade/src/main/scala/react/semanticui/package.scala

@@ -5,7 +5,7 @@ import js.annotation.JSImport
 import js.|
 import japgolly.scalajs.react._
 import japgolly.scalajs.react.raw.React
-import japgolly.scalajs.react.vdom.VdomNode
+import japgolly.scalajs.react.vdom._
 
 package semanticui {
   sealed trait As {

facade/src/test/scala/react/semanticui/elements/image/ImageTests.scala

@@ -2,6 +2,7 @@ package react.semanticui.elements.image
 
 import utest._
 import japgolly.scalajs.react.test._
+import japgolly.scalajs.react.vdom.html_<^._
 import react.semanticui.elements.icon.Icon
 
 object ImageTests extends TestSuite {
@@ -13,6 +14,15 @@ object ImageTests extends TestSuite {
         assert(mountNode.innerHTML == """<img class="ui image">""")
       }
     }
+    'renderInside - {
+      val image = <.div(Image(src = "http://fig1.jpg", className = "draggable"))
+      ReactTestUtils.withNewBodyElement { mountNode =>
+        image.renderIntoDOM(mountNode)
+        assert(
+          mountNode.innerHTML == """<div><img src="http://fig1.jpg" class="ui image draggable"></div>"""
+        )
+      }
+    }
     'renderAs - {
       val image = Image(as = "a", href = "abc")
       ReactTestUtils.withNewBodyElement { mountNode =>

facade/src/test/scala/react/semanticui/modules/sidebar/SidebarTests.scala

@@ -5,8 +5,10 @@ import japgolly.scalajs.react.test._
 import japgolly.scalajs.react.vdom.html_<^._
 import japgolly.scalajs.react.ScalaComponent
 import japgolly.scalajs.react._
-import react.semanticui.collections.menu.Menu
+import react.semanticui.collections.menu._
+import react.semanticui.elements.icon._
 import react.semanticui.As
+import react.common._
 
 object SidebarTests extends TestSuite {
   val DoubleComp = ScalaComponent
@@ -48,5 +50,48 @@ object SidebarTests extends TestSuite {
         assert(m.outerHtmlScrubbed == """<div class="ui inverted ui left sidebar menu">Abc</div>""")
       }
     }
+    'example - {
+      val sidebar =
+        <.div(
+          Menu(
+            attached   = MenuAttached.Top,
+            compact    = true,
+            borderless = true,
+            tabular    = MenuTabular.Right
+          )(
+            MenuItem(as = "a")(
+              Icon("bars"),
+              "Formerly known as OT"
+            )
+          ),
+          SidebarPushable(className = "maingrid")(
+            Sidebar(
+              as = As.Menu(
+                Menu(
+                  inverted = true,
+                  vertical = true,
+                  icon     = MenuIcon.Labeled
+                )
+              ),
+              width     = SidebarWidth.Thin,
+              animation = SidebarAnimation.Push,
+              direction = SidebarDirection.Left,
+              visible   = true
+            )(
+              MenuItem(as = "a")(Icon("home"), "P I"),
+              MenuItem(as = "a")(Icon("home"), "P II")
+            ),
+            SidebarPusher(dimmed = true)(
+              <.div("Main")
+            )
+          )
+        )
+      ReactTestUtils.withNewBodyElement { mountNode =>
+        sidebar.renderIntoDOM(mountNode)
+        assert(
+          mountNode.innerHTML == """<div><div class="ui borderless compact top attached right tabular menu"><a class="item"><i aria-hidden="true" class="bars icon"></i>Formerly known as OT</a></div><div class="pushable maingrid"><div class="ui inverted vertical labeled icon ui push left thin visible sidebar menu"><a class="item"><i aria-hidden="true" class="home icon"></i>P I</a><a class="item"><i aria-hidden="true" class="home icon"></i>P II</a></div><div class="pusher dimmed"><div>Main</div></div></div></div>"""
+        )
+      }
+    }
   }
 }