feat: refactor content-block default styles, apply to YouTubeEmbed.

Author: jtfairbank

e2e-tests/about-us.spec.ts

@@ -18,7 +18,7 @@ test.describe('About us', () => {
   it('should have the correct content', async ({ page }) => {
     await page.goto(new URL('/about-us/', base).toString())
 
-    expect(await page.getByTitle('YouTube embed')).toHaveAttribute(
+    expect(await page.getByTitle('About Distribute Aid!')).toHaveAttribute(
       'src',
       'https://www.youtube.com/embed/msizPweg3kE',
     )

src/components/about-us/AboutHero.tsx

@@ -3,7 +3,10 @@ import { FC } from 'react'
 
 const AboutHero: FC = () => (
   <div className="py-8 md:py-20 mx-auto" style={{ maxWidth: 800 }}>
-    <YouTubeEmbed videoUrl="https://www.youtube.com/embed/msizPweg3kE" />
+    <YouTubeEmbed
+      title="About Distribute Aid!"
+      url="https://www.youtube.com/embed/msizPweg3kE"
+    />
   </div>
 )
 

src/components/section/ContentBlock.tsx

@@ -19,7 +19,11 @@ type BlocksProps = {
 
 export const Blocks: FC<BlocksProps> = ({ blocks }) => {
   const blockElems = blocks.map((block, i) => (
-    <Block className="mb-8 last:mb-0" key={i} block={block} />
+    <Block
+      className="mb-8 last:mb-0 border-l-2 pl-4 border-navy-400"
+      key={i}
+      block={block}
+    />
   ))
 
   return <>{blockElems}</>
@@ -53,10 +57,9 @@ export const Block: FC<BlockProps> = ({ block, className }) => {
         />
       )
     case 'DABlockYoutube':
-      return <BlockYouTube
-        block={block as BlockYoutubeType}
-        className={className}
-      />
+      return (
+        <BlockYouTube block={block as BlockYoutubeType} className={className} />
+      )
 
     // wishlist
     case 'DABlockTimeline':

src/components/section/blocks/BlockLinksList.tsx

@@ -11,11 +11,10 @@ type BlockTextProps = {
 export const BlockLinksList: FC<BlockTextProps> = ({ block, className }) => {
   return (
     <>
-      {/* TODO: replace w/ <BlockTitle> once that no longer needs a full Node */}
       {block.title && (
         <BlockTitle className={className} block={{ text: block.title }} />
       )}
-      <div className={`${className} border-l-2 pl-4 border-navy-400`}>
+      <div className={`${className}`}>
         {/* NOTE: we're intentionally dropping the title so it doesn't get repeated */}
         <LinksList list={{ links: block.links }} />
       </div>

src/components/section/blocks/BlockText.tsx

@@ -9,7 +9,7 @@ type BlockTextProps = {
 
 export const BlockText: FC<BlockTextProps> = ({ block, className }) => {
   return (
-    <div className={`${className} border-l-2 pl-4 border-navy-400`}>
+    <div className={`${className}`}>
       <MarkdownContent content={block.text} />
     </div>
   )

src/components/section/blocks/BlockTitle.tsx

@@ -7,9 +7,5 @@ type BlockTitleProps = {
 }
 
 export const BlockTitle: FC<BlockTitleProps> = ({ block, className }) => {
-  return (
-    <h2 className={`${className} pl-4 border-l-2 border-navy-600`}>
-      {block.text}
-    </h2>
-  )
+  return <h2 className={`${className} border-navy-600`}>{block.text}</h2>
 }

src/components/section/blocks/BlockUpdatesList.tsx

@@ -12,11 +12,10 @@ type BlockTextProps = {
 export const BlockUpdatesList: FC<BlockTextProps> = ({ block, className }) => {
   return (
     <>
-      {/* TODO: replace w/ <BlockTitle> once that no longer needs a full Node */}
       {block.title && (
         <BlockTitle className={className} block={{ text: block.title }} />
       )}
-      <div className={`${className} border-l-2 pl-4 border-navy-400`}>
+      <div className={`${className}`}>
         {/* NOTE: we're intentionally dropping the title so it doesn't get repeated */}
         <UpdatesList list={{ visibleCount: 10, updates: block.updates }} />
       </div>

src/components/section/blocks/BlockYouTube.tsx

@@ -1,16 +1,23 @@
 import { YouTubeEmbed } from '@components/youtube-embed/YouTubeEmbed'
 import { FC } from 'react'
 import { BlockYoutube as BlockYoutubeType } from '../../../types/generic-page.d'
+import { BlockTitle } from './BlockTitle'
 
 type BlockYouTubeProps = {
-  block: BlockYoutubeType,
+  block: BlockYoutubeType
   className?: string | undefined
 }
 
 export const BlockYouTube: FC<BlockYouTubeProps> = ({ block, className }) => {
   return (
-    <div className={className}>
-      <YouTubeEmbed videoUrl={block.embedUrl} videoTitle={block.title} />
-    </div>
+    <>
+      {block.title && (
+        <BlockTitle className={className} block={{ text: block.title }} />
+      )}
+      <div className={`${className}`}>
+        {/* NOTE: we're intentionally dropping the title so it doesn't get repeated */}
+        <YouTubeEmbed url={block.embedUrl} />
+      </div>
+    </>
   )
 }

src/components/youtube-embed/YouTubeEmbed.test.tsx

@@ -5,19 +5,19 @@ describe('<YouTubeEmbed/>', () => {
   it('renders the video and title', () => {
     render(
       <YouTubeEmbed
-        videoTitle="the title of the video"
-        videoUrl="https://example.com/video"
+        title="the title of the video"
+        url="https://example.com/video"
       />,
     )
 
-    expect(screen.getByText('the title of the video'))
-    expect(screen.getByTitle('YouTube embed')).toBeInTheDocument()
+    expect(screen.getByText('the title of the video')).toBeInTheDocument()
+    expect(screen.getByTitle('the title of the video')).toBeInTheDocument()
   })
 
   it('does not render title when none is given', () => {
-    render(<YouTubeEmbed videoUrl="https://example.com/video" />)
+    render(<YouTubeEmbed url="https://example.com/video" />)
 
-    expect(screen.getByTitle('YouTube embed')).toBeInTheDocument()
-    expect(screen.queryByTestId('videoTitle')).not.toBeInTheDocument()
+    expect(screen.getByTitle('Youtube Video')).toBeInTheDocument()
+    expect(screen.queryByTestId('YouTubeEmbed-Title')).not.toBeInTheDocument()
   })
 })

src/components/youtube-embed/YouTubeEmbed.tsx

@@ -2,22 +2,22 @@ import { FC, PropsWithChildren } from 'react'
 
 export const YouTubeEmbed: FC<
   PropsWithChildren<{
-    videoUrl: string
-    videoTitle?: string | undefined
+    url: string
+    title?: string | undefined
   }>
-> = ({ videoUrl, videoTitle }) => (
-  <figure>
+> = ({ url, title }) => (
+  <figure className="first:mt-0 last:mb-0">
     <iframe
       className="aspect-video w-full"
-      src={videoUrl}
-      title="YouTube embed"
+      src={url}
+      title={title || 'Youtube Video'}
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       frameBorder="0"
       allowFullScreen
     />
-    {videoTitle && (
-      <figcaption data-testid="videoTitle" className="text-sm mt-4">
-        {videoTitle}
+    {title && (
+      <figcaption data-testid="YouTubeEmbed-Title" className="text-sm mt-4">
+        {title}
       </figcaption>
     )}
   </figure>