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

316 lines
9.2 KiB
Elm
Raw Normal View History

2020-03-31 22:43:32 +03:00
module Examples.Button exposing (Msg, State, example)
2018-04-30 14:14:20 +03:00
{-|
2020-03-31 22:43:32 +03:00
@docs Msg, State, example
2018-04-30 14:14:20 +03:00
-}
import Accessibility.Styled.Key as Key
import Category exposing (Category(..))
import CommonControls
2018-08-18 02:06:31 +03:00
import Css exposing (middle, verticalAlign)
2018-04-30 14:14:20 +03:00
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
2022-03-05 04:19:03 +03:00
import Debug.Control.View as ControlView
2020-03-31 23:20:03 +03:00
import Example exposing (Example)
2018-08-18 00:37:26 +03:00
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, id)
import KeyboardSupport exposing (Direction(..), Key(..))
2020-01-29 04:09:32 +03:00
import Nri.Ui.Button.V10 as Button
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
import Nri.Ui.UiIcon.V1 as UiIcon
import Set exposing (Set)
2018-04-30 14:14:20 +03:00
2020-03-31 23:20:03 +03:00
{-| -}
example : Example State Msg
2020-03-31 22:43:32 +03:00
example =
2020-09-09 21:43:10 +03:00
{ name = "Button"
, version = 10
2020-03-31 22:05:56 +03:00
, state = init
, update = update
2020-03-31 22:48:26 +03:00
, subscriptions = \_ -> Sub.none
2021-11-05 22:04:46 +03:00
, preview =
2021-11-05 22:16:52 +03:00
[ Button.link "Primary"
[ Button.small
, Button.fillContainerWidth
, Button.custom [ Key.tabbable False ]
, Button.icon UiIcon.link
2021-11-05 22:16:52 +03:00
]
2021-11-05 22:04:46 +03:00
, Button.link "Secondary"
[ Button.small
, Button.fillContainerWidth
, Button.secondary
, Button.css [ Css.marginTop (Css.px 8) ]
, Button.custom [ Key.tabbable False ]
, Button.icon UiIcon.link
2021-11-05 22:04:46 +03:00
]
, Button.link "Premium"
[ Button.small
, Button.fillContainerWidth
, Button.premium
, Button.css [ Css.marginTop (Css.px 8) ]
, Button.custom [ Key.tabbable False ]
, Button.icon UiIcon.link
2021-11-05 22:04:46 +03:00
]
]
2020-03-31 22:05:56 +03:00
, view = \state -> [ viewButtonExamples state ]
, categories = [ Buttons ]
, keyboardSupport = []
2020-03-31 22:05:56 +03:00
}
2018-04-30 14:14:20 +03:00
{-| -}
type alias State =
{ debugControlsState : Control Model
, pressedToggleButtons : Set Int
}
{-| -}
init : State
init =
{ debugControlsState = initDebugControls
, pressedToggleButtons = Set.singleton 1
}
2018-04-30 14:14:20 +03:00
{-| -}
type ButtonType
= Button
| Link
{-| -}
2020-03-31 22:05:56 +03:00
type Msg
= SetDebugControlsState (Control Model)
2020-03-31 22:05:56 +03:00
| ShowItWorked String String
2021-09-02 23:05:50 +03:00
| ToggleToggleButton Int
| NoOp
{-| -}
2020-03-31 22:05:56 +03:00
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
SetDebugControlsState newDebugControlsState ->
( { state | debugControlsState = newDebugControlsState }
, Cmd.none
)
2020-03-31 22:05:56 +03:00
ShowItWorked group message ->
let
_ =
Debug.log group message
in
( state, Cmd.none )
2021-09-02 23:05:50 +03:00
ToggleToggleButton id ->
2021-09-03 00:33:25 +03:00
( { state
| pressedToggleButtons =
if Set.member id state.pressedToggleButtons then
Set.remove id state.pressedToggleButtons
else
Set.insert id state.pressedToggleButtons
}
2021-09-02 23:05:50 +03:00
, Cmd.none
)
NoOp ->
( state, Cmd.none )
-- INTERNAL
2020-03-31 22:05:56 +03:00
type alias Model =
2022-03-05 04:14:07 +03:00
{ buttonType : ButtonType
, label : String
, attributes : List ( String, Button.Attribute Msg )
}
2018-04-30 14:14:20 +03:00
{-| -}
initDebugControls : Control Model
initDebugControls =
2018-04-30 14:14:20 +03:00
Control.record Model
2022-03-05 04:14:07 +03:00
|> Control.field "type"
2019-07-12 01:18:49 +03:00
(Control.choice
2019-07-30 22:55:55 +03:00
[ ( "button", Control.value Button )
, ( "link", Control.value Link )
2019-07-12 01:18:49 +03:00
]
)
2022-03-05 04:14:07 +03:00
|> Control.field "label" (Control.string "Label")
|> Control.field "attributes"
(ControlExtra.list
|> CommonControls.icon "Button" Button.icon
|> ControlExtra.optionalListItem "width"
(CommonControls.choice "Button"
[ ( "exactWidth 120", Button.exactWidth 120 )
, ( "exactWidth 70", Button.exactWidth 70 )
, ( "boundedWidth 100 180", Button.boundedWidth { min = 100, max = 180 } )
, ( "unboundedWidth", Button.unboundedWidth )
, ( "fillContainerWidth", Button.fillContainerWidth )
]
)
|> ControlExtra.optionalListItem "state (button only)"
(CommonControls.choice "Button"
[ ( "enabled", Button.enabled )
, ( "disabled", Button.disabled )
, ( "error", Button.error )
, ( "unfulfilled", Button.unfulfilled )
, ( "loading", Button.loading )
, ( "success", Button.success )
]
)
2022-03-09 22:57:36 +03:00
|> ControlExtra.optionalBoolListItem "hideIconForMobile"
( "Button.hideIconForMobile", Button.hideIconForMobile )
2022-03-05 04:16:57 +03:00
|> CommonControls.css
{ moduleName = "Button"
, use = Button.css
}
|> CommonControls.mobileCss
{ moduleName = "Button"
, use = Button.mobileCss
}
|> CommonControls.quizEngineMobileCss
{ moduleName = "Button"
, use = Button.quizEngineMobileCss
}
|> CommonControls.notMobileCss
{ moduleName = "Button"
, use = Button.notMobileCss
}
2018-04-30 14:14:20 +03:00
)
2020-03-31 22:05:56 +03:00
viewButtonExamples : State -> Html Msg
viewButtonExamples state =
2018-04-30 14:14:20 +03:00
let
model =
Control.currentValue state.debugControlsState
2018-04-30 14:14:20 +03:00
in
2022-03-05 04:19:03 +03:00
[ ControlView.view
{ update = SetDebugControlsState
, settings = state.debugControlsState
, toExampleCode =
\{ label, attributes } ->
let
toCode fName =
"Button."
++ fName
++ " \""
++ label
++ "\"\n\t"
++ ControlView.codeFromList attributes
in
[ { sectionName = "Button"
, code = toCode "button"
}
, { sectionName = "Link"
, code = toCode "link"
}
]
}
2020-03-31 22:05:56 +03:00
, buttons model
, toggleButtons state.pressedToggleButtons
2019-07-20 04:16:46 +03:00
, Button.link "linkExternalWithTracking"
[ Button.unboundedWidth
2019-07-19 18:57:56 +03:00
, Button.secondary
, Button.linkExternalWithTracking
{ url = "#"
2020-03-31 22:05:56 +03:00
, track = ShowItWorked "ButtonExample" "linkExternalWithTracking clicked"
}
2019-07-19 18:57:56 +03:00
]
2018-04-30 14:24:03 +03:00
]
|> div []
2018-04-30 14:14:20 +03:00
2020-03-31 22:05:56 +03:00
buttons : Model -> Html Msg
buttons model =
2018-04-30 14:14:20 +03:00
let
sizes =
2019-07-12 00:29:10 +03:00
[ ( Button.small, "small" )
, ( Button.medium, "medium" )
, ( Button.large, "large" )
]
styles =
2019-07-12 00:29:10 +03:00
[ ( Button.primary, "primary" )
, ( Button.secondary, "secondary" )
, ( Button.danger, "danger" )
, ( Button.premium, "premium" )
]
exampleRow ( style, styleName ) =
2018-04-30 14:14:20 +03:00
List.concat
2018-08-18 02:06:31 +03:00
[ [ td
[ css
[ verticalAlign middle
]
]
[ text styleName ]
2018-04-30 14:14:20 +03:00
]
, List.map (Tuple.first >> exampleCell style) sizes
2018-04-30 14:14:20 +03:00
]
|> tr []
2019-07-19 18:57:56 +03:00
buttonOrLink =
case model.buttonType of
Link ->
Button.link
Button ->
Button.button
exampleCell setStyle setSize =
2019-07-20 04:16:46 +03:00
buttonOrLink model.label
([ setSize
, setStyle
, Button.custom [ Html.Styled.Attributes.class "styleguide-button" ]
, Button.onClick (ShowItWorked "ButtonExample" "Button clicked!")
]
++ List.map Tuple.second model.attributes
)
2018-04-30 14:14:20 +03:00
|> List.singleton
2018-12-20 21:53:09 +03:00
|> td
[ css
[ verticalAlign middle
, Css.width (Css.px 200)
]
]
2018-04-30 14:14:20 +03:00
in
2018-04-30 14:24:03 +03:00
List.concat
[ [ sizes
|> List.map (\( _, sizeName ) -> th [] [ text sizeName ])
2018-04-30 14:24:03 +03:00
|> (\cells -> tr [] (th [] [] :: cells))
]
, List.map exampleRow styles
2018-04-30 14:24:03 +03:00
]
|> table []
2018-04-30 14:14:20 +03:00
toggleButtons : Set Int -> Html Msg
toggleButtons pressedToggleButtons =
2018-04-30 14:14:20 +03:00
div []
[ Heading.h3 [] [ text "Button toggle" ]
2020-01-29 04:09:53 +03:00
, div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ]
[ Button.toggleButton
2021-09-02 23:05:50 +03:00
{ onDeselect = ToggleToggleButton 0
, onSelect = ToggleToggleButton 0
2020-01-29 04:09:53 +03:00
, label = "5"
, pressed = Set.member 0 pressedToggleButtons
2020-01-29 04:09:53 +03:00
}
, Button.toggleButton
2021-09-02 23:05:50 +03:00
{ onDeselect = ToggleToggleButton 1
, onSelect = ToggleToggleButton 1
, label = "Kindergarten"
, pressed = Set.member 1 pressedToggleButtons
2020-01-29 04:09:53 +03:00
}
]
2018-04-30 14:14:20 +03:00
]