fix(Space): rewrite Space component to TypeScript (#1644)

packages/dnb-design-system-portal/src/docs/uilib/components/space/properties.md

@@ -20,7 +20,7 @@ These properties are available in many other components and elements.
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `element`     | _(optional)_ defines the HTML element used. Defaults to `div`.                                                                                                                                         |
 | `stretch`     | _(optional)_ if set to `true`, then the space element will be 100% in `width`.                                                                                                                         |
-| `inline`      | _(optional)_ if set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.                                                             |
+| `inline`      | _(optional)_ if set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.                                                              |
 | `no_collapse` | _(optional)_ if set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline="true"` in combination. |
 
 ## Zero

packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap

@@ -518,6 +518,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
       type="type"
     >
       <ForwardRef
+        as="a"
         className="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
         disabled={false}
         href="https://url"
@@ -565,13 +566,13 @@ exports[`Button component have to match href="..." snapshot 1`] = `
             </a>,
           }
         }
-        is="a"
         onClick={[Function]}
         skeleton={null}
         title="This is a button title"
         type="type"
       >
         <ElementInstance
+          as="a"
           className="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
           disabled={false}
           href="https://url"
@@ -619,7 +620,6 @@ exports[`Button component have to match href="..." snapshot 1`] = `
               </a>,
             }
           }
-          is="a"
           onClick={[Function]}
           skeleton={null}
           title="This is a button title"

packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap

@@ -800,6 +800,7 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
             onClick={[Function]}
           >
             <ForwardRef
+              as="a"
               className="dnb-button dnb-button--tertiary dnb-button--has-text dnb-global-error__back dnb-button--icon-position-left dnb-button--has-icon"
               disabled={false}
               href="href"
@@ -845,11 +846,11 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
                   </a>,
                 }
               }
-              is="a"
               onClick={[Function]}
               skeleton={null}
             >
               <ElementInstance
+                as="a"
                 className="dnb-button dnb-button--tertiary dnb-button--has-text dnb-global-error__back dnb-button--icon-position-left dnb-button--has-icon"
                 disabled={false}
                 href="href"
@@ -895,7 +896,6 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
                     </a>,
                   }
                 }
-                is="a"
                 onClick={[Function]}
                 skeleton={null}
               >

packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import classnames from 'classnames'
-import { DynamicElement, SpacingProps } from '../../shared/types'
+import { SpacingProps } from '../../shared/types'
 import {
   useHeightAnimation,
   useHeightAnimationOptions,
 } from './useHeightAnimation'
-import Space from '../space/Space'
+import Space, { SpaceProps } from '../space/Space'
+
+import type { DynamicElement } from '../../shared/types'
 
 export type HeightAnimationProps = {
   /**
@@ -37,10 +39,12 @@ export type HeightAnimationProps = {
    * Default: null
    */
   innerRef?: React.RefObject<HTMLElement>
-
-  className?: React.ReactNode
 } & useHeightAnimationOptions
 
+export type HeightAnimationAllProps = HeightAnimationProps &
+  SpacingProps &
+  React.HTMLProps<HTMLElement>
+
 export default function HeightAnimation({
   open = false,
   animate = true,
@@ -54,9 +58,10 @@ export default function HeightAnimation({
   onInit = null,
   onOpen = null,
   onAnimationEnd = null,
-  ...props
-}: HeightAnimationProps & SpacingProps) {
+  ...rest
+}: HeightAnimationAllProps) {
   const ref = React.useRef<HTMLElement>()
+  const props = rest as SpaceProps
 
   const { isInDOM, isVisible, isVisibleParallax, isAnimating } =
     useHeightAnimation(innerRef || ref, {

packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimation.test.tsx

@@ -7,7 +7,10 @@ import React from 'react'
 import { render, act, fireEvent } from '@testing-library/react'
 import ToggleButton from '../../ToggleButton'
 import { wait } from '@testing-library/user-event/dist/utils'
-import HeightAnimation, { HeightAnimationProps } from '../HeightAnimation'
+import HeightAnimation, {
+  HeightAnimationAllProps,
+  HeightAnimationProps,
+} from '../HeightAnimation'
 import HeightAnimationInstance from '../HeightAnimationInstance'
 
 beforeEach(() => {
@@ -35,7 +38,7 @@ describe('HeightAnimation', () => {
     animate = true,
     element = 'div',
     children,
-    ...props
+    ...rest
   }: Partial<HeightAnimationProps>) => {
     const [openState, setOpenState] = React.useState(open)
 
@@ -47,6 +50,8 @@ describe('HeightAnimation', () => {
       setOpenState(open)
     }, [open])
 
+    const props = rest as HeightAnimationAllProps
+
     return (
       <>
         <ToggleButton checked={openState} onChange={onChangeHandler}>

packages/dnb-eufemia/src/components/space/Space.js → packages/dnb-eufemia/src/components/space/Space.tsx

@@ -14,20 +14,95 @@ import {
   validateDOMAttributes,
 } from '../../shared/component-helper'
 import Context from '../../shared/Context'
+import { spacingPropTypes } from './SpacingHelper'
 import {
   createSpacingClasses,
   isInline,
-  spacingPropTypes,
   spacingDefaultProps,
-} from './SpacingHelper'
+} from './SpacingUtils'
 import {
   skeletonDOMAttributes,
   createSkeletonClass,
 } from '../skeleton/SkeletonHelper'
 
+import type { DynamicElement, SpacingProps } from '../../shared/types'
+
 export { spacingPropTypes }
 
-export default class Space extends React.PureComponent {
+function Element({
+  element,
+  no_collapse,
+  children,
+  innerRef,
+  ...props
+}: SpaceAllProps) {
+  const E = element as DynamicElement<any>
+  const component = (
+    <E {...props} ref={innerRef}>
+      {children}
+    </E>
+  )
+
+  if (isTrue(no_collapse)) {
+    const R = E === 'span' || isInline(Element) ? 'span' : 'div'
+    return (
+      <R
+        className={classnames(
+          'dnb-space--no-collapse',
+          isInline(Element) && 'dnb-space--inline'
+        )}
+      >
+        {component}
+      </R>
+    )
+  }
+
+  return component
+}
+
+export type SpaceProps = {
+  /**
+   * Defines the HTML element used.
+   * Default: div
+   */
+  element?: DynamicElement
+
+  /**
+   * If set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.
+   * Default: false
+   */
+  inline?: boolean
+
+  /**
+   * If set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline="true"` in combination.
+   * Default: false
+   */
+  no_collapse?: boolean
+
+  /**
+   * If set to `true`, then the space element will be 100% in `width`.
+   * Default: false
+   */
+  stretch?: boolean
+
+  /**
+   * If set to `true`, a loading skeleton will be shown.
+   * Default: false
+   */
+  skeleton?: boolean
+
+  /**
+   * Send along a custom React Ref.
+   * Default: null
+   */
+  innerRef?: React.RefObject<HTMLElement>
+} & SpacingProps
+
+export type SpaceAllProps = SpaceProps & React.HTMLProps<HTMLElement>
+
+export default class Space extends React.PureComponent<
+  SpaceAllProps | React.HTMLProps<HTMLElement>
+> {
   static tagName = 'dnb-space'
   static contextType = Context
 
@@ -102,7 +177,7 @@ export default class Space extends React.PureComponent {
       className,
 
       ...attributes
-    } = props
+    } = props as SpaceAllProps
 
     // in case we have a label already, we split this out and use this one instead
     const children = Space.getContent(this.props)
@@ -136,33 +211,3 @@ export default class Space extends React.PureComponent {
     )
   }
 }
-
-const Element = ({
-  element: E,
-  no_collapse,
-  children,
-  innerRef,
-  ...props
-}) => {
-  const component = (
-    <E {...props} ref={innerRef}>
-      {children}
-    </E>
-  )
-
-  if (isTrue(no_collapse)) {
-    const R = E === 'span' || isInline(Element) ? 'span' : 'div'
-    return (
-      <R
-        className={classnames(
-          'dnb-space--no-collapse',
-          isInline(Element) && 'dnb-space--inline'
-        )}
-      >
-        {component}
-      </R>
-    )
-  }
-
-  return component
-}