NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-24 06:02:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

also test toggletip and add some accessibility goodies

Browse Source
This commit is contained in:
brookeangel 2019-09-30 15:29:43 -07:00
parent 77b485a485
commit 7e55bfbd2a
3 changed files with 105 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Nri/Ui/Tooltip/V1.elm
View File

@ -224,17 +224,18 @@ A toggle tip is always triggered by a click.
toggleTip :
{ onTrigger : Bool -> msg
, isOpen : Bool
, label : String
, extraButtonAttrs : List (Attribute msg)
}
-> Tooltip msg
-> Html msg
toggleTip { isOpen, onTrigger, extraButtonAttrs } tooltip_ =
toggleTip { isOpen, onTrigger, extraButtonAttrs, label } tooltip_ =
Nri.Ui.styled Html.div
"Nri-Ui-Tooltip-V1-ToggleTip"
tooltipContainerStyles
[]
[ Html.button
([ Widget.label "More information"
([ Widget.label label
, css
([ Css.width (Css.px 20)
, Css.height (Css.px 20)
@ -243,6 +244,7 @@ toggleTip { isOpen, onTrigger, extraButtonAttrs } tooltip_ =
++ buttonStyleOverrides
)
, Events.onClickStopPropagation (onTrigger True)
, Events.onBlur (onTrigger False)
]
++ extraButtonAttrs
)

1
styleguide-app/Examples/Tooltip.elm
View File

@ -93,6 +93,7 @@ example msg model =
|> Tooltip.toggleTip
{ onTrigger = ToggleTooltip ToggleTip >> msg
, isOpen = model.openTooltip == Just ToggleTip
, label = "More info"
, extraButtonAttrs = []
}
]

149
tests/Spec/Nri/Ui/Tooltip/V1.elm
View File

@ -1,6 +1,7 @@
module Spec.Nri.Ui.Tooltip.V1 exposing (spec)
import Accessibility.Aria as Aria
import Accessibility.Widget as Widget
import Expect
import Html
import Html.Styled as HtmlStyled
@ -35,54 +36,104 @@ update msg model =
spec : Test
spec =
describe "Nri.Ui.Tooltip.V1"
([ Tooltip.OnClick, Tooltip.OnHover ]
|> List.map
(\trigger ->
test ("Tooltip with " ++ Debug.toString trigger ++ " trigger is available on focus") <|
\() ->
ProgramTest.createSandbox
{ init = init
, update = update
, view =
\model ->
Tooltip.tooltip [ HtmlStyled.text "This will be the primary label" ]
|> Tooltip.primaryLabel
{ trigger = trigger
, triggerHtml = HtmlStyled.text "label-less icon"
, onTrigger = ToggleTooltip
, isOpen = model.tooltipOpen
, extraButtonAttrs = []
, id = "primary-label"
}
|> HtmlStyled.toUnstyled
}
|> ProgramTest.start ()
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.tag "button"
, Selector.containing [ Selector.text "label-less icon" ]
[ describe "toggleTip"
[ test "Toggletip is available on click and hides on blur" <|
\() ->
ProgramTest.createSandbox
{ init = init
, update = update
, view = viewToggleTip
}
|> ProgramTest.start ()
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.tag "button"
, Selector.attribute
(Widget.label "More info")
]
)
Event.click
|> ProgramTest.ensureViewHas
[ Selector.text "Toggly"
]
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.tag "button"
, Selector.attribute
(Widget.label "More info")
]
)
Event.blur
|> ProgramTest.ensureViewHasNot
[ Selector.text "Toggly"
]
|> ProgramTest.done
]
, describe "tooltips"
([ Tooltip.OnClick, Tooltip.OnHover ]
|> List.map
(\trigger ->
test ("Tooltip with " ++ Debug.toString trigger ++ " trigger is available on focus") <|
\() ->
ProgramTest.createSandbox
{ init = init
, update = update
, view = viewTooltip trigger
}
|> ProgramTest.start ()
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.tag "button"
, Selector.containing [ Selector.text "label-less icon" ]
]
)
Event.focus
|> ProgramTest.ensureViewHas
[ tag "button"
, Selector.attribute (Aria.labeledBy "primary-label")
]
)
Event.focus
|> ProgramTest.ensureViewHas
[ tag "button"
, Selector.attribute (Aria.labeledBy "primary-label")
]
|> ProgramTest.ensureViewHas
[ id "primary-label"
, Selector.text "This will be the primary label"
]
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.tag "button"
, Selector.containing [ Selector.text "label-less icon" ]
|> ProgramTest.ensureViewHas
[ id "primary-label"
, Selector.text "This will be the primary label"
]
)
Event.blur
|> ProgramTest.ensureViewHasNot
[ id "primary-label"
, Selector.text "This will be the primary label"
]
|> ProgramTest.done
)
)
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.tag "button"
, Selector.containing [ Selector.text "label-less icon" ]
]
)
Event.blur
|> ProgramTest.ensureViewHasNot
[ id "primary-label"
, Selector.text "This will be the primary label"
]
|> ProgramTest.done
)
)
]
viewTooltip : Tooltip.Trigger -> Model -> Html.Html Msg
viewTooltip trigger model =
Tooltip.tooltip [ HtmlStyled.text "This will be the primary label" ]
|> Tooltip.primaryLabel
{ trigger = trigger
, triggerHtml = HtmlStyled.text "label-less icon"
, onTrigger = ToggleTooltip
, isOpen = model.tooltipOpen
, extraButtonAttrs = []
, id = "primary-label"
}
|> HtmlStyled.toUnstyled
viewToggleTip : Model -> Html.Html Msg
viewToggleTip model =
Tooltip.tooltip [ HtmlStyled.text "Toggly!" ]
|> Tooltip.toggleTip
{ onTrigger = ToggleTooltip
, isOpen = model.tooltipOpen
, extraButtonAttrs = []
, label = "More info"
}
|> HtmlStyled.toUnstyled