Merge branch 'develop' of https://github.com/Amsterdam/design-system …

…into task/DES-569-refactor-subcomponents

packages/react/src/Grid/GridCell.tsx

@@ -5,7 +5,7 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-import { GridColumnNumber, GridColumnNumbers } from './Grid'
+import type { GridColumnNumber, GridColumnNumbers } from './Grid'
 import { gridCellClasses } from './gridCellClasses'
 
 type GridCellSpanAllProp = {

packages/react/src/Grid/gridCellClasses.ts

@@ -1,4 +1,4 @@
-import { GridCellProps } from './GridCell'
+import type { GridCellProps } from './GridCell'
 
 export const gridCellClasses = (span?: GridCellProps['span'], start?: GridCellProps['start']): string[] => {
   if (!span && !start) {

packages/react/src/Grid/index.ts

@@ -1,2 +1,3 @@
-export * from './Grid'
+export { Grid } from './Grid'
+export type { GridProps, GridColumnNumber, GridColumnNumbers } from './Grid'
 export type { GridCellProps } from './GridCell'

packages/react/src/Header/Header.test.tsx

@@ -1,15 +1,11 @@
 import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
-import { Header, HeaderProps } from './Header'
+import { Header } from './Header'
 import '@testing-library/jest-dom'
 
 describe('Header', () => {
-  const defaultProps: HeaderProps = {
-    logoLink: '/',
-  }
-
   it('renders', () => {
-    render(<Header {...defaultProps} />)
+    render(<Header />)
 
     const component = screen.getByRole('banner')
 
@@ -18,15 +14,15 @@ describe('Header', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    render(<Header {...defaultProps} />)
+    render(<Header />)
 
     const component = screen.getByRole('banner')
 
     expect(component).toHaveClass('amsterdam-header')
   })
 
   it('renders an additional class name', () => {
-    render(<Header {...defaultProps} className="extra" />)
+    render(<Header className="extra" />)
 
     const component = screen.getByRole('banner')
 
@@ -37,31 +33,31 @@ describe('Header', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
 
-    render(<Header {...defaultProps} ref={ref} />)
+    render(<Header ref={ref} />)
 
     const component = screen.getByRole('banner')
 
     expect(ref.current).toBe(component)
   })
 
   it('renders with a logo link', () => {
-    render(<Header {...defaultProps} logoLink="/home" />)
+    render(<Header logoLink="/home" />)
 
     const logoLink = screen.getByRole('link')
 
     expect(logoLink).toHaveAttribute('href', '/home')
   })
 
   it('renders with a logo link title', () => {
-    render(<Header {...defaultProps} logoLinkTitle="Go to homepage" />)
+    render(<Header logoLinkTitle="Go to homepage" />)
 
     const logoLinkTitle = screen.getByRole('link', { name: 'Go to homepage' })
 
     expect(logoLinkTitle).toHaveTextContent('Go to homepage')
   })
 
   it('renders with links', () => {
-    const { container } = render(<Header {...defaultProps} links={<div>Menu Content</div>} />)
+    const { container } = render(<Header links={<div>Menu Content</div>} />)
 
     const menu = container.querySelector('.amsterdam-header__links')
 
@@ -70,7 +66,7 @@ describe('Header', () => {
   })
 
   it('renders with menu button', () => {
-    render(<Header {...defaultProps} menu={<button>Menu Button</button>} />)
+    render(<Header menu={<button>Menu Button</button>} />)
 
     const menu = screen.getByRole('button')
 

packages/react/src/MegaMenu/MegaMenu.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 
-type MegaMenuProps = {} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+export type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 interface MegaMenuComponent extends ForwardRefExoticComponent<MegaMenuProps & RefAttributes<HTMLDivElement>> {
   ListCategory: typeof MegaMenuListCategory

packages/react/src/MegaMenu/index.ts

@@ -1 +1,2 @@
 export { MegaMenu } from './MegaMenu'
+export type { MegaMenuProps } from './MegaMenu'

packages/react/src/Overlap/Overlap.tsx

@@ -7,11 +7,10 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
+export type OverlapProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
 export const Overlap = forwardRef(
-  (
-    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
+  ({ children, className, ...restProps }: OverlapProps, ref: ForwardedRef<HTMLDivElement>) => (
     <div {...restProps} ref={ref} className={clsx('amsterdam-overlap', className)}>
       {children}
     </div>

packages/react/src/Overlap/index.ts

@@ -1 +1,2 @@
 export { Overlap } from './Overlap'
+export type { OverlapProps } from './Overlap'

packages/react/src/Switch/Switch.tsx

@@ -7,11 +7,10 @@ import clsx from 'clsx'
 import { forwardRef, useId } from 'react'
 import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren } from 'react'
 
+export type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>
+
 export const Switch = forwardRef(
-  (
-    { className, id, ...restProps }: PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>,
-    ref: ForwardedRef<HTMLInputElement>,
-  ) => {
+  ({ className, id, ...restProps }: SwitchProps, ref: ForwardedRef<HTMLInputElement>) => {
     const inputId = id || useId()
 
     return (

packages/react/src/Switch/index.ts

@@ -1 +1,2 @@
 export { Switch } from './Switch'
+export type { SwitchProps } from './Switch'