Merge pull request #33 from lumihq/kimi/borderless-list

Add borderless List prop

Author: kimispencer

docs/Examples/List.example.purs

@@ -8,7 +8,7 @@ import Lumi.Components.Color (colorNames)
 import Lumi.Components.Column (columnSelfStretch, column_)
 import Lumi.Components.Images (avatar, avatar_)
 import Lumi.Components.Link (link, defaults)
-import Lumi.Components.List (list, structuredColumnList, defaultList, compactList)
+import Lumi.Components.List (borderlessList, compactList, defaultList, list, structuredColumnList)
 import Lumi.Components.Lockup (lockup)
 import Lumi.Components.Row (row_)
 import Lumi.Components.Size (Size(..))
@@ -29,6 +29,14 @@ docs =
                 }
             ]
 
+    , h2_ "Basic List w/ no Borders"
+    , example
+        $ columnSelfStretch
+            [ borderlessList defaultList
+                { rows = simpleListData
+                }
+            ]
+
     , h2_ "Compact Basic List"
     , example
         $ columnSelfStretch

src/Lumi/Components/List.purs

@@ -11,17 +11,15 @@ import Lumi.Components.Size (Size(..))
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM as R
 
-type ListProps =
+type ListProps r =
   { size :: Maybe Size
   , rightAligned :: Boolean
   , rows :: Array (Array JSX)
+  | r
   }
 
-component :: Component ListProps
-component = createComponent "List"
-
-list :: ListProps -> JSX
-list = makeStateless component $ lumiList <<< mapProps
+listComponent :: ListProps (borders :: Boolean) -> JSX
+listComponent = makeStateless (createComponent "List") $ lumiList <<< mapProps
   where
     mapProps props =
       { className: "lumi"
@@ -30,6 +28,7 @@ list = makeStateless component $ lumiList <<< mapProps
             Just size -> show size
             Nothing -> show Medium
       , "data-right-aligned": props.rightAligned
+      , "data-borders": props.borders
       , children: map renderRow props.rows
       }
       where
@@ -43,14 +42,32 @@ list = makeStateless component $ lumiList <<< mapProps
     lumiListRow = element (R.unsafeCreateDOMComponent "lumi-list-row")
     lumiListRowCell = element (R.unsafeCreateDOMComponent "lumi-list-row-cell")
 
-defaultList :: ListProps
+list :: ListProps () -> JSX
+list props =
+  listComponent
+    { size: props.size
+    , rightAligned: props.rightAligned
+    , rows: props.rows
+    , borders: true
+    }
+
+borderlessList :: ListProps () -> JSX
+borderlessList props =
+  listComponent
+    { size: props.size
+    , rightAligned: props.rightAligned
+    , rows: props.rows
+    , borders: false
+    }
+
+defaultList :: ListProps ()
 defaultList =
   { size: Just $ Medium
   , rightAligned: false
   , rows: []
   }
 
-compactList :: ListProps
+compactList :: ListProps ()
 compactList =
   { size: Just $ Small
   , rightAligned: false
@@ -100,9 +117,9 @@ styles = jss
               , display: "flex"
               , flexFlow: "row wrap"
               , justifyContent: "space-between"
-              , borderTop: [ "1px", "solid", cssStringHSLA colors.black4 ]
               , minHeight: "calc(48px + 1px)"
               , padding: "6px 0"
+              , borderTop: [ "1px", "solid", cssStringHSLA colors.black4 ]
 
               , "& > lumi-list-row-cell":
                   { boxSizing: "border-box"
@@ -114,6 +131,13 @@ styles = jss
                   }
               }
 
+            , "&[data-borders=\"false\"]":
+                { border: "0"
+                , "& > lumi-list-row":
+                  { border: "0"
+                  }
+                }
+
             , "&[data-size=\"small\"] > lumi-list-row":
                 { minHeight: "calc(40px + 1px)"
                 , padding: "2px 0"