init Border component

Author: kimispencer

docs/App.jsx

@@ -46,6 +46,7 @@ const fromComponentPath = title => ({
 });
 
 const componentLoaders = [
+  "Border",
   "Breadcrumb",
   "Button",
   "ButtonGroup",

docs/Examples/Border.example.purs

@@ -0,0 +1,29 @@
+module Lumi.Components.Examples.Border where
+
+import Prelude
+
+import Lumi.Components.Border (border)
+import Lumi.Components.Column (column_)
+import Lumi.Components.Example (example)
+import React.Basic (Component, JSX, createComponent, makeStateless)
+import React.Basic.DOM (css)
+import React.Basic.DOM as R
+
+component :: Component Unit
+component = createComponent "BorderExample"
+
+docs :: JSX
+docs = unit # makeStateless component render
+  where
+    render _ =
+      column_
+        [ example
+            $ border
+                { children:
+                    [ R.div
+                      { children: R.text "bordered element"
+                      , style: R.css { padding: "12px" }
+                      }
+                    ]
+                }
+        ]

docs/Examples/EditableTable.example.purs

@@ -48,7 +48,7 @@ docs = unit # make component
             editableTable
               { addLabel: "Add another row"
               , columns:
-                  [ { label: "Description"
+                  [ { label: "Descriptionxxx"
                     , renderCell: \row -> Input.input Input.text_
                         { value = row.description
                         , onChange = handler targetValue \value ->
@@ -63,6 +63,9 @@ docs = unit # make component
                             updateRow self row { quantity = fromMaybe row.quantity $ fromString =<< value }
                         }
                     }
+                  , { label: "foobar"
+                    , renderCell: \row -> R.text "hello"
+                    }
                   , { label: "Price"
                     , renderCell: \row -> Input.input Input.number
                         { value = show row.price

src/Lumi/Components/Border.purs

@@ -0,0 +1,19 @@
+module Lumi.Components.Border where
+
+import Prelude
+
+import Color (cssStringHSLA)
+import Lumi.Components.Color (colors)
+import Lumi.Components.Column (column)
+import React.Basic (JSX)
+import React.Basic.DOM as R
+
+border :: Array JSX -> JSX
+border children =
+  column
+    { style: R.css
+        { border: "1px solid " <> cssStringHSLA colors.black3
+        , borderRadius: "5px"
+        }
+    , children
+    }