feat(FormLabel): rewrite to TypeScript

packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx

@@ -6,11 +6,12 @@ showTabs: true
 
 | Properties                              | Description                                                                                             |
 | --------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `for_id`                                | _(required)_ the `id` of the input.                                                                     |
-| `vertical`                              | _(optional)_ if set to `true`, will do the same as `label_direction` when set to **vertical**.          |
-| `title`                                 | _(optional)_ the `title` attribute of the label.                                                        |
+| `forId`                                 | _(required)_ the `id` of the input.                                                                     |
 | `text`                                  | _(optional)_ the `text` of the label.                                                                   |
+| `srOnly`                                | _(optional)_ the `id` of the input.                                                                     |
+| `vertical`                              | _(optional)_ if set to `true`, will do the same as `label_direction` when set to **vertical**.          |
 | `size`                                  | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. |
 | `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                     |
 | `element`                               | _(optional)_ defines the HTML element used. Defaults to `label`.                                        |
+| `innerRef`                              | _(optional)_ attach a React Ref to the inner label `element`.                                           |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                   |

packages/dnb-eufemia/src/components/form-label/FormLabel.tsx

@@ -0,0 +1,106 @@
+/**
+ * Web FormLabel Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import {
+  extendPropsWithContext,
+  isTrue,
+  validateDOMAttributes,
+} from '../../shared/component-helper'
+import { createSpacingClasses } from '../space/SpacingHelper'
+import {
+  createSkeletonClass,
+  skeletonDOMAttributes,
+} from '../skeleton/SkeletonHelper'
+import { pickFormElementProps } from '../../shared/helpers/filterValidProps'
+import Context from '../../shared/Context'
+import {
+  DynamicElement,
+  DynamicElementParams,
+  SpacingProps,
+} from '../../shared/types'
+
+export type FormLabelProps = {
+  forId?: string
+  element?: DynamicElement<HTMLLabelElement>
+  text?: React.ReactNode
+  size?: 'basis' | 'medium' | 'large'
+  id?: string
+  skeleton?: boolean
+  label?: React.ReactNode
+  vertical?: boolean
+  srOnly?: boolean
+  innerRef?: React.RefObject<HTMLElement>
+
+  /** @deprecated use forId instead */
+  for_id?: string
+  /** @deprecated use srOnly instead */
+  sr_only?: boolean
+  /** @deprecated use labelDirection instead (was not documented before) */
+  label_direction?: 'vertical' | 'horizontal'
+}
+
+export type FormLabelAllProps = FormLabelProps &
+  React.HTMLAttributes<HTMLLabelElement> &
+  SpacingProps
+
+export default function FormLabel(localProps: FormLabelAllProps) {
+  const context = React.useContext(Context)
+
+  // use only the props from context, who are available here anyway
+  const props = extendPropsWithContext(
+    localProps,
+    null,
+    { skeleton: context?.skeleton },
+    pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11
+    pickFormElementProps(context?.formElement),
+    context?.FormLabel
+  )
+
+  const {
+    forId,
+    text,
+    srOnly,
+    vertical,
+    size,
+    skeleton,
+    element: Element = 'label',
+    innerRef,
+    className,
+    children,
+
+    /** @deprecated can be removed in v11 */
+    for_id,
+    sr_only,
+    label_direction,
+
+    ...attributes
+  } = props
+
+  const params = {
+    className: classnames(
+      'dnb-form-label',
+      (isTrue(vertical) || label_direction === 'vertical') &&
+        `dnb-form-label--vertical`,
+      (srOnly || isTrue(sr_only)) && 'dnb-sr-only',
+      size && `dnb-h--${size}`,
+      createSkeletonClass('font', skeleton, context),
+      createSpacingClasses(props),
+      className
+    ),
+    htmlFor: forId || for_id,
+    ...(attributes as DynamicElementParams),
+  }
+
+  params['ref'] = innerRef
+
+  skeletonDOMAttributes(params, skeleton, context)
+  validateDOMAttributes(localProps, params)
+
+  return <Element {...params}>{text || children}</Element>
+}
+
+FormLabel._supportsSpacingProps = true