Add basic responsiveness combinators (#34)

* Add basic responsiveness combinators

* Add examples for responsive combinators

Author: arthurxavierx

docs/App.jsx

@@ -75,6 +75,7 @@ const componentLoaders = [
   "Pagination",
   "Pill",
   "Progress",
+  "Responsive",
   "Row",
   "Select",
   "Slider",

docs/Examples/Responsive.example.purs

@@ -0,0 +1,20 @@
+module Lumi.Components.Examples.Responsive where
+
+import Prelude
+
+import Lumi.Components.Column (column_)
+import Lumi.Components.Example (example)
+import Lumi.Components.Responsive (desktop, mobile)
+import Lumi.Components.Text (body_, h2_)
+import React.Basic (JSX)
+
+docs :: JSX
+docs =
+  column_ $
+    [ h2_ "Desktop and mobile"
+    , example $
+        column_
+          [ mobile $ body_ "Mobile: this text only is only visible on mobile-sized screens."
+          , desktop $ body_ "Desktop: this text only is only visible on desktop-sized screens."
+          ]
+    ]

src/Lumi/Components/Responsive.purs

@@ -0,0 +1,33 @@
+module Lumi.Components.Responsive where
+
+import Prelude
+
+import JSS (JSS, jss)
+import React.Basic (JSX, element)
+import React.Basic.DOM (unsafeCreateDOMComponent)
+
+mobile :: JSX -> JSX
+mobile = lumiMobileElement <<< { children: _ }
+  where
+    lumiMobileElement = element (unsafeCreateDOMComponent "lumi-mobile")
+
+desktop :: JSX -> JSX
+desktop = lumiDesktopElement <<< { children: _ }
+  where
+    lumiDesktopElement = element (unsafeCreateDOMComponent "lumi-desktop")
+
+styles :: JSS
+styles = jss
+  { "@global":
+      { "@media (max-width: 860px)":
+          { "lumi-desktop":
+              { "display": "none"
+              }
+          }
+      , "@media (min-width: 861px)":
+          { "lumi-mobile":
+              { "display": "none"
+              }
+          }
+      }
+  }

src/Lumi/Components/Styles.purs

@@ -34,6 +34,7 @@ import Lumi.Components.NativeSelect as NativeSelect
 import Lumi.Components.Navigation as Navigation
 import Lumi.Components.Pagination as Pagination
 import Lumi.Components.Pill as Pill
+import Lumi.Components.Responsive as Responsive
 import Lumi.Components.Row as Row
 import Lumi.Components.Select as Select
 import Lumi.Components.Slider as Slider
@@ -87,6 +88,7 @@ attachGlobalComponentStyles = do
     , Navigation.styles
     , Pagination.styles
     , Pill.styles
+    , Responsive.styles
     , Row.styles
     , Select.styles
     , Slider.styles