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

Merge remote-tracking branch 'origin/master' into ink/message

Browse Source
This commit is contained in:
Aaron VonderHaar 2020-04-28 16:43:23 -07:00
commit 8b56dc9849
4 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/Nri/Ui/Tabs/V4.elm
View File

@ -147,14 +147,23 @@ viewTab { onSelect, tabs } viewInnerTab selected tab =
let
isSelected =
selected.id == tab.id
tabIndex =
-- From recommendation at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role#Best_practices
if isSelected then
0
else
-1
in
Html.styled Html.li
Html.styled Html.button
(stylesTabSelectable isSelected)
[ Events.onClick (onSelect tab.id)
, Key.onKeyDown [ Key.enter (onSelect tab.id) ]
, Events.onFocus (onSelect tab.id)
, Attributes.tabindex 0
, Role.presentation
, Attributes.tabindex tabIndex
, Widget.selected (selected.id == tab.id)
, Role.tab
, Attributes.id (tabToId tab)
, Events.on "keyup" <|
Json.Decode.andThen
@ -175,10 +184,9 @@ viewTab { onSelect, tabs } viewInnerTab selected tab =
Json.Decode.fail "Wrong key code"
)
Events.keyCode
]
[ Html.styled Html.div
, Attributes.css
[ Css.color Colors.navy
, Css.display Css.inlineBlock
, Css.margin zero
, Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20)
, Css.position Css.relative
, Css.textDecoration Css.none
@ -186,12 +194,10 @@ viewTab { onSelect, tabs } viewInnerTab selected tab =
, Css.fontFamily Css.inherit
, Css.fontSize Css.inherit
, Css.cursor Css.pointer
, Css.border zero
]
[ Role.tab
, Attributes.tabindex -1
, Widget.selected (selected.id == tab.id)
]
[ viewInnerTab tab ]
[ viewInnerTab tab
]
@ -249,7 +255,7 @@ links config =
[ Role.tabList
]
(config.tabs
|> mapWithCurrent (viewTabLink config)
|> mapWithCurrent viewTabLink
|> List.Zipper.toList
)
]
@ -257,8 +263,8 @@ links config =
]
viewTabLink : LinkConfig msg -> Bool -> LinkTabConfig msg -> Html msg
viewTabLink config isSelected tabConfig =
viewTabLink : Bool -> LinkTabConfig msg -> Html msg
viewTabLink isSelected tabConfig =
let
( tabLabel, tabHref, preventDefault ) =
case tabConfig of

3
styleguide-app/Examples/Table.elm
View File

@ -14,7 +14,6 @@ import Nri.Ui.Button.V5 as Button
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Table.V5 as Table
import Sort.Set as Set exposing (Set)
{-| -}
@ -36,7 +35,7 @@ example =
, subscriptions = \_ -> Sub.none
, categories = [ Tables ]
, view =
\state ->
\() ->
let
columns =
[ Table.string

8
styleguide-app/Examples/Tabs.elm
View File

@ -41,14 +41,16 @@ example =
, tabs =
case tab of
First ->
List.Zipper.from []
List.Zipper.from
[]
(Tabs.Tab "First tab" First)
[ Tabs.Tab "Second tab" Second ]
Second ->
List.Zipper.from []
(Tabs.Tab "Second tab" Second)
List.Zipper.from
[ Tabs.Tab "First tab" First ]
(Tabs.Tab "Second tab" Second)
[]
, content =
\id ->
case id of

36
tests/Spec/Nri/Ui/Tabs/V4.elm Normal file
View File

@ -0,0 +1,36 @@
module Spec.Nri.Ui.Tabs.V4 exposing (all)
import Accessibility.Styled as Html
import Expect
import List.Zipper.Extra
import Nri.Ui.Tabs.V4 as Tabs
import ProgramTest
import Test exposing (..)
all : Test
all =
describe "Nri.Ui.Tabs.V4"
[ test "works with ProgramTest.clickButton" <|
\() ->
ProgramTest.createSandbox
{ init = Err "No msg"
, update = \newResult _ -> newResult
, view =
\_ ->
Tabs.view
{ title = Nothing
, onSelect = Ok
, tabs =
List.Zipper.Extra.from []
(Tabs.Tab "First tab" "ID_FIRST")
[ Tabs.Tab "Second tab" "ID_SECOND" ]
, content = \_ -> Html.text ""
, alignment = Tabs.Center
}
|> Html.toUnstyled
}
|> ProgramTest.start ()
|> ProgramTest.clickButton "Second tab"
|> ProgramTest.expectModel (Expect.equal (Ok "ID_SECOND"))
]