chore(Housekeeping): rewrite to TypeScript

packages/dnb-eufemia/src/components/badge/Badge.tsx

@@ -9,7 +9,7 @@ import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import Context from '../../shared/Context'
 import { ISpacingProps } from '../../shared/interfaces'
 import { SkeletonShow } from '../skeleton/Skeleton'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { usePropsWithContext } from '../../shared/component-helper'
 import { warn } from '../../shared/component-helper'
 
 export interface BadgeProps {
@@ -78,9 +78,10 @@ export const defaultProps = {
 function Badge(localProps: BadgeAndISpacingProps) {
   // Every component should have a context
   const context = React.useContext(Context)
+
   // Extract additional props from global context
-  const { children, ...props } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
+  const { children, ...props } = usePropsWithContext(
+    localProps,
     defaultProps,
     context?.Badge
   )

packages/dnb-eufemia/src/components/button/Button.d.ts

@@ -72,12 +72,7 @@ export type ButtonOnClick = string | ((...args: any[]) => any);
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
-export interface ButtonProps
-  extends Omit<
-      React.HTMLProps<HTMLElement>,
-      'disabled' | 'size' | 'title' | 'wrap'
-    >,
-    Partial<DataAttributeTypes> {
+export type ButtonProps = {
   /**
    * The content of the button can be a string or a React Element.
    */
@@ -230,7 +225,11 @@ export interface ButtonProps
    * Will be called on a click event. Returns an object with the native event: `{ event }`.
    */
   on_click?: ButtonOnClick;
-}
+} & Partial<
+  DataAttributeTypes &
+    Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>>
+>;
+
 export default class Button extends React.Component<ButtonProps, any> {
   render(): JSX.Element;
 }

packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap

@@ -824,10 +824,8 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                 onKeyDown={[Function]}
                 onTouchStart={[Function]}
               >
-                <ForwardRef(ScrollViewRef)>
+                <ForwardRef>
                   <ScrollView
-                    class={null}
-                    className={null}
                     innerRef={
                       Object {
                         "current": <div
@@ -1199,7 +1197,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                       </div>
                     </div>
                   </ScrollView>
-                </ForwardRef(ScrollViewRef)>
+                </ForwardRef>
               </div>
             </DialogContent>
           </div>

packages/dnb-eufemia/src/components/drawer/DrawerContent.tsx

@@ -27,7 +27,6 @@ export default function DrawerContent({
   containerPlacement = 'right',
   preventCoreStyle = false,
   className = null,
-  class: _className = null,
   spacing = true,
   fullscreen = 'auto',
   noAnimation = false,
@@ -61,8 +60,7 @@ export default function DrawerContent({
       isTrue(noAnimationOnMobile) && `dnb-drawer--no-animation-on-mobile`,
 
       `dnb-drawer--${containerPlacement || 'right'}`,
-      className,
-      _className
+      className
     ),
     style: (minWidth || maxWidth) && { minWidth, maxWidth },
     onClick: context?.preventClick,

packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -814,7 +814,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
               noAnimation={true}
               spacing={true}
             >
-              <ForwardRef(ScrollViewRef)
+              <ForwardRef
                 0={
                   Object {
                     "displayName": "Drawer",
@@ -834,7 +834,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                       "props": Object {},
                     }
                   }
-                  class={null}
                   className="dnb-drawer dnb-drawer--right dnb-drawer--auto-fullscreen dnb-core-style dnb-drawer--spacing dnb-drawer__align--left dnb-drawer--no-animation"
                   innerRef={
                     Object {
@@ -1214,7 +1213,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                     </div>
                   </div>
                 </ScrollView>
-              </ForwardRef(ScrollViewRef)>
+              </ForwardRef>
             </DrawerContent>
           </div>
           <span

packages/dnb-eufemia/src/components/help-button/HelpButton.tsx

@@ -0,0 +1,62 @@
+/**
+ * Web HelpButton Component
+ *
+ */
+
+import React from 'react'
+import Context from '../../shared/Context'
+import Modal from '../modal/Modal'
+import HelpButtonInstance from './HelpButtonInstance'
+import { ButtonProps } from '../button/Button'
+import { ModalProps } from '../modal/types'
+import { usePropsWithContext } from '../../shared/hooks'
+
+const defaultProps = {
+  variant: 'secondary',
+  icon_position: 'left',
+}
+
+export type HelpButtonProps = {
+  modal_content?: React.ReactNode
+  modal_props?: ModalProps
+} & ButtonProps
+
+export default function HelpButton(localProps: HelpButtonProps) {
+  const getContent = (props: HelpButtonProps) => {
+    if (props.modal_content) {
+      return props.modal_content
+    }
+    return typeof props.children === 'function'
+      ? props.children(props)
+      : props.children
+  }
+
+  const context = React.useContext(Context)
+  const props = usePropsWithContext(localProps, defaultProps)
+  const content = getContent(props)
+
+  const {
+    modal_content, // eslint-disable-line
+    children, // eslint-disable-line
+    modal_props,
+    ...params
+  } = props
+
+  if (params.icon === null) {
+    params.icon = 'question'
+  }
+
+  if (content) {
+    if (!params.title) {
+      params.title = context.getTranslation(props).HelpButton.title
+    }
+
+    return (
+      <Modal trigger_attributes={params} {...modal_props}>
+        {content}
+      </Modal>
+    )
+  }
+
+  return <HelpButtonInstance {...params} />
+}