Implement generic YouTube block

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',
     )

gatsby/generic-pages/content-blocks.ts

@@ -75,7 +75,7 @@ export const deriveBlockNode: DeriveBlockFn = (
     case 'block-text':
       return deriveTextBlockNode(block, parentId, createNodeArgs)
 
-    case 'block-youtube':
+    case 'block-youtube-embed':
       return deriveYoutubeBlockNode(block, parentId, createNodeArgs)
 
     case 'block-timeline':

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.spec.tsx

@@ -14,6 +14,7 @@ describe('Blocks', () => {
     blocks = [
       factory.getBlockTitleNode({ text: 'My Title' }),
       factory.getBlockTextNode({ text: 'My text.' }),
+      factory.getBlockYoutubeNode({ title: 'My video.' }),
     ]
   })
 
@@ -25,11 +26,13 @@ describe('Blocks', () => {
 
     const text = getByText('My text.')
     expect(text).toBeTruthy()
+
+    const youTubeTitle = getByText('My video.')
+    expect(youTubeTitle).toBeTruthy()
   })
 
   it('gracefully drops unimplemented block types', () => {
     blocks = blocks.concat([
-      factory.getBlockYoutubeNode(),
       factory.getBlockTimelineNode(),
       factory.getBlockImageNode(),
       factory.getBlockCardNode(),
@@ -42,9 +45,6 @@ describe('Blocks', () => {
     const text = getByText('My text.')
     expect(text).toBeTruthy()
 
-    const youtube = queryByText('youtube')
-    expect(youtube).toBeFalsy()
-
     const timelineEntry = queryByText('2020')
     expect(timelineEntry).toBeFalsy()
 
@@ -84,7 +84,13 @@ describe('Block', () => {
     expect(text).toBeTruthy()
   })
 
-  test.todo('can render a youtube block')
+  it('can render a youtube block', () => {
+    const block = factory.getBlockYoutubeNode({ title: 'My video.' })
+    const { getByText } = render(<Block block={block} />)
+    const text = getByText('My video.')
+    expect(text).toBeTruthy()
+  })
+
   test.todo('can render a timeline block')
   test.todo('can render a links list block')
   test.todo('can render an updates list block')

src/components/section/ContentBlock.tsx

@@ -5,19 +5,25 @@ import {
   BlockText as BlockTextType,
   BlockTitle as BlockTitleType,
   BlockUpdatesList as BlockUpdatesListType,
+  BlockYoutube as BlockYoutubeType,
 } from '../../types/generic-page.d'
 import { BlockLinksList } from './blocks/BlockLinksList'
 import { BlockText } from './blocks/BlockText'
 import { BlockTitle } from './blocks/BlockTitle'
 import { BlockUpdatesList } from './blocks/BlockUpdatesList'
+import { BlockYouTube } from './blocks/BlockYouTube'
 
 type BlocksProps = {
   blocks: BlockNode[]
 }
 
 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}</>
@@ -50,10 +56,12 @@ export const Block: FC<BlockProps> = ({ block, className }) => {
           className={className}
         />
       )
+    case 'DABlockYoutube':
+      return (
+        <BlockYouTube block={block as BlockYoutubeType} className={className} />
+      )
 
     // wishlist
-    case 'DABlockYoutube':
-      return null
     case 'DABlockTimeline':
       return null
     case 'DABlockImage':

src/components/section/Section.spec.tsx

@@ -42,7 +42,6 @@ describe('Sections', () => {
 
     sections[1] = factory.getSectionGridNode({
       blocks: [
-        factory.getBlockYoutubeNode(),
         factory.getBlockTimelineNode(),
         factory.getBlockImageNode(),
         factory.getBlockCardNode(),
@@ -56,9 +55,6 @@ describe('Sections', () => {
     const text = getByText('My text.')
     expect(text).toBeTruthy()
 
-    const youtube = queryByText('youtube')
-    expect(youtube).toBeFalsy()
-
     const timelineEntry = queryByText('2020')
     expect(timelineEntry).toBeFalsy()
 

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.spec.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+import { BlockYoutubeNode } from '../../../types/generic-page.d'
+import { BlockYouTube } from './BlockYouTube'
+
+describe('BlockYouTube', () => {
+  it('renders the title', () => {
+    const block = {
+      embedUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      title: 'My video',
+    } as BlockYoutubeNode
+    const { getByText } = render(<BlockYouTube block={block} />)
+    const title = getByText('My video')
+    expect(title).toBeTruthy()
+  })
+})

src/components/section/blocks/BlockYouTube.tsx

@@ -0,0 +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
+  className?: string | undefined
+}
+
+export const BlockYouTube: FC<BlockYouTubeProps> = ({ block, className }) => {
+  return (
+    <>
+      {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
+    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>