[#200] Image, cover not contain (#201)

* object-fit: cover; and export avatars sizes
* update default placeholder; and examples

Author: kimispencer

docs/Examples2/Image.example.purs

@@ -14,19 +14,19 @@ docs :: JSX
 docs =
   let flexo = "https://s3.amazonaws.com/lumi-blog/avatars/_x600/flexo.jpg"
   in Array.intercalate (vspace S16)
-    [ h4_ "Image default (will respect image's aspect ratio)"
+    [ h4_ "Image default (will respect image's original aspect ratio & dimensions)"
     , example
         $ Image.image
-        $$$ "http://via.placeholder.com/640x360"
-    , h4_ "Image + resize { width: 120px, height: 40px }, scales image to respect it's aspect ratio"
+        $$$ flexo
+    , h4_ "Image + resize { width: 120px, height: 40px }, the image will fill the height and width of its parent (object-fit: cover), maintaining its aspect ratio but cropping the image"
     , example
         $ Image.image
         $ Image.resize { width: 120, height: 40 }
-        $$$ "http://via.placeholder.com/360x640"
+        $$$ flexo
     , h4_ "Thumbnail default (will always have a square aspect ratio)"
     , example
         $ Image.thumbnail
-        $$$ "http://via.placeholder.com/360x640"
+        $$$ flexo
     , h4_ "Thumbnail + resize 400px"
     , example
         $ Image.thumbnail
@@ -52,16 +52,25 @@ docs =
         $ Image.thumbnail
         $ Image.extraLarge
         $$$ flexo
-    , h4_ "Thumbnail + round"
+    , h4_ "Thumbnail + avatar (small)"
     , example
         $ Image.thumbnail
-        $ Image.round
-        $ Image.extraLarge
+        $ Image.smallAvatar
+        $$$ flexo
+    , h4_ "Thumbnail + avatar (medium)"
+    , example
+        $ Image.thumbnail
+        $ Image.mediumAvatar
+        $$$ flexo
+    , h4_ "Thumbnail + avatar (large)"
+    , example
+        $ Image.thumbnail
+        $ Image.largeAvatar
         $$$ flexo
-    , h4_ "Placeholders (can be overriden)"
+    , h4_ "Default placeholder (can be overriden)"
     , example
         $ Image.image
-        $ Image.resize { width: 900, height: 50 }
+        $ Image.resize { width: 320, height: 240 }
         $$$ ""
     , example
         $ Image.thumbnail

src/Lumi/Components2/Image.purs

@@ -5,11 +5,16 @@ module Lumi.Components2.Image
   , medium
   , large
   , extraLarge
+  , smallAvatar
+  , mediumAvatar
+  , largeAvatar
   , resize
   , resizeSquare
   , round
-  , Image
-  , Thumbnail
+  , ImageProps
+  , ThumbnailProps
+  , Image(..)
+  , Thumbnail(..)
   ) where
 
 import Prelude
@@ -27,7 +32,7 @@ import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, ($$$))
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Svg (placeholderSvg)
 import Lumi.Components2.Box as Box
-import Lumi.Styles (Style, StyleModifier, style, style_, toCSS)
+import Lumi.Styles (Style, StyleModifier, color, style, style_, toCSS)
 import Lumi.Styles.Box (FlexAlign(..))
 import Lumi.Styles.Box as Styles.Box
 import Lumi.Styles.Slat hiding (_interactive,slat) as Styles.Slat
@@ -82,7 +87,7 @@ image =
             { ref: containerRef
             , children:
                 [ if String.null props.content
-                    then fromMaybe placeholderSvg props.placeholder
+                    then fromMaybe placeholder props.placeholder
                     else
                       Box.column
                       $ Styles.Box._flex
@@ -103,9 +108,8 @@ image =
                             { src: props.content
                             , className: ""
                             , css: E.css
-                                { maxWidth: E.percent 100.0
-                                , maxHeight: E.percent 100.0
-                                , objectFit: E.str "contain"
+                                { width: E.percent 100.0
+                                , objectFit: E.str "cover"
                                 , display: E.str $ if loaded then "block" else "none"
                                 }
                             , onLoad: handler_ $ setLoaded true
@@ -261,3 +265,16 @@ largeAvatar =
 mkRound :: Style
 mkRound = E.css { borderRadius: E.percent 50.0 }
 
+placeholder :: JSX
+placeholder =
+  Box.column
+  $ Styles.Box._align Center
+  $ Styles.Box._justify Center
+  $ Styles.Box._flex
+  $ style do
+    \(LumiTheme { colors }) -> (E.css { backgroundColor: color colors.black6, width: E.percent 100.0 })
+  $$$
+    [ Box.box
+      $ style_ (E.css { width: E.percent 50.0 })
+      $$$ [ placeholderSvg ]
+    ]