Message.V1 replaces BannerAlert.V6.custom

elm-refactor/v8-to-v9/MessageV1.elm

@@ -72,3 +72,18 @@ upgrade_Nri_Ui_BannerAlert_V6_success content maybeOnDismiss =
             [ Maybe.map Message.onDismiss maybeOnDismiss
             ]
         )
+
+
+upgrade_Nri_Ui_BannerAlert_V6_custom config =
+    Message.banner
+        (Message.Custom
+            { color = config.color
+            , backgroundColor = config.backgroundColor
+            , icon = config.icon
+            }
+        )
+        (Message.Html config.content)
+        (List.filterMap identity
+            [ Maybe.map Message.onDismiss config.dismiss
+            ]
+        )

src/Nri/Ui/Message/V1.elm

@@ -38,6 +38,11 @@ type Theme
     | Warning
     | Tip
     | Success
+    | Custom
+        { color : Color
+        , backgroundColor : Color
+        , icon : Svg
+        }
 
 
 {-| Prefer using the simplest variant that meets your needs.
@@ -75,6 +80,8 @@ contentToHtml content =
     view =
         Message.tiny Message.Tip (Message.Markdown "Don't tip too much, or your waitress will **fall over**!")
 
+NOTE: When using a `Custom` theme, `tiny` ignores the custom `backgroundColor`.
+
 -}
 tiny : Theme -> Content msg -> Html msg
 tiny theme content =
@@ -107,6 +114,11 @@ tiny theme content =
                         )
                     , alertString Colors.greenDarkest content
                     ]
+
+                Custom config ->
+                    [ iconContainer [ color config.color ] (NriSvg.toHtml config.icon)
+                    , alertString config.color content
+                    ]
     in
     Nri.Ui.styled div
         "Nri-Ui-Message-V1--tiny"
@@ -213,6 +225,12 @@ banner theme content attr =
                             }
                     }
 
+                Custom customTheme ->
+                    { backgroundColor = customTheme.backgroundColor
+                    , color = customTheme.color
+                    , icon = NriSvg.toHtml customTheme.icon
+                    }
+
         attributes =
             bannerConfigFromAttributes attr
     in

styleguide-app/Examples/Message.elm

@@ -5,7 +5,6 @@ import Css
 import Example exposing (Example)
 import Html.Styled as Html exposing (Html, a, div, h3, pre, text)
 import Html.Styled.Attributes as Attributes exposing (href, title)
-import Nri.Ui.BannerAlert.V6 as BannerAlert
 import Nri.Ui.Callout.V1 as Callout exposing (callout)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
@@ -53,6 +52,14 @@ example =
             , Message.tiny Message.Warning (Message.Markdown "This is a **warning**")
             , Message.tiny Message.Tip (Message.Markdown "This is a **tip**")
             , Message.tiny Message.Success (Message.Markdown "This is a **success**")
+            , Message.tiny
+                (Message.Custom
+                    { color = Colors.aquaDark
+                    , backgroundColor = Colors.gray92
+                    , icon = Pennant.premiumFlag
+                    }
+                )
+                (Message.Markdown "This is a **custom theme**")
             , Html.hr [] []
             , Heading.h3 [] [ text "Message.somethingWentWrong" ]
             , Message.somethingWentWrong exampleRailsError
@@ -89,13 +96,15 @@ example =
                 []
             , pre [] [ text "BannerAlert.neutral [ text \"This is a neutral message!\" ] Nothing" ]
             , h3 [] [ text "custom" ]
-            , BannerAlert.custom
-                { color = Colors.aquaDark
-                , backgroundColor = Colors.gray92
-                , icon = Pennant.premiumFlag
-                , content = [ text "This is a a custom message!" ]
-                , dismiss = Nothing
-                }
+            , Message.banner
+                (Message.Custom
+                    { color = Colors.aquaDark
+                    , backgroundColor = Colors.gray92
+                    , icon = Pennant.premiumFlag
+                    }
+                )
+                (Message.Html [ text "This is a a custom message!" ])
+                []
             , pre []
                 [ text
                     """BannerAlert.custom