Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(Portal): add View Transition
Browse files Browse the repository at this point in the history
tujoworker committed Sep 29, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent f19e005 commit a2aa24d
Showing 7 changed files with 54 additions and 35 deletions.
10 changes: 3 additions & 7 deletions packages/dnb-design-system-portal/gatsby-browser.tsx
Original file line number Diff line number Diff line change
@@ -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
}
}
Original file line number Diff line number Diff line change
@@ -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"
/>
Original file line number Diff line number Diff line change
@@ -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;
}
11 changes: 10 additions & 1 deletion packages/dnb-design-system-portal/src/shared/tags/Anchor.tsx
Original file line number Diff line number Diff line change
@@ -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 }
11 changes: 7 additions & 4 deletions packages/dnb-design-system-portal/src/shared/tags/Intro.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
)
42 changes: 19 additions & 23 deletions packages/dnb-design-system-portal/src/shared/tags/Tabbar.tsx
Original file line number Diff line number Diff line change
@@ -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}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export function startPageTransition() {
if (!globalThis.IS_TEST) {
if (typeof document.startViewTransition !== 'undefined') {
document.startViewTransition()
}
}
}

0 comments on commit a2aa24d

Please sign in to comment.