mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-22 05:01:40 +03:00
e2907d9ba2
* Use elm-css 16.0.0 * 💀 Ui.Checkbox V1 and V2 * s/Css.Foreign/Css.Global/g * 💀 Nri.Ui.Styles.V1 * 💀 BannerAlert.V1 * 💀 Modal.V1 * 💀 Dropdown.V1 * 💀 Select.V1 and V2 * 💀 Alert.V1 * 💀 Button.V1 and V2 * 💀 Divider.V1 * 💀 Icon.V1 and V2 * 💀 Outline.V1 * 💀 SegmentedControl.V1-V5 * 💀 TextArea.V1 and V2 * 💀 TextInput.V1 * delete the rest of the modules * actually more deletions * InputStyles v1 is unused * move to src-0.18 * do the 0.19 upgrade * select options are addressable by index * elm-css 16 * update scripts * elm-format * Update V2.elm * put the nbsp back * elm-format validation for both versions
115 lines
2.2 KiB
Elm
115 lines
2.2 KiB
Elm
module Nri.Ui.BannerAlert.V2 exposing
|
|
( error
|
|
, neutral
|
|
, success
|
|
)
|
|
|
|
{-|
|
|
|
|
@docs error
|
|
@docs neutral
|
|
@docs success
|
|
|
|
-}
|
|
|
|
import Accessibility.Styled as Accessibility
|
|
import Css exposing (..)
|
|
import Css.Global exposing (Snippet, children, descendants, everything, selector)
|
|
import Html.Styled as Html exposing (Html)
|
|
import Nri.Ui.Colors.V1
|
|
import Nri.Ui.Fonts.V1
|
|
|
|
|
|
{-| A banner to show error alerts
|
|
-}
|
|
error : String -> Html msg
|
|
error =
|
|
banner errorStyles
|
|
|
|
|
|
{-| A banner to show neutral alerts
|
|
-}
|
|
neutral : String -> Html msg
|
|
neutral =
|
|
banner neutralStyles
|
|
|
|
|
|
{-| A banner for success alerts
|
|
-}
|
|
success : String -> Html msg
|
|
success =
|
|
banner successStyles
|
|
|
|
|
|
banner : Css.Style -> String -> Html msg
|
|
banner bannerType alertMessage =
|
|
Html.styled Accessibility.div
|
|
[ bannerStyles, bannerType ]
|
|
[]
|
|
[ notification alertMessage ]
|
|
|
|
|
|
notification : String -> Html msg
|
|
notification message =
|
|
Html.styled Html.div [ alertMessageStyles ] [] [ Accessibility.text message ]
|
|
|
|
|
|
type CssClasses
|
|
= AlertMessage
|
|
| Banner
|
|
| Error
|
|
| Neutral
|
|
| Success
|
|
|
|
|
|
alertMessageStyles : Style
|
|
alertMessageStyles =
|
|
batch
|
|
[ 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
|
|
]
|
|
|
|
|
|
bannerStyles : Style
|
|
bannerStyles =
|
|
batch
|
|
[ 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)
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
errorStyles : Style
|
|
errorStyles =
|
|
batch
|
|
[ Css.backgroundColor Nri.Ui.Colors.V1.purpleLight
|
|
, Css.color Nri.Ui.Colors.V1.purpleDark
|
|
]
|
|
|
|
|
|
neutralStyles : Style
|
|
neutralStyles =
|
|
batch
|
|
[ Css.backgroundColor Nri.Ui.Colors.V1.frost
|
|
, Css.color Nri.Ui.Colors.V1.navy
|
|
]
|
|
|
|
|
|
successStyles : Style
|
|
successStyles =
|
|
batch
|
|
[ Css.backgroundColor Nri.Ui.Colors.V1.greenLightest
|
|
, Css.color Nri.Ui.Colors.V1.greenDarkest
|
|
]
|