Slat interactive background-color (#130)

* SlatInteractionType

* primary4

* remove SlatInteractionType and add _interactiveBackground

* cleanup imports

Author: kimispencer

docs/Examples2/Slat.example.purs

@@ -63,6 +63,18 @@ docs =
               , href: Nothing
               }
           $ _ { content = exampleSlatContent }
+      , h2_ "square (default), spaced list, interactive (background color), min-width content"
+      , example
+          $ fragment
+          $ replicate 3
+          $ lumiElement Slat.slat
+          $ Slat._listSpaced
+          $ Slat._interactiveBackground
+              { onClick: window >>= alert "click!"
+              , tabIndex: 1
+              , href: Nothing
+              }
+          $ _ { content = exampleSlatContent }
       , h2_ "round, spaced list, non-interactive, min-width 500px"
       , example
           $ fragment
@@ -86,6 +98,20 @@ docs =
           $ Slat._listCompact
           $ slatExWidth
           $ _ { content = exampleSlatContent }
+      , h2_ "top/bottom, compact list, interactive (background color), min-width 500px"
+      , example
+          $ fragment
+          $ replicate 9
+          $ lumiElement Slat.slat
+          $ Slat._interactiveBackground
+              { onClick: window >>= alert "click!"
+              , tabIndex: 1
+              , href: Nothing
+              }
+          $ Slat._topBottom
+          $ Slat._listCompact
+          $ slatExWidth
+          $ _ { content = exampleSlatContent }
       ]
 
 slatExWidth :: forall props. PropsModifier props

src/Lumi/Components2/Slat.purs

@@ -3,6 +3,7 @@ module Lumi.Components2.Slat
   , SlatInteraction
   , slat
   , _interactive
+  , _interactiveBackground
   , module Styles.Slat
   ) where
 
@@ -12,10 +13,10 @@ import Data.Newtype (un)
 import Effect (Effect)
 import Effect.Unsafe (unsafePerformEffect)
 import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, propsModifier)
-import Lumi.Styles (styleModifier_, toCSS)
+import Lumi.Styles (styleModifier, styleModifier_, toCSS)
 import Lumi.Styles.Slat (_interactive, slat) as Styles.Slat.Hidden
 import Lumi.Styles.Slat hiding (_interactive, slat) as Styles.Slat
-import Lumi.Styles.Theme (useTheme)
+import Lumi.Styles.Theme (LumiTheme(..), useTheme)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (capture_)
 import React.Basic.Emotion as E
@@ -83,3 +84,19 @@ _interactive interaction =
     _
       { interaction = Just interaction
       }
+
+_interactiveBackground :: SlatInteraction -> PropsModifier SlatProps
+_interactiveBackground interaction =
+  propsModifier
+    _
+      { interaction = Just interaction
+      }
+    >>> styleModifier \(LumiTheme theme) ->
+        E.css
+          { "&:hover":
+            E.nested
+              $ E.css
+                  { backgroundColor: E.color theme.colors.primary4
+                  , borderColor: E.color theme.colors.black4
+                  }
+          }