DOP 4340/1: Homepage Redesign (#1016)

Co-authored-by: Anabella Buckvar <[email protected]> Co-authored-by: anabellabuckvar <[email protected]>
mongodb · Feb 27, 2024 · a2f24fc · a2f24fc
1 parent 5ed76c7
commit a2f24fc
Show file tree

Hide file tree

Showing 7 changed files with 338 additions and 284 deletions.
diff --git a/src/components/Card/CardGroup.js b/src/components/Card/CardGroup.js
@@ -5,11 +5,14 @@ import PropTypes from 'prop-types';
 import ComponentFactory from '../ComponentFactory';
 import { theme } from '../../theme/docsTheme';
 
-const getMarginStyles = (isForDriver, sideMarginValue) => {
+const getMarginStyles = (isForDriver, isLanding, columns, sideMarginValue) => {
   if (typeof sideMarginValue !== 'number') {
     console.warn('sideMarginValue only accepts a number');
   }
-  return isForDriver ? `0 ${sideMarginValue}px ${theme.size.xlarge}` : `${theme.size.large} 0`;
+  if (isForDriver) return `0 ${sideMarginValue}px ${theme.size.xlarge}`;
+  else if (isLanding && columns !== 3) return `${theme.size.large} ${sideMarginValue}px`;
+  else if (isLanding && columns === 3) return `${theme.size.medium} ${sideMarginValue}px ${theme.size.xlarge}`;
+  else return `${theme.size.large} 0`;
 };
 
 const getColumnValue = (props) => props.columns || React.Children.count(props.children);
@@ -48,19 +51,25 @@ const StyledGrid = styled('div')`
   grid-column-gap: ${theme.size.medium};
   grid-row-gap: ${theme.size.medium};
   grid-template-columns: ${(props) => `repeat(${getColumnValue(props)}, 1fr)`};
-  margin: ${({ isForDrivers }) => getMarginStyles(isForDrivers, 0)};
+
+  margin: ${({ isForDrivers, isLanding, columns }) => getMarginStyles(isForDrivers, isLanding, columns, 0)};
 
   @media ${theme.screenSize.upToMedium} {
-    margin: ${({ isForDrivers }) => getMarginStyles(isForDrivers, 42)};
+    margin: ${({ isForDrivers, isLanding, columns }) => getMarginStyles(isForDrivers, isLanding, columns, 42)};
   }
 
   @media ${theme.screenSize.upToSmall} {
-    margin: ${({ isForDrivers }) => getMarginStyles(isForDrivers, 24)};
+    margin: ${({ isForDrivers, isLanding, columns }) => getMarginStyles(isForDrivers, isLanding, columns, 24)};
   }
 
-  @media ${theme.screenSize.upToXLarge} {
-    grid-template-columns: repeat(2, 1fr);
+  ${
+    '' /*want first 4 cards on landing page to stay as one column, and not affect group of 3 cards (so hacky i'm sorry) */
   }
+  @media ${theme.screenSize.upToXLarge} {
+    ${({ isLanding, columns }) => {
+      if (isLanding) return `grid-template-columns: repeat(${columns}, 1fr);`;
+      else return `grid-template-columns: repeat(2, 1fr);`;
+    }}
 
   @media ${theme.screenSize.upToMedium} {
     ${({ isCarousel, ...props }) =>
@@ -81,12 +90,14 @@ const CardGroup = ({
     children,
     options: { columns, layout, style, type },
   },
+  page,
   ...rest
 }) => {
   const isCompact = style === 'compact';
   const isExtraCompact = style === 'extra-compact';
   const isCarousel = layout === 'carousel';
   const isForDrivers = type === 'drivers';
+  const isLanding = page?.options?.template === 'landing';
 
   return (
     <StyledGrid
@@ -101,6 +112,7 @@ const CardGroup = ({
       noMargin={true}
       isCarousel={isCarousel}
       isForDrivers={isForDrivers}
+      isLanding={isLanding}
     >
       {children.map((child, i) => (
         <ComponentFactory
@@ -110,6 +122,7 @@ const CardGroup = ({
           isCompact={isCompact}
           isExtraCompact={isExtraCompact}
           isForDrivers={isForDrivers}
+          page={page}
         />
       ))}
     </StyledGrid>
@@ -124,6 +137,7 @@ CardGroup.propTypes = {
       columns: PropTypes.number,
     }),
   }).isRequired,
+  page: PropTypes.object,
 };
 
 export default CardGroup;
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
@@ -17,6 +17,36 @@ const cardBaseStyles = css`
   height: 100%;
 `;
 
+const landingStyles = css`
+  flex-direction: row;
+  padding-left: ${theme.size.medium};
+  img {
+    width: ${theme.size.xlarge};
+    height: fit-content;
+  }
+  div {
+    display: flex;
+    flex-direction: column;
+    margin-left: ${theme.size.large};
+    p:first-child {
+      font-size: ${theme.fontSize.h2};
+      font-weight: 500;
+      margin: 0px 0px ${theme.size.default} 0px;
+    }
+  }
+
+  ${'' /* Mobile view */}
+  @media ${theme.screenSize.upToSmall} {
+    flex-direction: column;
+    img {
+      margin-bottom: ${theme.size.medium};
+    }
+    div {
+      margin-left: 0px;
+    }
+  }
+`;
+
 const cardStyling = css`
   flex-direction: column;
   padding: ${theme.size.large};
@@ -36,6 +66,16 @@ const cardDriverStyle = css`
   }
 `;
 
+const landingBottomStyling = css`
+  img {
+    width: 50px;
+  }
+  p {
+    font-weight: 500;
+    line-height: ${theme.size.medium};
+  }
+`;
+
 const CardIcon = styled('img')`
   width: ${theme.size.large};
 `;
@@ -97,13 +137,22 @@ const Card = ({
     options: { cta, headline, icon, 'icon-alt': iconAlt, tag, url },
   },
 }) => {
+  const template = page?.options?.template;
+
+  const isLanding = template === 'landing';
+  const Icon = ['landing', 'product-landing'].includes(template) ? CardIcon : CompactIcon;
+
+  /* If tag == 'landing-bottom', this is 2nd group of cards on 
+  landing page which we want to keep exempt from landing styles */
+  const isLandingBottom = tag === 'landing-bottom';
+
   const styling = [
     cardBaseStyles,
     isForDrivers ? cardDriverStyle : cardStyling,
+    isLanding && !isLandingBottom ? landingStyles : '', // must come after other styles to override
+    isLandingBottom ? landingBottomStyling : '',
     isCompact || isExtraCompact ? compactCardStyling : '',
   ];
-  const template = page?.options?.template;
-  const Icon = ['landing', 'product-landing'].includes(template) ? CardIcon : CompactIcon;
 
   return (
     <LeafyGreenCard className={cx(styling)} onClick={url ? () => onCardClick(url) : undefined}>
@@ -112,25 +161,28 @@ const Card = ({
         condition={isCompact || isExtraCompact}
         wrapper={(children) => <CompactTextWrapper>{children}</CompactTextWrapper>}
       >
-        {tag && <FlexTag>{tag}</FlexTag>}
-        {headline && (
-          <Body
-            className={cx(headingStyling({ isCompact, isExtraCompact }))}
-            compact={isCompact || isExtraCompact}
-            weight="medium"
-          >
-            {headline}
-          </Body>
-        )}
-        {children.map((child, i) => (
-          // The cardRef prop's purpose to distinguish wich RefRoles are coming from the Card component (a workaround while we figure out card-ref support in the parser/)
-          <ComponentFactory nodeData={child} key={i} cardRef={true} />
-        ))}
-        {cta && (
-          <Body className={cx(bodyStyling)}>
-            <Link to={url}>{cta}</Link>
-          </Body>
-        )}
+        {tag && !isLandingBottom && <FlexTag>{tag}</FlexTag>}
+        <div>
+          {headline && (
+            <Body
+              className={cx(headingStyling({ isCompact, isExtraCompact }))}
+              compact={isCompact || isExtraCompact}
+              weight="medium"
+            >
+              {headline}
+            </Body>
+          )}
+          {children.map((child, i) => (
+            // The cardRef prop's purpose to distinguish wich RefRoles are coming from the Card component (a workaround while we figure out card-ref support in the parser/)
+            <ComponentFactory nodeData={child} key={i} cardRef={true} />
+          ))}
+
+          {cta && (
+            <Body className={cx(bodyStyling)}>
+              <Link to={url}>{cta}</Link>
+            </Body>
+          )}
+        </div>
       </ConditionalWrapper>
     </LeafyGreenCard>
   );

diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
@@ -189,6 +189,7 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
   const ia = page?.options?.ia;
 
   const template = page?.options?.template;
+  const isLanding = template === 'landing';
   const isGuidesLanding = project === 'guides' && template === 'product-landing';
   const isGuidesTemplate = template === 'guide';
 
@@ -264,7 +265,7 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
                 />
                 {ia && (
                   <IA
-                    header={<span className={cx([titleStyle])}>{formatText(pageTitle)}</span>}
+                    header={!isLanding && <span className={cx([titleStyle])}>{formatText(pageTitle)}</span>}
                     handleClick={() => {
                       setBack(false);
                       hideMobileSidenav();