Add a back 'to top' button in the footer#2609 (#2675)

* Add a back 'to top' button in the footer#2609 * Added button from @core/Button
equinor · Dec 17, 2024 · 4a44d66 · 4a44d66
1 parent 737dbcd
commit 4a44d66
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts
@@ -327,6 +327,11 @@ const snippets: textSnippet = {
     defaultValue: 'Submit Form',
     group: groups.pensionForm,
   },
+  footer_to_top_button: {
+    title: 'To top button',
+    defaultValue: 'To top',
+    group: groups.others,
+  },
   career_fair_form_organisation: {
     title: 'Organisation',
     defaultValue: 'School / Organisation',

diff --git a/web/pageComponents/shared/Footer.tsx b/web/pageComponents/shared/Footer.tsx
@@ -2,6 +2,8 @@ import { forwardRef } from 'react'
 import { Facebook, Instagram, Linkedin, Twitter, Youtube } from '../../icons'
 import type { FooterLinkData, SomeType, FooterColumns } from '../../types/index'
 import { default as NextLink } from 'next/link'
+import { useIntl } from 'react-intl'
+import { LinkButton } from '@core/Button'
 
 function getSomeSvg(someType: SomeType) {
   const iconMap = {
@@ -12,9 +14,8 @@ function getSomeSvg(someType: SomeType) {
     youtube: <Youtube width={24} />,
   }
 
-  if (!(someType in iconMap)) console.warn('Unable to get social icon for footer: Unknown SoMe type passed')
-
-  return iconMap[someType] || null
+  if (!(someType in iconMap)) console.warn('Unable to get social icon for footer: Unknown SoMe type passed') 
+    return iconMap[someType] || null
 }
 
 function getLink(linkData: FooterLinkData) {
@@ -27,6 +28,7 @@ type FooterProps = {
 }
 
 const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer({ footerData, ...rest }, ref) {
+  const intl = useIntl()
   return (
     <footer className="min-h-12 clear-both text-white-100 bg-slate-blue-95 py-4 px-0" ref={ref} {...rest}>
       <div className="flex flex-row flex-wrap my-0 mx-auto justify-between px-layout-sm pb-2 max-w-screen-2xl max-md:flex-col">
@@ -60,6 +62,14 @@ const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer({ footerD
             </div>
           </section>
         ))}
+        <section 
+      className="flex flex-col max-md:py-4 max-md:w-4/5">
+  <LinkButton
+    onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+    className={`group text-sm px-0 py-2 text-white-100 underline underline-offset-8 hover:underline hover:text-moss-green-90`}  >
+    {intl.formatMessage({ id: 'footer_to_top_button', defaultMessage: 'To top' })}
+  </LinkButton>
+</section>
       </div>
       <div className="flex md:justify-center justify-start pl-4 pt-12 pb-3">
         <span className="text-2xs text-white-100">Copyright {new Date().getFullYear()} Equinor ASA</span>