change: listing props and styles

CHANGELOG.mdx

@@ -41,6 +41,8 @@ Prefix the change with one of these keywords:
 - Icon: restricted to only black, red, white and light grey
 - Icon Cards: restricted to red icons, removed shadow and bg colors
 - Icon Cards: fixed width and height for icons inside container
+- Listings: removed button color options in footer subcomponent, restricted to red
+- Listings: updated card styles
 - Pagination: active text changed to red
 - Nav: space between logo and site title
 - Text and Image: header always has underline

lib/components/Card/CardPeopleMeta.tsx

@@ -10,7 +10,7 @@ export const CardPeopleMeta = ({ jobTitle, children, phone }: CardPeopleMetaProp
       {jobTitle && <li className="text-base @sm:md:text-lg italic">{jobTitle}</li>}
       {children && (
         <li>
-          <strong className="font-semibold break-all text-cyan-700 hover:text-cu-red-700">{children}</strong>
+          <strong className="font-semibold break-all hover:text-cyan-700 text-cu-red-700">{children}</strong>
         </li>
       )}
       {phone && <li>{phone}</li>}

lib/components/Listing/Listing.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import { ChevronRightIcon } from '@heroicons/react/24/outline'
-
 import { ListingFigure } from './ListingFigure'
 import { ListingBody } from './ListingBody'
 import { ListingHeader } from './ListingHeader'
@@ -14,26 +12,12 @@ import { ListingFooter } from './ListingFooter'
 
 export interface ListingProps {
   children: React.ReactNode
-  useArrow?: boolean
 }
 
-export const ListingWrapper = ({ children, useArrow }: ListingProps) => {
-  const arrowStyles = useArrow ? 'pr-14' : ''
-
+export const ListingWrapper = ({ children }: ListingProps) => {
   return (
-    <li className={`cu-listing not-prose relative overflow-hidden @container bg-white p-6 ${arrowStyles}`}>
-      <div className="flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full">
-        {children}
-
-        {useArrow && (
-          <div className="absolute -mt-3 top-1/2 right-4">
-            <ChevronRightIcon
-              className="flex-none w-6 h-6 ml-auto text-cu-black-300 group-hover:text-cu-red"
-              aria-hidden="true"
-            />
-          </div>
-        )}
-      </div>
+    <li className={`cu-listing not-prose relative overflow-hidden @container bg-white p-6`}>
+      <div className="flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full">{children}</div>
     </li>
   )
 }

lib/components/Listing/ListingEventMeta.tsx

@@ -10,7 +10,7 @@ export interface ListingEventMetaProps {
   eventAddress?: string
 }
 
-export const styles = {
+const styles = {
   redIcon: `mr-2 h-6 w-6 flex-shrink-0 text-cu-red-300`,
 }
 

lib/components/Listing/ListingExcerpt.tsx

@@ -6,7 +6,7 @@ export interface ListingExcerptProps {
 export const ListingExcerpt = ({ text, hasMore }: ListingExcerptProps) => {
   return (
     <p className="text-base text-cu-black-700">
-      {text.length > 170 ? `${text.substring(0, 170)}...` : text}
+      {text.length > 200 ? `${text.substring(0, 200)}...` : text}
       {hasMore && <span className="font-semibold"> More</span>}
     </p>
   )

lib/components/Listing/ListingFooter.tsx

@@ -1,20 +1,9 @@
 export interface ListingFooterProps {
   children: React.ReactNode
-  isType?: 'button' | 'badge'
-  buttonType?: 'solid' | 'outline'
-  buttonStyle?: 'red' | 'white' | 'dark-grey' | 'grey'
 }
 
-export const ListingFooter = ({ children, isType, buttonType = 'solid', buttonStyle = 'red' }: ListingFooterProps) => {
-  const buttonClass = isType === 'button' ? `cu-card-button` : ''
-  const buttonTypeClass = isType === 'button' && buttonType ? `cu-card-button-${buttonType}` : 'cu-card-button-solid'
-  const buttonStyleClass = isType === 'button' && buttonStyle ? `cu-card-button-${buttonStyle}` : 'cu-card-button-red'
-
-  return (
-    <footer className={`mt-auto text-white pt-5 ${buttonClass} ${buttonStyleClass} ${buttonTypeClass}`}>
-      {children}
-    </footer>
-  )
+export const ListingFooter = ({ children }: ListingFooterProps) => {
+  return <footer className="pt-5 mt-auto text-white">{children}</footer>
 }
 
 ListingFooter.displayName = 'Listing.Footer'

lib/components/Listing/ListingIconThumb.tsx

@@ -1,52 +1,23 @@
 export interface ListingIconThumbProps {
   icon?: string
-  bgType?: 'none' | 'red' | 'white'
-  hasShadow?: boolean
 }
 
-export const ListingIconThumb = ({ icon, bgType = 'red', hasShadow }: ListingIconThumbProps) => {
+export const ListingIconThumb = ({ icon }: ListingIconThumbProps) => {
   const cdnPath = 'https://cdn.carleton.ca/rds/assets/font-awesome/'
   const iconPath = `${cdnPath}${icon}.svg`
-  const iconShadow = hasShadow ? 'shadow-md' : ''
-
-  // Set classes on icon and wrapping div
-  let iconDiv
-
-  switch (bgType) {
-    case 'none':
-      iconDiv = 'w-10 h-10'
-      break
-    case 'red':
-      iconDiv = 'w-16 h-16 bg-cu-red rounded-md'
-      break
-    case 'white':
-      iconDiv = 'w-16 h-16 bg-white rounded-md'
-      break
-    default:
-      iconDiv = ''
-      break
-  }
-
-  // Use filter to change svg as image to white
-  const whiteIcon = {
-    filter: 'invert(100%) sepia(5%) saturate(0%) hue-rotate(29deg) brightness(106%) contrast(107%)',
-  }
+  const iconAlt = icon ? icon.replace(/-/g, ' ') : ''
 
-  // Use filter to change svg as image to red
   const redIcon = {
     filter: 'invert(20%) sepia(50%) saturate(7177%) hue-rotate(348deg) brightness(91%) contrast(100%)',
   }
 
-  // Remove dashes from icon name
-  const iconAlt = icon ? icon.replace(/-/g, ' ') : ''
-
   return (
-    <figure className={`flex items-center justify-center ${iconDiv} ${iconShadow}`}>
+    <figure className="flex items-center justify-center w-12 h-12">
       <img
         src={iconPath}
         alt={`An icon of a ${iconAlt}`}
-        className={`cu-icon-thumb ${bgType === 'none' ? '' : 'p-3'}`}
-        style={bgType === 'red' ? whiteIcon : redIcon}
+        className="object-cover max-h-full cu-icon-thumb max-w-none"
+        style={redIcon}
       />
     </figure>
   )

lib/components/Listing/ListingPeopleMeta.tsx

@@ -10,7 +10,7 @@ export const ListingPeopleMeta = ({ jobTitle, children, phone }: ListingPeopleMe
       {jobTitle && <li className="text-base @sm:md:text-lg italic">{jobTitle}</li>}
       {children && (
         <li>
-          <strong className="font-semibold break-all hover:cursor-pointer text-cyan-700 hover:text-cu-red-700">
+          <strong className="font-semibold break-all hover:cursor-pointer hover:text-cyan-700 text-cu-red-700">
             {children}
           </strong>
         </li>