Add helper components for common uses of Responsive (#104)

Author: arthurxavierx

docs/Examples/Responsive.example.purs

@@ -4,7 +4,7 @@ import Prelude
 
 import Lumi.Components.Column (column_)
 import Lumi.Components.Example (example)
-import Lumi.Components.Responsive (desktop, mobile, phone)
+import Lumi.Components.Responsive (desktop, mobile, phone, withMobile)
 import Lumi.Components.Text (body_, p_)
 import React.Basic (JSX)
 
@@ -15,11 +15,17 @@ docs =
       , p_ "Note that phone sized screens still report themselves as \"mobile\" as well."
       , example
           $ column_
-              [ mobile \_ ->
-                  body_ "Mobile: this text only is only rendered on mobile-sized screens."
+              [ withMobile \isMobile ->
+                  body_
+                    if isMobile then
+                      "Mobile: this text renders differently on mobile-sized screens."
+                    else
+                      "Not mobile: this text renders differently on mobile-sized screens."
+              , mobile \_ ->
+                  body_ "Mobile: this text is only rendered on mobile-sized screens."
               , desktop \_ ->
-                  body_ "Desktop: this text only is only rendered on desktop-sized screens."
+                  body_ "Desktop: this text is only rendered on desktop-sized screens."
               , phone \_ ->
-                  body_ "Phone: this text only is only rendered on phone-sized screens."
+                  body_ "Phone: this text is only rendered on phone-sized screens."
               ]
       ]

package-lock.json

@@ -57,7 +57,7 @@
     "prettier": "^1.18.2",
     "pscid": "^2.8.1",
     "pulp": "^13.0.0",
-    "purescript": "^0.13.2",
+    "purescript": "^0.13.3",
     "purescript-psa": "^0.7.3",
     "react-loadable": "^5.5.0",
     "react-media": "^1.8.0",