From c6e9d2299529a513999979a4bea7045d77c7fcaa Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Fri, 26 Aug 2022 15:53:57 +0200
Subject: [PATCH] fix(withCamelCaseProps): make exception for className

---
 .../__snapshots__/Dialog.test.tsx.snap        |  3 --
 .../__snapshots__/Drawer.test.tsx.snap        |  3 --
 .../__snapshots__/Modal.test.tsx.snap         |  4 ---
 .../__snapshots__/StepIndicator.test.js.snap  |  3 --
 .../__tests__/withCamelCaseProps.test.tsx     | 35 +++++++++++++++++++
 .../__tests__/withSnakeCaseProps.test.tsx     | 16 +++++++++
 .../src/shared/helpers/withCamelCaseProps.tsx |  6 ++++
 7 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
index b62c917321c..b14fd3871c0 100644
--- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -81,7 +81,6 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
       bar_content={null}
       class={null}
       className={null}
-      class_name={null}
       close_button_attributes={null}
       close_modal={null}
       close_title="Lukk"
@@ -707,7 +706,6 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
         bypass_invalidation_selectors={null}
         class={null}
         className={null}
-        class_name={null}
         close={[Function]}
         close_button_attributes={null}
         close_modal={null}
@@ -763,7 +761,6 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
           bypass_invalidation_selectors={null}
           class={null}
           className={null}
-          class_name={null}
           close={[Function]}
           close_button_attributes={null}
           close_modal={null}
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 9b9556cc62b..7450d33c1a7 100644
--- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -80,7 +80,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
       bar_content={null}
       class={null}
       className={null}
-      class_name={null}
       close_button_attributes={null}
       close_modal={null}
       close_title="Lukk"
@@ -705,7 +704,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
         bypass_invalidation_selectors={null}
         class={null}
         className={null}
-        class_name={null}
         close={[Function]}
         close_button_attributes={null}
         close_modal={null}
@@ -760,7 +758,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
           bypass_invalidation_selectors={null}
           class={null}
           className={null}
-          class_name={null}
           close={[Function]}
           close_button_attributes={null}
           close_modal={null}
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
index c8ce54e133d..c1b814ef92f 100644
--- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -71,7 +71,6 @@ exports[`Modal component have to match snapshot 1`] = `
     bar_content={null}
     class={null}
     className={null}
-    class_name={null}
     close_button_attributes={null}
     close_modal={null}
     close_title="Lukk"
@@ -702,7 +701,6 @@ exports[`Modal component have to match snapshot 1`] = `
       bypass_invalidation_selectors={null}
       class={null}
       className={null}
-      class_name={null}
       close={[Function]}
       close_button_attributes={null}
       close_modal={null}
@@ -749,7 +747,6 @@ exports[`Modal component have to match snapshot 1`] = `
         bypass_invalidation_selectors={null}
         class={null}
         className={null}
-        class_name={null}
         close={[Function]}
         close_button_attributes={null}
         close_modal={null}
@@ -804,7 +801,6 @@ exports[`Modal component have to match snapshot 1`] = `
             bypass_invalidation_selectors={null}
             class={null}
             className={null}
-            class_name={null}
             close_modal={null}
             containerPlacement={null}
             focus_selector={null}
diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
index 111cf48b282..3f78de1552a 100644
--- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
+++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
@@ -2667,7 +2667,6 @@ Array [
               bar_content={null}
               class={null}
               className={null}
-              class_name={null}
               close_button_attributes={null}
               close_modal={null}
               close_title="Lukk"
@@ -5361,7 +5360,6 @@ Array [
               bar_content={null}
               class={null}
               className={null}
-              class_name={null}
               close_button_attributes={null}
               close_modal={null}
               close_title="Lukk"
@@ -8069,7 +8067,6 @@ Array [
               bar_content={null}
               class={null}
               className={null}
-              class_name={null}
               close_button_attributes={null}
               close_modal={null}
               close_title="Lukk"
diff --git a/packages/dnb-eufemia/src/shared/helpers/__tests__/withCamelCaseProps.test.tsx b/packages/dnb-eufemia/src/shared/helpers/__tests__/withCamelCaseProps.test.tsx
index 50711f67ac4..228592a3020 100644
--- a/packages/dnb-eufemia/src/shared/helpers/__tests__/withCamelCaseProps.test.tsx
+++ b/packages/dnb-eufemia/src/shared/helpers/__tests__/withCamelCaseProps.test.tsx
@@ -92,6 +92,41 @@ describe('withCamelCaseProps', () => {
     `)
   })
 
+  it('will handle className correctly', () => {
+    type ExtraTypes = {
+      className?: string
+    }
+    const Component = withCamelCaseProps(
+      (props: IncludeCamelCase<OriginalProps> & ExtraTypes) => {
+        return <Original {...props} />
+      }
+    )
+
+    const { asFragment } = render(<Component className="value" />)
+
+    expect(screen.queryByTestId('props').textContent).toMatch(
+      '{"className":"value"}'
+    )
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div
+          data-testid="content"
+        >
+          <div
+            data-testid="props"
+          >
+            {"className":"value"}
+          </div>
+          <div
+            data-testid="context"
+          >
+            {}
+          </div>
+        </div>
+      </DocumentFragment>
+    `)
+  })
+
   it('will render with enzyme', () => {
     const Comp = mount(<Component snake_case={false} camelCase={1} />)
 
diff --git a/packages/dnb-eufemia/src/shared/helpers/__tests__/withSnakeCaseProps.test.tsx b/packages/dnb-eufemia/src/shared/helpers/__tests__/withSnakeCaseProps.test.tsx
index 4de7c4a3ed6..64539f666a9 100644
--- a/packages/dnb-eufemia/src/shared/helpers/__tests__/withSnakeCaseProps.test.tsx
+++ b/packages/dnb-eufemia/src/shared/helpers/__tests__/withSnakeCaseProps.test.tsx
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react'
 import React from 'react'
 import {
   withSnakeCaseProps,
+  convertSnakeCaseProps,
   classWithSnakeCaseProps,
   IncludeSnakeCase,
 } from '../withSnakeCaseProps'
@@ -423,3 +424,18 @@ describe('classWithSnakeCaseProps', () => {
     expect(onUpdate).toHaveBeenCalledTimes(2)
   })
 })
+
+describe('convertSnakeCaseProps', () => {
+  it('will convert', () => {
+    const props = {
+      foo_bar: 'value',
+      snake_case: { foo_bar: 123 },
+    }
+    const result = convertSnakeCaseProps(props)
+
+    expect(result).toEqual({
+      fooBar: 'value',
+      snakeCase: { foo_bar: 123 },
+    })
+  })
+})
diff --git a/packages/dnb-eufemia/src/shared/helpers/withCamelCaseProps.tsx b/packages/dnb-eufemia/src/shared/helpers/withCamelCaseProps.tsx
index 870fc881061..7988a89ec9a 100644
--- a/packages/dnb-eufemia/src/shared/helpers/withCamelCaseProps.tsx
+++ b/packages/dnb-eufemia/src/shared/helpers/withCamelCaseProps.tsx
@@ -88,6 +88,12 @@ function convertCamelCaseProps<P>(props: P) {
   const newProps = { ...props }
 
   for (const key in props) {
+    switch (key) {
+      case 'className': {
+        continue
+      }
+    }
+
     if (/^[a-z]+[A-Z]/.test(key)) {
       newProps[toSnakeCase(key)] = props[key]
       delete newProps[key]