mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-16 18:20:31 +03:00
112 lines
3.1 KiB
Elm
112 lines
3.1 KiB
Elm
module Examples.BannerAlert exposing (example, State, init, Msg, update)
|
|
|
|
{-|
|
|
|
|
@docs example, State, init, Msg, update
|
|
|
|
-}
|
|
|
|
import Css
|
|
import Html.Styled exposing (div, h3, text)
|
|
import Html.Styled.Attributes as Attributes
|
|
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
|
import Nri.Ui.BannerAlert.V6 as BannerAlert
|
|
import Nri.Ui.Fonts.V1 as Fonts
|
|
import Nri.Ui.Svg.V1 as Svg
|
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
|
|
|
|
|
example : (Msg -> msg) -> State -> ModuleExample msg
|
|
example parentMsg state =
|
|
{ name = "Nri.Ui.BannerAlert.V6"
|
|
, category = Messaging
|
|
, content =
|
|
[ if state.show then
|
|
div
|
|
[]
|
|
[ h3 [] [ text "alert" ]
|
|
, BannerAlert.alert
|
|
[ Html.Styled.text "This is a dismissable alert message!" ]
|
|
(Just Dismiss)
|
|
]
|
|
|
|
else
|
|
div
|
|
[]
|
|
[ h3 [] [ text "success" ]
|
|
, BannerAlert.success
|
|
[ Html.Styled.text "The alert message was dismissed. 👍" ]
|
|
Nothing
|
|
]
|
|
, h3 [] [ text "error" ]
|
|
, BannerAlert.error
|
|
[ Html.Styled.text "This is an error message!" ]
|
|
Nothing
|
|
, h3 [] [ text "error with link" ]
|
|
, BannerAlert.error
|
|
[ Html.Styled.div
|
|
[ Attributes.css
|
|
[ Css.fontSize (Css.px 20)
|
|
, Css.fontWeight (Css.int 700)
|
|
, Css.lineHeight (Css.px 25)
|
|
, Css.maxWidth (Css.px 600)
|
|
, Fonts.baseFont
|
|
]
|
|
]
|
|
[ Html.Styled.text "Click "
|
|
, Html.Styled.a
|
|
[ Attributes.href "http://www.noredink.com"
|
|
, Attributes.target "_blank"
|
|
]
|
|
[ Html.Styled.text "here " ]
|
|
, Html.Styled.div
|
|
[ Attributes.css
|
|
[ Css.display Css.inlineBlock
|
|
, Css.width (Css.px 20)
|
|
]
|
|
]
|
|
[ Svg.toHtml UiIcon.gear ]
|
|
, Html.Styled.text " to check out NoRedInk."
|
|
]
|
|
]
|
|
Nothing
|
|
, h3 [] [ text "neutral" ]
|
|
, BannerAlert.neutral
|
|
[ Html.Styled.text "This is a neutral message!" ]
|
|
Nothing
|
|
, h3 [] [ text "success" ]
|
|
, BannerAlert.success
|
|
[ Html.Styled.text """This is a success message!
|
|
Let's see what happens if there is a very long message!
|
|
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 =
|
|
{ show : Bool }
|
|
|
|
|
|
init : State
|
|
init =
|
|
{ show = True }
|
|
|
|
|
|
type Msg
|
|
= NoOp
|
|
| Dismiss
|
|
|
|
|
|
update : Msg -> State -> State
|
|
update msg state =
|
|
case msg of
|
|
NoOp ->
|
|
state
|
|
|
|
Dismiss ->
|
|
{ state | show = False }
|