fix: button hrefs / media-content buttons

src/blocks/MediaContent/index.tsx

@@ -37,7 +37,7 @@ export const MediaContentBlock: React.FC<MediaContentProps> = ({ mediaContentFie
               <RichText content={richText} />
               {enableLink && link && (
                 <div className={classes.button}>
-                  <Button {...link} labelStyle="mono" icon="arrow" />
+                  <Button {...link} labelStyle="mono" icon="arrow" el="link" />
                 </div>
               )}
             </Cell>
@@ -54,7 +54,7 @@ export const MediaContentBlock: React.FC<MediaContentProps> = ({ mediaContentFie
               <RichText content={richText} />
               {enableLink && link && (
                 <div className={classes.button}>
-                  <Button {...link} labelStyle="mono" icon="arrow" />
+                  <Button {...link} labelStyle="mono" icon="arrow" el="link" />
                 </div>
               )}
             </Cell>

src/components/Button/index.tsx

@@ -4,7 +4,7 @@ import { LineBlip } from '@components/LineBlip'
 import Link from 'next/link'
 import React, { useState } from 'react'
 // eslint-disable-next-line import/no-cycle
-import { Reference } from '../CMSLink'
+import { LinkType, Reference } from '../CMSLink'
 import { ArrowIcon } from '../../icons/ArrowIcon'
 import { SearchIcon } from '../../icons/SearchIcon'
 import classes from './index.module.scss'
@@ -21,6 +21,7 @@ export type Props = {
   icon?: 'arrow' | 'search'
   fullWidth?: boolean
   mobileFullWidth?: boolean
+  type?: LinkType
   reference?: Reference
   htmlButtonType?: 'button' | 'submit'
   onMouseEnter?: () => void
@@ -32,6 +33,38 @@ const icons = {
   search: SearchIcon,
 }
 
+type GenerateSlugType = {
+  type: LinkType
+  url?: string
+  reference?: Reference
+}
+const generateHref = (args: GenerateSlugType): string => {
+  const { reference, url, type } = args
+
+  if ((type === 'custom' || type === undefined) && url) {
+    return url
+  }
+
+  if (type === 'reference' && reference?.value && typeof reference.value !== 'string') {
+    if (reference.relationTo === 'pages') {
+      const { breadcrumbs } = reference.value
+      return breadcrumbs[breadcrumbs.length - 1].url
+    }
+
+    if (reference.relationTo === 'posts') {
+      return `/blog/${reference.value.slug}`
+    }
+
+    if (reference.relationTo === 'case_studies') {
+      return `/case-studies/${reference.value.slug}`
+    }
+
+    return `/${reference.relationTo}/${reference.value.slug}`
+  }
+
+  return ''
+}
+
 const ButtonContent: React.FC<Props> = props => {
   const { icon, label, labelStyle = 'mono' } = props
 
@@ -71,23 +104,20 @@ const elements: {
 export const Button: React.FC<Props> = props => {
   const {
     el = 'button',
+    type,
+    reference,
     newTab,
-    href: hrefFromProps,
     appearance = 'default',
     className: classNameFromProps,
     onClick,
     fullWidth,
     mobileFullWidth,
-    reference,
     htmlButtonType = 'button',
   } = props
 
-  const [isHovered, setIsHovered] = useState(false)
+  const href = generateHref({ type, reference })
 
-  let href = hrefFromProps
-  if (reference && typeof reference?.value === 'object' && reference.value.slug) {
-    href = `/${reference.value.slug}`
-  }
+  const [isHovered, setIsHovered] = useState(false)
 
   const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
 

src/components/CMSLink/index.tsx

@@ -4,6 +4,10 @@ import { CaseStudy, Page, Post } from '@root/payload-types'
 // eslint-disable-next-line import/no-cycle
 import { Button, Props as ButtonProps } from '../Button'
 
+const relationSlugs = {
+  case_studies: 'case-studies',
+}
+
 type PageReference = {
   value: string | Page
   relationTo: 'pages'
@@ -16,7 +20,7 @@ type PostsReference = {
 
 type CaseStudyReference = {
   value: string | CaseStudy
-  relationTo: 'case-studies'
+  relationTo: (typeof relationSlugs)['case_studies']
 }
 
 export type LinkType = 'reference' | 'custom'
@@ -60,6 +64,10 @@ const generateHref = (args: GenerateSlugType): string => {
       return `/blog/${reference.value.slug}`
     }
 
+    if (reference.relationTo === 'case_studies') {
+      return `/case-studies/${reference.value.slug}`
+    }
+
     return `/${reference.relationTo}/${reference.value.slug}`
   }