noredink-ui/styleguide-app/Examples/BannerAlert.elm

136 lines
4.0 KiB
Elm
Raw Normal View History

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
-}
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
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
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.
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
[ 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!
\"\"\"
, 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 =
{ show : Bool }
2019-05-23 00:38:11 +03:00
init : State
init =
{ show = True }
2019-05-23 00:38:11 +03:00
type Msg
= NoOp
| 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 )
Dismiss ->
2020-03-31 22:14:18 +03:00
( { state | show = False }, Cmd.none )