creating v4 for BannerAlert

src/Nri/Ui/BannerAlert/V4.elm

@@ -0,0 +1,156 @@
+module Nri.Ui.BannerAlert.V4 exposing
+    ( error, neutral, success
+    , alert
+    )
+
+{-|
+
+@docs error, neutral, success
+
+-}
+
+import Accessibility.Styled as Html exposing (Html)
+import Css
+import Css.Global
+import Html.Styled.Attributes as Attributes exposing (css)
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Fonts.V1
+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 =
+    banner
+        { backgroundColor = Colors.sunshine
+        , color = Colors.navy
+        , icon =
+            { backgroundColor = Colors.yellow
+            , height = Css.px 25
+            , asset = exclamationMark
+            }
+        }
+
+
+{-| A banner to show error alerts
+-}
+error : String -> Html msg
+error =
+    banner
+        { backgroundColor = Colors.purpleLight
+        , color = Colors.purpleDark
+        , icon =
+            { backgroundColor = Colors.purple
+            , height = Css.px 25
+            , asset = exclamationMark
+            }
+        }
+
+
+{-| A banner to show neutral alerts
+-}
+neutral : String -> Html msg
+neutral =
+    banner
+        { backgroundColor = Colors.frost
+        , color = Colors.navy
+        , icon =
+            { backgroundColor = Colors.navy
+            , height = Css.px 32
+            , asset = bulb
+            }
+        }
+
+
+{-| A banner for success alerts
+-}
+success : String -> Html msg
+success =
+    banner
+        { backgroundColor = Colors.greenLightest
+        , color = Colors.greenDarkest
+        , icon =
+            { backgroundColor = Colors.green
+            , height = Css.px 20
+            , asset = checkmark
+            }
+        }
+
+
+type alias Config =
+    { color : Css.Color
+    , backgroundColor : Css.Color
+    , icon : IconConfig
+    }
+
+
+banner : Config -> String -> Html msg
+banner config alertMessage =
+    Html.div
+        [ css
+            [ Css.alignItems Css.center
+            , Css.displayFlex
+            , Css.justifyContent Css.center
+            , Css.padding (Css.px 20)
+            , Css.width (Css.pct 100)
+            , Css.Global.children
+                [ Css.Global.button
+                    [ Css.position Css.absolute
+                    , Css.right (Css.px 15)
+                    ]
+                ]
+            , Css.backgroundColor config.backgroundColor
+            , Css.color config.color
+            ]
+        ]
+        [ icon config.icon
+        , notification alertMessage
+        ]
+
+
+type alias IconConfig =
+    { backgroundColor : Css.Color
+    , height : Css.Px
+    , asset : Svg
+    }
+
+
+icon : IconConfig -> Html msg
+icon config =
+    Html.div
+        [ css
+            [ Css.boxSizing Css.borderBox
+            , Css.borderRadius (Css.pct 50)
+            , Css.color Colors.white
+            , Css.displayFlex
+            , Css.alignItems Css.center
+            , Css.justifyContent Css.center
+            , Css.width (Css.px 50)
+            , Css.height (Css.px 50)
+            , Css.marginRight (Css.px 20)
+            , Css.padding (Css.px 8)
+            , Css.flexShrink (Css.num 0)
+            , Css.backgroundColor config.backgroundColor
+            ]
+        ]
+        [ Html.div
+            [ css [ Css.height config.height ]
+            ]
+            [ NriSvg.toHtml config.asset ]
+        ]
+
+
+notification : String -> Html msg
+notification message =
+    Html.div
+        [ css
+            [ Css.fontSize (Css.px 20)
+            , Css.fontWeight (Css.int 700)
+            , Css.lineHeight (Css.px 25)
+            , Css.maxWidth (Css.px 600)
+            , Nri.Ui.Fonts.V1.baseFont
+            ]
+        ]
+        [ Html.text message ]

styleguide-app/Examples/BannerAlert.elm

@@ -8,7 +8,7 @@ module Examples.BannerAlert exposing (example)
 
 import Html.Styled exposing (h3, text)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
-import Nri.Ui.BannerAlert.V3 as BannerAlert
+import Nri.Ui.BannerAlert.V4 as BannerAlert
 
 
 example : ModuleExample msg
@@ -16,7 +16,9 @@ example =
     { name = "Nri.Ui.BannerAlert.V3"
     , category = Messaging
     , content =
-        [ h3 [] [ text "error" ]
+        [ h3 [] [ text "alert" ]
+        , BannerAlert.alert "This is an alert message!"
+        , h3 [] [ text "error" ]
         , BannerAlert.error "This is an error message!"
         , h3 [] [ text "neutral" ]
         , BannerAlert.neutral "This is a neutral message!"