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

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

{-|

@docs Msg, State
@docs example

-}

import Accessibility.Styled as Html exposing (Html)
import Accessibility.Styled.Role as Role
import Accessibility.Styled.Widget as Widget
import Browser.Dom as Dom
import Category exposing (Category(..))
import Css
import Debug.Control as Control exposing (Control)
import Debug.Control.View as ControlView
import Example exposing (Example)
import Html.Styled.Attributes exposing (css)
import KeyboardSupport exposing (Key(..))
import Nri.Ui.Colors.Extra exposing (withAlpha)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.SegmentedControl.V14 as SegmentedControl
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
import Nri.Ui.Tooltip.V2 as Tooltip
import Nri.Ui.UiIcon.V1 as UiIcon
import String exposing (toLower)
import Task


moduleName : String
moduleName =
    "SegmentedControl"


version : Int
version =
    14


{-| -}
example : Example State Msg
example =
    { name = moduleName
    , version = version
    , state = init
    , update = update
    , subscriptions = \_ -> Sub.none
    , preview = [ viewPreview ]
    , view =
        \ellieLinkConfig state ->
            let
                options =
                    Control.currentValue state.optionsControl

                pageOptions =
                    List.take options.count (buildOptions options state.pageTooltip)

                radioOptions =
                    List.take options.count (buildRadioOptions options state.radioTooltip options.content)
            in
            [ ControlView.view
                { ellieLinkConfig = ellieLinkConfig
                , name = moduleName
                , version = version
                , update = ChangeOptions
                , settings = state.optionsControl
                , mainType = "RootHtml.Html msg"
                , toExampleCode =
                    \settings ->
                        [ { sectionName = "view"
                          , code =
                                [ moduleName ++ ".view "
                                , "    { focusAndSelect = FocusAndSelectPage"
                                , "    , options = " ++ ControlView.codeFromList pageOptions
                                , "    , selected = \"" ++ Debug.toString state.page ++ "\""
                                , "    , positioning = " ++ Tuple.first options.positioning
                                , "    , toUrl = Nothing"
                                , "    }"
                                ]
                                    |> String.join "\n"
                          }
                        , { sectionName = "viewRadioGroup"
                          , code =
                                [ moduleName ++ ".viewRadioGroup"
                                , "    { onSelect = SelectRadio"
                                , "    , options = " ++ ControlView.codeFromList radioOptions
                                , "    , selected = " ++ Debug.toString state.optionallySelected
                                , "    , positioning = " ++ Tuple.first options.positioning
                                , "    , legend = \"SegmentedControls 'viewSelectRadio' example\""
                                , "    }"
                                ]
                                    |> String.join "\n"
                          }
                        ]
                }
            , Html.h3 [ css [ Css.marginBottom Css.zero ] ]
                [ Html.code [] [ Html.text "view" ] ]
            , Html.p [ css [ Css.marginTop (Css.px 1) ] ]
                [ Html.text "Use in cases where it would also be reasonable to use Tabs." ]
            , SegmentedControl.view
                { focusAndSelect = FocusAndSelectPage
                , selected = state.page
                , positioning = Tuple.second options.positioning
                , toUrl = Nothing
                , options = List.map Tuple.second pageOptions
                }
            , Html.h3 [ css [ Css.marginBottom Css.zero ] ]
                [ Html.code [] [ Html.text "viewRadioGroup" ] ]
            , Html.p [ css [ Css.marginTop (Css.px 1) ] ]
                [ Html.text "Use in cases where it would be reasonable to use radio buttons for the same purpose." ]
            , SegmentedControl.viewRadioGroup
                { legend = "SegmentedControls 'viewSelectRadio' example"
                , onSelect = SelectRadio
                , options = List.map Tuple.second radioOptions
                , selected = state.optionallySelected
                , positioning = Tuple.second options.positioning
                }
            ]
    , categories = [ Layout, Inputs ]
    , keyboardSupport =
        [ { keys = [ KeyboardSupport.Tab ]
          , result = "Move focus to the currently-selected Control's content"
          }
        , { keys = [ Arrow KeyboardSupport.Left ]
          , result = "Select the Control to the left of the current selection"
          }
        , { keys = [ Arrow KeyboardSupport.Right ]
          , result = "Select the Control to the right of the current selection"
          }
        ]
    }


viewPreview : Html msg
viewPreview =
    Html.div
        [ Role.img
        , Widget.hidden True
        , css
            [ Css.displayFlex
            , Css.justifyContent Css.stretch
            , Css.color Colors.navy
            , Fonts.baseFont
            , Css.fontSize (Css.px 15)
            , Css.fontWeight Css.bold
            ]
        ]
        [ Html.div
            [ css
                [ Css.padding2 (Css.px 6) (Css.px 15)
                , Css.border3 (Css.px 1) Css.solid Colors.azure
                , Css.borderTopLeftRadius (Css.px 8)
                , Css.borderBottomLeftRadius (Css.px 8)
                , Css.backgroundColor Colors.glacier
                , Css.boxShadow5 Css.inset Css.zero (Css.px 3) Css.zero (withAlpha 0.2 Colors.gray20)
                ]
            ]
            [ Html.text "Abc" ]
        , Html.div
            [ css
                [ Css.padding2 (Css.px 6) (Css.px 15)
                , Css.border3 (Css.px 1) Css.solid Colors.azure
                , Css.borderTopRightRadius (Css.px 8)
                , Css.borderBottomRightRadius (Css.px 8)
                , Css.backgroundColor Colors.white
                , Css.boxShadow5 Css.inset Css.zero (Css.px -2) Css.zero Colors.azure
                ]
            ]
            [ Html.text "Def" ]
        ]


type Page
    = Flag
    | Sprout
    | Star
    | Sapling
    | Attention
    | Tree
    | Premium
    | Activity


buildOptions : { options | content : Content, longContent : Bool, tooltips : Bool } -> Maybe Page -> List ( String, SegmentedControl.Option Page Msg )
buildOptions { content, longContent, tooltips } openTooltip =
    let
        buildOption value icon_ =
            let
                ( maybeIcon, label ) =
                    getIconAndLabel content icon_ (Debug.toString value)

                valueStr =
                    "\"" ++ Debug.toString value ++ "\""
            in
            ( [ "{ icon = " ++ Debug.toString (Maybe.map Tuple.first maybeIcon)
              , ", label = text " ++ valueStr
              , ", value = " ++ valueStr
              , ", idString = String.toLower " ++ valueStr
              , ", attributes = []"
              , ", tabTooltip = "
                    ++ (if tooltips then
                            ("\n\t\t[ Tooltip.plaintext " ++ valueStr)
                                ++ ("\n\t\t, Tooltip.onHover (OpenTooltip " ++ valueStr ++ ")")
                                ++ ("\n\t\t, Tooltip.open (openTooltip == Just " ++ valueStr ++ ")")
                                ++ "\n\t\t]"

                        else
                            "[]"
                       )
              , ", content = text \"...\""
              , "}"
              ]
                |> String.join "\n\t  "
            , { icon = Maybe.map Tuple.second maybeIcon
              , label = Html.text label
              , value = value
              , idString = toLower (Debug.toString value)
              , attributes = []
              , tabTooltip =
                    if tooltips then
                        [ Tooltip.plaintext (Debug.toString value)
                        , Tooltip.onHover (PageTooltip value)
                        , Tooltip.open (openTooltip == Just value)
                        ]

                    else
                        []
              , content =
                    if longContent then
                        Html.div
                            [ css
                                [ Css.maxHeight (Css.px 100)
                                , Css.overflowY Css.auto
                                ]
                            ]
                            [ Html.p [] [ Html.text <| "Content for " ++ Debug.toString value ]
                            , Html.ol [] <|
                                List.map (\i -> Html.li [] [ Html.text (Debug.toString value) ])
                                    (List.range 1 20)
                            ]

                    else
                        Html.text <| "Content for " ++ Debug.toString value
              }
            )
    in
    [ buildOption Flag ( "UiIcon.flag", UiIcon.flag )
    , buildOption Sprout ( "UiIcon.sprout", UiIcon.sprout )
    , buildOption Star ( "UiIcon.star", UiIcon.star )
    , buildOption Sapling ( "UiIcon.sapling", UiIcon.sapling )
    , buildOption Attention ( "UiIcon.attention", Svg.withColor Colors.greenDark UiIcon.attention )
    , buildOption Tree ( "UiIcon.tree", UiIcon.tree )
    , buildOption Premium ( "UiIcon.premiumLock", UiIcon.premiumLock )
    , buildOption Activity ( "UiIcon.activity", Svg.withColor Colors.purple UiIcon.activity )
    ]


buildRadioOptions : { options | tooltips : Bool } -> Maybe Int -> Content -> List ( String, SegmentedControl.Radio Int Msg )
buildRadioOptions options currentlyHovered content =
    let
        buildOption : Int -> ( String, Svg ) -> ( String, SegmentedControl.Radio Int Msg )
        buildOption value ( text, icon ) =
            let
                ( icon_, label ) =
                    getIconAndLabel content
                        icon
                        ("Source " ++ Debug.toString (value + 1))
            in
            ( [ "{ icon = " ++ Debug.toString (Maybe.map (\_ -> "UiIcon." ++ toLower label) icon_)
              , ", label = Html.text " ++ label
              , ", value = " ++ String.fromInt value
              , ", idString = String.fromInt " ++ String.fromInt value
              , ", tooltip = "
                    ++ (if options.tooltips then
                            ("\n\t\t[ Tooltip.plaintext " ++ String.fromInt value)
                                ++ ("\n\t\t, Tooltip.onHover (OpenTooltip " ++ String.fromInt value ++ ")")
                                ++ ("\n\t\t, Tooltip.open (openTooltip == Just " ++ String.fromInt value ++ ")")
                                ++ "\n\t\t]"

                        else
                            "[]"
                       )
              , ", attributes = []"
              , "}"
              ]
                |> String.join "\n\t  "
            , { icon = icon_
              , label = Html.text label
              , value = value
              , idString = String.fromInt value
              , tooltip =
                    if options.tooltips then
                        [ Tooltip.plaintext text
                        , Tooltip.open (currentlyHovered == Just value)
                        , Tooltip.fitToContent
                        , Tooltip.onHover
                            (\hovered ->
                                HoverRadio
                                    (if hovered then
                                        Just value

                                     else
                                        Nothing
                                    )
                            )
                        ]

                    else
                        []
              , attributes = []
              }
            )
    in
    List.indexedMap buildOption
        [ ( "Leaderboard", UiIcon.leaderboard )
        , ( "Person", UiIcon.person )
        , ( "Performance", UiIcon.performance )
        , ( "Gift", UiIcon.gift )
        , ( "Document", UiIcon.document )
        , ( "Key", UiIcon.key )
        , ( "Badge", UiIcon.badge )
        , ( "Hat", UiIcon.hat )
        ]


{-| -}
type alias State =
    { page : Page
    , pageTooltip : Maybe Page
    , optionallySelected : Maybe Int
    , optionsControl : Control Options
    , radioTooltip : Maybe Int
    }


{-| -}
init : State
init =
    { page = Flag
    , pageTooltip = Nothing
    , optionallySelected = Nothing
    , optionsControl = optionsControl
    , radioTooltip = Nothing
    }


type alias Options =
    { positioning : ( String, SegmentedControl.Positioning )
    , content : Content
    , count : Int
    , longContent : Bool
    , tooltips : Bool
    }


optionsControl : Control Options
optionsControl =
    Control.record Options
        |> Control.field "positioning"
            (Control.choice
                [ ( "Left (FitContent)"
                  , Control.value
                        ( "SegmentedControl.Left SegmentedControl.FitContent"
                        , SegmentedControl.Left SegmentedControl.FitContent
                        )
                  )
                , ( "Left (FillContainer)"
                  , Control.value
                        ( "SegmentedControl.Left SegmentedControl.FillContainer"
                        , SegmentedControl.Left SegmentedControl.FillContainer
                        )
                  )
                , ( "Center"
                  , Control.value
                        ( "SegmentedControl.Center"
                        , SegmentedControl.Center
                        )
                  )
                ]
            )
        |> Control.field "content" controlContent
        |> Control.field "count"
            (Control.choice
                (List.map (\i -> ( String.fromInt i, Control.value i )) (List.range 2 8))
            )
        |> Control.field "long content" (Control.bool False)
        |> Control.field "tooltips" (Control.bool True)


type Content
    = TextAndIcon
    | Text
    | Icon


controlContent : Control Content
controlContent =
    Control.choice
        [ ( "Text and icon", Control.value TextAndIcon )
        , ( "Text", Control.value Text )
        , ( "Icon", Control.value Icon )
        ]


getIconAndLabel : Content -> icon -> String -> ( Maybe icon, String )
getIconAndLabel content icon_ value =
    case content of
        TextAndIcon ->
            ( Just icon_, value )

        Icon ->
            ( Just icon_, "" )

        Text ->
            ( Nothing, value )


{-| -}
type Msg
    = FocusAndSelectPage { select : Page, focus : Maybe String }
    | Focused (Result Dom.Error ())
    | PageTooltip Page Bool
    | SelectRadio Int
    | HoverRadio (Maybe Int)
    | ChangeOptions (Control Options)


{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
    case msg of
        FocusAndSelectPage { select, focus } ->
            ( { state | page = select }
            , Maybe.map (Task.attempt Focused << Dom.focus) focus
                |> Maybe.withDefault Cmd.none
            )

        Focused _ ->
            ( state
            , Cmd.none
            )

        PageTooltip page isOpen ->
            ( { state
                | pageTooltip =
                    if isOpen then
                        Just page

                    else
                        Nothing
              }
            , Cmd.none
            )

        SelectRadio id ->
            ( { state | optionallySelected = Just id }
            , Cmd.none
            )

        ChangeOptions newOptions ->
            ( { state | optionsControl = newOptions }
            , Cmd.none
            )

        HoverRadio hovered ->
            ( { state | radioTooltip = hovered }
            , Cmd.none
            )