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

module Examples.Switch exposing (Msg, State, example)

{-|

@docs Msg, State, example

-}

import Accessibility.Styled.Key as Key
import Category
import CommonControls
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import Example exposing (Example)
import KeyboardSupport exposing (Key(..))
import Nri.Ui.Switch.V2 as Switch


moduleName : String
moduleName =
    "Switch"


version : Int
version =
    2


example : Example State Msg
example =
    { name = moduleName
    , version = version
    , state = init
    , update = update
    , subscriptions = \_ -> Sub.none
    , preview =
        [ Switch.view { label = "Toggle Off", id = "preview-switch-a" }
            [ Switch.selected False
            , Switch.custom [ Key.tabbable False ]
            ]
        , Switch.view { label = "Toggle On", id = "preview-switch-b" }
            [ Switch.selected True
            , Switch.custom [ Key.tabbable False ]
            ]
        ]
    , view =
        \ellieLinkConfig state ->
            let
                currentValue =
                    Control.currentValue state.settings
            in
            [ ControlView.view
                { ellieLinkConfig = ellieLinkConfig
                , name = moduleName
                , version = version
                , update = UpdateSettings
                , settings = state.settings
                , mainType = "RootHtml.Html msg"
                , extraImports = []
                , toExampleCode =
                    \{ label, attributes } ->
                        [ { sectionName = "Example"
                          , code =
                                moduleName
                                    ++ ".view"
                                    ++ " \""
                                    ++ label
                                    ++ "\"\t"
                                    ++ ControlView.codeFromListWithHardcoded
                                        [ "Switch.selected "
                                            ++ Debug.toString state.selected
                                            ++ "\n-- ,  Switch.onSwitch Switch -- <- you'll need to wire in a Msg for the Switch to work"
                                        ]
                                        attributes
                          }
                        ]
                }
            , Switch.view { label = currentValue.label, id = "view-switch-example" }
                (Switch.selected state.selected
                    :: Switch.onSwitch Switch
                    :: List.map Tuple.second currentValue.attributes
                )
            ]
    , categories = [ Category.Inputs ]
    , keyboardSupport =
        [ { keys = [ Space ]
          , result = "Toggle the Switch state"
          }
        ]
    }


{-| -}
type alias State =
    { selected : Bool
    , settings : Control Settings
    }


init : State
init =
    { selected = True
    , settings = controlSettings
    }


type alias Settings =
    { label : String
    , attributes : List ( String, Switch.Attribute Msg )
    }


controlSettings : Control Settings
controlSettings =
    Control.record Settings
        |> Control.field "label" (Control.string "Show pandas in results")
        |> Control.field "attributes" initAttributes


initAttributes : Control (List ( String, Switch.Attribute msg ))
initAttributes =
    ControlExtra.list
        |> CommonControls.disabledListItem moduleName Switch.disabled


{-| -}
type Msg
    = Switch Bool
    | UpdateSettings (Control Settings)


update : Msg -> State -> ( State, Cmd Msg )
update msg state =
    case msg of
        Switch bool ->
            ( { state | selected = bool }
            , Cmd.none
            )

        UpdateSettings settings ->
            ( { state | settings = settings }
            , Cmd.none
            )