2019-05-23 00:38:11 +03:00
|
|
|
module Examples.BannerAlert exposing (example, State, init, Msg, update)
|
2019-03-21 23:50:59 +03:00
|
|
|
|
|
|
|
{-|
|
|
|
|
|
2019-05-23 00:38:11 +03:00
|
|
|
@docs example, State, init, Msg, update
|
2020-03-31 22:14:18 +03:00
|
|
|
@docs example_
|
2019-03-21 23:50:59 +03:00
|
|
|
|
|
|
|
-}
|
|
|
|
|
2020-03-24 03:33:42 +03:00
|
|
|
import Category exposing (Category(..))
|
2019-10-11 01:44:39 +03:00
|
|
|
import Css
|
2020-03-31 23:20:03 +03:00
|
|
|
import Example exposing (Example)
|
2020-03-31 22:14:18 +03:00
|
|
|
import Html.Styled exposing (Html, a, div, h3, pre, text)
|
2019-10-11 01:44:39 +03:00
|
|
|
import Html.Styled.Attributes as Attributes
|
2020-03-24 03:33:42 +03:00
|
|
|
import ModuleExample exposing (ModuleExample)
|
2019-10-11 01:05:41 +03:00
|
|
|
import Nri.Ui.BannerAlert.V6 as BannerAlert
|
2020-03-17 22:04:13 +03:00
|
|
|
import Nri.Ui.Colors.V1 as Colors
|
2019-10-11 01:44:39 +03:00
|
|
|
import Nri.Ui.Fonts.V1 as Fonts
|
2020-03-17 23:12:31 +03:00
|
|
|
import Nri.Ui.Pennant.V2 as Pennant
|
2019-10-11 01:54:22 +03:00
|
|
|
import Nri.Ui.Svg.V1 as Svg
|
|
|
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
2019-03-21 23:50:59 +03:00
|
|
|
|
|
|
|
|
2020-03-31 23:20:03 +03:00
|
|
|
{-| -}
|
|
|
|
example : Example State Msg
|
2020-03-31 22:14:18 +03:00
|
|
|
example =
|
2019-10-11 01:05:41 +03:00
|
|
|
{ name = "Nri.Ui.BannerAlert.V6"
|
2020-03-31 22:14:18 +03:00
|
|
|
, state = init
|
|
|
|
, update = update
|
2020-03-31 22:48:26 +03:00
|
|
|
, subscriptions = \_ -> Sub.none
|
2020-03-31 22:14:18 +03:00
|
|
|
, view = view
|
|
|
|
, categories = [ Messaging ]
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
view : State -> List (Html Msg)
|
|
|
|
view state =
|
|
|
|
[ if state.show then
|
|
|
|
div
|
|
|
|
[]
|
|
|
|
[ h3 [] [ text "alert" ]
|
|
|
|
, BannerAlert.alert [ text "Dismiss this alert message to see a success message!" ] (Just Dismiss)
|
|
|
|
, pre [] [ text "BannerAlert.alert [ text \"Dismiss this alert message to see a success message!\" ] (Just Dismiss)" ]
|
|
|
|
]
|
|
|
|
|
|
|
|
else
|
|
|
|
div
|
|
|
|
[]
|
|
|
|
[ h3 [] [ text "success" ]
|
|
|
|
, BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing
|
|
|
|
, pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ]
|
|
|
|
]
|
|
|
|
, h3 [] [ text "error" ]
|
|
|
|
, BannerAlert.error [ text "This is an error message!" ] Nothing
|
|
|
|
, pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ]
|
|
|
|
, h3 [] [ text "neutral" ]
|
|
|
|
, BannerAlert.neutral [ text "This is a neutral message!" ] Nothing
|
|
|
|
, pre [] [ text "BannerAlert.neutral [ text \"This is a neutral message!\" ] Nothing" ]
|
|
|
|
, h3 [] [ text "custom" ]
|
|
|
|
, BannerAlert.custom
|
|
|
|
{ color = Colors.aquaDark
|
|
|
|
, backgroundColor = Colors.gray92
|
|
|
|
, icon = Pennant.premiumFlag
|
|
|
|
, content = [ text "This is a a custom message!" ]
|
|
|
|
, dismiss = Nothing
|
|
|
|
}
|
|
|
|
, pre []
|
|
|
|
[ text
|
|
|
|
"""BannerAlert.custom
|
2020-03-17 23:37:12 +03:00
|
|
|
{ color = Colors.aquaDark
|
|
|
|
, backgroundColor = Colors.gray92
|
|
|
|
, icon = Pennant.premiumFlag
|
|
|
|
, content = [ text "This is a a custom message!" ]
|
|
|
|
, dismiss = Nothing
|
|
|
|
}
|
|
|
|
"""
|
2020-03-31 22:14:18 +03:00
|
|
|
]
|
|
|
|
, h3 [] [ text "with multi-line link and icon" ]
|
|
|
|
, BannerAlert.success
|
|
|
|
[ text "Click "
|
|
|
|
, a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ]
|
|
|
|
[ text
|
|
|
|
"""here, yes, HERE, right here on this very long success message.
|
2020-03-17 21:53:02 +03:00
|
|
|
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!
|
|
|
|
"""
|
2020-03-31 22:14:18 +03:00
|
|
|
, div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ]
|
|
|
|
[ Svg.toHtml UiIcon.gear ]
|
2020-02-18 00:45:59 +03:00
|
|
|
]
|
2020-03-31 22:14:18 +03:00
|
|
|
, text " to check out NoRedInk."
|
|
|
|
]
|
|
|
|
Nothing
|
|
|
|
, pre []
|
|
|
|
[ text
|
|
|
|
"""BannerAlert.success
|
2020-03-17 21:53:02 +03:00
|
|
|
[ text "Click "
|
|
|
|
, a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ]
|
|
|
|
[ text
|
|
|
|
\"\"\"here, yes, HERE, right here on this very long success message.
|
2019-03-21 23:50:59 +03:00
|
|
|
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!
|
2020-03-17 21:53:02 +03:00
|
|
|
\"\"\"
|
|
|
|
, div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ]
|
|
|
|
[ Svg.toHtml UiIcon.gear ]
|
|
|
|
]
|
|
|
|
, text " to check out NoRedInk."
|
|
|
|
]
|
|
|
|
Nothing
|
|
|
|
"""
|
2019-03-21 23:50:59 +03:00
|
|
|
]
|
2020-03-31 22:14:18 +03:00
|
|
|
]
|
2019-05-23 00:38:11 +03:00
|
|
|
|
|
|
|
|
|
|
|
type alias State =
|
2019-05-23 21:53:19 +03:00
|
|
|
{ show : Bool }
|
2019-05-23 00:38:11 +03:00
|
|
|
|
|
|
|
|
|
|
|
init : State
|
|
|
|
init =
|
2019-05-23 21:53:19 +03:00
|
|
|
{ show = True }
|
2019-05-23 00:38:11 +03:00
|
|
|
|
|
|
|
|
|
|
|
type Msg
|
|
|
|
= NoOp
|
2019-05-23 21:53:19 +03:00
|
|
|
| Dismiss
|
2019-05-23 00:38:11 +03:00
|
|
|
|
|
|
|
|
2020-03-31 22:14:18 +03:00
|
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
2019-05-23 00:38:11 +03:00
|
|
|
update msg state =
|
|
|
|
case msg of
|
|
|
|
NoOp ->
|
2020-03-31 22:14:18 +03:00
|
|
|
( state, Cmd.none )
|
2019-05-23 21:53:19 +03:00
|
|
|
|
|
|
|
Dismiss ->
|
2020-03-31 22:14:18 +03:00
|
|
|
( { state | show = False }, Cmd.none )
|