NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-20 20:21:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update docs to use the new API in the example

Browse Source
This commit is contained in:
Juan Edi 2020-09-08 15:06:13 -03:00
parent ad1bfb6672
commit a81fb3617a
1 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/Nri/Ui/Modal/V11.elm
View File

@ -19,8 +19,9 @@ module Nri.Ui.Modal.V11 exposing
- tab and tabback events stop propagation and prevent default - tab and tabback events stop propagation and prevent default
``` ```
import Browser exposing (Program, element) import Browser exposing (element)
import Browser.Dom as Dom import Browser.Dom as Dom
import Css exposing (padding, px)
import Html.Styled exposing (..) import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (id) import Html.Styled.Attributes exposing (id)
import Html.Styled.Events as Events import Html.Styled.Events as Events
@ -28,12 +29,13 @@ import Nri.Ui.FocusTrap.V1 as FocusTrap exposing (FocusTrap)
import Nri.Ui.Modal.V11 as Modal import Nri.Ui.Modal.V11 as Modal
import Task import Task
main : Program flags model msg main : Program () Model Msg
main = main =
Browser.element
{ init = \_ -> init { init = \_ -> init
, view = view , view = toUnstyled << view
, update = update , update = update
, subscriptions = \model -> Modal.subscriptions model.modalState , subscriptions = \model -> Sub.map ModalMsg (Modal.subscriptions model.modalState)
} }
type ModalKind type ModalKind
@ -45,7 +47,7 @@ type alias Model =
, modalState : Modal.Model , modalState : Modal.Model
} }
init : Model init : ( Model, Cmd Msg )
init = init =
let let
( modalState, cmd ) = ( modalState, cmd ) =
@ -71,7 +73,7 @@ type Msg
| Focus String | Focus String
| Focused (Result Dom.Error ()) | Focused (Result Dom.Error ())
update : Msg -> Model -> ( Modal, Cmd Msg ) update : Msg -> Model -> ( Model, Cmd Msg )
update msg model = update msg model =
case msg of case msg of
OpenModal modalKind returnFocusTo -> OpenModal modalKind returnFocusTo ->
@ -133,23 +135,26 @@ view model =
Modal.view Modal.view
{ title = "First kind of modal" { title = "First kind of modal"
, wrapMsg = ModalMsg , wrapMsg = ModalMsg
, content = , focus = Focus
[ Modal.closeButton CloseModal <| , content = [ text "Modal Content" ]
FocusTrap.first { focusLastId = Focus "last-element-id" }
, text "Modal Content"
]
, footer = , footer =
[ button [ button
(Events.onClick CloseModal [ Events.onClick CloseModal
:: id "last-element-id" , id "last-element-id"
:: FocusTrap.last { focusFirstElement = Focus Modal.closeButtonId } ]
)
[ text "Close" ] [ text "Close" ]
] ]
} }
[ Modal.hideTitle [ Modal.hideTitle
, Modal.css [ padding (px 10) ] , Modal.css [ padding (px 10) ]
, Modal.custom [ id "first-modal" ] , Modal.custom [ id "first-modal" ]
, Modal.closeButton
, Modal.focusTrap
(FocusTrap.FocusTrap
{ firstId = Modal.closeButtonId
, lastId = "last-element-id"
}
)
] ]
model.modalState model.modalState
@ -157,14 +162,18 @@ view model =
Modal.view Modal.view
{ title = "Second kind of modal" { title = "Second kind of modal"
, wrapMsg = ModalMsg , wrapMsg = ModalMsg
, content = , focus = Focus
[ Modal.closeButton CloseModal <| , content = [ text "Modal Content" ]
FocusTrap.only { focusSelf = Focus Modal.closeButtonId }
, text "Modal Content"
]
, footer = [] , footer = []
} }
[ Modal.warning [ Modal.warning
, Modal.closeButton
, Modal.focusTrap
(FocusTrap.FocusTrap
{ firstId = Modal.closeButtonId
, lastId = Modal.closeButtonId
}
)
] ]
model.modalState model.modalState
] ]