mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 12:19:03 +03:00
Adds actual hrefs to the next and previous links
This commit is contained in:
parent
f417b1fa95
commit
15c138047e
@ -13,19 +13,20 @@ import Accessibility.Styled.Aria as Aria
|
||||
import Css
|
||||
import Css.Transitions as Transitions
|
||||
import Html.Styled.Attributes exposing (css)
|
||||
import List.Extra
|
||||
import Nri.Ui.ClickableText.V3 as ClickableText
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Html.V3 exposing (viewIf)
|
||||
|
||||
|
||||
{-| -}
|
||||
view : (Int -> msg) -> Int -> List a -> Html msg
|
||||
view : (Int -> msg) -> Int -> List String -> Html msg
|
||||
view goToPage currentPageIndex pages =
|
||||
viewIf (\_ -> view_ goToPage currentPageIndex pages)
|
||||
(List.length pages > 1)
|
||||
|
||||
|
||||
view_ : (Int -> msg) -> Int -> List a -> Html msg
|
||||
view_ : (Int -> msg) -> Int -> List String -> Html msg
|
||||
view_ goToPage currentPageIndex pages =
|
||||
let
|
||||
lastPageIndex =
|
||||
@ -40,7 +41,9 @@ view_ goToPage currentPageIndex pages =
|
||||
]
|
||||
, Aria.label "pagination"
|
||||
]
|
||||
[ previousPageLink goToPage currentPageIndex
|
||||
[ previousPageLink goToPage
|
||||
currentPageIndex
|
||||
(List.Extra.getAt (currentPageIndex - 1) pages)
|
||||
, List.range 0 lastPageIndex
|
||||
|> List.map
|
||||
(\page ->
|
||||
@ -94,25 +97,37 @@ view_ goToPage currentPageIndex pages =
|
||||
, Css.padding Css.zero
|
||||
]
|
||||
]
|
||||
, nextPageLink goToPage lastPageIndex currentPageIndex
|
||||
, nextPageLink goToPage
|
||||
currentPageIndex
|
||||
(List.Extra.getAt (currentPageIndex + 1) pages)
|
||||
]
|
||||
|
||||
|
||||
previousPageLink : (Int -> msg) -> Int -> Html msg
|
||||
previousPageLink goToPage currentPageIndex =
|
||||
ClickableText.button "Previous\u{00A0}Page"
|
||||
previousPageLink : (Int -> msg) -> Int -> Maybe String -> Html msg
|
||||
previousPageLink goToPage currentPageIndex maybeUrl =
|
||||
ClickableText.link "Previous\u{00A0}Page" <|
|
||||
[ ClickableText.small
|
||||
, ClickableText.disabled (currentPageIndex == 0)
|
||||
, ClickableText.onClick (goToPage (currentPageIndex - 1))
|
||||
, ClickableText.css [ Css.marginRight (Css.px 10) ]
|
||||
]
|
||||
++ linkAttributes (goToPage (currentPageIndex - 1)) maybeUrl
|
||||
|
||||
|
||||
nextPageLink : (Int -> msg) -> Int -> Int -> Html msg
|
||||
nextPageLink goToPage lastPageIndex currentPageIndex =
|
||||
ClickableText.button "Next\u{00A0}Page"
|
||||
nextPageLink : (Int -> msg) -> Int -> Maybe String -> Html msg
|
||||
nextPageLink goToPage currentPageIndex maybeUrl =
|
||||
ClickableText.link "Next\u{00A0}Page" <|
|
||||
[ ClickableText.small
|
||||
, ClickableText.disabled (currentPageIndex == lastPageIndex)
|
||||
, ClickableText.onClick (goToPage (currentPageIndex + 1))
|
||||
, ClickableText.css [ Css.marginLeft (Css.px 10) ]
|
||||
]
|
||||
++ linkAttributes (goToPage (currentPageIndex + 1)) maybeUrl
|
||||
|
||||
|
||||
linkAttributes : msg -> Maybe String -> List (ClickableText.Attribute msg)
|
||||
linkAttributes msg maybeUrl =
|
||||
case maybeUrl of
|
||||
Just url ->
|
||||
[ ClickableText.onClick msg
|
||||
, ClickableText.linkSpa url
|
||||
]
|
||||
|
||||
Nothing ->
|
||||
[ ClickableText.disabled True ]
|
||||
|
@ -57,7 +57,11 @@ example =
|
||||
, toExampleCode = \_ -> []
|
||||
}
|
||||
, Heading.h2 [ Heading.plaintext "Example" ]
|
||||
, Pagination.view SelectPage model.currentPage (List.range 1 settings.pages)
|
||||
, Pagination.view SelectPage
|
||||
model.currentPage
|
||||
(List.range 1 settings.pages
|
||||
|> List.map (\i -> "#page" ++ String.fromInt i)
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
|
@ -2,6 +2,7 @@ module Spec.Nri.Ui.Pagination exposing (spec)
|
||||
|
||||
import Accessibility.Aria as Aria
|
||||
import Expect
|
||||
import Html.Attributes as Attributes
|
||||
import Html.Styled
|
||||
import Nri.Ui.Pagination.V1 as Pagination
|
||||
import Test exposing (..)
|
||||
@ -20,13 +21,13 @@ spec =
|
||||
|> Query.hasNot [ Selector.tag "nav" ]
|
||||
, test "With 1 page, does not render a nav without active links" <|
|
||||
\() ->
|
||||
Pagination.view (always ()) 0 [ () ]
|
||||
Pagination.view (always ()) 0 [ "#" ]
|
||||
|> Html.Styled.toUnstyled
|
||||
|> Query.fromHtml
|
||||
|> Query.hasNot [ Selector.tag "nav" ]
|
||||
, test "With more than 1 page, renders a nav with the current page indicated" <|
|
||||
\() ->
|
||||
Pagination.view (always ()) 0 [ (), () ]
|
||||
Pagination.view (always ()) 0 [ "#", "#" ]
|
||||
|> Html.Styled.toUnstyled
|
||||
|> Query.fromHtml
|
||||
|> Query.has
|
||||
@ -42,7 +43,7 @@ spec =
|
||||
]
|
||||
, test "Uses anchor tags rather than buttons" <|
|
||||
\() ->
|
||||
Pagination.view (always ()) 0 [ (), () ]
|
||||
Pagination.view (always ()) 0 [ "#", "#" ]
|
||||
|> Html.Styled.toUnstyled
|
||||
|> Query.fromHtml
|
||||
|> Expect.all
|
||||
@ -51,26 +52,44 @@ spec =
|
||||
]
|
||||
, test "Marks 'previous' link as disabled when on the first page" <|
|
||||
\() ->
|
||||
Pagination.view (always ()) 0 [ (), () ]
|
||||
Pagination.view (always ()) 0 [ "#first", "#second" ]
|
||||
|> Html.Styled.toUnstyled
|
||||
|> Query.fromHtml
|
||||
|> Query.has
|
||||
[ Selector.all
|
||||
[ Selector.tag "a"
|
||||
, Selector.containing [ Selector.text "Previous" ]
|
||||
, Selector.attribute (Aria.disabled True)
|
||||
|> Expect.all
|
||||
[ Query.has
|
||||
[ Selector.all
|
||||
[ Selector.tag "a"
|
||||
, Selector.containing [ Selector.text "Previous" ]
|
||||
, Selector.attribute (Aria.disabled True)
|
||||
]
|
||||
]
|
||||
, Query.has
|
||||
[ Selector.all
|
||||
[ Selector.tag "a"
|
||||
, Selector.containing [ Selector.text "Next" ]
|
||||
, Selector.attribute (Attributes.href "#second")
|
||||
]
|
||||
]
|
||||
]
|
||||
, test "Marks 'next' link as disabled when on the last page" <|
|
||||
\() ->
|
||||
Pagination.view (always ()) 1 [ (), () ]
|
||||
Pagination.view (always ()) 1 [ "#first", "#second" ]
|
||||
|> Html.Styled.toUnstyled
|
||||
|> Query.fromHtml
|
||||
|> Query.has
|
||||
[ Selector.all
|
||||
[ Selector.tag "a"
|
||||
, Selector.containing [ Selector.text "Next" ]
|
||||
, Selector.attribute (Aria.disabled True)
|
||||
|> Expect.all
|
||||
[ Query.has
|
||||
[ Selector.all
|
||||
[ Selector.tag "a"
|
||||
, Selector.containing [ Selector.text "Previous" ]
|
||||
, Selector.attribute (Attributes.href "#first")
|
||||
]
|
||||
]
|
||||
, Query.has
|
||||
[ Selector.all
|
||||
[ Selector.tag "a"
|
||||
, Selector.containing [ Selector.text "Next" ]
|
||||
, Selector.attribute (Aria.disabled True)
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user