Merge pull request #96 from lumihq/kimi/update/tooltip

[update] tooltip to accept JSX

Author: kimispencer

docs/Examples/Tooltip.example.purs

@@ -6,12 +6,15 @@ import Data.Maybe (Maybe(..))
 import Data.Nullable (toNullable)
 import Lumi.Components.Size (Size(..))
 import Lumi.Components.Column (column_)
+import Lumi.Components.Link as Link
 import Lumi.Components.Row (row_)
 import Lumi.Components.Text (body_)
+import Lumi.Components.Text as T
 import Lumi.Components.Example (example)
 import Lumi.Components.Tooltip (tooltip)
 import React.Basic (JSX)
 import React.Basic.DOM as R
+import Web.HTML.History (URL(..))
 
 docs :: JSX
 docs =
@@ -20,7 +23,7 @@ docs =
         $ tooltip
             { variant: "basic"
             , style: R.css {}
-            , text: "Lorem ipsum"
+            , text: R.text "Lorem ipsum"
             , content: body_ "Basic example"
             , size: toNullable Nothing
             }
@@ -29,7 +32,7 @@ docs =
         $ tooltip
             { variant: "top"
             , style: R.css {}
-            , text: "Lorem ipsum"
+            , text: R.text "Lorem ipsum"
             , content: body_ "Top example"
             , size: toNullable Nothing
             }
@@ -38,7 +41,7 @@ docs =
         $ tooltip
             { variant: "bottom"
             , style: R.css {}
-            , text: "Lorem ipsum"
+            , text: R.text "Lorem ipsum"
             , content: body_ "Bottom example"
             , size: toNullable Nothing
             }
@@ -47,7 +50,7 @@ docs =
         $ tooltip
             { variant: "left"
             , style: R.css {}
-            , text: "Lorem ipsum"
+            , text: R.text "Lorem ipsum"
             , content: body_ "Left example"
             , size: toNullable Nothing
             }
@@ -58,7 +61,7 @@ docs =
               , tooltip
                   { variant: "top"
                   , style: R.css { padding: "0 2px", textDecoration: "underline" }
-                  , text: "Lorem ipsum"
+                  , text: R.text "Lorem ipsum"
                   , content: body_ "here"
                   , size: toNullable Nothing
                   }
@@ -71,10 +74,35 @@ docs =
               , tooltip
                   { variant: "top"
                   , style: R.css { padding: "0 2px", textDecoration: "underline" }
-                  , text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor libero non libero consequat, at iaculis diam venenatis. Donec nec porttitor tellus."
+                  , text: R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor libero non libero consequat, at iaculis diam venenatis. Donec nec porttitor tellus."
                   , content: body_ "here"
                   , size: toNullable $ Just $ Large
                   }
               , body_ "for more."
               ]
+
+    , example
+        $ row_
+              [ body_ "Hello, world see"
+              , tooltip
+                  { variant: "top"
+                  , style: R.css { padding: "0 2px", textDecoration: "underline" }
+                  , text:
+                      T.text T.body
+                        { style = R.css {}
+                        , children =
+                            [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor libero non libero consequat, at iaculis diam venenatis. Donec nec porttitor tellus "
+                            , Link.link Link.defaults
+                                { href = URL "#/link"
+                                , text = R.text "click here"
+                                , target = Just "_blank"
+                                }
+                            , R.text "."
+                            ]
+                        }
+                  , content: body_ "here"
+                  , size: toNullable $ Just $ Large
+                  }
+              , body_ "for more (includes link in tooltip)."
+              ]
     ]

src/Lumi/Components/Tooltip.purs

@@ -14,7 +14,7 @@ import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
 type TooltipProps =
   { variant :: String
   , style :: CSS
-  , text :: String
+  , text :: JSX
   , content :: JSX
   , size :: Nullable Size
   }