fix(Section): make style_type property accept any string (#1636)

Also, clean up types structure to avoid later problems of inheriting HTMLElement props.

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}

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}

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}

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}

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}

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}

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 {

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

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() {

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

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' }}>