mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-31 01:23:09 +03:00
146 lines
4.6 KiB
Elm
146 lines
4.6 KiB
Elm
module Examples.Page exposing (example, State, Msg)
|
|
|
|
{-|
|
|
|
|
@docs example, State, Msg
|
|
|
|
-}
|
|
|
|
import Category exposing (Category(..))
|
|
import CommonControls
|
|
import Css
|
|
import Css.Global exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
|
|
import Debug.Control as Control exposing (Control)
|
|
import Example exposing (Example)
|
|
import Html.Styled as Html exposing (Html)
|
|
import Html.Styled.Attributes exposing (css)
|
|
import Http
|
|
import KeyboardSupport exposing (Direction(..), Key(..))
|
|
import Nri.Ui.Colors.V1 as Colors
|
|
import Nri.Ui.Fonts.V1 as Fonts
|
|
import Nri.Ui.Heading.V2 as Heading
|
|
import Nri.Ui.Page.V3 as Page exposing (RecoveryText(..))
|
|
|
|
|
|
{-| -}
|
|
type alias State =
|
|
{ httpError : Control Http.Error
|
|
, recoveryText : Control RecoveryText
|
|
}
|
|
|
|
|
|
{-| -}
|
|
type Msg
|
|
= ShowItWorked String
|
|
| SetHttpError (Control Http.Error)
|
|
| SetRecoveryText (Control RecoveryText)
|
|
|
|
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
update msg model =
|
|
case msg of
|
|
ShowItWorked message ->
|
|
let
|
|
_ =
|
|
Debug.log "Clicked: " message
|
|
in
|
|
( model, Cmd.none )
|
|
|
|
SetHttpError controls ->
|
|
( { model | httpError = controls }, Cmd.none )
|
|
|
|
SetRecoveryText controls ->
|
|
( { model | recoveryText = controls }, Cmd.none )
|
|
|
|
|
|
{-| -}
|
|
example : Example State Msg
|
|
example =
|
|
{ name = "Page"
|
|
, version = 3
|
|
, categories = [ Messaging ]
|
|
, keyboardSupport = []
|
|
, state = { httpError = CommonControls.httpError, recoveryText = initRecoveryText }
|
|
, update = update
|
|
, subscriptions = \_ -> Sub.none
|
|
, preview =
|
|
[ -- faking a mini version of the Page component to give styleguide users a sense of what the
|
|
-- component might look like
|
|
Html.div
|
|
[ css
|
|
[ Css.displayFlex
|
|
, Css.alignItems Css.center
|
|
, Css.flexDirection Css.column
|
|
, Css.backgroundColor Colors.white
|
|
, Css.borderRadius (Css.px 4)
|
|
, Css.padding (Css.px 20)
|
|
]
|
|
]
|
|
[ Html.div [ css [ Css.fontSize (Css.px 40) ] ] [ Html.text "😵" ]
|
|
, Html.p
|
|
[ css
|
|
[ Css.color Colors.navy
|
|
, Fonts.baseFont
|
|
, Css.fontWeight Css.bold
|
|
, Css.textAlign Css.center
|
|
, Css.margin Css.zero
|
|
]
|
|
]
|
|
[ Html.text "There was a problem!" ]
|
|
]
|
|
]
|
|
, view =
|
|
\model ->
|
|
let
|
|
recoveryText =
|
|
Control.currentValue model.recoveryText
|
|
in
|
|
[ Html.fromUnstyled (Control.view SetRecoveryText model.recoveryText)
|
|
, viewExample "Page.httpError error" (Page.httpError (Control.currentValue model.httpError)) recoveryText [ Html.fromUnstyled (Control.view SetHttpError model.httpError) ]
|
|
, viewExample "Page.broken" Page.broken recoveryText []
|
|
, viewExample "Page.blockedV4" (Page.blockedV4 "Error message details") recoveryText []
|
|
, viewExample "Page.notFound" Page.notFound recoveryText []
|
|
, viewExample "Page.noPermission" Page.noPermission recoveryText []
|
|
, viewExample "Page.loggedOut" Page.loggedOut recoveryText []
|
|
, viewExample "Page.timeOut" Page.timeOut recoveryText []
|
|
, viewExample "Page.networkError" Page.networkError recoveryText []
|
|
]
|
|
}
|
|
|
|
|
|
viewExample :
|
|
String
|
|
-> (Page.DefaultPage Msg -> Html Msg)
|
|
-> RecoveryText
|
|
-> List (Html Msg)
|
|
-> Html Msg
|
|
viewExample viewName view recoveryText extras =
|
|
Html.div
|
|
[ css
|
|
[ Css.marginTop (Css.px 20)
|
|
, Css.borderTop3 (Css.px 2) Css.solid Colors.gray96
|
|
, Css.paddingTop (Css.px 20)
|
|
, Css.marginBottom (Css.px 20)
|
|
]
|
|
]
|
|
[ Heading.h3 [] [ Html.text viewName ]
|
|
, Html.div [] extras
|
|
, Html.code []
|
|
[ Html.text <|
|
|
viewName
|
|
++ " { link = msg, recoveryText = "
|
|
++ Debug.toString recoveryText
|
|
++ " }"
|
|
]
|
|
, view { link = ShowItWorked viewName, recoveryText = recoveryText }
|
|
]
|
|
|
|
|
|
initRecoveryText : Control RecoveryText
|
|
initRecoveryText =
|
|
Control.choice
|
|
[ ( "Page.Reload", Control.value Page.Reload )
|
|
, ( "Page.ReturnTo", Control.map Page.ReturnTo (Control.string "Home") )
|
|
, ( "Page.Custom", Control.map Custom (Control.string "Hit the road, Jack") )
|
|
]
|