chore(TypeScript): use HProps in H1->H6 (#2104)

* chore(TypeScript): use HProps in H1->H6

* Add some h1-h6 tests

* Prefer types over empty interfaces – make ESLint happy

---------

Co-authored-by: Tobias Høegh <tobias@tujo.no>

packages/dnb-eufemia/src/elements/H.d.ts

@@ -12,12 +12,14 @@ export type HSize =
 export interface HProps
   extends React.HTMLProps<HTMLElement>,
     SpacingProps {
-  className?: string;
   as?: string;
   level?: string;
   size?: HSize;
   children?: React.ReactNode;
 }
+
+export type SharedHProps = Omit<HProps, 'as'>;
+
 export default class H extends React.Component<HProps, any> {
   static defaultProps: object;
   render(): JSX.Element;

packages/dnb-eufemia/src/elements/H1.d.ts

@@ -1,20 +1,6 @@
 import * as React from 'react';
-import type { SpacingProps } from '../shared/types';
-export type H1Size =
-  | 'xx-large'
-  | 'x-large'
-  | 'large'
-  | 'medium'
-  | 'basis'
-  | 'small'
-  | 'x-small';
+import type { SharedHProps } from './H';
 
-export interface H1Props
-  extends React.HTMLProps<HTMLElement>,
-    SpacingProps {
-  level?: string;
-  size?: H1Size;
-  children?: React.ReactNode;
-}
+export type H1Props = SharedHProps;
 declare const H1: React.FC<H1Props>;
 export default H1;

packages/dnb-eufemia/src/elements/H2.d.ts

@@ -1,20 +1,6 @@
 import * as React from 'react';
-import type { SpacingProps } from '../shared/types';
-export type H2Size =
-  | 'xx-large'
-  | 'x-large'
-  | 'large'
-  | 'medium'
-  | 'basis'
-  | 'small'
-  | 'x-small';
+import type { SharedHProps } from './H';
 
-export interface H2Props
-  extends React.HTMLProps<HTMLElement>,
-    SpacingProps {
-  level?: string;
-  size?: H2Size;
-  children?: React.ReactNode;
-}
+export type H2Props = SharedHProps;
 declare const H2: React.FC<H2Props>;
 export default H2;

packages/dnb-eufemia/src/elements/H3.d.ts

@@ -1,20 +1,6 @@
 import * as React from 'react';
-import type { SpacingProps } from '../shared/types';
-export type H3Size =
-  | 'xx-large'
-  | 'x-large'
-  | 'large'
-  | 'medium'
-  | 'basis'
-  | 'small'
-  | 'x-small';
+import type { SharedHProps } from './H';
 
-export interface H3Props
-  extends React.HTMLProps<HTMLElement>,
-    SpacingProps {
-  level?: string;
-  size?: H3Size;
-  children?: React.ReactNode;
-}
+export type H3Props = SharedHProps;
 declare const H3: React.FC<H3Props>;
 export default H3;

packages/dnb-eufemia/src/elements/H4.d.ts

@@ -1,20 +1,6 @@
 import * as React from 'react';
-import type { SpacingProps } from '../shared/types';
-export type H4Size =
-  | 'xx-large'
-  | 'x-large'
-  | 'large'
-  | 'medium'
-  | 'basis'
-  | 'small'
-  | 'x-small';
+import type { SharedHProps } from './H';
 
-export interface H4Props
-  extends React.HTMLProps<HTMLElement>,
-    SpacingProps {
-  level?: string;
-  size?: H4Size;
-  children?: React.ReactNode;
-}
+export type H4Props = SharedHProps;
 declare const H4: React.FC<H4Props>;
 export default H4;

packages/dnb-eufemia/src/elements/H5.d.ts

@@ -1,20 +1,6 @@
 import * as React from 'react';
-import type { SpacingProps } from '../shared/types';
-export type H5Size =
-  | 'xx-large'
-  | 'x-large'
-  | 'large'
-  | 'medium'
-  | 'basis'
-  | 'small'
-  | 'x-small';
+import type { SharedHProps } from './H';
 
-export interface H5Props
-  extends React.HTMLProps<HTMLElement>,
-    SpacingProps {
-  level?: string;
-  size?: H5Size;
-  children?: React.ReactNode;
-}
+export type H5Props = SharedHProps;
 declare const H5: React.FC<H5Props>;
 export default H5;

packages/dnb-eufemia/src/elements/H6.d.ts

@@ -1,21 +1,6 @@
 import * as React from 'react';
-import type { SpacingProps } from '../shared/types';
+import type { SharedHProps } from './H';
 
-export type H6Size =
-  | 'xx-large'
-  | 'x-large'
-  | 'large'
-  | 'medium'
-  | 'basis'
-  | 'small'
-  | 'x-small';
-
-export interface H6Props
-  extends React.HTMLProps<HTMLElement>,
-    SpacingProps {
-  level?: string;
-  size?: H6Size;
-  children?: React.ReactNode;
-}
+export type H6Props = SharedHProps;
 declare const H6: React.FC<H6Props>;
 export default H6;

packages/dnb-eufemia/src/elements/__tests__/Heading.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import H from '../H'
+import H1 from '../H1'
+import H2 from '../H2'
+import H3 from '../H3'
+import H4 from '../H4'
+import H5 from '../H5'
+import H6 from '../H6'
+
+describe('Heading', () => {
+  const headings = [
+    {
+      selector: '.dnb-h--xx-large',
+      component: H,
+    },
+    {
+      selector: '.dnb-h--xx-large',
+      component: H1,
+    },
+    {
+      selector: '.dnb-h--large',
+      component: H2,
+    },
+    {
+      selector: '.dnb-h--medium',
+      component: H3,
+    },
+    {
+      selector: '.dnb-h--basis',
+      component: H4,
+    },
+    {
+      selector: '.dnb-h--small',
+      component: H5,
+    },
+    {
+      selector: '.dnb-h--x-small',
+      component: H6,
+    },
+  ]
+
+  it.each(headings)(
+    '%s should support className',
+    ({ component: Component, selector }) => {
+      render(<Component className="custom-class" />)
+
+      const element = document.querySelector(selector)
+
+      expect(Array.from(element.classList)).toEqual([
+        'custom-class',
+        selector.replace(/^\./, ''),
+      ])
+    }
+  )
+
+  it.each(headings)(
+    '%s should support spacing props',
+    ({ component: Component, selector }) => {
+      render(<Component top="2rem" />)
+
+      const element = document.querySelector(selector)
+
+      expect(Array.from(element.classList)).toContain(
+        'dnb-space__top--large'
+      )
+    }
+  )
+
+  it.each(headings)(
+    '%s should use given size prop and keep element name',
+    ({ component: Component }) => {
+      render(<Component size="large" />)
+
+      const element = document.querySelector('.dnb-h--large')
+
+      expect(Array.from(element.classList)).toEqual(['dnb-h--large'])
+
+      if (Component.name === 'H') {
+        expect(element.tagName).toEqual('H1')
+      } else {
+        expect(element.tagName).toEqual(Component.name)
+      }
+    }
+  )
+
+  it.each(headings)(
+    '%s forward custom attributes',
+    ({ component: Component, selector }) => {
+      render(<Component aria-label="custom-label" />)
+
+      const element = document.querySelector(selector)
+      const attributes = Array.from(element.attributes).map(
+        (attr) => attr.name
+      )
+
+      expect(attributes).toEqual(['class', 'aria-label'])
+    }
+  )
+})