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

298 lines
9.1 KiB
Elm
Raw Normal View History

2020-03-31 22:43:32 +03:00
module Examples.ClickableSvg exposing (Msg, State, example)
2020-03-09 19:38:16 +03:00
{-|
2020-03-31 22:43:32 +03:00
@docs Msg, State, example
2020-03-09 19:38:16 +03:00
-}
import Accessibility.Styled.Key as Key
import Category exposing (Category(..))
import CommonControls
2020-03-09 19:38:16 +03:00
import Css
2020-09-28 21:28:24 +03:00
import Debug.Control as Control exposing (Control)
2022-03-04 21:24:01 +03:00
import Debug.Control.Extra as ControlExtra
2022-03-04 22:21:34 +03:00
import Debug.Control.View as ControlView
import EllieLink
2021-04-07 18:39:52 +03:00
import EventExtras
2020-03-31 23:20:03 +03:00
import Example exposing (Example)
import Html.Styled as Html exposing (Html)
2020-03-09 19:38:16 +03:00
import Html.Styled.Attributes as Attributes
2020-10-21 19:07:51 +03:00
import Nri.Ui.ClickableSvg.V2 as ClickableSvg
2020-03-09 19:38:16 +03:00
import Nri.Ui.Colors.V1 as Colors
2022-03-15 21:06:13 +03:00
import Nri.Ui.Svg.V1 exposing (Svg)
import Nri.Ui.Tooltip.V2 as Tooltip
2020-03-09 19:38:16 +03:00
import Nri.Ui.UiIcon.V1 as UiIcon
version : Int
version =
2
2020-03-09 19:38:16 +03:00
{-| -}
2020-03-31 23:20:03 +03:00
example : Example State Msg
2020-03-31 22:43:32 +03:00
example =
{ name = moduleName
, version = version
2020-03-31 22:43:32 +03:00
, categories = [ Buttons, Icons ]
, keyboardSupport = []
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:13:17 +03:00
, preview =
[ ClickableSvg.link "ClickableSvg small"
UiIcon.link
[ ClickableSvg.small
, ClickableSvg.custom [ Key.tabbable False ]
]
, ClickableSvg.link "ClickableSvg medium"
UiIcon.link
[ ClickableSvg.medium
, ClickableSvg.custom [ Key.tabbable False ]
]
, ClickableSvg.link "ClickableSvg large"
UiIcon.link
[ ClickableSvg.large
, ClickableSvg.custom [ Key.tabbable False ]
]
2021-11-05 22:13:17 +03:00
]
2020-03-31 22:43:32 +03:00
, view =
\ellieLinkConfig state ->
2022-03-04 22:21:34 +03:00
[ ControlView.view
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = SetControls
2022-03-04 22:21:34 +03:00
, settings = state.settings
, toExampleCode =
\{ label, icon, attributes } ->
let
toCode fName =
moduleName
++ "."
2022-03-04 22:21:34 +03:00
++ fName
++ " \""
++ label
++ "\"\n\t"
++ Tuple.first icon
2022-03-04 22:21:34 +03:00
++ ControlView.codeFromList attributes
in
[ { sectionName = "Button"
, code = toCode "button"
}
, { sectionName = "Link"
, code = toCode "link"
}
]
}
, viewExampleTable (Control.currentValue state.settings)
, viewExample
"""
Tooltip.view
{ trigger =
\\attrs ->
ClickableSvg.button "Preview"
UiIcon.preview
2021-04-07 18:39:52 +03:00
[ ClickableSvg.custom attrs,
, ClickableSvg.custom [ EventExtras.onClickStopPropagation (ShowItWorked "You clicked the preview button!") ]
]
, id = "preview-tooltip"
}
[ Tooltip.plaintext "Preview"
, Tooltip.primaryLabel
, Tooltip.onHover SetPreviewTooltip
, Tooltip.open state.tooltipPreview
, Tooltip.smallPadding
, Tooltip.fitToContent
2020-06-09 23:47:53 +03:00
]
"""
<|
Tooltip.view
{ trigger =
\attrs ->
ClickableSvg.button "Preview"
UiIcon.preview
2021-04-07 18:39:52 +03:00
[ ClickableSvg.custom attrs
, ClickableSvg.custom [ EventExtras.onClickStopPropagation (ShowItWorked "You clicked the preview button!") ]
]
, id = "preview-tooltip"
}
[ Tooltip.plaintext "Preview"
, Tooltip.primaryLabel
, Tooltip.onHover SetPreviewTooltip
, Tooltip.open state.tooltipPreview
, Tooltip.smallPadding
, Tooltip.fitToContent
2020-06-09 23:47:53 +03:00
]
2020-03-09 21:05:28 +03:00
]
2020-03-09 19:38:16 +03:00
}
moduleName : String
moduleName =
"ClickableSvg"
2022-03-04 22:21:34 +03:00
viewExampleTable : Settings Msg -> Html Msg
viewExampleTable { label, icon, attributes } =
2020-09-29 00:37:19 +03:00
let
2022-03-04 22:21:34 +03:00
sharedAttributes =
List.map Tuple.second attributes
2020-09-29 00:45:03 +03:00
viewExampleRow index ( themeName, theme ) =
Html.tr []
[ cell index [ Html.text themeName ]
2022-03-04 22:21:34 +03:00
, cell index [ buttonExample (theme :: sharedAttributes) ]
, cell index [ linkExample (theme :: sharedAttributes) ]
, cell index [ buttonExample (ClickableSvg.withBorder :: theme :: sharedAttributes) ]
, cell index [ linkExample (ClickableSvg.withBorder :: theme :: sharedAttributes) ]
2020-09-29 00:45:03 +03:00
]
cell index =
2020-09-29 00:37:19 +03:00
Html.td
[ Attributes.css
2020-09-29 00:45:03 +03:00
[ if modBy 2 index == 0 then
Css.backgroundColor Colors.gray96
else
Css.backgroundColor Colors.white
, Css.padding (Css.px 10)
2020-09-29 00:37:19 +03:00
]
]
buttonExample attributes_ =
2022-03-04 21:47:06 +03:00
ClickableSvg.button label
(Tuple.second icon)
(ClickableSvg.onClick (ShowItWorked "You clicked the back button!")
:: attributes_
)
linkExample attributes_ =
2022-03-04 21:47:06 +03:00
ClickableSvg.link label
(Tuple.second icon)
(ClickableSvg.linkSpa "some_link" :: attributes_)
2020-09-29 00:37:19 +03:00
in
Html.table []
[ Html.thead []
[ Html.tr []
2020-09-29 00:45:03 +03:00
[ Html.th [] [ Html.text "theme" ]
2020-09-29 00:56:08 +03:00
, Html.th [ Attributes.colspan 2 ] [ Html.text "" ]
, Html.th [ Attributes.colspan 2 ] [ Html.text "withBorder" ]
]
]
2020-09-29 00:45:03 +03:00
, Html.tbody [] <|
List.indexedMap viewExampleRow
[ ( "primary", ClickableSvg.primary )
, ( "secondary", ClickableSvg.secondary )
, ( "danger", ClickableSvg.danger )
, ( "dangerSecondary", ClickableSvg.dangerSecondary )
]
2020-09-29 00:56:08 +03:00
, Html.tfoot []
[ Html.tr []
[ Html.td [] [ Html.text "" ]
, Html.td [] [ Html.text "button" ]
, Html.td [] [ Html.text "link" ]
, Html.td [] [ Html.text "button" ]
, Html.td [] [ Html.text "link" ]
]
]
]
viewExample : String -> Html.Html msg -> Html.Html msg
viewExample code html =
Html.div
[ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ html
, viewCode code
]
2020-03-09 20:55:43 +03:00
viewCode : String -> Html.Html msg
viewCode renderStrategy =
2020-03-09 20:50:00 +03:00
Html.code
2020-03-09 19:38:16 +03:00
[ Attributes.css
[ Css.width (Css.px 400)
, Css.marginLeft (Css.px 20)
2020-03-09 19:38:16 +03:00
]
]
2020-03-09 20:55:43 +03:00
[ Html.pre [] [ Html.text renderStrategy ] ]
2020-03-09 19:38:16 +03:00
{-| -}
type alias State =
2020-06-09 23:47:53 +03:00
{ tooltipPreview : Bool
, tooltipShareTo : Bool
, settings : Control (Settings Msg)
2020-06-09 23:47:53 +03:00
}
2020-03-09 19:38:16 +03:00
{-| -}
init : State
init =
2020-06-09 23:47:53 +03:00
{ tooltipPreview = False
, tooltipShareTo = False
2020-09-28 21:28:24 +03:00
, settings = initSettings
2020-06-09 23:47:53 +03:00
}
2020-03-09 19:38:16 +03:00
{-| -}
type Msg
2020-03-31 22:43:32 +03:00
= ShowItWorked String
2020-06-09 23:47:53 +03:00
| SetPreviewTooltip Bool
| SetControls (Control (Settings Msg))
2020-03-09 19:38:16 +03:00
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
2020-03-31 22:43:32 +03:00
case msg of
ShowItWorked message ->
2022-03-15 21:06:13 +03:00
( Debug.log "ClickableSvg" message |> always state, Cmd.none )
2020-06-09 23:47:53 +03:00
SetPreviewTooltip bool ->
( { state | tooltipPreview = bool }, Cmd.none )
2020-09-28 21:28:24 +03:00
SetControls settings ->
( { state | settings = settings }, Cmd.none )
type alias Settings msg =
2022-03-04 21:47:06 +03:00
{ label : String
, icon : ( String, Svg )
2022-03-04 22:21:34 +03:00
, attributes : List ( String, ClickableSvg.Attribute msg )
2020-09-28 21:44:00 +03:00
}
2020-09-28 21:28:24 +03:00
initSettings : Control (Settings msg)
2020-09-28 21:28:24 +03:00
initSettings =
Control.record Settings
2022-03-04 21:47:06 +03:00
|> Control.field "label" (Control.string "Back")
|> Control.field "icon" CommonControls.uiIcon
2022-03-04 21:24:01 +03:00
|> Control.field "attributes"
(ControlExtra.list
2022-03-05 00:51:31 +03:00
|> CommonControls.disabledListItem "ClickableSvg" ClickableSvg.disabled
|> ControlExtra.optionalListItem "exactSize"
(Control.map
(\v -> ( "ClickableSvg.exactSize " ++ String.fromInt v, ClickableSvg.exactSize v ))
(ControlExtra.int 36)
)
|> CommonControls.css
{ moduleName = "ClickableSvg"
, use = ClickableSvg.css
}
|> CommonControls.mobileCss
{ moduleName = "ClickableSvg"
, use = ClickableSvg.mobileCss
}
|> CommonControls.quizEngineMobileCss
{ moduleName = "ClickableSvg"
, use = ClickableSvg.quizEngineMobileCss
}
|> CommonControls.notMobileCss
{ moduleName = "ClickableSvg"
, use = ClickableSvg.notMobileCss
}
)