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

290 lines
9.0 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(..))
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)
2021-04-07 18:39:52 +03:00
import EventExtras
2020-03-31 23:20:03 +03:00
import Example exposing (Example)
2020-03-09 19:38:16 +03:00
import Examples.IconExamples as IconExamples
import Html.Styled as Html exposing (Html)
2020-03-09 19:38:16 +03:00
import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events
import KeyboardSupport exposing (Direction(..), Key(..))
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.Extra exposing (fromCssColor, toCssColor)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V2 as Heading
2020-04-24 23:11:09 +03:00
import Nri.Ui.Select.V7 as Select
2020-09-28 21:44:00 +03:00
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
import Nri.Ui.Tooltip.V2 as Tooltip
2020-03-09 19:38:16 +03:00
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 = "ClickableSvg"
2020-10-21 19:07:51 +03:00
, version = 2
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 =
\state ->
2020-09-28 21:28:24 +03:00
let
( icon, attributes ) =
applySettings state.settings
2020-09-28 21:28:24 +03:00
in
[ Html.fromUnstyled (Control.view SetControls state.settings)
, viewExampleTable icon attributes
, 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
}
viewExampleTable : Svg -> List (ClickableSvg.Attribute Msg) -> Html Msg
viewExampleTable icon attributes =
2020-09-29 00:37:19 +03:00
let
2020-09-29 00:45:03 +03:00
viewExampleRow index ( themeName, theme ) =
Html.tr []
[ cell index [ Html.text themeName ]
, cell index [ buttonExample (theme :: attributes) ]
, cell index [ linkExample (theme :: attributes) ]
2020-09-29 00:56:08 +03:00
, cell index [ buttonExample (ClickableSvg.withBorder :: theme :: attributes) ]
, cell index [ linkExample (ClickableSvg.withBorder :: theme :: attributes) ]
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_ =
ClickableSvg.button "Button example"
icon
(ClickableSvg.onClick (ShowItWorked "You clicked the back button!")
:: attributes_
)
linkExample attributes_ =
ClickableSvg.link "Link example"
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
| SetShareTooltip 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 ->
let
_ =
Debug.log "ClickableSvg" message
in
( state, Cmd.none )
2020-06-09 23:47:53 +03:00
SetPreviewTooltip bool ->
( { state | tooltipPreview = bool }, Cmd.none )
SetShareTooltip bool ->
( { state | tooltipShareTo = bool }, Cmd.none )
2020-09-28 21:28:24 +03:00
SetControls settings ->
( { state | settings = settings }, Cmd.none )
type alias Settings msg =
{ icon : Svg
, disabled : ClickableSvg.Attribute msg
, size : ClickableSvg.Attribute msg
2020-10-21 20:43:15 +03:00
, width : Maybe (ClickableSvg.Attribute msg)
2020-10-21 21:34:44 +03:00
, height : Maybe (ClickableSvg.Attribute msg)
2020-09-28 21:44:00 +03:00
}
2020-09-28 21:28:24 +03:00
applySettings : Control (Settings msg) -> ( Svg, List (ClickableSvg.Attribute msg) )
applySettings settings =
let
2020-10-21 21:34:44 +03:00
{ icon, disabled, size, width, height } =
Control.currentValue settings
in
2020-10-21 21:34:44 +03:00
( icon, List.filterMap identity [ Just disabled, Just size, width, height ] )
initSettings : Control (Settings msg)
2020-09-28 21:28:24 +03:00
initSettings =
Control.record Settings
|> Control.field "icon"
(Control.choice
[ ( "arrowLeft", Control.value UiIcon.arrowLeft )
, ( "unarchive", Control.value UiIcon.unarchive )
, ( "share", Control.value UiIcon.share )
, ( "preview", Control.value UiIcon.preview )
, ( "skip", Control.value UiIcon.skip )
, ( "copyToClipboard", Control.value UiIcon.copyToClipboard )
, ( "gift", Control.value UiIcon.gift )
, ( "home", Control.value UiIcon.home )
, ( "library", Control.value UiIcon.library )
, ( "searchInCicle", Control.value UiIcon.searchInCicle )
]
)
2020-09-28 21:44:00 +03:00
|> Control.field "disabled"
(Control.map ClickableSvg.disabled (Control.bool False))
|> Control.field "size"
(Control.choice
[ ( "small", Control.value ClickableSvg.small )
, ( "medium", Control.value ClickableSvg.medium )
, ( "large", Control.value ClickableSvg.large )
]
)
2020-10-21 20:43:15 +03:00
|> Control.field "exactWidth"
(Control.maybe False (Control.map ClickableSvg.exactWidth (controlInt 40)))
2020-10-21 21:34:44 +03:00
|> Control.field "exactHeight"
(Control.maybe False (Control.map ClickableSvg.exactHeight (controlInt 20)))
2020-09-28 21:44:00 +03:00
2020-10-21 20:43:15 +03:00
controlInt : Int -> Control Int
controlInt default =
Control.map (String.toInt >> Maybe.withDefault default)
(Control.string (String.fromInt default))