feat(flipcard): container query + accept breakpoint

Author: iacopolea

src/pages/Campaign/useWidgets/Experience/widgets/Overview/Sentiment.tsx

@@ -21,7 +21,7 @@ export const Sentiment = ({
   if (isLoading || isError || !sentiments) return null;
 
   return (
-    <FlipCard className="sentiment-widget">
+    <FlipCard className="sentiment-widget" activateSwitchFromBreakpoint={500}>
       <FlipCard.Header>
         {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_HEADER')}
       </FlipCard.Header>

src/pages/Campaign/widgetCards/FlipCard/FlipCardBody.tsx

@@ -1,51 +1,103 @@
 import styled from 'styled-components';
-import { CSSTransition, SwitchTransition } from 'react-transition-group';
-import { useFlipCardContext } from './context/FlipCardContext';
-import { FlipCardBodyProps } from './types';
+import { useFlipCardContext } from './context';
+
+interface FlipCardBodyProps {
+  front: React.ReactNode;
+  back?: React.ReactNode;
+}
 
 const durationMilliseconds = 125;
 
-const FaceContent = styled.div<{ isVisible?: boolean }>`
+const FaceContent = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: ${({ theme }) => theme.space.xxs};
   margin-top: ${({ theme }) => theme.space.xxs};
-  transition: opacity ${durationMilliseconds}ms;
 `;
 
-const WidgetCard = styled.div`
-  ${FaceContent} {
-    &.flip-card-enter {
-      opacity: 0;
+const WidgetCard = styled.div<{ breakpoint: number }>`
+  container-type: inline-size;
+
+  .flipcard-face {
+    overflow: hidden;
+    transform-style: preserve-3d;
+    animation-duration: ${durationMilliseconds}ms;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
+  .flipcard-face-back {
+    animation-name: show;
+  }
+  .flipcard-face-front {
+    animation-name: hide;
+  }
+
+  @container (min-width: ${(p) => p.breakpoint}px) {
+    .flipcard-face-front {
+      z-index: 2;
     }
-    &.flip-card-enter-active {
-      opacity: 1;
+    .flipcard-face-back {
+      z-index: 1;
+    }
+    &.flipcard.front {
+      .flipcard-face-front {
+        animation-name: show;
+      }
+      .flipcard-face-back {
+        animation-name: hide;
+      }
+    }
+    &.flipcard.back {
+      .flipcard-face-front {
+        animation-name: hide;
+      }
+      .flipcard-face-back {
+        animation-name: show;
+      }
     }
-    &.flip-card-exit {
+  }
+
+  @keyframes hide {
+    0% {
       opacity: 1;
+      display: block;
+    }
+    99% {
+      display: block;
     }
-    &.flip-card-exit-active {
+    100% {
+      display: none;
       opacity: 0;
     }
   }
+  @keyframes show {
+    0% {
+      opacity: 0;
+      display: none;
+    }
+    1% {
+      display: block;
+    }
+    100% {
+      display: block;
+      opacity: 1;
+    }
+  }
 `;
 
 export const FlipCardBody = ({ front, back }: FlipCardBodyProps) => {
-  const { visibleFace } = useFlipCardContext();
+  const { visibleFace, breakpoint } = useFlipCardContext();
 
   return (
-    <WidgetCard className={`face ${visibleFace}`}>
-      <SwitchTransition>
-        <CSSTransition
-          key={visibleFace}
-          timeout={durationMilliseconds}
-          classNames="flip-card"
-        >
-          <FaceContent>{visibleFace === 'front' ? front : back}</FaceContent>
-        </CSSTransition>
-      </SwitchTransition>
+    <WidgetCard breakpoint={breakpoint} className={`flipcard ${visibleFace}`}>
+      <FaceContent className="flipcard-face flipcard-face-front">
+        {front}
+      </FaceContent>
+      <FaceContent className="flipcard-face flipcard-face-back">
+        {back}
+      </FaceContent>
     </WidgetCard>
   );
 };

src/pages/Campaign/widgetCards/FlipCard/FlipCardHeader.tsx

@@ -1,52 +1,51 @@
 import { IconButton } from '@appquality/unguess-design-system';
 import styled from 'styled-components';
-import { appTheme } from 'src/app/theme';
 import { ReactComponent as LineGraphIconFill } from 'src/assets/icons/line-graph-fill.svg';
 import { ReactComponent as ListBulletIconFill } from 'src/assets/icons/list-bullet-fill.svg';
+import { ReactNode } from 'react';
 import { WidgetCardHeader } from '../common/WidgetCardHeader';
-import { useFlipCardContext } from './context/FlipCardContext';
-import { FlipCardHeaderProps } from './types';
+import { useFlipCardContext } from './context';
 
 const FlipButton = styled(IconButton)`
   margin-left: ${(p) => p.theme.space.xs};
 `;
 
 export const FlipButtonContainer = styled.div`
-  display: flex;
+  display: none;
+  @container (min-width: 500px) {
+    display: flex;
+  }
 `;
 
-export const FlipCardHeader = ({ children, hasBack }: FlipCardHeaderProps) => {
-  const { visibleFace, setVisibleFace, width } = useFlipCardContext();
-  const breakpointMd = parseInt(appTheme.breakpoints.lg, 10);
+export const FlipCardHeader = ({ children }: { children: ReactNode }) => {
+  const { visibleFace, setVisibleFace } = useFlipCardContext();
 
   return (
     <WidgetCardHeader
       title={children}
       action={
-        hasBack === false || width < breakpointMd ? null : (
-          <FlipButtonContainer>
-            <FlipButton
-              className="flip-card-button-chart"
-              isPrimary={visibleFace === 'front'}
-              size="small"
-              onClick={() => setVisibleFace('front')}
-            >
-              <LineGraphIconFill
-                color={`${visibleFace === 'front' && 'white'}`}
-              />
-            </FlipButton>
-            <FlipButton
-              className="flip-card-button-list"
-              size="small"
-              isPrimary={visibleFace === 'back'}
-              onClick={() => setVisibleFace('back')}
-            >
-              <ListBulletIconFill
-                color={`${visibleFace === 'back' && 'white'}`}
-              />
-            </FlipButton>
-          </FlipButtonContainer>
-        )
+        <FlipButtonContainer>
+          <FlipButton
+            className="flip-card-button-chart"
+            isPrimary={visibleFace === 'front'}
+            size="small"
+            onClick={() => setVisibleFace('front')}
+          >
+            <LineGraphIconFill
+              color={`${visibleFace === 'front' && 'white'}`}
+            />
+          </FlipButton>
+          <FlipButton
+            className="flip-card-button-list"
+            size="small"
+            isPrimary={visibleFace === 'back'}
+            onClick={() => setVisibleFace('back')}
+          >
+            <ListBulletIconFill
+              color={`${visibleFace === 'back' && 'white'}`}
+            />
+          </FlipButton>
+        </FlipButtonContainer>
       }
     />
   );

src/pages/Campaign/widgetCards/FlipCard/context.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useMemo, useState } from 'react';
+import { FaceType } from './types';
+
+type FlipCardContextType = {
+  visibleFace: FaceType;
+  setVisibleFace: (face: FaceType) => void;
+  breakpoint: number;
+};
+
+export const Context = createContext<FlipCardContextType | null>(null);
+
+export const ContextProvider = ({
+  children,
+  breakpoint,
+}: {
+  children: React.ReactNode;
+  breakpoint: number;
+}) => {
+  const [visibleFace, setVisibleFace] = useState<FaceType>('front');
+
+  const flipCardContextValue = useMemo(
+    () => ({
+      visibleFace,
+      setVisibleFace,
+      breakpoint,
+    }),
+    [visibleFace, setVisibleFace]
+  );
+
+  return (
+    <Context.Provider value={flipCardContextValue}>{children}</Context.Provider>
+  );
+};
+
+export const useFlipCardContext = () => {
+  const context = useContext(Context);
+
+  if (!context)
+    throw new Error('Provider not found for FlipCardContextProvider');
+
+  return context; // Now we can use the context in the component, SAFELY.
+};

src/pages/Campaign/widgetCards/FlipCard/context/FlipCardContext.tsx

@@ -3,23 +3,30 @@ import { WidgetSpecialCard } from '../common/StyledSpecialCard';
 import { WidgetCardFooter } from '../common/WidgetCardFooter';
 import { FlipCardBody } from './FlipCardBody';
 import { FlipCardHeader } from './FlipCardHeader';
-import { FlipCardContextProvider } from './context/FlipCardContext';
+import { ContextProvider } from './context';
 
-const FlipCardContainer = styled(WidgetSpecialCard)<{ height?: string }>`
+const StyledSpecialCard = styled(WidgetSpecialCard)<{ height?: string }>`
   height: ${({ height }) => height || 'auto'};
+  container-type: inline-size;
 `;
 
 interface FlipCardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   height?: string;
+  activateSwitchFromBreakpoint?: number;
 }
 
-const FlipCard = ({ children, height, ...props }: FlipCardProps) => (
-  <FlipCardContextProvider>
-    <FlipCardContainer {...props} height={height}>
+const FlipCard = ({
+  children,
+  height,
+  activateSwitchFromBreakpoint,
+  ...props
+}: FlipCardProps) => (
+  <ContextProvider breakpoint={activateSwitchFromBreakpoint || 500}>
+    <StyledSpecialCard {...props} height={height}>
       {children}
-    </FlipCardContainer>
-  </FlipCardContextProvider>
+    </StyledSpecialCard>
+  </ContextProvider>
 );
 
 FlipCard.Header = FlipCardHeader;

src/pages/Campaign/widgetCards/FlipCard/index.tsx

@@ -1,21 +1 @@
-export type FlipCardContextType = {
-  visibleFace: FaceType;
-  setVisibleFace: (face: FaceType) => void;
-  width: number;
-};
-
-export interface FlipCardHeaderProps {
-  children: React.ReactNode;
-  setVisibleFace?: (face: FaceType) => void;
-  visibleFace?: FaceType;
-  hasBack?: boolean;
-}
-
 export type FaceType = 'front' | 'back';
-
-export interface FlipCardBodyProps {
-  front: React.ReactNode;
-  back?: React.ReactNode;
-  height?: string;
-  visibleFace?: FaceType;
-}