init keyValueList

Author: kimispencer

docs/App.jsx

@@ -63,6 +63,7 @@ const componentLoaders = [
   "Images",
   "Input",
   "InputGroup",
+  "KeyValueList",
   "LabeledField",
   "Layouts",
   "Link",

docs/Examples/KeyValueList.Example.purs

@@ -0,0 +1,72 @@
+module Lumi.Components.Examples.KeyValueList where
+
+import Prelude
+
+import Data.Array (intercalate)
+import Data.Maybe (Maybe(..))
+import Data.Nullable (toNullable)
+import Lumi.Components.Size (Size(..))
+import Lumi.Components.Button (ButtonState(..), button, defaults, primary, secondary, linkStyle, iconButton, iconButtonDefaults)
+import Lumi.Components.Color (colorNames)
+import Lumi.Components.Column (column_)
+import Lumi.Components.Icon (IconType(..))
+import Lumi.Components.Images (avatar_, productThumb_)
+import Lumi.Components.KeyValueList (keyValueList)
+import Lumi.Components.Lockup (lockup)
+import Lumi.Components.Text as T
+import Lumi.Components.Example (example)
+import React.Basic (JSX)
+import React.Basic.DOM (css)
+import React.Basic.DOM as R
+
+docs :: JSX
+docs =
+  column_ $
+    [ example
+        $ keyValueList
+            { rightAligned: true
+            , rows: r
+            , borders: true
+            }
+    , example
+        $ keyValueList
+            { rightAligned: false
+            , rows: r
+            , borders: true
+            }
+    , example
+        $ keyValueList
+            { rightAligned: true
+            , rows: r
+            , borders: false
+            }
+    , example
+        $ keyValueList
+            { rightAligned: false
+            , rows: r
+            , borders: false
+            }
+    ]
+
+  where
+    r =
+      [ { label: "Name"
+        , value: T.body_ "Flexo"
+        }
+      , { label: "Email"
+        , value: T.body_ "[email protected]"
+        }
+      , { label: ""
+        , value: lockup
+            { title: R.text "Flexo R."
+            , subtitle: Just $ R.text "Lumi"
+            , image: Just $ avatar_
+                { size: Large
+                , image:
+                    R.img
+                      { src: "https://s3.amazonaws.com/lumi-flapjack-staging/mockups/9e7f08b801e6bb3a428ef72e93c49fe5.jpg"
+                      }
+                }
+            }
+        }
+      ]

src/Lumi/Components/KeyValueList.purs

@@ -0,0 +1,77 @@
+module Lumi.Components.KeyValueList where
+
+import Prelude
+
+import Data.Nullable (notNull)
+import JSS (JSS, jss)
+import Lumi.Components.Color (colorNames)
+import Lumi.Components.List as List
+import Lumi.Components.Row (row)
+import Lumi.Components.Text as T
+import React.Basic (JSX, element)
+import React.Basic.DOM as R
+
+
+keyValueList
+  :: { rightAligned :: Boolean
+     , rows ::
+         Array
+           { label :: String
+           , value :: JSX
+           }
+     , borders :: Boolean
+     }
+  -> JSX
+keyValueList { rightAligned, rows, borders } =
+  let
+    lumiKeyValueListElement = element (R.unsafeCreateDOMComponent "lumi-key-value-list")
+
+    toRows r =
+      r <#> \{ label, value } ->
+        [ row
+            { style: R.css
+                { alignItems: "center"
+                }
+            , children:
+                [ T.text T.body
+                    { style = R.css
+                        { flex: "3 5 0%"
+                        , padding: "8px 0"
+                        }
+                    , color = notNull colorNames.black1
+                    , children = [ R.text label ]
+                    }
+                , row
+                    { style: R.css
+                        { alignItems: "center"
+                        , flex: "7 7 0%"
+                        , flexWrap: "wrap"
+                        , justifyContent: if rightAligned then "flex-end" else "flex-start"
+                        }
+                    , children: [ value ]
+                    }
+                ]
+            }
+        ]
+  in
+    lumiKeyValueListElement
+      { children:
+          [ if borders
+              then List.list List.compactList
+                { rows = toRows rows
+                }
+              else List.borderlessList List.compactList
+                { rows = toRows rows
+                }
+          ]
+      , style: R.css { width: "100%" }
+      }
+
+styles :: JSS
+styles = jss
+  { "@global":
+      { "lumi-key-value-list":
+          {
+          }
+      }
+  }