Adds initial version of custom helper

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

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 "