Adds actual hrefs to the next and previous links

src/Nri/Ui/Pagination/V1.elm

@@ -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 ]

styleguide-app/Examples/Pagination.elm

@@ -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)
+                )
             ]
     }
 

tests/Spec/Nri/Ui/Pagination.elm

@@ -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,22 +52,39 @@ 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
+                    |> 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
+                    |> 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" ]
@@ -74,3 +92,4 @@ spec =
                                 ]
                             ]
                         ]
+        ]