fix(Section): omit usage of nullish operator (??) to still support St…

…orybook v4 (#2646)

packages/dnb-eufemia/src/components/section/Section.tsx

@@ -111,7 +111,7 @@ export default function Section(localProps: SectionAllProps) {
   const params = {
     className: classnames(
       'dnb-section',
-      `dnb-section--${variant ?? (style_type || 'default')}`,
+      `dnb-section--${variant ? variant : style_type || 'default'}`,
       spacing &&
         `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,
       createSpacingClasses(props),

packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx

@@ -21,6 +21,53 @@ describe('Section component', () => {
     ).toContain('dnb-section--divider')
   })
 
+  it('should support "variant" props and takes precedence over "style_type"', () => {
+    const { rerender } = render(<Section variant="warning">text</Section>)
+
+    const element = document.querySelector('section.dnb-section')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-section',
+      'dnb-section--warning',
+    ])
+
+    rerender(
+      <Section variant="info" style_type="divider">
+        text
+      </Section>
+    )
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-section',
+      'dnb-section--info',
+    ])
+  })
+
+  it('should support custom class name', () => {
+    render(<Section className="custom-name">text</Section>)
+
+    const element = document.querySelector('section.dnb-section')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-section',
+      'dnb-section--default',
+      'custom-name',
+    ])
+  })
+
+  it('should support custom html attributes', () => {
+    render(<Section aria-label="Aria Label">text</Section>)
+
+    const element = document.querySelector('section.dnb-section')
+
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class', 'aria-label'])
+    expect(element.getAttribute('aria-label')).toBe('Aria Label')
+  })
+
   it('should support any string in style_type', () => {
     render(<Section style_type="cucstom" />)
     expect(