Image object-fit (#206)

* imgStyle props
* contain vs. cover style modifiers

Author: kimispencer

docs/Examples2/Image.example.purs

@@ -12,21 +12,28 @@ import React.Basic.Classic (JSX)
 
 docs :: JSX
 docs =
-  let flexo = "https://s3.amazonaws.com/lumi-blog/avatars/_x600/flexo.jpg"
+  let flexo = "https://i.picsum.photos/id/985/1000/300.jpg?hmac=t_lmj43iuzwGqZaRMY1ee9udE_pCzfYLgCD49YrCPjw"
+        -- "https://s3.amazonaws.com/lumi-blog/avatars/_x600/flexo.jpg"
   in Array.intercalate (vspace S16)
     [ h4_ "Image default (will respect image's original aspect ratio & dimensions)"
     , example
         $ Image.image
         $$$ 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"
+    , h4_ "Image + resize { width: 40px, height: 120px }, 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 }
+        $ Image.resize { width: 40, height: 120 }
         $$$ flexo
-    , h4_ "Thumbnail default (will always have a square aspect ratio)"
+    , h4_ "Thumbnail default (will always have a square aspect ratio); and defaults to object-fit: cover"
     , example
         $ Image.thumbnail
         $$$ flexo
+    , h4_ "Thumbnail default (will always have a square aspect ratio); but can be override with object-fit: contain"
+    , example
+        $ Image.thumbnail
+        $ Image.contain
+        $ _ { content = flexo
+            }
     , h4_ "Thumbnail + resize 400px"
     , example
         $ Image.thumbnail

src/Lumi/Components2/Image.purs

@@ -11,6 +11,8 @@ module Lumi.Components2.Image
   , resize
   , resizeSquare
   , round
+  , cover
+  , contain
   , ImageProps
   , ThumbnailProps
   , Image(..)
@@ -28,7 +30,7 @@ import Data.Traversable (traverse)
 import Data.Tuple.Nested ((/\))
 import Effect.Timer (clearTimeout, setTimeout)
 import Effect.Unsafe (unsafePerformEffect)
-import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, ($$$))
+import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, propsModifier, ($$$))
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Svg (placeholderSvg)
 import Lumi.Components2.Box as Box
@@ -50,6 +52,7 @@ type ImageProps
   = ( component :: Image
     , content :: String
     , placeholder :: Maybe JSX
+    , imgStyle :: Style
     )
 
 -- | An image has no size restrictions
@@ -113,6 +116,7 @@ image =
                                 , objectFit: E.str "cover"
                                 , display: E.str $ if loaded then "block" else "none"
                                 }
+                                <> props.imgStyle
                             , onLoad: handler_ $ setLoaded true
                             , onError: handler_ $ setLoaded true
                             }
@@ -126,6 +130,7 @@ image =
         { component: Image
         , content: ""
         , placeholder: Nothing
+        , imgStyle: E.css {}
         }
 
       defaultImageStyle :: LumiTheme -> Style
@@ -141,13 +146,13 @@ image =
           , borderColor: E.color colors.black4
           }
 
-
 data Thumbnail = Thumbnail
 
 type ThumbnailProps
   = ( component :: Thumbnail
     , content :: String
     , placeholder :: Maybe JSX
+    , imgStyle :: Style
     )
 
 -- | A thumbnail can support size restrictions
@@ -161,13 +166,15 @@ thumbnail =
         $ _ { content = props.content
             , placeholder = props.placeholder
             , css = toCSS defaultSize <> props.css
+            , imgStyle = props.imgStyle
             }
 
       where
         defaults =
           { component: Thumbnail
           , content: ""
           , placeholder: Nothing
+          , imgStyle: E.css {}
           }
 
 -- | The `c` type parameter lets us constrain the type of component to which
@@ -187,6 +194,18 @@ resize props =
 round :: ImageModifier Thumbnail
 round = style_ mkRound
 
+cover :: PropsModifier ThumbnailProps
+cover =
+  propsModifier  \props -> props
+    { imgStyle = props.imgStyle <> E.css { objectFit: E.str "cover" }
+    }
+
+contain :: PropsModifier ThumbnailProps
+contain =
+  propsModifier  \props -> props
+    { imgStyle = props.imgStyle <> E.css { objectFit: E.str "contain" }
+    }
+
 resizeSquare :: Int -> ImageModifier Thumbnail
 resizeSquare size =
   style \(LumiTheme theme) ->