mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-19 03:31:32 +03:00
333 lines
11 KiB
Elm
333 lines
11 KiB
Elm
module Examples.ClickableSvg exposing (Msg, State, example)
|
|
|
|
{-|
|
|
|
|
@docs Msg, State, example
|
|
|
|
-}
|
|
|
|
import AtomicDesignType exposing (AtomicDesignType(..))
|
|
import Category exposing (Category(..))
|
|
import Color exposing (Color)
|
|
import Css
|
|
import Debug.Control as Control exposing (Control)
|
|
import Example exposing (Example)
|
|
import Examples.IconExamples as IconExamples
|
|
import Html.Styled as Html exposing (Html)
|
|
import Html.Styled.Attributes as Attributes
|
|
import Html.Styled.Events as Events
|
|
import KeyboardSupport exposing (Direction(..), Key(..))
|
|
import Nri.Ui.ClickableSvg.V1 as ClickableSvg
|
|
import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
|
|
import Nri.Ui.Colors.V1 as Colors
|
|
import Nri.Ui.Heading.V2 as Heading
|
|
import Nri.Ui.Select.V7 as Select
|
|
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
|
|
import Nri.Ui.Tooltip.V2 as Tooltip
|
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
|
|
|
|
|
{-| -}
|
|
example : Example State Msg
|
|
example =
|
|
{ name = "ClickableSvg"
|
|
, version = 1
|
|
, categories = [ Buttons, Icons ]
|
|
, atomicDesignType = Molecule
|
|
, keyboardSupport = []
|
|
, state = init
|
|
, update = update
|
|
, subscriptions = \_ -> Sub.none
|
|
, view =
|
|
\state ->
|
|
let
|
|
( icon, attributes ) =
|
|
applySettings state.settings
|
|
in
|
|
[ Html.fromUnstyled (Control.view SetControls state.settings)
|
|
, viewExampleTable icon attributes
|
|
, viewExample
|
|
"""
|
|
ClickableSvg.button "Go to tutorial"
|
|
UiIcon.footsteps
|
|
[ ClickableSvg.width (Css.px 30)
|
|
, ClickableSvg.height (Css.px 30)
|
|
, ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
|
|
, ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
|
|
, ClickableSvg.css [ Css.border3 (Css.px 1) Css.dashed Colors.azure ]
|
|
]
|
|
"""
|
|
<|
|
|
ClickableSvg.button "Go to tutorial"
|
|
UiIcon.footsteps
|
|
[ ClickableSvg.width (Css.px 30)
|
|
, ClickableSvg.height (Css.px 30)
|
|
, ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
|
|
, ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
|
|
, ClickableSvg.css [ Css.border3 (Css.px 1) Css.dashed Colors.azure ]
|
|
]
|
|
, viewExample
|
|
"""
|
|
Tooltip.view
|
|
{ trigger =
|
|
\\attrs ->
|
|
ClickableSvg.button "Preview"
|
|
UiIcon.preview
|
|
[ ClickableSvg.width (Css.px 20)
|
|
, ClickableSvg.height (Css.px 20)
|
|
, ClickableSvg.onClick (ShowItWorked "You clicked the preview button!")
|
|
, ClickableSvg.withBorder
|
|
, ClickableSvg.custom attrs
|
|
]
|
|
, id = "preview-tooltip"
|
|
}
|
|
[ Tooltip.plaintext "Preview"
|
|
, Tooltip.primaryLabel
|
|
, Tooltip.onHover SetPreviewTooltip
|
|
, Tooltip.open state.tooltipPreview
|
|
, Tooltip.smallPadding
|
|
, Tooltip.fitToContent
|
|
, Tooltip.alignEnd (Css.px 28)
|
|
]
|
|
"""
|
|
<|
|
|
Tooltip.view
|
|
{ trigger =
|
|
\attrs ->
|
|
ClickableSvg.button "Preview"
|
|
UiIcon.preview
|
|
[ ClickableSvg.width (Css.px 20)
|
|
, ClickableSvg.height (Css.px 20)
|
|
, ClickableSvg.onClick (ShowItWorked "You clicked the preview button!")
|
|
, ClickableSvg.withBorder
|
|
, ClickableSvg.custom attrs
|
|
]
|
|
, id = "preview-tooltip"
|
|
}
|
|
[ Tooltip.plaintext "Preview"
|
|
, Tooltip.primaryLabel
|
|
, Tooltip.onHover SetPreviewTooltip
|
|
, Tooltip.open state.tooltipPreview
|
|
, Tooltip.smallPadding
|
|
, Tooltip.fitToContent
|
|
, Tooltip.alignEnd (Css.px 28)
|
|
]
|
|
, viewExample
|
|
"""
|
|
Tooltip.view
|
|
{ trigger =
|
|
\\attrs ->
|
|
ClickableSvg.button "Share"
|
|
UiIcon.share
|
|
[ ClickableSvg.width (Css.px 20)
|
|
, ClickableSvg.height (Css.px 20)
|
|
, ClickableSvg.onClick (ShowItWorked "You clicked the share button!")
|
|
, ClickableSvg.custom attrs
|
|
]
|
|
, id = "share-tooltip"
|
|
}
|
|
[ Tooltip.plaintext "Share"
|
|
, Tooltip.primaryLabel
|
|
, Tooltip.onHover SetShareTooltip
|
|
, Tooltip.open state.tooltipShareTo
|
|
, Tooltip.smallPadding
|
|
, Tooltip.fitToContent
|
|
, Tooltip.onRight
|
|
]
|
|
"""
|
|
<|
|
|
Tooltip.view
|
|
{ trigger =
|
|
\attrs ->
|
|
ClickableSvg.button "Share"
|
|
UiIcon.share
|
|
[ ClickableSvg.width (Css.px 20)
|
|
, ClickableSvg.height (Css.px 20)
|
|
, ClickableSvg.onClick (ShowItWorked "You clicked the share button!")
|
|
, ClickableSvg.custom attrs
|
|
]
|
|
, id = "share-tooltip"
|
|
}
|
|
[ Tooltip.plaintext "Share"
|
|
, Tooltip.primaryLabel
|
|
, Tooltip.onHover SetShareTooltip
|
|
, Tooltip.open state.tooltipShareTo
|
|
, Tooltip.smallPadding
|
|
, Tooltip.fitToContent
|
|
, Tooltip.onRight
|
|
]
|
|
]
|
|
}
|
|
|
|
|
|
viewExampleTable : Svg -> List (ClickableSvg.Attribute Msg) -> Html Msg
|
|
viewExampleTable icon attributes =
|
|
let
|
|
cell =
|
|
Html.td
|
|
[ Attributes.css
|
|
[ Css.backgroundColor Colors.gray96
|
|
, Css.padding (Css.px 30)
|
|
]
|
|
]
|
|
in
|
|
Html.table []
|
|
[ Html.thead []
|
|
[ Html.tr []
|
|
[ Html.th [] [ Html.text "button" ]
|
|
, Html.th [] [ Html.text "link" ]
|
|
]
|
|
]
|
|
, Html.tbody []
|
|
[ Html.tr []
|
|
[ cell
|
|
[ ClickableSvg.button "Button example"
|
|
icon
|
|
(ClickableSvg.onClick (ShowItWorked "You clicked the back button!")
|
|
:: attributes
|
|
)
|
|
]
|
|
, cell
|
|
[ ClickableSvg.link "Link example"
|
|
icon
|
|
(ClickableSvg.linkSpa "some_link" :: attributes)
|
|
]
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
viewExample : String -> Html.Html msg -> Html.Html msg
|
|
viewExample code html =
|
|
Html.div
|
|
[ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
|
|
[ html
|
|
, viewCode code
|
|
]
|
|
|
|
|
|
viewCode : String -> Html.Html msg
|
|
viewCode renderStrategy =
|
|
Html.code
|
|
[ Attributes.css
|
|
[ Css.width (Css.px 400)
|
|
, Css.marginLeft (Css.px 20)
|
|
]
|
|
]
|
|
[ Html.pre [] [ Html.text renderStrategy ] ]
|
|
|
|
|
|
{-| -}
|
|
type alias State =
|
|
{ tooltipPreview : Bool
|
|
, tooltipShareTo : Bool
|
|
, settings : Control (Settings Msg)
|
|
}
|
|
|
|
|
|
{-| -}
|
|
init : State
|
|
init =
|
|
{ tooltipPreview = False
|
|
, tooltipShareTo = False
|
|
, settings = initSettings
|
|
}
|
|
|
|
|
|
{-| -}
|
|
type Msg
|
|
= ShowItWorked String
|
|
| SetPreviewTooltip Bool
|
|
| SetShareTooltip Bool
|
|
| SetControls (Control (Settings Msg))
|
|
|
|
|
|
{-| -}
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
update msg state =
|
|
case msg of
|
|
ShowItWorked message ->
|
|
let
|
|
_ =
|
|
Debug.log "ClickableSvg" message
|
|
in
|
|
( state, Cmd.none )
|
|
|
|
SetPreviewTooltip bool ->
|
|
( { state | tooltipPreview = bool }, Cmd.none )
|
|
|
|
SetShareTooltip bool ->
|
|
( { state | tooltipShareTo = bool }, Cmd.none )
|
|
|
|
SetControls settings ->
|
|
( { state | settings = settings }, Cmd.none )
|
|
|
|
|
|
type alias Settings msg =
|
|
{ icon : Svg
|
|
, disabled : ClickableSvg.Attribute msg
|
|
, withBorder : ClickableSvg.Attribute msg
|
|
, theme : ClickableSvg.Attribute msg
|
|
, width : ClickableSvg.Attribute msg
|
|
, height : ClickableSvg.Attribute msg
|
|
}
|
|
|
|
|
|
applySettings : Control (Settings msg) -> ( Svg, List (ClickableSvg.Attribute msg) )
|
|
applySettings settings =
|
|
let
|
|
{ icon, disabled, withBorder, theme, width, height } =
|
|
Control.currentValue settings
|
|
in
|
|
( icon, [ disabled, withBorder, theme, width, height ] )
|
|
|
|
|
|
initSettings : Control (Settings msg)
|
|
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 )
|
|
]
|
|
)
|
|
|> Control.field "disabled"
|
|
(Control.map ClickableSvg.disabled (Control.bool False))
|
|
|> Control.field "withBorder"
|
|
(Control.map
|
|
(\hasBorder ->
|
|
if hasBorder then
|
|
ClickableSvg.withBorder
|
|
|
|
else
|
|
ClickableSvg.css []
|
|
)
|
|
(Control.bool False)
|
|
)
|
|
|> Control.field "theme"
|
|
(Control.choice
|
|
[ ( "primary", Control.value ClickableSvg.primary )
|
|
, ( "secondary", Control.value ClickableSvg.secondary )
|
|
, ( "danger", Control.value ClickableSvg.danger )
|
|
, ( "dangerSecondary", Control.value ClickableSvg.dangerSecondary )
|
|
]
|
|
)
|
|
|> Control.field "width"
|
|
(Control.map (Css.px >> ClickableSvg.width) (controlNumber 30))
|
|
|> Control.field "height"
|
|
(Control.map (Css.px >> ClickableSvg.height) (controlNumber 30))
|
|
|
|
|
|
controlNumber : Float -> Control Float
|
|
controlNumber default =
|
|
Control.map (String.toFloat >> Maybe.withDefault default)
|
|
(Control.string (String.fromFloat default))
|