fix: Refactor subcomponents

packages/react/package.json

@@ -63,6 +63,7 @@
     "react-dom": "18.2.0",
     "rollup": "4.9.4",
     "rollup-plugin-delete": "2.0.0",
+    "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-filesize": "10.0.0",
     "rollup-plugin-node-externals": "6.1.2",
     "rollup-plugin-node-polyfills": "0.2.1",

packages/react/rollup.config.mjs

@@ -7,6 +7,8 @@ import nodeExternal from 'rollup-plugin-node-externals'
 import nodePolyfills from 'rollup-plugin-node-polyfills'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import typescript from 'rollup-plugin-typescript2'
+import dts from 'rollup-plugin-dts'
+import del from 'rollup-plugin-delete'
 
 const packageJson = JSON.parse(readFileSync('./package.json', 'utf8'))
 
@@ -46,7 +48,7 @@ export default [
         include: /node_modules/,
       }),
       nodePolyfills(),
-      typescript({ includeDependencies: false }),
+      typescript({ includeDependencies: false, useTsconfigDeclarationDir: true }),
       babel({
         presets: ['@babel/preset-react'],
         babelHelpers: 'runtime',
@@ -58,4 +60,15 @@ export default [
       filesize(),
     ],
   },
+  {
+    input: './dist/dts/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    plugins: [
+      dts(),
+      del({
+        targets: 'dist/dts',
+        hook: 'buildEnd',
+      }),
+    ],
+  },
 ]

packages/react/src/Breadcrumb/Breadcrumb.test.tsx

@@ -4,6 +4,25 @@ import { Breadcrumb } from './Breadcrumb'
 import '@testing-library/jest-dom'
 
 describe('Breadcrumb', () => {
+  it('renders', () => {
+    render(<Breadcrumb />)
+    const component = screen.getByRole('navigation')
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<Breadcrumb />)
+    const component = screen.getByRole('navigation')
+    expect(component).toHaveClass('amsterdam-breadcrumb')
+  })
+
+  it('renders an additional class name', () => {
+    render(<Breadcrumb className="extra" />)
+    const component = screen.getByRole('navigation')
+    expect(component).toHaveClass('amsterdam-breadcrumb extra')
+  })
+
   it('renders Breadcrumb component with children', () => {
     const breadcrumbItems = [
       { label: 'Item 1', href: '/item-1' },

packages/react/src/Breadcrumb/Breadcrumb.tsx

@@ -3,40 +3,26 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+import { clsx } from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { BreadcrumbItem } from './BreadcrumbItem'
 
 export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 interface BreadcrumbComponent extends ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>> {
   Item: typeof BreadcrumbItem
 }
 
-export const Breadcrumb = forwardRef(({ children, ...restProps }: BreadcrumbProps, ref: ForwardedRef<HTMLElement>) => {
-  return (
-    <nav {...restProps} className="amsterdam-breadcrumb" ref={ref}>
+export const Breadcrumb = forwardRef(
+  ({ children, className, ...restProps }: BreadcrumbProps, ref: ForwardedRef<HTMLElement>) => (
+    <nav {...restProps} className={clsx('amsterdam-breadcrumb', className)} ref={ref}>
       <ol className="amsterdam-breadcrumb__list">{children}</ol>
     </nav>
-  )
-}) as BreadcrumbComponent
+  ),
+) as BreadcrumbComponent
 
 Breadcrumb.displayName = 'Breadcrumb'
 
-export interface BreadcrumbItemProps extends PropsWithChildren<HTMLAttributes<HTMLLIElement>> {
-  href: string
-}
-
-const BreadcrumbItem = forwardRef(
-  ({ children, href, ...restProps }: BreadcrumbItemProps, ref: ForwardedRef<HTMLLIElement>) => {
-    return (
-      <li {...restProps} className="amsterdam-breadcrumb__item" ref={ref}>
-        <a className="amsterdam-breadcrumb__link" href={href}>
-          {children}
-        </a>
-      </li>
-    )
-  },
-)
-
-BreadcrumbItem.displayName = 'BreadcrumbItem'
 Breadcrumb.Item = BreadcrumbItem
+Breadcrumb.Item.displayName = 'Breadcrumb.Item'

packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { BreadcrumbItem } from './BreadcrumbItem'
+import '@testing-library/jest-dom'
+
+describe('BreadcrumbItem', () => {
+  it('renders', () => {
+    render(<BreadcrumbItem href="/" />)
+    const component = screen.getByRole('listitem')
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<BreadcrumbItem href="/" />)
+    const item = screen.getByRole('listitem')
+    expect(item).toHaveClass('amsterdam-breadcrumb__item')
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveClass('amsterdam-breadcrumb__link')
+  })
+
+  it('renders an additional class name', () => {
+    render(<BreadcrumbItem href="/" className="extra" />)
+    const component = screen.getByRole('listitem')
+    expect(component).toHaveClass('amsterdam-breadcrumb__item extra')
+  })
+
+  it('renders the href attribute', () => {
+    render(<BreadcrumbItem href="/" />)
+    const component = screen.getByRole('link')
+    expect(component).toHaveAttribute('href', '/')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLLIElement>()
+    render(<BreadcrumbItem href="/" ref={ref} />)
+    const component = screen.getByRole('listitem')
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/Breadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import { clsx } from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export interface BreadcrumbItemProps extends PropsWithChildren<HTMLAttributes<HTMLLIElement>> {
+  href: string
+}
+
+export const BreadcrumbItem = forwardRef(
+  ({ children, className, href, ...restProps }: BreadcrumbItemProps, ref: ForwardedRef<HTMLLIElement>) => (
+    <li {...restProps} className={clsx('amsterdam-breadcrumb__item', className)} ref={ref}>
+      <a className="amsterdam-breadcrumb__link" href={href}>
+        {children}
+      </a>
+    </li>
+  ),
+)
+
+BreadcrumbItem.displayName = 'BreadcrumbItem'

packages/react/src/Breadcrumb/index.ts

@@ -1,2 +1,3 @@
 export { Breadcrumb } from './Breadcrumb'
-export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb'
+export type { BreadcrumbProps } from './Breadcrumb'
+export type { BreadcrumbItemProps } from './BreadcrumbItem'

packages/react/src/Card/Card.test.tsx

@@ -14,60 +14,28 @@ describe('Card', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const cardRender = render(<Card />)
-    const { container: cardHeadingGroupRender } = render(<Card.HeadingGroup tagline="test" />)
-    const cardLinkRender = render(<Card.Link href="/" />)
+    render(<Card />)
 
-    const card = cardRender.getByRole('article')
-    const cardHeadingGroup = cardHeadingGroupRender.querySelector(':only-child')
-    const cardLink = cardLinkRender.getByRole('link')
+    const component = screen.getByRole('article')
 
-    expect(card).toHaveClass('amsterdam-card')
-    expect(cardHeadingGroup).toHaveClass('amsterdam-card__heading-group')
-    expect(cardLink).toHaveClass('amsterdam-card__link')
+    expect(component).toHaveClass('amsterdam-card')
   })
 
   it('renders an additional class name', () => {
-    const cardRender = render(<Card className="extra" />)
-    const { container: cardHeadingGroupRender } = render(<Card.HeadingGroup tagline="test" className="extra" />)
-    const cardLinkRender = render(<Card.Link href="/" className="extra" />)
+    render(<Card className="extra" />)
 
-    const card = cardRender.getByRole('article')
-    const cardHeadingGroup = cardHeadingGroupRender.querySelector(':only-child')
-    const cardLink = cardLinkRender.getByRole('link')
+    const component = screen.getByRole('article')
 
-    expect(card).toHaveClass('extra')
-    expect(cardHeadingGroup).toHaveClass('extra')
-    expect(cardLink).toHaveClass('extra')
-
-    expect(card).toHaveClass('amsterdam-card')
-    expect(cardHeadingGroup).toHaveClass('amsterdam-card__heading-group')
-    expect(cardLink).toHaveClass('amsterdam-card__link')
-  })
-
-  it('renders a tagline', () => {
-    render(<Card.HeadingGroup tagline="tagline" />)
-
-    const tagline = screen.getByText('tagline')
-
-    expect(tagline).toBeInTheDocument()
+    expect(component).toHaveClass('amsterdam-card extra')
   })
 
   it('supports ForwardRef in React', () => {
-    const cardRef = createRef<HTMLElement>()
-    const cardHeadingGroupRef = createRef<HTMLElement>()
-    const cardLinkRef = createRef<HTMLAnchorElement>()
+    const ref = createRef<HTMLElement>()
 
-    const cardRender = render(<Card ref={cardRef} />)
-    const { container: cardHeadingGroupRender } = render(<Card.HeadingGroup tagline="test" ref={cardHeadingGroupRef} />)
-    const cardLinkRender = render(<Card.Link href="/" ref={cardLinkRef} />)
+    render(<Card ref={ref} />)
 
-    const card = cardRender.getByRole('article')
-    const cardHeadingGroup = cardHeadingGroupRender.querySelector(':only-child')
-    const cardLink = cardLinkRender.getByRole('link')
+    const component = screen.getByRole('article')
 
-    expect(cardRef.current).toBe(card)
-    expect(cardHeadingGroupRef.current).toBe(cardHeadingGroup)
-    expect(cardLinkRef.current).toBe(cardLink)
+    expect(ref.current).toBe(component)
   })
 })

packages/react/src/Card/Card.tsx

@@ -5,43 +5,9 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type {
-  AnchorHTMLAttributes,
-  ForwardedRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
-import { Paragraph } from '../Paragraph'
-
-export interface CardHeadingProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
-  tagline: string
-}
-
-export const CardHeadingGroup = forwardRef(
-  ({ children, className, tagline, ...restProps }: CardHeadingProps, ref: ForwardedRef<HTMLElement>) => (
-    <hgroup {...restProps} ref={ref} className={clsx('amsterdam-card__heading-group', className)}>
-      {children}
-      <Paragraph size="small">{tagline}</Paragraph>
-    </hgroup>
-  ),
-)
-
-CardHeadingGroup.displayName = 'CardHeadingGroup'
-
-export const CardLink = forwardRef(
-  (
-    { children, className, ...otherProps }: PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>,
-    ref: ForwardedRef<HTMLAnchorElement>,
-  ) => (
-    <a {...otherProps} ref={ref} className={clsx('amsterdam-card__link', className)}>
-      {children}
-    </a>
-  ),
-)
-
-CardLink.displayName = 'CardLink'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { CardHeadingGroup } from './CardHeadingGroup'
+import { CardLink } from './CardLink'
 
 export interface CardProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
 

packages/react/src/Card/CardHeadingGroup.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { CardHeadingGroup } from './CardHeadingGroup'
+import '@testing-library/jest-dom'
+
+describe('CardHeadingGroup', () => {
+  it('renders', () => {
+    const { container } = render(<CardHeadingGroup tagline="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<CardHeadingGroup tagline="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-card__heading-group')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<CardHeadingGroup tagline="test" className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-card__heading-group extra')
+  })
+
+  it('renders a tagline', () => {
+    render(<CardHeadingGroup tagline="tagline" />)
+
+    const tagline = screen.getByText('tagline')
+
+    expect(tagline).toBeInTheDocument()
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+    const { container } = render(<CardHeadingGroup tagline="test" ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/Card/CardHeadingGroup.tsx

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { Paragraph } from '../Paragraph'
+
+export interface CardHeadingGroupProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+  tagline: string
+}
+
+export const CardHeadingGroup = forwardRef(
+  ({ children, className, tagline, ...restProps }: CardHeadingGroupProps, ref: ForwardedRef<HTMLElement>) => (
+    <hgroup {...restProps} ref={ref} className={clsx('amsterdam-card__heading-group', className)}>
+      {children}
+      <Paragraph size="small">{tagline}</Paragraph>
+    </hgroup>
+  ),
+)
+
+CardHeadingGroup.displayName = 'CardHeadingGroup'