Convert HelpButton to TypeScript

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} />
+}

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

@@ -0,0 +1,90 @@
+/**
+ * Web HelpButton Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import {
+  convertJsxToString,
+  usePropsWithContext,
+} from '../../shared/component-helper'
+import Context from '../../shared/Context'
+import { createSpacingClasses } from '../space/SpacingHelper'
+import Button, { ButtonProps } from '../button/Button'
+
+const defaultProps = {
+  variant: 'secondary',
+  icon_position: 'left',
+}
+
+export default function HelpButtonInstance(localProps: ButtonProps) {
+  const context = React.useContext(Context)
+
+  // use only the props from context, who are available here anyway
+  const props = usePropsWithContext(
+    localProps,
+    defaultProps,
+    context.FormRow,
+    context.HelpButton
+  )
+
+  const {
+    size,
+    icon,
+    on_click,
+    className,
+    class: _className,
+    ...rest
+  } = props
+
+  const params = {
+    className: classnames(
+      'dnb-help-button',
+      createSpacingClasses(props),
+      className,
+      _className
+    ),
+    size,
+    icon,
+    ...rest,
+  }
+
+  const isPotentialHelpButton =
+    !params.text || params.variant === 'tertiary'
+
+  if (isPotentialHelpButton && !params.icon && params.icon !== false) {
+    params.icon = 'question'
+  }
+
+  const isHelpButton =
+    isPotentialHelpButton &&
+    ['question', 'information'].includes(String(params.icon))
+
+  if (isHelpButton) {
+    if (!params['aria-roledescription']) {
+      params['aria-roledescription'] =
+        context.getTranslation(props).HelpButton.aria_role
+    }
+  }
+
+  if (!params.text && !params['aria-label']) {
+    let ariaLabel = convertJsxToString(props.title || props.children)
+    if (!ariaLabel) {
+      ariaLabel = context.getTranslation(props).HelpButton.title
+    }
+    params['aria-label'] = ariaLabel
+  }
+
+  if (icon === 'information' && !size) {
+    params.icon_size = 'medium'
+  }
+  if (params.title && !params.tooltip && params.tooltip !== false) {
+    params.tooltip = params.title
+  }
+  if (params.tooltip) {
+    params.title = null
+  }
+
+  return <Button on_click={on_click} {...params} />
+}

packages/dnb-eufemia/src/components/help-button/__tests__/HelpButton.test.js → packages/dnb-eufemia/src/components/help-button/__tests__/HelpButton.test.tsx

@@ -8,31 +8,26 @@ import {
   mount,
   fakeProps,
   axeComponent,
-  toJson,
   loadScss,
 } from '../../../core/jest/jestSetup'
-import Component from '../HelpButton'
+import Component, { HelpButtonProps } from '../HelpButton'
 import {
   question as QuestionIcon,
   information_medium as InformationIcon,
 } from '../../../icons'
+import { ModalProps } from '../../modal/types'
 
 const snapshotProps = fakeProps(require.resolve('../HelpButton'), {})
 snapshotProps.id = 'help-button'
 
-const modal_props = {}
+const modal_props: ModalProps = {}
 modal_props.content_id = null
 modal_props.no_animation = true
 
-const props = { modal_props }
+const props: HelpButtonProps = { modal_props }
 props.id = 'help-button'
 
 describe('HelpButton component', () => {
-  it('have to match snapshot', () => {
-    const Comp = mount(<Component {...snapshotProps} />)
-    expect(toJson(Comp)).toMatchSnapshot()
-  })
-
   it('should have question icon by default', () => {
     const Comp = mount(<Component {...props} />)
     expect(