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

289 lines
8.8 KiB
Elm
Raw Normal View History

2020-03-31 22:43:32 +03:00
module Examples.Tooltip exposing (example, State, Msg)
2019-08-17 01:26:51 +03:00
{-|
2020-03-31 22:43:32 +03:00
@docs example, State, Msg
2019-08-17 01:26:51 +03:00
-}
2020-09-03 20:26:48 +03:00
import Accessibility.Styled as Html exposing (Html)
2020-06-19 23:41:28 +03:00
import AtomicDesignType exposing (AtomicDesignType(..))
import Category exposing (Category(..))
2019-08-17 01:26:51 +03:00
import Css
2020-09-03 20:33:31 +03:00
import Debug.Control as Control exposing (Control)
2020-03-31 23:20:03 +03:00
import Example exposing (Example)
2020-09-03 20:50:42 +03:00
import Html.Styled.Attributes as Attributes exposing (css, href)
import KeyboardSupport exposing (Direction(..), Key(..))
import Nri.Ui.ClickableSvg.V1 as ClickableSvg
import Nri.Ui.ClickableText.V3 as ClickableText
2020-09-03 20:50:42 +03:00
import Nri.Ui.Colors.V1 as Colors
2019-08-17 01:26:51 +03:00
import Nri.Ui.Heading.V2 as Heading
2020-09-03 20:50:42 +03:00
import Nri.Ui.Svg.V1 as Svg
2019-12-03 21:43:24 +03:00
import Nri.Ui.Text.V4 as Text
2020-09-03 18:44:48 +03:00
import Nri.Ui.Tooltip.V2 as Tooltip
2020-09-03 20:50:42 +03:00
import Nri.Ui.UiIcon.V1 as UiIcon
2019-08-17 01:26:51 +03:00
2020-09-03 20:26:48 +03:00
example : Example State Msg
example =
{ name = "Nri.Ui.Tooltip.V2"
, categories = [ Widgets ]
, atomicDesignType = Molecule
, keyboardSupport = []
, state = init
, update = update
, subscriptions = \_ -> Sub.none
, view = view
}
2019-08-17 01:26:51 +03:00
type alias State =
{ openTooltip : Maybe TooltipType
, staticExampleSettings : Control ExampleSettings
2019-08-17 01:26:51 +03:00
}
init : State
init =
2020-09-03 20:26:48 +03:00
{ openTooltip = Nothing
2020-09-03 20:33:31 +03:00
, staticExampleSettings = initStaticExampleSettings
2020-09-03 20:26:48 +03:00
}
type TooltipType
= PrimaryLabel
2020-09-03 20:26:48 +03:00
| AuxillaryDescription
| LearnMore
2019-08-17 01:26:51 +03:00
type Msg
= ToggleTooltip TooltipType Bool
| SetStaticExampleSettings (Control ExampleSettings)
2019-08-17 01:26:51 +03:00
2020-03-31 22:43:32 +03:00
update : Msg -> State -> ( State, Cmd Msg )
2019-08-17 01:26:51 +03:00
update msg model =
case msg of
ToggleTooltip type_ isOpen ->
if isOpen then
2020-03-31 22:43:32 +03:00
( { model | openTooltip = Just type_ }, Cmd.none )
2019-08-17 01:26:51 +03:00
else
2020-03-31 22:43:32 +03:00
( { model | openTooltip = Nothing }, Cmd.none )
2019-08-17 01:26:51 +03:00
2020-09-03 20:33:31 +03:00
SetStaticExampleSettings settings ->
( { model | staticExampleSettings = settings }, Cmd.none )
2019-08-17 01:26:51 +03:00
2020-09-03 20:26:48 +03:00
view : State -> List (Html Msg)
view model =
[ Heading.h3 [] [ Html.text "Using the Tooltip module" ]
, Text.mediumBody
[ Html.text "Label the Tooltip as either being the "
, viewPrimaryLabelTooltip model.openTooltip
, Html.text " or the "
, viewAuxillaryDescriptionToolip model.openTooltip
, Html.text " for the trigger content."
, viewToggleTip model.openTooltip
2020-09-03 20:26:48 +03:00
]
, viewCustomizableExample model.staticExampleSettings
]
viewPrimaryLabelTooltip : Maybe TooltipType -> Html Msg
viewPrimaryLabelTooltip openTooltip =
Tooltip.view
{ id = "tooltip__primaryLabel"
, trigger =
\eventHandlers ->
ClickableText.button "primaryLabel"
[ ClickableText.custom eventHandlers
]
2020-09-03 20:26:48 +03:00
}
[ Tooltip.html
[ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content"
, Html.br []
, Html.text "e.g. when the trigger content is an icon with no text."
]
2020-09-03 20:26:48 +03:00
, Tooltip.auxillaryDescription
, Tooltip.onHover (ToggleTooltip PrimaryLabel)
, Tooltip.open (openTooltip == Just PrimaryLabel)
, Tooltip.onBottom
2020-09-03 20:26:48 +03:00
]
viewAuxillaryDescriptionToolip : Maybe TooltipType -> Html Msg
viewAuxillaryDescriptionToolip openTooltip =
Tooltip.view
{ id = "tooltip__auxillaryDescription"
, trigger =
\eventHandlers ->
ClickableText.button "auxillaryDescription"
[ ClickableText.custom eventHandlers
]
}
[ Tooltip.html
[ Html.text "An auxillary description is used when the tooltip content provides supplementary information about its trigger content"
, Html.br []
, Html.text "e.g. when the trigger content is a word in the middle of a body of text that requires additional explanation."
2020-09-03 20:26:48 +03:00
]
, Tooltip.auxillaryDescription
, Tooltip.onHover (ToggleTooltip AuxillaryDescription)
, Tooltip.open (openTooltip == Just AuxillaryDescription)
, Tooltip.onBottom
2020-09-03 20:26:48 +03:00
]
viewToggleTip : Maybe TooltipType -> Html Msg
viewToggleTip openTooltip =
Tooltip.toggleTip { label = "tooltip__learn-more" }
[ Tooltip.html
[ Html.a
[ href "https://inclusive-components.design/tooltips-toggletips" ]
[ Html.text "Learn more" ]
2020-09-03 20:26:48 +03:00
]
, Tooltip.primaryLabel
, Tooltip.onHover (ToggleTooltip LearnMore)
, Tooltip.open (openTooltip == Just LearnMore)
, Tooltip.smallPadding
, Tooltip.fitToContent
2020-09-03 20:26:48 +03:00
]
2020-09-03 20:33:31 +03:00
type alias ExampleSettings =
2020-09-03 20:50:42 +03:00
{ content : Tooltip.Attribute Never
2020-09-03 20:52:46 +03:00
, direction : Tooltip.Attribute Never
2020-09-04 01:28:58 +03:00
, alignment : Tooltip.Attribute Never
2020-09-03 20:56:07 +03:00
, width : Tooltip.Attribute Never
2020-09-03 20:57:55 +03:00
, padding : Tooltip.Attribute Never
2020-09-03 20:50:42 +03:00
}
2020-09-03 20:33:31 +03:00
initStaticExampleSettings : Control ExampleSettings
2020-09-03 20:33:31 +03:00
initStaticExampleSettings =
Control.record ExampleSettings
2020-09-03 20:50:42 +03:00
|> Control.field "content" controlContent
2020-09-03 20:52:46 +03:00
|> Control.field "direction" controlDirection
2020-09-04 01:28:58 +03:00
|> Control.field "alignment" controlAlignment
2020-09-03 20:56:07 +03:00
|> Control.field "width" controlWidth
2020-09-03 20:57:55 +03:00
|> Control.field "padding" controlPadding
2020-09-03 20:50:42 +03:00
controlContent : Control (Tooltip.Attribute Never)
controlContent =
Control.choice
[ ( "plaintext"
, "Song lyrics are literature."
|> Control.string
|> Control.map Tooltip.plaintext
)
, ( "HTML (short)"
, [ Html.code [] [ Html.text "git status" ]
, Html.text " "
, Html.em [] [ Html.text "tries again" ]
]
|> Tooltip.html
|> Control.value
)
, ( "HTML"
, [ Html.text "Click "
, Html.a [ href "http://www.noredink.com", Attributes.target "_blank" ]
[ Html.text "here, yes, HERE, right here on this long tooltip. "
, Html.div
[ css
[ Css.display Css.inlineBlock
, Css.width (Css.px 20)
]
]
[ Svg.toHtml UiIcon.gear ]
]
, Html.text " to check out NoRedInk."
]
|> Tooltip.html
|> Control.value
)
]
2020-09-03 20:33:31 +03:00
2020-09-03 20:52:46 +03:00
controlDirection : Control (Tooltip.Attribute Never)
controlDirection =
Control.choice
[ ( "onTop", Control.value Tooltip.onTop )
, ( "onBottom", Control.value Tooltip.onBottom )
, ( "onLeft", Control.value Tooltip.onLeft )
, ( "onRight", Control.value Tooltip.onRight )
]
2020-09-04 01:28:58 +03:00
controlAlignment : Control (Tooltip.Attribute Never)
controlAlignment =
Control.choice
2020-09-05 01:09:13 +03:00
[ ( "alignMiddle (default)", Control.value Tooltip.alignMiddle )
, ( "alignStart", Control.map (Css.px >> Tooltip.alignStart) controlNumber )
, ( "alignEnd", Control.map (Css.px >> Tooltip.alignEnd) controlNumber )
2020-09-04 01:28:58 +03:00
]
controlNumber : Control Float
controlNumber =
Control.map (String.toFloat >> Maybe.withDefault 0) (Control.string "0")
2020-09-03 20:56:07 +03:00
controlWidth : Control (Tooltip.Attribute Never)
controlWidth =
Control.choice
[ ( "exactWidth 320 (default)", Control.value (Tooltip.exactWidth 320) )
2020-09-05 01:08:04 +03:00
, ( "exactWidth", Control.map (round >> Tooltip.exactWidth) controlNumber )
2020-09-03 20:56:07 +03:00
, ( "fitToContent", Control.value Tooltip.fitToContent )
]
2020-09-03 20:57:55 +03:00
controlPadding : Control (Tooltip.Attribute Never)
controlPadding =
Control.choice
[ ( "normalPadding (default)", Control.value Tooltip.normalPadding )
, ( "smallPadding", Control.value Tooltip.smallPadding )
2020-09-05 01:08:04 +03:00
, ( "customPadding", Control.map Tooltip.customPadding controlNumber )
2020-09-03 20:57:55 +03:00
]
viewCustomizableExample : Control ExampleSettings -> Html Msg
viewCustomizableExample controlSettings =
2020-09-03 20:33:31 +03:00
let
settings =
Control.currentValue controlSettings
2020-09-03 20:50:42 +03:00
attributes =
[ Tooltip.open True
, settings.content
2020-09-03 20:52:46 +03:00
, settings.direction
2020-09-04 01:28:58 +03:00
, settings.alignment
2020-09-03 20:56:07 +03:00
, settings.width
2020-09-03 20:57:55 +03:00
, settings.padding
2020-09-03 20:50:42 +03:00
]
2020-09-03 20:33:31 +03:00
in
Html.div []
[ Control.view SetStaticExampleSettings controlSettings
|> Html.fromUnstyled
2020-09-04 01:28:58 +03:00
, Html.div
[ css
[ Css.displayFlex
, Css.justifyContent Css.center
, Css.alignItems Css.center
, Css.height (Css.px 300)
]
]
2020-09-03 20:50:42 +03:00
[ Tooltip.view
{ trigger =
\eventHandlers ->
ClickableSvg.button "Arrow Up"
UiIcon.arrowTop
[ ClickableSvg.custom eventHandlers
]
2020-09-03 20:50:42 +03:00
, id = "my-top-tooltip"
}
attributes
|> Html.map never
]
2020-09-03 20:33:31 +03:00
]