diff --git a/src/Nri/Ui/BannerAlert/V6.elm b/src/Nri/Ui/BannerAlert/V6.elm index 9b91cc94..e979ce05 100644 --- a/src/Nri/Ui/BannerAlert/V6.elm +++ b/src/Nri/Ui/BannerAlert/V6.elm @@ -1,13 +1,18 @@ -module Nri.Ui.BannerAlert.V6 exposing (alert, error, neutral, success) +module Nri.Ui.BannerAlert.V6 exposing + ( alert, error, neutral, success + , custom + ) {-| @docs alert, error, neutral, success +@docs custom # Post-release patches - adjusts link styles + - exposes `custom` banner-maker Changes from V5: @@ -32,7 +37,7 @@ import Nri.Ui.UiIcon.V1 as UiIcon -} alert : List (Html msg) -> Maybe msg -> Html msg alert content maybeDismiss = - banner + custom { backgroundColor = Colors.sunshine , color = Colors.navy , icon = @@ -50,7 +55,7 @@ alert content maybeDismiss = -} error : List (Html msg) -> Maybe msg -> Html msg error content maybeDismiss = - banner + custom { backgroundColor = Colors.purpleLight , color = Colors.purpleDark , icon = @@ -68,7 +73,7 @@ error content maybeDismiss = -} neutral : List (Html msg) -> Maybe msg -> Html msg neutral content maybeDismiss = - banner + custom { backgroundColor = Colors.frost , color = Colors.navy , icon = @@ -90,7 +95,7 @@ neutral content maybeDismiss = -} success : List (Html msg) -> Maybe msg -> Html msg success content maybeDismiss = - banner + custom { backgroundColor = Colors.greenLightest , color = Colors.greenDarkest , icon = @@ -104,7 +109,9 @@ success content maybeDismiss = } -banner : +{-| Use to construct a custom banner. Prefer to use a pre-made banner when possible. +-} +custom : { color : Css.Color , backgroundColor : Css.Color , icon : Html Never @@ -112,7 +119,7 @@ banner : , dismiss : Maybe msg } -> Html msg -banner config = +custom config = let maybeDismissButton = case config.dismiss of diff --git a/styleguide-app/Examples/BannerAlert.elm b/styleguide-app/Examples/BannerAlert.elm index 0b8e0d51..cb68d678 100644 --- a/styleguide-app/Examples/BannerAlert.elm +++ b/styleguide-app/Examples/BannerAlert.elm @@ -11,7 +11,9 @@ import Html.Styled exposing (a, div, h3, pre, text) import Html.Styled.Attributes as Attributes import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) import Nri.Ui.BannerAlert.V6 as BannerAlert +import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Pennant.V1 as Pennant import Nri.Ui.Svg.V1 as Svg import Nri.Ui.UiIcon.V1 as UiIcon @@ -42,6 +44,15 @@ example parentMsg state = , h3 [] [ text "neutral" ] , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing , 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 "I'm a custom banner!" ] + , dismiss = Nothing + } + , pre [] [ text "TODO" ] , h3 [] [ text "with multi-line link and icon" ] , BannerAlert.success [ text "Click "