component variants

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, border_)
+import Lumi.Components.Border (border, borderSquare, borderRound, borderTop, borderBottom)
 import Lumi.Components.Column (column, column_)
 import Lumi.Components.Example (example)
 import Lumi.Components.Spacing (Space(..))
@@ -17,20 +17,30 @@ docs =
   column_
     [ h2_ "Rounded borders"
     , example
-        $ border_ $
+        $ borderRound $
             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 {}
-          }
+        $ borderSquare $
+            column
+              { children: [ R.text "bordered element" ]
+              , style: R.css { padding: "12px" }
+              }
+    , h2_ "Top borders"
+    , example
+        $ borderTop $
+            column
+              { children: [ R.text "bordered element" ]
+              , style: R.css { padding: "12px" }
+              }
+    , h2_ "Bottom borders"
+    , example
+        $ borderBottom $
+            column
+              { children: [ R.text "bordered element" ]
+              , style: R.css { padding: "12px" }
+              }
     ]

src/Lumi/Components/Border.purs

@@ -6,16 +6,26 @@ import Color (cssStringHSLA)
 import Lumi.Components.Color (colors)
 import JSS (JSS, jss)
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
-import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
-import React.Basic.DOM as R
+import React.Basic.DOM (unsafeCreateDOMComponent)
+
+data BorderStyle
+  = Top
+  | Bottom
+  | Round
+  | Square
+
+toStyle :: BorderStyle -> String
+toStyle Top = "top"
+toStyle Bottom = "bottom"
+toStyle Round = "round"
+toStyle Square = "square"
 
 component :: Component BorderProps
 component = createComponent "Border"
 
 type BorderProps =
   { children :: JSX
-  , roundedBorders :: Boolean
-  , style :: CSS
+  , borderStyle :: BorderStyle
   }
 
 border :: BorderProps -> JSX
@@ -25,27 +35,61 @@ border = makeStateless component render
 
     render props =
       lumiBorderElement
-        { "data-rounded-borders": props.roundedBorders
+        { "data-border-style": toStyle props.borderStyle
         , children: props.children
-        , style: props.style
         }
 
-border_ :: JSX -> JSX
-border_ children =
+borderSquare :: JSX -> JSX
+borderSquare children =
+  border
+    { children
+    , borderStyle: Square
+    }
+
+borderRound :: JSX -> JSX
+borderRound children =
   border
     { children
-    , style: R.css {}
-    , roundedBorders: true
+    , borderStyle: Round
     }
 
+borderTop :: JSX -> JSX
+borderTop children =
+  border
+    { children
+    , borderStyle: Top
+    }
+
+borderBottom :: JSX -> JSX
+borderBottom children =
+  border
+    { children
+    , borderStyle: Bottom
+    }
+
+
 styles :: JSS
 styles = jss
   { "@global":
       { "lumi-border":
           { border: "1px solid " <> cssStringHSLA colors.black3
           , overflow: "hidden"
-          , "&[data-rounded-borders=true]":
+          , "&[data-border-style='round']":
               { borderRadius: "5px" }
+          , "&[data-border-style='square']":
+              { borderRadius: "0px" }
+          , "&[data-border-style='top']":
+              { borderTopRightRadius: "5px"
+              , borderTopLeftRadius: "5px"
+              , borderBottomRightRadius: "0px"
+              , borderBottomLeftRadius: "0px"
+              }
+          , "&[data-border-style='bottom']":
+              { borderTopRightRadius: "0px"
+              , borderTopLeftRadius: "0px"
+              , borderBottomRightRadius: "5px"
+              , borderBottomLeftRadius: "5px"
+              }
           }
       }
   }