1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-24 14:13:20 +03:00
noredink-ui/styleguide-app/Examples/ClickableText.elm

217 lines
6.2 KiB
Elm
Raw Normal View History

2020-03-31 22:43:32 +03:00
module Examples.ClickableText exposing (Msg, State, example)
{-|
2020-03-31 22:43:32 +03:00
@docs Msg, State, example
-}
import Accessibility.Styled.Key as Key
import Category exposing (Category(..))
import CommonControls
import Css exposing (middle, verticalAlign)
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
2020-03-31 23:20:03 +03:00
import Example exposing (Example)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, id)
import KeyboardSupport exposing (Direction(..), Key(..))
2019-07-30 22:13:09 +03:00
import Nri.Ui.ClickableText.V3 as ClickableText
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
2021-10-27 20:42:23 +03:00
import Nri.Ui.Text.V6 as Text
import Nri.Ui.UiIcon.V1 as UiIcon
{-| -}
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 = "ClickableText"
, version = 3
2020-03-31 22:43:32 +03:00
, state = init
, update = update
2020-03-31 22:48:26 +03:00
, subscriptions = \_ -> Sub.none
2021-11-05 22:16:52 +03:00
, preview =
[ ClickableText.link "Small"
[ ClickableText.icon UiIcon.link
, ClickableText.small
, ClickableText.custom [ Key.tabbable False ]
2021-11-05 22:16:52 +03:00
]
, ClickableText.link "Medium"
[ ClickableText.icon UiIcon.link
, ClickableText.medium
, ClickableText.custom [ Key.tabbable False ]
2021-11-05 22:16:52 +03:00
]
, ClickableText.link "Large"
[ ClickableText.icon UiIcon.link
, ClickableText.large
, ClickableText.custom [ Key.tabbable False ]
2021-11-05 22:16:52 +03:00
]
]
2020-03-31 22:43:32 +03:00
, view = \state -> [ viewExamples state ]
, categories = [ Buttons ]
, keyboardSupport = []
}
{-| -}
type State
= State (Control (Settings Msg))
{-| -}
init : State
init =
Control.record Settings
|> Control.field "label" (Control.string "Clickable Text")
|> Control.field "attributes"
(ControlExtra.list
|> CommonControls.icon "ClickableText" ClickableText.icon
|> ControlExtra.optionalBoolListItem "hideIconForMobile"
( "ClickableText.hideIconForMobile", ClickableText.hideIconForMobile )
|> ControlExtra.optionalBoolListItem "hideTextForMobile"
( "ClickableText.hideTextForMobile", ClickableText.hideTextForMobile )
|> CommonControls.css
{ moduleName = "ClickableText"
, use = ClickableText.css
}
|> CommonControls.mobileCss
{ moduleName = "ClickableText"
, use = ClickableText.mobileCss
}
|> CommonControls.quizEngineMobileCss
{ moduleName = "ClickableText"
, use = ClickableText.quizEngineMobileCss
}
|> CommonControls.notMobileCss
{ moduleName = "ClickableText"
, use = ClickableText.notMobileCss
}
)
|> State
type alias Settings msg =
{ label : String
, attributes : List ( String, ClickableText.Attribute msg )
}
2020-03-31 22:43:32 +03:00
{-| -}
type Msg
= SetState (Control (Settings Msg))
2020-03-31 22:43:32 +03:00
| ShowItWorked String String
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
SetState controls ->
( State controls, Cmd.none )
2020-03-31 22:43:32 +03:00
ShowItWorked group message ->
let
_ =
Debug.log group message
in
( state, Cmd.none )
-- INTERNAL
2020-03-31 22:43:32 +03:00
viewExamples : State -> Html Msg
viewExamples (State control) =
let
settings =
Control.currentValue control
clickableAttributes =
List.map Tuple.second settings.attributes
in
[ ControlView.view
{ update = SetState
, settings = control
, toExampleCode =
\{ label, attributes } ->
let
toCode fName =
"ClickableText."
++ fName
++ " \""
++ label
++ "\"\n\t"
++ ControlView.codeFromList attributes
in
[ { sectionName = "Button"
, code = toCode "button"
}
, { sectionName = "Link"
, code = toCode "link"
}
]
}
, buttons settings
2021-10-27 21:54:14 +03:00
, Text.smallBody
[ Text.html
[ text "Sometimes, we'll want our clickable links: "
, ClickableText.link settings.label
(ClickableText.small :: clickableAttributes)
2021-10-27 21:54:14 +03:00
, text " and clickable buttons: "
, ClickableText.button settings.label
(ClickableText.small
:: ClickableText.onClick (ShowItWorked "ClickableText" "in-line button")
:: clickableAttributes
)
2021-10-27 21:54:14 +03:00
, text " to show up in-line."
]
]
]
|> div []
2019-07-30 22:13:09 +03:00
sizes : List ( ClickableText.Attribute msg, String )
sizes =
2019-07-30 22:13:09 +03:00
[ ( ClickableText.small, "small" )
, ( ClickableText.medium, "medium" )
, ( ClickableText.large, "large" )
]
buttons : Settings Msg -> Html Msg
buttons settings =
let
sizeRow label render =
row label (List.map render sizes)
in
table []
[ sizeRow "" (\( size, sizeLabel ) -> th [] [ text sizeLabel ])
, sizeRow ".link"
(\( size, sizeLabel ) ->
ClickableText.link settings.label
(size :: List.map Tuple.second settings.attributes)
|> exampleCell
)
, sizeRow ".button"
(\( size, sizeLabel ) ->
ClickableText.button settings.label
(size
:: ClickableText.onClick (ShowItWorked "ClickableText" sizeLabel)
:: List.map Tuple.second settings.attributes
)
|> exampleCell
)
]
row : String -> List (Html msg) -> Html msg
row label tds =
tr [] (th [] [ td [] [ text label ] ] :: tds)
2019-07-30 22:13:09 +03:00
exampleCell : Html msg -> Html msg
exampleCell view =
td [ css [ verticalAlign middle, Css.width (Css.px 200) ] ] [ view ]