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 Example exposing (Example)
import Html.Styled as Html
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Switch.V2 as Switch


{-| -}
type alias State =
    Bool


{-| -}
type Msg
    = Switch Bool


example : Example State Msg
example =
    { name = "Switch"
    , version = 1
    , state = True
    , update = \(Switch new) _ -> ( new, Cmd.none )
    , 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 interactiveIsOn ->
            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Interactive" ]
            , Switch.view
                { id = "switch-interactive"
                , label = "Show pandas in results"
                }
                [ Switch.onSwitch Switch
                , Switch.selected interactiveIsOn
                ]
            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Disabled (On)" ]
            , Switch.view
                { id = "switch-disabled-on"
                , label = "Permanently on"
                }
                [ Switch.disabled
                , Switch.selected True
                ]
            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Disabled (Off)" ]
            , Switch.view
                { id = "switch-disabled-off"
                , label = "Permanently off"
                }
                [ Switch.disabled
                , Switch.selected False
                ]
            ]
    , categories = [ Category.Inputs ]
    , keyboardSupport = [{- TODO -}]
    }