🎨 have banner take a single configuration record rather than a config and two args

This commit is contained in:
Tessa Kelly 2020-03-17 11:40:14 -07:00
parent c37fde752a
commit b832b092fd

View File

@ -31,7 +31,7 @@ import Nri.Ui.UiIcon.V1 as UiIcon
{-| A banner to show error alerts {-| A banner to show error alerts
-} -}
alert : List (Html msg) -> Maybe msg -> Html msg alert : List (Html msg) -> Maybe msg -> Html msg
alert = alert content maybeDismiss =
banner banner
{ backgroundColor = Colors.sunshine { backgroundColor = Colors.sunshine
, color = Colors.navy , color = Colors.navy
@ -41,13 +41,15 @@ alert =
, height = Css.px 25 , height = Css.px 25
, asset = UiIcon.attention , asset = UiIcon.attention
} }
, content = content
, dismiss = maybeDismiss
} }
{-| A banner to show error alerts {-| A banner to show error alerts
-} -}
error : List (Html msg) -> Maybe msg -> Html msg error : List (Html msg) -> Maybe msg -> Html msg
error = error content maybeDismiss =
banner banner
{ backgroundColor = Colors.purpleLight { backgroundColor = Colors.purpleLight
, color = Colors.purpleDark , color = Colors.purpleDark
@ -57,13 +59,15 @@ error =
, height = Css.px 25 , height = Css.px 25
, asset = UiIcon.attention , asset = UiIcon.attention
} }
, content = content
, dismiss = maybeDismiss
} }
{-| A banner to show neutral alerts {-| A banner to show neutral alerts
-} -}
neutral : List (Html msg) -> Maybe msg -> Html msg neutral : List (Html msg) -> Maybe msg -> Html msg
neutral = neutral content maybeDismiss =
banner banner
{ backgroundColor = Colors.frost { backgroundColor = Colors.frost
, color = Colors.navy , color = Colors.navy
@ -77,13 +81,15 @@ neutral =
|> Svg.withWidth (Css.px 34) |> Svg.withWidth (Css.px 34)
|> Svg.withHeight (Css.px 32) |> Svg.withHeight (Css.px 32)
} }
, content = content
, dismiss = maybeDismiss
} }
{-| A banner for success alerts {-| A banner for success alerts
-} -}
success : List (Html msg) -> Maybe msg -> Html msg success : List (Html msg) -> Maybe msg -> Html msg
success = success content maybeDismiss =
banner banner
{ backgroundColor = Colors.greenLightest { backgroundColor = Colors.greenLightest
, color = Colors.greenDarkest , color = Colors.greenDarkest
@ -93,6 +99,8 @@ success =
, height = Css.px 20 , height = Css.px 20
, asset = UiIcon.checkmark , asset = UiIcon.checkmark
} }
, content = content
, dismiss = maybeDismiss
} }
@ -100,14 +108,14 @@ banner :
{ color : Css.Color { color : Css.Color
, backgroundColor : Css.Color , backgroundColor : Css.Color
, icon : Html Never , icon : Html Never
, content : List (Html msg)
, dismiss : Maybe msg
} }
-> List (Html msg)
-> Maybe msg
-> Html msg -> Html msg
banner config bannerContent dismissMsg = banner config =
let let
maybeDismissButton = maybeDismissButton =
case dismissMsg of case config.dismiss of
Nothing -> Nothing ->
Html.text "" Html.text ""
@ -139,7 +147,7 @@ banner config bannerContent dismissMsg =
] ]
] ]
[ Html.map never config.icon [ Html.map never config.icon
, notification bannerContent , notification config.content
] ]
, maybeDismissButton , maybeDismissButton
] ]