responsive keyValueList (#75)

responsive keyValueList

Author: kimispencer

docs/Examples/List.example.purs

@@ -8,11 +8,12 @@ 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 (borderlessList, compactList, defaultList, list, structuredColumnList)
+import Lumi.Components.List (borderlessList, compactList, defaultList, keyValueList, list, structuredColumnList)
 import Lumi.Components.Lockup (lockup)
 import Lumi.Components.Row (row_)
 import Lumi.Components.Size (Size(..))
 import Lumi.Components.Text (text, subtext, h2_, body_)
+import Lumi.Components.Text as T
 import Lumi.Components.Example (example)
 import React.Basic (JSX, fragment)
 import React.Basic.DOM as R
@@ -111,6 +112,32 @@ docs =
                     ]
                 }
             ]
+
+    , h2_ "Key Value Lists"
+    , 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
     simpleListData =
@@ -167,3 +194,25 @@ docs =
         , id: "789"
         }
       ]
+
+    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/List.purs

@@ -2,12 +2,15 @@ module Lumi.Components.List where
 
 import Prelude
 
+import Data.Nullable (notNull)
 import Color (cssStringHSLA)
 import Data.Array (mapMaybe)
 import Data.Maybe (Maybe(..))
 import JSS (JSS, jss)
-import Lumi.Components.Color (colors)
+import Lumi.Components.Color (colors, colorNames)
+import Lumi.Components.Row (row)
 import Lumi.Components.Size (Size(..))
+import Lumi.Components.Text as T
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM as R
 
@@ -102,6 +105,64 @@ structuredColumnList = makeStateless structuredColumnListComponent render
         renderRowCell row col =
           col.renderCell row
 
+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")
+    lumiKeyValueListLabelElement = element (R.unsafeCreateDOMComponent "lumi-key-value-list-label")
+    lumiKeyValueListValueElement = element (R.unsafeCreateDOMComponent "lumi-key-value-list-value")
+
+    toRows r =
+      r <#> \{ label, value } ->
+        [ row
+            { style: R.css
+                { alignItems: "center"
+                , justifyContent: "space-between"
+                , width: "100%"
+                }
+            , children:
+                [ lumiKeyValueListLabelElement
+                    { children:
+                        [ T.text T.body
+                            { style = R.css {}
+                            , color = notNull colorNames.black1
+                            , children = [ R.text label ]
+                            }
+                        ]
+                    , style: R.css {}
+                    }
+                , lumiKeyValueListValueElement
+                    { children: [ value ]
+                    , style: R.css
+                        { justifyContent: if rightAligned then "flex-end" else "flex-start"
+                        }
+                    }
+                ]
+            }
+        ]
+  in
+    lumiKeyValueListElement
+      { children:
+          [ if borders
+              then list compactList
+                { rows = toRows rows
+                }
+              else borderlessList compactList
+                { rows = toRows rows
+                }
+          ]
+      , style: R.css { width: "100%" }
+      }
+
 styles :: JSS
 styles = jss
   { "@global":
@@ -111,7 +172,6 @@ styles = jss
           , flexFlow: "column"
           , listStyleType: "none"
           , borderBottom: [ "1px", "solid", cssStringHSLA colors.black4 ]
-
           , "& > lumi-list-row":
               { boxSizing: "border-box"
               , display: "flex"
@@ -120,7 +180,6 @@ styles = jss
               , minHeight: "calc(48px + 1px)"
               , padding: "6px 0"
               , borderTop: [ "1px", "solid", cssStringHSLA colors.black4 ]
-
               , "& > lumi-list-row-cell":
                   { boxSizing: "border-box"
                   , display: "flex"
@@ -130,14 +189,12 @@ styles = jss
                   , maxWidth: "100%"
                   }
               }
-
             , "&[data-borders=\"false\"]":
                 { border: "0"
                 , "& > lumi-list-row":
                   { border: "0"
                   }
                 }
-
             , "&[data-size=\"small\"] > lumi-list-row":
                 { minHeight: "calc(40px + 1px)"
                 , padding: "2px 0"
@@ -152,13 +209,33 @@ styles = jss
                 , justifyContent: "flex-end"
                 , alignItems: "center"
                 }
-
             , "@media (max-width: 448px)":
                 { "& > lumi-list-row > lumi-list-row-cell":
                     { alignItems: "flex-end"
                     }
                 }
             }
-
+      , "lumi-key-value-list":
+          { "& lumi-key-value-list-label":
+              { "flex": "3 5 0%"
+              , "padding": "8px 0"
+              }
+          , "& lumi-key-value-list-value":
+              { "display": "flex"
+              , "flexFlow": "row"
+              , "alignItems": "center"
+              , "flex": "7 7 0%"
+              , "flexWrap": "wrap"
+              }
+          , "@media (max-width: 860px)":
+              { "width": "100%"
+              , "& lumi-key-value-list-label":
+                  { "flex": "initial"
+                  }
+              , "& lumi-key-value-list-value":
+                  { "flex": "initial"
+                  }
+              }
+          }
       }
   }