docs(Portal): add View Transition (#2675)

- Add [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) support. Works only on chromium based browsers. Is a show-case for other DNB projects. The portal does not need such improvements I would argue. - Some more link usage alignment to be able to call the `startViewTransition` APIon just two places.
dnbexperience · Sep 30, 2023 · 4636276 · 4636276
1 parent 88ee1a7
commit 4636276
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 37 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ completions.json
 .history
 *not_in_use*
 /packages/dnb-ui-lib
+**/test-results
 
 # pkm
 npm-debug.log*

diff --git a/packages/dnb-design-system-portal/src/e2e/fullscreen.spec.ts b/packages/dnb-design-system-portal/src/e2e/fullscreen.spec.ts
@@ -10,15 +10,14 @@ test.describe('Fullscreen', () => {
   }) => {
     await page.waitForSelector('nav#portal-sidebar-menu')
 
-    await page.click('button[title="Fullscreen"]')
+    await page.click('a.fullscreen')
 
-    await page.waitForSelector('nav#portal-sidebar-menu', {
-      state: 'hidden',
-    })
-
-    const currentURL = page.url()
-    expect(currentURL).toContain(
+    expect(page.url()).toContain(
       '/uilib/components/button/demos/?fullscreen',
     )
+
+    await page.click('a.fullscreen')
+
+    expect(page.url()).toContain('/uilib/components/button/demos/')
   })
 })
diff --git a/packages/dnb-design-system-portal/src/e2e/responsiveness.spec.ts b/packages/dnb-design-system-portal/src/e2e/responsiveness.spec.ts
@@ -12,7 +12,6 @@ test.describe('Responsiveness', () => {
 
   test('change viewport size should add sidebar menu', async ({
     page,
-    baseURL,
   }) => {
     await expect(page.locator('nav#portal-sidebar-menu')).toHaveCSS(
       'display',
@@ -35,7 +34,7 @@ test.describe('Responsiveness', () => {
       state: 'attached',
     })
 
-    expect(page.url()).toBe(`${baseURL}/uilib/about-the-lib/`)
+    expect(page.url()).toContain('/uilib/about-the-lib/')
     await expect(page.locator('h1')).toContainText('#About the library')
   })
 })
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,14 @@
+declare global {
+  interface Document {
+    startViewTransition(): void
+  }
+}
+
+export function startPageTransition() {
+  if (
+    !globalThis.IS_TEST &&
+    typeof document.startViewTransition !== 'undefined'
+  ) {
+    document.startViewTransition()
+  }
+}