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

258 lines
7.1 KiB
Elm
Raw Normal View History

2018-04-30 14:14:20 +03:00
module Examples.Button exposing (Msg, State, example, init, update)
{- \
@docs Msg, State, example, init, update,
-}
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 Headings
2018-08-18 00:37:26 +03:00
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, id)
2018-04-30 14:14:20 +03:00
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, ModuleMessages)
2018-04-30 14:24:03 +03:00
import Nri.Ui.AssetPath exposing (Asset)
import Nri.Ui.Button.V9 as Button exposing (ButtonOrLink)
import Nri.Ui.Icon.V5 as Icon
2019-03-28 02:56:54 +03:00
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
2019-06-28 01:35:06 +03:00
import Nri.Ui.Text.V3 as Text
2018-04-30 14:14:20 +03:00
{-| -}
type State
= State (Control Model)
{-| -}
type ButtonType
= Button
| Link
{-| -}
example :
2019-03-28 02:56:54 +03:00
(String -> ModuleMessages Msg parentMsg)
2018-04-30 14:14:20 +03:00
-> State
-> ModuleExample parentMsg
2019-03-28 02:56:54 +03:00
example unnamedMessages state =
2018-04-30 14:14:20 +03:00
let
messages =
unnamedMessages "ButtonExample"
in
2019-07-03 15:36:57 +03:00
{ name = "Nri.Ui.Button.V9"
2018-04-30 14:24:03 +03:00
, category = Buttons
2019-07-03 15:51:23 +03:00
, content = [ viewButtonExamples messages state ]
2018-04-30 14:24:03 +03:00
}
2018-04-30 14:14:20 +03:00
{-| -}
type Msg
= SetState State
| NoOp
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
SetState newState ->
( newState, Cmd.none )
NoOp ->
( state, Cmd.none )
-- INTERNAL
type alias Model =
{ label : String
, icon : Maybe Svg
, width : ButtonOrLink () -> ButtonOrLink ()
, buttonType : ButtonType
, state : Button.ButtonState
}
2018-04-30 14:14:20 +03:00
{-| -}
init : { r | performance : String, lock : String } -> State
init assets =
Control.record Model
|> Control.field "label" (Control.string "Label")
|> Control.field "icon" (iconChoice assets)
2018-04-30 14:14:20 +03:00
|> Control.field "width"
(Control.choice
( "exactWidth 120", Control.value (Button.exactWidth 120) )
[ ( "exactWidth 70", Control.value (Button.exactWidth 70) )
, ( "unboundedWidth", Control.value Button.unboundedWidth )
, ( "fillContainerWidth", Control.value Button.fillContainerWidth )
]
2018-04-30 14:14:20 +03:00
)
|> Control.field "button type"
(Control.choice
( "button", Control.value Button )
[ ( "link", Control.value Link )
2018-04-30 14:14:20 +03:00
]
)
|> Control.field "state (button only)"
(Control.choice
( Debug.toString Button.Enabled, Control.value Button.Enabled )
(List.map (\x -> ( Debug.toString x, Control.value x ))
[ Button.Disabled
2018-04-30 14:14:20 +03:00
, Button.Error
, Button.Unfulfilled
, Button.Loading
, Button.Success
]
)
2018-04-30 14:14:20 +03:00
)
|> State
iconChoice : { r | performance : String, lock : String } -> Control.Control (Maybe Svg)
iconChoice assets =
Control.choice
( "Nothing", Control.value Nothing )
[ ( "Just Performance"
, Icon.performance assets
|> Icon.decorativeIcon
|> NriSvg.fromHtml
|> Just
|> Control.value
)
, ( "Just Lock"
, Icon.lock assets
|> Icon.decorativeIcon
|> NriSvg.fromHtml
|> Just
|> Control.value
)
]
2018-04-30 14:14:20 +03:00
viewButtonExamples :
2019-03-28 02:56:54 +03:00
ModuleMessages Msg parentMsg
-> State
-> Html parentMsg
2019-03-28 02:56:54 +03:00
viewButtonExamples messages (State control) =
2018-04-30 14:14:20 +03:00
let
model =
Control.currentValue control
in
2018-04-30 14:24:03 +03:00
[ Control.view (State >> SetState >> messages.wrapper) control
2018-08-18 00:37:26 +03:00
|> fromUnstyled
2019-03-28 02:56:54 +03:00
, buttons messages model
2018-04-30 14:24:03 +03:00
, toggleButtons messages
, Button.delete
2018-04-30 14:24:03 +03:00
{ label = "Delete Something"
, onClick = messages.showItWorked "delete"
}
, Button.linkExternalWithTracking
(messages.showItWorked "linkExternalWithTracking clicked")
{ size = Button.Medium
, style = Button.Secondary
, width = Button.WidthUnbounded
, label = "linkExternalWithTracking"
, icon = Nothing
, url = "#"
}
2018-04-30 14:24:03 +03:00
]
|> div []
2018-04-30 14:14:20 +03:00
buttons :
2019-03-28 02:56:54 +03:00
ModuleMessages Msg parentMsg
-> Model
-> Html parentMsg
2019-03-28 02:56:54 +03:00
buttons messages model =
2018-04-30 14:14:20 +03:00
let
sizes =
[ ( Button.small, "Button.small" )
, ( Button.medium, "Button.medium" )
, ( Button.large, "Button.large" )
]
styles =
[ ( Button.primary, "Button.primary" )
, ( Button.secondary, "Button.secondary" )
, ( Button.danger, "Button.danger" )
, ( Button.premium, "Button.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 []
addAttributes button =
[ Maybe.map Button.withIcon model.icon
, Just (Button.withLabel model.label)
, Just model.width
, Just (Button.setButtonState model.state)
]
|> List.filterMap identity
|> List.foldl (\addAttr b -> addAttr b) button
exampleCell setStyle setSize =
2018-04-30 14:14:20 +03:00
(case model.buttonType of
Link ->
Button.buildLink
|> addAttributes
|> setSize
|> setStyle
|> Button.href ""
|> Maybe.map Button.render
|> Maybe.withDefault (Html.Styled.text "")
2018-04-30 14:14:20 +03:00
Button ->
Button.buildButton
|> addAttributes
|> setSize
|> setStyle
|> Button.onClick (messages.showItWorked "Button clicked!")
|> Button.render
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 : ModuleMessages Msg parentMsg -> Html parentMsg
toggleButtons messages =
div []
[ Headings.h3 [ text "Button toggle" ]
2018-04-30 14:14:20 +03:00
, Button.toggleButton
{ onDeselect = messages.showItWorked "onDeselect"
, onSelect = messages.showItWorked "onSelect"
, label = "5"
, pressed = False
}
, Button.toggleButton
{ onDeselect = messages.showItWorked "onDeselect"
, onSelect = messages.showItWorked "onSelect"
, label = "5"
, pressed = True
}
]