A banner to show error alerts
A banner to show neutral alerts
A banner for success alerts
module Nri.Ui.BannerAlert.V1
exposing
( error
, neutral
, styles
, success
)
{-|
@docs error
@docs neutral
@docs styles
@docs success
-}
import Accessibility
import Css
import Css.Elements
import Html exposing (Html)
import Nri.Colors
import Nri.Fonts
import Nri.Ui.Styles.V1
{-| A banner to show error alerts
-}
error : String -> Html msg
error =
banner Error
{-| A banner to show neutral alerts
-}
neutral : String -> Html msg
neutral =
banner Neutral
{-| A banner for success alerts
-}
success : String -> Html msg
success =
banner Success
banner : CssClasses -> String -> Html msg
banner bannerType alertMessage =
Accessibility.div
[ styles.class [ Banner, bannerType ]
]
[ notification alertMessage
]
notification : String -> Html msg
notification message =
styles.div AlertMessage [ Accessibility.text message ]
type CssClasses
= AlertMessage
| Banner
| Error
| Neutral
| Success
{-| -}
styles : Nri.Ui.Styles.V1.Styles Never CssClasses b
styles =
Nri.Ui.Styles.V1.styles "Nri-Ui-BannerAlert-"
[ Css.class AlertMessage
[ Css.fontSize (Css.px 20)
, Css.fontWeight (Css.int 700)
, Css.lineHeight (Css.px 25)
, Css.maxWidth (Css.px 600)
, Nri.Fonts.baseFont
]
, Css.class Banner
[ Css.alignItems Css.center
, Css.displayFlex
, Css.justifyContent Css.center
, Css.padding (Css.px 20)
, Css.width (Css.pct 100)
, Css.children
[ Css.Elements.button
[ Css.position Css.absolute
, Css.right (Css.px 15)
]
]
]
, Css.class Error
[ Css.backgroundColor Nri.Colors.purpleLight
, Css.color Nri.Colors.purpleDark
]
, Css.class Neutral
[ Css.backgroundColor Nri.Colors.frost
, Css.color Nri.Colors.navy
]
, Css.class Success
[ Css.backgroundColor Nri.Colors.greenLightest
, Css.color Nri.Colors.greenDarkest
]
]