From fdf69538ce0bdc244d3fde86ffafe797179734f0 Mon Sep 17 00:00:00 2001 From: Aaron VonderHaar Date: Mon, 27 Apr 2020 16:49:45 -0700 Subject: [PATCH] Message.V1 replaces BannerAlert.V6.custom --- elm-refactor/v8-to-v9/MessageV1.elm | 15 +++++++++++++++ src/Nri/Ui/Message/V1.elm | 18 ++++++++++++++++++ styleguide-app/Examples/Message.elm | 25 +++++++++++++++++-------- 3 files changed, 50 insertions(+), 8 deletions(-) diff --git a/elm-refactor/v8-to-v9/MessageV1.elm b/elm-refactor/v8-to-v9/MessageV1.elm index 34231487..eb0fd3b2 100644 --- a/elm-refactor/v8-to-v9/MessageV1.elm +++ b/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 + ] + ) diff --git a/src/Nri/Ui/Message/V1.elm b/src/Nri/Ui/Message/V1.elm index 38667493..a6b2fd67 100644 --- a/src/Nri/Ui/Message/V1.elm +++ b/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 diff --git a/styleguide-app/Examples/Message.elm b/styleguide-app/Examples/Message.elm index 77f1a4a3..ed721304 100644 --- a/styleguide-app/Examples/Message.elm +++ b/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