Use the 'spritesheet' in banner alert

src/Nri/Ui/BannerAlert/V3.elm

@@ -10,53 +10,53 @@ import Accessibility.Styled as Html exposing (Html)
 import Css
 import Css.Global
 import Html.Styled.Attributes as Attributes exposing (css)
-import Nri.Ui.AssetPath as AssetPath exposing (Asset(..))
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1
-import Nri.Ui.Icon.V4 as Icon exposing (IconType)
+import Nri.Ui.SpriteSheet exposing (checkmark, exclamationMark, tip)
+import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
 
 
 {-| A banner to show error alerts
 -}
-error : { a | exclamationPoint_svg : Asset } -> String -> Html msg
-error assets =
+error : String -> Html msg
+error =
     banner
         { backgroundColor = Colors.purpleLight
         , color = Colors.purpleDark
         , icon =
             { backgroundColor = Colors.purple
             , height = Css.px 25
-            , asset = assets.exclamationPoint_svg
+            , asset = exclamationMark
             }
         }
 
 
 {-| A banner to show neutral alerts
 -}
-neutral : { a | tip_svg : Asset } -> String -> Html msg
-neutral assets =
+neutral : String -> Html msg
+neutral =
     banner
         { backgroundColor = Colors.frost
         , color = Colors.navy
         , icon =
             { backgroundColor = Colors.frost
             , height = Css.px 50
-            , asset = assets.tip_svg
+            , asset = tip
             }
         }
 
 
 {-| A banner for success alerts
 -}
-success : { a | checkWhite_svg : Asset } -> String -> Html msg
-success assets =
+success : String -> Html msg
+success =
     banner
         { backgroundColor = Colors.greenLightest
         , color = Colors.greenDarkest
         , icon =
             { backgroundColor = Colors.green
             , height = Css.px 20
-            , asset = assets.checkWhite_svg
+            , asset = checkmark
             }
         }
 
@@ -95,7 +95,7 @@ banner config alertMessage =
 type alias IconConfig =
     { backgroundColor : Css.Color
     , height : Css.Px
-    , asset : Asset
+    , asset : Svg
     }
 
 
@@ -114,10 +114,10 @@ icon config =
             , Css.backgroundColor config.backgroundColor
             ]
         ]
-        [ Html.decorativeImg
+        [ Html.div
             [ css [ Css.height config.height ]
-            , Attributes.src (AssetPath.url config.asset)
             ]
+            [ NriSvg.toHtml config.asset ]
         ]
 
 

src/Nri/Ui/SpriteSheet.elm

@@ -16,7 +16,7 @@ import Svg.Attributes exposing (..)
 exclamationMark : NriSvg.Svg
 exclamationMark =
     Svg.svg
-        [ viewBox "0 0 4 12" ]
+        [ viewBox "0 0 4 12", width "100%", height "100%" ]
         [ Svg.path
             [ d "M3.234 10.575a1.363 1.363 0 1 1-2.726 0 1.363 1.363 0 0 1 2.726 0zm.648-8.398a1.978 1.978 0 0 1-.007.047l-.834 5.294c-.079.53-.542.926-1.085.926h-.013a1.096 1.096 0 0 1-1.085-.926L.024 2.224A1.93 1.93 0 0 1 1.93 0h.04a1.94 1.94 0 0 1 1.912 1.663v.514z"
             , fill "#FFF"
@@ -37,14 +37,11 @@ checkmark =
         , y "0px"
         , viewBox "0 0 21.7 17.1"
         , Svg.Attributes.style "enable-background:new 0 0 21.7 17.1;"
+        , width "100%"
+        , height "100%"
         ]
         [ Svg.style [] [ Svg.text " .st0{fill:#FFFFFF;} " ]
-        , Svg.path
-            [ id "check-white"
-            , class "st0"
-            , d "M7.6,17.1c-0.5,0-1-0.2-1.4-0.6l-5.6-5.4c-0.8-0.8-0.8-2-0.1-2.8c0.8-0.8,2-0.8,2.8-0.1l4.1,4 L18.2,0.7c0.8-0.8,2-0.9,2.8-0.1s0.9,2,0.1,2.8l-12,13C8.7,16.9,8.2,17.1,7.6,17.1C7.7,17.1,7.6,17.1,7.6,17.1"
-            ]
-            []
+        , Svg.path [ id "check-white", class "st0", d "M7.6,17.1c-0.5,0-1-0.2-1.4-0.6l-5.6-5.4c-0.8-0.8-0.8-2-0.1-2.8c0.8-0.8,2-0.8,2.8-0.1l4.1,4 L18.2,0.7c0.8-0.8,2-0.9,2.8-0.1s0.9,2,0.1,2.8l-12,13C8.7,16.9,8.2,17.1,7.6,17.1C7.7,17.1,7.6,17.1,7.6,17.1" ] []
         ]
         |> fromUnstyled
         |> NriSvg.fromHtml
@@ -53,7 +50,7 @@ checkmark =
 {-| -}
 tip : NriSvg.Svg
 tip =
-    Svg.svg [ id "Layer_1", viewBox "0 0 45 45" ]
+    Svg.svg [ id "Layer_1", viewBox "0 0 45 45", width "100%", height "100%" ]
         [ defs []
             [ Svg.style [] [ Svg.text ".cls-1,.cls-2{fill:none;}.cls-2{clip-rule:evenodd;}.cls-3{clip-path:url(#clip-path);}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#00488A;}.cls-6{clip-path:url(#clip-path-3);}.cls-7{fill:#fff;}.cls-8{clip-path:url(#clip-path-5);}.cls-9{clip-path:url(#clip-path-7);}.cls-10{clip-path:url(#clip-path-9);}.cls-11{clip-path:url(#clip-path-11);}.cls-12{clip-path:url(#clip-path-13);}.cls-13{clip-path:url(#clip-path-15);}.cls-14{clip-path:url(#clip-path-17);}.cls-15{clip-path:url(#clip-path-19);}.cls-16{clip-path:url(#clip-path-21);}.cls-17{clip-path:url(#clip-path-23);}.cls-18{clip-path:url(#clip-path-25);}.cls-19{clip-path:url(#clip-path-27);}.cls-20{clip-path:url(#clip-path-28);}.cls-21{clip-path:url(#clip-path-29);}.cls-22{clip-path:url(#clip-path-30);}.cls-23{clip-path:url(#clip-path-31);}.cls-24{clip-path:url(#clip-path-32);}.cls-25{clip-path:url(#clip-path-33);}.cls-26{clip-path:url(#clip-path-34);}.cls-27{clip-path:url(#clip-path-35);}" ]
             , Svg.clipPath [ id "clip-path" ] [ circle [ class "cls-1", cx "22.5", cy "22.5", r "22.5" ] [] ]

styleguide-app/Examples/BannerAlert.elm

@@ -6,7 +6,6 @@ module Examples.BannerAlert exposing (example)
 
 -}
 
-import Assets exposing (Assets, assets)
 import Html.Styled exposing (h3, text)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.BannerAlert.V3 as BannerAlert
@@ -18,11 +17,11 @@ example =
     , category = Messaging
     , content =
         [ h3 [] [ text "error" ]
-        , BannerAlert.error assets "This is an error message!"
+        , BannerAlert.error "This is an error message!"
         , h3 [] [ text "neutral" ]
-        , BannerAlert.neutral assets "This is a neutral message!"
+        , BannerAlert.neutral "This is a neutral message!"
         , h3 [] [ text "success" ]
-        , BannerAlert.success assets
+        , BannerAlert.success
             """This is a success message!
             Let's see what happens if there is a very long message!
             Wow, how successful! You're the biggest success I've ever seen!