Homepage Stories & Events layout fixes (#1103)

* Pass slot props to Card. Adjust css to align and match designs

* Remove date label and abbreviate month for small variant cards

* Default size to medium

Author: jonkafton

frontends/mit-open/src/pages/HomePage/NewsEventsSection.tsx

@@ -73,7 +73,6 @@ const EventsContainer = styled.section`
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
-  align-self: stretch;
 `
 
 const StoryCard = styled(Card)<{ mobile: boolean }>`
@@ -145,8 +144,6 @@ const EventMonth = styled.p`
 `
 
 const EventTitle = styled.p`
-  height: ${theme.typography.pxToRem(59)};
-  align-self: stretch;
   color: ${theme.custom.colors.darkGray2};
   ${{ ...theme.typography.subtitle1 }}
   margin: 0;
@@ -176,7 +173,9 @@ const Story: React.FC<{ item: NewsFeedItem; mobile: boolean }> = ({
   return (
     <StoryCard mobile={mobile} href={item.url}>
       <Card.Image src={item.image?.url} alt={item.image?.alt} />
-      <Card.Title>{item.title}</Card.Title>
+      <Card.Title lines={2} style={{ marginBottom: -13 }}>
+        {item.title}
+      </Card.Title>
       <Card.Footer>
         Published: {formatDate(item.news_details?.publish_date)}
       </Card.Footer>
@@ -258,7 +257,7 @@ const NewsEventsSection: React.FC = () => {
           <Content>
             <StoriesContainer>
               <Typography variant="h4">Stories</Typography>
-              <Grid container columnSpacing="24px" rowSpacing="29px">
+              <Grid container columnSpacing="24px" rowSpacing="28px">
                 {stories.map((item) => (
                   <Grid item key={item.id} xs={12} sm={12} md={6} lg={4} xl={4}>
                     <Story item={item as NewsFeedItem} mobile={false} />

frontends/ol-components/src/components/Card/Card.tsx

@@ -4,6 +4,7 @@ import React, {
   Children,
   ImgHTMLAttributes,
   isValidElement,
+  CSSProperties,
 } from "react"
 import styled from "@emotion/styled"
 import { theme } from "../ThemeProvider/ThemeProvider"
@@ -81,22 +82,31 @@ const Info = styled.div<{ size?: Size }>`
   margin-bottom: ${({ size }) => (size === "small" ? 4 : 8)}px;
 `
 
-const Title = styled.h3<{ size?: Size }>`
+const Title = styled.h3<{ lines?: number; size?: Size }>`
   text-overflow: ellipsis;
-  height: ${({ size }) => theme.typography.pxToRem(size === "small" ? 36 : 60)};
+  height: ${({ lines, size }) => {
+    const lineHeightPx = size === "small" ? 18 : 20
+    lines = lines ?? (size === "small" ? 2 : 3)
+    return theme.typography.pxToRem(lines * lineHeightPx)
+  }};
   overflow: hidden;
   margin: 0;
 
   ${({ size }) =>
     size === "small"
       ? { ...theme.typography.subtitle2 }
       : { ...theme.typography.subtitle1 }}
-  @supports (-webkit-line-clamp: ${({ size }) => (size === "small" ? 2 : 3)}) {
-    white-space: initial;
-    display: -webkit-box;
-    -webkit-line-clamp: ${({ size }) => (size === "small" ? 2 : 3)};
-    -webkit-box-orient: vertical;
-  }
+
+  ${({ lines, size }) => {
+    lines = lines ?? (size === "small" ? 2 : 3)
+    return `
+      @supports (-webkit-line-clamp: ${lines}) {
+        white-space: initial;
+        display: -webkit-box;
+        -webkit-line-clamp: ${lines};
+        -webkit-box-orient: vertical;
+      }`
+  }}
 `
 
 const Footer = styled.span`
@@ -134,17 +144,34 @@ type CardProps = {
   size?: Size
   href?: string
 }
+
+type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  size?: Size
+  style?: CSSProperties
+}
+type TitleProps = {
+  children?: ReactNode
+  lines?: number
+  style?: CSSProperties
+}
+type SlotProps = { children?: ReactNode; style?: CSSProperties }
+
 type Card = FC<CardProps> & {
   Content: FC<{ children: ReactNode }>
-  Image: FC<ImgHTMLAttributes<HTMLImageElement> | { size?: Size }>
-  Info: FC<{ children: ReactNode }>
-  Title: FC<{ children: ReactNode; size?: Size }>
-  Footer: FC<{ children: ReactNode }>
-  Actions: FC<{ children: ReactNode }>
+  Image: FC<ImageProps>
+  Info: FC<SlotProps>
+  Title: FC<TitleProps>
+  Footer: FC<SlotProps>
+  Actions: FC<SlotProps>
 }
 
 const Card: Card = ({ children, className, size, href }) => {
-  let content, imageProps, info, title, footer, actions
+  let content,
+    image: ImageProps = {},
+    info: SlotProps = {},
+    title: TitleProps = {},
+    footer: SlotProps = {},
+    actions: SlotProps = {}
 
   const _Container = href ? LinkContainer : Container
 
@@ -164,11 +191,11 @@ const Card: Card = ({ children, className, size, href }) => {
   Children.forEach(children, (child) => {
     if (!isValidElement(child)) return
     if (child.type === Content) content = child.props.children
-    else if (child.type === Image) imageProps = child.props
-    else if (child.type === Info) info = child.props.children
-    else if (child.type === Title) title = child.props.children
-    else if (child.type === Footer) footer = child.props.children
-    else if (child.type === Actions) actions = child.props.children
+    else if (child.type === Image) image = child.props
+    else if (child.type === Info) info = child.props
+    else if (child.type === Title) title = child.props
+    else if (child.type === Footer) footer = child.props
+    else if (child.type === Actions) actions = child.props
   })
 
   if (content) {
@@ -184,21 +211,27 @@ const Card: Card = ({ children, className, size, href }) => {
   return (
     <Wrapper className={className} size={size}>
       <_Container to={href!}>
-        {imageProps && (
+        {image && (
           <Image
             size={size}
-            {...(imageProps as ImgHTMLAttributes<HTMLImageElement>)}
+            {...(image as ImgHTMLAttributes<HTMLImageElement>)}
           />
         )}
         <Body>
-          {info && <Info size={size}>{info}</Info>}
-          <Title size={size}>{title}</Title>
+          {info.children && (
+            <Info size={size} {...info}>
+              {info.children}
+            </Info>
+          )}
+          <Title size={size} {...title}>
+            {title.children}
+          </Title>
         </Body>
         <Bottom>
-          <Footer>{footer}</Footer>
+          <Footer {...footer}>{footer.children}</Footer>
         </Bottom>
       </_Container>
-      {actions && <Actions>{actions}</Actions>}
+      {actions.children && <Actions {...actions}>{actions.children}</Actions>}
     </Wrapper>
   )
 }

frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx

@@ -73,7 +73,7 @@ const isOcw = (resource: LearningResource) =>
   resource.resource_type === ResourceTypeEnum.Course &&
   resource.platform?.code === PlatformEnum.Ocw
 
-const getStartDate = (resource: LearningResource) => {
+const getStartDate = (resource: LearningResource, size: Size = "medium") => {
   let startDate = resource.next_start_date
 
   if (!startDate) {
@@ -87,7 +87,7 @@ const getStartDate = (resource: LearningResource) => {
 
   if (!startDate) return null
 
-  return formatDate(startDate, "MMMM DD, YYYY")
+  return formatDate(startDate, `MMM${size === "medium" ? "M" : ""} DD, YYYY`)
 }
 
 const StartDate: React.FC<{ resource: LearningResource; size?: Size }> = ({
@@ -98,11 +98,8 @@ const StartDate: React.FC<{ resource: LearningResource; size?: Size }> = ({
 
   if (!startDate) return null
 
-  const label = isOcw(resource)
-    ? size === "medium"
-      ? "As taught in:"
-      : ""
-    : "Starts:"
+  const label =
+    size === "medium" ? (isOcw(resource) ? "As taught in:" : "Starts:") : ""
 
   return (
     <>