🚧 Add expand/collapse transition

Author: victorlin

static-site/src/components/ListResources/Showcase.tsx

@@ -11,6 +11,8 @@ import { Card, FilterOption, Group } from './types';
 
 const cardWidthHeight = 160; // pixels
 const expandPreviewHeight = 50 //pixels
+// FIXME: remove transition on page load
+const transitionStyle = "0.3s ease"
 
 type ShowcaseProps = {
     cards: Card[]
@@ -20,6 +22,7 @@ type ShowcaseProps = {
 export const Showcase = ({cards, setSelectedFilterOptions}: ShowcaseProps) => {
 
   const [numRows, setNumRows] = useState<number>(0);
+  const [showcaseHeight, setShowcaseHeight] = useState<number>(0);
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   const toggleExpand = () => {
@@ -35,6 +38,9 @@ export const Showcase = ({cards, setSelectedFilterOptions}: ShowcaseProps) => {
     if (!container) return;
 
     const cards = container.children;
+    if(showcaseHeight != container.clientHeight) {
+      setShowcaseHeight(container.clientHeight)
+    }
 
     if (cards && cards.length > 0) {
       const leftBorder = (cards[0] as HTMLElement).offsetLeft;
@@ -58,13 +64,13 @@ export const Showcase = ({cards, setSelectedFilterOptions}: ShowcaseProps) => {
       <Byline>
         Showcase resources: click to filter the resources to a pathogen
       </Byline>
-      <ShowcaseContainer $isExpanded={isExpanded} $isExpandable={isExpandable}>
+      <ShowcaseContainer className={!isExpandable ? "singleRow" : isExpanded ? "expanded" : "collapsed"} $fullHeight={showcaseHeight}>
         <CardsContainer ref={containerRef}>
           {cards.map((el) => (
             <ShowcaseTile card={el} key={el.name} setSelectedFilterOptions={setSelectedFilterOptions}/>
             ))}
         </CardsContainer>
-        {isExpandable && !isExpanded && <PreviewOverlay onClick={toggleExpand} />}
+        <PreviewOverlay onClick={toggleExpand} className={!isExpandable || isExpanded ? "hidden" : "visible"} />
       </ShowcaseContainer>
       {isExpandable && <>
         <ArrowButton onClick={toggleExpand}>
@@ -112,15 +118,22 @@ const ShowcaseTile = ({card, setSelectedFilterOptions}: ShowcaseTileProps) => {
 element we can leverage the intelligent wrapping of the flexbox to decide how
 many tiles to show in a single row. The downside is that showcase tiles are
 still in the DOM, and the images are still fetched etc */
-const ShowcaseContainer = styled.div<{$isExpanded: boolean, $isExpandable: boolean}>`
+const ShowcaseContainer = styled.div<{$fullHeight: number}>`
   position: relative;
-  height: ${(props) =>
-    props.$isExpandable ? 
-      props.$isExpanded ?
-        "" : `${cardWidthHeight + expandPreviewHeight}px`
-      : `${cardWidthHeight}px`
 
-  };
+  &.singleRow {
+    max-height: ${cardWidthHeight}px
+  }
+
+  &.collapsed {
+    max-height: ${cardWidthHeight + expandPreviewHeight}px
+  }
+
+  &.expanded {
+    max-height: ${(props) => `${props.$fullHeight}px`}
+  }
+
+  transition: max-height ${transitionStyle};
   overflow-y: hidden;
 `
 
@@ -143,6 +156,16 @@ const PreviewOverlay = styled.div`
   width: 100%;
   height: ${expandPreviewHeight}px;
   cursor: pointer;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  &.hidden {
+    opacity: 0;
+  }
+
+  transition: opacity ${transitionStyle};
 `;
 
 const CardsContainer = styled.div`