From 9a2e52fcf6d2a0c76a8a06cceb99524e16c2beb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 13 Sep 2023 11:07:18 +0200
Subject: [PATCH] fix(Section): omit usage of nullish operator (??) to still
 support Storybook v4 (#2646)

---
 .../src/components/section/Section.tsx        |  2 +-
 .../section/__tests__/Section.test.tsx        | 47 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/dnb-eufemia/src/components/section/Section.tsx b/packages/dnb-eufemia/src/components/section/Section.tsx
index 81d5cee8a7f..ef1406a1268 100644
--- a/packages/dnb-eufemia/src/components/section/Section.tsx
+++ b/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),
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 b5551c7d20e..7872438f8b8 100644
--- a/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx
+++ b/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(