code review

Author: kimispencer

docs/Examples/Border.example.purs

@@ -2,21 +2,35 @@ module Lumi.Components.Examples.Border where
 
 import Prelude
 
-import Lumi.Components.Border (border)
-import Lumi.Components.Column (column_)
+import Data.Maybe (Maybe(..))
+import Lumi.Components.Border (border, border_)
+import Lumi.Components.Column (column, column_)
 import Lumi.Components.Example (example)
+import Lumi.Components.Spacing (Space(..))
+import Lumi.Components.Text (h2_)
 import React.Basic (Component, JSX, createComponent, makeStateless)
 import React.Basic.DOM (css)
 import React.Basic.DOM as R
 
 docs :: JSX
 docs =
   column_
-    [ example
-        $ border
-          [ R.div
-              { children: [ R.text "border element" ]
+    [ h2_ "Rounded borders"
+    , example
+        $ border_ $
+            column
+              { children: [ R.text "bordered element" ]
               , style: R.css { padding: "12px" }
               }
-          ]
+    , h2_ "Square borders"
+    , example
+        $ border
+          { children:
+              column
+                { children: [ R.text "bordered element" ]
+                , style: R.css { padding: "12px" }
+                }
+          , roundedBorders: false
+          , style: R.css {}
+          }
     ]

src/Lumi/Components/Border.purs

@@ -4,16 +4,47 @@ import Prelude
 
 import Color (cssStringHSLA)
 import Lumi.Components.Color (colors)
-import Lumi.Components.Column (column)
-import React.Basic (JSX)
+import JSS (JSS, jss)
+import React.Basic (Component, JSX, createComponent, element, makeStateless)
+import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
 import React.Basic.DOM as R
 
-border :: Array JSX -> JSX
-border children =
-  column
-    { style: R.css
-        { border: "1px solid " <> cssStringHSLA colors.black3
-        , borderRadius: "5px"
+component :: Component BorderProps
+component = createComponent "Border"
+
+type BorderProps =
+  { children :: JSX
+  , roundedBorders :: Boolean
+  , style :: CSS
+  }
+
+border :: BorderProps -> JSX
+border = makeStateless component render
+  where
+    lumiBorderElement = element (unsafeCreateDOMComponent "lumi-border")
+
+    render props =
+      lumiBorderElement
+        { "data-rounded-borders": props.roundedBorders
+        , children: props.children
         }
-    , children
+
+border_ :: JSX -> JSX
+border_ children =
+  border
+    { children
+    , style: R.css {}
+    , roundedBorders: true
     }
+
+styles :: JSS
+styles = jss
+  { "@global":
+      { "lumi-border":
+          { border: "1px solid " <> cssStringHSLA colors.black3
+          , overflow: "hidden"
+          , "&[data-rounded-borders=true]":
+              { borderRadius: "5px" }
+          }
+      }
+  }

src/Lumi/Components/Spacing.purs

@@ -2,6 +2,7 @@ module Lumi.Components.Spacing
   ( Space(..)
   , hspace
   , vspace
+  , toPixels
   ) where
 
 import React.Basic.Compat (JSX)

src/Lumi/Components/Styles.purs

@@ -7,6 +7,7 @@ import Data.Traversable (traverse_)
 import Effect (Effect)
 import JSS (JSS, jss)
 import JSS as JSS
+import Lumi.Components.Border as Border
 import Lumi.Components.Breadcrumb as Breadcrumb
 import Lumi.Components.Button (styles) as Button
 import Lumi.Components.ButtonGroup as ButtonGroup
@@ -60,6 +61,7 @@ attachGlobalComponentStyles = do
   jssInstance <- JSS.createInstance JSS.preset
   traverse_ (JSS.globalAttachStyleSheet <=< JSS.createStyleSheet jssInstance)
     [ globals
+    , Border.styles
     , Breadcrumb.styles
     , Button.styles
     , ButtonGroup.styles