chore: make page-swapper default mode out-in

This makes it unnecessary to use z-index.

Author: satazor

Dockerfile

@@ -48,6 +48,7 @@ WORKDIR /usr/app
 COPY --from=build /src/package.json ./package.json
 COPY --from=build /src/node_modules ./node_modules
 COPY --from=build /src/.next ./.next
+COPY --from=build /src/intl/index.js ./intl/index.js
 COPY --from=build /src/public ./public
 COPY --from=build /src/next.config.js ./next.config.js
 

www/shared/react/page-swapper/PageSwapper.js

@@ -8,13 +8,13 @@ const PageSwapper = ({ children, pageTransitionClassName, ...rest }) => {
     const { updateScroll } = useRouterScroll();
 
     return (
-        <RawPageSwapper { ...rest } updateScroll={ updateScroll }>
+        <RawPageSwapper mode="out-in" { ...rest } updateScroll={ updateScroll }>
             { ({ node, ...rest }) => {
                 if (typeof children === 'function') {
                     node = children({ node, ...rest });
                 }
 
-                return <PageTransition node={ node } className={ pageTransitionClassName } { ...rest } />;
+                return <PageTransition className={ pageTransitionClassName } { ...rest }>{ node }</PageTransition>;
             } }
         </RawPageSwapper>
     );

www/shared/react/page-swapper/page-transition/PageTransition.js

@@ -5,13 +5,10 @@ import classNames from 'classnames';
 
 import styles from './PageTransition.module.css';
 
-/* istanbul ignore next */
-const getZIndex = (inProp) => !inProp ? 0 : 1;
-
 // This function might have to be adjusted if you have more than you transition property on animations.
 const addEndListener = (node, done) => node.addEventListener('transitionend', done);
 
-const PageTransition = ({ node, animation, style, in: inProp, onEntered, onExited, className }) => (
+const PageTransition = ({ children, animation, style, in: inProp, onEntered, onExited, className }) => (
     <CSSTransition
         in={ inProp }
         onEntered={ onEntered }
@@ -26,14 +23,14 @@ const PageTransition = ({ node, animation, style, in: inProp, onEntered, onExite
         } }
         addEndListener={ addEndListener }
         timeout={ 1000 }>
-        <div className={ classNames(styles[animation], className) } style={ { ...style, zIndex: getZIndex(inProp) } }>
-            { node }
+        <div className={ classNames(styles[animation], className) } style={ style }>
+            { children }
         </div>
     </CSSTransition>
 );
 
 PageTransition.propTypes = {
-    node: PropTypes.element.isRequired,
+    children: PropTypes.element.isRequired,
     animation: PropTypes.oneOf(['none', 'fade']),
     style: PropTypes.object,
     in: PropTypes.bool,

www/shared/react/page-swapper/page-transition/PageTransition.module.css

@@ -7,7 +7,6 @@
     &.enterDone {
         opacity: 1;
         transition: opacity 0.6s;
-        transition-delay: 0.3s;
     }
 
     &.exit {

www/shared/react/page-swapper/page-transition/PageTransition.test.js

@@ -7,31 +7,29 @@ jest.useFakeTimers();
 const MyComponent = () => <div>foo</div>;
 
 it('should render correctly when in prop is false', () => {
-    render(<PageTransition node={ <MyComponent /> } />);
+    render(<PageTransition><MyComponent /></PageTransition>);
 
     const element = screen.getByText('foo').parentNode;
 
     expect(element).toHaveClass('fade');
     expect(element).not.toHaveClass('exitDone');
-    expect(element).toHaveStyle({ zIndex: '0' });
 });
 
 it('should render correctly when in prop is true', () => {
-    render(<PageTransition node={ <MyComponent /> } in />);
+    render(<PageTransition in><MyComponent /></PageTransition>);
 
     const element = screen.getByText('foo').parentNode;
 
     expect(element).toHaveClass('fade');
     expect(element).not.toHaveClass('enterDone');
-    expect(element).toHaveStyle({ zIndex: '1' });
 });
 
 it('should animate in, calling onEntered correctly', () => {
     const handleEntered = jest.fn();
 
-    const { rerender } = render(<PageTransition node={ <MyComponent /> } />);
+    const { rerender } = render(<PageTransition><MyComponent /></PageTransition>);
 
-    rerender(<PageTransition node={ <MyComponent /> } in onEntered={ handleEntered } />);
+    rerender(<PageTransition in onEntered={ handleEntered }><MyComponent /></PageTransition>);
 
     const element = screen.getByText('foo').parentNode;
 
@@ -51,9 +49,9 @@ it('should animate in, calling onEntered correctly', () => {
 it('should animate out, calling onEntered correctly', () => {
     const handleExited = jest.fn();
 
-    const { rerender } = render(<PageTransition node={ <MyComponent /> } in />);
+    const { rerender } = render(<PageTransition in><MyComponent /></PageTransition>);
 
-    rerender(<PageTransition node={ <MyComponent /> } onExited={ handleExited } />);
+    rerender(<PageTransition onExited={ handleExited }><MyComponent /></PageTransition>);
 
     const element = screen.getByText('foo').parentNode;
 
@@ -71,7 +69,7 @@ it('should animate out, calling onEntered correctly', () => {
 });
 
 it('should respect passed className', () => {
-    const { container } = render(<PageTransition node={ <MyComponent /> } className="foo" />);
+    const { container } = render(<PageTransition className="foo"><MyComponent /></PageTransition>);
 
     expect(container.querySelector('.foo')).toBeInTheDocument();
 });