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

View File

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