feat(Icon): rewrite to TypeScript and hooks (#3703)

Will solve the issue described in this PR #3699

Even all the tests and types are running green, it needs extensive
manual testing.

---------

Co-authored-by: Anders <anderslangseth@gmail.com>

packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.tsx

@@ -26,6 +26,7 @@ import {
 } from './StickyMenuBar.module.scss'
 import { Link } from '../tags/Anchor'
 import GithubLogo from '../../docs/contribute/assets/github-logo.js'
+import type { IconSize } from '@dnb/eufemia/src/components/Icon'
 
 export default function StickyMenuBar({
   hideSidebarToggleButton = false,
@@ -75,7 +76,7 @@ export default function StickyMenuBar({
         <span aria-hidden className={centerWrapperStyle}>
           <Icon
             icon={PortalLogo}
-            size={48}
+            size={48 as IconSize}
             right="x-small"
             color="var(--color-black-80, #333)"
           />

packages/dnb-eufemia/src/components/accordion/Accordion.tsx

@@ -44,11 +44,11 @@ export type AccordionHeading = boolean | React.ReactNode
 export type AccordionIcon =
   | IconIcon
   | {
-      closed?: React.ReactNode | ((...args: any[]) => any)
+      closed?: IconIcon
       /**
        * If set to `true` the accordion will be expanded as its initial state.
        */
-      expanded?: React.ReactNode | ((...args: any[]) => any)
+      expanded?: IconIcon
     }
 
 export type AccordionAttributes = string | Record<string, unknown>

packages/dnb-eufemia/src/components/accordion/AccordionHeader.tsx

@@ -20,7 +20,7 @@ import {
 } from '../skeleton/SkeletonHelper'
 
 import type { HeadingLevel } from '../Heading'
-import type { IconSize } from '../Icon'
+import type { IconIcon, IconSize } from '../Icon'
 import type { SkeletonShow } from '../Skeleton'
 import type {
   AccordionIcon,
@@ -89,11 +89,10 @@ function AccordionHeaderContainer({
 }
 
 type AccordionHeaderIconIcon =
-  | React.ReactNode
-  | ((...args: any[]) => React.ReactNode)
+  | IconIcon
   | {
-      closed?: React.ReactNode | ((...args: any[]) => React.ReactNode)
-      expanded?: React.ReactNode | ((...args: any[]) => React.ReactNode)
+      closed?: IconIcon
+      expanded?: IconIcon
     }
 
 export type AccordionHeaderIconProps = {
@@ -104,32 +103,27 @@ export type AccordionHeaderIconProps = {
 }
 
 function AccordionHeaderIcon({
-  icon,
+  icon: iconProp,
   expanded,
   size = 'medium',
   icon_position,
 }: AccordionHeaderIconProps) {
+  const icon = (
+    iconProp &&
+    typeof iconProp === 'object' &&
+    'expanded' in iconProp &&
+    typeof iconProp?.expanded !== 'undefined'
+      ? iconProp[expanded ? 'expanded' : 'closed']
+      : iconProp || 'chevron-down'
+  ) as IconIcon
   return (
     <span
       className={classnames(
         'dnb-accordion__header__icon',
         icon_position && `dnb-accordion__header__icon--${icon_position}`
       )}
     >
-      <IconPrimary
-        size={size}
-        // There has to be a better way than to do so much casting
-        icon={
-          icon &&
-          typeof icon === 'object' &&
-          'expanded' in icon &&
-          typeof icon?.expanded !== 'undefined'
-            ? icon[expanded ? 'expanded' : 'closed']
-            : (icon as React.ReactNode | ((...args: any[]) => any)) ||
-              'chevron-down'
-        }
-        aria-hidden
-      />
+      <IconPrimary size={size} icon={icon} aria-hidden />
     </span>
   )
 }

packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx

@@ -77,10 +77,7 @@ const defaultProps = {
   skeleton: null,
 }
 
-const determineIcon: IconIcon = (
-  variant: string,
-  isSmallScreen: boolean
-) => {
+const determineIcon = (variant: string, isSmallScreen: boolean) => {
   switch (variant) {
     case 'home':
       return 'home-icon'

packages/dnb-eufemia/src/components/icon-primary/IconPrimary.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react'
+import Context from '../../shared/Context'
+import { extendPropsWithContext } from '../../shared/component-helper'
+import {
+  prerenderIcon,
+  prepareIcon,
+  IconAllProps,
+  IconProps,
+} from '../icon/Icon'
+
+// NB: The path reflects the rollup.config.js -> external: '../../icons/dnb/primary_icons'
+import * as primary_icons from '../../icons/dnb/primary_icons'
+import * as primary_icons_medium from '../../icons/dnb/primary_icons_medium'
+
+export * from '../icon/Icon'
+
+export type IconPrimaryProps = IconProps
+export type IconPrimaryAllProps = IconAllProps
+
+const icons = { ...primary_icons, ...primary_icons_medium }
+
+export default function IconPrimary(localProps: IconAllProps) {
+  const context = useContext(Context)
+
+  // use only the props from context, who are available here anyway
+  const props = extendPropsWithContext(
+    localProps,
+    {},
+    { skeleton: context?.skeleton },
+    context.Icon,
+    context.IconPrimary
+  )
+
+  const { icon, size, wrapperParams, iconParams, alt } = prepareIcon(
+    props,
+    context
+  )
+
+  const IconContainer = prerenderIcon({
+    icon,
+    size,
+    alt,
+    listOfIcons: icons,
+  })
+
+  if (!IconContainer) {
+    return <></>
+  }
+
+  return (
+    <span {...wrapperParams}>
+      <IconContainer {...iconParams} />
+    </span>
+  )
+}
+
+IconPrimary._supportsSpacingProps = true

packages/dnb-eufemia/src/components/icon-primary/__tests__/IconPrimary.test.tsx

@@ -5,10 +5,10 @@
 
 import React from 'react'
 import { axeComponent } from '../../../core/jest/jestSetup'
-import IconPrimary, { IconPrimaryProps } from '../IconPrimary'
+import IconPrimary, { IconPrimaryAllProps } from '../IconPrimary'
 import { render } from '@testing-library/react'
 
-const props: IconPrimaryProps = {
+const props: IconPrimaryAllProps = {
   icon: 'question',
 }