Remove as prop

packages/react/src/HeroImage/HeroImage.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { createRef } from 'react'
 import { HeroImage } from './HeroImage'
 import '@testing-library/jest-dom'
@@ -23,12 +23,6 @@ describe('Hero image', () => {
     expect(component).toHaveClass('amsterdam-hero-image extra')
   })
 
-  it('renders a custom HTML element', () => {
-    render(<HeroImage src="https://picsum.photos/1280/360" as="section" />)
-    const sectionElement = screen.getByRole('section')
-    expect(sectionElement).toBeInTheDocument()
-  })
-
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
     const { container } = render(<HeroImage src="https://picsum.photos/1280/360" ref={ref} />)

packages/react/src/HeroImage/HeroImage.tsx

@@ -8,21 +8,17 @@ import { ImgHTMLAttributes } from 'react'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export interface HeroImageProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
-  as?: 'article' | 'aside' | 'div' | 'footer' | 'section'
+  /** The source of the image. */
   src: ImgHTMLAttributes<HTMLImageElement>['src']
 }
 
 export const HeroImage = forwardRef<HTMLDivElement, HeroImageProps>(
-  ({ as = 'div', children, className, src, ...restProps }: HeroImageProps, ref) => {
-    const Component = as
-
-    return (
-      <Component {...restProps} ref={ref} className={clsx('amsterdam-hero-image', className)}>
-        <img alt="" className="amsterdam-hero-image__image" src={src} />
-        {children}
-      </Component>
-    )
-  },
+  ({ children, className, src, ...restProps }: HeroImageProps, ref) => (
+    <div {...restProps} ref={ref} className={clsx('amsterdam-hero-image', className)}>
+      <img alt="" className="amsterdam-hero-image__image" src={src} />
+      {children}
+    </div>
+  ),
 )
 
 HeroImage.displayName = 'HeroImage'

storybook/storybook-react/src/HeroImage/HeroImage.docs.mdx

@@ -21,6 +21,7 @@ Als het nodig is wordt deze uitgerekt om de volledige oppervlakte in te nemen.
 ### Met zoekveld
 
 Een [Grid](?path=/docs/react_layout-grid--docs) verzorgt horizontale witruimte aan weerszijden en kolommen voor layout.
-Zo kan bijvoorbeeld een zoekveld geplaatst worden. Verticaal centreren gaat vanzelf.
+Zo kan bijvoorbeeld een zoekveld geplaatst worden.
+Verticaal centreren gaat vanzelf.
 
 <Canvas of={HeroImageStories.WithSearchField} />