Adding V4 BannerAlert example

elm.json

@@ -11,6 +11,7 @@
         "Nri.Ui.AssetPath",
         "Nri.Ui.BannerAlert.V2",
         "Nri.Ui.BannerAlert.V3",
+        "Nri.Ui.BannerAlert.V4",
         "Nri.Ui.ClickableText.V1",
         "Nri.Ui.ClickableText.V2",
         "Nri.Ui.Button.V3",
@@ -81,4 +82,4 @@
     "test-dependencies": {
         "elm-explorations/test": "1.2.0 <= v < 2.0.0"
     }
-}
+}

src/Nri/Ui/BannerAlert/V4.elm

@@ -13,15 +13,18 @@ import Accessibility.Styled as Html exposing (Html)
 import Css
 import Css.Global
 import Html.Styled.Attributes as Attributes exposing (css)
+import Nri.Ui
+import Nri.Ui.AssetPath exposing (Asset(..))
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1
+import Nri.Ui.Icon.V4 as Icon
 import Nri.Ui.SpriteSheet exposing (bulb, checkmark, exclamationMark)
 import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
 
 
 {-| A banner to show error alerts
 -}
-alert : String -> Html msg
+alert : String -> Maybe msg -> Html msg
 alert =
     banner
         { backgroundColor = Colors.sunshine
@@ -36,7 +39,7 @@ alert =
 
 {-| A banner to show error alerts
 -}
-error : String -> Html msg
+error : String -> Maybe msg -> Html msg
 error =
     banner
         { backgroundColor = Colors.purpleLight
@@ -51,7 +54,7 @@ error =
 
 {-| A banner to show neutral alerts
 -}
-neutral : String -> Html msg
+neutral : String -> Maybe msg -> Html msg
 neutral =
     banner
         { backgroundColor = Colors.frost
@@ -66,7 +69,7 @@ neutral =
 
 {-| A banner for success alerts
 -}
-success : String -> Html msg
+success : String -> Maybe msg -> Html msg
 success =
     banner
         { backgroundColor = Colors.greenLightest
@@ -86,8 +89,17 @@ type alias Config =
     }
 
 
-banner : Config -> String -> Html msg
-banner config alertMessage =
+banner : Config -> String -> Maybe msg -> Html msg
+banner config alertMessage dismissMsg =
+    let
+        maybeDismissButton =
+            case dismissMsg of
+                Nothing ->
+                    Html.text ""
+
+                Just msg ->
+                    dismissButton (Icon.xSvg { x = "xSvg" }) msg
+    in
     Html.div
         [ css
             [ Css.alignItems Css.center
@@ -107,6 +119,27 @@ banner config alertMessage =
         ]
         [ icon config.icon
         , notification alertMessage
+        , maybeDismissButton
+        ]
+
+
+dismissButton : Icon.IconType -> msg -> Html msg
+dismissButton xIcon msg =
+    Nri.Ui.styled Html.div
+        "dismiss-button-container"
+        [ Css.position Css.absolute
+        , Css.top Css.zero
+        , Css.right Css.zero
+        , Css.padding (Css.px 25)
+        ]
+        []
+        [ Icon.button
+            { alt = "Dismiss banner"
+            , msg = msg
+            , icon = xIcon
+            , disabled = False
+            , size = Icon.Medium
+            }
         ]
 
 

styleguide-app/Examples/BannerAlert.elm

@@ -1,8 +1,8 @@
-module Examples.BannerAlert exposing (example)
+module Examples.BannerAlert exposing (example, State, init, Msg, update)
 
 {-|
 
-@docs example
+@docs example, State, init, Msg, update
 
 -}
 
@@ -11,17 +11,17 @@ import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.BannerAlert.V4 as BannerAlert
 
 
-example : ModuleExample msg
-example =
-    { name = "Nri.Ui.BannerAlert.V3"
+example : (Msg -> msg) -> State -> ModuleExample msg
+example parentMsg state =
+    { name = "Nri.Ui.BannerAlert.V4"
     , category = Messaging
     , content =
         [ h3 [] [ text "alert" ]
-        , BannerAlert.alert "This is an alert message!"
+        , BannerAlert.alert "This is an alert message!" (Just NoOp)
         , h3 [] [ text "error" ]
-        , BannerAlert.error "This is an error message!"
+        , BannerAlert.error "This is an error message!" Nothing
         , h3 [] [ text "neutral" ]
-        , BannerAlert.neutral "This is a neutral message!"
+        , BannerAlert.neutral "This is a neutral message!" Nothing
         , h3 [] [ text "success" ]
         , BannerAlert.success
             """This is a success message!
@@ -29,5 +29,27 @@ example =
             Wow, how successful! You're the biggest success I've ever seen!
             You should feel great about yourself! Give yourself a very big round of applause!
             """
+            Nothing
         ]
+            |> List.map (Html.Styled.map parentMsg)
     }
+
+
+type alias State =
+    {}
+
+
+init : State
+init =
+    {}
+
+
+type Msg
+    = NoOp
+
+
+update : Msg -> State -> State
+update msg state =
+    case msg of
+        NoOp ->
+            state

styleguide-app/NriModules.elm

@@ -31,6 +31,7 @@ import Url exposing (Url)
 
 type alias ModuleStates =
     { buttonExampleState : Examples.Button.State
+    , bannerAlertExampleState : Examples.BannerAlert.State
     , clickableTextExampleState : Examples.ClickableText.State
     , checkboxExampleState : Examples.Checkbox.State
     , dropdownState : Examples.Dropdown.State Examples.Dropdown.Value
@@ -50,6 +51,7 @@ type alias ModuleStates =
 init : ModuleStates
 init =
     { buttonExampleState = Examples.Button.init assets
+    , bannerAlertExampleState = Examples.BannerAlert.init
     , clickableTextExampleState = Examples.ClickableText.init assets
     , checkboxExampleState = Examples.Checkbox.init
     , dropdownState = Examples.Dropdown.init
@@ -68,6 +70,7 @@ init =
 
 type Msg
     = ButtonExampleMsg Examples.Button.Msg
+    | BannerAlertExampleMsg Examples.BannerAlert.Msg
     | ClickableTextExampleMsg Examples.ClickableText.Msg
     | CheckboxExampleMsg Examples.Checkbox.Msg
     | DropdownMsg Examples.Dropdown.Msg
@@ -97,6 +100,14 @@ update outsideMsg moduleStates =
             , Cmd.map ButtonExampleMsg cmd
             )
 
+        BannerAlertExampleMsg msg ->
+            ( { moduleStates
+                | bannerAlertExampleState =
+                    Examples.BannerAlert.update msg moduleStates.bannerAlertExampleState
+              }
+            , Cmd.none
+            )
+
         ClickableTextExampleMsg msg ->
             let
                 ( clickableTextExampleState, cmd ) =
@@ -240,7 +251,7 @@ container width children =
 nriThemedModules : ModuleStates -> List (ModuleExample Msg)
 nriThemedModules model =
     [ Examples.Alert.example
-    , Examples.BannerAlert.example
+    , Examples.BannerAlert.example BannerAlertExampleMsg model.bannerAlertExampleState
     , Examples.Button.example (exampleMessages ButtonExampleMsg) model.buttonExampleState
     , Examples.ClickableText.example (exampleMessages ClickableTextExampleMsg) model.clickableTextExampleState
     , Examples.Checkbox.example CheckboxExampleMsg model.checkboxExampleState