NickAkhmetov/Feature/CAT-1501 - Homepage Updates

CHANGELOG-cat-1501.md

@@ -0,0 +1,3 @@
+- Update homepage design.
+- Add icons to homepage section headers.
+- Combine Related Tools and Related Resources.

context/app/static/js/components/home/ExternalLink/ExternalLink.tsx → context/app/static/js/components/home/HomepageRelatedLink/HomepageRelatedLink.tsx

@@ -15,7 +15,7 @@ interface ExternalLinkProps {
   icon?: React.ReactNode;
 }
 
-function ExternalLink({ img, title, linkText, linkHref, description, icon }: ExternalLinkProps) {
+function HomepageRelatedLink({ img, title, linkText, linkHref, description, icon }: ExternalLinkProps) {
   const handleTrack = useEventCallback(() => {
     trackEvent({
       category: 'Homepage',
@@ -30,7 +30,7 @@ function ExternalLink({ img, title, linkText, linkHref, description, icon }: Ext
         {icon ?? img}
       </ImageWrapper>
       <div>
-        <OutboundIconLink onClick={handleTrack} href={linkHref} variant="subtitle1">
+        <OutboundIconLink onClick={handleTrack} href={linkHref} variant="subtitle1" noWrap>
           {linkText}
         </OutboundIconLink>
         <Typography variant="body2">{description}</Typography>
@@ -39,4 +39,4 @@ function ExternalLink({ img, title, linkText, linkHref, description, icon }: Ext
   );
 }
 
-export default ExternalLink;
+export default HomepageRelatedLink;

context/app/static/js/components/home/HomepageRelatedLink/index.ts

@@ -0,0 +1,3 @@
+import HomepageRelatedLink from './HomepageRelatedLink';
+
+export default HomepageRelatedLink;

context/app/static/js/components/home/ExternalLink/style.ts → context/app/static/js/components/home/HomepageRelatedLink/style.ts

@@ -7,6 +7,7 @@ const ExternalLinkContainer = styled(Stack)(({ theme }) => ({
   '&:hover': {
     backgroundColor: theme.palette.common.hoverShadow,
   },
+  padding: theme.spacing(1, 2, 1, 0),
 }));
 
 const ImageWrapper = styled(Stack)(({ theme }) => ({

context/app/static/js/components/home/ExternalLinks/ExternalLinks.tsx → context/app/static/js/components/home/RelatedToolsAndResources/RelatedToolsAndResources.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import Paper from '@mui/material/Paper';
 
-import ExternalLink from 'js/components/home/ExternalLink';
+import HomepageRelatedLink from 'js/components/home/HomepageRelatedLink';
 import Stack from '@mui/material/Stack';
 import { SectionHeader } from 'js/pages/Home/style';
 import { externalIconMap } from 'js/shared-styles/icons/externalImageIcons';
 import { DataProductsIcon } from 'js/shared-styles/icons';
 import { INTEGRATED_MAPS_DESCRIPTION_SHORT } from 'js/global-constants';
+import { BuildRounded } from '@mui/icons-material';
 
 const { avr, azimuth, fusion, googleScholar, hra, hubmapConsortium, nih, protocols } = externalIconMap;
 
@@ -94,39 +95,50 @@ const relatedTools: ExternalLinkPropsAdapter[] = [
 ];
 
 interface LinkSectionContainerProps {
-  title: string;
   links: ExternalLinkPropsAdapter[];
+  title: string;
 }
 
-function LinkSectionContainer({ title, links }: LinkSectionContainerProps) {
+function LinkSectionContainer({ links, title }: LinkSectionContainerProps) {
   return (
-    <Stack direction="column" maxWidth={{ md: '50%' }}>
-      <SectionHeader variant="h4" component="h3">
-        {title}
-      </SectionHeader>
+    <Stack direction="column">
       <Paper>
         {links.map(({ src, alt, ...rest }) => (
-          <ExternalLink key={src} img={<img src={src} alt={alt} height={56} width={56} />} title={title} {...rest} />
+          <HomepageRelatedLink
+            key={src}
+            img={<img src={src} alt={alt} height={56} width={56} />}
+            title={title}
+            {...rest}
+          />
         ))}
       </Paper>
     </Stack>
   );
 }
 
-function ExternalLinks() {
+function RelatedToolsAndResources() {
   return (
-    <Stack
-      direction={{
-        xs: 'column',
-        md: 'row',
-      }}
-      alignItems="start"
-      gap={4}
-    >
-      <LinkSectionContainer title="Related Tools" links={relatedTools} />
-      <LinkSectionContainer title="Related Resources" links={relatedResources} />
+    <Stack>
+      <SectionHeader variant="h2" component="h3" icon={BuildRounded}>
+        Related Tools & Resources
+      </SectionHeader>
+
+      <Stack
+        direction={{
+          xs: 'column',
+          md: 'row',
+        }}
+        alignItems="start"
+        gap={{
+          xs: 0,
+          md: 4,
+        }}
+      >
+        <LinkSectionContainer links={relatedTools} title="Related Tools" />
+        <LinkSectionContainer links={relatedResources} title="Related Resources" />
+      </Stack>
     </Stack>
   );
 }
 
-export default ExternalLinks;
+export default RelatedToolsAndResources;

context/app/static/js/components/home/RelatedToolsAndResources/index.ts

@@ -0,0 +1,3 @@
+import RelatedResources from './RelatedToolsAndResources';
+
+export default RelatedResources;

context/app/static/js/pages/Home/Home.tsx

@@ -7,12 +7,14 @@ import HuBMAPDatasetsChart from 'js/components/home/HuBMAPDatasetsChart';
 import Title from 'js/components/home/Title';
 import EntityCounts from 'js/components/home/EntityCounts';
 import DataUseGuidelines from 'js/components/home/DataUseGuidelines';
-import ExternalLinks from 'js/components/home/ExternalLinks';
 import RecentEntities from 'js/components/home/RecentEntities';
 import ExploreTools from 'js/components/home/ExploreTools';
 
 import Hero from 'js/components/home/Hero';
 import { LowerContainerGrid, SectionHeader, OffsetDatasetsHeader, UpperGrid, GridAreaContainer } from './style';
+import { PrivacyTipRounded } from '@mui/icons-material';
+import RelatedToolsAndResources from 'js/components/home/RelatedToolsAndResources';
+import { entityIconMap } from 'js/shared-styles/icons/entityIconMap';
 
 interface HomeProps {
   organsCount: number;
@@ -44,27 +46,33 @@ function Home({ organsCount }: HomeProps) {
       <LowerContainerGrid maxWidth="lg">
         {isLargerThanMd && (
           <Box gridArea="bar-chart">
-            <OffsetDatasetsHeader variant="h4" component="h3" id="hubmap-datasets" ref={scrollToBarChart}>
+            <OffsetDatasetsHeader
+              variant="h2"
+              component="h3"
+              id="hubmap-datasets"
+              ref={scrollToBarChart}
+              icon={entityIconMap.Dataset}
+            >
               HuBMAP Datasets
             </OffsetDatasetsHeader>
             <HuBMAPDatasetsChart />
           </Box>
         )}
         <RecentEntities />
         <Box gridArea="explore-tools">
-          <SectionHeader variant="h4" component="h3">
+          <SectionHeader variant="h2" component="h3">
             Explore Tools and Resources for Data Visualization & Analysis
           </SectionHeader>
           <ExploreTools />
         </Box>
         <Box gridArea="guidelines">
-          <SectionHeader variant="h4" component="h3">
+          <SectionHeader variant="h2" component="h3" icon={PrivacyTipRounded}>
             Data Use Guidelines
           </SectionHeader>
           <DataUseGuidelines />
         </Box>
-        <Box gridArea="external-links">
-          <ExternalLinks />
+        <Box gridArea="related-tools-and-resources">
+          <RelatedToolsAndResources />
         </Box>
       </LowerContainerGrid>
     </>

context/app/static/js/pages/Home/style.ts → context/app/static/js/pages/Home/style.tsx

@@ -1,7 +1,9 @@
+import React from 'react';
 import { styled } from '@mui/material/styles';
 import Container, { ContainerProps } from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
+import Typography, { TypographyProps } from '@mui/material/Typography';
 import { headerHeight } from 'js/components/Header/HeaderAppBar/style';
+import { MUIIcon } from 'js/shared-styles/icons/entityIconMap';
 
 interface GridAreaContainerProps extends ContainerProps {
   $gridArea: string;
@@ -21,20 +23,37 @@ const UpperGrid = styled('div')(({ theme }) => ({
 const LowerContainerGrid = styled(Container)(({ theme }) => ({
   display: 'grid',
   gridGap: theme.spacing(3),
-  gridTemplateAreas: '"recent-entities" "explore-tools" "guidelines" "external-links"',
+  gridTemplateAreas: '"recent-entities" "explore-tools" "guidelines" "related-tools-and-resources"',
   marginBottom: theme.spacing(5),
 
   [theme.breakpoints.up('md')]: {
-    gridTemplateAreas: '"bar-chart" "recent-entities" "explore-tools" "guidelines" "external-links"',
+    gridTemplateAreas: '"bar-chart" "recent-entities" "explore-tools" "guidelines" "related-tools-and-resources"',
   },
 })) as typeof Container;
 
-const SectionHeader = styled(Typography)(({ theme }) => ({
+const SectionHeaderInternal = styled(Typography)(({ theme }) => ({
   marginBottom: theme.spacing(1.5),
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'row',
+  gap: theme.spacing(1),
 })) as typeof Typography;
 
+interface SectionHeaderProps extends TypographyProps {
+  icon?: MUIIcon;
+}
+
+function SectionHeader({ icon: Icon, children, ...props }: SectionHeaderProps) {
+  return (
+    <SectionHeaderInternal {...props}>
+      {Icon && <Icon fontSize="large" color="primary" />}
+      {children}
+    </SectionHeaderInternal>
+  );
+}
+
 const OffsetDatasetsHeader = styled(SectionHeader)({
   scrollMarginTop: `${headerHeight + 10}px`,
-}) as typeof Typography;
+}) as typeof SectionHeader;
 
 export { GridAreaContainer, UpperGrid, LowerContainerGrid, SectionHeader, OffsetDatasetsHeader };

context/app/static/js/shared-styles/Links/iconLinks/IconLink/IconLink.tsx

@@ -11,9 +11,10 @@ interface IconLinkProps extends LinkProps {
   iconOnLeft?: boolean;
   href?: string;
   isOutbound?: boolean;
+  noWrap?: boolean;
 }
 
-function IconLink({ children, icon, iconOnLeft, isOutbound, ...rest }: IconLinkProps) {
+function IconLink({ children, icon, iconOnLeft, isOutbound, noWrap, ...rest }: IconLinkProps) {
   const LinkComponent = isOutbound ? OutboundLink : InternalLink;
 
   return (
@@ -24,6 +25,7 @@ function IconLink({ children, icon, iconOnLeft, isOutbound, ...rest }: IconLinkP
         alignItems: 'center',
         flexDirection: iconOnLeft ? 'row-reverse' : 'row',
         gap: 0.5,
+        whiteSpace: noWrap ? 'nowrap' : 'normal',
       }}
     >
       <span>{children}</span>

context/app/static/js/shared-styles/icons/icons.tsx

@@ -69,10 +69,15 @@ type CustomIconProps<T extends ElementType> = {
   fontSize?: string;
 } & SvgIconProps<T>;
 
+const muiSizes = ['small', 'medium', 'large', 'inherit'];
+
 const withIconStyles = (Icon: typeof SvgIcon) =>
-  styled(Icon)(({ fontSize }: CustomIconProps<ElementType<'svg'>>) => ({
-    fontSize: fontSize ?? '1rem',
-  })) as unknown as typeof SvgIcon;
+  styled(Icon)(({ fontSize }: CustomIconProps<ElementType<'svg'>>) => {
+    if (fontSize && muiSizes.includes(fontSize)) {
+      return {}; // Let MUI handle standard size values
+    }
+    return { fontSize: fontSize ?? '1rem' };
+  }) as unknown as typeof SvgIcon;
 
 const CenterIcon = withIconStyles(AccountBalanceIcon);