Add Image component, refactor Diagram to use it

Author: webstackdev

src/components/Diagram/index.astro

@@ -1,10 +1,15 @@
 ---
-import type { ImageMetadata } from 'astro'
-import { Picture } from 'astro:assets'
+import Image from '@components/Image/index.astro'
+
+type ImageSource = {
+  src: string
+  width: number
+  height: number
+}
 
 export interface Props {
   /** The image source for the diagram */
-  src?: ImageMetadata
+  src?: ImageSource
   /** The title of the diagram */
   title: string
   /** A detailed description of the diagram for vision-impaired users */
@@ -16,20 +21,7 @@ const hasDefaultSlot = Astro.slots.has('default')
 ---
 
 <figure class="my-6 mx-auto">
-  {src && (
-    <Picture
-      src={src}
-      alt={title}
-      widths={[480, 768, 1024, 1280]}
-      sizes="100vw"
-      formats={['avif', 'webp', 'jpeg']}
-      layout="constrained"
-      fit="contain"
-      position="center"
-      class="w-full"
-      loading="lazy"
-    />
-  )}
+  {src && <Image src={src} alt={title} variant="center" />}
 
   {hasDefaultSlot && (
     <div class="flex justify-center">

src/components/Icon/icons/minus.astro

@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Minus Symbol Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M 19,13 H 5 a 1,1 0 0 1 0,-2 h 14 a 1,1 0 0 1 0,2 z"
+  />
+</svg>

src/components/Image/client/__fixtures__/index.fixture.astro

@@ -0,0 +1,16 @@
+---
+import Image from '@components/Image/index.astro'
+import backstageBackground from '@assets/images/backstage-background.jpg'
+
+export interface Props {
+  alt?: string
+  variant?: 'left' | 'right' | 'center' | 'full'
+}
+
+const {
+  alt = 'Backstage background test image',
+  variant = 'center',
+}: Props = Astro.props
+---
+
+<Image src={backstageBackground} alt={alt} variant={variant} />

src/components/Image/client/__tests__/index.spec.ts

@@ -0,0 +1,104 @@
+import { beforeEach, describe, expect, test } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import ImageFixture from '@components/Image/client/__fixtures__/index.fixture.astro'
+import type { ImageElement as ImageElementInstance } from '@components/Image/client'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { executeRender } from '@test/unit/helpers/litRuntime'
+
+type ImageModule = WebComponentModule<ImageElementInstance>
+
+const getMainImage = (element: ImageElementInstance): HTMLImageElement | null =>
+	element.querySelector('[data-image-figure] img')
+
+const getOpenButton = (element: ImageElementInstance): HTMLButtonElement | null =>
+	element.querySelector('[data-image-open]')
+
+const getDialog = (element: ImageElementInstance): HTMLElement | null =>
+	element.querySelector('[data-image-dialog]')
+
+const getModalImage = (element: ImageElementInstance): HTMLImageElement | null =>
+	element.querySelector('[data-image-modal-asset]')
+
+describe('Image web component', () => {
+	let container: AstroContainer
+
+	beforeEach(async () => {
+		container = await AstroContainer.create()
+	})
+
+	const renderImage = async (
+		props: {
+			alt?: string
+			variant?: 'left' | 'right' | 'center' | 'full'
+		},
+		assertion: (_context: {
+			element: ImageElementInstance
+			window: Window & typeof globalThis
+		}) => Promise<void> | void
+	) => {
+		await executeRender<ImageModule>({
+			container,
+			component: ImageFixture,
+			moduleSpecifier: '@components/Image/client/index',
+			args: { props },
+			waitForReady: async element => {
+				await element.updateComplete
+			},
+			assert: async ({ element, window }) => {
+				await assertion({ element, window: window as Window & typeof globalThis })
+			},
+		})
+	}
+
+	test('renders centered image markup by default', async () => {
+		await renderImage({}, async ({ element }) => {
+			expect(element.getAttribute('data-image-variant')).toBe('center')
+
+			const mainImage = getMainImage(element)
+			expect(mainImage?.getAttribute('alt')).toBe('Backstage background test image')
+
+			const openButton = getOpenButton(element)
+			expect(openButton?.getAttribute('aria-label')).toContain('Backstage background test image')
+
+			const dialog = getDialog(element)
+			expect(dialog?.hasAttribute('hidden')).toBe(true)
+		})
+	})
+
+	test('opens the modal when the magnify button is activated', async () => {
+		await renderImage({ variant: 'right' }, async ({ element, window }) => {
+			expect(element.getAttribute('data-image-variant')).toBe('right')
+
+			const openButton = getOpenButton(element)
+			openButton?.dispatchEvent(new window.Event('click', { bubbles: true }))
+			await element.updateComplete
+
+			const dialog = getDialog(element)
+			expect(dialog?.hasAttribute('hidden')).toBe(false)
+			expect(dialog?.getAttribute('aria-label')).toContain('Backstage background test image')
+
+			const modalImage = getModalImage(element)
+			expect(modalImage?.getAttribute('alt')).toBe('Backstage background test image')
+
+			const closeIcon = element.querySelector(
+				'button[aria-label="Close image dialog"] svg'
+			) as SVGElement | null
+			expect(closeIcon?.getAttribute('aria-hidden')).toBe('true')
+			expect(closeIcon?.getAttribute('focusable')).toBe('false')
+		})
+	})
+
+	test('closes the modal on Escape', async () => {
+		await renderImage({}, async ({ element, window }) => {
+			const openButton = getOpenButton(element)
+			openButton?.dispatchEvent(new window.Event('click', { bubbles: true }))
+			await element.updateComplete
+
+			window.document.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Escape' }))
+			await element.updateComplete
+
+			const dialog = getDialog(element)
+			expect(dialog?.hasAttribute('hidden')).toBe(true)
+		})
+	})
+})