Add new collection cards with basic chips

src/common/components/Card.module.scss

@@ -1,26 +1,24 @@
 @import "../../common/colors";
 
-$border: 1px solid use-color("base-lighter");
+$border: 1px solid use-color("silver");
 
 .card {
-  align-items: center;
-  align-items: center;
   background-color: use-color("white");
   border: $border;
-  display: flex;
-  flex-flow: row nowrap;
   font-size: 16px;
-  gap: 10px;
+  height: 100%;
   overflow: clip;
-  padding: 10px;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
   text-align: left;
+  transition: 0.25s;
 
   &.clickable {
     cursor: pointer;
   }
 
   &.clickable:hover {
-    background-color: use-color("base-lightest");
+    background-color: use-color("light-gray");
   }
 
   &.clickable.selected:hover,
@@ -37,15 +35,29 @@ $border: 1px solid use-color("base-lighter");
   align-self: flex-start;
   display: flex;
   flex-flow: column nowrap;
-  height: 44px;
+  flex-shrink: 0;
   justify-content: center;
   position: relative;
-  width: 44px;
+
+  &.image-sm {
+    height: 35px;
+    width: auto;
+  }
+
+  &.image-md {
+    height: 60px;
+    width: auto;
+  }
+
+  &.image-lg {
+    height: 100px;
+    width: auto;
+  }
 
   > * {
     display: block;
-    max-height: 44px;
-    max-width: 44px;
+    height: 100%;
+    width: auto;
   }
 }
 
@@ -55,16 +67,34 @@ $border: 1px solid use-color("base-lighter");
   display: flex;
   flex-flow: column nowrap;
   flex-grow: 1;
-  gap: 5px;
+  gap: 0.5rem;
   justify-content: center;
 
   .subtitle {
-    color: use-color("base-darkest");
+    color: use-color("base");
     flex-grow: 1;
     font-size: 0.75em;
   }
 }
 
+.header {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.content {
+  flex-grow: 1;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.footer {
+  border-top: 1px solid use-color("silver");
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.5rem;
+}
+
 .card-list {
   border: $border;
   display: flex;

src/common/components/Card.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { useNavigate } from 'react-router-dom';
 import classes from './Card.module.scss';
+import { Stack } from '@mui/material';
 
 /**
  * Component for rendering a data summary as a card.
@@ -23,13 +24,30 @@ export const Card: FC<{
   subtitle?: string | ReactElement;
   /** Image for the card, any react element, but preferably and `<img>` */
   image?: ReactElement;
+  /** Configurable sizes for the image next to the title */
+  imageSize?: 'sm' | 'md' | 'lg';
+  /** Optional content section to display under the titles */
+  content?: string | ReactElement;
+  /** Optional footer section to display at the bottom of the card */
+  footer?: string | ReactElement;
   /** When true, the card will appear selected */
   selected?: boolean;
   /** An internal link, when defined clicking the Card will navigate to the link */
   linkTo?: string;
   onClick?: (e: React.MouseEvent) => void;
   className?: string;
-}> = ({ title, subtitle, image, onClick, linkTo, selected, className }) => {
+}> = ({
+  title,
+  subtitle,
+  image,
+  imageSize = 'sm',
+  content,
+  footer,
+  onClick,
+  linkTo,
+  selected,
+  className,
+}) => {
   const navigate = useNavigate();
   const rootDiv = useRef<HTMLDivElement>(null);
 
@@ -52,6 +70,9 @@ export const Card: FC<{
 
   if (className) classNames += `${className}`;
 
+  const imageClasses =
+    classes['image-wrapper'] + ' ' + classes[`image-${imageSize}`];
+
   const clickableProps: HTMLAttributes<HTMLDivElement> | undefined =
     clickableRole
       ? {
@@ -68,20 +89,30 @@ export const Card: FC<{
       : undefined;
 
   return (
-    <div
+    <Stack
       className={classNames}
       ref={rootDiv}
+      spacing={2}
       {...clickableProps}
       data-testid="card"
     >
-      {image ? <div className={classes['image-wrapper']}>{image}</div> : null}
-      <div className={classes['body']}>
-        <div>{title}</div>
-        {subtitle ? (
-          <div className={classes['subtitle']}>{subtitle}</div>
-        ) : null}
-      </div>
-    </div>
+      <Stack
+        className={classes['header']}
+        direction="row"
+        spacing={2}
+        alignItems="center"
+      >
+        {image ? <div className={imageClasses}>{image}</div> : null}
+        <div className={classes['body']}>
+          <div>{title}</div>
+          {subtitle ? (
+            <div className={classes['subtitle']}>{subtitle}</div>
+          ) : null}
+        </div>
+      </Stack>
+      {content && <div className={classes['content']}>{content}</div>}
+      {footer && <div className={classes['footer']}>{footer}</div>}
+    </Stack>
   );
 };
 

src/common/components/PageHeader.module.scss

@@ -0,0 +1,23 @@
+@import "../../common/colors";
+
+.page-header {
+  background-color: use-color("white");
+  border-bottom: 1px solid use-color("silver");
+}
+
+.page-header .page-title {
+  font-size: 1.75rem;
+  font-weight: normal;
+  margin-bottom: 0.5rem;
+  margin-top: 0;
+}
+
+.page-header .page-subtitle {
+  color: use-color("base-dark");
+  font-size: 1.25rem;
+  margin: 0;
+}
+
+.page-header .page-description {
+  margin-top: 1rem;
+}

src/common/components/PageHeader.tsx

@@ -0,0 +1,37 @@
+import { Container } from '@mui/material';
+import { FC, ReactNode } from 'react';
+import classes from './PageHeader.module.scss';
+
+interface PageHeaderProps {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  description?: ReactNode;
+}
+
+/**
+ * Header section for app landing pages.
+ * Not currently in use.
+ */
+export const PageHeader: FC<PageHeaderProps> = ({
+  title,
+  subtitle,
+  description,
+}) => {
+  return (
+    <div className={classes['page-header']}>
+      <Container
+        disableGutters
+        sx={{
+          marginLeft: 0,
+          padding: '2rem 1rem',
+        }}
+      >
+        {title && <h1 className={classes['page-title']}>{title}</h1>}
+        {subtitle && <div className={classes['page-subtitle']}>{subtitle}</div>}
+        {description && (
+          <div className={classes['page-description']}>{description}</div>
+        )}
+      </Container>
+    </div>
+  );
+};

src/common/components/TextClamp.tsx

@@ -0,0 +1,28 @@
+import { FC, PropsWithChildren } from 'react';
+import { Box } from '@mui/material';
+
+interface TextClampProps extends PropsWithChildren {
+  /** Max number of lines to show before clamping */
+  lines?: number;
+}
+
+/**
+ * Clamp inner content to a specified number of lines.
+ * Shows an ellipsis at the end of the last line.
+ */
+const TextClamp: FC<TextClampProps> = ({ lines = 2, children }) => {
+  return (
+    <Box
+      sx={{
+        display: '-webkit-box',
+        WebkitLineClamp: lines,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default TextClamp;

src/features/collections/CollectionDetail.tsx

@@ -110,7 +110,7 @@ export const CollectionDetail = () => {
         currDataProduct={currDataProduct}
         showOverview={showOverview}
       />
-      <div className={styles['collection_main']}>
+      <main className={styles['collection_main']}>
         <div className={styles['detail_header']}>
           <h2>
             {showOverview
@@ -172,7 +172,7 @@ export const CollectionDetail = () => {
             </>
           )}
         </div>
-        <div className={styles['container']}>
+        <div className={styles['detail_content']}>
           <FilterMenu
             collectionId={collection.id}
             anchorEl={filterMenuRef.current}
@@ -196,7 +196,7 @@ export const CollectionDetail = () => {
             )}
           </div>
         </div>
-      </div>
+      </main>
       {modalView === 'match' ? (
         <MatchModal
           key={[collection.id, matchId].join('|')}

src/features/collections/CollectionSidebar.tsx

@@ -8,11 +8,18 @@ import { Button } from '../../common/components/Button';
 import { useNavigate } from 'react-router-dom';
 import classes from './Collections.module.scss';
 
+interface DataProductMeta {
+  product: DataProduct['product'];
+  displayName: string;
+  section: string;
+}
+
 /**
  * List of data products with associated metadata and listed
  * in the order they should appear in the sidebar.
+ * This could eventually be part of the DataProduct that is returned by the database.
  */
-const dataProductsMeta = [
+export const dataProductsMeta: DataProductMeta[] = [
   {
     product: 'genome_attribs',
     displayName: 'Genome Attributes',

src/features/collections/Collections.module.scss

@@ -2,19 +2,31 @@
 
 $border: 1px solid use-color("base-lighter");
 
-.container {
+.collections-main {
   background-color: use-color("base-lightest");
-  display: flex;
-  flex: 1;
-  height: 100%;
-  overflow-y: auto;
-  width: 100%;
+  border-left: 1px solid use-color("silver");
+  min-height: 100%;
 }
 
-.collections-list {
+.collections-main .inner-container {
+  margin-left: 0;
   padding: 1rem;
 }
 
+.collections-subtitle {
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin: 0;
+  padding: 2rem 1rem 1rem;
+}
+
+.collection-card-title {
+  color: use-color("primary");
+  font-size: 1.15rem;
+  font-weight: bold;
+  margin: 0;
+}
+
 .collection_wrapper {
   background-color: use-color("base-lightest");
   display: flex;
@@ -59,6 +71,15 @@ $border: 1px solid use-color("base-lighter");
   justify-content: space-between;
 }
 
+.detail_content {
+  background-color: use-color("base-lightest");
+  display: flex;
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+}
+
 .dp_columns {
   display: flex;
   flex-flow: row;