chore(Portal): add View Transition

dnbexperience · Sep 29, 2023 · 113efaa · 113efaa
1 parent f19e005
commit 113efaa
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 35 deletions.
diff --git a/packages/dnb-design-system-portal/gatsby-browser.tsx b/packages/dnb-design-system-portal/gatsby-browser.tsx
@@ -56,12 +56,8 @@ export const onRouteUpdate = ({ location, prevLocation }) => {
   }
 }
 
-export const onPreRouteUpdate = ({ prevLocation }) => {
-  if (prevLocation && !globalThis.IS_TEST) {
-    // Omit scrolling on page changes
-    document.documentElement.style.scrollBehavior = 'auto'
-    setTimeout(() => {
-      document.documentElement.style.scrollBehavior = ''
-    }, 800)
+declare global {
+  interface Document {
+    startViewTransition(): void
   }
 }
diff --git a/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js b/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
@@ -25,6 +25,7 @@ import {
   portalHeaderWrapperStyle,
   hideSidebarToggleButtonStyle,
 } from './StickyMenuBar.module.scss'
+import { Link } from '../tags/Anchor'
 
 export default function StickyMenuBar({
   hideSidebarToggleButton,
@@ -66,6 +67,7 @@ export default function StickyMenuBar({
           text="Home"
           title="Eufemia main sections"
           href="/"
+          element={Link}
           icon="chevron_left"
           icon_position="left"
         />

diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss
@@ -104,3 +104,9 @@ html[show-dev-grid] .dev-grid {
 .lh-32 {
   line-height: calc(var(--line-height-basis) + 0.5rem); /* 2rem */
 }
+
+// Make the home => pages animation
+.home-background ul,
+#portal-sidebar-menu {
+  view-transition-name: home;
+}
diff --git a/packages/dnb-design-system-portal/src/shared/tags/Anchor.tsx b/packages/dnb-design-system-portal/src/shared/tags/Anchor.tsx
@@ -11,6 +11,7 @@ import {
 } from '@dnb/eufemia/src/components/Anchor'
 import { GatsbyLinkProps, Link as GatsbyLink } from 'gatsby'
 import { ElementIsType } from '@dnb/eufemia/src/elements/Element'
+import { startPageTransition } from './Transition'
 
 export type AnchorProps = Props &
   Omit<
@@ -22,16 +23,24 @@ export type AnchorProps = Props &
   >
 
 const PortalLink = React.forwardRef(function Link<TState>(
-  { href, ...props }: AnchorProps,
+  { href, onClick = null, ...props }: AnchorProps,
   ref,
 ) {
   return (
     <GatsbyLink
       to={href}
       ref={ref}
       {...(props as Omit<GatsbyLinkProps<TState>, 'ref' | 'onClick'>)}
+      onClick={clickHandler}
     />
   )
+
+  function clickHandler(event: React.MouseEvent<HTMLAnchorElement>) {
+    startPageTransition()
+    if (onClick) {
+      onClick(event)
+    }
+  }
 })
 
 export { PortalLink as Link }

diff --git a/packages/dnb-design-system-portal/src/shared/tags/Intro.tsx b/packages/dnb-design-system-portal/src/shared/tags/Intro.tsx
@@ -7,8 +7,10 @@ import React from 'react'
 import { Global, css } from '@emotion/react'
 import PropTypes from 'prop-types'
 import { navigate } from 'gatsby'
-import { Link, Button, Space } from '@dnb/eufemia/src'
+import { Anchor, Button, Space } from '@dnb/eufemia/src'
 import { wrapperStyle, innerStyle, footerStyle } from './Intro.module.scss'
+import { startPageTransition } from './Transition'
+import { Link } from './Anchor'
 
 const ref = React.createRef<HTMLDivElement>()
 const Intro = ({ children }) => {
@@ -17,6 +19,7 @@ const Intro = ({ children }) => {
       if (/textarea|input/i.test(document.activeElement.tagName)) {
         return
       }
+      startPageTransition()
       try {
         if (e.key === 'ArrowRight' && ref && ref.current) {
           const elem = ref.current.querySelector('a[href*="/intro"]')
@@ -61,13 +64,14 @@ export const IntroFooter = ({ href, text }) => (
         }
       `}
     />
-    <Button href={href} text={text} icon="chevron_right" />
+    <Button href={href} text={text} icon="chevron_right" element={Link} />
     <Button
       href="/uilib/getting-started"
       variant="secondary"
       text="Cancel"
       icon="close"
       icon_position="left"
+      element={Link}
     />
   </Space>
 )
@@ -79,9 +83,8 @@ IntroFooter.defaultProps = {}
 
 export const Next = (props) => (
   <>
-    {/* <Hr /> */}
     <div className="dnb-section dnb-section--spacing">
-      <Link {...props} />
+      <Anchor {...props} />
     </div>
   </>
 )

diff --git a/packages/dnb-design-system-portal/src/shared/tags/Tabbar.tsx b/packages/dnb-design-system-portal/src/shared/tags/Tabbar.tsx
@@ -4,7 +4,6 @@
  */
 
 import React from 'react'
-import { navigate } from 'gatsby'
 import { Button, Tabs } from '@dnb/eufemia/src/components'
 import { fullscreen as fullscreenIcon } from '@dnb/eufemia/src/icons'
 import AutoLinkHeader from './AutoLinkHeader'
@@ -42,33 +41,29 @@ export default function Tabbar({
     /fullscreen/.test(location.search),
   )
 
+  const cleanFullscreen = (s) =>
+    s.replace(/\?fullscreen$|&fullscreen|fullscreen|\?$/, '')
+
   const openFullscreen = () => {
     setFullscreen(true)
-
-    const path = [
-      location.pathname,
-      location.search ? location.search + '&' : '?',
-      'fullscreen',
-      location.hash,
-    ].join('')
-
-    navigate(path)
   }
 
-  const cleanFullscreen = (s) =>
-    s.replace(/\?fullscreen$|&fullscreen|fullscreen|\?$/, '')
-
   const quitFullscreen = () => {
     setFullscreen(false)
+  }
 
-    const path = [
-      location.pathname,
-      cleanFullscreen(location.search),
-      location.hash,
-    ].join('')
+  const fullscreenPath = [
+    location.pathname,
+    location.search ? location.search + '&' : '?',
+    'fullscreen',
+    location.hash,
+  ].join('')
 
-    navigate(path)
-  }
+  const quitFullscreenPath = [
+    location.pathname,
+    cleanFullscreen(location.search),
+    location.hash,
+  ].join('')
 
   const preparedTabs = React.useMemo(() => {
     return (
@@ -118,9 +113,6 @@ export default function Tabbar({
         tab_element={Link}
         data={preparedTabs}
         selected_key={selectedKey}
-        on_change={({ selected_key }) => {
-          navigate(selected_key)
-        }}
         render={({ Wrapper, Content, TabsList, Tabs }) => {
           return (
             <Wrapper className={tabsWrapperStyle}>
@@ -129,6 +121,8 @@ export default function Tabbar({
                 {wasFullscreen ? (
                   <Button
                     on_click={quitFullscreen}
+                    href={quitFullscreenPath}
+                    element={Link}
                     variant="secondary"
                     title="Quit Fullscreen"
                     icon="close"
@@ -137,6 +131,8 @@ export default function Tabbar({
                 ) : (
                   <Button
                     on_click={openFullscreen}
+                    href={fullscreenPath}
+                    element={Link}
                     variant="secondary"
                     title="Fullscreen"
                     icon={fullscreenIcon}

diff --git a/packages/dnb-design-system-portal/src/shared/tags/Transition.ts b/packages/dnb-design-system-portal/src/shared/tags/Transition.ts
@@ -0,0 +1,8 @@
+export function startPageTransition() {
+  if (
+    !globalThis.IS_TEST &&
+    typeof document.startViewTransition !== 'undefined'
+  ) {
+    document.startViewTransition()
+  }
+}