From e63d3b38bb930f454bb5c62850ac90e0580adc3d Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Thu, 13 Oct 2022 12:20:13 +0200
Subject: [PATCH] fix(Section): make style_type property accept any string

Also, clean up types structure to avoid later problems of inheriting HTMLElement props.
---
 .../components/dialog/parts/DialogBody.tsx    |  2 +-
 .../components/dialog/parts/DialogHeader.tsx  |  2 +-
 .../dialog/parts/DialogNavigation.tsx         |  2 +-
 .../components/drawer/parts/DrawerBody.tsx    |  2 +-
 .../components/drawer/parts/DrawerHeader.tsx  |  2 +-
 .../drawer/parts/DrawerNavigation.tsx         |  2 +-
 .../components/modal/parts/ModalHeader.tsx    |  7 ++++---
 .../components/modal/parts/ModalHeaderBar.tsx |  2 +-
 .../src/components/modal/parts/ModalInner.tsx |  4 +++-
 .../src/components/section/Section.tsx        |  9 +++++---
 .../section/__tests__/Section.test.tsx        | 21 +++++++++++++++++++
 ...Section.stories.js => Section.stories.tsx} |  0
 12 files changed, 41 insertions(+), 14 deletions(-)
 rename packages/dnb-eufemia/src/components/section/stories/{Section.stories.js => Section.stories.tsx} (100%)

diff --git a/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx b/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx
index 57e99abb02a..98ac30b9fd0 100644
--- a/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx
+++ b/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx
@@ -20,7 +20,7 @@ export default function DialogBody({
   styleType,
   ref, //eslint-disable-line
   ...props
-}: DialogBodyProps) {
+}: DialogBodyProps & React.HTMLProps<HTMLElement>) {
   return (
     <ModalInner
       {...props}
diff --git a/packages/dnb-eufemia/src/components/dialog/parts/DialogHeader.tsx b/packages/dnb-eufemia/src/components/dialog/parts/DialogHeader.tsx
index 392578f5aef..73de8e5564d 100644
--- a/packages/dnb-eufemia/src/components/dialog/parts/DialogHeader.tsx
+++ b/packages/dnb-eufemia/src/components/dialog/parts/DialogHeader.tsx
@@ -14,7 +14,7 @@ export default function DialogHeader({
   size = 'large',
   ref, // eslint-disable-line
   ...props
-}: DialogHeaderProps) {
+}: DialogHeaderProps & Omit<React.HTMLProps<HTMLElement>, 'size'>) {
   return (
     <ModalHeader
       {...props}
diff --git a/packages/dnb-eufemia/src/components/dialog/parts/DialogNavigation.tsx b/packages/dnb-eufemia/src/components/dialog/parts/DialogNavigation.tsx
index e4d325c6f6c..4f06aa3e8ea 100644
--- a/packages/dnb-eufemia/src/components/dialog/parts/DialogNavigation.tsx
+++ b/packages/dnb-eufemia/src/components/dialog/parts/DialogNavigation.tsx
@@ -8,7 +8,7 @@ export default function DialogNavigation({
   className,
   ref, //eslint-disable-line
   ...props
-}: ModalHeaderBarProps) {
+}: ModalHeaderBarProps & React.HTMLProps<HTMLElement>) {
   return (
     <ModalHeaderBar
       {...props}
diff --git a/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx b/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx
index 76d0f8539df..0db8329f1c5 100644
--- a/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx
+++ b/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx
@@ -20,7 +20,7 @@ export default function DrawerBody({
   styleType,
   ref, //eslint-disable-line
   ...props
-}: DrawerBodyProps) {
+}: DrawerBodyProps & React.HTMLProps<HTMLElement>) {
   return (
     <ModalInner
       {...props}
diff --git a/packages/dnb-eufemia/src/components/drawer/parts/DrawerHeader.tsx b/packages/dnb-eufemia/src/components/drawer/parts/DrawerHeader.tsx
index 98126a0c813..deed05155b7 100644
--- a/packages/dnb-eufemia/src/components/drawer/parts/DrawerHeader.tsx
+++ b/packages/dnb-eufemia/src/components/drawer/parts/DrawerHeader.tsx
@@ -14,7 +14,7 @@ export default function DrawerHeader({
   size = 'x-large',
   ref, // eslint-disable-line
   ...props
-}: DrawerHeaderProps) {
+}: DrawerHeaderProps & Omit<React.HTMLProps<HTMLElement>, 'size'>) {
   return (
     <ModalHeader
       {...props}
diff --git a/packages/dnb-eufemia/src/components/drawer/parts/DrawerNavigation.tsx b/packages/dnb-eufemia/src/components/drawer/parts/DrawerNavigation.tsx
index f5b9b78c90c..a9fe73d9cd9 100644
--- a/packages/dnb-eufemia/src/components/drawer/parts/DrawerNavigation.tsx
+++ b/packages/dnb-eufemia/src/components/drawer/parts/DrawerNavigation.tsx
@@ -8,7 +8,7 @@ export default function DrawerNavigation({
   className,
   ref, //eslint-disable-line
   ...props
-}: ModalHeaderBarProps) {
+}: ModalHeaderBarProps & React.HTMLProps<HTMLElement>) {
   return (
     <ModalHeaderBar
       {...props}
diff --git a/packages/dnb-eufemia/src/components/modal/parts/ModalHeader.tsx b/packages/dnb-eufemia/src/components/modal/parts/ModalHeader.tsx
index 1755ca17652..ff698deb73f 100644
--- a/packages/dnb-eufemia/src/components/modal/parts/ModalHeader.tsx
+++ b/packages/dnb-eufemia/src/components/modal/parts/ModalHeader.tsx
@@ -12,8 +12,7 @@ import ModalContext from '../ModalContext'
 import H1 from '../../../elements/H1'
 import { ReactChildType } from '../types'
 
-export interface ModalHeaderProps
-  extends Omit<SectionProps, 'size' | 'title'> {
+export interface ModalHeaderProps extends SectionProps {
   /**
    * The content which will appear when triggering the modal/drawer.
    */
@@ -40,7 +39,9 @@ export interface ModalHeaderProps
   size?: 'medium' | 'large' | 'x-large' | 'xx-large'
 }
 
-export default class ModalHeader extends React.PureComponent<ModalHeaderProps> {
+export default class ModalHeader extends React.PureComponent<
+  ModalHeaderProps & Omit<React.HTMLProps<HTMLElement>, 'size' | 'title'>
+> {
   static contextType = ModalContext
   render() {
     const {
diff --git a/packages/dnb-eufemia/src/components/modal/parts/ModalHeaderBar.tsx b/packages/dnb-eufemia/src/components/modal/parts/ModalHeaderBar.tsx
index 7b92930a9b3..af1ceb4db8c 100644
--- a/packages/dnb-eufemia/src/components/modal/parts/ModalHeaderBar.tsx
+++ b/packages/dnb-eufemia/src/components/modal/parts/ModalHeaderBar.tsx
@@ -30,7 +30,7 @@ interface ModalHeaderBarState {
 }
 
 export default class ModalHeaderBar extends React.PureComponent<
-  ModalHeaderBarProps,
+  ModalHeaderBarProps & React.HTMLProps<HTMLElement>,
   ModalHeaderBarState
 > {
   static contextType = ModalContext
diff --git a/packages/dnb-eufemia/src/components/modal/parts/ModalInner.tsx b/packages/dnb-eufemia/src/components/modal/parts/ModalInner.tsx
index a8e1368c798..dda25cd4ad2 100644
--- a/packages/dnb-eufemia/src/components/modal/parts/ModalInner.tsx
+++ b/packages/dnb-eufemia/src/components/modal/parts/ModalInner.tsx
@@ -16,7 +16,9 @@ export interface ModalInnerProps extends SectionProps {
   className?: string
 }
 
-export default class ModalInner extends React.PureComponent<ModalInnerProps> {
+export default class ModalInner extends React.PureComponent<
+  ModalInnerProps & React.HTMLProps<HTMLElement>
+> {
   static contextType = ModalContext
 
   componentDidMount() {
diff --git a/packages/dnb-eufemia/src/components/section/Section.tsx b/packages/dnb-eufemia/src/components/section/Section.tsx
index f6a76391fc6..81d56dd2ef2 100644
--- a/packages/dnb-eufemia/src/components/section/Section.tsx
+++ b/packages/dnb-eufemia/src/components/section/Section.tsx
@@ -41,7 +41,7 @@ export type SectionProps = {
   /**
    * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.
    */
-  style_type?: SectionStyleTypes
+  style_type?: SectionStyleTypes | string
 
   /**
    * Will add the default spacing around the wrapped content. Use `large`, `medium` or `small`. Defaults to `false`. If `true`, then `large` is used. Se the <a href="/uilib/usage/layout/spacing#spacing-helpers">available sizes</a>.
@@ -56,14 +56,17 @@ export type SectionProps = {
   inner_ref?: React.RefObject<HTMLElement>
   className?: string
   children?: React.ReactNode
-} & SpacingProps &
+}
+
+export type AllSectionProps = SectionProps &
+  SpacingProps &
   React.HTMLProps<HTMLElement>
 
 const defaultProps = {
   element: 'section',
 }
 
-export default function Section(localProps: SectionProps) {
+export default function Section(localProps: AllSectionProps) {
   const context = React.useContext(Context)
 
   // use only the props from context, who are available here anyway
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx b/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx
index 35b2552aa28..fe32a0346d0 100644
--- a/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx
+++ b/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx
@@ -38,6 +38,27 @@ describe('Section component', () => {
     ).toBe(true)
   })
 
+  it('should support any string in style_type', () => {
+    render(<Section style_type="cucstom" />)
+    expect(
+      document
+        .querySelector('section.dnb-section')
+        .classList.contains('dnb-section--cucstom')
+    ).toBe(true)
+  })
+
+  it('should support spacing props', () => {
+    render(<Section top="medium">text</Section>)
+
+    const element = document.querySelector('section.dnb-section')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-section',
+      'dnb-section--mint-green-12',
+      'dnb-space__top--medium',
+    ])
+  })
+
   it('will use props from Provider', () => {
     render(
       <Provider Section={{ style_type: 'divider' }}>
diff --git a/packages/dnb-eufemia/src/components/section/stories/Section.stories.js b/packages/dnb-eufemia/src/components/section/stories/Section.stories.tsx
similarity index 100%
rename from packages/dnb-eufemia/src/components/section/stories/Section.stories.js
rename to packages/dnb-eufemia/src/components/section/stories/Section.stories.tsx