top/bottom only borders

Author: kimispencer

docs/Examples/Border.example.purs

@@ -3,7 +3,7 @@ module Lumi.Components.Examples.Border where
 import Prelude
 
 import Data.Maybe (Maybe(..))
-import Lumi.Components.Border (border, borderSquare, borderRound, borderTop, borderBottom)
+import Lumi.Components.Border (border, borderSquare, borderRound, borderSquareTop, borderSquareBottom, borderTop, borderBottom)
 import Lumi.Components.Column (column, column_)
 import Lumi.Components.Example (example)
 import Lumi.Components.Spacing (Space(..))
@@ -20,27 +20,41 @@ docs =
         $ borderRound $
             column
               { children: [ R.text "bordered element" ]
-              , style: R.css { padding: "12px" }
+              , style: R.css {}
               }
     , h2_ "Square borders"
     , example
         $ borderSquare $
             column
               { children: [ R.text "bordered element" ]
-              , style: R.css { padding: "12px" }
+              , style: R.css {}
+              }
+    , h2_ "Square Top borders"
+    , example
+        $ borderSquareTop $
+            column
+              { children: [ R.text "bordered element" ]
+              , style: R.css {}
+              }
+    , h2_ "Square Bottom borders"
+    , example
+        $ borderSquareBottom $
+            column
+              { children: [ R.text "bordered element" ]
+              , style: R.css {}
               }
     , h2_ "Top borders"
     , example
         $ borderTop $
             column
               { children: [ R.text "bordered element" ]
-              , style: R.css { padding: "12px" }
+              , style: R.css {}
               }
     , h2_ "Bottom borders"
     , example
         $ borderBottom $
             column
               { children: [ R.text "bordered element" ]
-              , style: R.css { padding: "12px" }
+              , style: R.css {}
               }
     ]

src/Lumi/Components/Border.purs

@@ -2,23 +2,27 @@ module Lumi.Components.Border where
 
 import Prelude
 
-import Color (cssStringHSLA)
+import Color (toHexString)
 import Lumi.Components.Color (colors)
 import JSS (JSS, jss)
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (unsafeCreateDOMComponent)
 
 data BorderStyle
-  = Top
-  | Bottom
+  = SquareTop
+  | SquareBottom
   | Round
   | Square
+  | Top
+  | Bottom
 
 toStyle :: BorderStyle -> String
-toStyle Top = "top"
-toStyle Bottom = "bottom"
+toStyle SquareTop = "square-top"
+toStyle SquareBottom = "square-bottom"
 toStyle Round = "round"
 toStyle Square = "square"
+toStyle Top = "top"
+toStyle Bottom = "bottom"
 
 component :: Component BorderProps
 component = createComponent "Border"
@@ -53,6 +57,20 @@ borderRound children =
     , borderStyle: Round
     }
 
+borderSquareTop :: JSX -> JSX
+borderSquareTop children =
+  border
+    { children
+    , borderStyle: SquareTop
+    }
+
+borderSquareBottom :: JSX -> JSX
+borderSquareBottom children =
+  border
+    { children
+    , borderStyle: SquareBottom
+    }
+
 borderTop :: JSX -> JSX
 borderTop children =
   border
@@ -72,24 +90,41 @@ styles :: JSS
 styles = jss
   { "@global":
       { "lumi-border":
-          { border: "1px solid " <> cssStringHSLA colors.black3
+          { borderColor: toHexString colors.black3
+          , borderStyle: "solid"
+          , borderWidth: "1px"
+          , padding: "16px"
           , overflow: "hidden"
           , "&[data-border-style='round']":
-              { borderRadius: "5px" }
+              { borderRadius: "5px"
+              }
           , "&[data-border-style='square']":
-              { borderRadius: "0px" }
-          , "&[data-border-style='top']":
+              { borderRadius: "0px"
+              }
+          , "&[data-border-style='square-bottom']":
               { borderTopRightRadius: "5px"
               , borderTopLeftRadius: "5px"
               , borderBottomRightRadius: "0px"
               , borderBottomLeftRadius: "0px"
               }
-          , "&[data-border-style='bottom']":
+          , "&[data-border-style='square-top']":
               { borderTopRightRadius: "0px"
               , borderTopLeftRadius: "0px"
               , borderBottomRightRadius: "5px"
               , borderBottomLeftRadius: "5px"
               }
+          , "&[data-border-style='top']":
+              { border: "inherit"
+              , borderTop: "1px solid " <> toHexString colors.black3
+              , paddingLeft: "0px"
+              , paddingRight: "0px"
+              }
+          , "&[data-border-style='bottom']":
+              { border: "inherit"
+              , borderBottom: "1px solid " <> toHexString colors.black3
+              , paddingLeft: "0px"
+              , paddingRight: "0px"
+              }
           }
       }
   }