Adds launch button helper

This commit is contained in:
Tessa Kelly 2019-06-10 14:09:09 -07:00
parent a77eebd0c2
commit 52258fcd3e
2 changed files with 26 additions and 13 deletions

View File

@ -2,7 +2,7 @@ module Nri.Ui.Modal.V5 exposing
( Model
, info
, warning
, Msg, closeButton, init, subscriptions, toOverlayColor, update, viewFooter, viewModalContainer, viewTitle
, Msg, closeButton, init, launchButton, subscriptions, toOverlayColor, update, viewFooter, viewModalContainer, viewTitle
)
{-| Changes from V4:
@ -63,7 +63,8 @@ update msg model =
{-| -}
info :
{ title : String
{ launchButton : Maybe (Root.Html Msg)
, title : String
, visibleTitle : Bool
, content : Html msg
, parentMsg : Msg -> msg
@ -73,10 +74,8 @@ info :
info config model =
Modal.view
{ ifClosed =
Root.button
(Modal.openOnClick "launch-modal")
[ Root.text "Launch Modal" ]
|> Root.map config.parentMsg
Maybe.map (Root.map config.parentMsg) config.launchButton
|> Maybe.withDefault (Root.text "")
, overlayColor = toOverlayColor Colors.navy
, modalContainer =
\l ->
@ -96,7 +95,8 @@ info config model =
{-| -}
warning :
{ title : String
{ launchButton : Maybe (Root.Html Msg)
, title : String
, visibleTitle : Bool
, content : Html msg
, parentMsg : Msg -> msg
@ -106,10 +106,8 @@ warning :
warning config model =
Modal.view
{ ifClosed =
Root.button
(Modal.openOnClick "launch-modal")
[ Root.text "Launch Modal" ]
|> Root.map config.parentMsg
Maybe.map (Root.map config.parentMsg) config.launchButton
|> Maybe.withDefault (Root.text "")
, overlayColor = toOverlayColor Colors.red
, modalContainer =
\l ->
@ -127,6 +125,19 @@ warning config model =
|> Html.Styled.fromUnstyled
launchButton : List Css.Style -> String -> Maybe (Root.Html Msg)
launchButton styles label =
button
(css styles
:: (Modal.openOnClick (String.replace " " "-" label)
|> List.map Html.Styled.Attributes.fromUnstyled
)
)
[ text label ]
|> Html.Styled.toUnstyled
|> Just
toOverlayColor : Css.Color -> String
toOverlayColor color =
color

View File

@ -34,14 +34,16 @@ example parentMessage state =
, category = Modals
, content =
[ Modal.info
{ title = "Modal.info"
{ launchButton = Modal.launchButton [] "Launch Info Modal"
, title = "Modal.info"
, visibleTitle = True
, content = text "This is where the content goes!"
, parentMsg = InfoModalMsg
}
state.infoModal
, Modal.warning
{ title = "Modal.warning"
{ launchButton = Modal.launchButton [] "Launch Warning Modal"
, title = "Modal.warning"
, visibleTitle = True
, content = text "This is where the content goes!"
, parentMsg = WarningModalMsg