feat: added back to top button (#120)

Co-authored-by: Tom Whittington <[email protected]>

src/Dfe.ContentSupport.Web/Models/Mapped/CsPage.cs

@@ -8,5 +8,6 @@ public class CsPage
     public Heading Heading { get; set; } = null!;
     public string Slug { get; set; } = null!;
     public bool IsSitemap { get; set; }
+    public bool HasBackToTop { get; set; }
     public List<CsContentItem> Content { get; set; } = null!;
 }

src/Dfe.ContentSupport.Web/Services/ModelMapper.cs

@@ -23,6 +23,7 @@ public CsPage MapToCsPage(ContentSupportPage incoming)
             Heading = incoming.Heading,
             Slug = incoming.Slug,
             IsSitemap = incoming.IsSitemap,
+            HasBackToTop = incoming.HasBackToTop,
             Content = MapEntriesToContent(incoming.Content)
         };
         return result;

src/Dfe.ContentSupport.Web/ViewModels/ContentSupportPage.cs

@@ -15,6 +15,7 @@ public class ContentSupportPage : ContentBase
 
     public bool DisplayBackButton { get; init; }
     public bool IsSitemap { get; init; }
+    public bool HasBackToTop { get; init; }
 
     public DateTime? CreatedAt { get; init; }
 

src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml

@@ -7,4 +7,9 @@
 @foreach (var content in Model.Content)
 {
     <partial name="_Content" model="@content"/>
+}
+
+@if (Model.HasBackToTop)
+{
+    <partial name="_BackToTop"/>
 }

src/Dfe.ContentSupport.Web/Views/Shared/_BackToTop.cshtml

@@ -0,0 +1,5 @@
+<a class="govuk-link govuk-link--no-visited-state" href="#">
+    <svg class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
+        <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+    </svg> Back to top
+</a>